x-ui-design 0.4.72 → 0.4.74
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/esm/types/types/form.d.ts +1 -0
- package/dist/index.esm.js +35 -31
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +35 -31
- package/dist/index.js.map +1 -1
- package/lib/components/Switch/Switch.tsx +1 -1
- package/lib/hooks/useForm.ts +41 -20
- package/lib/types/form.ts +1 -0
- package/package.json +1 -1
- package/src/app/page.tsx +17 -5
|
@@ -110,4 +110,5 @@ export interface FormInstance {
|
|
|
110
110
|
setOnFieldsChange?: (onFieldsChange?: (changedFields: FieldData[]) => void) => void;
|
|
111
111
|
setOnFinish?: (onFinish?: ((values: Record<string, RuleTypes>) => void) | undefined) => void;
|
|
112
112
|
setOnValuesChange?: (onValuesChange?: (changedValues: Record<string, RuleTypes>, allValues: Record<string, RuleTypes>) => void) => void;
|
|
113
|
+
changeStep: (step: number) => void;
|
|
113
114
|
}
|
package/dist/index.esm.js
CHANGED
|
@@ -603,35 +603,39 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
|
|
|
603
603
|
const rulesRef = useRef({});
|
|
604
604
|
const warningsRef = useRef({});
|
|
605
605
|
const _scrollToFirstError = useRef(scrollToFirstError);
|
|
606
|
+
const stepRef = useRef(0);
|
|
606
607
|
const formHandlersRef = useRef({
|
|
607
608
|
onFinish,
|
|
608
609
|
onValuesChange,
|
|
609
610
|
onFieldsChange
|
|
610
611
|
});
|
|
611
612
|
const formRef = useRef({
|
|
612
|
-
|
|
613
|
+
[stepRef.current]: {
|
|
614
|
+
...initialValues
|
|
615
|
+
}
|
|
613
616
|
});
|
|
614
|
-
const formCatchRef = useRef({});
|
|
615
617
|
const fieldInstancesRef = useRef({});
|
|
616
618
|
const [isReseting, setIsReseting] = useState(false);
|
|
617
619
|
const [errors, setErrors] = useState({});
|
|
618
620
|
const fieldSubscribers = useRef({});
|
|
619
621
|
const formSubscribers = useRef([]);
|
|
622
|
+
function getFormFields() {
|
|
623
|
+
return Object.assign({}, ...Object.values(formRef.current));
|
|
624
|
+
}
|
|
620
625
|
function getFieldInstance(name) {
|
|
621
626
|
return fieldInstancesRef.current[name] || null;
|
|
622
627
|
}
|
|
623
628
|
function getFieldValue(name) {
|
|
624
|
-
|
|
629
|
+
const formData = getFormFields();
|
|
630
|
+
return formData[name];
|
|
625
631
|
}
|
|
626
632
|
function getFieldsValue(nameList) {
|
|
633
|
+
const formData = getFormFields();
|
|
627
634
|
if (!nameList) {
|
|
628
|
-
return
|
|
629
|
-
...formRef.current,
|
|
630
|
-
...formCatchRef.current
|
|
631
|
-
};
|
|
635
|
+
return formData;
|
|
632
636
|
}
|
|
633
637
|
return nameList.reduce((acc, key) => {
|
|
634
|
-
acc[key] =
|
|
638
|
+
acc[key] = formData[key];
|
|
635
639
|
return acc;
|
|
636
640
|
}, {});
|
|
637
641
|
}
|
|
@@ -648,10 +652,10 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
|
|
|
648
652
|
}));
|
|
649
653
|
}
|
|
650
654
|
function setFieldValue(name, value, errors, reset = undefined, touch) {
|
|
651
|
-
if (!reset && reset !== null && ([undefined, null].includes(value) || formRef.current[
|
|
655
|
+
if (!reset && reset !== null && ([undefined, null].includes(value) || formRef.current[stepRef.current][name] === value)) {
|
|
652
656
|
return;
|
|
653
657
|
}
|
|
654
|
-
formRef.current[name] = value;
|
|
658
|
+
formRef.current[stepRef.current][name] = value;
|
|
655
659
|
if (touch) {
|
|
656
660
|
touchedFieldsRef.current.add(name);
|
|
657
661
|
}
|
|
@@ -708,18 +712,17 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
|
|
|
708
712
|
}
|
|
709
713
|
function registerField(name, rules = [], remove = false) {
|
|
710
714
|
if (remove) {
|
|
711
|
-
|
|
712
|
-
delete
|
|
715
|
+
delete formRef.current[stepRef.current]?.[name];
|
|
716
|
+
delete rulesRef.current[name];
|
|
713
717
|
} else {
|
|
714
|
-
if (!(name in formRef.current)) {
|
|
715
|
-
formRef.current[
|
|
716
|
-
delete formCatchRef.current[name];
|
|
718
|
+
if (!(name in formRef.current[stepRef.current])) {
|
|
719
|
+
formRef.current[stepRef.current][name] = initialValues?.[name];
|
|
717
720
|
}
|
|
718
721
|
rulesRef.current[name] = rules;
|
|
719
722
|
}
|
|
720
723
|
}
|
|
721
724
|
async function validateField(name) {
|
|
722
|
-
const value = formRef.current[name];
|
|
725
|
+
const value = formRef.current[stepRef.current][name];
|
|
723
726
|
const rules = rulesRef.current[name] || [];
|
|
724
727
|
const fieldErrors = [];
|
|
725
728
|
const fieldWarnings = [];
|
|
@@ -756,7 +759,7 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
|
|
|
756
759
|
return fieldErrors.length === 0;
|
|
757
760
|
}
|
|
758
761
|
async function validateFields(nameList) {
|
|
759
|
-
const fieldsToValidate = nameList || Object.keys(formRef.current);
|
|
762
|
+
const fieldsToValidate = nameList || Object.keys(formRef.current[stepRef.current]);
|
|
760
763
|
const results = await Promise.all(fieldsToValidate.map(name => validateField(name)));
|
|
761
764
|
if (_scrollToFirstError.current) {
|
|
762
765
|
const firstErrorContent = document.querySelectorAll('.xUi-form-item-error')?.[0];
|
|
@@ -775,10 +778,10 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
|
|
|
775
778
|
return results.every(valid => valid);
|
|
776
779
|
}
|
|
777
780
|
function resetFields(nameList, showError = true) {
|
|
781
|
+
const formData = getFormFields();
|
|
778
782
|
if (nameList?.length) {
|
|
779
783
|
nameList.forEach(name => {
|
|
780
|
-
|
|
781
|
-
formCatchRef.current = {};
|
|
784
|
+
formData[name] = initialValues[name];
|
|
782
785
|
touchedFieldsRef.current.delete(name);
|
|
783
786
|
delete warningsRef.current[name];
|
|
784
787
|
setErrors(prev => ({
|
|
@@ -791,8 +794,7 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
|
|
|
791
794
|
touchedFieldsRef.current.clear();
|
|
792
795
|
warningsRef.current = {};
|
|
793
796
|
Object.keys({
|
|
794
|
-
...
|
|
795
|
-
...formCatchRef.current
|
|
797
|
+
...formData
|
|
796
798
|
}).forEach(name => {
|
|
797
799
|
setFieldValue(name, initialValues[name], undefined, showError);
|
|
798
800
|
});
|
|
@@ -802,15 +804,10 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
|
|
|
802
804
|
}
|
|
803
805
|
async function submit() {
|
|
804
806
|
setScrollToFirstError(true);
|
|
807
|
+
const formData = getFormFields();
|
|
805
808
|
return (await validateFields()) ? (() => {
|
|
806
|
-
formHandlersRef.current.onFinish?.(
|
|
807
|
-
|
|
808
|
-
...formCatchRef.current
|
|
809
|
-
});
|
|
810
|
-
return {
|
|
811
|
-
...formRef.current,
|
|
812
|
-
...formCatchRef.current
|
|
813
|
-
};
|
|
809
|
+
formHandlersRef.current.onFinish?.(formData);
|
|
810
|
+
return formData;
|
|
814
811
|
})() : undefined;
|
|
815
812
|
}
|
|
816
813
|
function subscribeToField(name, callback) {
|
|
@@ -849,6 +846,12 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
|
|
|
849
846
|
function setOnFinish(onFinish) {
|
|
850
847
|
formHandlersRef.current.onFinish = onFinish;
|
|
851
848
|
}
|
|
849
|
+
function changeStep(step) {
|
|
850
|
+
stepRef.current = step ?? 0;
|
|
851
|
+
if (!formRef.current[stepRef.current]) {
|
|
852
|
+
formRef.current[stepRef.current] = {};
|
|
853
|
+
}
|
|
854
|
+
}
|
|
852
855
|
const formInstance = {
|
|
853
856
|
submit,
|
|
854
857
|
setFields,
|
|
@@ -876,7 +879,8 @@ const useForm = (initialValues = {}, onFieldsChange, onValuesChange, scrollToFir
|
|
|
876
879
|
isReseting,
|
|
877
880
|
setOnFinish,
|
|
878
881
|
setOnFieldsChange,
|
|
879
|
-
setOnValuesChange
|
|
882
|
+
setOnValuesChange,
|
|
883
|
+
changeStep
|
|
880
884
|
};
|
|
881
885
|
return formInstance;
|
|
882
886
|
};
|
|
@@ -1498,7 +1502,7 @@ styleInject(css_248z$i);
|
|
|
1498
1502
|
|
|
1499
1503
|
const Switch = ({
|
|
1500
1504
|
prefixCls = prefixClsSwitch,
|
|
1501
|
-
checked
|
|
1505
|
+
checked,
|
|
1502
1506
|
onChange,
|
|
1503
1507
|
onClick,
|
|
1504
1508
|
disabled = false,
|