@innoways/drip-form
Version:
drip-form表单渲染core
1,354 lines (1,088 loc) • 584 kB
JavaScript
import _extends$1 from '@babel/runtime/helpers/extends';
import _classCallCheck$1 from '@babel/runtime/helpers/classCallCheck';
import _createClass$1 from '@babel/runtime/helpers/createClass';
import _inherits$1 from '@babel/runtime/helpers/inherits';
import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';
import _getPrototypeOf$1 from '@babel/runtime/helpers/getPrototypeOf';
import * as React from 'react';
import React__default, { createContext, memo, useRef, useState, useEffect, useLayoutEffect, Component, useContext, useMemo as useMemo$1, useCallback, forwardRef, useImperativeHandle, PureComponent } from 'react';
import _asyncToGenerator$1 from '@babel/runtime/helpers/asyncToGenerator';
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _typeof$1 from '@babel/runtime/helpers/typeof';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _regeneratorRuntime from '@babel/runtime/regenerator';
import produce$1, { produce, current } from 'immer';
import { useImmerReducer } from 'use-immer';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import { parseUnitedSchema, setDeepProp, combine, deleteDeepProp, generateArrayKeyReg, randomString, toArray as toArray$2, generateReg, upgradeTips, typeCheck, handleMargin, get as get$1, number2Chinese, addFormValue, fetchFnJsonKey, parseFlow, isEqual as isEqual$1, fetchFn, isEmpty, fetchFormValue } from '@innoways/utils';
import { useGlobalState, useScreenSize, useGlobalOptions, useContainer, useTitle, useArray, defaultGlobalOptions, defaultGlobalState, usePrevious, validate, useValidate, useSchema, useGetKey, globalOptionsContext, globalStateContext, RequiredModeContext } from '@innoways/hooks';
import ReactTooltip from 'react-tooltip';
import classNames from 'classnames';
import reactIs, { isFragment, isMemo } from 'react-is';
import _extends$2 from '@babel/runtime/helpers/esm/extends';
import _defineProperty$1 from '@babel/runtime/helpers/esm/defineProperty';
import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
import _createClass from '@babel/runtime/helpers/esm/createClass';
import _inherits from '@babel/runtime/helpers/esm/inherits';
import _createSuper$1 from '@babel/runtime/helpers/esm/createSuper';
import _objectSpread$7 from '@babel/runtime/helpers/esm/objectSpread2';
import _slicedToArray$1 from '@babel/runtime/helpers/esm/slicedToArray';
import _objectWithoutProperties$1 from '@babel/runtime/helpers/esm/objectWithoutProperties';
import _typeof from '@babel/runtime/helpers/esm/typeof';
import _toConsumableArray$1 from '@babel/runtime/helpers/esm/toConsumableArray';
import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
import _asyncToGenerator from '@babel/runtime/helpers/esm/asyncToGenerator';
import _toArray from '@babel/runtime/helpers/esm/toArray';
import ReactDOM from 'react-dom';
import { useSensors, useSensor, PointerSensor, MouseSensor, DndContext, closestCenter } from '@dnd-kit/core';
import { useSortable, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { restrictToVerticalAxis, restrictToParentElement } from '@dnd-kit/modifiers';
import { CSS } from '@dnd-kit/utilities';
import { PlusSquare, MinusSquare } from 'react-feather';
import dripAjv from '@innoways/ajv';
var _excluded$b = ["validateTime", "requiredMode"];
function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var addField = function addField(_ref) {
var action = _ref.action,
state = _ref.state;
// 添加一个新的表单项
var fieldKey = action.fieldKey,
closestEdge = action.closestEdge,
unitedSchema = action.unitedSchema,
overFieldKey = action.overFieldKey,
get = action.get,
getKey = action.getKey,
shouldDelete = action.shouldDelete,
getTypeKey = action.getTypeKey;
var keyPath = overFieldKey.split('.'); // overField 父级节点的FieldKey
var overParentKey = keyPath.slice(0, keyPath.length - 1).join('.'); // 待添加的父级路径 元祖 overParentKey 对象
var addParentPath = closestEdge === 'over' ? overFieldKey : overParentKey;
/** 确定typePath父级的路径 start */
var addParenTypePath = addParentPath;
var addParenTypePathArr = addParenTypePath.split('.');
if (addParenTypePathArr.length > 1) {
var grandParentPath = addParenTypePathArr.slice(0, addParenTypePathArr.length - 1).join('.'); // 待添加的组父级表单
var _get = get(grandParentPath),
addGrandParentUiSchema = _get.uiSchema; // 待添加表单 祖父级元素类型 默认对象类型
if (addGrandParentUiSchema.type === 'array') {
if (['normal', 'tuple'].includes(addGrandParentUiSchema.mode)) ; else {
// 自增数组
var pathArr = addParentPath.split('.');
pathArr.pop();
pathArr.push('$container');
addParenTypePath = pathArr.join('.');
}
}
}
addParenTypePath = addParenTypePath !== '' ? getTypeKey(addParenTypePath) : '';
/** 确定typePath父级的路径 end */
// // 待添加的父级表单uiSchema、dataSchema的Path
var addParentSchemaPath = {
data: (addParentPath ? getKey(addParentPath, 'dataSchema') : '').split('.').filter(function (item) {
return item;
}),
ui: (addParentPath ? getKey(addParentPath, 'uiSchema') : '').split('.').filter(function (item) {
return item;
})
}; // 待添加的父级表单
var _get2 = get(addParentPath),
addParentDataSchema = _get2.dataSchema,
addParentUiSchema = _get2.uiSchema; // 待添加表单的dataSchema、uiSchema
var _parseUnitedSchema = parseUnitedSchema(unitedSchema),
_parseUnitedSchema$da = _parseUnitedSchema.dataSchema;
_parseUnitedSchema$da.validateTime;
_parseUnitedSchema$da.requiredMode;
var dataSchema = _objectWithoutProperties(_parseUnitedSchema$da, _excluded$b),
uiSchema = _parseUnitedSchema.uiSchema; // 待添加表单 父级元素类型 默认对象类型
var addParentType = 'object';
if (addParentUiSchema.type === 'array') {
if (['normal', 'tuple'].includes(addParentUiSchema.mode)) {
// 元祖
addParentType = 'tuple';
} else {
// 自增数组
addParentType = 'array';
}
}
var order = addParentUiSchema.order || [];
switch (addParentType) {
case 'object':
{
// 排序模式
var isSortMode = !shouldDelete && fieldKey; // 在当前元素上下左右 over添加元素
var curKey = closestEdge === 'over' || keyPath.length <= 1 ? overFieldKey : keyPath.slice(keyPath.length - 1).join();
var index = order.findIndex(function (item) {
return item === curKey;
});
var newOrder = closestEdge === 'over' ? [fieldKey] : produce(order, function (draft) {
var oldIndex = -1;
if (isSortMode) {
oldIndex = draft.findIndex(function (item) {
return item === fieldKey;
});
} // 插入位置
var insertIndex = ['left', 'top'].includes(closestEdge) ? index : index + 1;
draft.splice(insertIndex, 0, fieldKey); // 删除老的
if (oldIndex != -1) {
draft.splice(insertIndex <= oldIndex ? oldIndex + 1 : oldIndex, 1);
}
}); // 设置order
setDeepProp(addParentSchemaPath.ui.concat(['order']), state.uiSchema, newOrder);
if (isSortMode) {
break;
} // 设置uiSchema
setDeepProp(addParentSchemaPath.ui.concat(['properties', fieldKey]), state.uiSchema, uiSchema); // 设置dataSchema
setDeepProp(addParentSchemaPath.data.concat(['properties', fieldKey]), state.dataSchema, _objectSpread$6(_objectSpread$6({}, dataSchema), {}, {
apiKey: fieldKey || '',
hideOnViewMode: false
}));
break;
}
case 'array':
{
var _addParentUiSchema$pr;
// '$container0'
var items = addParentDataSchema.items || dataSchema;
var container = (addParentUiSchema === null || addParentUiSchema === void 0 ? void 0 : (_addParentUiSchema$pr = addParentUiSchema.properties) === null || _addParentUiSchema$pr === void 0 ? void 0 : _addParentUiSchema$pr.$container) || uiSchema;
if (closestEdge !== 'over') {
var oldFieldKey = items.fieldKey || '0';
items = produce(items, function (draft) {
var _properties;
return {
type: 'object',
title: '',
properties: (_properties = {}, _defineProperty(_properties, oldFieldKey, draft), _defineProperty(_properties, fieldKey, dataSchema), _properties)
};
});
container = produce(container, function (draft) {
var _properties2;
// 嵌套数组+嵌套数组 特殊逻辑
return {
type: 'object',
order: ['left', 'top'].includes(closestEdge) ? [fieldKey, oldFieldKey] : [oldFieldKey, fieldKey],
properties: (_properties2 = {}, _defineProperty(_properties2, oldFieldKey, draft), _defineProperty(_properties2, fieldKey, uiSchema), _properties2)
};
});
} // 设置order
setDeepProp(addParentSchemaPath.ui.concat(['order']), state.uiSchema, ['$container']); // 设置uiSchema
setDeepProp(addParentSchemaPath.ui.concat(['properties', '$container']), state.uiSchema, container); // 设置dataSchema
setDeepProp(addParentSchemaPath.data.concat(['items']), state.dataSchema, items);
break;
}
case 'tuple':
{
var _curKey = overFieldKey.split('.').pop(); // items、order当前插入位置
var addIndex = closestEdge === 'over' ? 0 : ['left', 'top'].includes(closestEdge) ? +_curKey : +_curKey + 1; // items需要删除的老的元素位置
var delIndex = Number(fieldKey);
var _items = addParentDataSchema.items || [];
var newItems = closestEdge === 'over' ? [dataSchema] : produce(_items, function (draft) {
// 插入
draft.splice(addIndex, 0, dataSchema); // 如果是排序删除老的
if (!shouldDelete) {
draft.splice(addIndex > delIndex ? delIndex : delIndex + 1, 1);
}
}); // 设置order
var _newOrder = closestEdge === 'over' ? ['0'] : [].concat(_toConsumableArray(order), [String(order.length)]);
var properties = addParentUiSchema.properties || {};
var newProperties = closestEdge === 'over' ? {
'0': uiSchema
} : produce(properties, function (draft) {
// 排序模式，互相替换位置
if (!shouldDelete) {
var changeProp;
var direction;
order.filter(function (key) {
if (addIndex > +fieldKey) {
direction = 'topToBottom';
return +key < addIndex && +key >= +fieldKey;
} else {
direction = 'bottomToTop';
return +key <= +fieldKey && +key >= addIndex;
}
}).sort(function (a, b) {
return +a - +b;
}).map(function (key, index) {
if (index === 0) {
changeProp = draft[key];
}
draft[key] = draft[String(+key + 1)];
if (direction == 'topToBottom') {
if (+key === addIndex - 1) {
draft[key] = changeProp;
}
} else {
if (+key === +fieldKey) {
draft[key] = changeProp;
}
}
});
} else {
var arr = _newOrder.filter(function (key) {
return +key >= addIndex;
}).sort(function (a, b) {
return +b - +a;
});
arr.map(function (key) {
if (+key === addIndex) {
draft[key] = uiSchema;
} else {
draft[key] = draft[String(+key - 1)];
}
});
}
}); // 设置uiSchema
setDeepProp(addParentSchemaPath.ui.concat(['properties']), state.uiSchema, newProperties); // 设置dataSchema
setDeepProp(addParentSchemaPath.data.concat(['items']), state.dataSchema, newItems); // 非排序模式
if (shouldDelete) {
setDeepProp(addParentSchemaPath.ui.concat(['order']), state.uiSchema, _newOrder);
}
break;
}
}
state.typePath = parseUnitedSchema(combine(current(state.dataSchema), current(state.uiSchema))).typePath;
};
var addField$1 = addField;
/* eslint-disable @typescript-eslint/no-unused-vars */
var deleteField = function deleteField(_ref) {
var action = _ref.action,
state = _ref.state;
// 删除表单项
var fieldKey = action.fieldKey,
get = action.get,
getKey = action.getKey;
action.getTypeKey;
var keyPath = fieldKey.split('.'); // overField 父级节点的FieldKey
var deleteParentPath = keyPath.slice(0, keyPath.length - 1).join('.'); // 待删除的父级路径 元祖 deleteParentKey 对象
// const deleteParentPath = deleteParentKey
// 待删除的父级表单
var _get = get(deleteParentPath),
deleteParentUiSchema = _get.uiSchema; // 待删除表单 父级元素类型 默认对象类型
var deleteParentType = 'object';
if (deleteParentUiSchema.type === 'array') {
if (['normal', 'tuple'].includes(deleteParentUiSchema.mode)) {
// 元祖
deleteParentType = 'tuple';
} else {
// 自增数组
deleteParentType = 'array';
}
}
var deleteUiSchemaPath = getKey(fieldKey, 'uiSchema').split('.');
var deleteDataSchemaPath = getKey(fieldKey, 'dataSchema').split('.');
var deleteParentUiPath = deleteParentPath ? getKey(deleteParentPath, 'uiSchema').split('.') : [];
var orderPath = deleteParentPath === '' ? ['order'] : getKey(deleteParentPath, 'uiSchema').split('.').concat('order');
switch (deleteParentType) {
case 'array':
{
var index = 0; // 删除order
deleteDeepProp(orderPath.concat(index), state.uiSchema); // 删除uiSchema
deleteDeepProp(deleteUiSchemaPath, state.uiSchema); // 删除dataSchema
deleteDeepProp(deleteDataSchemaPath, state.dataSchema); // TODO 删除formData
// TODO 删除dataSchema的其它等字段
break;
}
case 'object':
{
var order = deleteParentUiSchema.order || [];
var _index = order.findIndex(function (item) {
return item == fieldKey.split('.').pop();
}); // 删除order
if (_index != -1) {
deleteDeepProp(orderPath.concat(_index), state.uiSchema);
} // 删除uiSchema
deleteDeepProp(deleteUiSchemaPath, state.uiSchema); // 删除dataSchema
deleteDeepProp(deleteDataSchemaPath, state.dataSchema); // TODO 删除formData
// TODO 删除dataSchema的其它等字段
break;
}
case 'tuple':
{
var _order = deleteParentUiSchema.order || [];
var newOrder = _order.slice(0, _order.length - 1); // 设置order
setDeepProp(orderPath, state.uiSchema, newOrder); // 删除dataSchema
if (_order.length === 1) {
// 元祖中删除最后一个元素时，需要同步删除父级的items，否则jsonSchema会报错
deleteDeepProp(deleteDataSchemaPath.slice(0, deleteDataSchemaPath.length - 1), state.dataSchema);
} else {
deleteDeepProp(deleteDataSchemaPath, state.dataSchema);
}
var oldProperties = deleteParentUiSchema.properties;
var newProperties = produce(oldProperties, function (draft) {
var index = _order.findIndex(function (item) {
return item == fieldKey.split('.').pop();
});
if (index != -1) {
delete draft[index];
newOrder.filter(function (item) {
return +item >= index;
}).map(function (item) {
draft[item] = draft[String(+item + 1)];
});
}
}); // 设置uiSchema
setDeepProp(deleteParentUiPath.concat('properties'), state.uiSchema, newProperties); // TODO 删除formData
// TODO 删除dataSchema的其它等字段
break;
}
}
state.typePath = parseUnitedSchema(combine(current(state.dataSchema), current(state.uiSchema))).typePath;
};
var deleteField$1 = deleteField;
var _excluded$a = ["type"],
_excluded2$1 = ["type"],
_excluded3 = ["type"],
_excluded4 = ["type"],
_excluded5 = ["type"];
function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var FormDataContext = /*#__PURE__*/createContext({
globalFormDataStoreKey: ''
});
var formDataReducer = function formDataReducer(state, action) {
var type = action.type;
switch (type) {
// 即将废弃，建议使用reset
case 'reload':
{
upgradeTips('reload', 'reset'); // eslint-disable-next-line @typescript-eslint/no-unused-vars
action.type;
var args = _objectWithoutProperties(action, _excluded$a);
Object.assign(state, args);
break;
}
case 'reset':
{
Object.assign(state, action.action.state);
break;
}
// 即将废弃，使用setValidate
case 'setDataSchema':
{
upgradeTips('setDataSchema', 'setValidate'); // eslint-disable-next-line @typescript-eslint/no-unused-vars
action.type;
var _args = _objectWithoutProperties(action, _excluded2$1);
if (_args.dataSchema) {
state.dataSchema = _args.dataSchema;
} else {
for (var i in _args) {
var mapKeys = i.split('.');
if (_args !== null && _args !== void 0 && _args.isDelete) {
deleteDeepProp(mapKeys, state.dataSchema);
} else {
setDeepProp(mapKeys, state.dataSchema, _args[i]);
}
}
}
break;
}
case 'setValidate':
{
var _action$action = action.action,
set = _action$action.set,
dataSchema = _action$action.dataSchema;
var deleteKeys = action.action.deleteKeys;
if (set) {
for (var _i in set) {
setDeepProp(_i.split('.'), state.dataSchema, set[_i]);
}
}
if (deleteKeys) {
deleteKeys = toArray$2(deleteKeys);
deleteKeys.map(function (fieldKey) {
deleteDeepProp(fieldKey.split('.'), state.dataSchema);
});
}
if (dataSchema) {
state.dataSchema = dataSchema;
}
break;
}
// 即将废弃，建议使用setUi
case 'setUiSchema':
{
upgradeTips('setUiSchema', 'setUi'); // eslint-disable-next-line @typescript-eslint/no-unused-vars
action.type;
var _args2 = _objectWithoutProperties(action, _excluded3);
if (_args2.uiSchema) {
state.uiSchema = _args2.uiSchema;
} else {
for (var _i2 in _args2) {
var _mapKeys = _i2.split('.');
setDeepProp(_mapKeys, state.uiSchema, _args2[_i2]);
}
}
break;
}
// 即将废弃，建议使用setUi
case 'deleteUiSchema':
{
upgradeTips('deleteUiSchema', 'setUi');
var _mapKeys2 = action.key.split('.');
deleteDeepProp(_mapKeys2, state.uiSchema);
break;
}
case 'setUi':
{
var _action$action2 = action.action,
_set = _action$action2.set,
uiSchema = _action$action2.uiSchema;
var _deleteKeys = action.action.deleteKeys;
if (_set) {
for (var _i3 in _set) {
setDeepProp(_i3.split('.'), state.uiSchema, _set[_i3]);
}
}
if (_deleteKeys) {
_deleteKeys = toArray$2(_deleteKeys);
_deleteKeys.map(function (fieldKey) {
deleteDeepProp(fieldKey.split('.'), state.uiSchema);
});
}
if (uiSchema) {
state.uiSchema = uiSchema;
}
break;
}
// 即将废弃，建议使用setData
case 'setFormData':
{
upgradeTips('setFormData', 'setData'); // eslint-disable-next-line @typescript-eslint/no-unused-vars
action.type;
var _args3 = _objectWithoutProperties(action, _excluded4);
if (_args3.formData) {
state.formData = _args3.formData;
} else {
for (var _i4 in _args3) {
setDeepProp(_i4.split('.'), state.formData, _args3[_i4], state.typePath); // 将当前变化的key记录下来
state.changeKey = _i4;
}
}
break;
}
// 即将废弃，建议使用setData
case 'deleteFormData':
{
upgradeTips('setFormData', 'setData');
state.changeKey = action.key;
var _mapKeys3 = action.key.split('.');
deleteDeepProp(_mapKeys3, state.formData);
break;
}
case 'setData':
{
var _action$action3 = action.action,
_set2 = _action$action3.set,
formData = _action$action3.formData;
var _deleteKeys2 = action.action.deleteKeys;
if (_set2) {
for (var _i5 in _set2) {
setDeepProp(_i5.split('.'), state.formData, _set2[_i5], state.typePath); // 将当前变化的key记录下来
state.changeKey = _i5;
}
}
if (_deleteKeys2) {
_deleteKeys2 = toArray$2(_deleteKeys2);
_deleteKeys2.map(function (fieldKey) {
state.changeKey = fieldKey;
deleteDeepProp(fieldKey.split('.'), state.formData);
});
}
if (formData) {
state.formData = formData;
}
break;
}
case 'deleteField':
{
deleteField$1({
action: action.action,
state: state
});
break;
}
case 'addField':
{
addField$1({
action: action.action,
state: state
});
break;
}
case 'setAjvErr':
{
var _deleteKeys3 = action.action.deleteKeys;
var _action$action4 = action.action,
errors = _action$action4.errors,
_set3 = _action$action4.set;
if (_set3) {
for (var _i6 in _set3) {
state.ajvErrors[_i6] = _set3[_i6];
}
}
if (_deleteKeys3) {
_deleteKeys3 = toArray$2(_deleteKeys3);
_deleteKeys3.map(function (fieldKey) {
delete state.ajvErrors[fieldKey];
});
}
if (errors) {
state.ajvErrors = errors;
}
break;
}
// 即将废弃，建议使用setErr
case 'setError':
{
upgradeTips('setError', 'setErr'); // eslint-disable-next-line @typescript-eslint/no-unused-vars
action.type;
var _args4 = _objectWithoutProperties(action, _excluded5);
if (_args4.errors && typeCheck(_args4.errors) === 'Object') {
var ignoreErr = {}; // ignore 用来将type：change的异步校验的结果保存下来。防止被validae给清空
if (_args4.ignore && Array.isArray(_args4.ignore) || state.ignoreErrKey.length > 0) {
Array.from(new Set([].concat(_toConsumableArray(_args4.ignore || []), _toConsumableArray(state.ignoreErrKey)))).map(function (item) {
if (state.errors[item]) {
ignoreErr[item] = state.errors[item];
}
});
}
state.errors = _objectSpread$5(_objectSpread$5({}, _args4.errors), ignoreErr);
} else {
for (var _i7 in _args4) {
var _params$action;
var params = _args4;
if (params !== null && params !== void 0 && (_params$action = params.action) !== null && _params$action !== void 0 && _params$action.ignore) {
state.ignoreErrKey = Array.from(new Set([].concat(_toConsumableArray(state.ignoreErrKey), _toConsumableArray(params.action.ignore))));
}
state.errors[_i7] = _args4[_i7];
}
}
break;
}
// 即将废弃，建议使用setErr
case 'deleteError':
{
upgradeTips('deleteError', 'setErr');
if (Array.isArray(action.key)) {
action.key.map(function (item) {
delete state.errors[item];
});
} else {
delete state.errors[action.key];
}
break;
}
case 'setErr':
{
var _deleteKeys4 = action.action.deleteKeys;
var _action$action5 = action.action,
_errors = _action$action5.errors,
_set4 = _action$action5.set;
if (_set4) {
for (var _i8 in _set4) {
state.customErrors[_i8] = _set4[_i8];
}
}
if (_deleteKeys4) {
_deleteKeys4 = toArray$2(_deleteKeys4);
_deleteKeys4.map(function (fieldKey) {
var arr = [];
Object.keys(state.customErrors).map(function (key) {
var _state$typePath$field;
var reg = new RegExp("^".concat(fieldKey.split('.').join('\\.'), "(\\..+)*"), 'g'); // 判断是否有嵌套，删除嵌套
if (reg.test(key)) {
delete state.customErrors[key];
}
var fieldKeyToTypeMap = Object.keys(state.typePath).find(function (item) {
var startArr = fieldKey.split('.');
startArr.pop();
return generateReg(startArr).test(item);
});
if (fieldKeyToTypeMap && ((_state$typePath$field = state.typePath[fieldKeyToTypeMap]) === null || _state$typePath$field === void 0 ? void 0 : _state$typePath$field.type) === 'array') {
var fieldKeyArr = fieldKey.split('.');
var order = fieldKeyArr.pop();
var _reg = new RegExp("^".concat(fieldKeyArr.join('\\.'), "\\.(\\d)(\\..+)*"), 'g');
var res = _reg.exec(key); // 嵌套情况：需要重新设置被删除的项的后续项的arrayKey
if (res !== null) {
var _res = _slicedToArray(res, 3),
index = _res[1],
end = _res[2];
if (+index >= +order) {
arr[+index] = _objectSpread$5(_objectSpread$5({}, arr[+index]), {}, _defineProperty({}, end || '', state.customErrors[key]));
}
}
}
}); // 父元素是数组，删除需要切换
if (arr.length > 0) {
var fieldKeyArr = fieldKey.split('.');
fieldKeyArr.pop();
var start = fieldKeyArr.join('.');
arr.map(function (item, index) {
if (!item) return;
for (var _i9 in item) {
if (state.customErrors["".concat(start, ".").concat(+index + 1).concat(_i9)]) {
state.customErrors["".concat(start, ".").concat(index).concat(_i9)] = state.customErrors["".concat(start, ".").concat(+index + 1).concat(_i9)];
} else {
delete state.customErrors["".concat(start, ".").concat(index).concat(_i9)];
}
}
});
}
});
}
if (_errors) {
state.customErrors = _errors;
}
break;
}
case 'setChecking':
{
if ('action' in action) {
state.checking = action.action.checking;
} else {
state.checking = action.checking;
}
break;
}
case 'setVisibleKey':
{
var _action$action6 = action.action,
fieldKey = _action$action6.fieldKey,
_deleteKeys5 = _action$action6.deleteKeys;
if (fieldKey) {
fieldKey = toArray$2(fieldKey);
state.visibleFieldKey = Array.from(new Set([].concat(_toConsumableArray(state.visibleFieldKey), _toConsumableArray(fieldKey))));
}
if (_deleteKeys5) {
_deleteKeys5 = toArray$2(_deleteKeys5);
state.visibleFieldKey = state.visibleFieldKey.filter(function (item) {
var _deleteKeys6;
return !((_deleteKeys6 = _deleteKeys5) !== null && _deleteKeys6 !== void 0 && _deleteKeys6.includes(item));
});
}
break;
}
case 'setArrayKey':
{
var _action$action7 = action.action,
isDelete = _action$action7.isDelete,
_fieldKey = _action$action7.fieldKey,
order = _action$action7.order,
move = _action$action7.move; // 当前数组的所有react key
var fieldKeyComKey = state.arrayKey[_fieldKey] || [];
var hasOrder = Object.prototype.hasOwnProperty.call(action.action, 'order');
if (isDelete && hasOrder && typeof order === 'number') {
fieldKeyComKey.splice(order, 1); // 需要交换的数据
var arr = []; // 若存在嵌套，批量切换后续嵌套
Object.keys(state.arrayKey).map(function (item) {
var reg = generateArrayKeyReg(_fieldKey.split('.').concat(String(order)));
var res = reg.exec(item); // 嵌套情况：需要重新设置被删除的项的后续项的arrayKey
if (res !== null) {
var _res2 = _slicedToArray(res, 4),
index = _res2[2],
end = _res2[3];
if (+index >= order) {
arr[+index] = _objectSpread$5(_objectSpread$5({}, arr[+index]), {}, _defineProperty({}, end, state.arrayKey[item]));
}
}
});
arr.map(function (item, index) {
if (!item) return;
for (var _i10 in item) {
if (index === arr.length - 1) {
delete state.arrayKey["".concat(_fieldKey, ".").concat(index).concat(_i10)];
} else {
state.arrayKey["".concat(_fieldKey, ".").concat(index).concat(_i10)] = state.arrayKey["".concat(_fieldKey, ".").concat(+index + 1).concat(_i10)];
}
}
});
} else {
if (move) {
fieldKeyComKey.splice(move[1], 0, fieldKeyComKey.splice(move[0], 1)[0]); // 若存在嵌套，批量切换后续嵌套
// 需要交换的arrayKey
var change; // 需要交换的customErr
var changeCustomError; // 需要交换的arrayKey
var _arr = []; // 需要交换的customErrors
var customErrorsArr = []; // 拖拽方向
var direction = '';
Object.keys(state.arrayKey).map(function (item) {
var reg = generateArrayKeyReg(_fieldKey.split('.').concat(String(order)));
var res = reg.exec(item); // 嵌套情况：需要重新设置被删除的项的后续项的arrayKey
if (res !== null) {
var _res3 = _slicedToArray(res, 4),
index = _res3[2],
end = _res3[3]; // 从上往下拖拽
if (move[0] < move[1]) {
direction = 'topToBottom';
if (+index >= move[0] && +index <= move[1]) {
_arr[+index] = _objectSpread$5(_objectSpread$5({}, _arr[+index]), {}, _defineProperty({}, end, state.arrayKey[item]));
}
} else {
// 从下往上拖拽
direction = 'bottomToTop';
if (+index <= move[0] && +index >= move[1]) {
_arr[+index] = _objectSpread$5(_objectSpread$5({}, _arr[+index]), {}, _defineProperty({}, end, state.arrayKey[item]));
}
}
}
});
Object.keys(state.customErrors).map(function (item) {
var fieldKeyArr = _fieldKey.split('.');
var reg = new RegExp("^".concat(fieldKeyArr.join('\\.'), "\\.(\\d)(\\..+)*"), 'g');
var res = reg.exec(item); // 嵌套情况：需要重新设置被删除的项的后续项的arrayKey
if (res !== null) {
var _res4 = _slicedToArray(res, 3),
index = _res4[1],
end = _res4[2]; // 从上往下拖拽
if (move[0] < move[1]) {
direction = 'topToBottom';
if (+index >= move[0] && +index <= move[1]) {
customErrorsArr[+index] = _objectSpread$5(_objectSpread$5({}, customErrorsArr[+index]), {}, _defineProperty({}, end || '', state.customErrors[item]));
}
} else {
// 从下往上拖拽
direction = 'bottomToTop';
if (+index <= move[0] && +index >= move[1]) {
customErrorsArr[+index] = _objectSpread$5(_objectSpread$5({}, customErrorsArr[+index]), {}, _defineProperty({}, end || '', state.customErrors[item]));
}
}
}
});
switch (direction) {
case 'topToBottom':
{
_arr.map(function (item, index) {
if (!item) return;
if (+index === move[0]) {
change = item;
for (var _i11 in item) {
state.arrayKey["".concat(_fieldKey, ".").concat(index).concat(_i11)] = state.arrayKey["".concat(_fieldKey, ".").concat(+index + 1).concat(_i11)];
}
} else if (+index === move[1]) {
for (var _i12 in change) {
state.arrayKey["".concat(_fieldKey, ".").concat(index).concat(_i12)] = change[_i12];
}
} else {
for (var _i13 in item) {
state.arrayKey["".concat(_fieldKey, ".").concat(index).concat(_i13)] = state.arrayKey["".concat(_fieldKey, ".").concat(+index + 1).concat(_i13)];
}
}
});
customErrorsArr.map(function (item, index) {
if (!item) return;
if (+index === move[0]) {
changeCustomError = item;
for (var _i14 in item) {
state.customErrors["".concat(_fieldKey, ".").concat(index).concat(_i14)] = state.customErrors["".concat(_fieldKey, ".").concat(+index + 1).concat(_i14)];
}
} else if (+index === move[1]) {
for (var _i15 in changeCustomError) {
state.customErrors["".concat(_fieldKey, ".").concat(index).concat(_i15)] = changeCustomError[_i15];
}
} else {
for (var _i16 in item) {
state.customErrors["".concat(_fieldKey, ".").concat(index).concat(_i16)] = state.customErrors["".concat(_fieldKey, ".").concat(+index + 1).concat(_i16)];
}
}
});
break;
}
case 'bottomToTop':
_arr.slice().reverse().map(function (item, index, arr) {
if (!item) return;
var newIndex = arr.length - 1 - +index;
if (newIndex === move[0]) {
change = item;
for (var _i17 in item) {
state.arrayKey["".concat(_fieldKey, ".").concat(newIndex).concat(_i17)] = state.arrayKey["".concat(_fieldKey, ".").concat(newIndex - 1).concat(_i17)];
}
} else if (newIndex === move[1]) {
for (var _i18 in change) {
state.arrayKey["".concat(_fieldKey, ".").concat(newIndex).concat(_i18)] = change[_i18];
}
} else {
for (var _i19 in item) {
state.arrayKey["".concat(_fieldKey, ".").concat(newIndex).concat(_i19)] = state.arrayKey["".concat(_fieldKey, ".").concat(newIndex - 1).concat(_i19)];
}
}
});
customErrorsArr.slice().reverse().map(function (item, index, arr) {
if (!item) return;
var newIndex = arr.length - 1 - +index;
if (newIndex === move[0]) {
changeCustomError = item;
for (var _i20 in item) {
state.customErrors["".concat(_fieldKey, ".").concat(newIndex).concat(_i20)] = state.customErrors["".concat(_fieldKey, ".").concat(newIndex - 1).concat(_i20)];
}
} else if (newIndex === move[1]) {
for (var _i21 in changeCustomError) {
state.customErrors["".concat(_fieldKey, ".").concat(newIndex).concat(_i21)] = changeCustomError[_i21];
}
} else {
for (var _i22 in item) {
state.customErrors["".concat(_fieldKey, ".").concat(newIndex).concat(_i22)] = state.customErrors["".concat(_fieldKey, ".").concat(newIndex - 1).concat(_i22)];
}
}
});
break;
}
} else if (hasOrder && typeof order === 'number') {
fieldKeyComKey[order] = randomString(52);
} else {
try {
var formDataKey = _fieldKey.split('.');
var fieldData = formDataKey.reduce(function (prev, cur) {
if (prev[cur]) {
return prev[cur];
} else {
return [];
}
}, state.formData);
fieldKeyComKey = fieldData.map(function () {
return randomString(52);
});
} catch (error) {// console.log(error)
}
}
state.arrayKey[_fieldKey] = fieldKeyComKey;
}
}
}
};
var _excluded$9 = ["title"];
function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
/*TODO 优化renderprops和container编写 区分component prop和container prop*/
var Render = function Render(_ref) {
var uiComponents = _ref.uiComponents,
dataSchema = _ref.dataSchema,
uiSchema = _ref.uiSchema,
errors = _ref.errors,
formData = _ref.formData,
onQuery = _ref.onQuery,
onValidate = _ref.onValidate,
dispatch = _ref.dispatch,
customComponents = _ref.customComponents,
_ref$parentUiSchemaKe = _ref.parentUiSchemaKey,
parentUiSchemaKey = _ref$parentUiSchemaKe === void 0 ? ['#'] : _ref$parentUiSchemaKe,
_ref$parentDataSchema = _ref.parentDataSchemaKey,
parentDataSchemaKey = _ref$parentDataSchema === void 0 ? ['#'] : _ref$parentDataSchema,
_ref$parentFormDataKe = _ref.parentFormDataKey,
parentFormDataKey = _ref$parentFormDataKe === void 0 ? '' : _ref$parentFormDataKe,
currentArrayKey = _ref.currentArrayKey,
containerMap = _ref.containerMap,
containerHoc = _ref.containerHoc,
get = _ref.get,
getKey = _ref.getKey,
isRoot = _ref.isRoot,
arrayKey = _ref.arrayKey,
uiAddOnInArray = _ref.uiAddOnInArray;
var _useGlobalState = useGlobalState(),
_useGlobalState$stage = _useGlobalState.stageErrors,
stageErrors = _useGlobalState$stage === void 0 ? {} : _useGlobalState$stage;
var screenSize = useScreenSize();
var _uiSchema$theme = uiSchema.theme,
theme = _uiSchema$theme === void 0 ? 'antd' : _uiSchema$theme,
_uiSchema$title = uiSchema.title,
globalTitleUi = _uiSchema$title === void 0 ? {} : _uiSchema$title,
_uiSchema$formMode = uiSchema.formMode,
formMode = _uiSchema$formMode === void 0 ? 'edit' : _uiSchema$formMode,
globalContainerStyle = uiSchema.containerStyle; // 当前父级UiSchema
var currentUiSchema = parentUiSchemaKey.reduce(function (prev, cur) {
if (cur === '#') {
return prev;
} else {
return prev[cur];
}
}, uiSchema); // 当前父级dataSchema
var currentDataSchema = parentDataSchemaKey.reduce(function (prev, cur) {
if (cur === '#') {
return prev;
} else {
return prev[cur];
}
}, dataSchema); // 当前父级formData 只可能是对象或者数组
var currentFormData = parentFormDataKey.split('.').reduce(function (prev, cur) {
if (cur === '') {
return prev;
} else {
return prev[cur] || (currentDataSchema.type === 'array' ? [] : {});
}
}, formData); // 获取父级表单ui信息
var order = currentUiSchema.order,
properties = currentUiSchema.properties,
parentMode = currentUiSchema.mode,
_currentUiSchema$type = currentUiSchema.type,
parentType = _currentUiSchema$type === void 0 ? 'object' : _currentUiSchema$type; // 表单是否在下方直接展示错误信息
var showError = dataSchema.showError ? dataSchema.showError === 'change' || dataSchema.showError === 'submit' : dataSchema.validateTime === 'change';
return (order || []).map(function (item, i) {
var _currentDataSchema$pr, _properties$item, _properties$item2, _properties$item3, _properties$item5;
// 当前Field ui类型
var type = properties[item].type;
var hideOnViewMode = parentType !== 'array' && (currentDataSchema === null || currentDataSchema === void 0 ? void 0 : (_currentDataSchema$pr = currentDataSchema.properties[item]) === null || _currentDataSchema$pr === void 0 ? void 0 : _currentDataSchema$pr.hideOnViewMode); // 当前表单是否为普通数组（自增数组）中的每一项
var isArrayItem = parentType === 'array' && item === '$container'; // 普通数组子表单类型
// 当前key路径 （相对dataSchema）
var currentDataSchemaKey = parentDataSchemaKey.concat([// array为items，object为properties
parentType === 'array' ? 'items' : 'properties', // 普通数组
isArrayItem ? '' : item]).filter(function (item) {
return item !== '';
}); // 当前key路径 （相对uiSchema）
var currentUiSchemaParentKey = parentUiSchemaKey.concat(['properties', item]); // 当前key（相对formData）普通数组需要获取currentArraykey值
var currentFieldKey = "".concat(parentFormDataKey, ".").concat(isArrayItem ? currentArrayKey : item);
currentFieldKey = currentFieldKey.replace(/^\./, ''); // 防止用户动态修改uiSchema中表单项key值，无匹配dataSchema导致白屏的问题
if (!Object.prototype.hasOwnProperty.call(properties, item)) {
console.log('Render Error: no schema for', 'color: #fff; background: #ffff00;padding: 3px', item);
return null;
} // 必填表单
var requiredFields = currentDataSchema.required || []; // 当前Field的主题
var itemTheme = ((_properties$item = properties[item]) === null || _properties$item === void 0 ? void 0 : _properties$item.theme) || theme; // 当前Field标题
var data = currentDataSchema[parentType === 'array' ? 'items' : 'properties'];
var title = item === '$container' ? data.title : data[item].title; // 若当前Field在dataSchema中未定义，则不渲染
if (parentType === 'object' && !currentDataSchema.properties[item]) return null;
if (parentType === 'array') {
if (item == '$container') ; else {
// 元祖
if (!currentDataSchema.items[item]) return null;
}
} // 当前Field的query函数
var queryFunc = onQuery === null || onQuery === void 0 ? void 0 : onQuery[item];
var asyncValidate = onValidate === null || onValidate === void 0 ? void 0 : onValidate[item]; // 当前Field的错误信息
var error = dataSchema.showError === 'submit' ? stageErrors[currentFieldKey] || '' : errors[currentFieldKey] || ''; // 当前Field的数据
var cKey = isArrayItem ? currentArrayKey : item;
var fieldData = currentFormData[cKey];
var newFormData = _objectSpread$4({}, currentFormData);
if (fieldData === undefined) {
fieldData = currentDataSchema.properties && currentDataSchema.properties[item] && currentDataSchema.properties[item]["default"] ? currentDataSchema.properties[item]["default"] : undefined;
newFormData = _objectSpread$4(_objectSpread$4({}, newFormData), {}, _defineProperty({}, cKey, fieldData));
if (newFormData[cKey] !== formData[cKey]) {
dispatch({
type: 'setData',
action: {
set: _defineProperty({}, cKey, fieldData)
}
});
}
} // 当前Field是否展示标题
var showTitle = Object.prototype.hasOwnProperty.call(properties[item], 'showTitle') ? properties[item].showTitle : true; // 布局样式
var breakpoint = (globalContainerStyle === null || globalContainerStyle === void 0 ? void 0 : globalContainerStyle.breakpoint) || 768;
var containerStyle = Object.assign(type === 'object' && ((_properties$item2 = properties[item]) === null || _properties$item2 === void 0 ? void 0 : _properties$item2.mode) === 'collapse' ? {
marginBottom: 20
} : {}, isRoot ? _objectSpread$4({
width: '100%'
}, globalContainerStyle) : {
width: '100%'
}, ((_properties$item3 = properties[item]) === null || _properties$item3 === void 0 ? void 0 : _properties$item3.containerStyle) || {});
handleMargin(containerStyle, breakpoint, screenSize); // 当前Field所接收的ui props
var _properties$item4 = properties[item];
_properties$item4.title;
var uiProp = _objectWithoutProperties(_properties$item4, _excluded$9); // 当前Field的标题样式, property的样式会覆盖全局标题样式
var titleUi = Object.assign({
placement: 'left',
width: '82px',
textAlign: 'left',
verticalAlign: 'center',
requiredFields: false,
fontSize: 12,
color: '#000000'
}, globalTitleUi, ((_properties$item5 = properties[item]) === null || _properties$item5 === void 0 ? void 0 : _properties$item5.title) || {}); // 当前Field的提示信息
var description = uiProp.description || null; // Field控制函数体
var vcontrol = properties[item].vcontrol;
var controlFuc; // 是否展示当前Field
var isShow = false; // 解析联动控制函数函数体
if (vcontrol) {
try {
if (typeof vcontrol === 'function') {
controlFuc = vcontrol;
} else {
controlFuc = new Function('props', vcontrol);
}
isShow = controlFuc({
formData: formData,
uiSchema: uiSchema,
dataSchema: dataSchema,
get: get,
getKey: getKey,
fieldKey: currentFieldKey,
fieldData: fieldData
});
} catch (error) {
console.error("".concat(item, "\uFF1Avcontrol\u51FD\u6570\u4F53\u9519\u8BEF\uFF0C\u8BF7\u786E\u8BA4"));
console.error(error);
}
} else {
isShow = true;
}
if ((!isShow || !containerMap) && formMode !== 'generator') return null;
/* 结束 */
var Container = containerMap[type] || containerMap["default"]; // 组件需要的prop参数
// send formData to individual field
uiProp.formData = formData;
var ui = {
uiProp: uiProp
}; // 不同容器的特殊prop
var container = {
array: {},
object: {}
}; // 非FieldContaienr基础容器均需要透传，并且render函数也需要传递
var render = {
containerHoc: containerHoc,
// 全局dataSchema
dataSchema: dataSchema,
// 全局uiSchema
uiSchema: uiSchema,
// 所有表单错误信息
errors: errors,
// 所有表单数据
formData: (currentUiSchema === null || currentUiSchema === void 0 ? void 0 : currentUiSchema.formMode) !== 'generator' ? formData : newFormData,
// 所有表单异步数据获取函数对象
onQuery: onQuery,
// 所有表单异步校验函数对象
onValidate: onValidate,
// 父级uiSchema的路径
parentUiSchemaKey: currentUiSchemaParentKey,
// 父级表单的dataSchema路径
parentDataSchemaKey: currentDataSchemaKey,
// 父级表单的formData路径===父级表单的fieldKey
parentFormDataKey: currentFieldKey,
// 容器对象
containerMap: containerMap,
// vcontrol 参数get函数。用来获取指定fieldKey的formData、uiSchema、dataSchema
get: get,
arrayKey: arrayKey
}; // 所有容器均需要传递
var common = _objectSpread$4(_objectSpread$4({
formMode: uiProp.formMode || formMode,
// 当前表单标题
title: title,
// 当前表单使用主题
theme: itemTheme,
// 当前表单错误信息
error: error,
// 当前表单必填字段
requiredFields: requiredFields,
// 当前表单提示信息
description: description,
// 是否展示标题
showTitle: showTitle,
// 当前表单的标题样式
titleUi: titleUi,
// 是否展示错误
showError: showError
}, formMode != 'generator' && {
containerStyle: containerStyle
}), {}, {
// 当前渲染表单类型
type: type,
// 容器key值
key: item,
// 当前表单异步数据查询接口
queryFunc: queryFunc,
// 当前表单异步校验函数
asyncValidate: asyncValidate,
// 当前表单的fieldKey值（相对formData）
fieldKey: currentFieldKey,
// 当前表单数据
fieldData: fieldData,
// 全局dispatch函数
dispatch: d