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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "plain-design",
3
- "version": "1.0.0-beta.108",
3
+ "version": "1.0.0-beta.109",
4
4
  "description": "",
5
5
  "main": "dist/plain-design.min.js",
6
6
  "module": "dist/plain-design.commonjs.min.js",
@@ -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 {computed, inject, onBeforeUnmount, watch, watchEffect} from "@peryl/react-compose";
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 = computed(() => childValidation.getRules().some(rule => isRuleRequired(rule, formValidation.props.modelValue)));
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 = computed((): string | null => {
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 getWatchData = (rule: iValidateRule) => {
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 = (getRule: () => iValidateRule | null) => {
73
- const unwatch = watch(
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
- (function validateOnChange() {
102
- /*监听outerRule的值变化然后触发校验*/
103
- onBeforeUnmount(watchRuleValueChange(() => childValidation.formItemRules.outerRule.value));
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((item) => {
110
- /*当rule变化时,将上一次的watch注销,重新watch*/
111
- const { effects } = createEffects();
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
  }