Skip to content

Commit ec37a16

Browse files
katsuhira02Danil
katsuhira02
and
Danil
authored
Filters screen add + mini fix some components (#103)
Co-authored-by: Danil <[email protected]>
1 parent 1b8b983 commit ec37a16

17 files changed

Lines changed: 552 additions & 153 deletions

File tree

‎src/UI.tsx‎

Lines changed: 55 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,10 @@ import {
2828
Search,
2929
Selector,
3030
Switch,
31-
Tag,
31+
TagBig,
3232
Fumi,
33-
Header
33+
Header,
34+
TagSmall
3435
} from './components'
3536
import Ionicons from 'react-native-vector-icons/Ionicons'
3637

@@ -63,16 +64,21 @@ function Home({ navigation, route }: HomeT) {
6364
const [isEnabled, setIsEnabled] = useState(false)
6465
const [redCheckBoxValue, setRedCheckBoxValue] = useState(false)
6566
const [whiteCheckBoxValue, setWhiteCheckBoxValue] = useState(false)
67+
const [isInvisibleBorder, setIsInvisibleBorder] = useState(false)
68+
const [isVisibleBorder, setIsVisibleBorder] = useState(false)
6669
const { navigate } = navigation
6770

6871
const toggleSwitch = () => setIsEnabled(previousState => !previousState)
6972
const toggleRedCheckBox = () => setRedCheckBoxValue(redCheckBoxValue => !redCheckBoxValue)
7073
const toggleWhiteCheckBox = () => setWhiteCheckBoxValue(whiteCheckBoxValue => !whiteCheckBoxValue)
74+
const toggleTagBig = () => setIsInvisibleBorder(previousState => !previousState)
75+
const toggleTagSmall = () => setIsVisibleBorder(previousState => !previousState)
7176
const openPopUp = () => navigate('POPUP')
7277
const openSuccess = () => navigate('SuccessScreen')
7378
const openAuth = () => navigate('SignUpScreen')
7479
const openFilterList = () => navigate('FiltersListScreen')
7580
const openMyProfile = () => navigate('MyProfileScreen')
81+
const openFiltersScreen = () => navigate('FiltersScreen')
7682

7783
return (
7884
<ScrollView style={container}>
@@ -106,7 +112,7 @@ function Home({ navigation, route }: HomeT) {
106112
<Space height={25} />
107113
<Text title="ButtonReview" h1 textStyle={textStyle} />
108114
<Space height={10} />
109-
<ButtonReview />
115+
<ButtonReview onPress={() => {}} />
110116
<Space height={25} />
111117
<Text title="CardImage" h1 textStyle={textStyle} />
112118
<Space height={10} />
@@ -136,11 +142,33 @@ function Home({ navigation, route }: HomeT) {
136142
<Space height={25} />
137143
<Text title="CardProduct" h1 textStyle={textStyle} />
138144
<Space height={10} />
139-
<CardProductBag />
145+
<CardProductBag
146+
price={'10'}
147+
color={'example'}
148+
imageUri={'https://demotivation.ru/wp-content/uploads/2020/05/255095-Sepik-2048x1383.jpg'}
149+
clothes={'example'}
150+
size={'example'}
151+
/>
140152
<Space height={10} />
141-
<CardProductCatalog />
153+
<CardProductCatalog
154+
color={'example'}
155+
clothes={'example'}
156+
size={'example'}
157+
price={'10'}
158+
brand={'example'}
159+
ratingList={[3, 3, 3]}
160+
imageUri={'https://demotivation.ru/wp-content/uploads/2020/05/255095-Sepik-2048x1383.jpg'}
161+
/>
142162
<Space height={20} />
143-
<CardProductOrderInfo />
163+
<CardProductOrderInfo
164+
color={'example'}
165+
clothes={'example'}
166+
size={'example'}
167+
price={'10'}
168+
brand={'example'}
169+
units={'1'}
170+
imageUri={'https://demotivation.ru/wp-content/uploads/2020/05/255095-Sepik-2048x1383.jpg'}
171+
/>
144172
<Space height={25} />
145173
<Text title="CardProductCover" h1 textStyle={textStyle} />
146174
<Space height={10} />
@@ -212,7 +240,14 @@ function Home({ navigation, route }: HomeT) {
212240
<Space height={25} />
213241
<Text title="ReviewCard" h1 textStyle={textStyle} />
214242
<Space height={10} />
215-
<ReviewCard />
243+
<ReviewCard
244+
name={'example'}
245+
review={'example'}
246+
date={'example'}
247+
onPress={() => {}}
248+
ratingList={[3, 3, 3]}
249+
avatarUri={'https://mediasole.ru/data/images/74/74212/150-1.jpg'}
250+
/>
216251
<Space height={25} />
217252
<Text title="Search" h1 textStyle={textStyle} />
218253
<Space height={10} />
@@ -228,29 +263,25 @@ function Home({ navigation, route }: HomeT) {
228263
<Space height={25} />
229264
<Text title="Tag" h1 textStyle={textStyle} />
230265
<Space height={10} />
231-
<Tag title={'Tag'} isOutline={true} isSmall={true} isWhiteText={true} />
266+
<TagBig title={'Tag'} onToggle={toggleTagBig} isInvisibleBorder={isInvisibleBorder} />
232267
<Space height={10} />
233-
<Tag title={'Tag'} isOutline={true} isSmall={false} isWhiteText={true} />
234-
<Space height={10} />
235-
<Tag title={'Tag'} isOutline={true} isSmall={false} isWhiteText={false} isWhiteButton={true} />
236-
<Space height={10} />
237-
<Tag title={'Tag'} isOutline={false} isSmall={true} isWhiteText={false} />
268+
<TagSmall title={'Tag'} onToggle={toggleTagSmall} isVisibleBorder={isVisibleBorder} />
238269
<Space height={25} />
239270
<Text title="SuccessScreen" h1 textStyle={textStyle} />
240271
<Space height={10} />
241-
<Button onPress={openSuccess} title={'Open SuccessScreen!'} />
272+
<Button isOutline={false} isSmall={false} onPress={openSuccess} title={'Open SuccessScreen!'} />
242273
<Space height={25} />
243274
<Text title="AuthScreen" h1 textStyle={textStyle} />
244275
<Space height={10} />
245-
<Button title={'Open AuthScreen!'} onPress={openAuth} />
276+
<Button isOutline={false} isSmall={false} title={'Open AuthScreen!'} onPress={openAuth} />
246277
<Space height={25} />
247278
<Text title="FiltersListScreen" h1 textStyle={textStyle} />
248279
<Space height={10} />
249-
<Button title={'Open FiltersListScreen!'} onPress={openFilterList} />
280+
<Button isOutline={false} isSmall={false} title={'Open FiltersListScreen!'} onPress={openFilterList} />
250281
<Space height={25} />
251282
<Text title="MyProfileScreen" h1 textStyle={textStyle} />
252283
<Space height={10} />
253-
<Button title={'Open MyProfile!'} onPress={openMyProfile} />
284+
<Button isOutline={false} isSmall={false} title={'Open MyProfile!'} onPress={openMyProfile} />
254285
<Space height={25} />
255286
<Text title="Fumi" h1 textStyle={textStyle} />
256287
<Space height={10} />
@@ -262,15 +293,19 @@ function Home({ navigation, route }: HomeT) {
262293
<Space height={10} />
263294
<Text title="h0" h1 textStyle={textStyle} />
264295
<Space height={10} />
265-
<Header h0 />
296+
<Header h0 onPress={() => {}} title={'Header'} />
266297
<Space height={10} />
267298
<Text title="h1" h1 textStyle={textStyle} />
268299
<Space height={10} />
269-
<Header h1 />
300+
<Header h1 onPress={() => {}} title={'Header'} />
270301
<Space height={10} />
271302
<Text title="h2" h1 textStyle={textStyle} />
272303
<Space height={10} />
273-
<Header h2 />
304+
<Header h2 onPress={() => {}} title={'Header'} />
305+
<Space height={25} />
306+
<Text title="FiltersScreen" h1 textStyle={textStyle} />
307+
<Space height={10} />
308+
<Button isOutline={false} isSmall={false} onPress={openFiltersScreen} title={'Open FiltersScreen!'} />
274309
<Space height={25} />
275310
<Text title="" h1 textStyle={textStyle} />
276311
<Space height={10} />

‎src/components/CardProduct/CardProductBag.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,16 @@ interface CardProductBagT {
6363
clothes: string
6464
size: string
6565
price: string
66+
imageUri: string
6667
}
6768

68-
function CardProductBag({ color = 'Undefined', clothes = 'Undefined', size = '0', price = '0' }: CardProductBagT) {
69+
function CardProductBag({
70+
color = 'Undefined',
71+
imageUri,
72+
clothes = 'Undefined',
73+
size = '0',
74+
price = '0'
75+
}: CardProductBagT) {
6976
const {
7077
container,
7178
imageStyle,
@@ -81,10 +88,7 @@ function CardProductBag({ color = 'Undefined', clothes = 'Undefined', size = '0'
8188

8289
return (
8390
<View style={container}>
84-
<Image
85-
style={imageStyle}
86-
source={{ uri: 'https://demotivation.ru/wp-content/uploads/2020/05/255095-Sepik-2048x1383.jpg' }}
87-
/>
91+
<Image style={imageStyle} source={{ uri: imageUri }} />
8892
<Space width={winWidth * 0.015} height={0} />
8993
<View style={infoContainer}>
9094
<Space height={vs(2)} />

‎src/components/CardProduct/CardProductCatalog.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,13 +55,15 @@ interface CardProductCatalogT {
5555
price: string
5656
brand: string
5757
ratingList: number[]
58+
imageUri: string
5859
}
5960

6061
function CardProductCatalog({
6162
clothes = 'Undefined',
6263
price = '0',
6364
brand = 'Undefined',
64-
ratingList = [4, 4, 4]
65+
ratingList = [4, 4, 4],
66+
imageUri
6567
}: CardProductCatalogT) {
6668
const {
6769
container,
@@ -76,10 +78,7 @@ function CardProductCatalog({
7678

7779
return (
7880
<View style={container}>
79-
<Image
80-
style={imageStyle}
81-
source={{ uri: 'https://demotivation.ru/wp-content/uploads/2020/05/255095-Sepik-2048x1383.jpg' }}
82-
/>
81+
<Image style={imageStyle} source={{ uri: imageUri }} />
8382
<Space width={winWidth * 0.015} height={0} />
8483
<View style={infoContainer}>
8584
<Space height={vs(8)} />

‎src/components/CardProduct/CardProductOrderInfo.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ interface CardProductOrderInfoT {
5353
price: string
5454
brand: string
5555
units: string
56+
imageUri: string
5657
}
5758

5859
function CardProductOrderInfo({
@@ -61,7 +62,8 @@ function CardProductOrderInfo({
6162
brand = 'Undefined',
6263
color = 'undefined',
6364
size = 'L',
64-
units = '1'
65+
units = '1',
66+
imageUri
6567
}: CardProductOrderInfoT) {
6668
const {
6769
container,
@@ -76,10 +78,7 @@ function CardProductOrderInfo({
7678

7779
return (
7880
<View style={container}>
79-
<Image
80-
style={imageStyle}
81-
source={{ uri: 'https://demotivation.ru/wp-content/uploads/2020/05/255095-Sepik-2048x1383.jpg' }}
82-
/>
81+
<Image style={imageStyle} source={{ uri: imageUri }} />
8382
<Space width={winWidth * 0.015} height={0} />
8483
<View style={infoContainer}>
8584
<Space height={vs(8)} />

‎src/components/ColorFilter/index.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React, { useState } from 'react'
2+
import { Pressable, StyleSheet, View } from 'react-native'
3+
import { vs } from 'react-native-size-matters'
4+
import { Text } from '../'
5+
import { WHITE } from '../../constants'
6+
7+
const styles = StyleSheet.create({
8+
container: {
9+
width: vs(40),
10+
height: vs(40),
11+
borderRadius: 100,
12+
borderWidth: 1,
13+
alignItems: 'center',
14+
justifyContent: 'center',
15+
marginLeft: vs(5),
16+
marginTop: vs(5),
17+
marginBottom: vs(5),
18+
marginRight: vs(5)
19+
},
20+
containerColor: {
21+
width: vs(32),
22+
height: vs(32),
23+
borderRadius: 100,
24+
alignSelf: 'center',
25+
justifyContent: 'center'
26+
}
27+
})
28+
29+
interface ColorFilterT {
30+
color: string
31+
isActiveBorder: boolean
32+
onToggle: () => void
33+
}
34+
35+
function ColorFilter({ color, isActiveBorder, onToggle }: ColorFilterT) {
36+
const { container, containerColor } = styles
37+
return (
38+
<Pressable style={[container, { borderColor: isActiveBorder ? WHITE : 'transparent' }]} onPress={onToggle}>
39+
<View style={[containerColor, { backgroundColor: color }]} />
40+
</Pressable>
41+
)
42+
}
43+
44+
export { ColorFilter }

‎src/components/Fumi/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ class Fumi extends BaseInput {
9797
styles.separator,
9898
{
9999
height: inputHeight,
100-
left: iconWidth + winWidth * 0.03
100+
left: iconWidth + winWidth * 0.07
101101
}
102102
]}
103103
/>

‎src/components/PressableNavigation/index.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React from 'react'
22
import { Pressable, StyleSheet, View } from 'react-native'
3+
import { vs } from 'react-native-size-matters'
34
import Ionicons from 'react-native-vector-icons/Ionicons'
45
import { GRAY, GRAY_OPACITY, WHITE } from '../../constants'
56
import { Text, Space } from '../index'
67

78
const styles = StyleSheet.create({
89
container: {
910
width: '100%',
10-
height: 90,
11+
height: vs(70),
1112
alignItems: 'center',
1213
flexDirection: 'row',
1314
justifyContent: 'space-between',
@@ -17,14 +18,14 @@ const styles = StyleSheet.create({
1718
},
1819
textStyle: {
1920
color: WHITE,
20-
paddingLeft: 20
21+
paddingLeft: vs(16)
2122
},
22-
textStyle1: {
23+
textStyleInfo: {
2324
color: GRAY,
24-
paddingLeft: 20
25+
paddingLeft: vs(16)
2526
},
2627
iconContainer: {
27-
paddingRight: 20
28+
paddingRight: vs(16)
2829
}
2930
})
3031

@@ -39,16 +40,16 @@ function PressableNavigation({
3940
nameTitle = 'default name',
4041
onPress
4142
}: PressableNavigationT) {
42-
const { container, textStyle, iconContainer, textStyle1 } = styles
43+
const { container, textStyle, iconContainer, textStyleInfo } = styles
4344
return (
4445
<View style={container}>
4546
<View>
46-
<Text title={nameTitle} h2 textStyle={textStyle} />
47-
<Space height={7} />
48-
<Text title={infoTitle} h6 textStyle={textStyle1} />
47+
<Text title={nameTitle} h3 textStyle={textStyle} />
48+
<Space height={vs(3)} />
49+
<Text title={infoTitle} h7 textStyle={textStyleInfo} />
4950
</View>
5051
<Pressable onPress={onPress} style={({ pressed }) => [{ opacity: pressed ? 0.7 : 1 }, iconContainer]}>
51-
<Ionicons name={'chevron-forward'} size={25} color={GRAY} />
52+
<Ionicons name={'chevron-forward'} size={vs(21)} color={GRAY} />
5253
</Pressable>
5354
</View>
5455
)

0 commit comments

Comments
 (0)