kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-04-25 21:05:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(grid): hide item when unit size is 0

Browse Source
This commit is contained in:
unix
2020-06-20 13:05:23 +08:00
parent f3d9c9ddf1
commit 8597b0ddc4
1 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/grid/basic-item.tsx
View File

@@ -32,19 +32,23 @@ type ItemLayoutValue = {
grow: number
width: string
basis: string
display: string
}
const getItemLayout = (val: BreakpointsValue): ItemLayoutValue => {
const display = val === 0 ? 'none' : 'flex'
if (typeof val === 'number') {
const width = (100 / 24) * val
const ratio = width > 100 ? '100%' : width < 0 ? '0' : `${width}%`
return {
grow: 0,
display,
width: ratio,
basis: ratio,
}
}
return {
grow: 1,
display,
width: '100%',
basis: '0',
}
@@ -77,11 +81,11 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
xl,
}
const classString = Object.keys(aligns).reduce((pre, name) => {
if (Boolean(aligns[name]) && aligns[name] !== 0) return `${pre} ${name}`
if (aligns[name] !== undefined && aligns[name] !== false) return `${pre} ${name}`
return pre
}, '')
return classString.trim()
}, [justify, direction, alignItems, alignContent])
}, [justify, direction, alignItems, alignContent, xs, sm, md, lg, xl])
const layout = useMemo<
{
@@ -125,6 +129,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
flex-grow: ${layout.xs.grow};
max-width: ${layout.xs.width};
flex-basis: ${layout.xs.basis};
display: ${layout.xs.display};
}
@media only screen and (max-width: ${theme.breakpoints.xs.max}) {
@@ -132,6 +137,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
flex-grow: ${layout.xs.grow};
max-width: ${layout.xs.width};
flex-basis: ${layout.xs.basis};
display: ${layout.xs.display};
}
}
@@ -140,6 +146,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
flex-grow: ${layout.sm.grow};
max-width: ${layout.sm.width};
flex-basis: ${layout.sm.basis};
display: ${layout.sm.display};
}
}
@@ -148,6 +155,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
flex-grow: ${layout.md.grow};
max-width: ${layout.md.width};
flex-basis: ${layout.md.basis};
display: ${layout.md.display};
}
}
@@ -156,6 +164,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
flex-grow: ${layout.lg.grow};
max-width: ${layout.lg.width};
flex-basis: ${layout.lg.basis};
display: ${layout.lg.display};
}
}
@@ -164,6 +173,7 @@ const GridBasicItem: React.FC<React.PropsWithChildren<GridBasicItemProps>> = ({
flex-grow: ${layout.xl.grow};
max-width: ${layout.xl.width};
flex-basis: ${layout.xl.basis};
display: ${layout.xl.display};
}
}
`}</style>