plain-design 1.0.0-beta.108 → 1.0.0-beta.109

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plain-design",
-  "version": "1.0.0-beta.108",
+  "version": "1.0.0-beta.109",
   "description": "",
   "main": "dist/plain-design.min.js",
   "module": "dist/plain-design.commonjs.min.js",

package/src/packages/components/Application/utils/application.utils.ts

@@ -1,6 +1,7 @@
 import {ComputedRef, createRenderHook, inject, provide} from "@peryl/react-compose";
 import {iThemeConfiguration} from "../theme/theme";
 import {UseStyleProvideData} from "../../../uses/useStyle";
+import {createEffects} from "@peryl/utils/createEffects";
 
 export interface iApplicationConfiguration {
   theme: iThemeConfiguration;
@@ -17,6 +18,4 @@ export const ApplicationConfigurationProvider = (() => {
 
 export const APPLICATION_SERVICE_CONTAINER_CLASS = 'application-service-container';
 
-export const ApplicationHooks = {
-  onRender: createRenderHook(),
-};
+export const ApplicationHooks = { onRender: createRenderHook({ effects: createEffects().effects }), };

package/src/packages/components/Form/validate/useFormItemValidation.tsx

@@ -1,8 +1,8 @@
 import {eFormValidateMode, eFormValidateTrigger, getRuleValue, iFormItemValidatePropsType, isRuleRequired, iValidateRule} from "./validate.utils";
-import {computed, inject, onBeforeUnmount, watch, watchEffect} from "@peryl/react-compose";
+import {createEffectsOfReaction, globalWatch, inject, onBeforeUnmount} from "@peryl/react-compose";
 import {FORM_VALIDATION_PROVIDER, useFormValidation} from "./useFormValidation";
 import {Validation} from "./createValidation";
-import {createEffects} from "@peryl/utils/createEffects";
+import {createEffects, iEffects} from "@peryl/utils/createEffects";
 
 /**
  * 抽离FormItem中的校验逻辑
@@ -11,6 +11,8 @@ import {createEffects} from "@peryl/utils/createEffects";
  */
 export function useFormItemValidation({ props }: { props: iFormItemValidatePropsType }) {
 
+  const { effects, effectComputed, effectWatchEffect } = createEffectsOfReaction();
+
   /*Form校验*/
   const formValidation = inject<ReturnType<typeof useFormValidation>>(FORM_VALIDATION_PROVIDER)!;
 
@@ -22,14 +24,14 @@ export function useFormItemValidation({ props }: { props: iFormItemValidateProps
    * @author  韦胜健
    * @date    2022.11.5 23:39
    */
-  const isRequired = computed(() => childValidation.getRules().some(rule => isRuleRequired(rule, formValidation.props.modelValue)));
+  const isRequired = effectComputed(() => childValidation.getRules().some(rule => isRuleRequired(rule, formValidation.props.modelValue)));
 
   /**
    * 当前的校验不通过的信息
    * @author  韦胜健
    * @date    2022/8/22 23:48
    */
-  const validateMessage = computed((): string | null => {
+  const validateMessage = effectComputed((): string | null => {
     if (!props.field && !props.validateValueGetter && !props.rules) {
       return null;
     }
@@ -53,7 +55,7 @@ export function useFormItemValidation({ props }: { props: iFormItemValidateProps
    * @author  韦胜健
    * @date    2022.11.6 0:00
    */
-  const getWatchData = (rule: iValidateRule) => {
+  const getValueByRule = (rule: iValidateRule): { label?: string | null, field?: string, value?: string } | null => {
     if (formValidation.props.validateMode === eFormValidateMode.table) {return null;}
     const { field, label, valueGetter } = rule;
     if (!rule.field && !rule.valueGetter) {return null;}
@@ -69,12 +71,9 @@ export function useFormItemValidation({ props }: { props: iFormItemValidateProps
    * @author  韦胜健
    * @date    2022.11.6 0:58
    */
-  const watchRuleValueChange = (getRule: () => iValidateRule | null) => {
-    const unwatch = watch(
-      () => {
-        const rule = getRule();
-        return !rule || rule.trigger === eFormValidateTrigger.blur ? null : getWatchData(rule);
-      },
+  const watchRuleValueChange = (rule: iValidateRule, effects: iEffects) => {
+    effects.push(globalWatch(
+      () => rule.trigger === eFormValidateTrigger.blur ? null : getValueByRule(rule),
       (newValue, oldValue) => {
         /*校验规则已经消失*/
         if (!newValue || (!newValue.field && !newValue.label)) {
@@ -94,28 +93,27 @@ export function useFormItemValidation({ props }: { props: iFormItemValidateProps
         }
         formValidation.handler.onFieldChange({ label: newValue.label, field: newValue.field });
       }
-    );
-    return () => unwatch();
+    ));
   };
 
-  (function validateOnChange() {
-    /*监听outerRule的值变化然后触发校验*/
-    onBeforeUnmount(watchRuleValueChange(() => childValidation.formItemRules.outerRule.value));
+  const { effects: innerEffects } = createEffects();
+  effects.push(() => innerEffects.clear());
+
+  effectWatchEffect(() => {
+    innerEffects.clear();
     [
+      childValidation.formItemRules.outerRule.value,
       /*监听props.rules的值变化然后触发校验*/
-      childValidation.formItemRules.formRules,
+      ...childValidation.formItemRules.formRules.value || [],
       /*监听form.rules的值变化然后触发校验*/
-      childValidation.formItemRules.propsRules
-    ].forEach((item) => {
-      /*当rule变化时，将上一次的watch注销，重新watch*/
-      const { effects } = createEffects();
-      watchEffect(() => {
-        effects.clear();
-        item.value?.forEach(rule => {effects.push(watchRuleValueChange(() => rule));});
-      });
-      onBeforeUnmount(() => effects.clear());
+      ...childValidation.formItemRules.propsRules.value || []
+    ].forEach(rule => {
+      /*当rule变化时，将上一次的watch注销，这里重新watch*/
+      !!rule && watchRuleValueChange(rule, innerEffects);
     });
-  })();
+  });
+
+  onBeforeUnmount(effects.clear);
 
   return { formValidation, childValidation, isRequired, validateMessage };
 }