Skip to content

Commit

Permalink
feat: hid search and sort when character list is empty
Browse files Browse the repository at this point in the history
  • Loading branch information
@Vali-98
Vali-98 committed Sep 24, 2024
1 parent ab21e29 commit 4c068e4
Showing 1 changed file with 103 additions and 99 deletions.
202 changes: 103 additions & 99 deletions app/components/CharacterMenu/CharacterList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,113 +137,117 @@ const CharacterList: React.FC<CharacterListProps> = ({ showHeader }) => {
: {}),
}}
/>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
paddingLeft: 16,
paddingRight: 8,
paddingBottom: 12,
}}>
<View
style={{
columnGap: 12,
flexDirection: 'row',
alignItems: 'center',
}}>
<Text style={{ color: Style.getColor('primary-text2'), fontSize: 16 }}>
Sort By
</Text>
<SortButton
sortTypes={[SortType.RECENT_ASC, SortType.RECENT_DESC]}
currentSortType={sortType}
label="Recent"
onPress={() => {
setSortType(recentStateMap[sortType])
}}
/>
<SortButton
sortTypes={[SortType.ALPHABETICAL_ASC, SortType.ALPHABETICAL_DESC]}
currentSortType={sortType}
label="Name"
onPress={() => {
setSortType(alphabeticalStateMap[sortType])
}}
/>
</View>
{showSearch && (
<Animated.View entering={ZoomIn} exiting={ZoomOut}>
<TouchableOpacity>
<AntDesign
name="close"
color={Style.getColor('primary-text2')}
size={26}

{characterList.length === 0 && <CharactersEmpty />}

{characterList.length !== 0 && (
<View>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
paddingLeft: 16,
paddingRight: 8,
paddingBottom: 12,
}}>
<View
style={{
columnGap: 12,
flexDirection: 'row',
alignItems: 'center',
}}>
<Text style={{ color: Style.getColor('primary-text2'), fontSize: 16 }}>
Sort By
</Text>
<SortButton
sortTypes={[SortType.RECENT_ASC, SortType.RECENT_DESC]}
currentSortType={sortType}
label="Recent"
onPress={() => {
if (showSearch) setTextFilter('')
setShowSearch(!showSearch)
setSortType(recentStateMap[sortType])
}}
/>
</TouchableOpacity>
</Animated.View>
)}
{!showSearch && (
<Animated.View entering={ZoomIn} exiting={ZoomOut}>
<TouchableOpacity>
<AntDesign
name="search1"
color={Style.getColor('primary-text2')}
size={26}
<SortButton
sortTypes={[SortType.ALPHABETICAL_ASC, SortType.ALPHABETICAL_DESC]}
currentSortType={sortType}
label="Name"
onPress={() => {
if (showSearch) setTextFilter('')
setShowSearch(!showSearch)
setSortType(alphabeticalStateMap[sortType])
}}
/>
</TouchableOpacity>
</Animated.View>
)}
</View>
{showSearch && (
<Animated.View
style={{ paddingHorizontal: 12, paddingVertical: 8 }}
entering={FadeInUp.duration(150).withInitialValues({
transform: [{ translateY: -20 }],
})}
exiting={FadeOutUp.duration(100)}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<TextInput
autoFocus
placeholder="Search Name..."
placeholderTextColor={Style.getColor('primary-text3')}
value={textFilter}
style={{
...styles.searchInput,
color: Style.getColor(
characterList.length === 0 ? 'primary-text2' : 'primary-text1'
),
}}
onChangeText={setTextFilter}
/>
</View>
{showSearch && (
<Animated.View entering={ZoomIn} exiting={ZoomOut}>
<TouchableOpacity>
<AntDesign
name="close"
color={Style.getColor('primary-text2')}
size={26}
onPress={() => {
if (showSearch) setTextFilter('')
setShowSearch(!showSearch)
}}
/>
</TouchableOpacity>
</Animated.View>
)}
{!showSearch && (
<Animated.View entering={ZoomIn} exiting={ZoomOut}>
<TouchableOpacity>
<AntDesign
name="search1"
color={Style.getColor('primary-text2')}
size={26}
onPress={() => {
if (showSearch) setTextFilter('')
setShowSearch(!showSearch)
}}
/>
</TouchableOpacity>
</Animated.View>
)}
</View>
</Animated.View>
)}

{characterList.length === 0 && <CharactersEmpty />}

{characterList.length !== 0 && (
<FlatList
showsVerticalScrollIndicator={false}
data={characterList}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item, index }) => (
<CharacterListing
index={index}
character={item}
nowLoading={nowLoading}
showTags={false}
setNowLoading={setNowLoading}
/>
{showSearch && (
<Animated.View
style={{ paddingHorizontal: 12, paddingVertical: 8 }}
entering={FadeInUp.duration(150).withInitialValues({
transform: [{ translateY: -20 }],
})}
exiting={FadeOutUp.duration(100)}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<TextInput
autoFocus
placeholder="Search Name..."
placeholderTextColor={Style.getColor('primary-text3')}
value={textFilter}
style={{
...styles.searchInput,
color: Style.getColor(
characterList.length === 0
? 'primary-text2'
: 'primary-text1'
),
}}
onChangeText={setTextFilter}
/>
</View>
</Animated.View>
)}
/>
<FlatList
showsVerticalScrollIndicator={false}
data={characterList}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item, index }) => (
<CharacterListing
index={index}
character={item}
nowLoading={nowLoading}
showTags={false}
setNowLoading={setNowLoading}
/>
)}
/>
</View>
)}
</SafeAreaView>
)
Expand Down

0 comments on commit 4c068e4

Please sign in to comment.