wix-style-react/dist/src/Layout/Layout.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _spacingSt = require("../Foundation/stylable/spacing.st.css");
var _LayoutSt = require("./Layout.st.css");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Layout/Layout.js";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var formatSpacingValue = value => {
  if (typeof value === 'number') {
    return "".concat(value, "px");
  }
  return _spacingSt.stVars[value] || "".concat(value);
};
var Layout = _ref => {
  var {
    children,
    gap = '24px',
    cols,
    justifyItems,
    alignItems,
    rowHeight = 'auto',
    dataHook,
    className
  } = _ref;
  var smartGap = (0, _react.useMemo)(() => formatSpacingValue(gap), [gap]);
  return /*#__PURE__*/_react.default.createElement("div", {
    "data-hook": dataHook,
    "data-gap": smartGap,
    style: {
      gap: smartGap,
      justifyItems,
      alignItems,
      gridAutoRows: rowHeight,
      gridTemplateColumns: cols ? "repeat(".concat(cols, ", minmax(0, 1fr))") : undefined
    },
    className: (0, _LayoutSt.st)(_LayoutSt.classes.root, className),
    children: children,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 25,
      columnNumber: 5
    }
  });
};
Layout.displayName = 'Layout';
Layout.propTypes = {
  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook: _propTypes.default.string,
  /** Accept single or multiple compound <Cell/> elements which store content items. Other nodes are accepted but not recommended. */
  children: _propTypes.default.node,
  /** Specifies a CSS class name to be appended to the component’s root element. */
  className: _propTypes.default.string,
  /** Control both vertical and horizontal distance between layout cells */
  gap: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  /** Set a number of grid columns to be rendered. Default number is 12. */
  cols: _propTypes.default.number,
  /** Align grid items on the X axis */
  justifyItems: _propTypes.default.string,
  /** Aligns grid items on the Y axis */
  alignItems: _propTypes.default.string,
  /** Set all rows to have the same height in pixels or percentage */
  rowHeight: _propTypes.default.string
};
var _default = exports.default = Layout;
//# sourceMappingURL=Layout.js.map