@aliretail/react-materials-components/lib/Form/index.js

B 端物料组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));

var React = _interopRequireWildcard(require("react"));

var PropTypes = _interopRequireWildcard(require("prop-types"));

var _layout = require("@alifd/layout");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var AliRetailForm = /*#__PURE__*/function (_React$Component) {
  (0, _inheritsLoose2["default"])(AliRetailForm, _React$Component);

  function AliRetailForm(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    _this.state = {
      cols: 1
    };
    var cols = _this.props.cols;
    _this.state = {
      cols: cols === 'full' ? 1 : cols
    };
    return _this;
  }

  var _proto = AliRetailForm.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        children = _this$props.children,
        style = _this$props.style,
        _this$props$gridItemS = _this$props.gridItemStyle,
        gridItemStyle = _this$props$gridItemS === void 0 ? {} : _this$props$gridItemS,
        columnGap = _this$props.columnGap,
        rowGap = _this$props.rowGap,
        jsxCols = _this$props.cols,
        align = _this$props.align,
        colSpan = _this$props.colSpan,
        type = _this$props.type;
    var cols = this.state.cols;
    var isFullItem = colSpan === 'full';
    var gridContainerSty = {
      gridTemplateColumns: "repeat(" + cols + ", minmax(0, 1fr) [col-start])",
      gridColumnGap: columnGap,
      gridRowGap: rowGap
    };
    var gridClassName = ['aliretail-formx'];

    if (jsxCols === 1) {
      gridClassName.push("aliretail-formx-" + (align === 'center' ? 'c' : 'l'));
    }

    if (isFullItem) {
      gridClassName.push('aliretail-formx-full');
    }

    if (type) {
      gridClassName.push("aliretail-formx-" + type);
    }

    return /*#__PURE__*/React.createElement("div", {
      className: "aliretail-form-wrapper",
      "data-name": "GridLayout",
      style: (0, _extends2["default"])({}, style)
    }, /*#__PURE__*/React.createElement(_layout.Grid, {
      style: gridContainerSty,
      className: gridClassName.join(' ')
    }, React.Children.map(children, function (child) {
      // schema 属性只有在 formily 体系下才会存在
      var _child$props = child.props,
          _child$props$colSpan = _child$props.colSpan,
          jsxColSpan = _child$props$colSpan === void 0 ? 1 : _child$props$colSpan,
          _child$props$rowSpan = _child$props.rowSpan,
          jsxRowSpan = _child$props$rowSpan === void 0 ? 1 : _child$props$rowSpan,
          _child$props$schema = _child$props.schema,
          schema = _child$props$schema === void 0 ? {} : _child$props$schema;
      var childColSpan = schema.colSpan || jsxColSpan;
      var rowSpan = schema.rowSpan || jsxRowSpan;
      var gridItemSty = (0, _extends2["default"])({}, gridItemStyle); // formily

      if (child.props.schema && child.props.schema.path) {
        Object.assign(child.props.schema, {
          style: Object.assign(gridItemSty, {
            gridRow: "span " + rowSpan,
            gridColumn: "span " + (childColSpan === 'full' ? cols : childColSpan)
          })
        });
        return child;
      }

      return /*#__PURE__*/React.createElement("div", {
        colSpan: childColSpan === 'full' ? cols : childColSpan,
        rowSpan: rowSpan,
        style: gridItemSty
      }, child);
    })));
  };

  return AliRetailForm;
}(React.Component);

AliRetailForm.propTypes = {
  children: PropTypes.arrayOf(PropTypes.element),
  cols: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  columnGap: PropTypes.number,
  rowGap: PropTypes.number,
  style: PropTypes.object,
  gridItemStyle: PropTypes.object,
  type: PropTypes.string,
  align: PropTypes.string
};
AliRetailForm.defaultProps = {
  children: [],
  cols: 1,
  style: {},
  gridItemStyle: {},
  type: '',
  align: 'center'
};
var _default = AliRetailForm;
exports["default"] = _default;