plain-design 1.0.0-beta.108 → 1.0.0-beta.109
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/plain-design.commonjs.min.js +2 -2
- package/dist/plain-design.min.js +2 -2
- package/dist/report.html +2 -2
- package/package.json +1 -1
- package/src/packages/components/Application/utils/application.utils.ts +2 -3
- package/src/packages/components/Form/validate/useFormItemValidation.tsx +25 -27
package/package.json
CHANGED
@@ -1,6 +1,7 @@
|
|
1
1
|
import {ComputedRef, createRenderHook, inject, provide} from "@peryl/react-compose";
|
2
2
|
import {iThemeConfiguration} from "../theme/theme";
|
3
3
|
import {UseStyleProvideData} from "../../../uses/useStyle";
|
4
|
+
import {createEffects} from "@peryl/utils/createEffects";
|
4
5
|
|
5
6
|
export interface iApplicationConfiguration {
|
6
7
|
theme: iThemeConfiguration;
|
@@ -17,6 +18,4 @@ export const ApplicationConfigurationProvider = (() => {
|
|
17
18
|
|
18
19
|
export const APPLICATION_SERVICE_CONTAINER_CLASS = 'application-service-container';
|
19
20
|
|
20
|
-
export const ApplicationHooks = {
|
21
|
-
onRender: createRenderHook(),
|
22
|
-
};
|
21
|
+
export const ApplicationHooks = { onRender: createRenderHook({ effects: createEffects().effects }), };
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import {eFormValidateMode, eFormValidateTrigger, getRuleValue, iFormItemValidatePropsType, isRuleRequired, iValidateRule} from "./validate.utils";
|
2
|
-
import {
|
2
|
+
import {createEffectsOfReaction, globalWatch, inject, onBeforeUnmount} from "@peryl/react-compose";
|
3
3
|
import {FORM_VALIDATION_PROVIDER, useFormValidation} from "./useFormValidation";
|
4
4
|
import {Validation} from "./createValidation";
|
5
|
-
import {createEffects} from "@peryl/utils/createEffects";
|
5
|
+
import {createEffects, iEffects} from "@peryl/utils/createEffects";
|
6
6
|
|
7
7
|
/**
|
8
8
|
* 抽离FormItem中的校验逻辑
|
@@ -11,6 +11,8 @@ import {createEffects} from "@peryl/utils/createEffects";
|
|
11
11
|
*/
|
12
12
|
export function useFormItemValidation({ props }: { props: iFormItemValidatePropsType }) {
|
13
13
|
|
14
|
+
const { effects, effectComputed, effectWatchEffect } = createEffectsOfReaction();
|
15
|
+
|
14
16
|
/*Form校验*/
|
15
17
|
const formValidation = inject<ReturnType<typeof useFormValidation>>(FORM_VALIDATION_PROVIDER)!;
|
16
18
|
|
@@ -22,14 +24,14 @@ export function useFormItemValidation({ props }: { props: iFormItemValidateProps
|
|
22
24
|
* @author 韦胜健
|
23
25
|
* @date 2022.11.5 23:39
|
24
26
|
*/
|
25
|
-
const isRequired =
|
27
|
+
const isRequired = effectComputed(() => childValidation.getRules().some(rule => isRuleRequired(rule, formValidation.props.modelValue)));
|
26
28
|
|
27
29
|
/**
|
28
30
|
* 当前的校验不通过的信息
|
29
31
|
* @author 韦胜健
|
30
32
|
* @date 2022/8/22 23:48
|
31
33
|
*/
|
32
|
-
const validateMessage =
|
34
|
+
const validateMessage = effectComputed((): string | null => {
|
33
35
|
if (!props.field && !props.validateValueGetter && !props.rules) {
|
34
36
|
return null;
|
35
37
|
}
|
@@ -53,7 +55,7 @@ export function useFormItemValidation({ props }: { props: iFormItemValidateProps
|
|
53
55
|
* @author 韦胜健
|
54
56
|
* @date 2022.11.6 0:00
|
55
57
|
*/
|
56
|
-
const
|
58
|
+
const getValueByRule = (rule: iValidateRule): { label?: string | null, field?: string, value?: string } | null => {
|
57
59
|
if (formValidation.props.validateMode === eFormValidateMode.table) {return null;}
|
58
60
|
const { field, label, valueGetter } = rule;
|
59
61
|
if (!rule.field && !rule.valueGetter) {return null;}
|
@@ -69,12 +71,9 @@ export function useFormItemValidation({ props }: { props: iFormItemValidateProps
|
|
69
71
|
* @author 韦胜健
|
70
72
|
* @date 2022.11.6 0:58
|
71
73
|
*/
|
72
|
-
const watchRuleValueChange = (
|
73
|
-
|
74
|
-
() =>
|
75
|
-
const rule = getRule();
|
76
|
-
return !rule || rule.trigger === eFormValidateTrigger.blur ? null : getWatchData(rule);
|
77
|
-
},
|
74
|
+
const watchRuleValueChange = (rule: iValidateRule, effects: iEffects) => {
|
75
|
+
effects.push(globalWatch(
|
76
|
+
() => rule.trigger === eFormValidateTrigger.blur ? null : getValueByRule(rule),
|
78
77
|
(newValue, oldValue) => {
|
79
78
|
/*校验规则已经消失*/
|
80
79
|
if (!newValue || (!newValue.field && !newValue.label)) {
|
@@ -94,28 +93,27 @@ export function useFormItemValidation({ props }: { props: iFormItemValidateProps
|
|
94
93
|
}
|
95
94
|
formValidation.handler.onFieldChange({ label: newValue.label, field: newValue.field });
|
96
95
|
}
|
97
|
-
);
|
98
|
-
return () => unwatch();
|
96
|
+
));
|
99
97
|
};
|
100
98
|
|
101
|
-
|
102
|
-
|
103
|
-
|
99
|
+
const { effects: innerEffects } = createEffects();
|
100
|
+
effects.push(() => innerEffects.clear());
|
101
|
+
|
102
|
+
effectWatchEffect(() => {
|
103
|
+
innerEffects.clear();
|
104
104
|
[
|
105
|
+
childValidation.formItemRules.outerRule.value,
|
105
106
|
/*监听props.rules的值变化然后触发校验*/
|
106
|
-
childValidation.formItemRules.formRules,
|
107
|
+
...childValidation.formItemRules.formRules.value || [],
|
107
108
|
/*监听form.rules的值变化然后触发校验*/
|
108
|
-
childValidation.formItemRules.propsRules
|
109
|
-
].forEach(
|
110
|
-
/*当rule变化时,将上一次的watch
|
111
|
-
|
112
|
-
watchEffect(() => {
|
113
|
-
effects.clear();
|
114
|
-
item.value?.forEach(rule => {effects.push(watchRuleValueChange(() => rule));});
|
115
|
-
});
|
116
|
-
onBeforeUnmount(() => effects.clear());
|
109
|
+
...childValidation.formItemRules.propsRules.value || []
|
110
|
+
].forEach(rule => {
|
111
|
+
/*当rule变化时,将上一次的watch注销,这里重新watch*/
|
112
|
+
!!rule && watchRuleValueChange(rule, innerEffects);
|
117
113
|
});
|
118
|
-
})
|
114
|
+
});
|
115
|
+
|
116
|
+
onBeforeUnmount(effects.clear);
|
119
117
|
|
120
118
|
return { formValidation, childValidation, isRequired, validateMessage };
|
121
119
|
}
|