react-native-input-select 0.2.0 → 0.6.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 +32 -19
- package/lib/commonjs/Dropdown.js +10 -22
- package/lib/commonjs/Dropdown.js.map +1 -1
- package/lib/commonjs/DropdownList.js +15 -10
- package/lib/commonjs/DropdownList.js.map +1 -1
- package/lib/commonjs/DropdownListItem.js +5 -4
- package/lib/commonjs/DropdownListItem.js.map +1 -1
- package/lib/commonjs/Input.js +50 -0
- package/lib/commonjs/Input.js.map +1 -0
- package/lib/commonjs/constants/index.js +11 -0
- package/lib/commonjs/constants/index.js.map +1 -0
- package/lib/commonjs/index.js +37 -9
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/styles/colors.js +1 -0
- package/lib/commonjs/styles/colors.js.map +1 -1
- package/lib/commonjs/styles/input.js +33 -0
- package/lib/commonjs/styles/input.js.map +1 -0
- package/lib/module/Dropdown.js +9 -22
- package/lib/module/Dropdown.js.map +1 -1
- package/lib/module/DropdownList.js +16 -11
- package/lib/module/DropdownList.js.map +1 -1
- package/lib/module/DropdownListItem.js +5 -4
- package/lib/module/DropdownListItem.js.map +1 -1
- package/lib/module/Input.js +33 -0
- package/lib/module/Input.js.map +1 -0
- package/lib/module/constants/index.js +3 -0
- package/lib/module/constants/index.js.map +1 -0
- package/lib/module/index.js +35 -9
- package/lib/module/index.js.map +1 -1
- package/lib/module/styles/colors.js +1 -0
- package/lib/module/styles/colors.js.map +1 -1
- package/lib/module/styles/input.js +22 -0
- package/lib/module/styles/input.js.map +1 -0
- package/lib/typescript/Dropdown.d.ts +1 -1
- package/lib/typescript/DropdownList.d.ts +1 -1
- package/lib/typescript/DropdownListItem.d.ts +1 -1
- package/lib/typescript/Input.d.ts +1 -0
- package/lib/typescript/constants/index.d.ts +2 -0
- package/lib/typescript/index.d.ts +1 -1
- package/lib/typescript/styles/input.d.ts +1 -0
- package/package.json +8 -3
- package/src/Dropdown.tsx +11 -22
- package/src/DropdownList.tsx +10 -7
- package/src/DropdownListItem.tsx +4 -3
- package/src/Input.tsx +37 -0
- package/src/constants/index.ts +2 -0
- package/src/index.tsx +49 -5
- package/src/styles/colors.ts +1 -0
- package/src/styles/input.ts +22 -0
package/README.md
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
# react-native-select
|
|
2
2
|
|
|
3
|
-
Dropdown package for react-native
|
|
3
|
+
Dropdown package for react-native.
|
|
4
|
+
Works perfectly on android and iOS.
|
|
4
5
|
|
|
5
6
|
## Installation
|
|
6
7
|
|
|
@@ -8,6 +9,12 @@ Dropdown package for react-native
|
|
|
8
9
|
npm install react-native-select
|
|
9
10
|
```
|
|
10
11
|
|
|
12
|
+
## Demo
|
|
13
|
+
|
|
14
|
+
| Multiple Select | Single Select |
|
|
15
|
+
| :--------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: |
|
|
16
|
+
| <video src='https://user-images.githubusercontent.com/9849221/148039859-9eb4ef87-60ca-4300-9899-fbe81dcb0fb6.mov' width=90/> | <video src='https://user-images.githubusercontent.com/9849221/148039800-9c30509a-6115-415e-aa3c-0402d64ec578.mov' width=90/> |
|
|
17
|
+
|
|
11
18
|
## Usage
|
|
12
19
|
|
|
13
20
|
```js
|
|
@@ -17,7 +24,7 @@ import { StyleSheet, View } from 'react-native';
|
|
|
17
24
|
import DropdownSelect from 'react-native-select';
|
|
18
25
|
|
|
19
26
|
export default function App() {
|
|
20
|
-
const [
|
|
27
|
+
const [country, setCountry] = React.useState<number | undefined>();
|
|
21
28
|
|
|
22
29
|
return (
|
|
23
30
|
<DropdownSelect
|
|
@@ -36,29 +43,35 @@ export default function App() {
|
|
|
36
43
|
]}
|
|
37
44
|
optionLabel={'name'}
|
|
38
45
|
optionValue={'code'}
|
|
39
|
-
selectedValue={
|
|
40
|
-
onValueChange={(
|
|
46
|
+
selectedValue={country}
|
|
47
|
+
onValueChange={(value) => setCountry(value)}
|
|
48
|
+
primaryColor={'green'}
|
|
41
49
|
/>
|
|
42
50
|
);
|
|
43
51
|
}
|
|
44
52
|
```
|
|
45
53
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
|
49
|
-
|
|
|
54
|
+
## Props
|
|
55
|
+
|
|
56
|
+
| Proptypes | Datatype | Example |
|
|
57
|
+
| ---------------------- | ------------------- | -------------------------------------------------------------------------- |
|
|
58
|
+
| label | `string` | `Countries` |
|
|
59
|
+
| placeholder | `string` | `Select a country` |
|
|
50
60
|
| options | `Array` | `[{ name: 'Albania', code: 'AL' }, { name: 'Åland Islands', code: 'AX' }]` |
|
|
51
|
-
| optionLabel | `string` | `name`
|
|
52
|
-
| optionValue | `string` | `code`
|
|
53
|
-
| selectedValue | `string` or `Array` | `AL` or `[AL, AX]`
|
|
54
|
-
| onValueChange | `function` | `()=>{`
|
|
55
|
-
| isMultiple | `Boolean` | `true`
|
|
56
|
-
|
|
|
57
|
-
|
|
|
58
|
-
|
|
|
59
|
-
|
|
|
60
|
-
|
|
|
61
|
-
|
|
|
61
|
+
| optionLabel | `string` | `name` |
|
|
62
|
+
| optionValue | `string` | `code` |
|
|
63
|
+
| selectedValue | `string` or `Array` | `AL` or `[AL, AX]` |
|
|
64
|
+
| onValueChange | `function` | `()=>{}` |
|
|
65
|
+
| isMultiple | `Boolean` | `true` |
|
|
66
|
+
| isSearchable | `Boolean` | `true` |
|
|
67
|
+
| labelStyle | `Object` | `{backgroundColor: 'red', borderRadius: 0, ...}` |
|
|
68
|
+
| dropdownStyle | `Object` | `{backgroundColor: 'red', margin: 5, ...}` |
|
|
69
|
+
| dropdownContainerStyle | `Object` | `{backgroundColor: 'red', borderRadius: 0, ...}` |
|
|
70
|
+
| searchInputStyle | `Object` | `{backgroundColor: 'red', borderRadius: 0, ...}` |
|
|
71
|
+
| selectedItemStyle | `Object` | `{backgroundColor: 'red', color: 'yellow', ...}` |
|
|
72
|
+
| modalBackgroundStyle | `Object` | `{backgroundColor: 'blue', ...}` |
|
|
73
|
+
| modalOptionsContainer | `Object` | `{padding: 5}` |
|
|
74
|
+
| primaryColor | `string` | `blue` |
|
|
62
75
|
|
|
63
76
|
## Contributing
|
|
64
77
|
|
package/lib/commonjs/Dropdown.js
CHANGED
|
@@ -11,6 +11,8 @@ var _reactNative = require("react-native");
|
|
|
11
11
|
|
|
12
12
|
var _colors = require("./styles/colors");
|
|
13
13
|
|
|
14
|
+
var _input = require("./styles/input");
|
|
15
|
+
|
|
14
16
|
var _typography = require("./styles/typography");
|
|
15
17
|
|
|
16
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -30,7 +32,8 @@ const Dropdown = _ref => {
|
|
|
30
32
|
labelStyle,
|
|
31
33
|
dropdownStyle,
|
|
32
34
|
dropdownContainerStyle,
|
|
33
|
-
selectedItemStyle
|
|
35
|
+
selectedItemStyle,
|
|
36
|
+
primaryColor
|
|
34
37
|
} = _ref;
|
|
35
38
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
36
39
|
style: [styles.dropdownInputContainer, dropdownContainerStyle]
|
|
@@ -42,7 +45,7 @@ const Dropdown = _ref => {
|
|
|
42
45
|
let {
|
|
43
46
|
pressed
|
|
44
47
|
} = _ref2;
|
|
45
|
-
return [pressed &&
|
|
48
|
+
return [pressed && _input.inputStyles.inputFocusState, _input.inputStyles.input, dropdownStyle];
|
|
46
49
|
}
|
|
47
50
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
|
|
48
51
|
horizontal: true,
|
|
@@ -53,7 +56,9 @@ const Dropdown = _ref => {
|
|
|
53
56
|
onStartShouldSetResponder: () => true
|
|
54
57
|
}, isMultiple ? getSelectedItemsLabel().map((item, i) => /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
55
58
|
key: `SelectedItems${i}`,
|
|
56
|
-
style: [styles.selectedItems,
|
|
59
|
+
style: [styles.selectedItems, {
|
|
60
|
+
backgroundColor: primaryColor
|
|
61
|
+
}, selectedItemStyle]
|
|
57
62
|
}, item)) : /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
58
63
|
style: styles.blackText
|
|
59
64
|
}, getSelectedItemsLabel())), !selectedItem && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0 && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
@@ -75,27 +80,10 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
75
80
|
color: _colors.colors.gray,
|
|
76
81
|
..._typography.typography.caption
|
|
77
82
|
},
|
|
78
|
-
input: {
|
|
79
|
-
paddingVertical: 18,
|
|
80
|
-
paddingHorizontal: 23,
|
|
81
|
-
backgroundColor: _colors.colors.lightGray,
|
|
82
|
-
borderRadius: 8,
|
|
83
|
-
borderColor: _colors.colors.dark,
|
|
84
|
-
borderWidth: 1,
|
|
85
|
-
color: _colors.colors.dark,
|
|
86
|
-
width: '100%',
|
|
87
|
-
minHeight: 64
|
|
88
|
-
},
|
|
89
|
-
inputFocusState: {
|
|
90
|
-
borderWidth: 2,
|
|
91
|
-
borderStyle: 'solid',
|
|
92
|
-
borderColor: _colors.colors.primary,
|
|
93
|
-
borderRadius: 8
|
|
94
|
-
},
|
|
95
83
|
inputFocusErrorState: {
|
|
96
84
|
borderWidth: 2,
|
|
97
85
|
borderStyle: 'solid',
|
|
98
|
-
borderColor: _colors.colors.
|
|
86
|
+
borderColor: _colors.colors.red
|
|
99
87
|
},
|
|
100
88
|
iconStyle: {
|
|
101
89
|
position: 'absolute',
|
|
@@ -103,7 +91,7 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
103
91
|
top: 25
|
|
104
92
|
},
|
|
105
93
|
error: {
|
|
106
|
-
color: _colors.colors.
|
|
94
|
+
color: _colors.colors.red,
|
|
107
95
|
marginTop: 8,
|
|
108
96
|
..._typography.typography.caption
|
|
109
97
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Dropdown.tsx"],"names":["Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","setOpen","open","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","styles","dropdownInputContainer","pressed","inputFocusState","input","selectedItemsContainer","map","item","i","blackText","length","iconStyle","require","helper","StyleSheet","create","marginBottom","color","colors","gray","typography","caption","
|
|
1
|
+
{"version":3,"sources":["Dropdown.tsx"],"names":["Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","setOpen","open","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","primaryColor","styles","dropdownInputContainer","pressed","inputStyles","inputFocusState","input","selectedItemsContainer","map","item","i","backgroundColor","blackText","length","iconStyle","require","helper","StyleSheet","create","marginBottom","color","colors","gray","typography","caption","inputFocusErrorState","borderWidth","borderStyle","borderColor","red","position","right","top","marginTop","primary","width","flexDirection","flexWrap","white","paddingHorizontal","paddingVertical","borderRadius","marginRight","black"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n View,\n Text,\n Pressable,\n ScrollView,\n StyleSheet,\n Image,\n} from 'react-native';\nimport { colors } from './styles/colors';\nimport { inputStyles } from './styles/input';\nimport { typography } from './styles/typography';\n\nconst Dropdown = ({\n label,\n placeholder,\n helperText,\n error,\n getSelectedItemsLabel,\n setOpen,\n open,\n isMultiple,\n selectedItem,\n selectedItems,\n labelStyle,\n dropdownStyle,\n dropdownContainerStyle,\n selectedItemStyle,\n primaryColor,\n}: any) => {\n return (\n <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>\n {label && label !== '' && (\n <Text style={[styles.label, labelStyle]}>{label}</Text>\n )}\n <Pressable\n onPress={() => setOpen(!open)}\n style={({ pressed }) => [\n pressed && inputStyles.inputFocusState,\n inputStyles.input,\n dropdownStyle,\n ]}\n >\n <ScrollView\n horizontal\n alwaysBounceHorizontal\n showsHorizontalScrollIndicator={false}\n >\n <View\n style={styles.selectedItemsContainer}\n onStartShouldSetResponder={() => true}\n >\n {isMultiple ? (\n getSelectedItemsLabel().map((item: any, i: Number) => (\n <Text\n key={`SelectedItems${i}`}\n style={[\n styles.selectedItems,\n { backgroundColor: primaryColor },\n selectedItemStyle,\n ]}\n >\n {item}\n </Text>\n ))\n ) : (\n <Text style={styles.blackText}>{getSelectedItemsLabel()}</Text>\n )}\n </View>\n\n {!selectedItem && selectedItems?.length === 0 && (\n <Text style={styles.blackText}>\n {placeholder ?? 'Select an option'}\n </Text>\n )}\n </ScrollView>\n <View style={styles.iconStyle}>\n <Image source={require('../src/asset/arrow-down.png')} />\n </View>\n </Pressable>\n\n {error && error !== '' && <Text style={styles.error}>{error}</Text>}\n\n {helperText && helperText !== '' && !error && (\n <Text style={styles.helper}>{helperText}</Text>\n )}\n </View>\n );\n};\n\nconst styles = StyleSheet.create({\n label: { marginBottom: 16, color: colors.gray, ...typography.caption },\n inputFocusErrorState: {\n borderWidth: 2,\n borderStyle: 'solid',\n borderColor: colors.red,\n },\n iconStyle: { position: 'absolute', right: 25, top: 25 },\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 selectedItemsContainer: { flexDirection: 'row', flexWrap: 'nowrap' },\n selectedItems: {\n color: colors.white,\n paddingHorizontal: 10,\n paddingVertical: 5,\n borderRadius: 10,\n backgroundColor: colors.primary,\n marginRight: 10,\n },\n blackText: { color: colors.black },\n});\n\nexport default Dropdown;\n"]}
|
|
@@ -24,18 +24,16 @@ const DropdownList = _ref => {
|
|
|
24
24
|
selectedItems,
|
|
25
25
|
selectedItem,
|
|
26
26
|
handleMultipleSelections,
|
|
27
|
-
handleSingleSelection
|
|
27
|
+
handleSingleSelection,
|
|
28
|
+
primaryColor
|
|
28
29
|
} = _ref;
|
|
29
30
|
return /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
|
|
30
31
|
data: options,
|
|
31
32
|
extraData: isMultiple ? selectedItems : selectedItem,
|
|
32
|
-
initialNumToRender: 5
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
// />
|
|
37
|
-
// }
|
|
38
|
-
,
|
|
33
|
+
initialNumToRender: 5,
|
|
34
|
+
ListEmptyComponent: /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
35
|
+
style: styles.emptyListStyle
|
|
36
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, "No options available")),
|
|
39
37
|
ItemSeparatorComponent: () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
40
38
|
style: styles.itemSeparatorStyle
|
|
41
39
|
}),
|
|
@@ -44,7 +42,8 @@ const DropdownList = _ref => {
|
|
|
44
42
|
optionValue,
|
|
45
43
|
isMultiple,
|
|
46
44
|
selectedOption: isMultiple ? selectedItems : selectedItem,
|
|
47
|
-
onChange: isMultiple ? handleMultipleSelections : handleSingleSelection
|
|
45
|
+
onChange: isMultiple ? handleMultipleSelections : handleSingleSelection,
|
|
46
|
+
primaryColor
|
|
48
47
|
}),
|
|
49
48
|
keyExtractor: (_item, index) => `Options${index}`
|
|
50
49
|
});
|
|
@@ -60,7 +59,8 @@ const _renderItem = (_ref2, props) => {
|
|
|
60
59
|
optionValue: props.optionValue,
|
|
61
60
|
isMultiple: props.isMultiple,
|
|
62
61
|
selectedOption: props.selectedOption,
|
|
63
|
-
onChange: props.onChange
|
|
62
|
+
onChange: props.onChange,
|
|
63
|
+
primaryColor: props.primaryColor
|
|
64
64
|
});
|
|
65
65
|
};
|
|
66
66
|
|
|
@@ -82,6 +82,11 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
82
82
|
backgroundColor: _colors.colors.gray,
|
|
83
83
|
height: 1,
|
|
84
84
|
opacity: 0.15
|
|
85
|
+
},
|
|
86
|
+
emptyListStyle: {
|
|
87
|
+
alignItems: 'center',
|
|
88
|
+
width: '100%',
|
|
89
|
+
marginVertical: 20
|
|
85
90
|
}
|
|
86
91
|
});
|
|
87
92
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DropdownList.tsx"],"names":["DropdownList","options","optionLabel","optionValue","isMultiple","selectedItems","selectedItem","handleMultipleSelections","handleSingleSelection","styles","itemSeparatorStyle","item","_renderItem","selectedOption","onChange","_item","index","props","StyleSheet","create","modalContainer","flex","justifyContent","modalBackgroundStyle","backgroundColor","modalOptionsContainer","maxHeight","colors","white","borderTopLeftRadius","borderTopRightRadius","gray","height","opacity"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,YAAY,GAAG,
|
|
1
|
+
{"version":3,"sources":["DropdownList.tsx"],"names":["DropdownList","options","optionLabel","optionValue","isMultiple","selectedItems","selectedItem","handleMultipleSelections","handleSingleSelection","primaryColor","styles","emptyListStyle","itemSeparatorStyle","item","_renderItem","selectedOption","onChange","_item","index","props","StyleSheet","create","modalContainer","flex","justifyContent","modalBackgroundStyle","backgroundColor","modalOptionsContainer","maxHeight","colors","white","borderTopLeftRadius","borderTopRightRadius","gray","height","opacity","alignItems","width","marginVertical"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,YAAY,GAAG,QAUV;AAAA,MAVW;AACpBC,IAAAA,OADoB;AAEpBC,IAAAA,WAFoB;AAGpBC,IAAAA,WAHoB;AAIpBC,IAAAA,UAJoB;AAKpBC,IAAAA,aALoB;AAMpBC,IAAAA,YANoB;AAOpBC,IAAAA,wBAPoB;AAQpBC,IAAAA,qBARoB;AASpBC,IAAAA;AAToB,GAUX;AACT,sBACE,6BAAC,qBAAD;AACE,IAAA,IAAI,EAAER,OADR;AAEE,IAAA,SAAS,EAAEG,UAAU,GAAGC,aAAH,GAAmBC,YAF1C;AAGE,IAAA,kBAAkB,EAAE,CAHtB;AAIE,IAAA,kBAAkB,eAChB,6BAAC,iBAAD;AAAM,MAAA,KAAK,EAAEI,MAAM,CAACC;AAApB,oBACE,6BAAC,iBAAD,+BADF,CALJ;AASE,IAAA,sBAAsB,EAAE,mBAAM,6BAAC,iBAAD;AAAM,MAAA,KAAK,EAAED,MAAM,CAACE;AAApB,MAThC;AAUE,IAAA,UAAU,EAAGC,IAAD,IACVC,WAAW,CAACD,IAAD,EAAO;AAChBX,MAAAA,WADgB;AAEhBC,MAAAA,WAFgB;AAGhBC,MAAAA,UAHgB;AAIhBW,MAAAA,cAAc,EAAEX,UAAU,GAAGC,aAAH,GAAmBC,YAJ7B;AAKhBU,MAAAA,QAAQ,EAAEZ,UAAU,GAChBG,wBADgB,GAEhBC,qBAPY;AAQhBC,MAAAA;AARgB,KAAP,CAXf;AAsBE,IAAA,YAAY,EAAE,CAACQ,KAAD,EAAQC,KAAR,KAAmB,UAASA,KAAM;AAtBlD,IADF;AA0BD,CArCD;;AAuCA,MAAMJ,WAAW,GAAG,QAAgBK,KAAhB,KAA+B;AAAA,MAA9B;AAAEN,IAAAA;AAAF,GAA8B;AACjD,sBACE,6BAAC,yBAAD;AACE,IAAA,IAAI,EAAEA,IADR;AAEE,IAAA,WAAW,EAAEM,KAAK,CAACjB,WAFrB;AAGE,IAAA,WAAW,EAAEiB,KAAK,CAAChB,WAHrB;AAIE,IAAA,UAAU,EAAEgB,KAAK,CAACf,UAJpB;AAKE,IAAA,cAAc,EAAEe,KAAK,CAACJ,cALxB;AAME,IAAA,QAAQ,EAAEI,KAAK,CAACH,QANlB;AAOE,IAAA,YAAY,EAAEG,KAAK,CAACV;AAPtB,IADF;AAWD,CAZD;;AAcA,MAAMC,MAAM,GAAGU,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,cAAc,EAAE;AACdC,IAAAA,IAAI,EAAE,CADQ;AAEdC,IAAAA,cAAc,EAAE;AAFF,GADe;AAK/BC,EAAAA,oBAAoB,EAAE;AAAEC,IAAAA,eAAe,EAAE;AAAnB,GALS;AAM/BC,EAAAA,qBAAqB,EAAE;AACrBC,IAAAA,SAAS,EAAE,KADU;AAErBF,IAAAA,eAAe,EAAEG,eAAOC,KAFH;AAGrBC,IAAAA,mBAAmB,EAAE,EAHA;AAIrBC,IAAAA,oBAAoB,EAAE;AAJD,GANQ;AAY/BpB,EAAAA,kBAAkB,EAAE;AAClBc,IAAAA,eAAe,EAAEG,eAAOI,IADN;AAElBC,IAAAA,MAAM,EAAE,CAFU;AAGlBC,IAAAA,OAAO,EAAE;AAHS,GAZW;AAiB/BxB,EAAAA,cAAc,EAAE;AAAEyB,IAAAA,UAAU,EAAE,QAAd;AAAwBC,IAAAA,KAAK,EAAE,MAA/B;AAAuCC,IAAAA,cAAc,EAAE;AAAvD;AAjBe,CAAlB,CAAf;;eAoBetC,Y","sourcesContent":["import React from 'react';\nimport { View, FlatList, StyleSheet, Text } from 'react-native';\nimport DropdownListItem from './DropdownListItem';\nimport { colors } from './styles/colors';\n\nconst DropdownList = ({\n options,\n optionLabel,\n optionValue,\n isMultiple,\n selectedItems,\n selectedItem,\n handleMultipleSelections,\n handleSingleSelection,\n primaryColor,\n}: any) => {\n return (\n <FlatList\n data={options}\n extraData={isMultiple ? selectedItems : selectedItem}\n initialNumToRender={5}\n ListEmptyComponent={\n <View style={styles.emptyListStyle}>\n <Text>No options available</Text>\n </View>\n }\n ItemSeparatorComponent={() => <View style={styles.itemSeparatorStyle} />}\n renderItem={(item) =>\n _renderItem(item, {\n optionLabel,\n optionValue,\n isMultiple,\n selectedOption: isMultiple ? selectedItems : selectedItem,\n onChange: isMultiple\n ? handleMultipleSelections\n : handleSingleSelection,\n primaryColor,\n })\n }\n keyExtractor={(_item, index) => `Options${index}`}\n />\n );\n};\n\nconst _renderItem = ({ item }: any, props: any) => {\n return (\n <DropdownListItem\n item={item}\n optionLabel={props.optionLabel}\n optionValue={props.optionValue}\n isMultiple={props.isMultiple}\n selectedOption={props.selectedOption}\n onChange={props.onChange}\n primaryColor={props.primaryColor}\n />\n );\n};\n\nconst styles = StyleSheet.create({\n modalContainer: {\n flex: 1,\n justifyContent: 'flex-end',\n },\n modalBackgroundStyle: { backgroundColor: 'rgba(0, 0, 0, 0.5)' },\n modalOptionsContainer: {\n maxHeight: '50%',\n backgroundColor: colors.white,\n borderTopLeftRadius: 16,\n borderTopRightRadius: 16,\n },\n itemSeparatorStyle: {\n backgroundColor: colors.gray,\n height: 1,\n opacity: 0.15,\n },\n emptyListStyle: { alignItems: 'center', width: '100%', marginVertical: 20 },\n});\n\nexport default DropdownList;\n"]}
|
|
@@ -26,7 +26,8 @@ const DropdownListItem = _ref => {
|
|
|
26
26
|
optionValue,
|
|
27
27
|
isMultiple,
|
|
28
28
|
selectedOption,
|
|
29
|
-
onChange
|
|
29
|
+
onChange,
|
|
30
|
+
primaryColor
|
|
30
31
|
} = _ref;
|
|
31
32
|
const selectedOptionValue = optionValue !== null && optionValue !== void 0 ? optionValue : 'value';
|
|
32
33
|
return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
|
|
@@ -40,12 +41,12 @@ const DropdownListItem = _ref => {
|
|
|
40
41
|
boxType: "circle" //works on ios only
|
|
41
42
|
,
|
|
42
43
|
tintColors: {
|
|
43
|
-
true: _colors.colors.primary
|
|
44
|
+
true: primaryColor || _colors.colors.primary
|
|
44
45
|
} //android control
|
|
45
46
|
,
|
|
46
|
-
onCheckColor: _colors.colors.primary //ios checkmark colour control
|
|
47
|
+
onCheckColor: primaryColor || _colors.colors.primary //ios checkmark colour control
|
|
47
48
|
,
|
|
48
|
-
onTintColor: _colors.colors.primary //ios box colour control
|
|
49
|
+
onTintColor: primaryColor || _colors.colors.primary //ios box colour control
|
|
49
50
|
|
|
50
51
|
})), /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, item[optionLabel !== null && optionLabel !== void 0 ? optionLabel : 'label'])));
|
|
51
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DropdownListItem.tsx"],"names":["DropdownListItem","item","optionLabel","optionValue","isMultiple","selectedOption","onChange","selectedOptionValue","styles","modalOptions","spacing","includes","true","colors","primary","StyleSheet","create","marginRight","paddingHorizontal","paddingVertical","flexDirection","alignItems"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,gBAAgB,GAAG,
|
|
1
|
+
{"version":3,"sources":["DropdownListItem.tsx"],"names":["DropdownListItem","item","optionLabel","optionValue","isMultiple","selectedOption","onChange","primaryColor","selectedOptionValue","styles","modalOptions","spacing","includes","true","colors","primary","StyleSheet","create","marginRight","paddingHorizontal","paddingVertical","flexDirection","alignItems"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,gBAAgB,GAAG,QAQd;AAAA,MARe;AACxBC,IAAAA,IADwB;AAExBC,IAAAA,WAFwB;AAGxBC,IAAAA,WAHwB;AAIxBC,IAAAA,UAJwB;AAKxBC,IAAAA,cALwB;AAMxBC,IAAAA,QANwB;AAOxBC,IAAAA;AAPwB,GAQf;AACT,QAAMC,mBAAmB,GAAGL,WAAH,aAAGA,WAAH,cAAGA,WAAH,GAAkB,OAA3C;AACA,sBACE,6BAAC,6BAAD;AACE,IAAA,KAAK,EAAEM,MAAM,CAACC,YADhB;AAEE,IAAA,OAAO,EAAE,MAAMJ,QAAQ,CAACL,IAAI,CAACO,mBAAD,CAAL;AAFzB,kBAIE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEC,MAAM,CAACE;AAApB,kBACE,6BAAC,iBAAD;AACE,IAAA,KAAK,EACHP,UAAU,GACNC,cAAc,CAACO,QAAf,CAAwBX,IAAI,CAACO,mBAAD,CAA5B,CADM,GAEN,CAACH,cAAD,EAAiBO,QAAjB,CAA0BX,IAAI,CAACO,mBAAD,CAA9B,CAJR;AAME,IAAA,QAAQ,EAAE,MAAMF,QAAQ,CAACL,IAAI,CAACO,mBAAD,CAAL,CAN1B;AAOE,IAAA,OAAO,EAAC,QAPV,CAOmB;AAPnB;AAQE,IAAA,UAAU,EAAE;AAAEK,MAAAA,IAAI,EAAEN,YAAY,IAAIO,eAAOC;AAA/B,KARd,CAQwD;AARxD;AASE,IAAA,YAAY,EAAER,YAAY,IAAIO,eAAOC,OATvC,CASgD;AAThD;AAUE,IAAA,WAAW,EAAER,YAAY,IAAIO,eAAOC,OAVtC,CAU+C;;AAV/C,IADF,CAJF,eAkBE,6BAAC,iBAAD,qBACE,6BAAC,iBAAD,QAAOd,IAAI,CAACC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgB,OAAhB,CAAX,CADF,CAlBF,CADF;AAwBD,CAlCD;;AAoCA,MAAMO,MAAM,GAAGO,wBAAWC,MAAX,CAAkB;AAC/BN,EAAAA,OAAO,EAAE;AAAEO,IAAAA,WAAW,EAAE;AAAf,GADsB;AAE/BR,EAAAA,YAAY,EAAE;AACZS,IAAAA,iBAAiB,EAAE,EADP;AAEZC,IAAAA,eAAe,EAAE,EAFL;AAGZC,IAAAA,aAAa,EAAE,KAHH;AAIZC,IAAAA,UAAU,EAAE;AAJA;AAFiB,CAAlB,CAAf;;4BAUe,iBAAKtB,gBAAL,C","sourcesContent":["import React, { memo } from 'react';\nimport { View, Text, TouchableOpacity, StyleSheet } from 'react-native';\nimport CheckBox from '@react-native-community/checkbox';\nimport { colors } from './styles/colors';\n\nconst DropdownListItem = ({\n item,\n optionLabel,\n optionValue,\n isMultiple,\n selectedOption,\n onChange,\n primaryColor,\n}: any) => {\n const selectedOptionValue = optionValue ?? 'value';\n return (\n <TouchableOpacity\n style={styles.modalOptions}\n onPress={() => onChange(item[selectedOptionValue])}\n >\n <View style={styles.spacing}>\n <CheckBox\n value={\n isMultiple\n ? selectedOption.includes(item[selectedOptionValue])\n : [selectedOption].includes(item[selectedOptionValue])\n }\n onChange={() => onChange(item[selectedOptionValue])}\n boxType=\"circle\" //works on ios only\n tintColors={{ true: primaryColor || colors.primary }} //android control\n onCheckColor={primaryColor || colors.primary} //ios checkmark colour control\n onTintColor={primaryColor || colors.primary} //ios box colour control\n />\n </View>\n <View>\n <Text>{item[optionLabel ?? 'label']}</Text>\n </View>\n </TouchableOpacity>\n );\n};\n\nconst styles = StyleSheet.create({\n spacing: { marginRight: 10 },\n modalOptions: {\n paddingHorizontal: 20,\n paddingVertical: 10,\n flexDirection: 'row',\n alignItems: 'center',\n },\n});\n\nexport default memo(DropdownListItem);\n"]}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.Input = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _reactNative = require("react-native");
|
|
11
|
+
|
|
12
|
+
var _input = require("./styles/input");
|
|
13
|
+
|
|
14
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
|
+
|
|
16
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
|
+
|
|
18
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
19
|
+
|
|
20
|
+
const Input = _ref => {
|
|
21
|
+
let {
|
|
22
|
+
placeholder,
|
|
23
|
+
value,
|
|
24
|
+
onChangeText,
|
|
25
|
+
style,
|
|
26
|
+
...rest
|
|
27
|
+
} = _ref;
|
|
28
|
+
const [isFocused, setFocus] = (0, _react.useState)(false);
|
|
29
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
30
|
+
style: styles.container
|
|
31
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.TextInput, _extends({
|
|
32
|
+
placeholder: placeholder,
|
|
33
|
+
style: [_input.inputStyles.input, isFocused && _input.inputStyles.inputFocusState, style],
|
|
34
|
+
onFocus: () => {
|
|
35
|
+
setFocus(true);
|
|
36
|
+
},
|
|
37
|
+
onBlur: () => setFocus(false),
|
|
38
|
+
value: value,
|
|
39
|
+
onChangeText: onChangeText
|
|
40
|
+
}, rest)));
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
exports.Input = Input;
|
|
44
|
+
|
|
45
|
+
const styles = _reactNative.StyleSheet.create({
|
|
46
|
+
container: {
|
|
47
|
+
margin: 23
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
//# sourceMappingURL=Input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["Input.tsx"],"names":["Input","placeholder","value","onChangeText","style","rest","isFocused","setFocus","styles","container","inputStyles","input","inputFocusState","StyleSheet","create","margin"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAEO,MAAMA,KAAK,GAAG,QAMV;AAAA,MANW;AACpBC,IAAAA,WADoB;AAEpBC,IAAAA,KAFoB;AAGpBC,IAAAA,YAHoB;AAIpBC,IAAAA,KAJoB;AAKpB,OAAGC;AALiB,GAMX;AACT,QAAM,CAACC,SAAD,EAAYC,QAAZ,IAAwB,qBAAS,KAAT,CAA9B;AAEA,sBACE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEC,MAAM,CAACC;AAApB,kBACE,6BAAC,sBAAD;AACE,IAAA,WAAW,EAAER,WADf;AAEE,IAAA,KAAK,EAAE,CACLS,mBAAYC,KADP,EAELL,SAAS,IAAII,mBAAYE,eAFpB,EAGLR,KAHK,CAFT;AAOE,IAAA,OAAO,EAAE,MAAM;AACbG,MAAAA,QAAQ,CAAC,IAAD,CAAR;AACD,KATH;AAUE,IAAA,MAAM,EAAE,MAAMA,QAAQ,CAAC,KAAD,CAVxB;AAWE,IAAA,KAAK,EAAEL,KAXT;AAYE,IAAA,YAAY,EAAEC;AAZhB,KAaME,IAbN,EADF,CADF;AAmBD,CA5BM;;;;AA8BP,MAAMG,MAAM,GAAGK,wBAAWC,MAAX,CAAkB;AAC/BL,EAAAA,SAAS,EAAE;AAAEM,IAAAA,MAAM,EAAE;AAAV;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useState } from 'react';\nimport { TextInput, StyleSheet, View } from 'react-native';\nimport { inputStyles } from './styles/input';\n\nexport const Input = ({\n placeholder,\n value,\n onChangeText,\n style,\n ...rest\n}: any) => {\n const [isFocused, setFocus] = useState(false);\n\n return (\n <View style={styles.container}>\n <TextInput\n placeholder={placeholder}\n style={[\n inputStyles.input,\n isFocused && inputStyles.inputFocusState,\n style,\n ]}\n onFocus={() => {\n setFocus(true);\n }}\n onBlur={() => setFocus(false)}\n value={value}\n onChangeText={onChangeText}\n {...rest}\n />\n </View>\n );\n};\n\nconst styles = StyleSheet.create({\n container: { margin: 23 },\n});\n"]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.DEFAULT_OPTION_VALUE = exports.DEFAULT_OPTION_LABEL = void 0;
|
|
7
|
+
const DEFAULT_OPTION_LABEL = 'label';
|
|
8
|
+
exports.DEFAULT_OPTION_LABEL = DEFAULT_OPTION_LABEL;
|
|
9
|
+
const DEFAULT_OPTION_VALUE = 'value';
|
|
10
|
+
exports.DEFAULT_OPTION_VALUE = DEFAULT_OPTION_VALUE;
|
|
11
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":["DEFAULT_OPTION_LABEL","DEFAULT_OPTION_VALUE"],"mappings":";;;;;;AAAO,MAAMA,oBAAoB,GAAG,OAA7B;;AACA,MAAMC,oBAAoB,GAAG,OAA7B","sourcesContent":["export const DEFAULT_OPTION_LABEL = 'label';\nexport const DEFAULT_OPTION_VALUE = 'value';\n"]}
|
package/lib/commonjs/index.js
CHANGED
|
@@ -13,6 +13,10 @@ var _Modal = _interopRequireDefault(require("./Modal"));
|
|
|
13
13
|
|
|
14
14
|
var _DropdownList = _interopRequireDefault(require("./DropdownList"));
|
|
15
15
|
|
|
16
|
+
var _constants = require("./constants");
|
|
17
|
+
|
|
18
|
+
var _Input = require("./Input");
|
|
19
|
+
|
|
16
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
21
|
|
|
18
22
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -31,18 +35,23 @@ const DropdownSelect = _ref => {
|
|
|
31
35
|
onValueChange,
|
|
32
36
|
selectedValue,
|
|
33
37
|
isMultiple,
|
|
38
|
+
isSearchable,
|
|
34
39
|
labelStyle,
|
|
35
40
|
dropdownStyle,
|
|
36
41
|
dropdownContainerStyle,
|
|
37
42
|
selectedItemStyle,
|
|
38
43
|
modalBackgroundStyle,
|
|
39
|
-
modalOptionsContainer
|
|
44
|
+
modalOptionsContainer,
|
|
45
|
+
searchInputStyle,
|
|
46
|
+
primaryColor
|
|
40
47
|
} = _ref;
|
|
48
|
+
const [newOptions, setNewOptions] = (0, _react.useState)(options ? options : []);
|
|
41
49
|
const [open, setOpen] = (0, _react.useState)(false);
|
|
42
50
|
const [selectedItem, setSelectedItem] = (0, _react.useState)(selectedValue); //for single selection
|
|
43
51
|
|
|
44
|
-
const [selectedItems, setSelectedItems] = (0, _react.useState)(Array.isArray(selectedValue) ? selectedValue : []); //for multiple selection
|
|
52
|
+
const [selectedItems, setSelectedItems] = (0, _react.useState)(Array.isArray(selectedValue) ? selectedValue : selectedValue === '' || selectedValue === undefined ? [] : [selectedValue]); //for multiple selection
|
|
45
53
|
|
|
54
|
+
const [searchValue, setSearchValue] = (0, _react.useState)('');
|
|
46
55
|
/*===========================================
|
|
47
56
|
* Selection handlers
|
|
48
57
|
*==========================================*/
|
|
@@ -80,14 +89,27 @@ const DropdownSelect = _ref => {
|
|
|
80
89
|
selectedItems && selectedItems.forEach(element => {
|
|
81
90
|
var _options$find;
|
|
82
91
|
|
|
83
|
-
let selectedItemLabel = options && ((_options$find = options.find(item => item[optionValue !== null && optionValue !== void 0 ? optionValue :
|
|
92
|
+
let selectedItemLabel = options && ((_options$find = options.find(item => item[optionValue !== null && optionValue !== void 0 ? optionValue : _constants.DEFAULT_OPTION_VALUE] === element)) === null || _options$find === void 0 ? void 0 : _options$find[optionLabel]);
|
|
84
93
|
selectedLabels.push(selectedItemLabel);
|
|
85
94
|
});
|
|
86
95
|
return selectedLabels;
|
|
87
96
|
}
|
|
88
97
|
|
|
89
|
-
let selectedItemLabel = options && options.find(item => item[optionValue !== null && optionValue !== void 0 ? optionValue :
|
|
90
|
-
return selectedItemLabel === null || selectedItemLabel === void 0 ? void 0 : selectedItemLabel[optionLabel];
|
|
98
|
+
let selectedItemLabel = options && options.find(item => item[optionValue !== null && optionValue !== void 0 ? optionValue : _constants.DEFAULT_OPTION_VALUE] === selectedItem);
|
|
99
|
+
return selectedItemLabel === null || selectedItemLabel === void 0 ? void 0 : selectedItemLabel[optionLabel !== null && optionLabel !== void 0 ? optionLabel : _constants.DEFAULT_OPTION_LABEL];
|
|
100
|
+
};
|
|
101
|
+
/*===========================================
|
|
102
|
+
* Search
|
|
103
|
+
*==========================================*/
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
const onSearch = value => {
|
|
107
|
+
setSearchValue(value);
|
|
108
|
+
let searchTerm = value.toString().toLocaleLowerCase();
|
|
109
|
+
const searchResults = options.filter(item => {
|
|
110
|
+
return item[optionLabel !== null && optionLabel !== void 0 ? optionLabel : _constants.DEFAULT_OPTION_LABEL].toString().toLowerCase().includes(searchTerm) || item[optionValue !== null && optionValue !== void 0 ? optionValue : _constants.DEFAULT_OPTION_VALUE].toString(searchTerm).toLowerCase().includes();
|
|
111
|
+
});
|
|
112
|
+
setNewOptions(searchResults);
|
|
91
113
|
};
|
|
92
114
|
|
|
93
115
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
|
|
@@ -104,22 +126,28 @@ const DropdownSelect = _ref => {
|
|
|
104
126
|
dropdownStyle: dropdownStyle,
|
|
105
127
|
dropdownContainerStyle: dropdownContainerStyle,
|
|
106
128
|
selectedItemStyle: selectedItemStyle,
|
|
107
|
-
isMultiple: isMultiple
|
|
129
|
+
isMultiple: isMultiple,
|
|
130
|
+
primaryColor: primaryColor
|
|
108
131
|
}), /*#__PURE__*/_react.default.createElement(_Modal.default, {
|
|
109
132
|
open: open,
|
|
110
133
|
setOpen: setOpen,
|
|
111
134
|
modalBackgroundStyle: modalBackgroundStyle,
|
|
112
135
|
modalOptionsContainer: modalOptionsContainer,
|
|
113
136
|
onRequestClose: () => {}
|
|
114
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
115
|
-
|
|
137
|
+
}, isSearchable && /*#__PURE__*/_react.default.createElement(_Input.Input, {
|
|
138
|
+
value: searchValue,
|
|
139
|
+
onChangeText: text => onSearch(text),
|
|
140
|
+
style: searchInputStyle
|
|
141
|
+
}), /*#__PURE__*/_react.default.createElement(_DropdownList.default, {
|
|
142
|
+
options: newOptions,
|
|
116
143
|
optionLabel: optionLabel,
|
|
117
144
|
optionValue: optionValue,
|
|
118
145
|
isMultiple: isMultiple,
|
|
119
146
|
selectedItems: selectedItems,
|
|
120
147
|
selectedItem: selectedItem,
|
|
121
148
|
handleMultipleSelections: handleMultipleSelections,
|
|
122
|
-
handleSingleSelection: handleSingleSelection
|
|
149
|
+
handleSingleSelection: handleSingleSelection,
|
|
150
|
+
primaryColor: primaryColor
|
|
123
151
|
})));
|
|
124
152
|
};
|
|
125
153
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.tsx"],"names":["DropdownSelect","placeholder","label","error","helperText","options","optionLabel","optionValue","onValueChange","selectedValue","isMultiple","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","modalBackgroundStyle","modalOptionsContainer","open","setOpen","selectedItem","setSelectedItem","selectedItems","setSelectedItems","Array","isArray","handleSingleSelection","value","handleMultipleSelections","selectedValues","includes","filter","item","push","getSelectedItemsLabel","selectedLabels","forEach","element","selectedItemLabel","find"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAEO,MAAMA,cAAc,GAAG,
|
|
1
|
+
{"version":3,"sources":["index.tsx"],"names":["DropdownSelect","placeholder","label","error","helperText","options","optionLabel","optionValue","onValueChange","selectedValue","isMultiple","isSearchable","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","modalBackgroundStyle","modalOptionsContainer","searchInputStyle","primaryColor","newOptions","setNewOptions","open","setOpen","selectedItem","setSelectedItem","selectedItems","setSelectedItems","Array","isArray","undefined","searchValue","setSearchValue","handleSingleSelection","value","handleMultipleSelections","selectedValues","includes","filter","item","push","getSelectedItemsLabel","selectedLabels","forEach","element","selectedItemLabel","find","DEFAULT_OPTION_VALUE","DEFAULT_OPTION_LABEL","onSearch","searchTerm","toString","toLocaleLowerCase","searchResults","toLowerCase","text"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport Dropdown from './Dropdown';\nimport CustomModal from './Modal';\nimport DropdownList from './DropdownList';\nimport { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';\nimport { Input } from './Input';\n\nexport const DropdownSelect = ({\n placeholder,\n label,\n error,\n helperText,\n options,\n optionLabel,\n optionValue,\n onValueChange,\n selectedValue,\n isMultiple,\n isSearchable,\n labelStyle,\n dropdownStyle,\n dropdownContainerStyle,\n selectedItemStyle,\n modalBackgroundStyle,\n modalOptionsContainer,\n searchInputStyle,\n primaryColor,\n}: any) => {\n const [newOptions, setNewOptions] = useState(options ? options : []);\n const [open, setOpen] = useState(false);\n const [selectedItem, setSelectedItem] = useState(selectedValue); //for single selection\n const [selectedItems, setSelectedItems] = useState(\n Array.isArray(selectedValue)\n ? selectedValue\n : selectedValue === '' || selectedValue === undefined\n ? []\n : [selectedValue]\n ); //for multiple selection\n const [searchValue, setSearchValue] = useState('');\n\n /*===========================================\n * Selection handlers\n *==========================================*/\n const handleSingleSelection = (value: any) => {\n if (selectedItem === value) {\n setSelectedItem(null);\n } else {\n setSelectedItem(value);\n onValueChange(value); //send value to parent\n setOpen(false); //close modal upon selection\n }\n };\n\n const handleMultipleSelections = (value: any) => {\n let selectedValues = [...selectedItems];\n\n if (selectedValues.includes(value)) {\n selectedValues = selectedValues.filter((item) => item !== value);\n } else {\n selectedValues.push(value);\n }\n setSelectedItems(selectedValues);\n };\n\n /*===========================================\n * Get label handler\n *==========================================*/\n const getSelectedItemsLabel = () => {\n if (isMultiple) {\n let selectedLabels: Array<string> = [];\n selectedItems &&\n selectedItems.forEach((element) => {\n let selectedItemLabel =\n options &&\n options.find(\n (item: string) =>\n item[optionValue ?? DEFAULT_OPTION_VALUE] === element\n )?.[optionLabel];\n selectedLabels.push(selectedItemLabel);\n });\n return selectedLabels;\n }\n\n let selectedItemLabel =\n options &&\n options.find(\n (item: string) =>\n item[optionValue ?? DEFAULT_OPTION_VALUE] === selectedItem\n );\n return selectedItemLabel?.[optionLabel ?? DEFAULT_OPTION_LABEL];\n };\n\n /*===========================================\n * Search\n *==========================================*/\n const onSearch = (value: string) => {\n setSearchValue(value);\n let searchTerm = value.toString().toLocaleLowerCase();\n const searchResults = options.filter((item: any) => {\n return (\n item[optionLabel ?? DEFAULT_OPTION_LABEL]\n .toString()\n .toLowerCase()\n .includes(searchTerm) ||\n item[optionValue ?? DEFAULT_OPTION_VALUE]\n .toString(searchTerm)\n .toLowerCase()\n .includes()\n );\n });\n\n setNewOptions(searchResults);\n };\n\n return (\n <>\n <Dropdown\n label={label}\n placeholder={placeholder}\n helperText={helperText}\n error={error}\n getSelectedItemsLabel={getSelectedItemsLabel}\n selectedItem={selectedItem}\n selectedItems={selectedItems}\n setOpen={setOpen}\n open={open}\n labelStyle={labelStyle}\n dropdownStyle={dropdownStyle}\n dropdownContainerStyle={dropdownContainerStyle}\n selectedItemStyle={selectedItemStyle}\n isMultiple={isMultiple}\n primaryColor={primaryColor}\n />\n <CustomModal\n open={open}\n setOpen={setOpen}\n modalBackgroundStyle={modalBackgroundStyle}\n modalOptionsContainer={modalOptionsContainer}\n onRequestClose={() => {}}\n >\n {isSearchable && (\n <Input\n value={searchValue}\n onChangeText={(text: string) => onSearch(text)}\n style={searchInputStyle}\n />\n )}\n <DropdownList\n options={newOptions}\n optionLabel={optionLabel}\n optionValue={optionValue}\n isMultiple={isMultiple}\n selectedItems={selectedItems}\n selectedItem={selectedItem}\n handleMultipleSelections={handleMultipleSelections}\n handleSingleSelection={handleSingleSelection}\n primaryColor={primaryColor}\n />\n </CustomModal>\n </>\n );\n};\n\nexport default DropdownSelect;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["colors.ts"],"names":["colors","primary","black","white","dark","gray","lightGray"],"mappings":";;;;;;AAAO,MAAMA,MAAW,GAAG;AACzBC,EAAAA,OAAO,EAAE,SADgB;AAEzBC,EAAAA,
|
|
1
|
+
{"version":3,"sources":["colors.ts"],"names":["colors","primary","red","black","white","dark","gray","lightGray"],"mappings":";;;;;;AAAO,MAAMA,MAAW,GAAG;AACzBC,EAAAA,OAAO,EAAE,SADgB;AAEzBC,EAAAA,GAAG,EAAE,SAFoB;AAGzBC,EAAAA,KAAK,EAAE,SAHkB;AAIzBC,EAAAA,KAAK,EAAE,SAJkB;AAKzBC,EAAAA,IAAI,EAAE,SALmB;AAMzBC,EAAAA,IAAI,EAAE,SANmB;AAOzBC,EAAAA,SAAS,EAAE;AAPc,CAApB","sourcesContent":["export const colors: any = {\n primary: '#EF8031',\n red: '#FA4169',\n black: '#000000',\n white: '#FFFFFF',\n dark: '#11142D',\n gray: '#808191',\n lightGray: '#F7F7F7',\n};\n"]}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.inputStyles = void 0;
|
|
7
|
+
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
|
|
10
|
+
var _colors = require("./colors");
|
|
11
|
+
|
|
12
|
+
const inputStyles = _reactNative.StyleSheet.create({
|
|
13
|
+
input: {
|
|
14
|
+
paddingVertical: 18,
|
|
15
|
+
paddingHorizontal: 23,
|
|
16
|
+
backgroundColor: _colors.colors.lightGray,
|
|
17
|
+
borderRadius: 8,
|
|
18
|
+
borderColor: _colors.colors.dark,
|
|
19
|
+
borderWidth: 1,
|
|
20
|
+
color: _colors.colors.dark,
|
|
21
|
+
width: '100%',
|
|
22
|
+
minHeight: 64
|
|
23
|
+
},
|
|
24
|
+
inputFocusState: {
|
|
25
|
+
borderWidth: 2,
|
|
26
|
+
borderStyle: 'solid',
|
|
27
|
+
borderColor: _colors.colors.primary,
|
|
28
|
+
borderRadius: 8
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
exports.inputStyles = inputStyles;
|
|
33
|
+
//# sourceMappingURL=input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["input.ts"],"names":["inputStyles","StyleSheet","create","input","paddingVertical","paddingHorizontal","backgroundColor","colors","lightGray","borderRadius","borderColor","dark","borderWidth","color","width","minHeight","inputFocusState","borderStyle","primary"],"mappings":";;;;;;;AAAA;;AACA;;AAEO,MAAMA,WAAgB,GAAGC,wBAAWC,MAAX,CAAkB;AAChDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,eAAe,EAAE,EADZ;AAELC,IAAAA,iBAAiB,EAAE,EAFd;AAGLC,IAAAA,eAAe,EAAEC,eAAOC,SAHnB;AAILC,IAAAA,YAAY,EAAE,CAJT;AAKLC,IAAAA,WAAW,EAAEH,eAAOI,IALf;AAMLC,IAAAA,WAAW,EAAE,CANR;AAOLC,IAAAA,KAAK,EAAEN,eAAOI,IAPT;AAQLG,IAAAA,KAAK,EAAE,MARF;AASLC,IAAAA,SAAS,EAAE;AATN,GADyC;AAYhDC,EAAAA,eAAe,EAAE;AACfJ,IAAAA,WAAW,EAAE,CADE;AAEfK,IAAAA,WAAW,EAAE,OAFE;AAGfP,IAAAA,WAAW,EAAEH,eAAOW,OAHL;AAIfT,IAAAA,YAAY,EAAE;AAJC;AAZ+B,CAAlB,CAAzB","sourcesContent":["import { StyleSheet } from 'react-native';\nimport { colors } from './colors';\n\nexport const inputStyles: any = StyleSheet.create({\n input: {\n paddingVertical: 18,\n paddingHorizontal: 23,\n backgroundColor: colors.lightGray,\n borderRadius: 8,\n borderColor: colors.dark,\n borderWidth: 1,\n color: colors.dark,\n width: '100%',\n minHeight: 64,\n },\n inputFocusState: {\n borderWidth: 2,\n borderStyle: 'solid',\n borderColor: colors.primary,\n borderRadius: 8,\n },\n});\n"]}
|