ukelli-ui/core/grid/grid.js

ukelli-ui 是基于 React 的 UI 库，提供简约和功能齐全的组件，可高度定制的组件接口，灵活的配置，提供给开发者另一种开发思路，也致力于尝试不同的组件使用和开发方向。

"use strict";

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

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

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

var _classnames = _interopRequireDefault(require("classnames"));

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

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 LayoutSpaces = [0, 5, 10, 15, 20, 25, 30];
var RowSet = ['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var JustifyMap = {
  start: 'j-c-s',
  end: 'j-c-e',
  center: 'j-c-c',
  between: 'j-c-b',
  around: 'j-c-a'
};
var AlignContentMap = {
  start: 'a-c-start',
  end: 'a-c-e',
  center: 'a-c-c',
  between: 'a-c-b',
  around: 'a-c-around',
  stretch: 'a-c-str'
};
var AlignItemMap = {
  start: 'a-i-start',
  end: 'a-i-e',
  center: 'a-i-c',
  baseline: 'a-i-bl',
  stretch: 'a-i-str'
};
var WrapMap = {
  wrap: 'wrap',
  nowrap: 'nowrap'
};
var DirectionMap = {
  col: 'col',
  reCol: 're-col',
  row: 'row',
  reRow: 're-row'
};
var JustifyProps = Object.keys(JustifyMap);
var AlignContentProps = Object.keys(AlignContentMap);
var AlignItemProps = Object.keys(AlignItemMap);
var DirectionProps = Object.keys(DirectionMap);
var WrapProps = Object.keys(WrapMap);

var Grid = function Grid(props) {
  var _classNames;

  var children = props.children,
      className = props.className,
      style = props.style,
      component = props.component,
      space = props.space,
      container = props.container,
      item = props.item,
      direction = props.direction,
      wrap = props.wrap,
      justify = props.justify,
      alignContent = props.alignContent,
      alignItem = props.alignItem,
      xs = props.xs,
      sm = props.sm,
      lg = props.lg,
      xl = props.xl;
  var C = component;
  var isItem = typeof item != 'undefined' ? item : !container;

  var _className = (0, _classnames["default"])((_classNames = {}, _defineProperty(_classNames, className, className || ''), _defineProperty(_classNames, JustifyMap[justify], container && justify), _defineProperty(_classNames, AlignContentMap[alignContent], container && alignContent), _defineProperty(_classNames, AlignItemMap[alignItem], container && alignItem), _defineProperty(_classNames, WrapMap[wrap], container && wrap), _defineProperty(_classNames, DirectionMap[direction], container && direction), _defineProperty(_classNames, "xs-".concat(xs), xs), _defineProperty(_classNames, "sm-".concat(sm), sm), _defineProperty(_classNames, "lg-".concat(lg), lg), _defineProperty(_classNames, "xl-".concat(xl), xl), _defineProperty(_classNames, "j-c-c", xl), _defineProperty(_classNames, 'g-container', container), _defineProperty(_classNames, 'g-item', isItem), _classNames));

  return _react["default"].createElement(C, {
    style: style,
    className: "".concat(container ? "grid space-".concat(space, " ") : '', " ").concat(_className)
  }, children);
};

Grid.propTypes = {
  /** 顾名思义 */
  children: _propTypes["default"].node,

  /** 用于包装的外层组件 */
  component: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].oneOf(['div', 'span'])]),

  /** 顾名思义 */
  className: _propTypes["default"].string,

  /** 边框的宽度 */
  space: _propTypes["default"].oneOf(LayoutSpaces),

  /** 对于 屏幕宽度 < 576px 的分布 */
  xs: _propTypes["default"].oneOf(RowSet),

  /** 对于 屏幕宽度 < 768px, > 576px 的分布 */
  sm: _propTypes["default"].oneOf(RowSet),

  /** 对于 屏幕宽度 < 992px, > 768px 的分布 */
  lg: _propTypes["default"].oneOf(RowSet),

  /** 对于 屏幕宽度 < 1200px, > 992px 的分布 */
  xl: _propTypes["default"].oneOf(RowSet),

  /** justify-content */
  justify: _propTypes["default"].oneOf(JustifyProps),

  /** justify-content */
  alignContent: _propTypes["default"].oneOf(AlignContentProps),

  /** justify-item */
  alignItem: _propTypes["default"].oneOf(AlignItemProps),

  /** 是否作为容器 */
  container: _propTypes["default"].bool,

  /** 方向 */
  direction: _propTypes["default"].oneOf(DirectionProps),

  /** flex-wrap */
  wrap: _propTypes["default"].oneOf(WrapProps),

  /** 是否作为子组件 */
  item: _propTypes["default"].bool,

  /** 顾名思义 */
  style: _propTypes["default"].shape({})
  /** row 为多少，详情参考 布局系统 layout */
  // row: PropTypes.oneOf(RowSet),

};
Grid.defaultProps = {
  component: 'div',
  space: 0,
  direction: 'row',
  wrap: 'wrap',
  container: false // item: false,

};
var _default = Grid;
exports["default"] = _default;