fix: PullRefresh optimize transform performance & fix decimal point…

… deviation in ifShouldHandle
arco-design · Sep 21, 2023 · b808489 · b808489
1 parent e452e40
commit b808489
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 27 deletions.
diff --git a/packages/arcodesign/components/pull-refresh/android-pull-refresh.tsx b/packages/arcodesign/components/pull-refresh/android-pull-refresh.tsx
@@ -1,5 +1,4 @@
 import React, {
-    useState,
     useRef,
     forwardRef,
     Ref,
@@ -14,7 +13,7 @@ import Loading from '../loading';
 import { GlobalContext } from '../context-provider';
 import { PullRefreshRef, PullRefreshStatus, PullRefreshBasicProps } from './model';
 import { useCommonState, useAddScrollEvents, useCheckAsStart } from './hooks';
-import { getStyleWithVendor } from '../_helpers';
+import { setStyleWithVendor } from '../_helpers';
 
 const dampRateCalculate = (val: number, tipsHeight: number, dampRate: number) =>
     val > tipsHeight ? tipsHeight + (val - tipsHeight) / dampRate : val;
@@ -56,11 +55,7 @@ export const PullRefresh = forwardRef((props: PullRefreshBasicProps, ref: Ref<Pu
         onRefresh,
         allowPullWhenNotTop = false,
     } = props;
-    const [transition, setTransition] = useState<{
-        transform?: string;
-        transition?: string;
-    }>({});
-
+    const placeRef = useRef<HTMLDivElement>(null);
     const touchRef = useRef<{ start: number; x: number; y: number } | null>(null);
     const currentTranslateYRef = useRef(0);
     const onTouching = useRef(false);
@@ -98,26 +93,18 @@ export const PullRefresh = forwardRef((props: PullRefreshBasicProps, ref: Ref<Pu
 
     const scroll = (y: number, ms: number, callback?: () => void) => {
         if (y < 5) {
-            if (y < 0) {
-                currentTranslateYRef.current = 0;
-                return;
-            }
-            if (ms === 0) {
-                setTimeout(() => {
-                    setTransition({
-                        transition: 'all 0s',
-                    });
-                });
+            if (y < 0 || ms === 0) {
                 currentTranslateYRef.current = 0;
                 return;
             }
         }
         const translateY = dampRateCalculate(y, loosingHeight, dampRate);
         currentTranslateYRef.current = translateY;
-        setTransition({
-            transform: translateY ? `translateY(${translateY}px)` : '',
-            transition: `all ${ms / 1000}s`,
-        });
+        placeRef.current &&
+            setStyleWithVendor(placeRef.current, {
+                transform: translateY ? `translateY(${translateY}px) translateZ(0)` : '',
+                ...(ms ? { transition: `all ${ms / 1000}s` } : {}),
+            });
         setTimeout(() => {
             callback?.();
         }, ms);
@@ -130,6 +117,7 @@ export const PullRefresh = forwardRef((props: PullRefreshBasicProps, ref: Ref<Pu
             }
             loadingRef.current = false;
             setStatus(PullRefreshStatus.Static);
+            placeRef.current && setStyleWithVendor(placeRef.current, { transition: '' });
             callback();
         });
     };
@@ -249,10 +237,7 @@ export const PullRefresh = forwardRef((props: PullRefreshBasicProps, ref: Ref<Pu
             style={style}
             ref={domRef}
         >
-            <div
-                className={cls(`${prefixCls}-pull-refresh-place`)}
-                style={getStyleWithVendor(transition)}
-            >
+            <div className={cls(`${prefixCls}-pull-refresh-place`)} ref={placeRef}>
                 <div
                     className={cls(`${prefixCls}-pull-refresh-label`)}
                     ref={labelRef}

diff --git a/packages/arcodesign/components/pull-refresh/hooks.ts b/packages/arcodesign/components/pull-refresh/hooks.ts
@@ -101,7 +101,7 @@ export const useCheckAsStart = ({
     domRef: RefObject<HTMLDivElement>;
 }) => {
     const ifShouldHandle = useCallback(() => {
-        const domRefHeight = domRef.current?.getBoundingClientRect()?.height ?? 0;
+        const domRefHeight = domRef.current?.offsetHeight ?? 0;
         return (
             domRef.current &&
             !(

diff --git a/packages/arcodesign/components/pull-refresh/style/index.less b/packages/arcodesign/components/pull-refresh/style/index.less
@@ -51,7 +51,6 @@
     }
 
     &-place {
-        will-change: transform;
         position: relative;
         height: 100%;
     }