fix: chain selector scroll index OK-31474 OK-31543 (#5602)

OneKeyHQ · Aug 21, 2024 · 42c038e · 42c038e
1 parent bfe3e26
commit 42c038e
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 25 deletions.
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
@@ -33,7 +33,7 @@
     "@onekeyfe/react-native-animated-charts": "1.0.0",
     "@onekeyfe/react-native-ble-plx": "3.0.0",
     "@onekeyfe/react-native-lite-card": "1.0.9",
-    "@onekeyfe/react-native-tab-page-view": "1.0.13",
+    "@onekeyfe/react-native-tab-page-view": "1.0.14",
     "@onekeyhq/components": "*",
     "@onekeyhq/kit": "*",
     "@onekeyhq/shared": "*",

diff --git a/packages/components/src/layouts/TabView/StickyTabComponent/index.native.tsx b/packages/components/src/layouts/TabView/StickyTabComponent/index.native.tsx
@@ -26,6 +26,7 @@ export const TabComponent = (
     tabContentContainerStyle,
     style,
     onRefresh: onRefreshCallBack,
+    initialHeaderHeight = 209,
   }: ITabProps,
   // fix missing forwardRef warnings.
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -79,7 +80,7 @@ export const TabComponent = (
       ? color.replace(/#(.{6})(.{2})/, '#$2$1')
       : color;
   }, []);
-  const [headerHeight, setHeaderHeight] = useState(209);
+  const [headerHeight, setHeaderHeight] = useState(initialHeaderHeight);
   const values = useMemo(
     () => data.map((item) => ({ name: item.title, label: item.title })),
     [data],

diff --git a/packages/components/src/layouts/TabView/StickyTabComponent/types.tsx b/packages/components/src/layouts/TabView/StickyTabComponent/types.tsx
@@ -23,4 +23,5 @@ export interface ITabProps extends IScrollViewProps {
   onSelectedPageIndex?: (pageIndex: number) => void;
   shouldSelectedPageIndex?: (pageIndex: number) => boolean;
   onRefresh?: () => void;
+  initialHeaderHeight?: number;
 }
diff --git a/...ges/kit/src/views/ChainSelector/components/EditableChainSelector/ChainSelectorContent.tsx b/...ges/kit/src/views/ChainSelector/components/EditableChainSelector/ChainSelectorContent.tsx
@@ -221,7 +221,7 @@ export const EditableChainSelectorContent = ({
   }, [sections, showAllNetworkHeader]);
 
   const initialScrollIndex = useMemo(() => {
-    if (searchText.trim()) {
+    if (searchText.trim() || tempFrequentlyUsedItems !== frequentlyUsedItems) {
       return undefined;
     }
     let _initialScrollIndex:
@@ -267,6 +267,7 @@ export const EditableChainSelectorContent = ({
       return { sectionIndex: 0, itemIndex: undefined };
     }
     return _initialScrollIndex;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sections, networkId, searchText]);
 
   const context = useMemo<IEditableChainSelectorContext>(

diff --git a/packages/kit/src/views/CloudBackup/components/useBackupEntryStatus.tsx b/packages/kit/src/views/CloudBackup/components/useBackupEntryStatus.tsx
@@ -42,7 +42,7 @@ export function useBackupEntryStatus() {
       // @ts-ignore
       // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
       const message = `${e?.message ?? e}`;
-      if (!message.endsWith('Sign in action canceled')) {
+      if (!message.endsWith('Sign in action cancelled')) {
         Toast.error({
           title: `google auth failed ${message}`,
         });

diff --git a/packages/kit/src/views/Market/MarketHome.tsx b/packages/kit/src/views/Market/MarketHome.tsx
@@ -141,25 +141,39 @@ function MarketHome() {
     });
     console.log('选中', index, index === 0 ? 1 : 0);
   }, []);
+  const renderTabContainer = useCallback(() => {
+    if (!tabConfig.length) {
+      return (
+        <Stack flex={1} ai="center" jc="center">
+          <Spinner size="large" />
+        </Stack>
+      );
+    }
+    if (platformEnv.isNativeAndroid) {
+      return (
+        <Tab
+          disableRefresh
+          initialHeaderHeight={0}
+          data={tabConfig}
+          onSelectedPageIndex={handleSelectedPageIndex}
+        />
+      );
+    }
+    return (
+      <Tab.Page
+        data={tabConfig}
+        contentItemWidth={CONTENT_ITEM_WIDTH}
+        contentWidth={screenWidth}
+        headerProps={headerProps}
+        onSelectedPageIndex={handleSelectedPageIndex}
+        windowSize={3}
+      />
+    );
+  }, [handleSelectedPageIndex, headerProps, tabConfig, screenWidth]);
   return (
     <Page>
       {gtMd ? <MarketHomeHeader /> : <MDMarketHomeHeader />}
-      <Page.Body>
-        {tabConfig.length ? (
-          <Tab.Page
-            data={tabConfig}
-            contentItemWidth={CONTENT_ITEM_WIDTH}
-            contentWidth={screenWidth}
-            headerProps={headerProps}
-            onSelectedPageIndex={handleSelectedPageIndex}
-            windowSize={3}
-          />
-        ) : (
-          <Stack flex={1} ai="center" jc="center">
-            <Spinner size="large" />
-          </Stack>
-        )}
-      </Page.Body>
+      <Page.Body>{renderTabContainer()}</Page.Body>
     </Page>
   );
 }

diff --git a/yarn.lock b/yarn.lock
@@ -5966,13 +5966,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@onekeyfe/react-native-tab-page-view@npm:1.0.13":
-  version: 1.0.13
-  resolution: "@onekeyfe/react-native-tab-page-view@npm:1.0.13"
+"@onekeyfe/react-native-tab-page-view@npm:1.0.14":
+  version: 1.0.14
+  resolution: "@onekeyfe/react-native-tab-page-view@npm:1.0.14"
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 10/9b62229c0fa75f00d610f1f8af5c094553b75a8bdb81018add41ec83646ad57dbbbe57b5b3d970e374b0a9e66e000b3536bbffb581098df1faa9b1dc8497af4e
+  checksum: 10/abf9ed7f0bcbf5344a5d50283a5c33581055e55a5d04af0ba698b04777269743466d17eeeea6c1018777843bef3bec3526bcd1da0d598b0ae66fc7115b747af7
   languageName: node
   linkType: hard
 
@@ -6327,7 +6327,7 @@ __metadata:
     "@onekeyfe/react-native-animated-charts": "npm:1.0.0"
     "@onekeyfe/react-native-ble-plx": "npm:3.0.0"
     "@onekeyfe/react-native-lite-card": "npm:1.0.9"
-    "@onekeyfe/react-native-tab-page-view": "npm:1.0.13"
+    "@onekeyfe/react-native-tab-page-view": "npm:1.0.14"
     "@onekeyhq/components": "npm:*"
     "@onekeyhq/kit": "npm:*"
     "@onekeyhq/shared": "npm:*"