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

B 端物料组件库

import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import * as React from 'react';
import * as PropTypes from 'prop-types';
import { Grid } from '@alifd/layout';

var AliRetailForm = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(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: _extends({}, style)
    }, /*#__PURE__*/React.createElement(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 = _extends({}, 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'
};
export default AliRetailForm;