@findify/react-components/lib/components/common/Grid/Column.js

Findify react UI components

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

/**
 * @module components/common/Grid
 */
import { useMemo } from 'react';
import cx from 'classnames';
import { jsx as _jsx } from "react/jsx-runtime";
var styles = {
  "root": "findify-components-common--grid",
  "container": "findify-components-common--grid__container",
  "column": "findify-components-common--grid__column",
  "placeholder": "findify-components-common--grid__placeholder",
  "column-auto": "findify-components-common--grid__column-auto",
  "column-full": "findify-components-common--grid__column-full",
  "column-fit": "findify-components-common--grid__column-fit",
  "column-1": "findify-components-common--grid__column-1",
  "column-2": "findify-components-common--grid__column-2",
  "column-3": "findify-components-common--grid__column-3",
  "column-4": "findify-components-common--grid__column-4",
  "column-5": "findify-components-common--grid__column-5",
  "column-6": "findify-components-common--grid__column-6",
  "column-7": "findify-components-common--grid__column-7",
  "column-8": "findify-components-common--grid__column-8",
  "column-9": "findify-components-common--grid__column-9",
  "column-10": "findify-components-common--grid__column-10",
  "column-11": "findify-components-common--grid__column-11",
  "column-12": "findify-components-common--grid__column-12",
  "columnAuto": "findify-components-common--grid__column-auto",
  "columnFull": "findify-components-common--grid__column-full",
  "columnFit": "findify-components-common--grid__column-fit",
  "column1": "findify-components-common--grid__column-1",
  "column2": "findify-components-common--grid__column-2",
  "column3": "findify-components-common--grid__column-3",
  "column4": "findify-components-common--grid__column-4",
  "column5": "findify-components-common--grid__column-5",
  "column6": "findify-components-common--grid__column-6",
  "column7": "findify-components-common--grid__column-7",
  "column8": "findify-components-common--grid__column-8",
  "column9": "findify-components-common--grid__column-9",
  "column10": "findify-components-common--grid__column-10",
  "column11": "findify-components-common--grid__column-11",
  "column12": "findify-components-common--grid__column-12"
};
/** List of props that GridColumn accepts */

var getWidth = function getWidth(size, gutter) {
  var percents = 100 / 12 * Number(size);
  return gutter ? "calc(".concat(percents, "% - ").concat(gutter, ")") : "".concat(percents, "%");
};

export var Column = function Column(_ref) {
  var className = _ref.className,
      style = _ref.style,
      children = _ref.children,
      gutter = _ref.gutter,
      _order = _ref.order,
      _size = _ref.size,
      _ref$component = _ref.component,
      Component = _ref$component === void 0 ? 'div' : _ref$component;
  var composedClassName = useMemo(function () {
    return cx(styles.column, className, styles["column-".concat(_size)]);
  }, [className, _size]);
  var order = useMemo(function () {
    return !_order ? {} : {
      WebkitBoxOrdinalGroup: _order,
      MozBoxOrdinalGroup: _order,
      MsFlexOrder: _order,
      WebkitOrder: _order,
      order: _order
    };
  }, [_order]);
  var size = useMemo(function () {
    var basis = !isNaN(Number(_size)) && getWidth(_size, gutter);
    return {
      flexBasis: basis,
      msFlexPreferredSize: basis,
      paddingLeft: "".concat(gutter)
    };
  }, [_size, gutter]);
  return /*#__PURE__*/_jsx(Component, {
    className: composedClassName,
    style: _objectSpread(_objectSpread(_objectSpread({}, size), order), style),
    children: children
  });
};
export var Placeholder = function Placeholder(_ref2) {
  var size = _ref2.size,
      gutter = _ref2.gutter;
  return /*#__PURE__*/_jsx("div", {
    className: styles.placeholder,
    style: {
      flexBasis: getWidth(size, gutter),
      paddingLeft: "".concat(gutter),
      order: 1e5
    }
  });
};