UNPKG

choerodon-ui

Version:

An enterprise-class UI design language and React-based implementation

1,307 lines (1,106 loc) 44.5 kB
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator"; import _extends from "@babel/runtime/helpers/extends"; import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray"; import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties"; import _slicedToArray from "@babel/runtime/helpers/slicedToArray"; import _defineProperty from "@babel/runtime/helpers/defineProperty"; import _objectSpread from "@babel/runtime/helpers/objectSpread2"; import _classCallCheck from "@babel/runtime/helpers/classCallCheck"; import _createClass from "@babel/runtime/helpers/createClass"; import _get from "@babel/runtime/helpers/get"; import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf"; import _inherits from "@babel/runtime/helpers/inherits"; import _createSuper from "@babel/runtime/helpers/createSuper"; var _excluded = ["children"], _excluded2 = ["rowSpan", "colSpan", "newLine", "className", "fieldClassName", "useColon", "requiredMarkAlign"]; import _regeneratorRuntime from "@babel/runtime/regenerator"; import { __decorate } from "tslib"; import React, { Children, cloneElement, createElement, isValidElement } from 'react'; import classNames from 'classnames'; import { observer } from 'mobx-react'; import { action as mobxAction, computed, isArrayLike, observable, runInAction, toJS } from 'mobx'; import isNumber from 'lodash/isNumber'; import isString from 'lodash/isString'; import noop from 'lodash/noop'; import defaultTo from 'lodash/defaultTo'; import isNil from 'lodash/isNil'; import raf from 'raf'; import Responsive, { hasBreakPointMap, isBreakPointMap } from '../../../es/responsive/Responsive'; import { pxToRem } from '../../../es/_util/UnitConvertor'; import isFunction from 'lodash/isFunction'; import axios from '../axios'; import autobind from '../_util/autobind'; import isFragment from '../_util/isFragment'; import { getFieldsById } from '../field/FormField'; import FormContext, { FormProvider } from './FormContext'; import DataSetComponent from '../data-set/DataSetComponent'; import { FormLayout, LabelAlign, LabelLayout, RequiredMarkAlign, SpacingType } from './enum'; import { defaultColumns, defaultExcludeUseColonTag, defaultLabelWidth, FIELD_SUFFIX, getProperty, getPropertyDSFirst, getRequiredMarkAlign, getSpacingFieldStyle, getSpacingLabelStyle, getSpacingProperties, hasParentElement, normalizeLabelWidth, normalizeSeparateSpacing, normalizeSpacingType } from './utils'; import FormVirtualGroup from './FormVirtualGroup'; import { DataSetEvents } from '../data-set/enum'; import Item from './Item'; import FormItemLabel from './FormItemLabel'; import ItemGroup from './ItemGroup'; import { ShowHelp } from '../field/enum'; import Icon from '../icon'; import { hide, show } from '../tooltip/singleton'; /** * 表单name生成器 */ var NameGen = /*#__PURE__*/_regeneratorRuntime.mark(function _callee(start) { return _regeneratorRuntime.wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { case 0: if (!true) { _context.next = 6; break; } start += 1; _context.next = 4; return "form-".concat(start); case 4: _context.next = 0; break; case 6: case "end": return _context.stop(); } } }, _callee); })(0); var Form = /*#__PURE__*/function (_DataSetComponent) { _inherits(Form, _DataSetComponent); var _super = _createSuper(Form); function Form(props, context) { var _this; _classCallCheck(this, Form); _this = _super.call(this, props, context); _this.fields = []; _this.name = NameGen.next().value; _this.validating = false; _this.prepareForReport = {}; runInAction(function () { _this.responsiveItems = []; }); return _this; } _createClass(Form, [{ key: "axios", get: function get() { return this.observableProps.axios || this.getContextConfig('axios') || axios; } }, { key: "dataSet", get: function get() { var record = this.record; if (record) { return record.dataSet; } var observableProps = this.observableProps; if ('dataSet' in observableProps) { return observableProps.dataSet; } return observableProps.contextDataSet; } }, { key: "record", get: function get() { var observableProps = this.observableProps; if ('record' in observableProps) { return observableProps.record; } var dataSet = observableProps.dataSet, dataIndex = observableProps.dataIndex; if (dataSet) { if (isNumber(dataIndex)) { return dataSet.get(dataIndex); } return dataSet.current; } if (isNumber(dataIndex)) { var contextDataSet = observableProps.contextDataSet; if (contextDataSet) { return contextDataSet.get(dataIndex); } } return observableProps.contextRecord; } }, { key: "dataIndex", get: function get() { var _this$observableProps = this.observableProps, dataIndex = _this$observableProps.dataIndex, contextDataIndex = _this$observableProps.contextDataIndex; return defaultTo(dataIndex, contextDataIndex); } }, { key: "useColon", get: function get() { var useColon = this.observableProps.useColon; if (useColon !== undefined) { return useColon; } var configUseColon = this.getContextConfig('useColon'); if (configUseColon !== undefined) { return configUseColon; } return false; } }, { key: "requiredMarkAlign", get: function get() { var requiredMarkAlign = this.observableProps.requiredMarkAlign; if ([RequiredMarkAlign.left, RequiredMarkAlign.right].includes(requiredMarkAlign)) { return requiredMarkAlign; } var configRequiredMarkAlign = this.getContextConfig('requiredMarkAlign'); if ([RequiredMarkAlign.left, RequiredMarkAlign.right].includes(configRequiredMarkAlign)) { return configRequiredMarkAlign; } return RequiredMarkAlign.left; } }, { key: "excludeUseColonTagList", get: function get() { var excludeUseColonTagList = this.observableProps.excludeUseColonTagList; if (excludeUseColonTagList !== undefined) { return excludeUseColonTagList; } var configExcludeUseColonTagList = this.getContextConfig('excludeUseColonTagList'); if (configExcludeUseColonTagList !== undefined) { return configExcludeUseColonTagList; } return defaultExcludeUseColonTag; } }, { key: "columns", get: function get() { var columns = this.observableProps.columns; if (isNumber(columns)) { return columns; } if (columns) { var responsiveColumns = this.responsiveItems[0]; if (responsiveColumns) { return responsiveColumns; } } return defaultColumns; } }, { key: "labelWidth", get: function get() { var labelWidth = this.observableProps.labelWidth; if (labelWidth === 'auto') { return labelWidth; } if (isNumber(labelWidth) || isArrayLike(labelWidth) && !hasBreakPointMap(labelWidth)) { return labelWidth; } if (labelWidth) { var responsiveWidth = this.responsiveItems[1]; if (responsiveWidth !== undefined) { return responsiveWidth; } } return defaultLabelWidth; } }, { key: "labelAlign", get: function get() { var labelAlign = this.observableProps.labelAlign; if (isString(labelAlign)) { return labelAlign; } if (labelAlign) { var responsiveAlign = this.responsiveItems[2]; if (responsiveAlign) { return responsiveAlign; } } return this.labelLayout === LabelLayout.vertical ? LabelAlign.left : this.getContextConfig('labelAlign') || LabelAlign.right; } }, { key: "labelLayout", get: function get() { var labelLayout = this.observableProps.labelLayout; if (isString(labelLayout)) { return labelLayout; } if (labelLayout) { var responsiveLabelLayout = this.responsiveItems[3]; if (responsiveLabelLayout) { return responsiveLabelLayout; } } return this.getContextConfig('labelLayout') || LabelLayout.horizontal; } }, { key: "labelTooltip", get: function get() { var labelTooltip = this.observableProps.labelTooltip; if (labelTooltip) { return labelTooltip; } var getTooltip = this.context.getTooltip; return getTooltip('label'); } }, { key: "readOnly", get: function get() { return this.observableProps.readOnly; } }, { key: "pristine", get: function get() { return this.observableProps.pristine; } }, { key: "fieldHighlightRenderer", get: function get() { return this.observableProps.fieldHighlightRenderer; } }, { key: "showValidation", get: function get() { return this.observableProps.showValidation; } }, { key: "showHelp", get: function get() { var showHelp = this.observableProps.showHelp; if (isString(showHelp)) { return showHelp; } return this.getContextConfig('showHelp') || ShowHelp.newLine; } }, { key: "separateSpacing", get: function get() { var separateSpacing = this.observableProps.separateSpacing; if (separateSpacing) { var _normalizeSeparateSpa = normalizeSeparateSpacing(separateSpacing), _normalizeSeparateSpa2 = _normalizeSeparateSpa.width, width = _normalizeSeparateSpa2 === void 0 ? 0 : _normalizeSeparateSpa2, _normalizeSeparateSpa3 = _normalizeSeparateSpa.height, height = _normalizeSeparateSpa3 === void 0 ? 0 : _normalizeSeparateSpa3; if (width || height) { return { width: width, height: height }; } if (isBreakPointMap(separateSpacing)) { var responsiveSeparateSpacing = this.responsiveItems[4]; if (responsiveSeparateSpacing) { var _responsiveSeparateSp = responsiveSeparateSpacing.width, _width = _responsiveSeparateSp === void 0 ? 0 : _responsiveSeparateSp, _responsiveSeparateSp2 = responsiveSeparateSpacing.height, _height = _responsiveSeparateSp2 === void 0 ? 0 : _responsiveSeparateSp2; return { width: _width, height: _height }; } } } return undefined; } }, { key: "spacingType", get: function get() { var spacingType = this.props.spacingType; return normalizeSpacingType(spacingType); } }, { key: "isReadOnly", value: function isReadOnly() { return this.readOnly; } }, { key: "isDisabled", value: function isDisabled() { var disabled = _get(_getPrototypeOf(Form.prototype), "isDisabled", this).call(this); if (disabled) { return disabled; } var record = this.record; if (record) { return record.disabled; } return false; } }, { key: "getObservableProps", value: function getObservableProps(props, context) { var observableProps = _objectSpread(_objectSpread({}, _get(_getPrototypeOf(Form.prototype), "getObservableProps", this).call(this, props, context)), {}, { contextDataSet: context.dataSet, contextRecord: context.record, dataIndex: props.dataIndex, contextDataIndex: context.dataIndex, labelLayout: 'labelLayout' in props ? props.labelLayout : context.labelLayout, labelAlign: 'labelAlign' in props ? props.labelAlign : context.labelAlign, showValidation: 'showValidation' in props ? props.showValidation : context.showValidation, showHelp: 'showHelp' in props ? props.showHelp : context.showHelp, labelTooltip: 'labelTooltip' in props ? props.labelTooltip : context.labelTooltip, disabled: 'disabled' in props ? props.disabled : context.disabled, readOnly: 'readOnly' in props ? props.readOnly : context.readOnly, labelWidth: defaultTo(props.labelWidth, context.labelWidth), pristine: 'pristine' in props ? props.pristine : context.pristine, columns: props.columns, useColon: props.useColon, requiredMarkAlign: props.requiredMarkAlign, excludeUseColonTagList: props.excludeUseColonTagList, separateSpacing: props.separateSpacing, fieldHighlightRenderer: 'fieldHighlightRenderer' in props ? props.fieldHighlightRenderer : context.fieldHighlightRenderer }); if ('record' in props) { observableProps.record = props.record; } return observableProps; } }, { key: "getOmitPropsKeys", value: function getOmitPropsKeys() { return _get(_getPrototypeOf(Form.prototype), "getOmitPropsKeys", this).call(this).concat(['record', 'dataIndex', 'onSuccess', 'onError', 'processParams', 'labelWidth', 'labelAlign', 'labelLayout', 'labelTooltip', 'columns', 'pristine', 'axios', 'useColon', 'requiredMarkAlign', 'excludeUseColonTagList', 'separateSpacing', 'spacingType', 'fieldHighlightRenderer', 'layout', 'showValidation', 'showHelp']); } }, { key: "getOtherProps", value: function getOtherProps() { var otherProps = _get(_getPrototypeOf(Form.prototype), "getOtherProps", this).call(this); otherProps.onSubmit = this.handleSubmit; otherProps.onReset = this.handleReset; if (!otherProps.name) { otherProps.name = this.name; } return otherProps; } }, { key: "getHeader", value: function getHeader() { var header = this.props.header, prefixCls = this.prefixCls; if (header) { return /*#__PURE__*/React.createElement("div", { key: "form-header", className: "".concat(prefixCls, "-header") }, header); } } }, { key: "getClassName", value: function getClassName() { var _objectSpread2; var prefixCls = this.prefixCls, labelLayout = this.labelLayout, columns = this.columns; for (var _len = arguments.length, props = new Array(_len), _key = 0; _key < _len; _key++) { props[_key] = arguments[_key]; } return _get(_getPrototypeOf(Form.prototype), "getClassName", this).call(this, _objectSpread(_objectSpread({}, props), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, "".concat(prefixCls, "-float-label"), labelLayout === LabelLayout["float"]), _defineProperty(_objectSpread2, "".concat(prefixCls, "-").concat(labelLayout), !isNil(labelLayout)), _defineProperty(_objectSpread2, "".concat(prefixCls, "-").concat(columns > 1 ? "multi" : "single"), true), _objectSpread2))); } }, { key: "componentWillMount", value: function componentWillMount() { this.processDataSetListener(true); } }, { key: "componentDidMount", value: function componentDidMount() { this.componentDidMountOrUpdate(); this.handleFormFocus(); _get(_getPrototypeOf(Form.prototype), "componentDidMount", this).call(this); } }, { key: "componentDidUpdate", value: function componentDidUpdate() { this.componentDidMountOrUpdate(); } }, { key: "componentWillUnmount", value: function componentWillUnmount() { this.processDataSetListener(false); if (this.isTooltipShown) { hide(); delete this.isTooltipShown; } this.bubbleValidationReport(false); } }, { key: "handleFormFocus", value: function handleFormFocus() { // 聚焦到form内第一个可编辑组件上 var fields = this.getFields(); var editableField; for (var i = 0; i < fields.length; i++) { var field = fields[i]; if (field.props.autoFocus) { break; } if (field.editable && !editableField) { editableField = field; } if (i === fields.length - 1 && editableField && this.getContextConfig('formAutoFocus')) { editableField.focus(); } } } }, { key: "componentDidMountOrUpdate", value: function componentDidMountOrUpdate() { var formNode = this.context.formNode; var element = this.element; if (formNode && element) { var isUnderForm = hasParentElement(element.parentElement, 'form'); if (isUnderForm !== this.isUnderForm) { this.isUnderForm = isUnderForm; } } } }, { key: "processDataSetListener", value: function processDataSetListener(flag) { var dataSet = this.dataSet; if (dataSet) { var handler = flag ? dataSet.addEventListener : dataSet.removeEventListener; handler.call(dataSet, DataSetEvents.validate, this.handleDataSetValidate); handler.call(dataSet, DataSetEvents.reset, this.handleDataSetReset); handler.call(dataSet, DataSetEvents.remove, this.handleDataSetRemove); } } }, { key: "bubbleValidationReport", value: function bubbleValidationReport(showInvalid) { var pristine = this.props.pristine; if (!pristine) { var onComponentValidationReport = this.getContextConfig('onComponentValidationReport'); if (onComponentValidationReport) { onComponentValidationReport({ showInvalid: showInvalid, component: this }); } } } }, { key: "handleDataSetReset", value: function handleDataSetReset(_ref) { var record = _ref.record, dataSet = _ref.dataSet; if (record) { var errors = dataSet.getAllValidationErrors(); this.bubbleValidationReport(errors.dataSet.length > 0 || errors.records.length > 0); } else { this.bubbleValidationReport(false); } } }, { key: "handleDataSetRemove", value: function handleDataSetRemove(_ref2) { var records = _ref2.records, dataSet = _ref2.dataSet; if (records) { var errors = dataSet.getAllValidationErrors(); this.bubbleValidationReport(errors.dataSet.length > 0 || errors.records.length > 0); } } // 处理校验失败定位 }, { key: "handleDataSetValidate", value: function handleDataSetValidate(props) { var valid = props.valid, validationErrors = props.errors, noLocate = props.noLocate; this.bubbleValidationReport(!valid); var autoValidationLocate = this.props.autoValidationLocate; if (autoValidationLocate !== false && !noLocate && !valid) { var _validationErrors = _slicedToArray(validationErrors, 1), firstInvalidRecord = _validationErrors[0]; if (firstInvalidRecord) { var errors = firstInvalidRecord.errors; if (errors.length) { var _errors = _slicedToArray(errors, 1), name = _errors[0].field.name; var field = this.getFields().find(function (item) { return item.props.name === name; }); if (field) { raf(function () { field.focus(); }); } } } } } }, { key: "handleHelpMouseEnter", value: function handleHelpMouseEnter(e, help, helpTooltipProps) { var target = e.target; var _this$context = this.context, getTooltipTheme = _this$context.getTooltipTheme, getTooltipPlacement = _this$context.getTooltipPlacement; show(target, _objectSpread({ title: help, theme: getTooltipTheme('help'), placement: getTooltipPlacement('help') }, helpTooltipProps)); this.isTooltipShown = true; } }, { key: "handleHelpMouseLeave", value: function handleHelpMouseLeave() { hide(); } }, { key: "renderTooltipHelp", value: function renderTooltipHelp(help, helpTooltipProps) { var _this2 = this; if (help) { return /*#__PURE__*/React.createElement(Icon, { type: "help", onMouseEnter: function onMouseEnter(e) { return _this2.handleHelpMouseEnter(e, help, helpTooltipProps); }, onMouseLeave: this.handleHelpMouseLeave }); } } }, { key: "rasterizedChildren", value: function rasterizedChildren() { var _this3 = this; var dataSet = this.dataSet, record = this.record, columns = this.columns, labelLayout = this.labelLayout, labelAlign = this.labelAlign, labelTooltip = this.labelTooltip, useColon = this.useColon, requiredMarkAlign = this.requiredMarkAlign, excludeUseColonTagList = this.excludeUseColonTagList, formReadOnly = this.readOnly, showHelp = this.showHelp, children = this.props.children; var prefixCls = this.getContextProPrefixCls(FIELD_SUFFIX); var labelWidth = normalizeLabelWidth(this.labelWidth, columns); var rows = []; var cols = []; var rowIndex = 0; var colIndex = 0; var matrix = [[]]; var noLabel = true; var childrenArray = []; var separateSpacing = this.separateSpacing; var isLabelLayoutHorizontal = labelLayout === LabelLayout.horizontal; var spacingProperties = separateSpacing ? getSpacingProperties(separateSpacing, this.spacingType, isLabelLayoutHorizontal) : undefined; var isAllOutputCom = true; Children.forEach(children, function (child) { if ( /*#__PURE__*/isValidElement(child)) { var setChild = function setChild(arr, outChild) { var groupProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; var type = outChild.type, outChildProps = outChild.props; if (outChildProps.hidden) return null; if (type) { if (isAllOutputCom && isFunction(type) && !type.__PRO_OUTPUT && !(type.displayName === 'IntlField' && outChildProps && outChildProps.displayOutput)) { isAllOutputCom = false; } if (noLabel === true && isLabelLayoutHorizontal && getProperty(outChildProps, 'label', dataSet, record)) { noLabel = false; } var outChildChildren = outChildProps.children, otherOutChildProps = _objectWithoutProperties(outChildProps, _excluded); var isFragmentElement = isFragment(outChild); if (isFragmentElement || type.__PRO_FORM_VIRTUAL_GROUP) { Children.forEach(outChildChildren, function (c) { if ( /*#__PURE__*/isValidElement(c)) { setChild(arr, c, isFragmentElement ? groupProps : _objectSpread(_objectSpread({}, groupProps), otherOutChildProps)); } }); } else { arr.push(Object.keys(groupProps).length ? /*#__PURE__*/cloneElement(outChild, _objectSpread(_objectSpread({}, groupProps), outChildProps)) : outChild); } } }; setChild(childrenArray, child); } }); function completeLine() { if (cols.length) { var maxRowSpan = Math.max.apply(Math, _toConsumableArray(cols.map(function (x) { return x.props.rowSpan; }))); if (rows[rowIndex]) { rows[rowIndex] = /*#__PURE__*/React.createElement("tr", { key: "row-".concat(rowIndex) }, cols); } else { rows.push( /*#__PURE__*/React.createElement("tr", { key: "row-".concat(rowIndex) }, cols)); } if (maxRowSpan > 1) { new Array(maxRowSpan - 1).fill(0).forEach(function () { return rows.push( /*#__PURE__*/React.createElement("tr", null)); }); } cols = []; } rowIndex++; colIndex = 0; matrix[rowIndex] = matrix[rowIndex] || []; } var _loop = function _loop(_index, len) { var _classNames, _classNames2; var _childrenArray$_index = childrenArray[_index], props = _childrenArray$_index.props, key = _childrenArray$_index.key, type = _childrenArray$_index.type, ref = _childrenArray$_index.ref; var TagName = isFunction(type) ? type.displayName : type; var label = getProperty(props, 'label', dataSet, record); var help = getProperty(props, 'help', dataSet, record); var fieldLabelWidth = getProperty(props, 'labelWidth', dataSet, record); var required = getPropertyDSFirst(props, 'required', dataSet, record); var readOnly = getProperty(props, 'readOnly', dataSet, record) || formReadOnly; var intlFieldOutput = TagName === 'IntlField' && props && props.displayOutput; var _props$rowSpan = props.rowSpan, rowSpan = _props$rowSpan === void 0 ? 1 : _props$rowSpan, _props$colSpan = props.colSpan, colSpan = _props$colSpan === void 0 ? 1 : _props$colSpan, newLine = props.newLine, className = props.className, fieldClassName = props.fieldClassName, _props$useColon = props.useColon, fieldUseColon = _props$useColon === void 0 ? useColon : _props$useColon, _props$requiredMarkAl = props.requiredMarkAlign, fieldRequiredMarkAlign = _props$requiredMarkAl === void 0 ? requiredMarkAlign : _props$requiredMarkAl, otherProps = _objectWithoutProperties(props, _excluded2); var newColSpan = colSpan; var currentRow = matrix[rowIndex]; if (newLine) { if (colIndex !== 0) { completeLine(); index = _index; return "continue"; } } while (currentRow[colIndex]) { colIndex++; } if (colIndex >= columns) { completeLine(); index = _index; return "continue"; } if (newColSpan + colIndex > columns) { newColSpan = columns - colIndex; } for (var _i2 = colIndex, k = colIndex + newColSpan; _i2 < k; _i2++) { if (currentRow[_i2]) { newColSpan = _i2 - colIndex; break; } } for (var _i3 = rowIndex; _i3 < rowSpan + rowIndex; _i3++) { for (var j = colIndex, _k = newColSpan + colIndex; j < _k; j++) { if (!matrix[_i3]) { matrix[_i3] = []; } matrix[_i3][j] = true; } } var fieldElementProps = _objectSpread({ ref: ref, key: key, className: classNames(prefixCls, className) }, otherProps); var isOutput = type.__PRO_OUTPUT || intlFieldOutput; var outputMix = !isAllOutputCom && isOutput ? 'mix' : ''; var isLabelShowHelp = (fieldElementProps.showHelp || showHelp) === ShowHelp.label; var labelClassName = classNames("".concat(prefixCls, "-label"), "".concat(prefixCls, "-label-").concat(labelAlign), fieldClassName, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-required"), required && !isOutput), _defineProperty(_classNames, "".concat(prefixCls, "-readonly"), readOnly), _defineProperty(_classNames, "".concat(prefixCls, "-label-vertical"), labelLayout === LabelLayout.vertical), _defineProperty(_classNames, "".concat(prefixCls, "-label-output"), isLabelLayoutHorizontal && isOutput), _defineProperty(_classNames, "".concat(prefixCls, "-label-output-").concat(outputMix), isLabelLayoutHorizontal && isOutput && outputMix), _defineProperty(_classNames, "".concat(prefixCls, "-label-useColon"), label && fieldUseColon && !excludeUseColonTagList.find(function (v) { return v === TagName; })), _defineProperty(_classNames, "".concat(prefixCls, "-label-required-mark-").concat(getRequiredMarkAlign(fieldRequiredMarkAlign)), isLabelLayoutHorizontal && required && !isOutput && getRequiredMarkAlign(fieldRequiredMarkAlign)), _defineProperty(_classNames, "".concat(prefixCls, "-label-help"), isLabelShowHelp), _classNames)); var wrapperClassName = classNames("".concat(prefixCls, "-wrapper"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-output"), isLabelLayoutHorizontal && isOutput), _defineProperty(_classNames2, "".concat(prefixCls, "-output-").concat(outputMix), isLabelLayoutHorizontal && isOutput && outputMix), _classNames2)); if (!noLabel && !type.__PRO_FORM_ITEM) { var _columnLabelWidth = labelWidth[colIndex]; if (!isNaN(fieldLabelWidth) && _columnLabelWidth !== 'auto') { labelWidth[colIndex] = Math.max(_columnLabelWidth, fieldLabelWidth); } var tooltip = 'labelTooltip' in props ? props.labelTooltip : labelTooltip; cols.push( /*#__PURE__*/React.createElement(FormItemLabel, { key: "row-".concat(rowIndex, "-col-").concat(colIndex, "-label"), className: labelClassName, rowSpan: rowSpan, style: spacingProperties ? getSpacingLabelStyle(spacingProperties, isLabelLayoutHorizontal, rowIndex) : undefined, tooltip: tooltip, help: isLabelShowHelp ? _this3.renderTooltipHelp(help, fieldElementProps.helpTooltipProps) : undefined }, toJS(label))); } if (!isString(type)) { fieldElementProps.rowIndex = rowIndex; fieldElementProps.colIndex = colIndex; } var currentColSpan = noLabel ? newColSpan : newColSpan * 2 - (type.__PRO_FORM_ITEM ? 0 : 1); cols.push( /*#__PURE__*/React.createElement("td", { key: "row-".concat(rowIndex, "-col-").concat(colIndex, "-field"), colSpan: currentColSpan, rowSpan: rowSpan, className: fieldClassName, style: spacingProperties ? getSpacingFieldStyle(spacingProperties, isLabelLayoutHorizontal, rowIndex) : undefined }, labelLayout === LabelLayout.vertical && !!label && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", { className: labelClassName }, toJS(label)), isLabelShowHelp ? _this3.renderTooltipHelp(help, fieldElementProps.helpTooltipProps) : null), /*#__PURE__*/React.createElement("div", { className: wrapperClassName }, /*#__PURE__*/createElement(type, fieldElementProps)))); if (_index === len - 1) { completeLine(); } else { colIndex++; } _index++; index = _index; }; for (var index = 0, len = childrenArray.length; index < len;) { var _ret = _loop(index, len); if (_ret === "continue") continue; } cols = []; var isAutoWidth = !noLabel && labelWidth.some(function (w) { return w === 'auto'; }); if (!noLabel) { for (var i = 0; i < columns; i++) { var key = "label-".concat(i); var columnLabelWidth = labelWidth[i % columns]; if (columnLabelWidth === 'auto') { cols.push( /*#__PURE__*/React.createElement("col", { key: key })); } else { cols.push( /*#__PURE__*/React.createElement("col", { key: key, // 优化当使用 separateSpacing label 宽度太窄问题 style: { width: pxToRem(spacingProperties ? spacingProperties.paddingHorizontal + columnLabelWidth : columnLabelWidth) } })); } cols.push( /*#__PURE__*/React.createElement("col", { key: "wrapper-".concat(i), style: isAutoWidth ? { width: "".concat(100 / columns, "%") } : undefined })); } } else { for (var _i = 0; _i < columns; _i++) { cols.push( /*#__PURE__*/React.createElement("col", { key: "wrapper-".concat(_i) })); } } return /*#__PURE__*/React.createElement("table", { key: "form-body", style: spacingProperties && spacingProperties.style, className: "".concat(isAutoWidth ? 'auto-width' : '') }, cols.length ? /*#__PURE__*/React.createElement("colgroup", null, cols) : undefined, /*#__PURE__*/React.createElement("tbody", null, rows)); } }, { key: "getMergedProps", value: function getMergedProps() { var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; var mergedProps = _get(_getPrototypeOf(Form.prototype), "getMergedProps", this).call(this, props); if (this.spacingType.width === SpacingType.between && this.separateSpacing && this.separateSpacing.width > 0) { mergedProps.style = _objectSpread(_objectSpread({}, mergedProps.style), {}, { overflowX: 'hidden' }); } return mergedProps; } }, { key: "render", value: function render() { var labelWidth = this.labelWidth, labelAlign = this.labelAlign, labelLayout = this.labelLayout, labelTooltip = this.labelTooltip, pristine = this.pristine, dataSet = this.dataSet, record = this.record, dataIndex = this.dataIndex, observableProps = this.observableProps, disabled = this.disabled, readOnly = this.readOnly, fieldHighlightRenderer = this.fieldHighlightRenderer, props = this.props, useColon = this.useColon, requiredMarkAlign = this.requiredMarkAlign, showValidation = this.showValidation, showHelp = this.showHelp; var _this$context2 = this.context, formNode = _this$context2.formNode, getConfig = _this$context2.getConfig, getProPrefixCls = _this$context2.getProPrefixCls, getPrefixCls = _this$context2.getPrefixCls, getCustomizable = _this$context2.getCustomizable, getTooltip = _this$context2.getTooltip, getTooltipTheme = _this$context2.getTooltipTheme, getTooltipPlacement = _this$context2.getTooltipPlacement; var value = { formNode: formNode || this, dataSet: dataSet, dataIndex: dataIndex, record: record, labelWidth: labelWidth, labelAlign: labelAlign, labelLayout: labelLayout, labelTooltip: labelTooltip, pristine: pristine, disabled: disabled, readOnly: readOnly, fieldHighlightRenderer: fieldHighlightRenderer, useColon: useColon, requiredMarkAlign: requiredMarkAlign, showValidation: showValidation, showHelp: showHelp, getConfig: getConfig, getPrefixCls: getPrefixCls, getProPrefixCls: getProPrefixCls, getCustomizable: getCustomizable, getTooltip: getTooltip, getTooltipTheme: getTooltipTheme, getTooltipPlacement: getTooltipPlacement }; var children = [this.getHeader(), props.layout === FormLayout.table ? this.rasterizedChildren() : props.children]; return /*#__PURE__*/React.createElement(Responsive, { items: [observableProps.columns, observableProps.labelWidth, observableProps.labelAlign, observableProps.labelLayout, observableProps.separateSpacing], onChange: this.handleResponsive }, /*#__PURE__*/React.createElement(FormProvider, { value: value }, this.isUnderForm ? children : formNode && this.isUnderForm === undefined ? /*#__PURE__*/React.createElement("div", _extends({}, this.getMergedProps()), children) : /*#__PURE__*/React.createElement("form", _extends({}, this.getMergedProps(), { noValidate: true }), children))); } }, { key: "handleResponsive", value: function handleResponsive(items) { this.responsiveItems = items; } }, { key: "handleSubmit", value: function () { var _handleSubmit = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(e) { var _this$props, target, action, dataSet, method, _this$props$processPa, processParams, _this$props$onSuccess, onSuccess, _this$props$onError, onError, _this$props$onSubmit, onSubmit; return _regeneratorRuntime.wrap(function _callee2$(_context2) { while (1) { switch (_context2.prev = _context2.next) { case 0: e.preventDefault(); e.persist(); _context2.next = 4; return this.checkValidity(); case 4: if (!_context2.sent) { _context2.next = 31; break; } _this$props = this.props, target = _this$props.target, action = _this$props.action, dataSet = _this$props.dataSet, method = _this$props.method, _this$props$processPa = _this$props.processParams, processParams = _this$props$processPa === void 0 ? noop : _this$props$processPa, _this$props$onSuccess = _this$props.onSuccess, onSuccess = _this$props$onSuccess === void 0 ? noop : _this$props$onSuccess, _this$props$onError = _this$props.onError, onError = _this$props$onError === void 0 ? noop : _this$props$onError, _this$props$onSubmit = _this$props.onSubmit, onSubmit = _this$props$onSubmit === void 0 ? noop : _this$props$onSubmit; onSubmit(e); _context2.prev = 7; if (!dataSet) { _context2.next = 16; break; } _context2.t0 = onSuccess; _context2.next = 12; return dataSet.submit(); case 12: _context2.t1 = _context2.sent; (0, _context2.t0)(_context2.t1); _context2.next = 26; break; case 16: if (!action) { _context2.next = 26; break; } if (!(target && this.element)) { _context2.next = 21; break; } this.element.submit(); _context2.next = 26; break; case 21: _context2.t2 = onSuccess; _context2.next = 24; return this.axios[method || 'get'](action, processParams(e)); case 24: _context2.t3 = _context2.sent; (0, _context2.t2)(_context2.t3); case 26: _context2.next = 31; break; case 28: _context2.prev = 28; _context2.t4 = _context2["catch"](7); onError(_context2.t4); case 31: case "end": return _context2.stop(); } } }, _callee2, this, [[7, 28]]); })); function handleSubmit(_x) { return _handleSubmit.apply(this, arguments); } return handleSubmit; }() }, { key: "handleReset", value: function handleReset(e) { var _this$props$onReset = this.props.onReset, onReset = _this$props$onReset === void 0 ? noop : _this$props$onReset; var record = this.record; onReset(e); if (!e.isDefaultPrevented()) { if (record) { record.reset(); } else { this.getFields().forEach(function (field) { return field.reset(); }); } } } }, { key: "reportValidity", value: function reportValidity(result) { var _this4 = this; var prepareForReport = this.prepareForReport; if (!result) { prepareForReport.result = result; } if (prepareForReport.timeout) { window.clearTimeout(prepareForReport.timeout); } prepareForReport.timeout = window.setTimeout(function () { if (!prepareForReport.result) { var field = _this4.getFields().find(function (one) { return !one.valid; }); if (field) { field.focus(); } } _this4.prepareForReport = {}; }, 200); } }, { key: "checkValidity", value: function checkValidity() { var _this5 = this; var dataSet = this.dataSet; if (dataSet) { if (!dataSet.length) { dataSet.create(); } return dataSet.validate(); } this.validating = true; return Promise.all(this.getFields().map(function (field) { return field.checkValidity(); })).then(function (results) { var valid = results.every(function (result) { return result; }); _this5.reportValidity(valid); _this5.validating = false; return valid; })["catch"](function (error) { _this5.validating = false; throw error; }); } }, { key: "getFields", value: function getFields() { var id = this.props.id; if (id) { return [].concat(this.fields, getFieldsById(id)); } return this.fields; } }, { key: "getField", value: function getField(name) { return this.getFields().find(function (field) { return field.props.name === name; }); } }, { key: "addField", value: function addField(field) { this.fields.push(field); } }, { key: "removeField", value: function removeField(field) { var index = this.fields.indexOf(field); if (index !== -1) { this.fields.splice(index, 1); } } }], [{ key: "contextType", get: function get() { return FormContext; } }]); return Form; }(DataSetComponent); Form.displayName = 'Form'; Form.ItemGroup = ItemGroup; Form.FormVirtualGroup = FormVirtualGroup; Form.Item = Item; Form.defaultProps = { suffixCls: 'form', columns: defaultColumns, labelWidth: defaultLabelWidth, layout: FormLayout.table }; __decorate([observable], Form.prototype, "responsiveItems", void 0); __decorate([observable], Form.prototype, "isUnderForm", void 0); __decorate([computed], Form.prototype, "axios", null); __decorate([computed], Form.prototype, "dataSet", null); __decorate([computed], Form.prototype, "record", null); __decorate([computed], Form.prototype, "dataIndex", null); __decorate([computed], Form.prototype, "useColon", null); __decorate([computed], Form.prototype, "requiredMarkAlign", null); __decorate([computed], Form.prototype, "excludeUseColonTagList", null); __decorate([computed], Form.prototype, "columns", null); __decorate([computed], Form.prototype, "labelWidth", null); __decorate([computed], Form.prototype, "labelAlign", null); __decorate([computed], Form.prototype, "labelLayout", null); __decorate([computed], Form.prototype, "labelTooltip", null); __decorate([computed], Form.prototype, "readOnly", null); __decorate([computed], Form.prototype, "pristine", null); __decorate([computed], Form.prototype, "fieldHighlightRenderer", null); __decorate([computed], Form.prototype, "showValidation", null); __decorate([computed], Form.prototype, "showHelp", null); __decorate([computed], Form.prototype, "separateSpacing", null); __decorate([mobxAction], Form.prototype, "componentDidMountOrUpdate", null); __decorate([autobind], Form.prototype, "handleDataSetReset", null); __decorate([autobind], Form.prototype, "handleDataSetRemove", null); __decorate([autobind], Form.prototype, "handleDataSetValidate", null); __decorate([autobind], Form.prototype, "handleHelpMouseEnter", null); __decorate([autobind], Form.prototype, "handleHelpMouseLeave", null); __decorate([autobind, mobxAction], Form.prototype, "handleResponsive", null); __decorate([autobind], Form.prototype, "handleSubmit", null); __decorate([autobind], Form.prototype, "handleReset", null); Form = __decorate([observer], Form); export default Form; //# sourceMappingURL=Form.js.map