Skip to content

Commit 8da970d

Browse files
katsuhira02Danilthorvald-man
authored
filter bottom component add (#91)
Co-authored-by: Danil <[email protected]> Co-authored-by: taZik616 <[email protected]>
1 parent 52ca27b commit 8da970d

3 files changed

Lines changed: 116 additions & 8 deletions

File tree

‎src/UI.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React, { useState } from 'react'
22
import { StyleSheet, View } from 'react-native'
33
import { BLACK, WHITE } from './constants'
4-
import { Space, Text, AdressCard } from './components'
4+
import { Space, Text, FilterBottom } from './components'
5+
56

67
const styles = StyleSheet.create({
78
container: {
@@ -36,13 +37,10 @@ function Home({ navigation, route }: HomeT) {
3637

3738
return (
3839
<View style={container}>
39-
<Text title="CategoryCard" h0 />
40+
<Text title="Filter" h0 />
4041
<Space height={15} />
41-
<AdressCard
42-
name="John Doe"
43-
adress={`3 Newbridge Court\nChino Hills, CA 91709, United States`}
44-
onPressEdit={() => {}}
45-
/>
42+
<FilterBottom />
43+
4644
</View>
4745
)
4846
}

‎src/components/FilterBottom/index.tsx‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import React, { useRef } from 'react'
2+
import { Pressable, StyleSheet, View } from 'react-native'
3+
import { Modalize } from 'react-native-modalize'
4+
import { BLACK, DARK, PRIMARY, WHITE } from '../../constants'
5+
import { Text, Filter, Space } from '../index'
6+
7+
const styles = StyleSheet.create({
8+
modalStyle: {
9+
backgroundColor: DARK
10+
},
11+
textStyle: {
12+
color: 'white'
13+
},
14+
container: {
15+
alignItems: 'center'
16+
},
17+
container2: {
18+
alignSelf: 'flex-start'
19+
},
20+
pressableContainer: {
21+
height: 40,
22+
justifyContent: 'center',
23+
width: 500
24+
},
25+
textStylePressable: {
26+
marginLeft: 10
27+
}
28+
})
29+
30+
function FilterBottom() {
31+
const { container, modalStyle, textStyle, container2, pressableContainer, textStylePressable } = styles
32+
const modalizeRef = useRef<Modalize>(null)
33+
34+
function onOpen() {
35+
modalizeRef.current?.open()
36+
}
37+
38+
function onClose() {
39+
modalizeRef.current?.close()
40+
}
41+
42+
return (
43+
<>
44+
<Filter onPressApps={() => {}} onPressPrice={onOpen} onPressFilter={() => {}} />
45+
<Modalize modalStyle={modalStyle} modalHeight={300} ref={modalizeRef}>
46+
<View style={container}>
47+
<Space height={10} />
48+
<Text title="Sort by" h2 textStyle={textStyle} />
49+
<Space height={10} />
50+
<View style={container2}>
51+
<Pressable
52+
onPressOut={onClose}
53+
style={({ pressed }) => [{ backgroundColor: pressed ? PRIMARY : DARK }, pressableContainer]}
54+
>
55+
{({ pressed }) => (
56+
<Text title={'Popular'} textStyle={[textStylePressable, { color: pressed ? BLACK : WHITE }]} h3 />
57+
)}
58+
</Pressable>
59+
<Pressable
60+
onPressOut={onClose}
61+
style={({ pressed }) => [{ backgroundColor: pressed ? PRIMARY : DARK }, pressableContainer]}
62+
>
63+
{({ pressed }) => (
64+
<Text title={'Newest'} textStyle={[textStylePressable, { color: pressed ? BLACK : WHITE }]} h3 />
65+
)}
66+
</Pressable>
67+
<Pressable
68+
onPressOut={onClose}
69+
style={({ pressed }) => [{ backgroundColor: pressed ? PRIMARY : DARK }, pressableContainer]}
70+
>
71+
{({ pressed }) => (
72+
<Text
73+
title={'Customer review'}
74+
textStyle={[textStylePressable, { color: pressed ? BLACK : WHITE }]}
75+
h3
76+
/>
77+
)}
78+
</Pressable>
79+
<Pressable
80+
onPressOut={onClose}
81+
style={({ pressed }) => [{ backgroundColor: pressed ? PRIMARY : DARK }, pressableContainer]}
82+
>
83+
{({ pressed }) => (
84+
<Text
85+
title={'Price: lowest to high'}
86+
textStyle={[textStylePressable, { color: pressed ? BLACK : WHITE }]}
87+
h3
88+
/>
89+
)}
90+
</Pressable>
91+
<Pressable
92+
onPressOut={onClose}
93+
style={({ pressed }) => [{ backgroundColor: pressed ? PRIMARY : DARK }, pressableContainer]}
94+
>
95+
{({ pressed }) => (
96+
<Text
97+
title={'Price: highest to low'}
98+
textStyle={[textStylePressable, { color: pressed ? BLACK : WHITE }]}
99+
h3
100+
/>
101+
)}
102+
</Pressable>
103+
</View>
104+
</View>
105+
</Modalize>
106+
</>
107+
)
108+
}
109+
110+
export { FilterBottom }

‎src/components/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,4 @@ export * from './CardOrder'
1414
export * from './Filter'
1515
export * from './CategoryCard'
1616
export * from './CardImage'
17-
export * from './AdressCard'
17+
export * from './FilterBottom'

0 commit comments

Comments
 (0)