Skip to content

Commit cf12804

Browse files
MinhOmegaMinhOmega
committed
feat: update bottom border color props and option remove items selected & hidden dropdown icon when don't toggle and callback func when editable
1 parent d3776a7 commit cf12804

5 files changed

Lines changed: 120 additions & 104 deletions

File tree

‎App.tsx‎

Lines changed: 92 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,104 @@
1-
/**
2-
* Sample React Native App
3-
* https://github.com/facebook/react-native
4-
*
5-
* Generated with the TypeScript template
6-
* https://github.com/react-native-community/react-native-template-typescript
7-
*
8-
* @format
9-
*/
1+
/* eslint-disable react-native/no-inline-styles */
2+
import React, { useState } from 'react'
3+
import { Text, View } from 'react-native'
4+
import { xorBy } from 'lodash'
5+
import { SelectBox } from './lib'
6+
import { ItemSelected } from './lib/src/constants/types'
107

11-
import React from 'react'
12-
import { SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, useColorScheme, View } from 'react-native'
8+
// Options data must contain 'item' & 'id' keys
139

14-
import {
15-
Colors,
16-
DebugInstructions,
17-
Header,
18-
LearnMoreLinks,
19-
ReloadInstructions
20-
} from 'react-native/Libraries/NewAppScreen'
10+
const K_OPTIONS: ItemSelected[] = [
11+
{
12+
item: 'Juventus',
13+
id: 'JUVE'
14+
},
15+
{
16+
item: 'Real Madrid',
17+
id: 'RM'
18+
},
19+
{
20+
item: 'Barcelona',
21+
id: 'BR'
22+
},
23+
{
24+
item: 'PSG',
25+
id: 'PSG'
26+
},
27+
{
28+
item: 'FC Bayern Munich',
29+
id: 'FBM'
30+
},
31+
{
32+
item: 'Manchester United FC',
33+
id: 'MUN'
34+
},
35+
{
36+
item: 'Manchester City FC',
37+
id: 'MCI'
38+
},
39+
{
40+
item: 'Everton FC',
41+
id: 'EVE'
42+
},
43+
{
44+
item: 'Tottenham Hotspur FC',
45+
id: 'TOT'
46+
},
47+
{
48+
item: 'Chelsea FC',
49+
id: 'CHE'
50+
},
51+
{
52+
item: 'Liverpool FC',
53+
id: 'LIV'
54+
},
55+
{
56+
item: 'Arsenal FC',
57+
id: 'ARS'
58+
},
2159

22-
const Section: React.FC<{
23-
title: string
24-
}> = ({ children, title }) => {
25-
const isDarkMode = useColorScheme() === 'dark'
60+
{
61+
item: 'Leicester City FC',
62+
id: 'LEI'
63+
}
64+
]
65+
66+
function App() {
67+
const [selectedTeam, setSelectedTeam] = useState<ItemSelected>({})
68+
const [selectedTeams, setSelectedTeams] = useState<ItemSelected[]>([])
2669
return (
27-
<View style={styles.sectionContainer}>
28-
<Text
29-
style={[
30-
styles.sectionTitle,
31-
{
32-
color: isDarkMode ? Colors.white : Colors.black
33-
}
34-
]}
35-
>
36-
{title}
37-
</Text>
38-
<Text
39-
style={[
40-
styles.sectionDescription,
41-
{
42-
color: isDarkMode ? Colors.light : Colors.dark
43-
}
44-
]}
45-
>
46-
{children}
47-
</Text>
70+
<View style={{ margin: 30 }}>
71+
<View style={{ width: '100%', alignItems: 'center' }}>
72+
<Text style={{ fontSize: 30, paddingBottom: 20 }}>Demos</Text>
73+
</View>
74+
<Text style={{ fontSize: 20, paddingBottom: 10 }}>Select Demo</Text>
75+
<SelectBox
76+
label='Select single'
77+
options={K_OPTIONS}
78+
value={selectedTeam}
79+
onChange={onChange()}
80+
hideInputFilter={false}
81+
/>
82+
<View style={{ height: 40 }} />
83+
<Text style={{ fontSize: 20, paddingBottom: 10 }}>MultiSelect Demo</Text>
84+
<SelectBox
85+
label='Select multiple'
86+
options={K_OPTIONS}
87+
selectedValues={selectedTeams}
88+
onMultiSelect={onMultiChange()}
89+
onTapClose={onMultiChange()}
90+
isMulti
91+
/>
4892
</View>
4993
)
50-
}
5194

52-
const App = () => {
53-
const isDarkMode = useColorScheme() === 'dark'
54-
55-
const backgroundStyle = {
56-
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter
95+
function onMultiChange() {
96+
return (item: ItemSelected) => setSelectedTeams(xorBy(selectedTeams, [item], 'id'))
5797
}
5898

59-
return (
60-
<SafeAreaView style={backgroundStyle}>
61-
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
62-
<ScrollView contentInsetAdjustmentBehavior='automatic' style={backgroundStyle}>
63-
<Header />
64-
<View
65-
style={{
66-
backgroundColor: isDarkMode ? Colors.black : Colors.white
67-
}}
68-
>
69-
<Section title='Step One'>
70-
Edit <Text style={styles.highlight}>App.tsx</Text> to change this screen and then come back to see your
71-
edits.
72-
</Section>
73-
<Section title='See Your Changes'>
74-
<ReloadInstructions />
75-
</Section>
76-
<Section title='Debug'>
77-
<DebugInstructions />
78-
</Section>
79-
<Section title='Learn More'>Read the docs to discover what to do next:</Section>
80-
<LearnMoreLinks />
81-
</View>
82-
</ScrollView>
83-
</SafeAreaView>
84-
)
85-
}
86-
87-
const styles = StyleSheet.create({
88-
sectionContainer: {
89-
marginTop: 32,
90-
paddingHorizontal: 24
91-
},
92-
sectionTitle: {
93-
fontSize: 24,
94-
fontWeight: '600'
95-
},
96-
sectionDescription: {
97-
marginTop: 8,
98-
fontSize: 18,
99-
fontWeight: '400'
100-
},
101-
highlight: {
102-
fontWeight: '700'
99+
function onChange() {
100+
return (val: ItemSelected) => setSelectedTeam(val)
103101
}
104-
})
102+
}
105103

106104
export default App

lib/index.tsx renamed to lib/SelectBox.tsx

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,13 @@ const SelectBox: React.FC<SelectBoxProps> = ({
3131
multiListEmptyLabelStyle,
3232
listEmptyLabelStyle,
3333
selectedItemStyle,
34+
removeItemsSelected,
35+
editStatus,
3436
listEmptyText = 'No results found',
3537
...props
3638
}) => {
3739
const {
40+
noEditable,
3841
selectIcon,
3942
label,
4043
inputPlaceholder = 'Search',
@@ -47,6 +50,7 @@ const SelectBox: React.FC<SelectBoxProps> = ({
4750
arrowIconColor = colors.secondary,
4851
searchIconColor = colors.secondary,
4952
toggleIconColor = colors.secondary,
53+
bottomBarColor = colors.white,
5054
searchInputProps,
5155
multiSelectInputFieldProps,
5256
listOptionProps = {},
@@ -108,9 +112,11 @@ const SelectBox: React.FC<SelectBoxProps> = ({
108112
return (
109113
<View style={[styles.kMultiOptionContainerStyle, multiOptionContainerStyle]}>
110114
<Text style={[styles.kMultiOptionsLabelStyle, multiOptionsLabelStyle]}>{label?.item}</Text>
111-
<TouchableOpacity style={styles.groupItem} hitSlop={hitSlop} onPress={onPressItem()}>
112-
<Icon name='closeCircle' fill='#fff' width={21} height={21} />
113-
</TouchableOpacity>
115+
{removeItemsSelected ? (
116+
<TouchableOpacity hitSlop={hitSlop} onPress={onPressItem()}>
117+
<Icon name='closeCircle' fill='#fff' width={21} height={21} />
118+
</TouchableOpacity>
119+
) : null}
114120
</View>
115121
)
116122
}
@@ -121,6 +127,7 @@ const SelectBox: React.FC<SelectBoxProps> = ({
121127
)
122128

123129
function onPressShowOptions() {
130+
editStatus ? editStatus(showOptions) : null
124131
return () => setShowOptions(!showOptions)
125132
}
126133
function multiListEmptyComponent() {
@@ -174,7 +181,7 @@ const SelectBox: React.FC<SelectBoxProps> = ({
174181
}}
175182
>
176183
<Text style={[styles.kLabelStyle, labelStyle]}>{label}</Text>
177-
<View style={[styles.kContainerStyle, containerStyle]}>
184+
<View style={[styles.kContainerStyle, containerStyle, { borderColor: bottomBarColor }]}>
178185
<View style={styles.kContainer}>
179186
{isMulti ? (
180187
<FlatList
@@ -200,9 +207,11 @@ const SelectBox: React.FC<SelectBoxProps> = ({
200207
</TouchableOpacity>
201208
)}
202209
</View>
203-
<TouchableOpacity onPress={onPressShowOptions()} hitSlop={hitSlop}>
204-
{selectIcon ? selectIcon : <Icon name={showOptions ? 'upArrow' : 'downArrow'} fill={arrowIconColor} />}
205-
</TouchableOpacity>
210+
{noEditable ? null : (
211+
<TouchableOpacity onPress={onPressShowOptions()} hitSlop={hitSlop}>
212+
{selectIcon ? selectIcon : <Icon name={showOptions ? 'upArrow' : 'downArrow'} fill={arrowIconColor} />}
213+
</TouchableOpacity>
214+
)}
206215
</View>
207216
{/* Options wrapper */}
208217
{showOptions && (
@@ -295,7 +304,9 @@ const styles = StyleSheet.create({
295304
},
296305
kMultiOptionsLabelStyle: {
297306
fontSize: 10,
298-
color: colors.white
307+
color: colors.white,
308+
padding: 4,
309+
marginRight: 5
299310
},
300311
kMultiListEmptyLabelStyle: {
301312
fontSize: 17,

‎lib/index.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export declare type SelectBoxProps = {
4646
removeItemsSelected?: boolean
4747
editStatus?(item: any): void
4848
noEditable?: boolean
49+
bottomBarColor?: string
4950
}
5051

5152
declare const SelectBox: React.FC<SelectBoxProps>

‎lib/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import SelectBox from './SelectBox'
2+
export { SelectBox }

‎lib/src/constants/types.ts‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ export interface SelectBoxProps {
2828
inputPlaceholder?: string
2929
hideInputFilter?: boolean
3030
width?: number | string
31-
isMulti: boolean
31+
isMulti?: boolean
3232
options: any | ItemSelected[]
3333
value?: ItemSelected
34-
selectedValues: any | ItemSelected[]
34+
selectedValues?: any | ItemSelected[]
3535
arrowIconColor?: string
3636
searchIconColor?: string
3737
toggleIconColor?: string
@@ -41,4 +41,8 @@ export interface SelectBoxProps {
4141
onChange?(item?: any): void
4242
onMultiSelect?(item?: any): void
4343
onTapClose?(item?: any): void
44+
removeItemsSelected?: boolean
45+
editStatus?(item: any): void
46+
noEditable?: boolean
47+
bottomBarColor?: string
4448
}

0 commit comments

Comments
 (0)