plain-design 0.0.97 → 1.0.0-beta.2

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

@@ -0,0 +1,274 @@
+import {computed, inject, onBeforeUnmount, provide, reactive, ref, toRaw} from "plain-design-composition";
+import {checkRules, createFormItemRules, eFormValidateTrigger, iFormItemValidatePropsType, iFormValidatePropsType, iRegistrationValidator, isMatchTrigger, iValidateRule, iValidateState} from "./validate.utils";
+import {PlainObject} from "plain-utils/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"] }) => {
+
+    /**
+     * 从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[] => ruleGetters.value.map((i) => i()).flat(1));
+
+    /**
+     * 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"]>

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

@@ -0,0 +1,121 @@
+import {eFormValidateMode, eFormValidateTrigger, getRuleValue, iFormItemValidatePropsType, isRuleRequired, iValidateRule} from "./validate.utils";
+import {computed, inject, onBeforeUnmount, watch, watchEffect} from "plain-design-composition";
+import {FORM_VALIDATION_PROVIDER, useFormValidation} from "./useFormValidation";
+import {Validation} from "./createValidation";
+import {createEffects} from "plain-utils/utils/createEffects";
+
+/**
+ * 抽离FormItem中的校验逻辑
+ * @author  韦胜健
+ * @date    2022.11.5 23:41
+ */
+export function useFormItemValidation({ props }: { props: iFormItemValidatePropsType }) {
+
+  /*Form校验*/
+  const formValidation = inject<ReturnType<typeof useFormValidation>>(FORM_VALIDATION_PROVIDER)!;
+
+  /*提交校验信息*/
+  const childValidation = Validation.useValidationChild(props);
+
+  /**
+   * 当前是否必填
+   * @author  韦胜健
+   * @date    2022.11.5 23:39
+   */
+  const isRequired = computed(() => childValidation.getRules().some(rule => isRuleRequired(rule, formValidation.props.modelValue)));
+
+  /**
+   * 当前的校验不通过的信息
+   * @author  韦胜健
+   * @date    2022/8/22 23:48
+   */
+  const validateMessage = computed((): 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 getWatchData = (rule: iValidateRule) => {
+    if (formValidation.props.validateMode === eFormValidateMode.table) {return null;}
+    const { field, label, valueGetter } = rule;
+    if (!rule.field && !rule.valueGetter) {return null;}
+    return {
+      label,
+      field,
+      value: getRuleValue({ formData: formValidation.props.modelValue, field, validateValueGetter: valueGetter, formItemProps: props }),
+    };
+  };
+
+  /**
+   * 监听rule对应的值变化
+   * @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);
+      },
+      (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 });
+      }
+    );
+    return () => unwatch();
+  };
+
+  (function validateOnChange() {
+    /*监听outerRule的值变化然后触发校验*/
+    onBeforeUnmount(watchRuleValueChange(() => childValidation.formItemRules.outerRule.value));
+    [
+      /*监听props.rules的值变化然后触发校验*/
+      childValidation.formItemRules.formRules,
+      /*监听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());
+    });
+  })();
+
+  return { formValidation, childValidation, isRequired, validateMessage };
+}

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

@@ -0,0 +1,132 @@
+import {eFormValidateMode, eFormValidateTrigger, getValidateResultMessage, iFormValidatePropsType, iValidateState} from "./validate.utils";
+import {provide, reactive} from "plain-design-composition";
+import {$message} from "../../$message";
+import {Validation} from "./createValidation";
+
+/**
+ * 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, }) => {
+      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();
+      }
+    },
+  };
+
+  const refer = {
+    props,
+    state,
+    loading,
+    methods,
+    handler,
+  };
+
+  provide(FORM_VALIDATION_PROVIDER, refer);
+
+  return refer;
+}