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

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

@@ -1,278 +1,278 @@
-import {computed, inject, onBeforeUnmount, provide, reactive, ref, toRaw} from "@peryl/react-compose";
-import {checkRules, createFormItemRules, eFormValidateTrigger, iFormItemValidatePropsType, iFormValidatePropsType, iRegistrationValidator, isMatchTrigger, iValidateRule, iValidateState} from "./validate.utils";
-import {PlainObject} from "@peryl/utils/event";
-import {registryAnyValidationType} from "../types/any";
-import {registryStringValidationType} from "../types/string";
-import {registryNumberValidationType} from "../types/number";
-import {registryArrayValidationType} from "../types/array";
-import {registryArrayStringValidationType} from "../types/arraystring";
-import {registryArrayJsonValidationType} from "../types/arrayjson";
-import {registryEmailValidationType} from "../types/email";
-import {registryIdcardValidationType} from "../types/idcard";
-import {registryPhoneValidationType} from "../types/phone";
-import {registryQQValidationType} from "../types/qq";
-import {registryDateValidationType} from "../types/date";
-import {registryTimeValidationType} from "../types/time";
-import {registryDatetimeValidationType} from "../types/datetime";
-
-export function createValidation() {
-  /**
-   * Form以及FormItem的上下文状态注入关键字
-   * @author  韦胜健
-   * @date    2022/8/22 23:41
-   */
-  const PROVIDE_NAME = '@@PLAIN_VALIDATION';
-
-  /**
-   * 共享状态
-   * @author  韦胜健
-   * @date    2022/8/22 23:19
-   */
-  const registration = reactive({
-    /**
-     * 注册好的校验类型
-     * @author  韦胜健
-     * @date    2022/8/22 22:58
-     */
-    types: {} as Record<string, iRegistrationValidator | undefined>
-  });
-
-  /**
-   * 注册校验类型
-   * @author  韦胜健
-   * @date    2022/8/22 23:17
-   */
-  const registryValidateType = (type: string, validator: iRegistrationValidator) => {
-    if (!!registration.types[type]) {
-      console.log(`覆盖校验类型：${type}`);
-    }
-    registration.types[type] = validator;
-  };
-
-  /**
-   * form收集校验信息
-   * @author  韦胜健
-   * @date    2022.11.5 22:43
-   */
-  const useValidationParent = (formProps: { rules?: iFormValidatePropsType["rules"], anotherRules?: iFormValidatePropsType['anotherRules'] }) => {
-
-    /**
-     * 从FormItem等子组件中收集来的校验规则
-     * @author  韦胜健
-     * @date    2022.11.5 22:52
-     */
-    const ruleGetters = ref([] as (() => iValidateRule[])[]);
-
-    /**
-     * 将从FormItem中收集来的校验规则与Form组件props.rules合并
-     * @author  韦胜健
-     * @date    2022/8/22 18:22
-     */
-    const rules = computed((): iValidateRule[] => {
-      let ret = ruleGetters.value.map((i) => i()).flat(1);
-      !!formProps.anotherRules && (ret = [...formProps.anotherRules, ...ret]);
-      return ret;
-    });
-
-    /**
-     * field映射label
-     * @author  韦胜健
-     * @date    2022.11.5 23:11
-     */
-    const field2Label = computed(() => rules.value.reduce((prev, { label, field }) => {
-      !!label && field && (prev[field] = label);
-      return prev;
-    }, {} as Record<string, string | undefined>));
-
-    /**
-     * 通过field找到对应的label
-     * @author  韦胜健
-     * @date    2022.11.5 23:10
-     */
-    const getLabelByField = (field: string) => field2Label.value[field];
-
-    /**
-     * 校验方法
-     * @author  韦胜健
-     * @date    2022.11.5 22:44
-     */
-    const methods = {
-      /**
-       * 校验所有规则以及字段
-       * @author  韦胜健
-       * @date    2022/8/22 22:43
-       */
-      validate: async (
-        {
-          state,
-          formData,
-        }: {
-          state: iValidateState,
-          formData: PlainObject | null | undefined,
-        }) => {
-        /*待校验规则*/
-        const validateRules = rules.value;
-        /*清理先前校验结果*/
-        state.validateResultData = null;
-        /*没有校验规则*/
-        if (validateRules.length === 0) {
-          return;
-        }
-        /*执行校验*/
-        state.validateResultData = await checkRules({
-          rules: validateRules,
-          formData,
-          types: registration.types,
-          getLabelByField: (field) => rules.value.find(i => i.field === field)?.label,
-        });
-        return state.validateResultData;
-      },
-      /**
-       * 校验某个字段
-       * @author  韦胜健
-       * @date    2022.11.5 23:08
-       */
-      validateItem: async (
-        {
-          label,
-          field,
-          trigger,
-          state,
-          formData,
-        }: {
-          label?: string | null;
-          field?: string;
-          trigger: typeof eFormValidateTrigger.TYPE;
-          state: iValidateState,
-          formData: PlainObject | null | undefined,
-        }
-      ) => {
-
-        if (!label && !field) {return;}
-
-        /**
-         * 过滤待处理的校验规则
-         * @author  韦胜健
-         * @date    2022.11.5 22:54
-         */
-        const validateRules = rules.value.filter((rule) => {
-          /*不匹配trigger的rule直接排除*/
-          if (!isMatchTrigger(trigger, rule)) {
-            return false;
-          }
-          /*如果有field，则找对应field的rule*/
-          if (!!field) {
-            return rule.field === field;
-          } else if (!!label) {
-            return rule.label === label;
-          } else {
-            console.error('无法校验label以及field都为空的规则！');
-            return false;
-          }
-        });
-
-        /*没有匹配的校验规则，结束*/
-        if (validateRules.length === 0) {
-          return;
-        }
-        /*执行校验*/
-        const validateResultData = await checkRules({
-          rules: validateRules,
-          formData,
-          types: registration.types,
-          getLabelByField: (field) => rules.value.find(i => i.field === field)?.label,
-        });
-        /**
-         * 清理原来的时候，label以及field对应的校验结果
-         * @author  韦胜健
-         * @date    2022.11.5 22:54
-         */
-        const leafValidateResultData = !state.validateResultData
-          ? null
-          : state.validateResultData.filter((ret) => {
-            /*不匹配trigger的校验结果保留，仅清理对应trigger的校验结果*/
-            if (!isMatchTrigger(trigger, ret.rule)) {
-              return true;
-            }
-            /*匹配field以及label*/
-            if (!!field) {
-              return ret.field !== field;
-            } else if (!!label) {
-              return ret.label !== label;
-            } else {
-              return true;
-            }
-          });
-        state.validateResultData = [
-          ...(leafValidateResultData || []),
-          ...(validateResultData || [])
-        ];
-        return validateResultData;
-      },
-    };
-
-    const refer = {
-      ruleGetters,
-      rules,
-      getLabelByField,
-      methods,
-      formProps,
-    };
-
-    provide(PROVIDE_NAME, refer);
-
-    return refer;
-  };
-
-  /**
-   * form item提交校验信息
-   * @author  韦胜健
-   * @date    2022.11.5 23:21
-   */
-  const useValidationChild = (formItemProps: iFormItemValidatePropsType) => {
-
-    const form = inject<ReturnType<typeof useValidationParent>>(PROVIDE_NAME)!;
-
-    const formItemRules = createFormItemRules({ formItemProps, getFormPropsRules: () => form.formProps.rules });
-
-    const getRules = () => {
-      const { outerRule, propsRules, formRules } = formItemRules;
-      const ret: iValidateRule[] = [];
-      !!outerRule.value && ret.push(outerRule.value);
-      !!propsRules.value && ret.push(...propsRules.value);
-      !!formRules.value && ret.push(...formRules.value);
-      return ret;
-    };
-
-    form.ruleGetters.value.push(getRules);
-    onBeforeUnmount(() => {form.ruleGetters.value = form.ruleGetters.value.filter(i => toRaw(i) !== getRules);});
-
-    return { form, getRules, formItemRules };
-  };
-
-  return {
-    registration,
-    registryValidateType,
-    useValidationParent,
-    useValidationChild,
-  };
-}
-
-export const Validation = createValidation();
-
-registryAnyValidationType(Validation);              // any
-registryStringValidationType(Validation);           // string
-registryNumberValidationType(Validation);           // number
-registryArrayValidationType(Validation);            // array
-registryArrayStringValidationType(Validation);      // arraystring
-registryArrayJsonValidationType(Validation);        // arrayjson
-registryEmailValidationType(Validation);            // email
-registryIdcardValidationType(Validation);           // idcard
-registryPhoneValidationType(Validation);            // phone
-registryQQValidationType(Validation);               // qq
-registryDateValidationType(Validation);             // date
-registryTimeValidationType(Validation);             // time
-registryDatetimeValidationType(Validation);         // datetime
-
-export type iValidation = ReturnType<typeof createValidation>;
-export type iFormValidator = ReturnType<iValidation["useValidationParent"]>
+import {computed, inject, onBeforeUnmount, provide, reactive, ref, toRaw} from "@peryl/react-compose";
+import {checkRules, createFormItemRules, eFormValidateTrigger, iFormItemValidatePropsType, iFormValidatePropsType, iRegistrationValidator, isMatchTrigger, iValidateRule, iValidateState} from "./validate.utils";
+import {PlainObject} from "@peryl/utils/event";
+import {registryAnyValidationType} from "../types/any";
+import {registryStringValidationType} from "../types/string";
+import {registryNumberValidationType} from "../types/number";
+import {registryArrayValidationType} from "../types/array";
+import {registryArrayStringValidationType} from "../types/arraystring";
+import {registryArrayJsonValidationType} from "../types/arrayjson";
+import {registryEmailValidationType} from "../types/email";
+import {registryIdcardValidationType} from "../types/idcard";
+import {registryPhoneValidationType} from "../types/phone";
+import {registryQQValidationType} from "../types/qq";
+import {registryDateValidationType} from "../types/date";
+import {registryTimeValidationType} from "../types/time";
+import {registryDatetimeValidationType} from "../types/datetime";
+
+export function createValidation() {
+  /**
+   * Form以及FormItem的上下文状态注入关键字
+   * @author  韦胜健
+   * @date    2022/8/22 23:41
+   */
+  const PROVIDE_NAME = '@@PLAIN_VALIDATION';
+
+  /**
+   * 共享状态
+   * @author  韦胜健
+   * @date    2022/8/22 23:19
+   */
+  const registration = reactive({
+    /**
+     * 注册好的校验类型
+     * @author  韦胜健
+     * @date    2022/8/22 22:58
+     */
+    types: {} as Record<string, iRegistrationValidator | undefined>
+  });
+
+  /**
+   * 注册校验类型
+   * @author  韦胜健
+   * @date    2022/8/22 23:17
+   */
+  const registryValidateType = (type: string, validator: iRegistrationValidator) => {
+    if (!!registration.types[type]) {
+      console.log(`覆盖校验类型：${type}`);
+    }
+    registration.types[type] = validator;
+  };
+
+  /**
+   * form收集校验信息
+   * @author  韦胜健
+   * @date    2022.11.5 22:43
+   */
+  const useValidationParent = (formProps: { rules?: iFormValidatePropsType["rules"], anotherRules?: iFormValidatePropsType['anotherRules'] }) => {
+
+    /**
+     * 从FormItem等子组件中收集来的校验规则
+     * @author  韦胜健
+     * @date    2022.11.5 22:52
+     */
+    const ruleGetters = ref([] as (() => iValidateRule[])[]);
+
+    /**
+     * 将从FormItem中收集来的校验规则与Form组件props.rules合并
+     * @author  韦胜健
+     * @date    2022/8/22 18:22
+     */
+    const rules = computed((): iValidateRule[] => {
+      let ret = ruleGetters.value.map((i) => i()).flat(1);
+      !!formProps.anotherRules && (ret = [...formProps.anotherRules, ...ret]);
+      return ret;
+    });
+
+    /**
+     * field映射label
+     * @author  韦胜健
+     * @date    2022.11.5 23:11
+     */
+    const field2Label = computed(() => rules.value.reduce((prev, { label, field }) => {
+      !!label && field && (prev[field] = label);
+      return prev;
+    }, {} as Record<string, string | undefined>));
+
+    /**
+     * 通过field找到对应的label
+     * @author  韦胜健
+     * @date    2022.11.5 23:10
+     */
+    const getLabelByField = (field: string) => field2Label.value[field];
+
+    /**
+     * 校验方法
+     * @author  韦胜健
+     * @date    2022.11.5 22:44
+     */
+    const methods = {
+      /**
+       * 校验所有规则以及字段
+       * @author  韦胜健
+       * @date    2022/8/22 22:43
+       */
+      validate: async (
+        {
+          state,
+          formData,
+        }: {
+          state: iValidateState,
+          formData: PlainObject | null | undefined,
+        }) => {
+        /*待校验规则*/
+        const validateRules = rules.value;
+        /*清理先前校验结果*/
+        state.validateResultData = null;
+        /*没有校验规则*/
+        if (validateRules.length === 0) {
+          return;
+        }
+        /*执行校验*/
+        state.validateResultData = await checkRules({
+          rules: validateRules,
+          formData,
+          types: registration.types,
+          getLabelByField: (field) => rules.value.find(i => i.field === field)?.label,
+        });
+        return state.validateResultData;
+      },
+      /**
+       * 校验某个字段
+       * @author  韦胜健
+       * @date    2022.11.5 23:08
+       */
+      validateItem: async (
+        {
+          label,
+          field,
+          trigger,
+          state,
+          formData,
+        }: {
+          label?: string | null;
+          field?: string;
+          trigger: typeof eFormValidateTrigger.TYPE;
+          state: iValidateState,
+          formData: PlainObject | null | undefined,
+        }
+      ) => {
+
+        if (!label && !field) {return;}
+
+        /**
+         * 过滤待处理的校验规则
+         * @author  韦胜健
+         * @date    2022.11.5 22:54
+         */
+        const validateRules = rules.value.filter((rule) => {
+          /*不匹配trigger的rule直接排除*/
+          if (!isMatchTrigger(trigger, rule)) {
+            return false;
+          }
+          /*如果有field，则找对应field的rule*/
+          if (!!field) {
+            return rule.field === field;
+          } else if (!!label) {
+            return rule.label === label;
+          } else {
+            console.error('无法校验label以及field都为空的规则！');
+            return false;
+          }
+        });
+
+        /*没有匹配的校验规则，结束*/
+        if (validateRules.length === 0) {
+          return;
+        }
+        /*执行校验*/
+        const validateResultData = await checkRules({
+          rules: validateRules,
+          formData,
+          types: registration.types,
+          getLabelByField: (field) => rules.value.find(i => i.field === field)?.label,
+        });
+        /**
+         * 清理原来的时候，label以及field对应的校验结果
+         * @author  韦胜健
+         * @date    2022.11.5 22:54
+         */
+        const leafValidateResultData = !state.validateResultData
+          ? null
+          : state.validateResultData.filter((ret) => {
+            /*不匹配trigger的校验结果保留，仅清理对应trigger的校验结果*/
+            if (!isMatchTrigger(trigger, ret.rule)) {
+              return true;
+            }
+            /*匹配field以及label*/
+            if (!!field) {
+              return ret.field !== field;
+            } else if (!!label) {
+              return ret.label !== label;
+            } else {
+              return true;
+            }
+          });
+        state.validateResultData = [
+          ...(leafValidateResultData || []),
+          ...(validateResultData || [])
+        ];
+        return validateResultData;
+      },
+    };
+
+    const refer = {
+      ruleGetters,
+      rules,
+      getLabelByField,
+      methods,
+      formProps,
+    };
+
+    provide(PROVIDE_NAME, refer);
+
+    return refer;
+  };
+
+  /**
+   * form item提交校验信息
+   * @author  韦胜健
+   * @date    2022.11.5 23:21
+   */
+  const useValidationChild = (formItemProps: iFormItemValidatePropsType) => {
+
+    const form = inject<ReturnType<typeof useValidationParent>>(PROVIDE_NAME)!;
+
+    const formItemRules = createFormItemRules({ formItemProps, getFormPropsRules: () => form.formProps.rules });
+
+    const getRules = () => {
+      const { outerRule, propsRules, formRules } = formItemRules;
+      const ret: iValidateRule[] = [];
+      !!outerRule.value && ret.push(outerRule.value);
+      !!propsRules.value && ret.push(...propsRules.value);
+      !!formRules.value && ret.push(...formRules.value);
+      return ret;
+    };
+
+    form.ruleGetters.value.push(getRules);
+    onBeforeUnmount(() => {form.ruleGetters.value = form.ruleGetters.value.filter(i => toRaw(i) !== getRules);});
+
+    return { form, getRules, formItemRules };
+  };
+
+  return {
+    registration,
+    registryValidateType,
+    useValidationParent,
+    useValidationChild,
+  };
+}
+
+export const Validation = createValidation();
+
+registryAnyValidationType(Validation);              // any
+registryStringValidationType(Validation);           // string
+registryNumberValidationType(Validation);           // number
+registryArrayValidationType(Validation);            // array
+registryArrayStringValidationType(Validation);      // arraystring
+registryArrayJsonValidationType(Validation);        // arrayjson
+registryEmailValidationType(Validation);            // email
+registryIdcardValidationType(Validation);           // idcard
+registryPhoneValidationType(Validation);            // phone
+registryQQValidationType(Validation);               // qq
+registryDateValidationType(Validation);             // date
+registryTimeValidationType(Validation);             // time
+registryDatetimeValidationType(Validation);         // datetime
+
+export type iValidation = ReturnType<typeof createValidation>;
+export type iFormValidator = ReturnType<iValidation["useValidationParent"]>