diff --git a/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterAdditionalGeneIDs.tsx b/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterAdditionalGeneIDs.tsx index 3caf3ba301c..86038fcbb73 100644 --- 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 - - {gravityArtworkMediumCategories.slice(0, 7).map((option) => { - return ( - { - handlePress(option.value as string) - }} - > - {option.label} - - ) - })} + + + {gravityArtworkMediumCategories.slice(0, 7).map((option) => { + return ( + { + handlePress(option.value as string) + }} + > + {option.label} + + ) + })} - {showAll - ? gravityArtworkMediumCategories - .slice(7, gravityArtworkMediumCategories.length) - .map((option) => { - return ( - { - handlePress(option.value as string) - }} - > - {option.label} - - ) - }) - : null} + {showAll + ? gravityArtworkMediumCategories + .slice(7, gravityArtworkMediumCategories.length) + .map((option) => { + return ( + { + handlePress(option.value as string) + }} + > + {option.label} + + ) + }) + : null} - { - LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut) - setShowAll(!showAll) - }} - > - - - Show {showAll ? "less" : "more"} - - - - + { + setShowAll(!showAll) + }} + > + + + Show {showAll ? "less" : "more"} + + + + + ) } diff --git a/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterAppliedFilters.tsx b/src/app/Scenes/SavedSearchAlert/Components/SavedSearchFilterAppliedFilters.tsx index 044b7f587d3..eb3c3643fbe 100644 --- 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 - - {pills.map((pill) => ( - - { - removeValueFromAttributesByKeyAction({ - key: pill.paramName, - value: pill.value, - }) - }} + + + {pills.map((pill) => ( + - {pill.label} - - - ))} - + { + removeValueFromAttributesByKeyAction({ + key: pill.paramName, + value: pill.value, + }) + }} + > + {pill.label} + + + ))} + + ) }