@geezee/react-ui/esm/grid/grid-container.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import useTheme from '../styles/use-theme';
import GridBasicItem from './basic-item';
var defaultProps = {
  gap: 0,
  wrap: 'wrap',
  className: ''
};

var GridContainer = function GridContainer(_ref) {
  var gap = _ref.gap,
      wrap = _ref.wrap,
      children = _ref.children,
      className = _ref.className,
      props = _objectWithoutProperties(_ref, ["gap", "wrap", "children", "className"]);

  var theme = useTheme();
  var gapUnit = useMemo(function () {
    return "calc(".concat(gap, " * ").concat(theme.layout.gapQuarter, ")");
  }, [gap, theme.layout.gapQuarter]);
  var _styles$className = {
    styles: /*#__PURE__*/React.createElement(_JSXStyle, {
      id: "1342869163",
      dynamic: [gapUnit, wrap]
    }, ".__jsx-style-dynamic-selector{--gaid-gap-unit:".concat(gapUnit, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:").concat(wrap, ";-ms-flex-wrap:").concat(wrap, ";flex-wrap:").concat(wrap, ";box-sizing:border-box;margin:calc(-1 * var(--gaid-gap-unit));width:calc(100% + var(--gaid-gap-unit) * 2);}")),
    className: _JSXStyle.dynamic([["1342869163", [gapUnit, wrap]]])
  },
      resolveClassName = _styles$className.className,
      styles = _styles$className.styles;
  return /*#__PURE__*/React.createElement(GridBasicItem, _extends({
    className: "".concat(resolveClassName, " ").concat(className)
  }, props), children, styles);
};

GridContainer.defaultProps = defaultProps;
export default React.memo(GridContainer);