Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 | 1x 1x | import {useMemo} from 'react'
import cx from 'classnames'
import PropTypes from 'prop-types'
import PolymorphicElement from '@s-ui/react-primitive-polymorphic-element'
import {BASE_CLASS, CELL_NUMBERS} from '../settings.js'
import {getColSpanClassNamesTransform} from './settings.js'
export default function LayoutGridItem({
as = 'div',
children,
className,
colSpan = 1,
l,
lOffset,
m,
mOffset,
s,
sOffset,
xl,
xlOffset,
xs,
xsOffset,
xxl,
xxlOffset,
xxs,
xxsOffset,
...props
}) {
const spanClassnames = useMemo(
() => getColSpanClassNamesTransform({colSpan, xxl, xl, l, m, s, xs, xxs}),
[colSpan, xxl, xl, l, m, s, xs, xxs]
)
const classNames = cx(
`${BASE_CLASS}-item`,
spanClassnames,
xxsOffset && `${BASE_CLASS}-item--xxsOffset-${xxsOffset}`,
xsOffset && `${BASE_CLASS}-item--xsOffset-${xsOffset}`,
sOffset && `${BASE_CLASS}-item--sOffset-${sOffset}`,
mOffset && `${BASE_CLASS}-item--mOffset-${mOffset}`,
lOffset && `${BASE_CLASS}-item--lOffset-${lOffset}`,
xlOffset && `${BASE_CLASS}-item--xlOffset-${xlOffset}`,
xxlOffset && `${BASE_CLASS}-item--xxlOffset-${xxlOffset}`,
className
)
return (
<PolymorphicElement as={as} className={classNames} {...props}>
{children}
</PolymorphicElement>
)
}
LayoutGridItem.displayName = 'LayoutGridItem'
LayoutGridItem.propTypes = {
as: PropTypes.elementType,
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Allows you to add extra styles and avoid extra DOM elements to style purposes.
*/
className: PropTypes.string,
/***
* Defines the number of columns an item should span
*/
colSpan: PropTypes.oneOfType([PropTypes.oneOf(CELL_NUMBERS), PropTypes.objectOf(PropTypes.oneOf(CELL_NUMBERS))]),
/**
* Number of cells the component has to fill. It's applied for the `l` breakpoint and wider screens.
*/
l: PropTypes.oneOf(CELL_NUMBERS),
/**
* Number of cells offset to move component. It's applied for the `l` breakpoint and wider screens.
*/
lOffset: PropTypes.oneOf(CELL_NUMBERS),
/**
* Number of cells the component has to fill. It's applied for the `m` breakpoint and wider screens.
*/
m: PropTypes.oneOf(CELL_NUMBERS),
/**
* Number of cells offset to move component. It's applied for the `m` breakpoint and wider screens.
*/
mOffset: PropTypes.oneOf(CELL_NUMBERS),
/**
* Number of cells the component has to fill. It's applied for the `s` breakpoint and wider screens.
*/
s: PropTypes.oneOf(CELL_NUMBERS),
/**
* Number of cells offset to move component. It's applied for the `s` breakpoint and wider screens.
*/
sOffset: PropTypes.oneOf(CELL_NUMBERS),
/**
* Number of cells the component has to fill. It's applied for the `xl` breakpoint and wider screens.
*/
xl: PropTypes.oneOf(CELL_NUMBERS),
/**
* Number of cells offset to move component. It's applied for the `xl` breakpoint and wider screens.
*/
xlOffset: PropTypes.oneOf(CELL_NUMBERS),
/**
* Number of cells the component has to fill. It's applied for the `xs` breakpoint and wider screens.
*/
xs: PropTypes.oneOf(CELL_NUMBERS),
/**
* Number of cells offset to move component. It's applied for the `xs` breakpoint and wider screens.
*/
xsOffset: PropTypes.oneOf(CELL_NUMBERS),
/**
* Number of cells the component has to fill. It's applied for the `xxl` breakpoint and wider screens.
*/
xxl: PropTypes.oneOf(CELL_NUMBERS),
/**
* Number of cells offset to move component. It's applied for the `xxl` breakpoint and wider screens.
*/
xxlOffset: PropTypes.oneOf(CELL_NUMBERS),
/**
* Number of cells the component has to fill. It's applied for the `xxs` breakpoint and wider screens.
*/
xxs: PropTypes.oneOf(CELL_NUMBERS),
/**
* Number of cells offset to move component. It's applied for the `xxs` breakpoint and wider screens.
*/
xxsOffset: PropTypes.oneOf(CELL_NUMBERS)
}
|