From 0c8550a0be32a32e85886edb83c0717f31ae5d67 Mon Sep 17 00:00:00 2001
From: taoyiyue <taoyiyue@bytedance.com>
Date: Fri, 4 Aug 2023 14:20:46 +0800
Subject: [PATCH] fix: `Form` bind this in form-item

---
 .../arcodesign/components/_helpers/hooks.ts   | 12 +++++++---
 .../arcodesign/components/form/form-item.tsx  | 24 +++++++++----------
 packages/common-widgets/utils/dom.ts          |  4 ++--
 packages/common-widgets/utils/is.ts           |  4 ++--
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/packages/arcodesign/components/_helpers/hooks.ts b/packages/arcodesign/components/_helpers/hooks.ts
index 25fbf13a..86090b6f 100644
--- a/packages/arcodesign/components/_helpers/hooks.ts
+++ b/packages/arcodesign/components/_helpers/hooks.ts
@@ -29,6 +29,12 @@ export function useListenResize(resizeHandler: () => void, deps: any[] = [], nee
  * @desc {en} Tips: Use in scenarios where asynchronous processing is not completed after unmount. It is not recommended to replace useState without brains
  * @param initialState 初始状态
  * @param initialState {en} Initial State
+ * @example
+ * ```
+ * import { useMountedState } from '@arco-design/mobile-react/esm/_helpers/hooks';
+ *
+ * const [scrollValue, setScrollValue] = useMountedState(value);
+ * ```
  */
 export function useMountedState<S>(initialState: S | (() => S)) {
     const [state, setState] = useState<S>(initialState);
@@ -431,13 +437,13 @@ export function usePreventBodyScroll(
     }, [visible]);
 }
 
-export const useProgress = (
+export function useProgress(
     mountedTransition: boolean,
     percentage: number,
     duration: number,
     mountedBezier: BezierType,
     step: number,
-): [number, boolean] => {
+): [number, boolean] {
     const [currentPercentage, setCurrentPercentage] = useState(0);
     const [transitionControl, setTransitionControl] = useState(false);
     const [count, setCount] = useState(0);
@@ -471,7 +477,7 @@ export const useProgress = (
     }, [count, percentage, step]);
 
     return [currentPercentage, transitionControl];
-};
+}
 
 export function useSingleAndDoubleClick(
     onClick: (e: React.MouseEvent) => void,
diff --git a/packages/arcodesign/components/form/form-item.tsx b/packages/arcodesign/components/form/form-item.tsx
index 4c09b98c..5af065c9 100644
--- a/packages/arcodesign/components/form/form-item.tsx
+++ b/packages/arcodesign/components/form/form-item.tsx
@@ -59,7 +59,7 @@ class FormItemInner extends PureComponent<IFormItemInnerProps, IFromItemInnerSta
         this.destroyField();
     }
 
-    onValueChange(preStore: FieldItem, curStore: FieldItem) {
+    onValueChange = (preStore: FieldItem, curStore: FieldItem) => {
         this._touched = true;
         const { shouldUpdate } = this.props;
         if (typeof shouldUpdate === 'function') {
@@ -67,17 +67,17 @@ class FormItemInner extends PureComponent<IFormItemInnerProps, IFromItemInnerSta
             return;
         }
         this.forceUpdate();
-    }
+    };
 
-    getFieldError() {
+    getFieldError = () => {
         return this._errors;
-    }
+    };
 
-    isFieldTouched() {
+    isFieldTouched = () => {
         return this._touched;
-    }
+    };
 
-    validateField(): Promise<IFieldError> {
+    validateField = (): Promise<IFieldError> => {
         const { validateMessages } = this.context;
         const { getFieldValue } = this.context.form;
         const { field, rules, onValidateStatusChange } = this.props;
@@ -107,14 +107,14 @@ class FormItemInner extends PureComponent<IFormItemInnerProps, IFromItemInnerSta
             });
         }
         return Promise.resolve({ errors: [], warnings: [], value, field, dom: null });
-    }
+    };
 
-    setFieldData(value: FieldValue) {
+    setFieldData = (value: FieldValue) => {
         const { field } = this.props;
         const { setFieldValue } = this.context.form;
         setFieldValue(field, value);
         this.validateField();
-    }
+    };
 
     innerTriggerFunction = (_, value, ...args) => {
         this.setFieldData(value);
@@ -132,13 +132,13 @@ class FormItemInner extends PureComponent<IFormItemInnerProps, IFromItemInnerSta
         }
     };
 
-    innerClearFunction(...args) {
+    innerClearFunction = (...args) => {
         const { children } = this.props;
         this.setFieldData('');
         if (children.props?.onClear) {
             children.props?.onClear(...args);
         }
-    }
+    };
 
     renderChildren() {
         const {
diff --git a/packages/common-widgets/utils/dom.ts b/packages/common-widgets/utils/dom.ts
index 097b29d4..a2f5afc2 100644
--- a/packages/common-widgets/utils/dom.ts
+++ b/packages/common-widgets/utils/dom.ts
@@ -43,7 +43,7 @@ export function freeEleScroll(
  * @param parentEl 父节点
  * @param childrenEl 子节点
  */
-export const isContains = (parentEl: HTMLElement | null, childrenEl: HTMLElement | null) => {
+export function isContains(parentEl: HTMLElement | null, childrenEl: HTMLElement | null) {
     if (!parentEl || !childrenEl) return false;
     if (parentEl.contains) {
         return parentEl.contains(childrenEl);
@@ -56,7 +56,7 @@ export const isContains = (parentEl: HTMLElement | null, childrenEl: HTMLElement
         parent = parent.parentNode as HTMLElement;
     }
     return false;
-};
+}
 
 export function execRAF(fn) {
     try {
diff --git a/packages/common-widgets/utils/is.ts b/packages/common-widgets/utils/is.ts
index e547d6ea..38787365 100644
--- a/packages/common-widgets/utils/is.ts
+++ b/packages/common-widgets/utils/is.ts
@@ -34,7 +34,7 @@ export function isEmptyArray(obj: Array<unknown>): boolean {
     return isArray(obj) && !obj?.length;
 }
 
-export const isDeepEqual = (obj: any, sub: any): boolean => {
+export function isDeepEqual(obj: any, sub: any): boolean {
     if (typeof obj !== 'object' || typeof sub !== 'object' || obj === null || sub === null) {
         return obj === sub;
     }
@@ -49,4 +49,4 @@ export const isDeepEqual = (obj: any, sub: any): boolean => {
         if (!isDeepEqual(obj[key], sub[key])) return false;
     }
     return true;
-};
+}