cinnecta-ui/lib/components/Cell.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");

var _CinnectaTheme = _interopRequireDefault(require("../themes/CinnectaTheme"));

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,
  size: _propTypes.default.number,
  mediumSize: _propTypes.default.number,
  largeSize: _propTypes.default.number,
  xlargeSize: _propTypes.default.number,
  columns: _propTypes.default.number,
  columnsOnMedium: _propTypes.default.number,
  columnsOnLarge: _propTypes.default.number,
  columnsOnXlarge: _propTypes.default.number,
  fullHeight: _propTypes.default.bool,
  fullHeightOnMedium: _propTypes.default.bool,
  fullHeightOnLarge: _propTypes.default.bool,
  fullHeightOnXlarge: _propTypes.default.bool,
  microSpacing: _propTypes.default.bool,
  smallSpacing: _propTypes.default.bool,
  largeSpacing: _propTypes.default.bool,
  noSpacing: _propTypes.default.bool,
  verticalSpacing: _propTypes.default.bool,
  microVerticalSpacing: _propTypes.default.bool,
  smallVerticalSpacing: _propTypes.default.bool,
  largeVerticalSpacing: _propTypes.default.bool,
  auto: _propTypes.default.bool,
  autoOnMedium: _propTypes.default.bool,
  autoOnLarge: _propTypes.default.bool,
  autoOnXlarge: _propTypes.default.bool,
  relative: _propTypes.default.bool,
  shrink: _propTypes.default.bool,
  shrinkOnMedium: _propTypes.default.bool,
  shrinkOnLarge: _propTypes.default.bool,
  shrinkOnXlarge: _propTypes.default.bool,
  grow: _propTypes.default.bool,
  growOnMedium: _propTypes.default.bool,
  growOnLarge: _propTypes.default.bool,
  growOnXlarge: _propTypes.default.bool,
  order: _propTypes.default.number,
  maxWidth: _propTypes.default.number,
  minWidth: _propTypes.default.number,
  scroll: _propTypes.default.bool
});

var Cell = function Cell(_ref) {
  var children = _ref.children,
      size = _ref.size,
      mediumSize = _ref.mediumSize,
      largeSize = _ref.largeSize,
      xlargeSize = _ref.xlargeSize,
      columns = _ref.columns,
      columnsOnMedium = _ref.columnsOnMedium,
      columnsOnLarge = _ref.columnsOnLarge,
      columnsOnXlarge = _ref.columnsOnXlarge,
      fullHeight = _ref.fullHeight,
      fullHeightOnMedium = _ref.fullHeightOnMedium,
      fullHeightOnLarge = _ref.fullHeightOnLarge,
      fullHeightOnXlarge = _ref.fullHeightOnXlarge,
      microSpacing = _ref.microSpacing,
      smallSpacing = _ref.smallSpacing,
      largeSpacing = _ref.largeSpacing,
      noSpacing = _ref.noSpacing,
      verticalSpacing = _ref.verticalSpacing,
      microVerticalSpacing = _ref.microVerticalSpacing,
      smallVerticalSpacing = _ref.smallVerticalSpacing,
      largeVerticalSpacing = _ref.largeVerticalSpacing,
      auto = _ref.auto,
      autoOnMedium = _ref.autoOnMedium,
      autoOnLarge = _ref.autoOnLarge,
      autoOnXlarge = _ref.autoOnXlarge,
      relative = _ref.relative,
      shrink = _ref.shrink,
      shrinkOnMedium = _ref.shrinkOnMedium,
      shrinkOnLarge = _ref.shrinkOnLarge,
      shrinkOnXlarge = _ref.shrinkOnXlarge,
      grow = _ref.grow,
      growOnMedium = _ref.growOnMedium,
      growOnLarge = _ref.growOnLarge,
      growOnXlarge = _ref.growOnXlarge,
      order = _ref.order,
      maxWidth = _ref.maxWidth,
      minWidth = _ref.minWidth,
      scroll = _ref.scroll,
      css = _ref.css,
      styles = _ref.styles;
  return _react.default.createElement("div", css(styles.cell, size && styles["cell_".concat(size)], mediumSize && styles["cell_medium_".concat(mediumSize)], largeSize && styles["cell_large_".concat(largeSize)], xlargeSize && styles["cell_xlarge_".concat(xlargeSize)], columns && styles["cell_columns_".concat(columns)], columnsOnMedium && styles["cell_columns_medium_".concat(columnsOnMedium)], columnsOnLarge && styles["cell_columns_large_".concat(columnsOnLarge)], columnsOnXlarge && styles["cell_columns_xlarge_".concat(columnsOnXlarge)], auto && styles.cell_auto, autoOnMedium && styles.cell_auto_medium, autoOnLarge && styles.cell_auto_large, autoOnXlarge && styles.cell_auto_xlarge, fullHeight && styles.cell_fullHeight, fullHeightOnMedium && styles.cell_fullHeight_medium, fullHeightOnLarge && styles.cell_fullHeight_large, fullHeightOnXlarge && styles.cell_fullHeight_xlarge, relative && styles.relative, shrink && styles.cell_shrink, shrinkOnMedium && styles.cell_shrink_medium, shrinkOnLarge && styles.cell_shrink_large, shrinkOnXlarge && styles.cell_shrink_xlarge, grow && styles.cell_grow, growOnMedium && styles.cell_grow_medium, growOnLarge && styles.cell_grow_large, growOnXlarge && styles.cell_grow_xlarge, microSpacing && styles.cell_microSpacing, smallSpacing && styles.cell_smallSpacing, largeSpacing && styles.cell_largeSpacing, verticalSpacing && styles.cell_verticalSpacing, microVerticalSpacing && styles.cell_verticalSpacing_micro, smallVerticalSpacing && styles.cell_verticalSpacing_small, largeVerticalSpacing && styles.cell_verticalSpacing_large, noSpacing && styles.cell_noSpacing, scroll && styles.cell_scroll, {
    order: order,
    maxWidth: maxWidth && maxWidth * _CinnectaTheme.default.unit,
    minWidth: minWidth && minWidth * _CinnectaTheme.default.unit
  }), children);
};

Cell.propTypes = propTypes;
var CellWithStyles = (0, _withStyles.withStyles)(function (_ref2) {
  var _cell, _cell_microSpacing, _cell_smallSpacing, _cell_largeSpacing, _cell_verticalSpacing, _cell_verticalSpacing2, _cell_verticalSpacing3, _cell_verticalSpacing4, _cell_noSpacing;

  var breakpoint = _ref2.breakpoint,
      gutter = _ref2.gutter,
      columns = _ref2.columns;
  var sizes = {};

  for (var size = 1; size <= columns; size++) {
    sizes["cell_".concat(size)] = {
      width: "".concat(size / columns * 100, "%")
    };
    sizes["cell_medium_".concat(size)] = _defineProperty({}, breakpoint.mediumAndAbove, {
      width: "".concat(size / columns * 100, "%")
    });
    sizes["cell_large_".concat(size)] = _defineProperty({}, breakpoint.large, {
      width: "".concat(size / columns * 100, "%")
    });
    sizes["cell_xlarge_".concat(size)] = _defineProperty({}, breakpoint.xlarge, {
      width: "".concat(size / columns * 100, "%")
    });
    sizes["cell_columns_".concat(size)] = {
      width: "".concat(100 / size, "%")
    };
    sizes["cell_columns_medium_".concat(size)] = _defineProperty({}, breakpoint.mediumAndAbove, {
      width: "".concat(100 / size, "%")
    });
    sizes["cell_columns_large_".concat(size)] = _defineProperty({}, breakpoint.large, {
      width: "".concat(100 / size, "%")
    });
    sizes["cell_columns_xlarge_".concat(size)] = _defineProperty({}, breakpoint.xlarge, {
      width: "".concat(100 / size, "%")
    });
  }

  return _objectSpread({
    cell: (_cell = {
      //display: 'flex',
      paddingLeft: gutter.small.regular.left,
      paddingRight: gutter.small.regular.right,
      boxSizing: 'border-box'
    }, _defineProperty(_cell, breakpoint.mediumAndAbove, {
      paddingLeft: gutter.medium.regular.left,
      paddingRight: gutter.medium.regular.right
    }), _defineProperty(_cell, breakpoint.large, {
      paddingLeft: gutter.large.regular.left,
      paddingRight: gutter.large.regular.right
    }), _defineProperty(_cell, breakpoint.xlarge, {
      paddingLeft: gutter.xlarge.regular.left,
      paddingRight: gutter.xlarge.regular.right
    }), _cell),
    cell_fullHeight: {
      height: '100%'
    },
    cell_fullHeight_medium: _defineProperty({}, breakpoint.mediumAndAbove, {
      height: '100%'
    }),
    cell_fullHeight_large: _defineProperty({}, breakpoint.large, {
      height: '100%'
    }),
    cell_fullHeight_xlarge: _defineProperty({}, breakpoint.xlarge, {
      height: '100%'
    }),
    cell_microSpacing: (_cell_microSpacing = {
      paddingLeft: gutter.small.micro.left,
      paddingRight: gutter.small.micro.right
    }, _defineProperty(_cell_microSpacing, breakpoint.mediumAndAbove, {
      paddingLeft: gutter.medium.micro.left,
      paddingRight: gutter.medium.micro.right
    }), _defineProperty(_cell_microSpacing, breakpoint.large, {
      paddingLeft: gutter.large.micro.left,
      paddingRight: gutter.large.micro.right
    }), _defineProperty(_cell_microSpacing, breakpoint.xlarge, {
      paddingLeft: gutter.xlarge.micro.left,
      paddingRight: gutter.xlarge.micro.right
    }), _cell_microSpacing),
    cell_smallSpacing: (_cell_smallSpacing = {
      paddingLeft: gutter.small.small.left,
      paddingRight: gutter.small.small.right
    }, _defineProperty(_cell_smallSpacing, breakpoint.mediumAndAbove, {
      paddingLeft: gutter.medium.small.left,
      paddingRight: gutter.medium.small.right
    }), _defineProperty(_cell_smallSpacing, breakpoint.large, {
      paddingLeft: gutter.large.small.left,
      paddingRight: gutter.large.small.right
    }), _defineProperty(_cell_smallSpacing, breakpoint.xlarge, {
      paddingLeft: gutter.xlarge.small.left,
      paddingRight: gutter.xlarge.small.right
    }), _cell_smallSpacing),
    cell_largeSpacing: (_cell_largeSpacing = {
      paddingLeft: gutter.small.large.left,
      paddingRight: gutter.small.large.right
    }, _defineProperty(_cell_largeSpacing, breakpoint.mediumAndAbove, {
      paddingLeft: gutter.medium.large.left,
      paddingRight: gutter.medium.large.right
    }), _defineProperty(_cell_largeSpacing, breakpoint.large, {
      paddingLeft: gutter.large.large.left,
      paddingRight: gutter.large.large.right
    }), _defineProperty(_cell_largeSpacing, breakpoint.xlarge, {
      paddingLeft: gutter.xlarge.large.left,
      paddingRight: gutter.xlarge.large.right
    }), _cell_largeSpacing),
    cell_verticalSpacing: (_cell_verticalSpacing = {
      paddingTop: gutter.small.regular.top,
      paddingBottom: gutter.small.regular.bottom
    }, _defineProperty(_cell_verticalSpacing, breakpoint.mediumAndAbove, {
      paddingTop: gutter.medium.regular.top,
      paddingBottom: gutter.medium.regular.bottom
    }), _defineProperty(_cell_verticalSpacing, breakpoint.large, {
      paddingTop: gutter.large.regular.top,
      paddingBottom: gutter.large.regular.bottom
    }), _defineProperty(_cell_verticalSpacing, breakpoint.xlarge, {
      paddingTop: gutter.xlarge.regular.top,
      paddingBottom: gutter.xlarge.regular.bottom
    }), _cell_verticalSpacing),
    cell_verticalSpacing_micro: (_cell_verticalSpacing2 = {
      paddingTop: gutter.small.micro.top,
      paddingBottom: gutter.small.micro.bottom
    }, _defineProperty(_cell_verticalSpacing2, breakpoint.mediumAndAbove, {
      paddingTop: gutter.medium.micro.top,
      paddingBottom: gutter.medium.micro.bottom
    }), _defineProperty(_cell_verticalSpacing2, breakpoint.large, {
      paddingTop: gutter.large.micro.top,
      paddingBottom: gutter.large.micro.bottom
    }), _defineProperty(_cell_verticalSpacing2, breakpoint.xlarge, {
      paddingTop: gutter.xlarge.micro.top,
      paddingBottom: gutter.xlarge.micro.bottom
    }), _cell_verticalSpacing2),
    cell_verticalSpacing_small: (_cell_verticalSpacing3 = {
      paddingTop: gutter.small.small.top,
      paddingBottom: gutter.small.small.bottom
    }, _defineProperty(_cell_verticalSpacing3, breakpoint.mediumAndAbove, {
      paddingTop: gutter.medium.small.top,
      paddingBottom: gutter.medium.small.bottom
    }), _defineProperty(_cell_verticalSpacing3, breakpoint.large, {
      paddingTop: gutter.large.small.top,
      paddingBottom: gutter.large.small.bottom
    }), _defineProperty(_cell_verticalSpacing3, breakpoint.xlarge, {
      paddingTop: gutter.xlarge.small.top,
      paddingBottom: gutter.xlarge.small.bottom
    }), _cell_verticalSpacing3),
    cell_verticalSpacing_large: (_cell_verticalSpacing4 = {
      paddingTop: gutter.small.large.top,
      paddingBottom: gutter.small.large.bottom
    }, _defineProperty(_cell_verticalSpacing4, breakpoint.mediumAndAbove, {
      paddingTop: gutter.medium.large.top,
      paddingBottom: gutter.medium.large.bottom
    }), _defineProperty(_cell_verticalSpacing4, breakpoint.large, {
      paddingTop: gutter.large.large.top,
      paddingBottom: gutter.large.large.bottom
    }), _defineProperty(_cell_verticalSpacing4, breakpoint.xlarge, {
      paddingTop: gutter.xlarge.large.top,
      paddingBottom: gutter.xlarge.large.bottom
    }), _cell_verticalSpacing4),
    cell_noSpacing: (_cell_noSpacing = {
      paddingTop: 0,
      paddingRight: 0,
      paddingBottom: 0,
      paddingLeft: 0
    }, _defineProperty(_cell_noSpacing, breakpoint.mediumAndAbove, {
      paddingTop: 0,
      paddingRight: 0,
      paddingBottom: 0,
      paddingLeft: 0
    }), _defineProperty(_cell_noSpacing, breakpoint.large, {
      paddingTop: 0,
      paddingRight: 0,
      paddingBottom: 0,
      paddingLeft: 0
    }), _defineProperty(_cell_noSpacing, breakpoint.xlarge, {
      paddingTop: 0,
      paddingRight: 0,
      paddingBottom: 0,
      paddingLeft: 0
    }), _cell_noSpacing),
    cell_auto: {
      flex: '1 1 0',
      width: 'auto'
    },
    cell_auto_medium: _defineProperty({}, breakpoint.mediumAndAbove, {
      flex: '1 1 0',
      width: 'auto'
    }),
    cell_auto_large: _defineProperty({}, breakpoint.large, {
      flex: '1 1 0',
      width: 'auto'
    }),
    cell_auto_xlarge: _defineProperty({}, breakpoint.xlarge, {
      flex: '1 1 0',
      width: 'auto'
    }),
    cell_shrink: {
      flex: '0 0 auto',
      width: 'auto'
    },
    cell_shrink_medium: _defineProperty({}, breakpoint.mediumAndAbove, {
      flex: '0 0 auto',
      width: 'auto'
    }),
    cell_shrink_large: _defineProperty({}, breakpoint.large, {
      flex: '0 0 auto',
      width: 'auto'
    }),
    cell_shrink_xlarge: _defineProperty({}, breakpoint.xlarge, {
      flex: '0 0 auto',
      width: 'auto'
    }),
    cell_grow: {
      flex: '1 0 auto',
      width: 'auto'
    },
    cell_grow_medium: _defineProperty({}, breakpoint.mediumAndAbove, {
      flex: '1 0 auto',
      width: 'auto'
    }),
    cell_grow_large: _defineProperty({}, breakpoint.large, {
      flex: '1 0 auto',
      width: 'auto'
    }),
    cell_grow_xlarge: _defineProperty({}, breakpoint.xlarge, {
      flex: '1 0 auto',
      width: 'auto'
    }),
    cell_scroll: {
      overflow: 'auto'
    },
    relative: {
      position: 'relative'
    }
  }, sizes);
}, {
  flushBefore: true
})(Cell);
var _default = CellWithStyles;
exports.default = _default;