@wix/design-system
Version:
@wix/design-system
37 lines • 1.37 kB
JavaScript
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { stVars as spacingStVars } from '../Foundation/stylable/spacing.st.css.js';
import { st, classes } from './Layout.st.css.js';
const formatSpacingValue = (value) => {
if (typeof value === 'number') {
return `${value}px`;
}
return spacingStVars[value] || `${value}`;
};
const Layout = ({ children, gap = '24px', cols, justifyItems, alignItems, rowHeight = 'auto', dataHook, height, className, }) => {
const smartGap = useMemo(() => formatSpacingValue(gap), [gap]);
return (React.createElement("div", { "data-hook": dataHook, "data-gap": smartGap, style: {
height,
gap: smartGap,
justifyItems,
alignItems,
gridAutoRows: rowHeight,
gridTemplateColumns: cols
? `repeat(${cols}, minmax(0, 1fr))`
: undefined,
}, className: st(classes.root, className), children: children }));
};
Layout.displayName = 'Layout';
Layout.propTypes = {
dataHook: PropTypes.any,
children: PropTypes.any,
className: PropTypes.any,
gap: PropTypes.any,
cols: PropTypes.any,
justifyItems: PropTypes.any,
alignItems: PropTypes.any,
rowHeight: PropTypes.any,
height: PropTypes.any,
};
export default Layout;
//# sourceMappingURL=Layout.js.map