@greensight/gds/scss/cjs/components/GridLayout/index.js

Greensight Design System

'use client';
var index = require('../../index-DpARvNVo.js');
var React = require('react');
var useGenerateProperty = require('../../useGenerateProperty-DHwkeN7J.js');
var scale = require('../../scale-CDrjtMXp.js');
var components_GridLayout_helpers = require('./helpers.js');
var useTheme = require('../../useTheme-Cmzhs1Ba.js');

var _excluded = ["as", "cols", "gap", "rows", "justify", "align", "className", "children"];
var DEFAULT_COMPONENT = 'div';

/**
 * Grid layout component
 */
var GridComponent = function GridComponent(_ref, ref) {
  var ComponentProp = _ref.as,
    _ref$cols = _ref.cols,
    cols = _ref$cols === void 0 ? 12 : _ref$cols,
    _ref$gap = _ref.gap,
    gap = _ref$gap === void 0 ? scale.scale(3) : _ref$gap,
    rows = _ref.rows,
    justify = _ref.justify,
    align = _ref.align,
    className = _ref.className,
    children = _ref.children,
    props = index._objectWithoutProperties(_ref, _excluded);
  var Component = ComponentProp || DEFAULT_COMPONENT;
  var _useScssTheme = useTheme.useScssTheme(),
    styles = _useScssTheme.components.gridLayout.index;
  var gridTemplateColumns = useGenerateProperty.useCSSProperty({
    value: cols,
    transform: components_GridLayout_helpers.colsTransform
  });
  var gridTemplateRows = useGenerateProperty.useCSSProperty({
    value: rows,
    transform: components_GridLayout_helpers.rowsTransform
  });
  var gridGap = useGenerateProperty.useCSSProperty({
    value: gap,
    transform: components_GridLayout_helpers.gapTransform
  });
  var justifyContent = useGenerateProperty.useCSSProperty({
    value: justify
  });
  var alignItems = useGenerateProperty.useCSSProperty({
    value: align
  });
  var propArray = React.useMemo(function () {
    var properties = [];
    if (gridTemplateColumns) properties.push({
      name: 'cols',
      value: gridTemplateColumns
    });
    if (gridTemplateRows) properties.push({
      name: 'rows',
      value: gridTemplateRows
    });
    if (gridGap) properties.push({
      name: 'gap',
      value: gridGap
    });
    if (justifyContent) properties.push({
      name: 'justify',
      value: justifyContent
    });
    if (alignItems) properties.push({
      name: 'align',
      value: alignItems
    });
    return properties;
  }, [alignItems, gridGap, gridTemplateColumns, gridTemplateRows, justifyContent]);
  var _useGenerateProperty = useGenerateProperty.useGenerateProperty({
      name: 'gridLayout',
      props: propArray,
      styles: styles
    }),
    mediaStyles = _useGenerateProperty.mediaStyles,
    vars = _useGenerateProperty.vars;
  return /*#__PURE__*/React.createElement(Component, index._extends({
    ref: ref,
    className: index.cn(styles.gridLayout, mediaStyles, className),
    style: vars
  }, props), children);
};
var GridLayout = /*#__PURE__*/React.forwardRef(GridComponent);

exports.GridLayout = GridLayout;