tdesign-react
Version:
TDesign Component for React
280 lines (276 loc) • 13.4 kB
JavaScript
/**
* tdesign v1.16.2
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _toConsumableArray } from '../_chunks/dep-a3a3e527.js';
import { _ as _defineProperty } from '../_chunks/dep-d67deb2c.js';
import { _ as _slicedToArray } from '../_chunks/dep-10d5731f.js';
import React, { useMemo, useState, useRef, useEffect, useImperativeHandle } from 'react';
import { get, set, castArray, unset, isEqual, merge } from 'lodash-es';
import '../_chunks/dep-1144c9da.js';
import { useFormContext, useFormListContext, FormListContext } from './FormContext.js';
import { HOOK_MARK } from './hooks/useForm.js';
import { concatName, convertNameToArray, calcFieldValue, swap } from './utils/index.js';
import { l as log } from '../_chunks/dep-2ba7b13f.js';
import '../_chunks/dep-74a10cfb.js';
import '../_chunks/dep-8abcbcbc.js';
import '../_chunks/dep-8de6c984.js';
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var globalKey = 0;
var FormList = function FormList(props) {
var name = props.name,
rules = props.rules,
children = props.children;
var _useFormContext = useFormContext(),
formMapRef = _useFormContext.formMapRef,
form = _useFormContext.form,
onFormItemValueChange = _useFormContext.onFormItemValueChange,
initialDataFromForm = _useFormContext.initialData,
resetTypeFromContext = _useFormContext.resetType;
var _useFormListContext = useFormListContext(),
parentFullPath = _useFormListContext.fullPath,
parentInitialData = _useFormListContext.initialData;
var fullPath = concatName(parentFullPath, name);
var initialData = useMemo(function () {
var propsInitialData;
if (props.initialData) {
propsInitialData = props.initialData;
} else if (parentFullPath && parentInitialData) {
var relativePath = fullPath.slice(convertNameToArray(parentFullPath).length);
propsInitialData = get(parentInitialData, relativePath);
} else {
propsInitialData = get(initialDataFromForm, fullPath);
}
return propsInitialData;
}, [fullPath, parentFullPath, initialDataFromForm, parentInitialData, props.initialData]);
var _useState = useState(function () {
return get(form === null || form === void 0 ? void 0 : form.store, fullPath) || initialData || [];
}),
_useState2 = _slicedToArray(_useState, 2),
formListValue = _useState2[0],
setFormListValue = _useState2[1];
var _useState3 = useState(function () {
return formListValue.map(function (data, index) {
return {
data: _objectSpread({}, data),
key: globalKey += 1,
name: index,
isListField: true
};
});
}),
_useState4 = _slicedToArray(_useState3, 2),
fields = _useState4[0],
setFields = _useState4[1];
var formListRef = useRef(null);
var formListMapRef = useRef(/* @__PURE__ */new Map());
var snakeName = [].concat(name).filter(function (item) {
return item !== void 0;
}).toString();
var buildDefaultFieldMap = function buildDefaultFieldMap() {
if (formListMapRef.current.size <= 0) return {};
var defaultValues = {};
formListMapRef.current.forEach(function (item, itemPath) {
var itemPathArray = convertNameToArray(itemPath);
var isChildField = itemPathArray.length === convertNameToArray(fullPath).length + 2;
if (!isChildField) return;
var fieldName = itemPathArray[itemPathArray.length - 1];
defaultValues[fieldName] = item.current.initialData;
});
return defaultValues;
};
var updateFormList = function updateFormList(newFields, newFormListValue) {
setFields(newFields);
setFormListValue(newFormListValue);
set(form === null || form === void 0 ? void 0 : form.store, fullPath, newFormListValue);
var changeValue = calcFieldValue(fullPath, newFormListValue);
onFormItemValueChange === null || onFormItemValueChange === void 0 || onFormItemValueChange(changeValue);
};
var operation = {
add: function add(defaultValue, insertIndex) {
var newFields = _toConsumableArray(fields);
var index = insertIndex !== null && insertIndex !== void 0 ? insertIndex : newFields.length;
newFields.splice(index, 0, {
key: globalKey += 1,
name: index,
isListField: true
});
var newFormListValue = _toConsumableArray(formListValue);
if (defaultValue !== void 0) {
newFormListValue.splice(index, 0, defaultValue);
} else {
newFormListValue.splice(index, 0, buildDefaultFieldMap());
}
updateFormList(newFields, newFormListValue);
},
remove: function remove(index) {
var indices = castArray(index);
var newFields = _toConsumableArray(fields).filter(function (f) {
return !indices.includes(f.name);
}).map(function (field, i) {
return _objectSpread(_objectSpread({}, field), {}, {
name: i
});
});
var newFormListValue = _toConsumableArray(formListValue).filter(function (_, i) {
return !indices.includes(i);
});
unset(form === null || form === void 0 ? void 0 : form.store, fullPath);
updateFormList(newFields, newFormListValue);
},
move: function move(from, to) {
var newFields = _toConsumableArray(fields);
var newFormListValue = _toConsumableArray(formListValue);
swap(newFields, from, to);
swap(newFormListValue, from, to);
newFields[from].name = from;
newFields[to].name = to;
updateFormList(newFields, newFormListValue);
}
};
function setListFields(fieldData, callback) {
if (isEqual(formListValue, fieldData)) return;
var newFields = fieldData.map(function (_, index) {
var currField = fields[index];
var oldItem = formListValue[index];
var newItem = fieldData[index];
var noChange = currField && isEqual(oldItem, newItem);
return {
key: noChange ? currField.key : globalKey += 1,
name: index,
isListField: true
};
});
Array.from(formListMapRef.current.values()).forEach(function (formItemRef) {
if (!formItemRef.current) return;
var childName = formItemRef.current.name;
var data = get(fieldData, childName);
if (data !== void 0) callback(formItemRef, data);
});
updateFormList(newFields, fieldData);
}
useEffect(function () {
if (!name || !formMapRef) return;
formMapRef.current.set(fullPath, formListRef);
return function () {
formMapRef.current["delete"](fullPath);
};
}, [snakeName]);
useEffect(function () {
var _form$getInternalHook, _form$getInternalHook2;
form === null || form === void 0 || (_form$getInternalHook = form.getInternalHooks) === null || _form$getInternalHook === void 0 || (_form$getInternalHook = _form$getInternalHook.call(form, HOOK_MARK)) === null || _form$getInternalHook === void 0 || (_form$getInternalHook2 = _form$getInternalHook.notifyWatch) === null || _form$getInternalHook2 === void 0 || _form$getInternalHook2.call(_form$getInternalHook, name);
}, [form, snakeName, fields]);
useImperativeHandle(formListRef, function () {
return {
name: name,
fullPath: fullPath,
value: formListValue,
initialData: initialData,
isFormList: true,
formListMapRef: formListMapRef,
getValue: function getValue() {
return get(form === null || form === void 0 ? void 0 : form.store, fullPath);
},
validate: function validate() {
var trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "all";
var resultList = [];
var validates = _toConsumableArray(formListMapRef.current.values()).map(function (formItemRef) {
var _formItemRef$current, _formItemRef$current$;
return formItemRef === null || formItemRef === void 0 || (_formItemRef$current = formItemRef.current) === null || _formItemRef$current === void 0 || (_formItemRef$current$ = _formItemRef$current.validate) === null || _formItemRef$current$ === void 0 ? void 0 : _formItemRef$current$.call(_formItemRef$current, trigger);
});
return new Promise(function (resolve) {
Promise.all(validates).then(function (validateResult) {
validateResult.forEach(function (result) {
var errorValue = Object.values(result)[0];
merge(resultList, errorValue);
});
var errorItems = validateResult.filter(function (item) {
return Object.values(item)[0] !== true;
});
if (errorItems.length) {
resolve(_defineProperty({}, snakeName, resultList));
} else {
resolve(_defineProperty({}, snakeName, true));
}
});
});
},
setValue: function setValue(fieldData) {
setListFields(fieldData, function (formItemRef, data) {
var _formItemRef$current2, _formItemRef$current3;
formItemRef === null || formItemRef === void 0 || (_formItemRef$current2 = formItemRef.current) === null || _formItemRef$current2 === void 0 || (_formItemRef$current3 = _formItemRef$current2.setValue) === null || _formItemRef$current3 === void 0 || _formItemRef$current3.call(_formItemRef$current2, data);
});
},
setField: function setField(fieldData) {
var value = fieldData.value,
status = fieldData.status;
var currentValue = get(form === null || form === void 0 ? void 0 : form.store, fullPath) || [];
if (isEqual(currentValue, value)) return;
setListFields(value, function (formItemRef, data) {
var _formItemRef$current4, _formItemRef$current5;
formItemRef === null || formItemRef === void 0 || (_formItemRef$current4 = formItemRef.current) === null || _formItemRef$current4 === void 0 || (_formItemRef$current5 = _formItemRef$current4.setField) === null || _formItemRef$current5 === void 0 || _formItemRef$current5.call(_formItemRef$current4, {
value: data,
status: status
});
});
},
resetField: function resetField(type) {
var resetType = type || resetTypeFromContext;
if (resetType === "initial") {
var currentData = get(form === null || form === void 0 ? void 0 : form.store, fullPath);
var data = initialData || [];
if (isEqual(currentData, initialData)) return;
setFormListValue(data);
var newFields = data === null || data === void 0 ? void 0 : data.map(function (data2, index) {
return {
data: _objectSpread({}, data2),
key: globalKey += 1,
name: index,
isListField: true
};
});
setFields(newFields);
set(form === null || form === void 0 ? void 0 : form.store, fullPath, data);
} else {
setFormListValue([]);
setFields([]);
unset(form === null || form === void 0 ? void 0 : form.store, fullPath);
}
},
setValidateMessage: function setValidateMessage(fieldData) {
_toConsumableArray(formListMapRef.current.values()).forEach(function (formItemRef) {
var _formItemRef$current6, _formItemRef$current7;
if (!formItemRef.current) return;
var name2 = formItemRef.current.name;
var data = get(fieldData, name2);
formItemRef === null || formItemRef === void 0 || (_formItemRef$current6 = formItemRef.current) === null || _formItemRef$current6 === void 0 || (_formItemRef$current7 = _formItemRef$current6.setValidateMessage) === null || _formItemRef$current7 === void 0 || _formItemRef$current7.call(_formItemRef$current6, data);
});
},
resetValidate: function resetValidate() {
_toConsumableArray(formListMapRef.current.values()).forEach(function (formItemRef) {
var _formItemRef$current8, _formItemRef$current9;
formItemRef === null || formItemRef === void 0 || (_formItemRef$current8 = formItemRef.current) === null || _formItemRef$current8 === void 0 || (_formItemRef$current9 = _formItemRef$current8.resetValidate) === null || _formItemRef$current9 === void 0 || _formItemRef$current9.call(_formItemRef$current8);
});
}
};
});
if (typeof children !== "function") {
log.error("Form", "FormList's children must be a function!");
return null;
}
return /* @__PURE__ */React.createElement(FormListContext.Provider, {
value: {
name: name,
fullPath: fullPath,
rules: rules,
formListMapRef: formListMapRef,
initialData: initialData,
form: form
}
}, children(fields, operation));
};
FormList.displayName = "FormList";
export { FormList as default };
//# sourceMappingURL=FormList.js.map