lucid-ui/lib/components/Grid/Grid.js

A UI component library from AppNexus.

import _keys from "lodash/keys";
import _map from "lodash/map";

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { findTypes, omitProps } from '../../util/component-types';
var cx = lucidClassNames.bind('&-Grid');
var string = PropTypes.string,
    bool = PropTypes.bool,
    node = PropTypes.node; // -----------------------------------------------------------------------------
// Type definitions
// -----------------------------------------------------------------------------

// -----------------------------------------------------------------------------
// Cell child component
// -----------------------------------------------------------------------------
var Cell = function Cell(_props) {
  return null;
};

Cell.displayName = 'Grid.Cell';
Cell.peek = {
  description: "\n\t\tRenders an `<article>` as the grid cell\n\t"
};
Cell.propTypes = {
  isFull: bool,
  isHalf: bool,
  isThird: bool,
  isQuarter: bool,
  is2: bool,
  is3: bool,
  is4: bool,
  is5: bool,
  is6: bool,
  is7: bool,
  is8: bool,
  is9: bool,
  is10: bool,
  is11: bool,
  isOffsetQuarter: bool,
  isOffsetThird: bool,
  isOffsetHalf: bool
};
Cell.peek = {
  description: "\n\t\tRenders an `<article>` as the grid cell\n\t"
}; // -----------------------------------------------------------------------------
// Grid
// -----------------------------------------------------------------------------

export var Grid = function Grid(props) {
  var className = props.className,
      children = props.children,
      isVertical = props.isVertical,
      isHorizontal = props.isHorizontal,
      isGutterless = props.isGutterless,
      isMultiline = props.isMultiline,
      passThroughs = _objectWithoutProperties(props, ["className", "children", "isVertical", "isHorizontal", "isGutterless", "isMultiline"]);

  var cellChildProps = _map(findTypes(props, Grid.Cell), 'props');

  return /*#__PURE__*/React.createElement("section", _extends({}, omitProps(passThroughs, undefined, _keys(Grid.propTypes)), {
    className: cx('&', {
      '&-is-vertical': isVertical,
      '&-is-horizontal': isHorizontal,
      '&-is-gutterless': isGutterless,
      '&-is-multiline': isMultiline
    }, className)
  }), _map(cellChildProps, function (cellChildProp, index) {
    return /*#__PURE__*/React.createElement("article", _extends({}, omitProps(cellChildProp, undefined, _keys(Grid.Cell.propTypes)), {
      key: index,
      className: cx('&-Cell', {
        '&-Cell-is-full': cellChildProp.isFull,
        '&-Cell-is-half': cellChildProp.isHalf,
        '&-Cell-is-quarter': cellChildProp.isQuarter,
        '&-Cell-is-third': cellChildProp.isThird,
        '&-Cell-is-2': cellChildProp.is2,
        '&-Cell-is-3': cellChildProp.is3,
        '&-Cell-is-4': cellChildProp.is4,
        '&-Cell-is-5': cellChildProp.is5,
        '&-Cell-is-6': cellChildProp.is6,
        '&-Cell-is-7': cellChildProp.is7,
        '&-Cell-is-8': cellChildProp.is8,
        '&-Cell-is-9': cellChildProp.is9,
        '&-Cell-is-10': cellChildProp.is10,
        '&-Cell-is-11': cellChildProp.is11,
        '&-Cell-is-offset-quarter': cellChildProp.isOffsetQuarter,
        '&-Cell-is-offset-third': cellChildProp.isOffsetThird,
        '&-Cell-is-offset-half': cellChildProp.isOffsetHalf
      }, cellChildProp.className)
    }), cellChildProp.children);
  }), children);
};
Grid.Cell = Cell;
Grid.displayName = 'Grid';
Grid.peek = {
  description: "\n\t\tThis component is designed to be used in Composites as a layout tool.\n\t\tYou can use the Grid components themselves or create your own\n\t\tcomponents using the Grid styles from Grid.less.  Please see examples\n\t\tfor more information.\n\t",
  categories: ['layout']
};
Grid.propTypes = {
  className: string,
  isVertical: bool,
  isHorizontal: bool,
  isGutterless: bool,
  isMultiline: bool,
  children: node
};
export default Grid;