Skip to content

Commit 40a859b

Browse files
sauzy34sauzy34
sauzy34
authored and
sauzy34
committed
☑️ Add arrowIconColor, searchIconColor, toggleIconColor props
1 parent bd6daaa commit 40a859b

File tree

6 files changed

+106
-84
lines changed

6 files changed

+106
-84
lines changed

‎App.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState } from 'react'
22
import { Text, View } from 'react-native'
3-
import SelectBox from 'react-native-multi-selectbox'
3+
import SelectBox from './lib'
44
import { xorBy } from 'lodash'
55

66
// Options data must contain 'item' & 'id' keys
@@ -11,7 +11,7 @@ const K_OPTIONS = [
1111
id: 'JUVE',
1212
},
1313
{
14-
item: 'Real Madrid',
14+
item: 'Real Madrid Real Madrid Real Madrid Real Madrid',
1515
id: 'RM',
1616
},
1717
{
@@ -62,8 +62,8 @@ const K_OPTIONS = [
6262
]
6363

6464
function App() {
65-
const [selectedLocations, setSelectedLocations] = useState({})
66-
const [selectedValues, setSelectedValues] = useState([])
65+
const [selectedTeam, setSelectedTeam] = useState({})
66+
const [selectedTeams, setSelectedTeams] = useState([])
6767
return (
6868
<View style={{ margin: 30 }}>
6969
<View style={{ width: '100%', alignItems: 'center' }}>
@@ -73,7 +73,7 @@ function App() {
7373
<SelectBox
7474
label="Select single"
7575
options={K_OPTIONS}
76-
value={selectedLocations}
76+
value={selectedTeam}
7777
onChange={onChange()}
7878
hideInputFilter={false}
7979
/>
@@ -82,7 +82,7 @@ function App() {
8282
<SelectBox
8383
label="Select multiple"
8484
options={K_OPTIONS}
85-
selectedValues={selectedValues}
85+
selectedValues={selectedTeams}
8686
onMultiSelect={onMultiChange()}
8787
onTapClose={onMultiChange()}
8888
isMulti
@@ -91,11 +91,11 @@ function App() {
9191
)
9292

9393
function onMultiChange() {
94-
return (item) => setSelectedValues(xorBy(selectedValues, [item], 'id'))
94+
return (item) => setSelectedTeams(xorBy(selectedTeams, [item], 'id'))
9595
}
9696

9797
function onChange() {
98-
return (val) => setSelectedLocations(val)
98+
return (val) => setSelectedTeam(val)
9999
}
100100
}
101101

‎README.md‎

Lines changed: 59 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
# react-native-multi-selectbox
1+
# react-native-multi-selectbox
22

33
[![npm version](https://badge.fury.io/js/react-native-multi-selectbox.svg)](https://badge.fury.io/js/react-native-multi-selectbox)
44
[![npm downloads](https://img.shields.io/npm/dm/react-native-multi-selectbox.svg?style=flat-square)](https://www.npmjs.com/package/react-native-multi-selectbox)
55

6-
Platform independent (Android / iOS) Selextbox | Picker | Multi-select | Multi-picker. The idea is to bring out the common user-interface & user-experience on both platforms.
6+
Platform independent (Android / iOS) Selextbox | Picker | Multi-select | Multi-picker. The idea is to bring out the common user-interface & user-experience on both platforms.
77

88
![demo](https://raw.githubusercontent.com/sauzy34/react-native-multi-selectbox/master/demo.gif)
99

@@ -22,66 +22,70 @@ or
2222
```
2323
import React, { useState } from 'react'
2424
import { Text, View } from 'react-native'
25-
import SelectBox from 'react-native-multi-selectbox'
25+
import SelectBox from './lib'
2626
import { xorBy } from 'lodash'
27+
2728
// Options data must contain 'item' & 'id' keys
29+
2830
const K_OPTIONS = [
2931
{
3032
item: 'Juventus',
31-
id: 'JUVE'
33+
id: 'JUVE',
3234
},
3335
{
3436
item: 'Real Madrid',
35-
id: 'RM'
37+
id: 'RM',
3638
},
3739
{
3840
item: 'Barcelona',
39-
id: 'BR'
41+
id: 'BR',
4042
},
4143
{
4244
item: 'PSG',
43-
id: 'PSG'
45+
id: 'PSG',
4446
},
4547
{
4648
item: 'FC Bayern Munich',
47-
id: 'FBM'
49+
id: 'FBM',
4850
},
4951
{
5052
item: 'Manchester United FC',
51-
id: 'MUN'
53+
id: 'MUN',
5254
},
5355
{
5456
item: 'Manchester City FC',
55-
id: 'MCI'
57+
id: 'MCI',
5658
},
5759
{
5860
item: 'Everton FC',
59-
id: 'EVE'
61+
id: 'EVE',
6062
},
6163
{
6264
item: 'Tottenham Hotspur FC',
63-
id: 'TOT'
65+
id: 'TOT',
6466
},
6567
{
6668
item: 'Chelsea FC',
67-
id: 'CHE'
69+
id: 'CHE',
6870
},
6971
{
7072
item: 'Liverpool FC',
71-
id: 'LIV'
73+
id: 'LIV',
7274
},
7375
{
7476
item: 'Arsenal FC',
75-
id: 'ARS'
77+
id: 'ARS',
7678
},
79+
7780
{
7881
item: 'Leicester City FC',
79-
id: 'LEI'
80-
}
82+
id: 'LEI',
83+
},
8184
]
85+
8286
function App() {
83-
const [selectedLocations, setSelectedLocations] = useState({})
84-
const [selectedValues, setSelectedValues] = useState([])
87+
const [selectedTeam, setSelectedTeam] = useState({})
88+
const [selectedTeams, setSelectedTeams] = useState([])
8589
return (
8690
<View style={{ margin: 30 }}>
8791
<View style={{ width: '100%', alignItems: 'center' }}>
@@ -91,7 +95,7 @@ function App() {
9195
<SelectBox
9296
label="Select single"
9397
options={K_OPTIONS}
94-
value={selectedLocations}
98+
value={selectedTeam}
9599
onChange={onChange()}
96100
hideInputFilter={false}
97101
/>
@@ -100,46 +104,54 @@ function App() {
100104
<SelectBox
101105
label="Select multiple"
102106
options={K_OPTIONS}
103-
selectedValues={selectedValues}
107+
selectedValues={selectedTeams}
104108
onMultiSelect={onMultiChange()}
105109
onTapClose={onMultiChange()}
106110
isMulti
107111
/>
108112
</View>
109113
)
114+
110115
function onMultiChange() {
111-
return item => setSelectedValues(xorBy(selectedValues, [item], 'id'))
116+
return (item) => setSelectedTeams(xorBy(selectedTeams, [item], 'id'))
112117
}
118+
113119
function onChange() {
114-
return val => setSelectedLocations(val)
120+
return (val) => setSelectedTeam(val)
115121
}
116122
}
123+
117124
export default App
125+
126+
118127
```
119-
| Prop | Type | Default Value |
120-
| ------------- |:-------------:| -----:|
121-
| label | String | Label |
122-
| inputPlaceholder | string | Label |
123-
| width | string | "100%" |
124-
| viewMargin | string | "0px" |
125-
| isMulti | boolean | false |
126-
| hideInputFilter | boolean | true |
127-
| selectedValues | array | [] |
128-
| value | array | [] |
129-
| selectIcon | component | <Icon name={'downArrow'} /> |
130-
| labelStyle | style object | Default style |
131-
| containerStyle | style object | Default style |
132-
| inputFilterContainerStyle | style object | Default style |
133-
| inputFilterStyle | style object | Default style |
134-
| optionsLabelStyle | style object | Default style |
135-
| optionContainerStyle | style object | Default style |
136-
| multiOptionContainerStyle | style object | Default style |
137-
| multiOptionsLabelStyle | style object | Default style |
138-
| multiListEmptyLabelStyle | style object | Default style |
139-
| listEmptyLabelStyle | style object | Default style |
140-
| selectedItemStyle | style object | Default style |
141-
| options | array | ``` [{ item: 'Juventus', id: 'JUVE'},{ item: 'Real Madrid', id: 'RM'},{ item: 'Barcelona', id: 'BR'},{ item: 'PSG', id: 'PSG'},{ item: 'FC Bayern Munich', id: 'FBM'}] ```|
142128

129+
| Prop | Type | Default Value |
130+
| ------------------------- | :----------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
131+
| label | String | Label |
132+
| inputPlaceholder | string | Label |
133+
| width | string | "100%" |
134+
| viewMargin | string | "0px" |
135+
| isMulti | boolean | false |
136+
| hideInputFilter | boolean | true |
137+
| selectedValues | array | [] |
138+
| value | array | [] |
139+
| selectIcon | component | <Icon name={'downArrow'} /> |
140+
| labelStyle | style object | Default style |
141+
| containerStyle | style object | Default style |
142+
| inputFilterContainerStyle | style object | Default style |
143+
| inputFilterStyle | style object | Default style |
144+
| optionsLabelStyle | style object | Default style |
145+
| optionContainerStyle | style object | Default style |
146+
| multiOptionContainerStyle | style object | Default style |
147+
| multiOptionsLabelStyle | style object | Default style |
148+
| multiListEmptyLabelStyle | style object | Default style |
149+
| listEmptyLabelStyle | style object | Default style |
150+
| selectedItemStyle | style object | Default style |
151+
| arrowIconColor | color string | Default primary color |
152+
| searchIconColor | color string | Default primary color |
153+
| toggleIconColor | color string | Default primary color |
154+
| options | array | `[{ item: 'Juventus', id: 'JUVE'},{ item: 'Real Madrid', id: 'RM'},{ item: 'Barcelona', id: 'BR'},{ item: 'PSG', id: 'PSG'},{ item: 'FC Bayern Munich', id: 'FBM'}]` |
143155

144156
## Want to be a contributor? 👷🏼‍♂️👷🏼‍♀️
145157

@@ -151,4 +163,4 @@ You can submit a request on https://github.com/sauzy34/react-native-multi-select
151163

152164
## Support & Share 💆🏼‍♂️
153165

154-
Please star the repository on Github to enhance the reach to more developers.
166+
Please star the repository on Github to enhance the reach to more developers.

‎lib/README.md‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -22,70 +22,70 @@ or
2222
```
2323
import React, { useState } from 'react'
2424
import { Text, View } from 'react-native'
25-
import SelectBox from 'react-native-multi-selectbox'
25+
import SelectBox from './lib'
2626
import { xorBy } from 'lodash'
2727
2828
// Options data must contain 'item' & 'id' keys
2929
3030
const K_OPTIONS = [
3131
{
3232
item: 'Juventus',
33-
id: 'JUVE'
33+
id: 'JUVE',
3434
},
3535
{
3636
item: 'Real Madrid',
37-
id: 'RM'
37+
id: 'RM',
3838
},
3939
{
4040
item: 'Barcelona',
41-
id: 'BR'
41+
id: 'BR',
4242
},
4343
{
4444
item: 'PSG',
45-
id: 'PSG'
45+
id: 'PSG',
4646
},
4747
{
4848
item: 'FC Bayern Munich',
49-
id: 'FBM'
49+
id: 'FBM',
5050
},
5151
{
5252
item: 'Manchester United FC',
53-
id: 'MUN'
53+
id: 'MUN',
5454
},
5555
{
5656
item: 'Manchester City FC',
57-
id: 'MCI'
57+
id: 'MCI',
5858
},
5959
{
6060
item: 'Everton FC',
61-
id: 'EVE'
61+
id: 'EVE',
6262
},
6363
{
6464
item: 'Tottenham Hotspur FC',
65-
id: 'TOT'
65+
id: 'TOT',
6666
},
6767
{
6868
item: 'Chelsea FC',
69-
id: 'CHE'
69+
id: 'CHE',
7070
},
7171
{
7272
item: 'Liverpool FC',
73-
id: 'LIV'
73+
id: 'LIV',
7474
},
7575
{
7676
item: 'Arsenal FC',
77-
id: 'ARS'
77+
id: 'ARS',
7878
},
7979
8080
{
8181
item: 'Leicester City FC',
82-
id: 'LEI'
83-
}
82+
id: 'LEI',
83+
},
8484
]
8585
8686
function App() {
87-
const [selectedLocations, setSelectedLocations] = useState({})
88-
const [selectedValues, setSelectedValues] = useState([])
87+
const [selectedTeam, setSelectedTeam] = useState({})
88+
const [selectedTeams, setSelectedTeams] = useState([])
8989
return (
9090
<View style={{ margin: 30 }}>
9191
<View style={{ width: '100%', alignItems: 'center' }}>
@@ -95,7 +95,7 @@ function App() {
9595
<SelectBox
9696
label="Select single"
9797
options={K_OPTIONS}
98-
value={selectedLocations}
98+
value={selectedTeam}
9999
onChange={onChange()}
100100
hideInputFilter={false}
101101
/>
@@ -104,7 +104,7 @@ function App() {
104104
<SelectBox
105105
label="Select multiple"
106106
options={K_OPTIONS}
107-
selectedValues={selectedValues}
107+
selectedValues={selectedTeams}
108108
onMultiSelect={onMultiChange()}
109109
onTapClose={onMultiChange()}
110110
isMulti
@@ -113,16 +113,17 @@ function App() {
113113
)
114114
115115
function onMultiChange() {
116-
return item => setSelectedValues(xorBy(selectedValues, [item], 'id'))
116+
return (item) => setSelectedTeams(xorBy(selectedTeams, [item], 'id'))
117117
}
118118
119119
function onChange() {
120-
return val => setSelectedLocations(val)
120+
return (val) => setSelectedTeam(val)
121121
}
122122
}
123123
124124
export default App
125125
126+
126127
```
127128

128129
| Prop | Type | Default Value |
@@ -147,6 +148,9 @@ export default App
147148
| multiListEmptyLabelStyle | style object | Default style |
148149
| listEmptyLabelStyle | style object | Default style |
149150
| selectedItemStyle | style object | Default style |
151+
| arrowIconColor | color string | Default primary color |
152+
| searchIconColor | color string | Default primary color |
153+
| toggleIconColor | color string | Default primary color |
150154
| options | array | `[{ item: 'Juventus', id: 'JUVE'},{ item: 'Real Madrid', id: 'RM'},{ item: 'Barcelona', id: 'BR'},{ item: 'PSG', id: 'PSG'},{ item: 'FC Bayern Munich', id: 'FBM'}]` |
151155

152156
## Want to be a contributor? 👷🏼‍♂️👷🏼‍♀️

0 commit comments

Comments
 (0)