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
50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
import React from 'react'
|
|
|
|
interface Props {
|
|
span?: number
|
|
offset?: number
|
|
component?: keyof JSX.IntrinsicElements
|
|
className?: string
|
|
}
|
|
|
|
const defaultProps = {
|
|
span: 24,
|
|
offset: 0,
|
|
component: 'div' as keyof JSX.IntrinsicElements,
|
|
className: '',
|
|
}
|
|
|
|
type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
|
|
export type ColProps = Props & NativeAttrs
|
|
|
|
const Col: React.FC<React.PropsWithChildren<ColProps>> = ({
|
|
component,
|
|
children,
|
|
span,
|
|
offset,
|
|
className,
|
|
...props
|
|
}: React.PropsWithChildren<ColProps> & typeof defaultProps) => {
|
|
const Component = component
|
|
|
|
return (
|
|
<Component className={`col ${className}`} {...props}>
|
|
{children}
|
|
<style jsx>{`
|
|
.col {
|
|
float: left;
|
|
box-sizing: border-box;
|
|
padding-left: calc(var(--row-gap) / 2);
|
|
padding-right: calc(var(--row-gap) / 2);
|
|
width: ${(100 / 24) * span}%;
|
|
margin-left: ${(100 / 24) * offset}%;
|
|
}
|
|
`}</style>
|
|
</Component>
|
|
)
|
|
}
|
|
|
|
Col.defaultProps = defaultProps
|
|
Col.displayName = 'GeistCol'
|
|
export default Col
|