react-native-system-ui 0.0.7 → 1.0.1

package/dist/es/components/form/Form.js

@@ -1,33 +1,32 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { View } from 'react-native';
 import { shallowEqualObject } from '../../utils';
 import { isPromiseLike } from '../../utils/promise';
 import { isNumber, isString, isText } from '../../utils/validate';
 import { FORM_ALL_FIELDS_KEY, getValueByName, normalizeTrigger, serializeNamePath, setValueByName } from './utils';
+import { useLocale } from '../config-provider/useLocale';
 export const FormContext = /*#__PURE__*/React.createContext(null);
-const runRuleValidation = (rule, value, values) => {
-  const message = rule.message ?? '表单验证未通过';
+const runRuleValidation = (rule, value, values, fallbackMsg) => {
+  const msg = rule.message ?? fallbackMsg ?? 'Validation failed';
   const empty = value == null || value === '' || Array.isArray(value) && value.length === 0;
-  if (rule.required && (empty || rule.whitespace && isString(value) && value.trim().length === 0)) {
-    return message;
-  }
+  if (rule.required && (empty || rule.whitespace && isString(value) && value.trim().length === 0)) return msg;
   if (empty) return null;
-  if (rule.pattern && isString(value) && !rule.pattern.test(value)) return message;
+  if (rule.pattern && isString(value) && !rule.pattern.test(value)) return msg;
   if (rule.len !== undefined || rule.min !== undefined || rule.max !== undefined) {
-    const length = isNumber(value) ? value : isString(value) || Array.isArray(value) ? value.length : 0;
-    if (rule.len !== undefined && length !== rule.len) return message;
-    if (rule.min !== undefined && length < rule.min) return message;
-    if (rule.max !== undefined && length > rule.max) return message;
+    const len = isNumber(value) ? value : isString(value) || Array.isArray(value) ? value.length : 0;
+    if (rule.len !== undefined && len !== rule.len) return msg;
+    if (rule.min !== undefined && len < rule.min) return msg;
+    if (rule.max !== undefined && len > rule.max) return msg;
   }
   if (!rule.validator) return null;
-  const handle = result => isString(result) ? result : result === false ? message : null;
-  const result = rule.validator(value, values);
-  return isPromiseLike(result) ? result.then(handle) : handle(result);
+  const handleResult = r => isString(r) ? r : r === false ? msg : null;
+  const res = rule.validator(value, values);
+  return isPromiseLike(res) ? res.then(handleResult) : handleResult(res);
 };
-const InternalForm = /*#__PURE__*/React.forwardRef((props, ref) => {
+const InternalFormImpl = (props, ref) => {
   const {
-    initialValues: initialValuesProp,
+    initialValues,
     colon,
     labelWidth,
     showValidateMessage = true,
@@ -38,241 +37,224 @@ const InternalForm = /*#__PURE__*/React.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  const defaultInitialValuesRef = useRef({});
-  const mergedInitialValues = initialValuesProp ?? defaultInitialValuesRef.current;
-  const [, setFormVersion] = useState(0);
-  const errorsRef = useRef({});
-  const lastInitialValuesRef = useRef(mergedInitialValues);
-  const fieldsRef = useRef({});
-  const dependencyGraphRef = useRef(new Map());
-  const valuesRef = useRef(mergedInitialValues);
-  const validationSeqRef = useRef({});
-  const subscribersRef = useRef(new Set());
-  const notify = useCallback((changedValues, nextValues) => {
-    subscribersRef.current.forEach(listener => listener(changedValues, nextValues));
+  const locale = useLocale();
+  const defaultValuesRef = useRef({}),
+    errorsRef = useRef({}),
+    lastInitialValuesRef = useRef(initialValues ?? defaultValuesRef.current),
+    fieldsRef = useRef({}),
+    dependencyGraphRef = useRef(new Map()),
+    valuesRef = useRef(initialValues ?? defaultValuesRef.current),
+    validationSeqRef = useRef({}),
+    subscribersRef = useRef(new Set()),
+    onValuesChangeRef = useRef(onValuesChange),
+    onFinishRef = useRef(onFinish);
+  onValuesChangeRef.current = onValuesChange;
+  onFinishRef.current = onFinish;
+  const mergedInitialValues = initialValues ?? defaultValuesRef.current;
+  const [, setVersion] = useState(0);
+  const notify = useCallback((changedValues, newValues) => {
+    subscribersRef.current.forEach(l => l(changedValues, newValues));
   }, []);
   useEffect(() => {
-    if (shallowEqualObject(lastInitialValuesRef.current, mergedInitialValues)) {
-      return;
-    }
+    if (shallowEqualObject(lastInitialValuesRef.current, mergedInitialValues)) return;
     lastInitialValuesRef.current = mergedInitialValues;
     valuesRef.current = mergedInitialValues;
     errorsRef.current = {};
-    setFormVersion(version => version + 1);
+    setVersion(v => v + 1);
     notify({
       [FORM_ALL_FIELDS_KEY]: true
     }, mergedInitialValues);
   }, [mergedInitialValues, notify]);
-  const setFieldErrors = useCallback((name, nextErrors) => {
+  const setFieldErrors = useCallback((name, newErrors) => {
     const key = serializeNamePath(name);
-    const prevErrors = errorsRef.current[key];
-    if (!nextErrors.length) {
-      if (!prevErrors) return;
-      const clone = {
+    const prevE = errorsRef.current[key];
+    if (!newErrors.length) {
+      if (!prevE) return;
+      const cl = {
         ...errorsRef.current
       };
-      delete clone[key];
-      errorsRef.current = clone;
+      delete cl[key];
+      errorsRef.current = cl;
       notify({
         [key]: getValueByName(valuesRef.current, name)
       }, valuesRef.current);
       return;
     }
-    if (prevErrors?.[0] === nextErrors[0] && prevErrors.length === nextErrors.length) {
-      return;
-    }
+    if (prevE?.[0] === newErrors[0] && prevE.length === newErrors.length) return;
     errorsRef.current = {
       ...errorsRef.current,
-      [key]: nextErrors
+      [key]: newErrors
     };
     notify({
       [key]: getValueByName(valuesRef.current, name)
     }, valuesRef.current);
   }, [notify]);
-  const registerField = useCallback((name, options) => {
+  const registerField = useCallback((name, opts) => {
     const key = serializeNamePath(name);
     const prev = fieldsRef.current[key];
     if (prev?.dependencies?.length) {
       for (const dep of prev.dependencies) {
-        const depKey = serializeNamePath(dep);
-        const set = dependencyGraphRef.current.get(depKey);
-        if (!set) continue;
-        set.delete(key);
-        if (!set.size) dependencyGraphRef.current.delete(depKey);
+        const dk = serializeNamePath(dep);
+        const s = dependencyGraphRef.current.get(dk);
+        if (!s) continue;
+        s.delete(key);
+        if (!s.size) dependencyGraphRef.current.delete(dk);
       }
     }
     fieldsRef.current[key] = {
-      ...options,
+      ...opts,
       name
     };
-    if (options.dependencies?.length) {
-      for (const dep of options.dependencies) {
-        const depKey = serializeNamePath(dep);
-        const set = dependencyGraphRef.current.get(depKey);
-        if (set) {
-          set.add(key);
-        } else {
-          dependencyGraphRef.current.set(depKey, new Set([key]));
-        }
+    if (opts.dependencies?.length) {
+      for (const dep of opts.dependencies) {
+        const dk = serializeNamePath(dep);
+        const s = dependencyGraphRef.current.get(dk);
+        if (s) s.add(key);else dependencyGraphRef.current.set(dk, new Set([key]));
       }
     }
-    if (options.initialValue !== undefined) {
-      const existsInInitial = getValueByName(lastInitialValuesRef.current, name);
-      if (existsInInitial === undefined) {
-        lastInitialValuesRef.current = setValueByName(lastInitialValuesRef.current, name, options.initialValue);
-      }
-      const existsInState = getValueByName(valuesRef.current, name);
-      if (existsInState === undefined) {
-        const next = setValueByName(valuesRef.current, name, options.initialValue);
+    if (opts.initialValue !== undefined) {
+      const exInit = getValueByName(lastInitialValuesRef.current, name);
+      if (exInit === undefined) lastInitialValuesRef.current = setValueByName(lastInitialValuesRef.current, name, opts.initialValue);
+      const exState = getValueByName(valuesRef.current, name);
+      if (exState === undefined) {
+        const next = setValueByName(valuesRef.current, name, opts.initialValue);
         valuesRef.current = next;
         notify({
-          [key]: options.initialValue
+          [key]: opts.initialValue
         }, next);
       }
     }
     return () => {
-      const current = fieldsRef.current[key];
+      const cur = fieldsRef.current[key];
       delete fieldsRef.current[key];
-      if (current?.dependencies?.length) {
-        for (const dep of current.dependencies) {
-          const depKey = serializeNamePath(dep);
-          const set = dependencyGraphRef.current.get(depKey);
-          if (!set) continue;
-          set.delete(key);
-          if (!set.size) dependencyGraphRef.current.delete(depKey);
+      if (cur?.dependencies?.length) {
+        for (const dep of cur.dependencies) {
+          const dk = serializeNamePath(dep);
+          const s = dependencyGraphRef.current.get(dk);
+          if (!s) continue;
+          s.delete(key);
+          if (!s.size) dependencyGraphRef.current.delete(dk);
         }
       }
+      ;
       setFieldErrors(name, []);
     };
-  }, [setFieldErrors]);
-  const runFieldValidation = useCallback(async (name, trigger, valueOverride, valuesOverride) => {
+  }, [notify, setFieldErrors]);
+  const localeRef = useRef(locale);
+  localeRef.current = locale;
+  const validateField = useCallback(async (name, trigger, valueOverride, valuesOverride) => {
     const key = serializeNamePath(name);
-    const validationSeq = (validationSeqRef.current[key] ?? 0) + 1;
-    validationSeqRef.current[key] = validationSeq;
-    const fieldOptions = fieldsRef.current[key];
-    const fieldRules = fieldOptions?.rules ?? [];
-    if (!fieldRules.length) {
+    const seq = (validationSeqRef.current[key] ?? 0) + 1;
+    validationSeqRef.current[key] = seq;
+    const fOpts = fieldsRef.current[key];
+    const fRules = fOpts?.rules ?? [];
+    if (!fRules.length) {
       setFieldErrors(name, []);
       return true;
     }
-    let activeRules = trigger ? fieldRules.filter(rule => {
-      const ruleTrigger = rule.validateTrigger ?? fieldOptions.validateTrigger;
-      return !ruleTrigger || normalizeTrigger(ruleTrigger).includes(trigger);
-    }) : fieldRules;
-    if (!activeRules.length) {
+    let appRules = trigger ? fRules.filter(r => {
+      const rt = r.validateTrigger ?? fOpts.validateTrigger;
+      return !rt || normalizeTrigger(rt).includes(trigger);
+    }) : fRules;
+    if (!appRules.length) {
       if (!errorsRef.current[key]?.length) return true;
-      activeRules = fieldRules;
+      appRules = fRules;
     }
-    const currentValues = valuesOverride ?? valuesRef.current;
-    const value = valueOverride ?? getValueByName(currentValues, name);
-    for (const rule of activeRules) {
-      const result = runRuleValidation(rule, value, currentValues);
-      const error = isPromiseLike(result) ? await result : result;
-      if (validationSeqRef.current[key] !== validationSeq) {
-        return true;
-      }
-      if (error) {
-        setFieldErrors(name, [error]);
+    const curVals = valuesOverride ?? valuesRef.current;
+    const val = valueOverride ?? getValueByName(curVals, name);
+    const fbMsg = localeRef.current?.vanForm?.validationFailed;
+    for (const rule of appRules) {
+      const result = runRuleValidation(rule, val, curVals, fbMsg);
+      const err = isPromiseLike(result) ? await result : result;
+      if (validationSeqRef.current[key] !== seq) return true;
+      if (err) {
+        setFieldErrors(name, [err]);
         return false;
       }
     }
-    if (validationSeqRef.current[key] !== validationSeq) {
-      return true;
-    }
+    if (validationSeqRef.current[key] !== seq) return true;
     setFieldErrors(name, []);
     return true;
   }, [setFieldErrors]);
   const validateFields = useCallback(async names => {
-    const fieldNames = names ?? Object.values(fieldsRef.current).map(item => item.name);
-    const results = await Promise.all(fieldNames.map(name => runFieldValidation(name)));
-    const hasError = results.some(result => !result);
-    if (hasError) {
-      throw errorsRef.current;
-    }
+    const fNames = names ?? Object.values(fieldsRef.current).map(it => it.name);
+    const results = await Promise.all(fNames.map(n => validateField(n)));
+    if (results.some(r => !r)) throw errorsRef.current;
     return valuesRef.current;
-  }, [runFieldValidation]);
-  const setFieldValue = useCallback((name, value, trigger) => {
-    const nameKey = serializeNamePath(name);
-    const prev = valuesRef.current;
-    const prevValue = getValueByName(prev, name);
-    if (prevValue === value) return;
-    const next = setValueByName(prev, name, value);
-    valuesRef.current = next;
-    onValuesChange?.(next, nameKey, value);
-    runFieldValidation(name, trigger, value, next);
-    const dependents = dependencyGraphRef.current.get(nameKey);
-    if (dependents?.size) {
-      for (const dependentKey of dependents) {
-        const meta = fieldsRef.current[dependentKey];
-        if (!meta) continue;
-        runFieldValidation(meta.name, trigger, getValueByName(next, meta.name), next);
+  }, [validateField]);
+  const validateWithDependencies = useCallback((key, name, trigger, val, vals) => {
+    validateField(name, trigger, val, vals);
+    const deps = dependencyGraphRef.current.get(key);
+    if (deps?.size) {
+      for (const dk of deps) {
+        const m = fieldsRef.current[dk];
+        if (m) validateField(m.name, trigger, getValueByName(vals, m.name), vals);
       }
     }
+  }, [validateField]);
+  const setFieldValue = useCallback((name, val, trigger) => {
+    const nKey = serializeNamePath(name);
+    const prev = valuesRef.current;
+    if (getValueByName(prev, name) === val) return;
+    const next = setValueByName(prev, name, val);
+    valuesRef.current = next;
+    onValuesChangeRef.current?.(next, nKey, val);
+    validateWithDependencies(nKey, name, trigger, val, next);
     notify({
-      [nameKey]: value
+      [nKey]: val
     }, next);
-  }, [notify, onValuesChange, runFieldValidation]);
-  const formApi = {
+  }, [notify, validateWithDependencies]);
+  const formApi = useMemo(() => ({
     submit: async () => {
       try {
-        const result = await validateFields();
-        onFinish?.(result);
-        return result;
-      } catch (error) {
+        const res = await validateFields();
+        onFinishRef.current?.(res);
+        return res;
+      } catch {
         return undefined;
       }
     },
     getFieldsValue: () => valuesRef.current,
-    setFieldsValue: (next, options) => {
-      const shouldValidate = options?.validate ?? false;
+    setFieldsValue: (next, opts) => {
+      const sV = opts?.validate ?? false;
       const prev = valuesRef.current;
-      let merged = prev;
-      const changed = {};
-      Object.keys(next).forEach(key => {
-        const newVal = next[key];
-        if (getValueByName(merged, key) === newVal) return;
-        changed[key] = newVal;
-        merged = setValueByName(merged, key, newVal);
-        onValuesChange?.(merged, key, newVal);
-        if (shouldValidate) {
-          runFieldValidation(key, undefined, newVal, merged);
-          const dependents = dependencyGraphRef.current.get(key);
-          if (dependents?.size) {
-            for (const dependentKey of dependents) {
-              const meta = fieldsRef.current[dependentKey];
-              if (!meta) continue;
-              runFieldValidation(meta.name, undefined, getValueByName(merged, meta.name), merged);
-            }
-          }
-        }
+      let m = prev;
+      const ch = {};
+      Object.keys(next).forEach(k => {
+        const nv = next[k];
+        if (getValueByName(m, k) === nv) return;
+        ch[k] = nv;
+        m = setValueByName(m, k, nv);
+        onValuesChangeRef.current?.(m, k, nv);
+        if (sV) validateWithDependencies(k, k, undefined, nv, m);
       });
-      if (merged === prev) return;
-      valuesRef.current = merged;
-      notify(changed, merged);
+      if (m === prev) return;
+      valuesRef.current = m;
+      notify(ch, m);
     },
     resetFields: () => {
-      let next = lastInitialValuesRef.current;
-      Object.values(fieldsRef.current).forEach(meta => {
-        if (meta.initialValue === undefined) return;
-        if (getValueByName(next, meta.name) !== undefined) return;
-        next = setValueByName(next, meta.name, meta.initialValue);
+      let n = lastInitialValuesRef.current;
+      Object.values(fieldsRef.current).forEach(mem => {
+        if (mem.initialValue === undefined) return;
+        if (getValueByName(n, mem.name) !== undefined) return;
+        n = setValueByName(n, mem.name, mem.initialValue);
       });
-      valuesRef.current = next;
+      valuesRef.current = n;
       errorsRef.current = {};
       notify({
         [FORM_ALL_FIELDS_KEY]: true
-      }, next);
+      }, n);
     },
     validateFields,
     getFieldError: name => errorsRef.current[serializeNamePath(name)] ?? []
-  };
+  }), [validateFields, validateWithDependencies, notify]);
   useImperativeHandle(ref, () => formApi, [formApi]);
-  const contextValue = {
+  const ctxVal = useMemo(() => ({
     getFieldValue: name => getValueByName(valuesRef.current, name),
     setFieldValue,
     registerField,
     getFieldError: name => errorsRef.current[serializeNamePath(name)],
-    validateField: (name, trigger) => runFieldValidation(name, trigger),
+    validateField: (name, trigger) => validateField(name, trigger),
     getFieldsValue: () => valuesRef.current,
     subscribe: listener => {
       subscribersRef.current.add(listener);
@@ -282,56 +264,56 @@ const InternalForm = /*#__PURE__*/React.forwardRef((props, ref) => {
     colon,
     labelWidth,
     showValidateMessage
-  };
+  }), [setFieldValue, registerField, validateField, formApi, colon, labelWidth, showValidateMessage]);
   return /*#__PURE__*/React.createElement(FormContext.Provider, {
-    value: contextValue
+    value: ctxVal
   }, /*#__PURE__*/React.createElement(View, _extends({
     style: style
   }, rest), children, footer));
-});
-InternalForm.displayName = 'Form';
+};
+const InternalFormRef = /*#__PURE__*/React.forwardRef(InternalFormImpl);
+const InternalForm = /*#__PURE__*/React.memo(InternalFormRef);
 export const useWatch = (name, formRef) => {
-  const context = useContext(FormContext);
-  const names = name === undefined ? undefined : !Array.isArray(name) ? [name] : name.length && isText(name[0]) ? [name] : name;
-  const getSnapshot = useCallback(allValues => {
-    const source = allValues ?? context?.getFieldsValue?.() ?? formRef?.current?.getFieldsValue?.() ?? {};
-    if (!names) return source;
-    if (names.length === 1) return getValueByName(source, names[0]);
+  const ctx = useContext(FormContext);
+  const nPaths = name === undefined ? undefined : !Array.isArray(name) ? [name] : name.length && isText(name[0]) ? [name] : name;
+  const getValue = useCallback(allValues => {
+    const src = allValues ?? ctx?.getFieldsValue?.() ?? formRef?.current?.getFieldsValue?.() ?? {};
+    if (!nPaths) return src;
+    if (nPaths.length === 1) return getValueByName(src, nPaths[0]);
     const picked = {};
-    for (const key of names) picked[serializeNamePath(key)] = getValueByName(source, key);
+    for (const k of nPaths) picked[serializeNamePath(k)] = getValueByName(src, k);
     return picked;
-  }, [context, formRef, names]);
-  const [value, setValue] = useState(() => getSnapshot());
+  }, [ctx, formRef, nPaths]);
+  const [val, setVal] = useState(() => getValue());
   useEffect(() => {
-    if (!context?.subscribe) return undefined;
-    return context.subscribe((changed, all) => {
-      if (FORM_ALL_FIELDS_KEY in changed) {
-        setValue(getSnapshot(all));
+    if (!ctx?.subscribe) return undefined;
+    return ctx.subscribe((ch, all) => {
+      if (FORM_ALL_FIELDS_KEY in ch) {
+        setVal(getValue(all));
         return;
       }
-      if (!names || names.some(key => serializeNamePath(key) in changed)) {
-        setValue(getSnapshot(all));
-      }
+      ;
+      if (!nPaths || nPaths.some(k => serializeNamePath(k) in ch)) setVal(getValue(all));
     });
-  }, [context, getSnapshot, names]);
+  }, [ctx, getValue, nPaths]);
   useEffect(() => {
-    setValue(getSnapshot());
-  }, [getSnapshot]);
-  return value;
+    setVal(getValue());
+  }, [getValue]);
+  return val;
 };
 export const FormSubscribe = ({
   to,
   children
 }) => {
-  const context = useContext(FormContext);
-  const [changed, setChanged] = useState({});
+  const ctx = useContext(FormContext);
+  const [chVals, setChVals] = useState({});
   useEffect(() => {
-    if (!context?.subscribe) return undefined;
-    return context.subscribe(next => {
-      if (to && !(FORM_ALL_FIELDS_KEY in next) && !Object.keys(next).some(key => to.includes(key))) return;
-      setChanged(next);
+    if (!ctx?.subscribe) return undefined;
+    return ctx.subscribe(n => {
+      if (to && !(FORM_ALL_FIELDS_KEY in n) && !Object.keys(n).some(k => to.includes(k))) return;
+      setChVals(n);
     });
-  }, [context, to]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children(changed, context?.form || null));
+  }, [ctx, to]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children(chVals, ctx?.form || null));
 };
 export default InternalForm;