opt of noStyle message

ant-design · Mar 19, 2020 · f96d69c · f96d69c
1 parent 289d66a
commit f96d69c
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 13 deletions.
diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx
@@ -12,7 +12,7 @@ import warning from '../_util/warning';
 import FormItemLabel, { FormItemLabelProps } from './FormItemLabel';
 import FormItemInput, { FormItemInputProps } from './FormItemInput';
 import { FormContext, FormItemContext } from './context';
-import { toArray, getFieldId } from './util';
+import { toArray, getFieldId, useFrameState } from './util';
 
 const ValidateStatuses = tuple('success', 'warning', 'error', 'validating', '');
 export type ValidateStatus = typeof ValidateStatuses[number];
@@ -86,18 +86,19 @@ function FormItem(props: FormItemProps): React.ReactElement {
   const formContext = React.useContext(FormContext);
   const { updateItemErrors } = React.useContext(FormItemContext);
   const [domErrorVisible, innerSetDomErrorVisible] = React.useState(!!help);
-  const [inlineErrors, innerSetInlineErrors] = React.useState<Record<string, string[]>>({});
+  // const [inlineErrors, innerSetInlineErrors] = React.useState<Record<string, string[]>>({});
+  const [inlineErrors, setInlineErrors] = useFrameState<Record<string, string[]>>({});
 
   function setDomErrorVisible(visible: boolean) {
     if (!destroyRef.current) {
       innerSetDomErrorVisible(visible);
     }
   }
-  function setInlineErrors(errors: Record<string, string[]>) {
-    if (!destroyRef.current) {
-      innerSetInlineErrors(errors);
-    }
-  }
+  // function setInlineErrors(errors: Record<string, string[]>) {
+  //   if (!destroyRef.current) {
+  //     innerSetInlineErrors(errors);
+  //   }
+  // }
 
   const { name: formName } = formContext;
   const hasName = hasValidName(name);
@@ -121,12 +122,10 @@ function FormItem(props: FormItemProps): React.ReactElement {
     ? updateItemErrors
     : (subName: string, subErrors: string[]) => {
         if (!isEqual(inlineErrors[subName], subErrors)) {
-          Promise.resolve().then(() => {
-            setInlineErrors({
-              ...inlineErrors,
-              [subName]: subErrors,
-            });
-          });
+          setInlineErrors(prevInlineErrors => ({
+            ...prevInlineErrors,
+            [subName]: subErrors,
+          }));
         }
       };
 

diff --git a/components/form/util.ts b/components/form/util.ts
@@ -99,3 +99,42 @@ export function useForm(form?: FormInstance): [FormInstance] {
 
   return [wrapForm];
 }
+
+type Updater<ValueType> = (prev?: ValueType) => ValueType;
+
+export function useFrameState<ValueType>(
+  defaultValue: ValueType,
+): [ValueType, (updater: Updater<ValueType>) => void] {
+  const [value, setValue] = React.useState(defaultValue);
+  const frameRef = React.useRef<number | null>(null);
+  const batchRef = React.useRef<Updater<ValueType>[]>([]);
+
+  React.useEffect(
+    () => () => {
+      cancelAnimationFrame(frameRef.current!);
+    },
+    [],
+  );
+
+  function setFrameValue(updater: Updater<ValueType>) {
+    if (frameRef.current === null) {
+      batchRef.current = [];
+      frameRef.current = requestAnimationFrame(() => {
+        frameRef.current = null;
+        setValue(prevValue => {
+          let current = prevValue;
+
+          batchRef.current.forEach(func => {
+            current = func(current);
+          });
+
+          return current;
+        });
+      });
+    }
+
+    batchRef.current.push(updater);
+  }
+
+  return [value, setFrameValue];
+}