x-ui-design 0.6.21 → 0.6.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +23 -6
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +23 -6
- package/dist/index.js.map +1 -1
- package/lib/components/Form/Form.tsx +17 -4
- package/lib/components/Form/Item/Item.tsx +10 -1
- package/lib/hooks/useForm.ts +1 -2
- package/package.json +1 -1
- package/src/app/page.tsx +3 -1
package/dist/index.esm.js
CHANGED
|
@@ -830,8 +830,7 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
|
|
|
830
830
|
}
|
|
831
831
|
function subscribeToFields(names, callback) {
|
|
832
832
|
const fieldCallbacks = names.map(name => subscribeToField(name, () => {
|
|
833
|
-
|
|
834
|
-
callback(updatedValues);
|
|
833
|
+
callback(getFieldsValue(names));
|
|
835
834
|
}));
|
|
836
835
|
return () => {
|
|
837
836
|
fieldCallbacks.forEach(unsubscribe => unsubscribe());
|
|
@@ -1070,6 +1069,7 @@ const FormItemChildComponent = /*#__PURE__*/memo(({
|
|
|
1070
1069
|
getFieldsValue,
|
|
1071
1070
|
getFieldValue,
|
|
1072
1071
|
setFieldValue,
|
|
1072
|
+
subscribeToField,
|
|
1073
1073
|
subscribeToFields,
|
|
1074
1074
|
validateFields
|
|
1075
1075
|
} = formContext || {};
|
|
@@ -1079,11 +1079,17 @@ const FormItemChildComponent = /*#__PURE__*/memo(({
|
|
|
1079
1079
|
onChange,
|
|
1080
1080
|
value
|
|
1081
1081
|
} = child.props;
|
|
1082
|
-
const fieldValue = value ?? getFieldValue?.(name) ?? initialValue;
|
|
1082
|
+
const [fieldValue, _setFieldValue] = useState(value ?? getFieldValue?.(name) ?? initialValue);
|
|
1083
1083
|
useEffect(() => {
|
|
1084
1084
|
if (initialValue) {
|
|
1085
1085
|
setFieldValue?.(name, initialValue);
|
|
1086
1086
|
}
|
|
1087
|
+
const unsubscribe = subscribeToField?.(name, value => {
|
|
1088
|
+
_setFieldValue(value);
|
|
1089
|
+
});
|
|
1090
|
+
return () => {
|
|
1091
|
+
unsubscribe?.();
|
|
1092
|
+
};
|
|
1087
1093
|
}, []);
|
|
1088
1094
|
useEffect(() => {
|
|
1089
1095
|
if (name && dependencies.length > 0) {
|
|
@@ -1187,6 +1193,7 @@ const Form$1 = ({
|
|
|
1187
1193
|
}
|
|
1188
1194
|
};
|
|
1189
1195
|
const childrenList = useMemo(() => flattenChildren(children), [children]);
|
|
1196
|
+
const formClassName = useMemo(() => `${prefixCls} ${className}`.trim(), [prefixCls, className]);
|
|
1190
1197
|
useEffect(() => {
|
|
1191
1198
|
if (onFieldsChange) {
|
|
1192
1199
|
formInstance.setOnFieldsChange?.(onFieldsChange);
|
|
@@ -1218,15 +1225,25 @@ const Form$1 = ({
|
|
|
1218
1225
|
size: childProps.size || rest.size,
|
|
1219
1226
|
layout: childProps.layout || layout
|
|
1220
1227
|
}));
|
|
1221
|
-
}, [rest.size, layout
|
|
1222
|
-
console.info(
|
|
1228
|
+
}, [rest.size, layout]);
|
|
1229
|
+
console.info({
|
|
1230
|
+
children,
|
|
1231
|
+
form,
|
|
1232
|
+
style,
|
|
1233
|
+
prefixCls,
|
|
1234
|
+
className,
|
|
1235
|
+
initialValues,
|
|
1236
|
+
layout,
|
|
1237
|
+
scrollToFirstError,
|
|
1238
|
+
...rest
|
|
1239
|
+
});
|
|
1223
1240
|
return /*#__PURE__*/React.createElement(FormContext.Provider, {
|
|
1224
1241
|
value: formInstance
|
|
1225
1242
|
}, /*#__PURE__*/React.createElement("form", {
|
|
1226
1243
|
style: style,
|
|
1227
1244
|
ref: formRef,
|
|
1228
1245
|
onSubmit: handleSubmit,
|
|
1229
|
-
className:
|
|
1246
|
+
className: formClassName
|
|
1230
1247
|
}, Children.map(childrenList, child => injectPropsIntoFinalLeaf(child))));
|
|
1231
1248
|
};
|
|
1232
1249
|
Form$1.Item = FormItem$1;
|