fix: scroll on show artworks screen (#11118)

artsy · Nov 20, 2024 · 2bf0788 · 2bf0788
1 parent 89be0e2
commit 2bf0788
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 23 deletions.
diff --git a/src/app/Components/HeaderArtworksFilter/HeaderArtworksFilter.tsx b/src/app/Components/HeaderArtworksFilter/HeaderArtworksFilter.tsx
@@ -12,10 +12,11 @@ import { Animated, Dimensions, LayoutChangeEvent, PixelRatio } from "react-nativ
 import { isTablet } from "react-native-device-info"
 
 export interface FilterProps {
-  total: number
   animationValue?: Animated.Value
-  onPress: () => void
+  disableYAxisAnimation?: boolean
   hideArtworksCount?: boolean
+  onPress: () => void
+  total: number
 }
 
 interface SeparatorWithSmoothOpacityProps {
@@ -62,6 +63,7 @@ export const SeparatorWithSmoothOpacity: React.FC<SeparatorWithSmoothOpacityProp
 
 export const HeaderArtworksFilter: React.FC<FilterProps> = ({
   animationValue,
+  disableYAxisAnimation,
   hideArtworksCount,
   onPress,
   total,
@@ -114,19 +116,22 @@ export const HeaderArtworksFilter: React.FC<FilterProps> = ({
 
   return (
     <Box backgroundColor="white" onLayout={(e) => _onLayout(e)} testID="HeaderArtworksFilter">
-      {!!animationValue && <SeparatorWithSmoothOpacity {...separatorProps} />}
+      {!!animationValue && !disableYAxisAnimation && (
+        <SeparatorWithSmoothOpacity {...separatorProps} />
+      )}
       {!!total && (
         <Animated.View
           style={{
             transform: [
               {
-                translateY:
-                  animationValue?.interpolate({
-                    inputRange:
-                      filterPageY > 0 ? [0, filterPageY - ANIM_START, filterPageY] : [0, 0, 0],
-                    outputRange: filterPageY > 0 ? [0, 0, TRANSLATE_Y_VALUE] : [0, 0, 0],
-                    extrapolate: "clamp",
-                  }) ?? 0,
+                translateY: !disableYAxisAnimation
+                  ? animationValue?.interpolate({
+                      inputRange:
+                        filterPageY > 0 ? [0, filterPageY - ANIM_START, filterPageY] : [0, 0, 0],
+                      outputRange: filterPageY > 0 ? [0, 0, TRANSLATE_Y_VALUE] : [0, 0, 0],
+                      extrapolate: "clamp",
+                    }) ?? 0
+                  : 0,
               },
             ],
           }}

diff --git a/src/app/Components/HeaderArtworksFilter/HeaderArtworksFilterWithTotalArtworks.tsx b/src/app/Components/HeaderArtworksFilter/HeaderArtworksFilterWithTotalArtworks.tsx
@@ -3,6 +3,7 @@ import { HeaderArtworksFilter } from "app/Components/HeaderArtworksFilter/Header
 import { Animated } from "react-native"
 
 interface HeaderArtworksFilterWithTotalArtworksProps {
+  disableYAxisAnimation?: boolean
   animationValue?: Animated.Value
   onPress: () => void
   hideArtworksCount?: boolean

diff --git a/src/app/Scenes/Show/Components/ShowArtworks.tsx b/src/app/Scenes/Show/Components/ShowArtworks.tsx
@@ -121,17 +121,7 @@ export const ShowArtworksPaginationContainer = createPaginationContainer(
         showArtworks: filterArtworksConnection(
           first: $count
           after: $cursor
-          aggregations: [
-            ARTIST
-            ARTIST_NATIONALITY
-            COLOR
-            DIMENSION_RANGE
-            FOLLOWED_ARTISTS
-            MAJOR_PERIOD
-            MATERIALS_TERMS
-            MEDIUM
-            PRICE_RANGE
-          ]
+          aggregations: [MEDIUM, TOTAL, MAJOR_PERIOD, ARTIST_NATIONALITY, MATERIALS_TERMS, ARTIST]
           input: $input
         ) @connection(key: "Show_showArtworks") {
           aggregations {

diff --git a/src/app/Scenes/Show/Show.tsx b/src/app/Scenes/Show/Show.tsx
@@ -57,10 +57,11 @@ export const Show: React.FC<ShowProps> = ({ show }) => {
       key: "filter",
       element: (
         <Flex backgroundColor="white">
-          <Spacer y={1} />
+          <Separator />
           <HeaderArtworksFilter
             animationValue={filterComponentAnimationValue}
             onPress={toggleFilterArtworksModal}
+            disableYAxisAnimation
           />
         </Flex>
       ),
@@ -100,7 +101,7 @@ export const Show: React.FC<ShowProps> = ({ show }) => {
         <Animated.FlatList<Section>
           data={sections}
           keyExtractor={({ key }) => key}
-          stickyHeaderIndices={[sections.findIndex((section) => section.key === "filter") + 1]}
+          stickyHeaderIndices={[sections.findIndex((section) => section.key === "filter")]}
           viewabilityConfig={viewConfigRef.current}
           ListFooterComponent={<Spacer y={2} />}
           ItemSeparatorComponent={() => <Spacer y="15px" />}