choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
1,038 lines (873 loc) • 34.1 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
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 _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _regeneratorRuntime from "@babel/runtime/regenerator";
var _PropTypes$shape, _PropTypes$shape2, _PropTypes$shape3, _PropTypes$shape4;
function _createSuper(Derived) {
function isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
return true;
} catch (e) {
return false;
}
}
return function () {
var Super = _getPrototypeOf(Derived),
result;
if (isNativeReflectConstruct()) {
var NewTarget = _getPrototypeOf(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return _possibleConstructorReturn(this, result);
};
}
import { __decorate } from "tslib";
import React, { Children, cloneElement, createElement, isValidElement } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { observer } from 'mobx-react';
import { action as mobxAction, computed, isArrayLike, observable, runInAction } from 'mobx';
import omit from 'lodash/omit';
import isNumber from 'lodash/isNumber';
import isString from 'lodash/isString';
import noop from 'lodash/noop';
import defaultTo from 'lodash/defaultTo';
import Responsive from '../../../es/responsive/Responsive';
import { getConfig, getProPrefixCls } from '../../../es/configure';
import { pxToRem } from '../../../es/_util/UnitConvertor';
import isFunction from 'lodash/isFunction';
import isArray from 'lodash/isArray';
import axios from '../axios';
import autobind from '../_util/autobind';
import { getFieldsById } from '../field/FormField';
import FormContext from './FormContext';
import DataSetComponent from '../data-set/DataSetComponent';
import { LabelAlign, LabelLayout, ResponsiveKeys } from './enum';
import { defaultColumns, defaultExcludeUseColonTag, defaultLabelWidth, FIELD_SUFFIX, findFirstInvalidElement, getProperty, normalizeLabelWidth } from './utils';
import FormVirtualGroup from './FormVirtualGroup';
/**
* 表单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 labelWidthPropTypes = PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto']), PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]))]);
var labelAlignPropTypes = PropTypes.oneOf([LabelAlign.left, LabelAlign.center, LabelAlign.right]);
var labelLayoutPropTypes = PropTypes.oneOf([LabelLayout.horizontal, LabelLayout.vertical, LabelLayout.placeholder, LabelLayout["float"]]);
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;
runInAction(function () {
_this.responsiveItems = [];
});
return _this;
}
_createClass(Form, [{
key: "isDisabled",
value: function isDisabled() {
return _get(_getPrototypeOf(Form.prototype), "isDisabled", this).call(this) || this.context.disabled;
}
}, {
key: "isReadOnly",
value: function isReadOnly() {
return this.props.readOnly || this.context.readOnly;
}
}, {
key: "getObservableProps",
value: function getObservableProps(props, context) {
return _objectSpread({}, _get(_getPrototypeOf(Form.prototype), "getObservableProps", this).call(this, props, context), {
dataSet: 'dataSet' in props ? props.dataSet : context.dataSet,
record: 'record' in props ? props.record : context.record,
dataIndex: defaultTo(props.dataIndex, context.dataIndex),
labelLayout: 'labelLayout' in props ? props.labelLayout : context.labelLayout,
labelAlign: 'labelAlign' in props ? props.labelAlign : context.labelAlign,
labelWidth: defaultTo(props.labelWidth, context.labelWidth),
pristine: 'pristine' in props ? props.pristine : context.pristine,
columns: props.columns,
useColon: props.useColon,
excludeUseColonTagList: props.excludeUseColonTagList,
separateSpacing: props.separateSpacing
});
}
}, {
key: "getOtherProps",
value: function getOtherProps() {
var otherProps = omit(_get(_getPrototypeOf(Form.prototype), "getOtherProps", this).call(this), ['record', 'dataIndex', 'onSuccess', 'onError', 'processParams', 'labelWidth', 'labelAlign', 'labelLayout', 'columns', 'pristine', 'axios', 'useColon', 'excludeUseColonTagList', 'separateSpacing']);
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 React.createElement("div", {
key: "form-header",
className: "".concat(prefixCls, "-header")
}, header);
}
}
}, {
key: "getClassName",
value: function getClassName() {
var prefixCls = this.prefixCls,
labelLayout = this.labelLayout;
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({}, props, _defineProperty({}, "".concat(prefixCls, "-float-label"), labelLayout === LabelLayout["float"])));
}
}, {
key: "componentWillMount",
value: function componentWillMount() {
this.processDataSetListener(true);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.processDataSetListener(false);
}
}, {
key: "processDataSetListener",
value: function processDataSetListener(flag) {
var dataSet = this.dataSet;
if (dataSet) {
var handler = flag ? dataSet.addEventListener : dataSet.removeEventListener;
handler.call(dataSet, 'validate', this.handleDataSetValidate);
}
} // 处理校验失败定位
}, {
key: "handleDataSetValidate",
value: function () {
var _handleDataSetValidate = _asyncToGenerator(
/*#__PURE__*/
_regeneratorRuntime.mark(function _callee2(_ref) {
var result, item;
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
result = _ref.result;
_context2.next = 3;
return result;
case 3:
if (_context2.sent) {
_context2.next = 6;
break;
}
item = this.element ? findFirstInvalidElement(this.element) : null;
if (item) {
item.focus();
}
case 6:
case "end":
return _context2.stop();
}
}
}, _callee2, this);
}));
function handleDataSetValidate(_x) {
return _handleDataSetValidate.apply(this, arguments);
}
return handleDataSetValidate;
}()
}, {
key: "rasterizedChildren",
value: function rasterizedChildren() {
var _this2 = this;
var dataSet = this.dataSet,
record = this.record,
columns = this.columns,
labelLayout = this.labelLayout,
labelAlign = this.labelAlign,
useColon = this.useColon,
excludeUseColonTagList = this.excludeUseColonTagList,
children = this.props.children;
var prefixCls = getProPrefixCls(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 separateSpacingWidth = this.separateSpacing ? this.separateSpacing.width / 2 : 0;
Children.forEach(children, function (child) {
if (isValidElement(child)) {
var setChild = function setChild(arr, outChild) {
var groupProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
if (noLabel === true && labelLayout === LabelLayout.horizontal && getProperty(outChild.props, 'label', dataSet, record)) {
noLabel = false;
}
if (!(outChild === null || outChild === void 0 ? void 0 : outChild.type)) {
return;
}
if ((outChild === null || outChild === void 0 ? void 0 : outChild.type) && outChild.type.displayName === 'FormVirtualGroup') {
if (!outChild.props.children) {
return;
}
if (isArray(outChild.props.children)) {
outChild.props.children.forEach(function (c) {
setChild(arr, c, omit(outChild.props, ['children']));
});
} else if ((outChild === null || outChild === void 0 ? void 0 : outChild.type) && outChild.type.displayName === 'FormVirtualGroup') {
setChild(arr, outChild.props.children, omit(outChild.props, ['children']));
} else {
arr.push(cloneElement(outChild.props.children, _objectSpread({}, groupProps, {}, outChild.props.children.props)));
}
} else {
arr.push(cloneElement(outChild, _objectSpread({}, groupProps, {}, outChild.props)));
}
};
setChild(childrenArray, child);
}
});
function completeLine() {
if (cols.length) {
rows.push(React.createElement("tr", {
key: "row-".concat(rowIndex)
}, cols));
cols = [];
}
rowIndex++;
colIndex = 0;
matrix[rowIndex] = matrix[rowIndex] || [];
}
var _loop = function _loop(_index, len) {
var _classNames;
var _childrenArray$_index = childrenArray[_index],
props = _childrenArray$_index.props,
key = _childrenArray$_index.key,
type = _childrenArray$_index.type;
var TagName = type;
if (isFunction(type)) {
TagName = type.displayName;
}
var label = getProperty(props, 'label', dataSet, record);
var fieldLabelWidth = getProperty(props, 'labelWidth', dataSet, record);
var required = getProperty(props, 'required', dataSet, record);
var readOnly = getProperty(props, 'readOnly', dataSet, record) || _this2.isReadOnly();
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,
otherProps = _objectWithoutProperties(props, ["rowSpan", "colSpan", "newLine", "className", "fieldClassName"]);
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 isOutput = labelLayout === LabelLayout.horizontal && type.displayName === 'Output';
var labelClassName = classNames("".concat(prefixCls, "-label"), "".concat(prefixCls, "-label-").concat(labelAlign), fieldClassName, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-required"), required), _defineProperty(_classNames, "".concat(prefixCls, "-readonly"), readOnly), _defineProperty(_classNames, "".concat(prefixCls, "-label-vertical"), labelLayout === LabelLayout.vertical), _defineProperty(_classNames, "".concat(prefixCls, "-label-output"), isOutput), _defineProperty(_classNames, "".concat(prefixCls, "-label-useColon"), useColon && !excludeUseColonTagList.find(function (v) {
return v === TagName;
})), _classNames));
var wrapperClassName = classNames("".concat(prefixCls, "-wrapper"), _defineProperty({}, "".concat(prefixCls, "-output"), isOutput));
if (!noLabel) {
if (!isNaN(fieldLabelWidth)) {
labelWidth[colIndex] = Math.max(labelWidth[colIndex], fieldLabelWidth);
}
cols.push(React.createElement("td", {
key: "row-".concat(rowIndex, "-col-").concat(colIndex, "-label"),
className: labelClassName,
rowSpan: rowSpan,
style: _this2.labelLayout === LabelLayout.horizontal && separateSpacingWidth ? {
paddingLeft: pxToRem(separateSpacingWidth + 5)
} : undefined
}, React.createElement("label", {
title: isString(label) ? label : ''
}, React.createElement("span", null, label))));
}
var fieldElementProps = _objectSpread({
key: key,
className: classNames(prefixCls, className)
}, otherProps);
if (!isString(type)) {
fieldElementProps.rowIndex = rowIndex;
fieldElementProps.colIndex = colIndex;
}
cols.push(React.createElement("td", {
key: "row-".concat(rowIndex, "-col-").concat(colIndex, "-field"),
colSpan: noLabel ? newColSpan : newColSpan * 2 - 1,
rowSpan: rowSpan,
className: fieldClassName,
style: _this2.labelLayout === LabelLayout.horizontal && separateSpacingWidth ? {
paddingRight: pxToRem(separateSpacingWidth + 5)
} : undefined
}, labelLayout === LabelLayout.vertical && React.createElement("label", {
className: labelClassName
}, label), React.createElement("div", {
className: wrapperClassName
}, 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 = []; // 优化当使用separateSoacing label宽度太窄问题
var labelWidthProcess = function labelWidthProcess(widthInner) {
if (isNumber(widthInner)) {
if (_this2.labelLayout === LabelLayout.horizontal) {
return separateSpacingWidth + widthInner;
}
return widthInner;
}
return separateSpacingWidth + defaultLabelWidth;
};
if (!noLabel) {
for (var i = 0; i < columns; i++) {
cols.push(React.createElement("col", {
key: "label-".concat(i),
style: {
width: pxToRem(labelWidthProcess(labelWidth[i % columns]))
}
}), React.createElement("col", {
key: "wrapper-".concat(i)
}));
}
} else {
for (var _i = 0; _i < columns; _i++) {
cols.push(React.createElement("col", {
key: "wrapper-".concat(_i)
}));
}
}
var tableStyle;
var separateSpacing = this.separateSpacing;
if (separateSpacing) {
if (this.labelLayout === LabelLayout.horizontal) {
tableStyle = {
borderCollapse: 'separate',
borderSpacing: "0rem ".concat(pxToRem(separateSpacing.height))
};
} else {
tableStyle = {
borderCollapse: 'separate',
borderSpacing: "".concat(pxToRem(separateSpacing.width), " ").concat(pxToRem(separateSpacing.height))
};
}
}
var isAutoWidth = this.labelWidth === 'auto' || isArrayLike(this.labelWidth) && this.labelWidth.some(function (w) {
return w === 'auto';
});
return [this.getHeader(), React.createElement("table", {
style: tableStyle,
key: "form-body",
className: "".concat(isAutoWidth ? 'auto-width' : '')
}, cols.length ? React.createElement("colgroup", null, cols) : undefined, React.createElement("tbody", null, rows))];
}
}, {
key: "render",
value: function render() {
var labelWidth = this.labelWidth,
labelAlign = this.labelAlign,
labelLayout = this.labelLayout,
pristine = this.pristine,
dataSet = this.dataSet,
record = this.record,
dataIndex = this.dataIndex,
observableProps = this.observableProps;
var formNode = this.context.formNode;
var value = {
formNode: formNode || this,
dataSet: dataSet,
dataIndex: dataIndex,
record: record,
labelWidth: labelWidth,
labelAlign: labelAlign,
labelLayout: labelLayout,
pristine: pristine,
disabled: this.isDisabled(),
readOnly: this.isReadOnly()
};
var children = this.rasterizedChildren();
if (!formNode) {
children = React.createElement("form", _extends({}, this.getMergedProps(), {
noValidate: true
}), children);
}
return React.createElement(Responsive, {
items: [observableProps.columns, observableProps.labelWidth, observableProps.labelAlign, observableProps.labelLayout],
onChange: this.handleResponsive
}, React.createElement(FormContext.Provider, {
value: value
}, children));
}
}, {
key: "handleResponsive",
value: function handleResponsive(items) {
this.responsiveItems = items;
}
}, {
key: "handleSubmit",
value: function () {
var _handleSubmit = _asyncToGenerator(
/*#__PURE__*/
_regeneratorRuntime.mark(function _callee3(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 _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
e.preventDefault();
e.persist();
_context3.next = 4;
return this.checkValidity();
case 4:
if (!_context3.sent) {
_context3.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);
_context3.prev = 7;
if (!dataSet) {
_context3.next = 16;
break;
}
_context3.t0 = onSuccess;
_context3.next = 12;
return dataSet.submit();
case 12:
_context3.t1 = _context3.sent;
(0, _context3.t0)(_context3.t1);
_context3.next = 26;
break;
case 16:
if (!action) {
_context3.next = 26;
break;
}
if (!(target && this.element)) {
_context3.next = 21;
break;
}
this.element.submit();
_context3.next = 26;
break;
case 21:
_context3.t2 = onSuccess;
_context3.next = 24;
return this.axios[method || 'get'](action, processParams(e));
case 24:
_context3.t3 = _context3.sent;
(0, _context3.t2)(_context3.t3);
case 26:
_context3.next = 31;
break;
case 28:
_context3.prev = 28;
_context3.t4 = _context3["catch"](7);
onError(_context3.t4);
case 31:
case "end":
return _context3.stop();
}
}
}, _callee3, this, [[7, 28]]);
}));
function handleSubmit(_x2) {
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: "checkValidity",
value: function checkValidity() {
var dataSet = this.dataSet;
if (dataSet) {
if (!dataSet.length) {
dataSet.create();
}
return dataSet.validate();
}
return Promise.all(this.getFields().map(function (field) {
return field.checkValidity();
})).then(function (results) {
return results.every(function (result) {
return result;
});
});
}
}, {
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: "axios",
get: function get() {
return this.observableProps.axios || getConfig('axios') || axios;
}
}, {
key: "dataSet",
get: function get() {
var record = this.record;
if (record) {
return record.dataSet;
}
return this.observableProps.dataSet;
}
}, {
key: "record",
get: function get() {
var _this$observableProps = this.observableProps,
record = _this$observableProps.record,
dataSet = _this$observableProps.dataSet,
dataIndex = _this$observableProps.dataIndex;
if (record) {
return record;
}
if (dataSet) {
if (isNumber(dataIndex)) {
return dataSet.get(dataIndex);
}
return dataSet.current;
}
return undefined;
}
}, {
key: "dataIndex",
get: function get() {
return this.observableProps.dataIndex;
}
}, {
key: "useColon",
get: function get() {
var useColon = this.observableProps.useColon;
if (useColon !== undefined) {
return useColon;
}
var configUseColon = getConfig('useColon');
if (configUseColon !== undefined) {
return configUseColon;
}
return false;
}
}, {
key: "excludeUseColonTagList",
get: function get() {
var excludeUseColonTagList = this.observableProps.excludeUseColonTagList;
if (excludeUseColonTagList !== undefined) {
return excludeUseColonTagList;
}
var configExcludeUseColonTagList = getConfig('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)) {
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;
var defaultLabelAlign = this.labelLayout === LabelLayout.vertical ? LabelAlign.left : LabelAlign.right;
if (isString(labelAlign)) {
return labelAlign;
}
if (labelAlign) {
var responsiveAlign = this.responsiveItems[2];
if (responsiveAlign) {
return responsiveAlign;
}
}
return defaultLabelAlign;
}
}, {
key: "labelLayout",
get: function get() {
var defaultLabelLayout = getConfig('labelLayout') || LabelLayout.horizontal;
var labelLayout = this.observableProps.labelLayout;
if (isString(labelLayout)) {
return labelLayout;
}
if (labelLayout) {
var responsiveLabelLayout = this.responsiveItems[3];
if (responsiveLabelLayout) {
return responsiveLabelLayout;
}
}
return defaultLabelLayout;
}
}, {
key: "pristine",
get: function get() {
return this.observableProps.pristine;
}
}, {
key: "separateSpacing",
get: function get() {
var separateSpacing = this.observableProps.separateSpacing;
if (separateSpacing) {
var _separateSpacing$widt = separateSpacing.width,
width = _separateSpacing$widt === void 0 ? 0 : _separateSpacing$widt,
_separateSpacing$heig = separateSpacing.height,
height = _separateSpacing$heig === void 0 ? 0 : _separateSpacing$heig;
if (width || height) {
return {
width: width,
height: height
};
}
}
return undefined;
}
}]);
return Form;
}(DataSetComponent);
Form.displayName = 'Form';
Form.FormVirtualGroup = FormVirtualGroup;
Form.propTypes = _objectSpread({
/**
* 表单提交请求地址
*/
action: PropTypes.string,
/**
* 表单提交的HTTP Method
* 可选值：POST | GET
* @default POST
*/
method: PropTypes.string,
/**
* 表单提交的目标
* 当表单设置了设置target且没有dataSet时作浏览器默认提交，否则作Ajax提交
*/
target: PropTypes.string,
/**
* Ajax提交时的参数回调
*/
processParams: PropTypes.func,
/**
* 只读
*/
readOnly: PropTypes.bool,
/**
* 内部控件的标签的宽度
*/
labelWidth: PropTypes.oneOfType([labelWidthPropTypes, PropTypes.shape((_PropTypes$shape = {}, _defineProperty(_PropTypes$shape, ResponsiveKeys.xs, labelWidthPropTypes), _defineProperty(_PropTypes$shape, ResponsiveKeys.sm, labelWidthPropTypes), _defineProperty(_PropTypes$shape, ResponsiveKeys.md, labelWidthPropTypes), _defineProperty(_PropTypes$shape, ResponsiveKeys.lg, labelWidthPropTypes), _defineProperty(_PropTypes$shape, ResponsiveKeys.xl, labelWidthPropTypes), _defineProperty(_PropTypes$shape, ResponsiveKeys.xxl, labelWidthPropTypes), _PropTypes$shape))]),
useColon: PropTypes.bool,
excludeUseColonTagList: PropTypes.array,
/**
* 标签文字对齐方式
* 可选值： 'left' | 'center' | 'right'
*/
labelAlign: PropTypes.oneOfType([labelAlignPropTypes, PropTypes.shape((_PropTypes$shape2 = {}, _defineProperty(_PropTypes$shape2, ResponsiveKeys.xs, labelAlignPropTypes), _defineProperty(_PropTypes$shape2, ResponsiveKeys.sm, labelAlignPropTypes), _defineProperty(_PropTypes$shape2, ResponsiveKeys.md, labelAlignPropTypes), _defineProperty(_PropTypes$shape2, ResponsiveKeys.lg, labelAlignPropTypes), _defineProperty(_PropTypes$shape2, ResponsiveKeys.xl, labelAlignPropTypes), _defineProperty(_PropTypes$shape2, ResponsiveKeys.xxl, labelAlignPropTypes), _PropTypes$shape2))]),
/**
* 标签位置
* 可选值： 'horizontal' | 'vertical' | 'placeholder' | 'float' | 'none'
*/
labelLayout: PropTypes.oneOfType([labelLayoutPropTypes, PropTypes.shape((_PropTypes$shape3 = {}, _defineProperty(_PropTypes$shape3, ResponsiveKeys.xs, labelLayoutPropTypes), _defineProperty(_PropTypes$shape3, ResponsiveKeys.sm, labelLayoutPropTypes), _defineProperty(_PropTypes$shape3, ResponsiveKeys.md, labelLayoutPropTypes), _defineProperty(_PropTypes$shape3, ResponsiveKeys.lg, labelLayoutPropTypes), _defineProperty(_PropTypes$shape3, ResponsiveKeys.xl, labelLayoutPropTypes), _defineProperty(_PropTypes$shape3, ResponsiveKeys.xxl, labelLayoutPropTypes), _PropTypes$shape3))]),
/**
* 表单列数
*/
columns: PropTypes.oneOfType([PropTypes.number, PropTypes.shape((_PropTypes$shape4 = {}, _defineProperty(_PropTypes$shape4, ResponsiveKeys.xs, PropTypes.number), _defineProperty(_PropTypes$shape4, ResponsiveKeys.sm, PropTypes.number), _defineProperty(_PropTypes$shape4, ResponsiveKeys.md, PropTypes.number), _defineProperty(_PropTypes$shape4, ResponsiveKeys.lg, PropTypes.number), _defineProperty(_PropTypes$shape4, ResponsiveKeys.xl, PropTypes.number), _defineProperty(_PropTypes$shape4, ResponsiveKeys.xxl, PropTypes.number), _PropTypes$shape4))]),
pristine: PropTypes.bool,
/**
* 表单头
*/
header: PropTypes.string,
/**
* 提交回调
*/
onSubmit: PropTypes.func,
/**
* 重置回调
*/
onReset: PropTypes.func,
/**
* 提交成功回调
*/
onSuccess: PropTypes.func,
/**
* 提交失败回调
*/
onError: PropTypes.func,
separateSpacing: PropTypes.object
}, DataSetComponent.propTypes);
Form.defaultProps = {
suffixCls: 'form',
columns: defaultColumns,
labelWidth: defaultLabelWidth
};
Form.contextType = FormContext;
__decorate([observable], Form.prototype, "responsiveItems", 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, "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, "pristine", null);
__decorate([computed], Form.prototype, "separateSpacing", null);
__decorate([autobind], Form.prototype, "handleDataSetValidate", 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