plain-design 1.0.0-beta.147 → 1.0.0-beta.149

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

@@ -1,122 +1,122 @@
-import {eFormValidateMode, eFormValidateTrigger, getRuleValue, iFormItemValidatePropsType, isRuleRequired, iValidateRule} from "./validate.utils";
-import {createEffectsOfReaction, globalWatch, inject, onBeforeUnmount} from "@peryl/react-compose";
-import {FORM_VALIDATION_PROVIDER, useFormValidation} from "./useFormValidation";
-import {Validation} from "./createValidation";
-import {createEffects, iEffects} from "@peryl/utils/createEffects";
-
-/**
- * 抽离FormItem中的校验逻辑
- * @author  韦胜健
- * @date    2022.11.5 23:41
- */
-export function useFormItemValidation({ props }: { props: iFormItemValidatePropsType }) {
-
-  const { effects, effectComputed, effectWatchEffect } = createEffectsOfReaction();
-
-  /*Form校验*/
-  const formValidation = inject<ReturnType<typeof useFormValidation>>(FORM_VALIDATION_PROVIDER)!;
-
-  /*提交校验信息*/
-  const childValidation = Validation.useValidationChild(props);
-
-  /**
-   * 当前是否必填
-   * @author  韦胜健
-   * @date    2022.11.5 23:39
-   */
-  const isRequired = effectComputed(() => childValidation.getRules().some(rule => isRuleRequired(rule, formValidation.props.modelValue)));
-
-  /**
-   * 当前的校验不通过的信息
-   * @author  韦胜健
-   * @date    2022/8/22 23:48
-   */
-  const validateMessage = effectComputed((): string | null => {
-    if (!props.field && !props.validateValueGetter && !props.rules) {
-      return null;
-    }
-    const validateResult = formValidation.state.validateResultData?.find((i) => {
-      if (!!props.field) {
-        return i.field === props.field;
-      }
-      if (!!props.label) {
-        return i.label === props.label;
-      }
-      return false;
-    });
-    if (!!validateResult) {
-      return validateResult.message;
-    }
-    return null;
-  });
-
-  /**
-   * 计算rule要监听的值
-   * @author  韦胜健
-   * @date    2022.11.6 0:00
-   */
-  const getValueByRule = (rule: iValidateRule): { label?: string | null, field?: string } | null => {
-    if (formValidation.props.validateMode === eFormValidateMode.table) {return null;}
-    // const { field, label, valueGetter } = rule;
-    const { field, label } = rule;
-    if (!rule.field && !rule.valueGetter) {return null;}
-    return {
-      label,
-      field,
-      /*这里不能调用valueGetter，这样会导致值变化也会触发教研，设计是触发onChange才触发校验而不是值变化就触发*/
-      /*这里调用valueGetter的话，会导致触发watch，进而触发onFieldChange*/
-      // value: getRuleValue({ formData: formValidation.props.modelValue, field, validateValueGetter: valueGetter, formItemProps: props }),
-    };
-  };
-
-  /**
-   * 监听rule对应的值变化
-   * @author  韦胜健
-   * @date    2022.11.6 0:58
-   */
-  const watchRuleValueChange = (rule: iValidateRule, effects: iEffects) => {
-    effects.push(globalWatch(
-      () => rule.trigger === eFormValidateTrigger.blur ? null : getValueByRule(rule),
-      (newValue, oldValue) => {
-        /*校验规则已经消失*/
-        if (!newValue || (!newValue.field && !newValue.label)) {
-          return;
-        }
-        /*如果field或者label发生了变化，证明发生了FormItem组件复用，此时不管值是否发生了变化*/
-        if (
-          !oldValue ||
-          newValue.field != oldValue.field ||
-          newValue.label != oldValue.label
-        ) {
-          return;
-        }
-        /*值没有变化*/
-        /*if (newValue.value == oldValue.value) {
-          return;
-        }*/
-        formValidation.handler.onFieldChange({ label: newValue.label, field: newValue.field });
-      }
-    ));
-  };
-
-  const { effects: innerEffects } = createEffects();
-  effects.push(() => innerEffects.clear());
-
-  effectWatchEffect(() => {
-    innerEffects.clear();
-    [
-      childValidation.formItemRules.outerRule.value,
-      /*监听props.rules的值变化然后触发校验*/
-      ...childValidation.formItemRules.formRules.value || [],
-      /*监听form.rules的值变化然后触发校验*/
-      ...childValidation.formItemRules.propsRules.value || []
-    ].forEach(rule => {
-      /*当rule变化时，将上一次的watch注销，这里重新watch*/
-      !!rule && watchRuleValueChange(rule, innerEffects);
-    });
-  });
-
-  onBeforeUnmount(effects.clear);
-
-  return { formValidation, childValidation, isRequired, validateMessage };
-}
+import {eFormValidateMode, eFormValidateTrigger, getRuleValue, iFormItemValidatePropsType, isRuleRequired, iValidateRule} from "./validate.utils";
+import {createEffectsOfReaction, globalWatch, inject, onBeforeUnmount} from "@peryl/react-compose";
+import {FORM_VALIDATION_PROVIDER, useFormValidation} from "./useFormValidation";
+import {Validation} from "./createValidation";
+import {createEffects, iEffects} from "@peryl/utils/createEffects";
+
+/**
+ * 抽离FormItem中的校验逻辑
+ * @author  韦胜健
+ * @date    2022.11.5 23:41
+ */
+export function useFormItemValidation({ props }: { props: iFormItemValidatePropsType }) {
+
+  const { effects, effectComputed, effectWatchEffect } = createEffectsOfReaction();
+
+  /*Form校验*/
+  const formValidation = inject<ReturnType<typeof useFormValidation>>(FORM_VALIDATION_PROVIDER)!;
+
+  /*提交校验信息*/
+  const childValidation = Validation.useValidationChild(props);
+
+  /**
+   * 当前是否必填
+   * @author  韦胜健
+   * @date    2022.11.5 23:39
+   */
+  const isRequired = effectComputed(() => childValidation.getRules().some(rule => isRuleRequired(rule, formValidation.props.modelValue)));
+
+  /**
+   * 当前的校验不通过的信息
+   * @author  韦胜健
+   * @date    2022/8/22 23:48
+   */
+  const validateMessage = effectComputed((): string | null => {
+    if (!props.field && !props.validateValueGetter && !props.rules) {
+      return null;
+    }
+    const validateResult = formValidation.state.validateResultData?.find((i) => {
+      if (!!props.field) {
+        return i.field === props.field;
+      }
+      if (!!props.label) {
+        return i.label === props.label;
+      }
+      return false;
+    });
+    if (!!validateResult) {
+      return validateResult.message;
+    }
+    return null;
+  });
+
+  /**
+   * 计算rule要监听的值
+   * @author  韦胜健
+   * @date    2022.11.6 0:00
+   */
+  const getValueByRule = (rule: iValidateRule): { label?: string | null, field?: string } | null => {
+    if (formValidation.props.validateMode === eFormValidateMode.table) {return null;}
+    // const { field, label, valueGetter } = rule;
+    const { field, label } = rule;
+    if (!rule.field && !rule.valueGetter) {return null;}
+    return {
+      label,
+      field,
+      /*这里不能调用valueGetter，这样会导致值变化也会触发教研，设计是触发onChange才触发校验而不是值变化就触发*/
+      /*这里调用valueGetter的话，会导致触发watch，进而触发onFieldChange*/
+      // value: getRuleValue({ formData: formValidation.props.modelValue, field, validateValueGetter: valueGetter, formItemProps: props }),
+    };
+  };
+
+  /**
+   * 监听rule对应的值变化
+   * @author  韦胜健
+   * @date    2022.11.6 0:58
+   */
+  const watchRuleValueChange = (rule: iValidateRule, effects: iEffects) => {
+    effects.push(globalWatch(
+      () => rule.trigger === eFormValidateTrigger.blur ? null : getValueByRule(rule),
+      (newValue, oldValue) => {
+        /*校验规则已经消失*/
+        if (!newValue || (!newValue.field && !newValue.label)) {
+          return;
+        }
+        /*如果field或者label发生了变化，证明发生了FormItem组件复用，此时不管值是否发生了变化*/
+        if (
+          !oldValue ||
+          newValue.field != oldValue.field ||
+          newValue.label != oldValue.label
+        ) {
+          return;
+        }
+        /*值没有变化*/
+        /*if (newValue.value == oldValue.value) {
+          return;
+        }*/
+        formValidation.handler.onFieldChange({ label: newValue.label, field: newValue.field });
+      }
+    ));
+  };
+
+  const { effects: innerEffects } = createEffects();
+  effects.push(() => innerEffects.clear());
+
+  effectWatchEffect(() => {
+    innerEffects.clear();
+    [
+      childValidation.formItemRules.outerRule.value,
+      /*监听props.rules的值变化然后触发校验*/
+      ...childValidation.formItemRules.formRules.value || [],
+      /*监听form.rules的值变化然后触发校验*/
+      ...childValidation.formItemRules.propsRules.value || []
+    ].forEach(rule => {
+      /*当rule变化时，将上一次的watch注销，这里重新watch*/
+      !!rule && watchRuleValueChange(rule, innerEffects);
+    });
+  });
+
+  onBeforeUnmount(effects.clear);
+
+  return { formValidation, childValidation, isRequired, validateMessage };
+}

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

@@ -1,137 +1,137 @@
-import {eFormValidateMode, eFormValidateTrigger, getValidateResultMessage, iFormValidatePropsType, iValidateState} from "./validate.utils";
-import {provide, reactive} from "@peryl/react-compose";
-import {$message} from "../../$message";
-import {Validation} from "./createValidation";
-import {AutoLoadingObserver} from "../../AutoLoadingObserver";
-
-/**
- * Form以及FormItem的上下文状态注入关键字
- * @author  韦胜健
- * @date    2022/8/22 23:41
- */
-export const FORM_VALIDATION_PROVIDER = '@@FORM_VALIDATION_PROVIDER';
-
-/**
- * 抽离Form中的校验逻辑
- * @author  韦胜健
- * @date    2022.11.5 23:41
- */
-export function useFormValidation({ props }: { props: iFormValidatePropsType }) {
-
-  /**
-   * 收集校验
-   * @author  韦胜健
-   * @date    2022.11.5 23:50
-   */
-  const parentValidation = Validation.useValidationParent(props);
-
-  /**
-   * 校验状态
-   * @author  韦胜健
-   * @date    2022.11.5 23:50
-   */
-  const state: iValidateState = reactive({
-    validateResultData: null,
-  });
-
-  /**
-   * 校验加载状态显示
-   * @author  韦胜健
-   * @date    2022.11.5 23:34
-   */
-  const loading = (() => {
-    let time: null | number;
-    const state = reactive({ loading: false });
-    return {
-      state,
-      show: () => {
-        time = setTimeout(() => {
-          state.loading = true;
-          time = null;
-        }, 500) as any as number;
-      },
-      hide: () => {
-        if (!!time) {
-          clearTimeout(time);
-        } else {
-          state.loading = false;
-        }
-      },
-    };
-  })();
-
-  /**
-   * 处理校验动作
-   * @author  韦胜健
-   * @date    2022.11.5 23:43
-   */
-  const handler = {
-    onFieldChange: ({ label, field }: { label: string | null | undefined, field: string | undefined }) => {
-      return parentValidation.methods.validateItem({ label, field, trigger: eFormValidateTrigger.change, state, formData: props.modelValue });
-    },
-    onEditChange: ({ label, field }: { label: string | null | undefined, field: string | undefined }) => {
-      // if (props.validateMode !== eFormValidateMode.table) {return; }
-      return handler.onFieldChange({ label, field });
-    },
-    onBlurChange: ({ label, field }: { label: string | null | undefined, field: string | undefined }) => {
-      return parentValidation.methods.validateItem({ label, field, trigger: eFormValidateTrigger.blur, state, formData: props.modelValue });
-    },
-  };
-
-  /**
-   * 校验方法
-   * @author  韦胜健
-   * @date    2022.11.5 23:43
-   */
-  const methods = {
-    /**
-     * 清空校验
-     * @author  韦胜健
-     * @date    2022.11.5 23:28
-     */
-    clearValidate: () => {
-      state.validateResultData = null;
-    },
-    /**
-     * 触发校验
-     * @author  韦胜健
-     * @date    2022.11.5 23:28
-     */
-    validate: async (config?: { autoLoading?: boolean, autoAlert?: boolean, }) => {
-      let promise = (async () => {
-        config = config || {};
-        if (config.autoLoading != false) {
-          loading.show();
-        }
-        try {
-          const validateResultData = await parentValidation.methods.validate({
-            state,
-            formData: props.modelValue,
-          });
-          if (!!validateResultData && validateResultData.length > 0) {
-            if (config.autoAlert !== false) {
-              $message(getValidateResultMessage(validateResultData[0], props.modelValue));
-            }
-            return Promise.reject(validateResultData);
-          }
-        } finally {
-          loading.hide();
-        }
-      })();
-      AutoLoadingObserver.subject(promise);
-      return promise;
-    },
-  };
-
-  const refer = {
-    props,
-    state,
-    loading,
-    methods,
-    handler,
-  };
-
-  provide(FORM_VALIDATION_PROVIDER, refer);
-
-  return refer;
-}
+import {eFormValidateMode, eFormValidateTrigger, getValidateResultMessage, iFormValidatePropsType, iValidateState} from "./validate.utils";
+import {provide, reactive} from "@peryl/react-compose";
+import {$message} from "../../$message";
+import {Validation} from "./createValidation";
+import {AutoLoadingObserver} from "../../AutoLoadingObserver";
+
+/**
+ * Form以及FormItem的上下文状态注入关键字
+ * @author  韦胜健
+ * @date    2022/8/22 23:41
+ */
+export const FORM_VALIDATION_PROVIDER = '@@FORM_VALIDATION_PROVIDER';
+
+/**
+ * 抽离Form中的校验逻辑
+ * @author  韦胜健
+ * @date    2022.11.5 23:41
+ */
+export function useFormValidation({ props }: { props: iFormValidatePropsType }) {
+
+  /**
+   * 收集校验
+   * @author  韦胜健
+   * @date    2022.11.5 23:50
+   */
+  const parentValidation = Validation.useValidationParent(props);
+
+  /**
+   * 校验状态
+   * @author  韦胜健
+   * @date    2022.11.5 23:50
+   */
+  const state: iValidateState = reactive({
+    validateResultData: null,
+  });
+
+  /**
+   * 校验加载状态显示
+   * @author  韦胜健
+   * @date    2022.11.5 23:34
+   */
+  const loading = (() => {
+    let time: null | number;
+    const state = reactive({ loading: false });
+    return {
+      state,
+      show: () => {
+        time = setTimeout(() => {
+          state.loading = true;
+          time = null;
+        }, 500) as any as number;
+      },
+      hide: () => {
+        if (!!time) {
+          clearTimeout(time);
+        } else {
+          state.loading = false;
+        }
+      },
+    };
+  })();
+
+  /**
+   * 处理校验动作
+   * @author  韦胜健
+   * @date    2022.11.5 23:43
+   */
+  const handler = {
+    onFieldChange: ({ label, field }: { label: string | null | undefined, field: string | undefined }) => {
+      return parentValidation.methods.validateItem({ label, field, trigger: eFormValidateTrigger.change, state, formData: props.modelValue });
+    },
+    onEditChange: ({ label, field }: { label: string | null | undefined, field: string | undefined }) => {
+      // if (props.validateMode !== eFormValidateMode.table) {return; }
+      return handler.onFieldChange({ label, field });
+    },
+    onBlurChange: ({ label, field }: { label: string | null | undefined, field: string | undefined }) => {
+      return parentValidation.methods.validateItem({ label, field, trigger: eFormValidateTrigger.blur, state, formData: props.modelValue });
+    },
+  };
+
+  /**
+   * 校验方法
+   * @author  韦胜健
+   * @date    2022.11.5 23:43
+   */
+  const methods = {
+    /**
+     * 清空校验
+     * @author  韦胜健
+     * @date    2022.11.5 23:28
+     */
+    clearValidate: () => {
+      state.validateResultData = null;
+    },
+    /**
+     * 触发校验
+     * @author  韦胜健
+     * @date    2022.11.5 23:28
+     */
+    validate: async (config?: { autoLoading?: boolean, autoAlert?: boolean, }) => {
+      let promise = (async () => {
+        config = config || {};
+        if (config.autoLoading != false) {
+          loading.show();
+        }
+        try {
+          const validateResultData = await parentValidation.methods.validate({
+            state,
+            formData: props.modelValue,
+          });
+          if (!!validateResultData && validateResultData.length > 0) {
+            if (config.autoAlert !== false) {
+              $message(getValidateResultMessage(validateResultData[0], props.modelValue));
+            }
+            return Promise.reject(validateResultData);
+          }
+        } finally {
+          loading.hide();
+        }
+      })();
+      AutoLoadingObserver.subject(promise);
+      return promise;
+    },
+  };
+
+  const refer = {
+    props,
+    state,
+    loading,
+    methods,
+    handler,
+  };
+
+  provide(FORM_VALIDATION_PROVIDER, refer);
+
+  return refer;
+}