mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-28 20:25:29 +08:00
d4a1e02430
* feat(scaleable): add scaleable props to each component * chore(scaleable): update the exported type * feat: apply scaleable to components chore: remove with-default test: improve testcase for scaleable chore: resolve test warning ci: upgrade nodejs to latest lts docs: fix type error in document site * docs: update documents to be compatible with scaleable chore: fix build errors * chore: remove all size-related attributes docs: improve guide document * docs: add scaleable documentation test: update snapshots chore: remove unused * feat: add scaleable to grid components * docs: improve docs * test: update snapshots * fix(grid): fix basic component props
58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import React from 'react'
|
|
import useScaleable, { withScaleable } from '../use-scaleable'
|
|
|
|
interface Props {
|
|
className?: string
|
|
}
|
|
|
|
const defaultProps = {
|
|
className: '',
|
|
}
|
|
|
|
type NativeAttrs = Omit<React.HTMLAttributes<HTMLElement>, keyof Props>
|
|
export type ModalContentProps = Props & NativeAttrs
|
|
|
|
const ModalContentComponent: React.FC<React.PropsWithChildren<ModalContentProps>> = ({
|
|
className,
|
|
children,
|
|
...props
|
|
}: React.PropsWithChildren<ModalContentProps> & typeof defaultProps) => {
|
|
const { SCALES } = useScaleable()
|
|
|
|
return (
|
|
<>
|
|
<div className={`content ${className}`} {...props}>
|
|
{children}
|
|
</div>
|
|
<style jsx>{`
|
|
.content {
|
|
position: relative;
|
|
text-align: left;
|
|
font-size: ${SCALES.font(1)};
|
|
width: ${SCALES.width(1, 'auto')};
|
|
height: ${SCALES.height(1, 'auto')};
|
|
padding: ${SCALES.pt(1.3125)} ${SCALES.pr(1.3125)} ${SCALES.pb(0.6625)}
|
|
${SCALES.pl(1.3125)};
|
|
margin: ${SCALES.mt(0)}
|
|
${SCALES.mr(0, 'calc(var(--modal-wrapper-padding-right) * -1)')}
|
|
${SCALES.mb(0)}
|
|
${SCALES.ml(0, 'calc(var(--modal-wrapper-padding-left) * -1)')};
|
|
}
|
|
|
|
.content > :global(*:first-child) {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.content > :global(*:last-child) {
|
|
margin-bottom: 0;
|
|
}
|
|
`}</style>
|
|
</>
|
|
)
|
|
}
|
|
|
|
ModalContentComponent.defaultProps = defaultProps
|
|
ModalContentComponent.displayName = 'GeistModalContent'
|
|
const ModalContent = withScaleable(ModalContentComponent)
|
|
export default ModalContent
|