wix-style-react
Version:
wix-style-react
43 lines • 1.98 kB
JavaScript
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { stVars as spacingStVars } from '../Foundation/stylable/spacing.st.css';
import { st, classes } from './Layout.st.css';
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, className, }) => {
const smartGap = useMemo(() => formatSpacingValue(gap), [gap]);
return (React.createElement("div", { "data-hook": dataHook, "data-gap": smartGap, style: {
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 = {
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook: PropTypes.string,
/** Accept single or multiple compound <Cell/> elements which store content items. Other nodes are accepted but not recommended. */
children: PropTypes.node,
/** Specifies a CSS class name to be appended to the component’s root element. */
className: PropTypes.string,
/** Control both vertical and horizontal distance between layout cells */
gap: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Set a number of grid columns to be rendered. Default number is 12. */
cols: PropTypes.number,
/** Align grid items on the X axis */
justifyItems: PropTypes.string,
/** Aligns grid items on the Y axis */
alignItems: PropTypes.string,
/** Set all rows to have the same height in pixels or percentage */
rowHeight: PropTypes.string,
};
export default Layout;
//# sourceMappingURL=Layout.js.map