cinnecta-ui/lib/components/Grid.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _withStyles = require("../helpers/withStyles");

var _reactWithStyles = require("react-with-styles");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, 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; }

var propTypes = _objectSpread({}, _reactWithStyles.withStylesPropTypes, {
  children: _propTypes.default.any,
  right: _propTypes.default.bool,
  center: _propTypes.default.bool,
  fullHeight: _propTypes.default.bool,
  spaceBetween: _propTypes.default.bool,
  spaced: _propTypes.default.bool,
  top: _propTypes.default.bool,
  middle: _propTypes.default.bool,
  noWrap: _propTypes.default.bool,
  bottom: _propTypes.default.bool,
  stretch: _propTypes.default.bool,
  resetSpacing: _propTypes.default.bool,
  resetLargeSpacing: _propTypes.default.bool,
  resetMicroSpacing: _propTypes.default.bool,
  resetSmallSpacing: _propTypes.default.bool,
  vertical: _propTypes.default.bool
});

var Grid = function Grid(_ref) {
  var children = _ref.children,
      right = _ref.right,
      center = _ref.center,
      fullHeight = _ref.fullHeight,
      spaceBetween = _ref.spaceBetween,
      spaced = _ref.spaced,
      top = _ref.top,
      middle = _ref.middle,
      noWrap = _ref.noWrap,
      bottom = _ref.bottom,
      stretch = _ref.stretch,
      resetSpacing = _ref.resetSpacing,
      resetLargeSpacing = _ref.resetLargeSpacing,
      resetMicroSpacing = _ref.resetMicroSpacing,
      resetSmallSpacing = _ref.resetSmallSpacing,
      styles = _ref.styles,
      vertical = _ref.vertical,
      css = _ref.css;
  return _react.default.createElement("div", css(styles.container, fullHeight && styles.fullHeight), _react.default.createElement("div", css(styles.grid, fullHeight && styles.fullHeight, right && styles.grid_right, center && styles.grid_center, spaceBetween && styles.grid_spaceBetween, spaced && styles.grid_spaced, top && styles.grid_top, middle && styles.grid_middle, noWrap && styles.grid_noWrap, bottom && styles.grid_bottom, stretch && styles.grid_stretch, resetSpacing && styles.grid_resetSpacing, resetLargeSpacing && styles.grid_resetSpacing_large, resetSmallSpacing && styles.grid_resetSpacing_small, vertical && styles.grid_vertical), children));
};

Grid.propTypes = propTypes;
var GridWithStyles = (0, _withStyles.withStyles)(function (_ref2) {
  var _grid_resetSpacing, _grid_resetSpacing_la, _grid_resetSpacing_mi, _grid_resetSpacing_sm;

  var breakpoint = _ref2.breakpoint,
      gutter = _ref2.gutter;
  return {
    container: {
      display: 'flex',
      width: '100%',
      flex: 1
    },
    grid: {
      display: 'flex',
      width: '100%',
      alignItems: 'flex-start',
      flexWrap: 'wrap',
      flexDirection: 'row',
      flex: 1,
      boxSizing: 'border-box'
    },
    fullHeight: {
      height: '100%'
    },
    grid_vertical: {
      flexDirection: 'column',
      alignItems: 'stretch'
    },
    grid_noWrap: {
      flexWrap: 'nowrap'
    },
    grid_right: {
      alignItems: 'flex-end'
    },
    grid_center: {
      alignItems: 'center'
    },
    grid_spaceBetween: {
      alignItems: 'space-between'
    },
    grid_spaced: {
      alignItems: 'spaced'
    },
    grid_top: {
      justifyContent: 'flex-start'
    },
    grid_middle: {
      justifyContent: 'center'
    },
    grid_bottom: {
      justifyContent: 'flex-end'
    },
    grid_stretch: {
      justifyContent: 'stretch'
    },
    grid_resetSpacing: (_grid_resetSpacing = {
      marginLeft: -gutter.small.regular.left,
      marginRight: -gutter.small.regular.right
    }, _defineProperty(_grid_resetSpacing, breakpoint.mediumAndAbove, {
      marginLeft: -gutter.medium.regular.left,
      marginRight: -gutter.medium.regular.right
    }), _defineProperty(_grid_resetSpacing, breakpoint.large, {
      marginLeft: -gutter.large.regular.left,
      marginRight: -gutter.large.regular.right
    }), _defineProperty(_grid_resetSpacing, breakpoint.xlarge, {
      marginLeft: -gutter.xlarge.regular.left,
      marginRight: -gutter.xlarge.regular.right
    }), _grid_resetSpacing),
    grid_resetSpacing_large: (_grid_resetSpacing_la = {
      marginLeft: -gutter.small.large.left,
      marginRight: -gutter.small.large.right
    }, _defineProperty(_grid_resetSpacing_la, breakpoint.mediumAndAbove, {
      marginLeft: -gutter.medium.large.left,
      marginRight: -gutter.medium.large.right
    }), _defineProperty(_grid_resetSpacing_la, breakpoint.large, {
      marginLeft: -gutter.large.large.left,
      marginRight: -gutter.large.large.right
    }), _defineProperty(_grid_resetSpacing_la, breakpoint.xlarge, {
      marginLeft: -gutter.xlarge.large.left,
      marginRight: -gutter.xlarge.large.right
    }), _grid_resetSpacing_la),
    grid_resetSpacing_micro: (_grid_resetSpacing_mi = {
      marginLeft: -gutter.small.micro.left,
      marginRight: -gutter.small.micro.right
    }, _defineProperty(_grid_resetSpacing_mi, breakpoint.mediumAndAbove, {
      marginLeft: -gutter.medium.micro.left,
      marginRight: -gutter.medium.micro.right
    }), _defineProperty(_grid_resetSpacing_mi, breakpoint.large, {
      marginLeft: -gutter.large.micro.left,
      marginRight: -gutter.large.micro.right
    }), _defineProperty(_grid_resetSpacing_mi, breakpoint.xlarge, {
      marginLeft: -gutter.xlarge.micro.left,
      marginRight: -gutter.xlarge.micro.right
    }), _grid_resetSpacing_mi),
    grid_resetSpacing_small: (_grid_resetSpacing_sm = {
      marginLeft: -gutter.small.small.left,
      marginRight: -gutter.small.small.right
    }, _defineProperty(_grid_resetSpacing_sm, breakpoint.mediumAndAbove, {
      marginLeft: -gutter.medium.small.left,
      marginRight: -gutter.medium.small.right
    }), _defineProperty(_grid_resetSpacing_sm, breakpoint.large, {
      marginLeft: -gutter.large.small.left,
      marginRight: -gutter.large.small.right
    }), _defineProperty(_grid_resetSpacing_sm, breakpoint.xlarge, {
      marginLeft: -gutter.xlarge.small.left,
      marginRight: -gutter.xlarge.small.right
    }), _grid_resetSpacing_sm)
  };
})(Grid);
var _default = GridWithStyles;
exports.default = _default;