@cleartrip/ct-design-list 4.0.0-SNAPSHOT-native-main.20 → 4.0.0-SNAPSHOT-native-main.22

package/dist/List.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.native.d.ts","sourceRoot":"","sources":["../packages/components/List/src/List.native.tsx"],"names":[],"mappings":"AAOA,OAAO,EAA0B,uBAAuB,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AA8ClF,QAAA,MAAM,IAAI,EAuPM,CAAC,CAAC,EAAE,CAAC,SAAS;IAAE,IAAI,EAAE,CAAC,EAAE,CAAA;CAAE,EACzC,KAAK,EAAE,uBAAuB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;CAAE,KAChE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;AAIvB,eAAe,IAAI,CAAC"}
+{"version":3,"file":"List.native.d.ts","sourceRoot":"","sources":["../packages/components/List/src/List.native.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAA0B,uBAAuB,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAsElF,QAAA,MAAM,IAAI,EA8SM,CAAC,CAAC,EAAE,CAAC,SAAS;IAAE,IAAI,EAAE,CAAC,EAAE,CAAA;CAAE,EACzC,KAAK,EAAE,uBAAuB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;CAAE,KAChE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;AAIvB,eAAe,IAAI,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cleartrip/ct-design-list",
-  "version": "4.0.0-SNAPSHOT-native-main.20",
+  "version": "4.0.0-SNAPSHOT-native-main.22",
   "description": "List Component (virtualised)",
   "types": "dist/index.d.ts",
   "main": "./dist/ct-design-list.cjs.js",
@@ -26,15 +26,15 @@
   "dependencies": {
     "react-window": "^1.8.9",
     "react-window-infinite-loader": "^1.0.9",
-    "@cleartrip/ct-design-style-manager": "4.0.0-SNAPSHOT-native-main.20",
-    "@cleartrip/ct-design-use-merge-refs": "4.0.0-SNAPSHOT-native-main.20",
-    "@cleartrip/ct-design-theme": "4.0.0-SNAPSHOT-native-main.20",
-    "@cleartrip/ct-design-scroll-container": "4.0.0-SNAPSHOT-native-main.20"
+    "@cleartrip/ct-design-scroll-container": "4.0.0-SNAPSHOT-native-main.22",
+    "@cleartrip/ct-design-style-manager": "4.0.0-SNAPSHOT-native-main.22",
+    "@cleartrip/ct-design-use-merge-refs": "4.0.0-SNAPSHOT-native-main.22",
+    "@cleartrip/ct-design-theme": "4.0.0-SNAPSHOT-native-main.22"
   },
   "devDependencies": {
     "@types/react-window": "^1.8.8",
     "@types/react-window-infinite-loader": "^1.0.9",
-    "@cleartrip/ct-design-types": "4.0.0-SNAPSHOT-native-main.20"
+    "@cleartrip/ct-design-types": "4.0.0-SNAPSHOT-native-main.22"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/src/List.native.tsx

@@ -3,16 +3,59 @@ import { forwardRef, memo, useCallback, useRef } from 'react';
 import { makeStyles } from '@cleartrip/ct-design-style-manager';
 import useMergeRefs from '@cleartrip/ct-design-use-merge-refs';
 import { ScrollContextProvider, ScrollableObservableChild } from '@cleartrip/ct-design-scroll-container';
-import { FlatList, ListRenderItemInfo, View, ViewToken } from 'react-native';
+import {
+  FlatList,
+  ListRenderItemInfo,
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  Pressable,
+  Text,
+  View,
+  ViewToken,
+} from 'react-native';
+import Animated, {
+  Extrapolation,
+  interpolate,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const BACK_TO_TOP_ANIM_DURATION = 200;
 
 import { IListItemRendererProps, IVariableSizedListProps, ListRef } from './type';
 import { ListItemProvider } from './ListItemContext';
 import { areSetsEqual } from './utils';
 
+const BACK_TO_TOP_SHOW_THRESHOLD = 200;
+const SCROLL_DELTA_TOLERANCE = 4;
+
 const staticStyles = makeStyles(() => ({
   itemSeparator: {
     height: 24,
   },
+  backToTopChip: {
+    position: 'absolute',
+    top: 16,
+    alignSelf: 'center',
+    backgroundColor: '#1A1A1A',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 999,
+    flexDirection: 'row',
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.2,
+    shadowRadius: 4,
+    elevation: 4,
+  },
+  backToTopText: {
+    color: '#FFFFFF',
+    fontSize: 14,
+    fontWeight: '500',
+  },
 }));
 
 /**
@@ -79,6 +122,56 @@ const List = memo(
       const observableChildRefs = useRef<Array<ScrollableObservableChild>>([]);
       const isScrollToScrollingRef = useRef(false);
 
+      const prevScrollYRef = useRef(0);
+      const showTargetRef = useRef(0);
+      const showProgress = useSharedValue(0);
+
+      const chipAnimatedStyle = useAnimatedStyle(() => {
+        const v = showProgress.value;
+        return {
+          opacity: v,
+          transform: [{ translateY: interpolate(v, [0, 1], [-12, 0], Extrapolation.CLAMP) }],
+          pointerEvents: v > 0.5 ? 'auto' : 'none',
+        };
+      });
+
+      const setShowTarget = (next: 0 | 1) => {
+        if (showTargetRef.current === next) return;
+        showTargetRef.current = next;
+        showProgress.value = withTiming(next, { duration: BACK_TO_TOP_ANIM_DURATION });
+      };
+
+      const handleBackToTopPress = useCallback(() => {
+        _ref.current?.scrollToOffset({ offset: 0, animated: true });
+        if (showTargetRef.current !== 0) {
+          showTargetRef.current = 0;
+          showProgress.value = withTiming(0, { duration: BACK_TO_TOP_ANIM_DURATION });
+        }
+        // showProgress / showTargetRef are stable refs; safe with [] deps
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, []);
+
+      const handleScroll = useCallback(
+        (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+          const currentY = e.nativeEvent.contentOffset.y;
+          const prevY = prevScrollYRef.current;
+
+          if (currentY <= BACK_TO_TOP_SHOW_THRESHOLD) {
+            setShowTarget(0);
+          } else if (prevY - currentY > SCROLL_DELTA_TOLERANCE) {
+            setShowTarget(1);
+          } else if (currentY - prevY > SCROLL_DELTA_TOLERANCE) {
+            setShowTarget(0);
+          }
+
+          prevScrollYRef.current = currentY;
+
+          onScroll?.(e);
+          scrollMaintainingRef.current = true;
+        },
+        [onScroll],
+      );
+
       const viewableIndicesRef = useRef<Set<number>>(new Set());
 
       const viewableItemsRef = useRef<Record<string, Record<string, unknown>>>({});
@@ -259,10 +352,7 @@ const List = memo(
             alwaysBounceHorizontal={false}
             alwaysBounceVertical={false}
             keyboardShouldPersistTaps={keyboardShouldPersistTaps}
-            onScroll={(e) => {
-              onScroll?.(e);
-              scrollMaintainingRef.current = true;
-            }}
+            onScroll={handleScroll}
             onScrollEndDrag={() => {
               /**
                * !NOTE:
@@ -294,6 +384,14 @@ const List = memo(
             bounces={false}
             scrollEventThrottle={1}
           />
+          <AnimatedPressable
+            onPress={handleBackToTopPress}
+            accessibilityRole='button'
+            accessibilityLabel='Back to top'
+            style={[staticStyles.backToTopChip, chipAnimatedStyle]}
+          >
+            <Text style={staticStyles.backToTopText}>↑ Back to top</Text>
+          </AnimatedPressable>
         </ScrollContextProvider>
       );
     },