Skip to content

Commit ea0bb2d

Browse files
katsuhira02Danil
katsuhira02
and
Danil
authored
FiltersListComponent add (#99)
Co-authored-by: Danil <[email protected]>
1 parent 2674ed8 commit ea0bb2d

File tree

5 files changed

+175
-3
lines changed

5 files changed

+175
-3
lines changed

‎src/UI.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ function Home({ navigation, route }: HomeT) {
6363
const openPopUp = () => navigate('POPUP')
6464
const openSuccess = () => navigate('SuccessScreen')
6565
const openAuth = () => navigate('SignUpScreen')
66+
const openFilterList = () => navigate('FiltersListScreen')
6667

6768
return (
6869
<ScrollView style={container}>
@@ -242,6 +243,10 @@ function Home({ navigation, route }: HomeT) {
242243
<Space height={10} />
243244
<Button title={'Open AuthScreen!'} onPress={openAuth} />
244245
<Space height={25} />
246+
<Text title="FiltersListScreen" h1 textStyle={textStyle} />
247+
<Space height={10} />
248+
<Button title={'Open FiltersListScreen!'} onPress={openFilterList} />
249+
<Space height={25} />
245250
</View>
246251
</ScrollView>
247252
)

‎src/components/Button/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ interface ButtonT {
4242
onPress: () => void
4343
}
4444

45-
function Button({ isOutline, title, isSmall, onPress }: ButtonT) {
45+
function Button({ isOutline, title = 'DefaultTitle', isSmall, onPress }: ButtonT) {
4646
const { container, color, outlineStyle, textStyle, smallContainer, textColor, textColorOutline } = styles
4747
const colorButton = isOutline ? outlineStyle : color
4848
const sizeButton = isSmall ? smallContainer : container

‎src/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { NavigationContainer } from '@react-navigation/native'
33
import { createNativeStackNavigator } from '@react-navigation/native-stack'
44
import { PopUp } from './components'
55
import { Home } from './UI'
6-
import { SuccessScreen, SignUpScreen, LoginScreen, PasswordScreen } from './screens'
6+
import { SuccessScreen, SignUpScreen, LoginScreen, PasswordScreen, FiltersListScreen } from './screens'
77

88
const Stack = createNativeStackNavigator()
99

@@ -21,6 +21,7 @@ function Navigation1() {
2121
<Stack.Screen component={SignUpScreen} name={'SignUpScreen'} options={{ animation: 'fade' }} />
2222
<Stack.Screen component={LoginScreen} name={'LoginScreen'} options={{ animation: 'slide_from_right' }} />
2323
<Stack.Screen component={PasswordScreen} name={'PasswordScreen'} options={{ animation: 'slide_from_right' }} />
24+
<Stack.Screen component={FiltersListScreen} name={'FiltersListScreen'} options={{ animation: 'fade' }} />
2425
</Stack.Navigator>
2526
</NavigationContainer>
2627
)

‎src/screens/FiltersListScreen/index.tsx‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
import React, { useState } from 'react'
2+
import { View, ScrollView, StyleSheet, Pressable } from 'react-native'
3+
import Ionicons from 'react-native-vector-icons/Ionicons'
4+
import { BLACK, DARK, PRIMARY, WHITE, winWidth } from '../../constants'
5+
import { Space, Text, CheckBox, Button, Search, Header } from '../../components'
6+
import { SafeAreaView } from 'react-native-safe-area-context'
7+
8+
const styles = StyleSheet.create({
9+
containerView: {
10+
width: '100%',
11+
height: 140,
12+
backgroundColor: BLACK
13+
},
14+
containerSearch: {
15+
paddingTop: 30
16+
},
17+
activeTextStyle: {
18+
color: PRIMARY
19+
},
20+
textStyle: {
21+
color: WHITE
22+
},
23+
containerBrand: {
24+
flexDirection: 'row',
25+
justifyContent: 'space-between',
26+
width: '100%',
27+
height: 16 * 3,
28+
alignItems: 'center',
29+
paddingLeft: 15,
30+
paddingRight: 15
31+
},
32+
containerName: {
33+
justifyContent: 'center'
34+
},
35+
actionsContainer: {
36+
flexDirection: 'row',
37+
justifyContent: 'space-between',
38+
paddingTop: (16 * 3) / 2,
39+
paddingLeft: 20,
40+
paddingRight: 20
41+
},
42+
safeAreaViewStyle: {
43+
flex: 1,
44+
backgroundColor: BLACK
45+
},
46+
headerContainer: {
47+
flexDirection: 'row'
48+
},
49+
headerTextContainer: {
50+
paddingLeft: winWidth / 2 - 90
51+
},
52+
bottomViewContainer: {
53+
width: '100%',
54+
height: 100,
55+
backgroundColor: BLACK
56+
},
57+
pressableContainer: {
58+
paddingLeft: 20
59+
}
60+
})
61+
62+
interface CheckBoxValueT {
63+
one: false
64+
two: false
65+
three: false
66+
four: false
67+
}
68+
69+
interface FiltersListScreenT {
70+
navigation: any
71+
}
72+
73+
function FiltersListScreen({ navigation }: FiltersListScreenT) {
74+
const {
75+
containerView,
76+
containerSearch,
77+
textStyle,
78+
activeTextStyle,
79+
actionsContainer,
80+
containerName,
81+
containerBrand,
82+
safeAreaViewStyle,
83+
headerContainer,
84+
headerTextContainer,
85+
bottomViewContainer,
86+
pressableContainer
87+
} = styles
88+
const [redCheckBoxValue1, setRedCheckBoxValue1] = useState(false)
89+
const [redCheckBoxValue, setRedCheckBoxValue] = useState<CheckBoxValueT>({
90+
one: false,
91+
two: false,
92+
three: false,
93+
four: false
94+
})
95+
96+
const getTextColor = (value: keyof CheckBoxValueT) => {
97+
return redCheckBoxValue[value] ? activeTextStyle : textStyle
98+
}
99+
const toggleRedCheckBox = (value: keyof CheckBoxValueT) =>
100+
setRedCheckBoxValue(prevState => {
101+
return {
102+
...prevState,
103+
[value]: !prevState[value]
104+
}
105+
})
106+
return (
107+
<SafeAreaView style={safeAreaViewStyle}>
108+
<View style={containerView}>
109+
<View style={headerContainer}>
110+
<Pressable
111+
style={({ pressed }) => [
112+
{
113+
opacity: pressed ? 0.7 : 1
114+
},
115+
pressableContainer
116+
]}
117+
onPress={navigation.goBack}
118+
>
119+
<Ionicons name={'chevron-back'} size={30} color={WHITE} />
120+
</Pressable>
121+
<View style={headerTextContainer}>
122+
<Text title="Brand" h1 textStyle={textStyle} />
123+
</View>
124+
</View>
125+
<View style={containerSearch}>
126+
<Search />
127+
</View>
128+
</View>
129+
<ScrollView style={[, { backgroundColor: BLACK }]}>
130+
<View style={containerBrand}>
131+
<View style={containerName}>
132+
<Text title={'adidas'} h3 textStyle={getTextColor('one')} />
133+
</View>
134+
<CheckBox
135+
value={redCheckBoxValue.one}
136+
isPrimary={true}
137+
onToggle={() => {
138+
toggleRedCheckBox('one')
139+
}}
140+
/>
141+
</View>
142+
<View style={containerBrand}>
143+
<View style={containerName}>
144+
<Text title={'adidas'} h3 textStyle={getTextColor('two')} />
145+
</View>
146+
<CheckBox
147+
value={redCheckBoxValue.two}
148+
isPrimary={true}
149+
onToggle={() => {
150+
toggleRedCheckBox('two')
151+
}}
152+
/>
153+
</View>
154+
</ScrollView>
155+
<View style={bottomViewContainer}>
156+
<View style={actionsContainer}>
157+
<Button isSmall={true} isOutline={true} title={'Discard'} onPress={() => {}} />
158+
<Button isSmall={true} isOutline={false} title={'Apply'} onPress={() => {}} />
159+
</View>
160+
</View>
161+
</SafeAreaView>
162+
)
163+
}
164+
165+
export { FiltersListScreen }

‎src/screens/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export * from './Tabs'
22
export * from './ExamplesScreen'
33
export * from './SuccessScreen'
4-
export * from './AuthScreen'
4+
export * from './AuthScreen'
5+
export * from './FiltersListScreen'

0 commit comments

Comments
 (0)