chore: animate height on saved search filter screen

artsy · Oct 17, 2023 · 2d402bb · 2d402bb
1 parent 496489f
commit 2d402bb
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 80 deletions.
diff --git a/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterAdditionalGeneIDs.tsx b/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterAdditionalGeneIDs.tsx
@@ -3,9 +3,10 @@ import { SearchCriteria } from "app/Components/ArtworkFilter/SavedSearch/types"
 import { SavedSearchFilterPill } from "app/Scenes/SavedSearchAlert/Components/SavedSearchFilterPill"
 import { SavedSearchStore } from "app/Scenes/SavedSearchAlert/SavedSearchStore"
 import { isValueSelected, useSearchCriteriaAttributes } from "app/Scenes/SavedSearchAlert/helpers"
+import { AnimateHeight } from "app/utils/animations/AnimateHeight"
 import { gravityArtworkMediumCategories } from "app/utils/artworkMediumCategories"
 import { useState } from "react"
-import { LayoutAnimation, TouchableOpacity } from "react-native"
+import { TouchableOpacity } from "react-native"
 
 export const SavedSearchFilterAdditionalGeneIDs = () => {
   const [showAll, setShowAll] = useState(false)
@@ -47,60 +48,61 @@ export const SavedSearchFilterAdditionalGeneIDs = () => {
         Medium
       </Text>
       <Spacer y={1} />
-      <Flex flexDirection="row" flexWrap="wrap">
-        {gravityArtworkMediumCategories.slice(0, 7).map((option) => {
-          return (
-            <SavedSearchFilterPill
-              key={option.value as string}
-              accessibilityLabel={option.label}
-              selected={isValueSelected({
-                selectedAttributes,
-                value: option.value,
-              })}
-              onPress={() => {
-                handlePress(option.value as string)
-              }}
-            >
-              {option.label}
-            </SavedSearchFilterPill>
-          )
-        })}
+      <AnimateHeight>
+        <Flex flexDirection="row" flexWrap="wrap">
+          {gravityArtworkMediumCategories.slice(0, 7).map((option) => {
+            return (
+              <SavedSearchFilterPill
+                key={option.value as string}
+                accessibilityLabel={option.label}
+                selected={isValueSelected({
+                  selectedAttributes,
+                  value: option.value,
+                })}
+                onPress={() => {
+                  handlePress(option.value as string)
+                }}
+              >
+                {option.label}
+              </SavedSearchFilterPill>
+            )
+          })}
 
-        {showAll
-          ? gravityArtworkMediumCategories
-              .slice(7, gravityArtworkMediumCategories.length)
-              .map((option) => {
-                return (
-                  <SavedSearchFilterPill
-                    key={option.value as string}
-                    accessibilityLabel={option.label}
-                    selected={isValueSelected({
-                      selectedAttributes,
-                      value: option.value,
-                    })}
-                    onPress={() => {
-                      handlePress(option.value as string)
-                    }}
-                  >
-                    {option.label}
-                  </SavedSearchFilterPill>
-                )
-              })
-          : null}
+          {showAll
+            ? gravityArtworkMediumCategories
+                .slice(7, gravityArtworkMediumCategories.length)
+                .map((option) => {
+                  return (
+                    <SavedSearchFilterPill
+                      key={option.value as string}
+                      accessibilityLabel={option.label}
+                      selected={isValueSelected({
+                        selectedAttributes,
+                        value: option.value,
+                      })}
+                      onPress={() => {
+                        handlePress(option.value as string)
+                      }}
+                    >
+                      {option.label}
+                    </SavedSearchFilterPill>
+                  )
+                })
+            : null}
 
-        <TouchableOpacity
-          onPress={() => {
-            LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
-            setShowAll(!showAll)
-          }}
-        >
-          <Flex height={50} justifyContent="center">
-            <Text variant="xs" color="blue100">
-              Show {showAll ? "less" : "more"}
-            </Text>
-          </Flex>
-        </TouchableOpacity>
-      </Flex>
+          <TouchableOpacity
+            onPress={() => {
+              setShowAll(!showAll)
+            }}
+          >
+            <Flex height={50} justifyContent="center" px={1}>
+              <Text variant="xs" color="blue100">
+                Show {showAll ? "less" : "more"}
+              </Text>
+            </Flex>
+          </TouchableOpacity>
+        </Flex>
+      </AnimateHeight>
     </Flex>
   )
 }
diff --git a/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterAppliedFilters.tsx b/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterAppliedFilters.tsx
@@ -2,6 +2,7 @@ import { Flex, Pill, Text } from "@artsy/palette-mobile"
 import { SearchCriteria } from "app/Components/ArtworkFilter/SavedSearch/types"
 import { SavedSearchStore } from "app/Scenes/SavedSearchAlert/SavedSearchStore"
 import { useSavedSearchPills } from "app/Scenes/SavedSearchAlert/useSavedSearchPills"
+import { AnimateHeight } from "app/utils/animations/AnimateHeight"
 import { MotiView } from "moti"
 
 export const SavedSearchFilterAppliedFilters: React.FC<{}> = ({}) => {
@@ -17,34 +18,36 @@ export const SavedSearchFilterAppliedFilters: React.FC<{}> = ({}) => {
         Your Filters
       </Text>
 
-      <Flex flexDirection="row" flexWrap="wrap" mt={1} mx={-0.5}>
-        {pills.map((pill) => (
-          <MotiView
-            from={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ type: "timing", duration: 200 }}
-            key={`${pill.paramName}-filter-label-${pill.value}`}
-          >
-            <Pill
-              m={0.5}
-              variant="filter"
-              accessibilityLabel={pill.label}
-              disabled={
-                pill.paramName === SearchCriteria.artistID ||
-                pill.paramName === SearchCriteria.artistIDs
-              }
-              onPress={() => {
-                removeValueFromAttributesByKeyAction({
-                  key: pill.paramName,
-                  value: pill.value,
-                })
-              }}
+      <AnimateHeight>
+        <Flex flexDirection="row" flexWrap="wrap" mt={1} mx={-0.5}>
+          {pills.map((pill) => (
+            <MotiView
+              from={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ type: "timing", duration: 200 }}
+              key={`${pill.paramName}-filter-label-${pill.value}`}
             >
-              {pill.label}
-            </Pill>
-          </MotiView>
-        ))}
-      </Flex>
+              <Pill
+                m={0.5}
+                variant="filter"
+                accessibilityLabel={pill.label}
+                disabled={
+                  pill.paramName === SearchCriteria.artistID ||
+                  pill.paramName === SearchCriteria.artistIDs
+                }
+                onPress={() => {
+                  removeValueFromAttributesByKeyAction({
+                    key: pill.paramName,
+                    value: pill.value,
+                  })
+                }}
+              >
+                {pill.label}
+              </Pill>
+            </MotiView>
+          ))}
+        </Flex>
+      </AnimateHeight>
     </Flex>
   )
 }