Skip to content

Commit 52ca27b

Browse files
katsuhira02Danil
katsuhira02
and
Danil
authored
CardAdress component add + mini-upgrade Space(+width prop) (#90)
Co-authored-by: Danil <[email protected]>
1 parent 707d81f commit 52ca27b

5 files changed

Lines changed: 84 additions & 9 deletions

File tree

‎src/UI.tsx‎

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

66
const styles = StyleSheet.create({
77
container: {
@@ -38,7 +38,11 @@ function Home({ navigation, route }: HomeT) {
3838
<View style={container}>
3939
<Text title="CategoryCard" h0 />
4040
<Space height={15} />
41-
<CardImage imageUri="https://i.ebayimg.com/00/s/NzQzWDczMQ==/z/ooQAAOSwAolakPD5/$_57.JPG?set_id=8800005007" />
41+
<AdressCard
42+
name="John Doe"
43+
adress={`3 Newbridge Court\nChino Hills, CA 91709, United States`}
44+
onPressEdit={() => {}}
45+
/>
4246
</View>
4347
)
4448
}

‎src/components/AdressCard/index.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React, { useState } from 'react'
2+
import { Pressable, StyleSheet, View } from 'react-native'
3+
import { DARK, PRIMARY, WHITE } from '../../constants'
4+
import { Text, CheckBox, Space } from '../index'
5+
6+
const styles = StyleSheet.create({
7+
container: {
8+
width: 343,
9+
height: 140,
10+
borderRadius: 8,
11+
backgroundColor: DARK
12+
},
13+
textStyle: {
14+
color: WHITE
15+
},
16+
textStyleEdit: {
17+
color: PRIMARY
18+
},
19+
viewContainer1: {
20+
flexDirection: 'row',
21+
justifyContent: 'space-between',
22+
marginTop: 15,
23+
marginLeft: 20,
24+
marginRight: 20
25+
},
26+
viewContainer2: {
27+
marginLeft: 20,
28+
marginTop: 10
29+
},
30+
viewContainer3: {
31+
flexDirection: 'row',
32+
alignItems: 'center'
33+
}
34+
})
35+
36+
interface AdressCardT {
37+
name: string
38+
adress: string
39+
onPressEdit: () => void
40+
}
41+
42+
function AdressCard({ name, adress, onPressEdit }: AdressCardT) {
43+
const { container, textStyle, textStyleEdit, viewContainer1, viewContainer2, viewContainer3 } = styles
44+
const [redCheckBoxValue, setRedCheckBoxValue] = useState(false)
45+
46+
const toggleRedCheckBox = () => setRedCheckBoxValue(redCheckBoxValue => !redCheckBoxValue)
47+
48+
return (
49+
<View style={container}>
50+
<View style={viewContainer1}>
51+
<Text title={name} h4 textStyle={textStyle} />
52+
<Pressable onPress={onPressEdit} style={({ pressed }) => [{ opacity: pressed ? 0.8 : 1 }]}>
53+
<Text textStyle={textStyleEdit} title={'Edit'} h4 />
54+
</Pressable>
55+
</View>
56+
<View style={viewContainer2}>
57+
<Text title={adress} h4 textStyle={textStyle} />
58+
</View>
59+
<Space height={20} />
60+
<View style={viewContainer3}>
61+
<Space height={0} width={20} />
62+
<CheckBox isPrimary={false} onToggle={toggleRedCheckBox} value={redCheckBoxValue} />
63+
<Text title={' Use as the shipping adress'} textStyle={textStyle} h4 />
64+
</View>
65+
</View>
66+
)
67+
}
68+
69+
export { AdressCard }

‎src/components/CheckBox/index.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import React, { FC, useEffect, useMemo, useState } from 'react'
2-
import { StyleSheet, Animated, Easing, Pressable } from 'react-native'
2+
import { StyleSheet, Animated, Easing, Pressable, StyleProp, ViewStyle } from 'react-native'
33
import { Check } from './icons/Check'
44
import { GRAY, PRIMARY, WHITE, DARK } from '../../constants'
55

66
export interface CheckBoxProps {
77
value: boolean
88
isPrimary: boolean
99
onToggle: (value: boolean) => void
10+
CheckBoxStyle?: StyleProp<ViewStyle>
1011
}
1112

1213
const animationToggle = (value: boolean) => new Animated.Value(value ? 1 : 0)
1314

1415
export const CheckBox: FC<CheckBoxProps> = (props: CheckBoxProps) => {
15-
const { value, onToggle, isPrimary } = props
16+
const { value, onToggle, isPrimary, CheckBoxStyle } = props
1617
const [timer] = useState<Animated.Value>(animationToggle(value))
1718
const [previousValue, setPreviousValue] = useState<boolean>(value)
1819
const onToggleHandler = React.useMemo(() => () => onToggle && onToggle(!value), [onToggle, value])
@@ -57,7 +58,8 @@ export const CheckBox: FC<CheckBoxProps> = (props: CheckBoxProps) => {
5758
backgroundColor: animatedBgStyle,
5859
borderColor: animatedBorderColorStyle,
5960
borderWidth
60-
}
61+
},
62+
CheckBoxStyle
6163
]}
6264
>
6365
<Check color={iconColor} />

‎src/components/Space/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@ import { View } from 'react-native'
33

44
interface SpaceT {
55
height: number
6+
width?: number
67
}
78

8-
const Space = memo<SpaceT>(({ height }) => (
9-
<View style={{ height: height || 30 }} />
10-
))
9+
const Space = memo<SpaceT>(({ height, width }) => <View style={{ height: height || 30, width: width || 0 }} />)
1110

1211
export { Space }

‎src/components/index.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,5 @@ export * from './PopUp'
1313
export * from './CardOrder'
1414
export * from './Filter'
1515
export * from './CategoryCard'
16-
export * from './CardImage'
16+
export * from './CardImage'
17+
export * from './AdressCard'

0 commit comments

Comments
 (0)