-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.tsx
More file actions
116 lines (106 loc) · 2.28 KB
/
index.tsx
File metadata and controls
116 lines (106 loc) · 2.28 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import React, { useState, memo } from 'react'
import { View, StyleSheet, TouchableOpacity } from 'react-native'
import Emoji from 'react-native-emoji'
import { CardBorder } from '../CardBorder'
const emojiList = [
{
id: 1,
title: 'page',
name: ':page_facing_up:'
},
{
id: 2,
title: 'briefcase',
name: ':briefcase:'
},
{
id: 3,
title: 'cap',
name: ':mortar_board:'
},
{
id: 4,
title: 'star',
name: ':star:'
}
]
const numbers = ['one', 'two', 'three', 'four']
const emoji = {
textAlign: 'center',
fontWeight: 'bold',
fontSize: 20,
padding: 1
}
const styles = StyleSheet.create({
cardBorder: {
paddingVertical: 5,
paddingHorizontal: 20
},
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-start'
},
page: {
...emoji
},
briefcase: {
...emoji
},
cap: {
...emoji
},
star: {
...emoji
},
default: {
textAlign: 'center',
fontWeight: 'bold',
fontSize: 20
}
})
interface TabDeveloperT {
children?: React.ReactNode
setTab?: (number: number) => void
}
interface TabDevState {
one: boolean
two: boolean
three: boolean
four: boolean
}
const TabDeveloper = memo<TabDeveloperT>(({ children, setTab }) => {
const [value, setValue] = useState<TabDevState>({
one: true,
two: false,
three: false,
four: false
})
const _onChangeState = (number: number) => (): void => {
const defaultObject = numbers.reduce((acc, el: string) => ({ ...acc, [el]: false }), {})
setTab(number - 1)
setValue({ ...defaultObject, [numbers[number - 1]]: true })
}
const { container, cardBorder } = styles
return (
<>
<CardBorder viewStyle={cardBorder}>
<View style={container}>
{emojiList.map(({ id, title, name }) => {
const check = value[numbers[id - 1]]
return (
<View style={{ opacity: check ? 1 : 0.5 }} key={id}>
<TouchableOpacity key={id} onPress={_onChangeState(id)}>
<Emoji name={name} style={check ? styles[title] : styles.default} />
</TouchableOpacity>
</View>
)
})}
</View>
</CardBorder>
{children}
</>
)
})
export { TabDeveloper }