wix-style-react
Version:
61 lines (53 loc) • 2.11 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './styles.st.css';
import { WixStyleReactContext } from '../../WixStyleReactProvider/context';
var DEFAULT_GAP = '30px';
var REDUCED_SPACING_GAP = '24px';
var Layout = function Layout(_ref) {
var children = _ref.children,
gap = _ref.gap,
cols = _ref.cols,
justifyItems = _ref.justifyItems,
alignItems = _ref.alignItems,
rowHeight = _ref.rowHeight,
dataHook = _ref.dataHook,
className = _ref.className;
return /*#__PURE__*/React.createElement(WixStyleReactContext.Consumer, null, function (_ref2) {
var reducedSpacingAndImprovedLayout = _ref2.reducedSpacingAndImprovedLayout;
return /*#__PURE__*/React.createElement("div", {
"data-hook": dataHook,
style: {
gap: gap === DEFAULT_GAP && reducedSpacingAndImprovedLayout ? REDUCED_SPACING_GAP : gap,
justifyItems: justifyItems,
alignItems: alignItems,
gridAutoRows: rowHeight,
gridTemplateColumns: cols ? "repeat(".concat(cols, ", minmax(0, 1fr))") : undefined
},
className: st(classes.root, className),
children: children
});
});
};
Layout.displayName = 'Layout';
Layout.propTypes = {
/** hook for testing purposes */
dataHook: PropTypes.string,
/** one or more Cell components. Other nodes are accepted although not recommended */
children: PropTypes.node,
/** distance between cells both vertically and horizontally */
gap: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** set custom amount of columns to be rendered. Default is 12 which means at `<Cell span={12}/>` occupies all columns, in other words, full width */
cols: PropTypes.number,
/** is used to justify the grid items along the row axis */
justifyItems: PropTypes.string,
/** is used to aligns the grid items along the column axis */
alignItems: PropTypes.string,
/** Sets all rows to a given height. */
rowHeight: PropTypes.string
};
Layout.defaultProps = {
gap: DEFAULT_GAP,
rowHeight: 'auto'
};
export default Layout;