@geneui/components/Grid/index.js

The Gene UI components library designed for BI tools

import React__default, { useRef } from 'react';
import PropTypes from 'prop-types';
import { c as classnames } from '../index-031ff73c.js';
import useWidth from '../hooks/useWidth.js';
import '../dateValidation-67caec66.js';
import 'react-dom';
import { k as breakPoints } from '../configs-00612ce0.js';
import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
import { s as styleInject } from '../style-inject.es-746bb8ed.js';
import '../hooks/useWindowSize.js';
import '../hooks/useDebounce.js';
import '../_commonjsHelpers-24198af3.js';

/* Recognizing screen size by configuration.
 * Now we have 5 supported screen sizes.
 */

const getPartsByWindowSize = (size, options) => {
  let screenKey = 'xxl';
  let screenSize = options[screenKey];
  for (const key in options) {
    const value = options[key];
    // find value closest to our window size
    if (size <= value && value < screenSize) {
      screenKey = key;
      screenSize = value;
    }
  }
  return screenKey;
};

function Col(props) {
  const {
    __count,
    __gutter,
    __padding,
    __parentWidth,
    children,
    size,
    className,
    style = {},
    ...rest
  } = props;
  const styles = {
    padding: "".concat(__padding / 20, "rem ").concat(__gutter / 20, "rem"),
    ...style
  };
  const fit = size || rest[getPartsByWindowSize(__parentWidth, breakPoints)];
  styles.width = "".concat(fit / __count * 100, "%");
  return /*#__PURE__*/React__default.createElement("div", _extends({
    className: classnames('grid-child', className),
    style: styles
  }, rest), children);
}
Col.propTypes = {
  /**
   * Component will calculate width based on this props
   */
  __parentWidth: PropTypes.number,
  /**
   * The space between elements vertically
   */
  __padding: PropTypes.number,
  /**
   * The space between elements horizontally
   */
  __gutter: PropTypes.number,
  /**
   * Defines the number of grids the component is going to use
   */
  __count: PropTypes.number,
  /**
   * The CSS class name of the element.
   */
  className: PropTypes.string,
  /**
   * Custom stylings
   */
  style: PropTypes.object,
  /**
   * Defines the size of grids the component is going to use.
   */
  xs: PropTypes.number,
  /**
   * Defines the size of grids the component is going to use.
   */
  md: PropTypes.number,
  /**
   * Defines the size of grids the component is going to use.
   */
  lg: PropTypes.number,
  /**
   * Defines the size of grids the component is going to use.
   */
  xl: PropTypes.number,
  /**
   * Defines the size of grids the component is going to use.
   */
  xxl: PropTypes.number,
  /**
   *  Custom size for element
   */
  size: PropTypes.number,
  /**
   *  Any valid react node
   */
  children: PropTypes.node
};
Col.defaultProps = {
  __parentWidth: 0,
  __padding: 20,
  __gutter: 20,
  __count: 12,
  xs: 1,
  md: 1,
  lg: 1,
  xl: 1,
  xxl: 1
};

var css_248z = "[data-gene-ui-version=\"2.16.5\"] .grid-holder{width:100%}[data-gene-ui-version=\"2.16.5\"] .grid-items-group{display:flex;flex-wrap:wrap;width:100%}[data-gene-ui-version=\"2.16.5\"] .grid-child{display:flex}";
styleInject(css_248z);

function Row(props) {
  const ref = useRef();
  const width = useWidth(ref);
  return /*#__PURE__*/React__default.createElement("div", {
    ref: ref,
    className: classnames('grid-holder', props.className)
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "grid-items-group",
    style: {
      width: "calc(100% + ".concat(props.gutter / 10, "rem)"),
      margin: "-".concat(props.padding / 20, "rem -").concat(props.gutter / 20, "rem")
    }
  }, React__default.Children.map(props.children, child => /*#__PURE__*/React__default.isValidElement(child) && /*#__PURE__*/React__default.cloneElement(child, {
    __count: props.span,
    __parentWidth: width,
    __padding: props.padding,
    __gutter: props.gutter
  }))));
}
Row.propTypes = {
  /**
   * Defines the space between horizontally
   */
  gutter: PropTypes.number,
  /**
   * Defines the number of grids the component is going to use
   */
  span: PropTypes.number,
  /**
   * Defines the space between vertically
   */
  padding: PropTypes.number,
  /**
   * 	The content of the component.
   */
  children: PropTypes.oneOfType([PropTypes.bool, PropTypes.node, PropTypes.element, PropTypes.instanceOf(Col)])
};
Row.defaultProps = {
  gutter: 20,
  padding: 20,
  span: 12
};

export { Col, Row };