react-native-input-select 0.28.0 → 0.29.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +109 -35
- package/lib/commonjs/components/Dropdown/Dropdown.js +0 -5
- package/lib/commonjs/components/Dropdown/Dropdown.js.map +1 -1
- package/lib/commonjs/types/index.types.js.map +1 -1
- package/lib/module/components/Dropdown/Dropdown.js +0 -5
- package/lib/module/components/Dropdown/Dropdown.js.map +1 -1
- package/lib/module/types/index.types.js.map +1 -1
- package/lib/typescript/types/index.types.d.ts +1 -1
- package/package.json +1 -1
- package/src/components/Dropdown/Dropdown.tsx +0 -5
- package/src/types/index.types.ts +1 -1
package/README.md
CHANGED
|
@@ -7,15 +7,17 @@ A fully customizable dropdown selection package for react-native android and iOS
|
|
|
7
7
|
## Installation
|
|
8
8
|
|
|
9
9
|
With npm
|
|
10
|
+
|
|
10
11
|
```sh
|
|
11
12
|
npm install react-native-input-select
|
|
12
13
|
```
|
|
14
|
+
|
|
13
15
|
With yarn
|
|
14
16
|
|
|
15
17
|
```sh
|
|
16
18
|
yarn add react-native-input-select
|
|
17
19
|
```
|
|
18
|
-
|
|
20
|
+
|
|
19
21
|
## Basic Usage
|
|
20
22
|
|
|
21
23
|
```js
|
|
@@ -26,44 +28,116 @@ export default function App() {
|
|
|
26
28
|
const [country, setCountry] = React.useState();
|
|
27
29
|
|
|
28
30
|
return (
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
31
|
+
<Dropdown
|
|
32
|
+
label="Country"
|
|
33
|
+
placeholder="Select an option..."
|
|
34
|
+
options={[
|
|
35
|
+
{ name: 'Albania', code: 'AL' },
|
|
36
|
+
{ name: 'Åland Islands', code: 'AX' },
|
|
37
|
+
{ name: 'Algeria', code: 'DZ' },
|
|
38
|
+
{ name: 'American Samoa', code: 'AS' },
|
|
39
|
+
{ name: 'Andorra', code: 'AD' },
|
|
40
|
+
{ name: 'Angola', code: 'AO' },
|
|
41
|
+
{ name: 'Anguilla', code: 'AI' },
|
|
42
|
+
{ name: 'Antarctica', code: 'AQ' },
|
|
43
|
+
{ name: 'Antigua and Barbuda', code: 'AG' },
|
|
44
|
+
]}
|
|
45
|
+
optionLabel={'name'}
|
|
46
|
+
optionValue={'code'}
|
|
47
|
+
selectedValue={country}
|
|
48
|
+
onValueChange={(value) => setCountry(value)}
|
|
49
|
+
primaryColor={'green'}
|
|
50
|
+
/>
|
|
49
51
|
);
|
|
50
52
|
}
|
|
51
53
|
```
|
|
52
|
-
For more examples visit our [wiki page](https://github.com/azeezat/react-native-select/wiki)
|
|
53
54
|
|
|
55
|
+
## Advanced Usage
|
|
56
|
+
|
|
57
|
+
```js
|
|
58
|
+
import React from 'react';
|
|
59
|
+
import Dropdown from 'react-native-input-select';
|
|
60
|
+
|
|
61
|
+
export default function App() {
|
|
62
|
+
const [country, setCountry] = React.useState();
|
|
63
|
+
|
|
64
|
+
return (
|
|
65
|
+
<Dropdown
|
|
66
|
+
label="Customized components in list"
|
|
67
|
+
placeholder="Select multiple options..."
|
|
68
|
+
options={countries.slice(0, 3)}
|
|
69
|
+
optionLabel={'name'}
|
|
70
|
+
optionValue={'code'}
|
|
71
|
+
selectedValue={country}
|
|
72
|
+
onValueChange={(itemValue: any) => setCountry(itemValue)}
|
|
73
|
+
isMultiple
|
|
74
|
+
primaryColor={'orange'}
|
|
75
|
+
dropdownStyle={{
|
|
76
|
+
borderWidth: 0, // To remove border, set borderWidth to 0
|
|
77
|
+
}}
|
|
78
|
+
placeholderStyle={{
|
|
79
|
+
color: 'purple',
|
|
80
|
+
fontSize: 15,
|
|
81
|
+
fontWeight: '500',
|
|
82
|
+
}}
|
|
83
|
+
labelStyle={{ color: 'teal', fontSize: 15, fontWeight: '500' }}
|
|
84
|
+
dropdownHelperTextStyle={{
|
|
85
|
+
color: 'green',
|
|
86
|
+
fontWeight: '900',
|
|
87
|
+
}}
|
|
88
|
+
modalBackgroundStyle={{
|
|
89
|
+
backgroundColor: 'rgba(196, 198, 246, 0.5)',
|
|
90
|
+
}}
|
|
91
|
+
helperText="The placeholder has been styled"
|
|
92
|
+
checkboxSize={20}
|
|
93
|
+
checkboxStyle={{
|
|
94
|
+
backgroundColor: 'purple',
|
|
95
|
+
borderRadius: 30, // To get a circle - add the checkboxSize and the padding size
|
|
96
|
+
padding: 10,
|
|
97
|
+
}}
|
|
98
|
+
checkboxLabelStyle={{ color: 'red', fontSize: 30 }}
|
|
99
|
+
listHeaderComponent={
|
|
100
|
+
<View style={styles.customComponentContainer}>
|
|
101
|
+
<Text style={styles.text}>
|
|
102
|
+
💡 You can add any component to the top of this list
|
|
103
|
+
</Text>
|
|
104
|
+
<View style={styles.fixToText}>
|
|
105
|
+
<Button
|
|
106
|
+
title="Left button"
|
|
107
|
+
onPress={() => Alert.alert('Left button pressed')}
|
|
108
|
+
color="#007AFF"
|
|
109
|
+
/>
|
|
110
|
+
<Button
|
|
111
|
+
title="Right button"
|
|
112
|
+
onPress={() => Alert.alert('Right button pressed')}
|
|
113
|
+
/>
|
|
114
|
+
</View>
|
|
115
|
+
</View>
|
|
116
|
+
}
|
|
117
|
+
listFooterComponent={
|
|
118
|
+
<View style={styles.customComponentContainer}>
|
|
119
|
+
<Text>You can add any component to the bottom of this list</Text>
|
|
120
|
+
</View>
|
|
121
|
+
}
|
|
122
|
+
/>
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
For more examples visit our [wiki page](https://github.com/azeezat/react-native-select/wiki)
|
|
54
128
|
|
|
55
129
|
# iOS
|
|
56
|
-
| | | |
|
|
57
|
-
|:-------------------------:|:-------------------------:|:-------------------------:|
|
|
58
|
-
|<img width="529" alt="Screenshot 2023-03-23 at 5 11 54 PM" src="https://user-images.githubusercontent.com/9849221/227392644-a039424a-9bdf-4253-b984-7b043e4a9545.png"> | <img width="529" alt="Screenshot 2023-03-23 at 5 00 19 PM" src="https://user-images.githubusercontent.com/9849221/227391036-44b5e935-bc5e-48d6-a3a9-7a285a4879fd.png"> | <img width="529" alt="Screenshot 2023-03-23 at 5 00 29 PM" src="https://user-images.githubusercontent.com/9849221/227391040-45772980-e51c-4ebf-aabf-30886ff06e7c.png">|
|
|
59
|
-
|<img width="529" alt="Screenshot 2023-03-23 at 5 00 35 PM" src="https://user-images.githubusercontent.com/9849221/227391043-9e5fe1aa-86aa-438c-9e84-8c38975d3d57.png"> | <img width="529" alt="Screenshot 2023-03-23 at 5 11 54 PM" src="https://user-images.githubusercontent.com/9849221/227391594-f672b97a-c3c0-466c-b615-a887e4a8a6c0.png">| <img width="529" alt="Screenshot 2023-04-06 at 5 26 46 PM" src="https://user-images.githubusercontent.com/9849221/230516858-b11168be-3144-4914-a31a-15663c5d0404.png">|
|
|
60
130
|
|
|
131
|
+
| | | |
|
|
132
|
+
| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|
|
133
|
+
| <img width="529" alt="Screenshot 2023-04-18 at 10 06 15 AM" src="https://user-images.githubusercontent.com/9849221/232854077-d5f8436a-55d8-4826-af44-5a7d47626765.png"> | <img width="529" alt="Screenshot 2023-03-23 at 5 00 19 PM" src="https://user-images.githubusercontent.com/9849221/227391036-44b5e935-bc5e-48d6-a3a9-7a285a4879fd.png"> | <img width="529" alt="Screenshot 2023-03-23 at 5 00 29 PM" src="https://user-images.githubusercontent.com/9849221/227391040-45772980-e51c-4ebf-aabf-30886ff06e7c.png"> |
|
|
134
|
+
| <img width="529" alt="Screenshot 2023-03-23 at 5 00 35 PM" src="https://user-images.githubusercontent.com/9849221/227391043-9e5fe1aa-86aa-438c-9e84-8c38975d3d57.png"> | <img width="529" alt="Screenshot 2023-03-23 at 5 11 54 PM" src="https://user-images.githubusercontent.com/9849221/227391594-f672b97a-c3c0-466c-b615-a887e4a8a6c0.png"> | <img width="529" alt="Screenshot 2023-04-06 at 5 26 46 PM" src="https://user-images.githubusercontent.com/9849221/230516858-b11168be-3144-4914-a31a-15663c5d0404.png"> |
|
|
61
135
|
|
|
62
136
|
# Android
|
|
63
|
-
| | | |
|
|
64
|
-
|:-------------------------:|:-------------------------:|:-------------------------:|
|
|
65
|
-
|<img width="456" alt="Screenshot 2023-03-23 at 5 25 07 PM" src="https://user-images.githubusercontent.com/9849221/227393546-3aba8a28-f437-4f8f-9611-bf300c5af8f2.png"> | <img width="456" alt="Screenshot 2023-03-23 at 5 26 58 PM" src="https://user-images.githubusercontent.com/9849221/227393548-28796d7b-9760-43a9-8ed3-fb1618cd1b7d.png"> | <img width="456" alt="Screenshot 2023-03-23 at 5 28 49 PM" src="https://user-images.githubusercontent.com/9849221/227393554-91ed1a92-d229-4814-84d8-5f9095e8d048.png">|
|
|
66
137
|
|
|
138
|
+
| | | |
|
|
139
|
+
| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
|
|
140
|
+
| <img width="456" alt="Screenshot 2023-03-23 at 5 25 07 PM" src="https://user-images.githubusercontent.com/9849221/227393546-3aba8a28-f437-4f8f-9611-bf300c5af8f2.png"> | <img width="456" alt="Screenshot 2023-03-23 at 5 26 58 PM" src="https://user-images.githubusercontent.com/9849221/227393548-28796d7b-9760-43a9-8ed3-fb1618cd1b7d.png"> | <img width="456" alt="Screenshot 2023-03-23 at 5 28 49 PM" src="https://user-images.githubusercontent.com/9849221/227393554-91ed1a92-d229-4814-84d8-5f9095e8d048.png"> |
|
|
67
141
|
|
|
68
142
|
## Props
|
|
69
143
|
|
|
@@ -75,18 +149,18 @@ For more examples visit our [wiki page](https://github.com/azeezat/react-native-
|
|
|
75
149
|
| optionLabel | `string` | `name` |
|
|
76
150
|
| optionValue | `string` | `code` |
|
|
77
151
|
| error | `string` | `This is a required field` |
|
|
78
|
-
| helperText | `string` | `Only countries
|
|
152
|
+
| helperText | `string` | `Only few countries are listed` |
|
|
79
153
|
| selectedValue | `string` or `Array` | `AL` or `[AL, AX]` |
|
|
80
154
|
| onValueChange | `function` | `()=>{}` |
|
|
81
155
|
| isMultiple | `Boolean` | `true` |
|
|
82
156
|
| isSearchable | `Boolean` | `true` |
|
|
83
157
|
| disabled | `Boolean` | `true` |
|
|
84
158
|
| labelStyle | `Object` | `{color: 'red', fontSize: 15, fontWeight: '500'}` |
|
|
85
|
-
| placeholderStyle | `Object` | `{color: '
|
|
159
|
+
| placeholderStyle | `Object` | `{color: 'blue', fontSize: 15, fontWeight: '500'}` |
|
|
86
160
|
| dropdownStyle | `Object` | `{borderColor: 'blue', margin: 5, borderWidth:0 ...}` |
|
|
87
161
|
| dropdownContainerStyle | `Object` | `{backgroundColor: 'red', width: '30%', ...}` |
|
|
88
162
|
| searchInputStyle | `Object` | `{backgroundColor: 'red', borderRadius: 0, ...}` |
|
|
89
|
-
| selectedItemStyle | `Object` | `{
|
|
163
|
+
| selectedItemStyle | `Object` | `{fontWeight: '600', color: 'yellow', ...}` |
|
|
90
164
|
| multipleSelectedItemStyle | `Object` | `{backgroundColor: 'red', color: 'yellow', ...}` |
|
|
91
165
|
| modalBackgroundStyle | `Object` | `{backgroundColor: 'rgba(196, 198, 246, 0.5)'}` |
|
|
92
166
|
| modalOptionsContainer | `Object` | `{padding: 5}` |
|
|
@@ -97,8 +171,8 @@ For more examples visit our [wiki page](https://github.com/azeezat/react-native-
|
|
|
97
171
|
| checkboxSize | `number` | `20` |
|
|
98
172
|
| checkboxStyle | `Object` | `{backgroundColor: 'blue', borderRadius: 30, padding: 10}` |
|
|
99
173
|
| checkboxLabelStyle | `Object` | `{color: 'red', fontWeight:'500'}` |
|
|
100
|
-
| listHeaderComponent | `React Component` | `<Text You can add any component to the top of this list <Text>`
|
|
101
|
-
| listFooterComponent | `React Component` | `<Text You can add any component to the bottom of this list <Text>`
|
|
174
|
+
| listHeaderComponent | `React Component` | `<Text> You can add any component to the top of this list <Text>` |
|
|
175
|
+
| listFooterComponent | `React Component` | `<Text> You can add any component to the bottom of this list <Text>` |
|
|
102
176
|
|
|
103
177
|
## Contributing
|
|
104
178
|
|
|
@@ -109,5 +183,5 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
|
|
|
109
183
|
MIT
|
|
110
184
|
|
|
111
185
|
# Video Demo
|
|
112
|
-
https://user-images.githubusercontent.com/9849221/230516294-a1aca5a7-65f5-4d9c-9b7f-a057807cf35f.mov
|
|
113
186
|
|
|
187
|
+
https://user-images.githubusercontent.com/9849221/232344214-55fa5557-cfdd-42c4-a334-f93c15341b0b.mov
|
|
@@ -64,11 +64,6 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
64
64
|
color: _colors.colors.gray,
|
|
65
65
|
..._typography.typography.caption
|
|
66
66
|
},
|
|
67
|
-
inputFocusErrorState: {
|
|
68
|
-
borderWidth: 2,
|
|
69
|
-
borderStyle: 'solid',
|
|
70
|
-
borderColor: _colors.colors.red
|
|
71
|
-
},
|
|
72
67
|
error: {
|
|
73
68
|
color: _colors.colors.red,
|
|
74
69
|
marginTop: 8,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_DropdownSelectedItemsView","_colors","_typography","obj","__esModule","default","Dropdown","_ref","label","placeholder","helperText","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","placeholderStyle","multipleSelectedItemStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","primaryColor","disabled","createElement","View","style","styles","dropdownInputContainer","Text","helper","StyleSheet","create","marginBottom","color","colors","gray","typography","caption","
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_DropdownSelectedItemsView","_colors","_typography","obj","__esModule","default","Dropdown","_ref","label","placeholder","helperText","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","placeholderStyle","multipleSelectedItemStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","primaryColor","disabled","createElement","View","style","styles","dropdownInputContainer","Text","helper","StyleSheet","create","marginBottom","color","colors","gray","typography","caption","red","marginTop","primary","width","blackText","black","_default","exports"],"sources":["Dropdown.tsx"],"sourcesContent":["import React from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport DropdownSelectedItemsView from './DropdownSelectedItemsView';\nimport { colors } from '../../styles/colors';\nimport { typography } from '../../styles/typography';\n\nconst Dropdown = ({\n label,\n placeholder,\n helperText,\n error,\n getSelectedItemsLabel,\n handleToggleModal,\n isMultiple,\n selectedItem,\n selectedItems,\n labelStyle,\n dropdownStyle,\n dropdownContainerStyle,\n selectedItemStyle,\n placeholderStyle,\n multipleSelectedItemStyle,\n dropdownErrorStyle,\n dropdownErrorTextStyle,\n dropdownHelperTextStyle,\n primaryColor,\n disabled,\n}: any) => {\n return (\n <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>\n {label && label !== '' && (\n <Text style={[styles.label, labelStyle]}>{label}</Text>\n )}\n <DropdownSelectedItemsView\n placeholder={placeholder}\n error={error}\n getSelectedItemsLabel={getSelectedItemsLabel}\n handleToggleModal={handleToggleModal}\n isMultiple={isMultiple}\n selectedItem={selectedItem}\n selectedItems={selectedItems}\n dropdownStyle={dropdownStyle}\n selectedItemStyle={selectedItemStyle}\n multipleSelectedItemStyle={multipleSelectedItemStyle}\n dropdownErrorStyle={dropdownErrorStyle}\n primaryColor={primaryColor}\n disabled={disabled}\n placeholderStyle={placeholderStyle}\n />\n\n {error && error !== '' && (\n <Text style={[styles.error, dropdownErrorTextStyle]}>{error}</Text>\n )}\n\n {helperText && helperText !== '' && !error && (\n <Text style={[styles.helper, dropdownHelperTextStyle]}>\n {helperText}\n </Text>\n )}\n </View>\n );\n};\n\nconst styles = StyleSheet.create({\n label: { marginBottom: 16, color: colors.gray, ...typography.caption },\n error: { color: colors.red, marginTop: 8, ...typography.caption },\n helper: { marginTop: 8, color: colors.primary, ...typography.caption },\n dropdownInputContainer: { marginBottom: 23, width: '100%' },\n blackText: { color: colors.black },\n});\n\nexport default Dropdown;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,0BAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AAAqD,SAAAD,uBAAAM,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAErD,MAAMG,QAAQ,GAAGC,IAAA,IAqBN;EAAA,IArBO;IAChBC,KAAK;IACLC,WAAW;IACXC,UAAU;IACVC,KAAK;IACLC,qBAAqB;IACrBC,iBAAiB;IACjBC,UAAU;IACVC,YAAY;IACZC,aAAa;IACbC,UAAU;IACVC,aAAa;IACbC,sBAAsB;IACtBC,iBAAiB;IACjBC,gBAAgB;IAChBC,yBAAyB;IACzBC,kBAAkB;IAClBC,sBAAsB;IACtBC,uBAAuB;IACvBC,YAAY;IACZC;EACG,CAAC,GAAApB,IAAA;EACJ,oBACEX,MAAA,CAAAS,OAAA,CAAAuB,aAAA,CAAC7B,YAAA,CAAA8B,IAAI;IAACC,KAAK,EAAE,CAACC,MAAM,CAACC,sBAAsB,EAAEb,sBAAsB;EAAE,GAClEX,KAAK,IAAIA,KAAK,KAAK,EAAE,iBACpBZ,MAAA,CAAAS,OAAA,CAAAuB,aAAA,CAAC7B,YAAA,CAAAkC,IAAI;IAACH,KAAK,EAAE,CAACC,MAAM,CAACvB,KAAK,EAAES,UAAU;EAAE,GAAET,KAAK,CAChD,eACDZ,MAAA,CAAAS,OAAA,CAAAuB,aAAA,CAAC5B,0BAAA,CAAAK,OAAyB;IACxBI,WAAW,EAAEA,WAAY;IACzBE,KAAK,EAAEA,KAAM;IACbC,qBAAqB,EAAEA,qBAAsB;IAC7CC,iBAAiB,EAAEA,iBAAkB;IACrCC,UAAU,EAAEA,UAAW;IACvBC,YAAY,EAAEA,YAAa;IAC3BC,aAAa,EAAEA,aAAc;IAC7BE,aAAa,EAAEA,aAAc;IAC7BE,iBAAiB,EAAEA,iBAAkB;IACrCE,yBAAyB,EAAEA,yBAA0B;IACrDC,kBAAkB,EAAEA,kBAAmB;IACvCG,YAAY,EAAEA,YAAa;IAC3BC,QAAQ,EAAEA,QAAS;IACnBN,gBAAgB,EAAEA;EAAiB,EACnC,EAEDV,KAAK,IAAIA,KAAK,KAAK,EAAE,iBACpBf,MAAA,CAAAS,OAAA,CAAAuB,aAAA,CAAC7B,YAAA,CAAAkC,IAAI;IAACH,KAAK,EAAE,CAACC,MAAM,CAACpB,KAAK,EAAEa,sBAAsB;EAAE,GAAEb,KAAK,CAC5D,EAEAD,UAAU,IAAIA,UAAU,KAAK,EAAE,IAAI,CAACC,KAAK,iBACxCf,MAAA,CAAAS,OAAA,CAAAuB,aAAA,CAAC7B,YAAA,CAAAkC,IAAI;IAACH,KAAK,EAAE,CAACC,MAAM,CAACG,MAAM,EAAET,uBAAuB;EAAE,GACnDf,UAAU,CAEd,CACI;AAEX,CAAC;AAED,MAAMqB,MAAM,GAAGI,uBAAU,CAACC,MAAM,CAAC;EAC/B5B,KAAK,EAAE;IAAE6B,YAAY,EAAE,EAAE;IAAEC,KAAK,EAAEC,cAAM,CAACC,IAAI;IAAE,GAAGC,sBAAU,CAACC;EAAQ,CAAC;EACtE/B,KAAK,EAAE;IAAE2B,KAAK,EAAEC,cAAM,CAACI,GAAG;IAAEC,SAAS,EAAE,CAAC;IAAE,GAAGH,sBAAU,CAACC;EAAQ,CAAC;EACjER,MAAM,EAAE;IAAEU,SAAS,EAAE,CAAC;IAAEN,KAAK,EAAEC,cAAM,CAACM,OAAO;IAAE,GAAGJ,sBAAU,CAACC;EAAQ,CAAC;EACtEV,sBAAsB,EAAE;IAAEK,YAAY,EAAE,EAAE;IAAES,KAAK,EAAE;EAAO,CAAC;EAC3DC,SAAS,EAAE;IAAET,KAAK,EAAEC,cAAM,CAACS;EAAM;AACnC,CAAC,CAAC;AAAC,IAAAC,QAAA,GAEY3C,QAAQ;AAAA4C,OAAA,CAAA7C,OAAA,GAAA4C,QAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["index.types.ts"],"sourcesContent":["import type { ViewStyle, ColorValue, TextStyle } from 'react-native';\n\nexport type DropdownProps = {\n placeholder?: string;\n label?: string;\n error?: string;\n helperText?: string;\n options: any[];\n optionLabel: string;\n optionValue: string;\n onValueChange: Function;\n selectedValue?: string | any[] | null;\n isMultiple?: boolean;\n isSearchable?: boolean;\n labelStyle?: TextStyle;\n dropdownStyle?: ViewStyle;\n dropdownContainerStyle?: ViewStyle;\n dropdownErrorStyle?: ViewStyle;\n dropdownErrorTextStyle?: TextStyle;\n dropdownHelperTextStyle?: TextStyle;\n selectedItemStyle?:
|
|
1
|
+
{"version":3,"names":[],"sources":["index.types.ts"],"sourcesContent":["import type { ViewStyle, ColorValue, TextStyle } from 'react-native';\n\nexport type DropdownProps = {\n placeholder?: string;\n label?: string;\n error?: string;\n helperText?: string;\n options: any[];\n optionLabel: string;\n optionValue: string;\n onValueChange: Function;\n selectedValue?: string | any[] | null;\n isMultiple?: boolean;\n isSearchable?: boolean;\n labelStyle?: TextStyle;\n dropdownStyle?: ViewStyle;\n dropdownContainerStyle?: ViewStyle;\n dropdownErrorStyle?: ViewStyle;\n dropdownErrorTextStyle?: TextStyle;\n dropdownHelperTextStyle?: TextStyle;\n selectedItemStyle?: TextStyle;\n multipleSelectedItemStyle?: ViewStyle;\n modalBackgroundStyle?: ViewStyle;\n modalOptionsContainer?: ViewStyle;\n searchInputStyle?: ViewStyle;\n primaryColor?: ColorValue;\n disabled?: boolean;\n checkboxSize?: number;\n checkboxStyle?: ViewStyle;\n checkboxLabelStyle?: TextStyle;\n placeholderStyle?: TextStyle;\n listHeaderComponent?: React.ReactNode;\n listFooterComponent?: React.ReactNode;\n};\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","Text","StyleSheet","DropdownSelectedItemsView","colors","typography","Dropdown","_ref","label","placeholder","helperText","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","placeholderStyle","multipleSelectedItemStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","primaryColor","disabled","createElement","style","styles","dropdownInputContainer","helper","create","marginBottom","color","gray","caption","
|
|
1
|
+
{"version":3,"names":["React","View","Text","StyleSheet","DropdownSelectedItemsView","colors","typography","Dropdown","_ref","label","placeholder","helperText","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","placeholderStyle","multipleSelectedItemStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","primaryColor","disabled","createElement","style","styles","dropdownInputContainer","helper","create","marginBottom","color","gray","caption","red","marginTop","primary","width","blackText","black"],"sources":["Dropdown.tsx"],"sourcesContent":["import React from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport DropdownSelectedItemsView from './DropdownSelectedItemsView';\nimport { colors } from '../../styles/colors';\nimport { typography } from '../../styles/typography';\n\nconst Dropdown = ({\n label,\n placeholder,\n helperText,\n error,\n getSelectedItemsLabel,\n handleToggleModal,\n isMultiple,\n selectedItem,\n selectedItems,\n labelStyle,\n dropdownStyle,\n dropdownContainerStyle,\n selectedItemStyle,\n placeholderStyle,\n multipleSelectedItemStyle,\n dropdownErrorStyle,\n dropdownErrorTextStyle,\n dropdownHelperTextStyle,\n primaryColor,\n disabled,\n}: any) => {\n return (\n <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>\n {label && label !== '' && (\n <Text style={[styles.label, labelStyle]}>{label}</Text>\n )}\n <DropdownSelectedItemsView\n placeholder={placeholder}\n error={error}\n getSelectedItemsLabel={getSelectedItemsLabel}\n handleToggleModal={handleToggleModal}\n isMultiple={isMultiple}\n selectedItem={selectedItem}\n selectedItems={selectedItems}\n dropdownStyle={dropdownStyle}\n selectedItemStyle={selectedItemStyle}\n multipleSelectedItemStyle={multipleSelectedItemStyle}\n dropdownErrorStyle={dropdownErrorStyle}\n primaryColor={primaryColor}\n disabled={disabled}\n placeholderStyle={placeholderStyle}\n />\n\n {error && error !== '' && (\n <Text style={[styles.error, dropdownErrorTextStyle]}>{error}</Text>\n )}\n\n {helperText && helperText !== '' && !error && (\n <Text style={[styles.helper, dropdownHelperTextStyle]}>\n {helperText}\n </Text>\n )}\n </View>\n );\n};\n\nconst styles = StyleSheet.create({\n label: { marginBottom: 16, color: colors.gray, ...typography.caption },\n error: { color: colors.red, marginTop: 8, ...typography.caption },\n helper: { marginTop: 8, color: colors.primary, ...typography.caption },\n dropdownInputContainer: { marginBottom: 23, width: '100%' },\n blackText: { color: colors.black },\n});\n\nexport default Dropdown;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,EAAEC,UAAU,QAAQ,cAAc;AACrD,OAAOC,yBAAyB,MAAM,6BAA6B;AACnE,SAASC,MAAM,QAAQ,qBAAqB;AAC5C,SAASC,UAAU,QAAQ,yBAAyB;AAEpD,MAAMC,QAAQ,GAAGC,IAAA,IAqBN;EAAA,IArBO;IAChBC,KAAK;IACLC,WAAW;IACXC,UAAU;IACVC,KAAK;IACLC,qBAAqB;IACrBC,iBAAiB;IACjBC,UAAU;IACVC,YAAY;IACZC,aAAa;IACbC,UAAU;IACVC,aAAa;IACbC,sBAAsB;IACtBC,iBAAiB;IACjBC,gBAAgB;IAChBC,yBAAyB;IACzBC,kBAAkB;IAClBC,sBAAsB;IACtBC,uBAAuB;IACvBC,YAAY;IACZC;EACG,CAAC,GAAApB,IAAA;EACJ,oBACER,KAAA,CAAA6B,aAAA,CAAC5B,IAAI;IAAC6B,KAAK,EAAE,CAACC,MAAM,CAACC,sBAAsB,EAAEZ,sBAAsB;EAAE,GAClEX,KAAK,IAAIA,KAAK,KAAK,EAAE,iBACpBT,KAAA,CAAA6B,aAAA,CAAC3B,IAAI;IAAC4B,KAAK,EAAE,CAACC,MAAM,CAACtB,KAAK,EAAES,UAAU;EAAE,GAAET,KAAK,CAChD,eACDT,KAAA,CAAA6B,aAAA,CAACzB,yBAAyB;IACxBM,WAAW,EAAEA,WAAY;IACzBE,KAAK,EAAEA,KAAM;IACbC,qBAAqB,EAAEA,qBAAsB;IAC7CC,iBAAiB,EAAEA,iBAAkB;IACrCC,UAAU,EAAEA,UAAW;IACvBC,YAAY,EAAEA,YAAa;IAC3BC,aAAa,EAAEA,aAAc;IAC7BE,aAAa,EAAEA,aAAc;IAC7BE,iBAAiB,EAAEA,iBAAkB;IACrCE,yBAAyB,EAAEA,yBAA0B;IACrDC,kBAAkB,EAAEA,kBAAmB;IACvCG,YAAY,EAAEA,YAAa;IAC3BC,QAAQ,EAAEA,QAAS;IACnBN,gBAAgB,EAAEA;EAAiB,EACnC,EAEDV,KAAK,IAAIA,KAAK,KAAK,EAAE,iBACpBZ,KAAA,CAAA6B,aAAA,CAAC3B,IAAI;IAAC4B,KAAK,EAAE,CAACC,MAAM,CAACnB,KAAK,EAAEa,sBAAsB;EAAE,GAAEb,KAAK,CAC5D,EAEAD,UAAU,IAAIA,UAAU,KAAK,EAAE,IAAI,CAACC,KAAK,iBACxCZ,KAAA,CAAA6B,aAAA,CAAC3B,IAAI;IAAC4B,KAAK,EAAE,CAACC,MAAM,CAACE,MAAM,EAAEP,uBAAuB;EAAE,GACnDf,UAAU,CAEd,CACI;AAEX,CAAC;AAED,MAAMoB,MAAM,GAAG5B,UAAU,CAAC+B,MAAM,CAAC;EAC/BzB,KAAK,EAAE;IAAE0B,YAAY,EAAE,EAAE;IAAEC,KAAK,EAAE/B,MAAM,CAACgC,IAAI;IAAE,GAAG/B,UAAU,CAACgC;EAAQ,CAAC;EACtE1B,KAAK,EAAE;IAAEwB,KAAK,EAAE/B,MAAM,CAACkC,GAAG;IAAEC,SAAS,EAAE,CAAC;IAAE,GAAGlC,UAAU,CAACgC;EAAQ,CAAC;EACjEL,MAAM,EAAE;IAAEO,SAAS,EAAE,CAAC;IAAEJ,KAAK,EAAE/B,MAAM,CAACoC,OAAO;IAAE,GAAGnC,UAAU,CAACgC;EAAQ,CAAC;EACtEN,sBAAsB,EAAE;IAAEG,YAAY,EAAE,EAAE;IAAEO,KAAK,EAAE;EAAO,CAAC;EAC3DC,SAAS,EAAE;IAAEP,KAAK,EAAE/B,MAAM,CAACuC;EAAM;AACnC,CAAC,CAAC;AAEF,eAAerC,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["index.types.ts"],"sourcesContent":["import type { ViewStyle, ColorValue, TextStyle } from 'react-native';\n\nexport type DropdownProps = {\n placeholder?: string;\n label?: string;\n error?: string;\n helperText?: string;\n options: any[];\n optionLabel: string;\n optionValue: string;\n onValueChange: Function;\n selectedValue?: string | any[] | null;\n isMultiple?: boolean;\n isSearchable?: boolean;\n labelStyle?: TextStyle;\n dropdownStyle?: ViewStyle;\n dropdownContainerStyle?: ViewStyle;\n dropdownErrorStyle?: ViewStyle;\n dropdownErrorTextStyle?: TextStyle;\n dropdownHelperTextStyle?: TextStyle;\n selectedItemStyle?:
|
|
1
|
+
{"version":3,"names":[],"sources":["index.types.ts"],"sourcesContent":["import type { ViewStyle, ColorValue, TextStyle } from 'react-native';\n\nexport type DropdownProps = {\n placeholder?: string;\n label?: string;\n error?: string;\n helperText?: string;\n options: any[];\n optionLabel: string;\n optionValue: string;\n onValueChange: Function;\n selectedValue?: string | any[] | null;\n isMultiple?: boolean;\n isSearchable?: boolean;\n labelStyle?: TextStyle;\n dropdownStyle?: ViewStyle;\n dropdownContainerStyle?: ViewStyle;\n dropdownErrorStyle?: ViewStyle;\n dropdownErrorTextStyle?: TextStyle;\n dropdownHelperTextStyle?: TextStyle;\n selectedItemStyle?: TextStyle;\n multipleSelectedItemStyle?: ViewStyle;\n modalBackgroundStyle?: ViewStyle;\n modalOptionsContainer?: ViewStyle;\n searchInputStyle?: ViewStyle;\n primaryColor?: ColorValue;\n disabled?: boolean;\n checkboxSize?: number;\n checkboxStyle?: ViewStyle;\n checkboxLabelStyle?: TextStyle;\n placeholderStyle?: TextStyle;\n listHeaderComponent?: React.ReactNode;\n listFooterComponent?: React.ReactNode;\n};\n"],"mappings":""}
|
|
@@ -18,7 +18,7 @@ export type DropdownProps = {
|
|
|
18
18
|
dropdownErrorStyle?: ViewStyle;
|
|
19
19
|
dropdownErrorTextStyle?: TextStyle;
|
|
20
20
|
dropdownHelperTextStyle?: TextStyle;
|
|
21
|
-
selectedItemStyle?:
|
|
21
|
+
selectedItemStyle?: TextStyle;
|
|
22
22
|
multipleSelectedItemStyle?: ViewStyle;
|
|
23
23
|
modalBackgroundStyle?: ViewStyle;
|
|
24
24
|
modalOptionsContainer?: ViewStyle;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-input-select",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.29.0",
|
|
4
4
|
"description": "A customizable dropdown selection package for react-native for android and iOS with multiple select and search capabilities.",
|
|
5
5
|
"main": "lib/commonjs/index",
|
|
6
6
|
"module": "lib/module/index",
|
|
@@ -63,11 +63,6 @@ const Dropdown = ({
|
|
|
63
63
|
|
|
64
64
|
const styles = StyleSheet.create({
|
|
65
65
|
label: { marginBottom: 16, color: colors.gray, ...typography.caption },
|
|
66
|
-
inputFocusErrorState: {
|
|
67
|
-
borderWidth: 2,
|
|
68
|
-
borderStyle: 'solid',
|
|
69
|
-
borderColor: colors.red,
|
|
70
|
-
},
|
|
71
66
|
error: { color: colors.red, marginTop: 8, ...typography.caption },
|
|
72
67
|
helper: { marginTop: 8, color: colors.primary, ...typography.caption },
|
|
73
68
|
dropdownInputContainer: { marginBottom: 23, width: '100%' },
|
package/src/types/index.types.ts
CHANGED
|
@@ -18,7 +18,7 @@ export type DropdownProps = {
|
|
|
18
18
|
dropdownErrorStyle?: ViewStyle;
|
|
19
19
|
dropdownErrorTextStyle?: TextStyle;
|
|
20
20
|
dropdownHelperTextStyle?: TextStyle;
|
|
21
|
-
selectedItemStyle?:
|
|
21
|
+
selectedItemStyle?: TextStyle;
|
|
22
22
|
multipleSelectedItemStyle?: ViewStyle;
|
|
23
23
|
modalBackgroundStyle?: ViewStyle;
|
|
24
24
|
modalOptionsContainer?: ViewStyle;
|