react-native-input-select 0.19.0 → 0.21.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 +21 -9
- package/lib/commonjs/asset/check.png +0 -0
- package/lib/commonjs/components/CheckBox/index.js +66 -0
- package/lib/commonjs/components/CheckBox/index.js.map +1 -0
- package/lib/commonjs/components/CheckBox/types.js +6 -0
- package/lib/commonjs/components/CheckBox/types.js.map +1 -0
- package/lib/commonjs/{Modal.js → components/CustomModal/index.js} +2 -2
- package/lib/commonjs/{Modal.js.map → components/CustomModal/index.js.map} +1 -1
- package/lib/commonjs/{Dropdown.js → components/Dropdown/Dropdown.js} +2 -2
- package/lib/commonjs/{Dropdown.js.map → components/Dropdown/Dropdown.js.map} +1 -1
- package/lib/commonjs/{DropdownList.js → components/Dropdown/DropdownList.js} +13 -4
- package/lib/commonjs/components/Dropdown/DropdownList.js.map +1 -0
- package/lib/commonjs/{DropdownListItem.js → components/Dropdown/DropdownListItem.js} +13 -20
- package/lib/commonjs/components/Dropdown/DropdownListItem.js.map +1 -0
- package/lib/commonjs/{SelectedItemsView.js → components/Dropdown/SelectedItemsView.js} +3 -3
- package/lib/commonjs/{SelectedItemsView.js.map → components/Dropdown/SelectedItemsView.js.map} +1 -1
- package/lib/commonjs/{Input.js → components/Input/index.js} +2 -2
- package/lib/commonjs/{Input.js.map → components/Input/index.js.map} +1 -1
- package/lib/commonjs/constants/index.js +3 -1
- package/lib/commonjs/constants/index.js.map +1 -1
- package/lib/commonjs/index.js +16 -8
- package/lib/commonjs/index.js.map +1 -1
- package/lib/module/asset/check.png +0 -0
- package/lib/module/components/CheckBox/index.js +53 -0
- package/lib/module/components/CheckBox/index.js.map +1 -0
- package/lib/module/components/CheckBox/types.js +2 -0
- package/lib/module/components/CheckBox/types.js.map +1 -0
- package/lib/module/{Modal.js → components/CustomModal/index.js} +2 -2
- package/lib/module/{Modal.js.map → components/CustomModal/index.js.map} +1 -1
- package/lib/module/{Dropdown.js → components/Dropdown/Dropdown.js} +2 -2
- package/lib/module/{Dropdown.js.map → components/Dropdown/Dropdown.js.map} +1 -1
- package/lib/module/{DropdownList.js → components/Dropdown/DropdownList.js} +13 -4
- package/lib/module/components/Dropdown/DropdownList.js.map +1 -0
- package/lib/module/{DropdownListItem.js → components/Dropdown/DropdownListItem.js} +13 -20
- package/lib/module/components/Dropdown/DropdownListItem.js.map +1 -0
- package/lib/module/{SelectedItemsView.js → components/Dropdown/SelectedItemsView.js} +3 -3
- package/lib/module/{SelectedItemsView.js.map → components/Dropdown/SelectedItemsView.js.map} +1 -1
- package/lib/module/{Input.js → components/Input/index.js} +2 -2
- package/lib/module/{Input.js.map → components/Input/index.js.map} +1 -1
- package/lib/module/constants/index.js +1 -0
- package/lib/module/constants/index.js.map +1 -1
- package/lib/module/index.js +15 -7
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/components/CheckBox/index.d.ts +4 -0
- package/lib/typescript/components/CheckBox/types.d.ts +10 -0
- package/lib/typescript/{DropdownList.d.ts → components/Dropdown/DropdownList.d.ts} +1 -1
- package/lib/typescript/{DropdownListItem.d.ts → components/Dropdown/DropdownListItem.d.ts} +1 -1
- package/lib/typescript/constants/index.d.ts +1 -0
- package/lib/typescript/index.d.ts +1 -1
- package/lib/typescript/types/index.types.d.ts +16 -13
- package/package.json +1 -5
- package/src/asset/check.png +0 -0
- package/src/components/CheckBox/index.tsx +58 -0
- package/src/components/CheckBox/types.ts +11 -0
- package/src/{Modal.tsx → components/CustomModal/index.tsx} +1 -1
- package/src/{Dropdown.tsx → components/Dropdown/Dropdown.tsx} +2 -2
- package/src/{DropdownList.tsx → components/Dropdown/DropdownList.tsx} +10 -1
- package/src/components/Dropdown/DropdownListItem.tsx +50 -0
- package/src/{SelectedItemsView.tsx → components/Dropdown/SelectedItemsView.tsx} +3 -3
- package/src/{Input.tsx → components/Input/index.tsx} +1 -1
- package/src/constants/index.ts +1 -0
- package/src/index.tsx +38 -33
- package/src/types/index.types.ts +16 -13
- package/lib/commonjs/DropdownList.js.map +0 -1
- package/lib/commonjs/DropdownListItem.js.map +0 -1
- package/lib/module/DropdownList.js.map +0 -1
- package/lib/module/DropdownListItem.js.map +0 -1
- package/src/DropdownListItem.tsx +0 -52
- /package/lib/typescript/{Modal.d.ts → components/CustomModal/index.d.ts} +0 -0
- /package/lib/typescript/{Dropdown.d.ts → components/Dropdown/Dropdown.d.ts} +0 -0
- /package/lib/typescript/{SelectedItemsView.d.ts → components/Dropdown/SelectedItemsView.d.ts} +0 -0
- /package/lib/typescript/{Input.d.ts → components/Input/index.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -1,21 +1,29 @@
|
|
|
1
|
+
[](https://github.com/azeezat/react-native-select/actions/workflows/codeql.yml)
|
|
2
|
+
|
|
1
3
|
# react-native-input-select
|
|
2
4
|
|
|
3
|
-
A fully customizable dropdown selection package for react-native
|
|
5
|
+
|A fully customizable dropdown selection package for react-native android and iOS with multiple select and search capabilities.
|
|
4
6
|
|
|
5
7
|
## Installation
|
|
6
8
|
|
|
9
|
+
With npm
|
|
7
10
|
```sh
|
|
8
11
|
npm install react-native-input-select
|
|
12
|
+
```
|
|
13
|
+
With yarn
|
|
14
|
+
|
|
15
|
+
```sh
|
|
9
16
|
yarn add react-native-input-select
|
|
10
17
|
```
|
|
11
18
|
|
|
12
19
|
## Demo
|
|
13
20
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
21
|
+
https://user-images.githubusercontent.com/9849221/226240418-efa4fe9f-4055-4c03-888e-8b7093adcd63.mov
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
## Basic Usage
|
|
17
25
|
|
|
18
|
-
|
|
26
|
+
For more examples visit our (wiki page)[https://github.com/azeezat/react-native-select/wiki]
|
|
19
27
|
|
|
20
28
|
```js
|
|
21
29
|
import React from 'react';
|
|
@@ -65,18 +73,22 @@ export default function App() {
|
|
|
65
73
|
| isMultiple | `Boolean` | `true` |
|
|
66
74
|
| isSearchable | `Boolean` | `true` |
|
|
67
75
|
| disabled | `Boolean` | `true` |
|
|
68
|
-
| labelStyle | `Object` | `{
|
|
76
|
+
| labelStyle | `Object` | `{color: 'red', borderRadius: 0, ...}` |
|
|
69
77
|
| dropdownStyle | `Object` | `{borderColor: 'blue', margin: 5, borderWidth:0 ...}` |
|
|
70
78
|
| dropdownContainerStyle | `Object` | `{backgroundColor: 'red', width: '30%', ...}` |
|
|
71
79
|
| searchInputStyle | `Object` | `{backgroundColor: 'red', borderRadius: 0, ...}` |
|
|
72
80
|
| selectedItemStyle | `Object` | `{backgroundColor: 'red', color: 'yellow', ...}` |
|
|
73
81
|
| multipleSelectedItemStyle | `Object` | `{backgroundColor: 'red', color: 'yellow', ...}` |
|
|
74
|
-
| modalBackgroundStyle | `Object` | `{backgroundColor: '
|
|
82
|
+
| modalBackgroundStyle | `Object` | `{backgroundColor: 'rgba(196, 198, 246, 0.5)'}` |
|
|
75
83
|
| modalOptionsContainer | `Object` | `{padding: 5}` |
|
|
76
84
|
| dropdownErrorStyle | `Object` | `{borderWidth: 2, borderStyle: 'solid'}` |
|
|
77
|
-
| dropdownErrorTextStyle | `Object` | `{color: 'red', fontWeight:500}`
|
|
78
|
-
| dropdownHelperTextStyle | `Object` | `{color: 'green', fontWeight:500}`
|
|
85
|
+
| dropdownErrorTextStyle | `Object` | `{color: 'red', fontWeight:'500'}` |
|
|
86
|
+
| dropdownHelperTextStyle | `Object` | `{color: 'green', fontWeight:'500'}` |
|
|
79
87
|
| primaryColor | `string` | `blue` |
|
|
88
|
+
| checkboxSize | `number` | `5` |
|
|
89
|
+
| checkboxStyle | `Object` | `{backgroundColor: 'blue', ...}` |
|
|
90
|
+
| checkboxLabelStyle | `Object` | `{color: 'red', fontWeight:'500'` |
|
|
91
|
+
|
|
80
92
|
|
|
81
93
|
## Contributing
|
|
82
94
|
|
|
Binary file
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _reactNative = require("react-native");
|
|
11
|
+
|
|
12
|
+
var _constants = require("../../constants");
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
16
|
+
/* eslint-disable react-native/no-inline-styles */
|
|
17
|
+
const CheckBox = _ref => {
|
|
18
|
+
let {
|
|
19
|
+
label,
|
|
20
|
+
value,
|
|
21
|
+
primaryColor,
|
|
22
|
+
checkboxSize,
|
|
23
|
+
checkboxStyle,
|
|
24
|
+
checkboxLabelStyle,
|
|
25
|
+
onChange
|
|
26
|
+
} = _ref;
|
|
27
|
+
const fillColor = {
|
|
28
|
+
backgroundColor: value ? primaryColor || 'green' : 'white'
|
|
29
|
+
};
|
|
30
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
|
|
31
|
+
onPress: onChange ? () => onChange(!value) : () => {},
|
|
32
|
+
style: [styles.checkboxContainer]
|
|
33
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
34
|
+
style: [styles.checkbox, checkboxStyle, fillColor]
|
|
35
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
|
|
36
|
+
source: require('../../asset/check.png'),
|
|
37
|
+
style: [{
|
|
38
|
+
height: checkboxSize || _constants.CHECKBOX_SIZE,
|
|
39
|
+
width: checkboxSize || _constants.CHECKBOX_SIZE
|
|
40
|
+
}]
|
|
41
|
+
})), label && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
42
|
+
style: [checkboxLabelStyle, styles.labelStyle]
|
|
43
|
+
}, label));
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
const styles = _reactNative.StyleSheet.create({
|
|
47
|
+
checkboxContainer: {
|
|
48
|
+
flexDirection: 'row',
|
|
49
|
+
flexWrap: 'nowrap',
|
|
50
|
+
alignItems: 'center'
|
|
51
|
+
},
|
|
52
|
+
checkbox: {
|
|
53
|
+
padding: 4,
|
|
54
|
+
borderWidth: 1,
|
|
55
|
+
borderStyle: 'solid',
|
|
56
|
+
borderRadius: 4,
|
|
57
|
+
borderColor: 'black'
|
|
58
|
+
},
|
|
59
|
+
labelStyle: {
|
|
60
|
+
marginLeft: 10
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
var _default = CheckBox;
|
|
65
|
+
exports.default = _default;
|
|
66
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["index.tsx"],"names":["CheckBox","label","value","primaryColor","checkboxSize","checkboxStyle","checkboxLabelStyle","onChange","fillColor","backgroundColor","styles","checkboxContainer","checkbox","require","height","CHECKBOX_SIZE","width","labelStyle","StyleSheet","create","flexDirection","flexWrap","alignItems","padding","borderWidth","borderStyle","borderRadius","borderColor","marginLeft"],"mappings":";;;;;;;AACA;;AACA;;AACA;;;;AAHA;AAMA,MAAMA,QAAQ,GAAG,QAQI;AAAA,MARH;AAChBC,IAAAA,KADgB;AAEhBC,IAAAA,KAFgB;AAGhBC,IAAAA,YAHgB;AAIhBC,IAAAA,YAJgB;AAKhBC,IAAAA,aALgB;AAMhBC,IAAAA,kBANgB;AAOhBC,IAAAA;AAPgB,GAQG;AACnB,QAAMC,SAAS,GAAG;AAChBC,IAAAA,eAAe,EAAEP,KAAK,GAAGC,YAAY,IAAI,OAAnB,GAA6B;AADnC,GAAlB;AAGA,sBACE,6BAAC,sBAAD;AACE,IAAA,OAAO,EAAEI,QAAQ,GAAG,MAAMA,QAAQ,CAAC,CAACL,KAAF,CAAjB,GAA4B,MAAM,CAAE,CADvD;AAEE,IAAA,KAAK,EAAE,CAACQ,MAAM,CAACC,iBAAR;AAFT,kBAIE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACD,MAAM,CAACE,QAAR,EAAkBP,aAAlB,EAAiCG,SAAjC;AAAb,kBACE,6BAAC,kBAAD;AACE,IAAA,MAAM,EAAEK,OAAO,CAAC,uBAAD,CADjB;AAEE,IAAA,KAAK,EAAE,CACL;AACEC,MAAAA,MAAM,EAAEV,YAAY,IAAIW,wBAD1B;AAEEC,MAAAA,KAAK,EAAEZ,YAAY,IAAIW;AAFzB,KADK;AAFT,IADF,CAJF,EAeGd,KAAK,iBACJ,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACK,kBAAD,EAAqBI,MAAM,CAACO,UAA5B;AAAb,KAAuDhB,KAAvD,CAhBJ,CADF;AAqBD,CAjCD;;AAmCA,MAAMS,MAAM,GAAGQ,wBAAWC,MAAX,CAAkB;AAC/BR,EAAAA,iBAAiB,EAAE;AACjBS,IAAAA,aAAa,EAAE,KADE;AAEjBC,IAAAA,QAAQ,EAAE,QAFO;AAGjBC,IAAAA,UAAU,EAAE;AAHK,GADY;AAM/BV,EAAAA,QAAQ,EAAE;AACRW,IAAAA,OAAO,EAAE,CADD;AAERC,IAAAA,WAAW,EAAE,CAFL;AAGRC,IAAAA,WAAW,EAAE,OAHL;AAIRC,IAAAA,YAAY,EAAE,CAJN;AAKRC,IAAAA,WAAW,EAAE;AALL,GANqB;AAa/BV,EAAAA,UAAU,EAAE;AAAEW,IAAAA,UAAU,EAAE;AAAd;AAbmB,CAAlB,CAAf;;eAgBe5B,Q","sourcesContent":["/* eslint-disable react-native/no-inline-styles */\nimport React from 'react';\nimport { Pressable, Text, StyleSheet, Image, View } from 'react-native';\nimport { CHECKBOX_SIZE } from '../../constants';\nimport type { CheckboxProps } from './types';\n\nconst CheckBox = ({\n label,\n value,\n primaryColor,\n checkboxSize,\n checkboxStyle,\n checkboxLabelStyle,\n onChange,\n}: CheckboxProps) => {\n const fillColor = {\n backgroundColor: value ? primaryColor || 'green' : 'white',\n };\n return (\n <Pressable\n onPress={onChange ? () => onChange(!value) : () => {}}\n style={[styles.checkboxContainer]}\n >\n <View style={[styles.checkbox, checkboxStyle, fillColor]}>\n <Image\n source={require('../../asset/check.png')}\n style={[\n {\n height: checkboxSize || CHECKBOX_SIZE,\n width: checkboxSize || CHECKBOX_SIZE,\n },\n ]}\n />\n </View>\n {label && (\n <Text style={[checkboxLabelStyle, styles.labelStyle]}>{label}</Text>\n )}\n </Pressable>\n );\n};\n\nconst styles = StyleSheet.create({\n checkboxContainer: {\n flexDirection: 'row',\n flexWrap: 'nowrap',\n alignItems: 'center',\n },\n checkbox: {\n padding: 4,\n borderWidth: 1,\n borderStyle: 'solid',\n borderRadius: 4,\n borderColor: 'black',\n },\n labelStyle: { marginLeft: 10 },\n});\n\nexport default CheckBox;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
|
|
@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
-
var _colors = require("
|
|
12
|
+
var _colors = require("../../styles/colors");
|
|
13
13
|
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
15
|
|
|
@@ -53,4 +53,4 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
53
53
|
|
|
54
54
|
var _default = CustomModal;
|
|
55
55
|
exports.default = _default;
|
|
56
|
-
//# sourceMappingURL=
|
|
56
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["index.tsx"],"names":["CustomModal","open","handleToggleModal","onRequestClose","modalBackgroundStyle","modalOptionsContainerStyle","children","styles","modalContainer","modalOptionsContainer","StyleSheet","create","flex","justifyContent","backgroundColor","maxHeight","colors","white","borderTopLeftRadius","borderTopRightRadius"],"mappings":";;;;;;;AAAA;;AACA;;AAMA;;;;AAEA,MAAMA,WAAW,GAAG,QAOT;AAAA,MAPU;AACnBC,IAAAA,IADmB;AAEnBC,IAAAA,iBAFmB;AAGnBC,IAAAA,cAHmB;AAInBC,IAAAA,oBAJmB;AAKnBC,IAAAA,0BALmB;AAMnBC,IAAAA;AANmB,GAOV;AACT,sBACE,6BAAC,kBAAD;AACE,IAAA,WAAW,EAAE,IADf;AAEE,IAAA,OAAO,EAAEL,IAFX;AAGE,IAAA,cAAc,EAAE,MAAME,cAAc,EAHtC;AAIE,IAAA,aAAa,EAAC;AAJhB,kBAME,6BAAC,6BAAD;AACE,IAAA,OAAO,EAAE,MAAMD,iBAAiB,EADlC;AAEE,IAAA,KAAK,EAAE,CACLK,MAAM,CAACC,cADF,EAELD,MAAM,CAACH,oBAFF,EAGLA,oBAHK;AAFT,kBAQE,6BAAC,yBAAD;AACE,IAAA,KAAK,EAAE,CAACG,MAAM,CAACE,qBAAR,EAA+BJ,0BAA/B;AADT,KAGGC,QAHH,CARF,CANF,CADF;AAuBD,CA/BD;;AAiCA,MAAMC,MAAM,GAAGG,wBAAWC,MAAX,CAAkB;AAC/BH,EAAAA,cAAc,EAAE;AACdI,IAAAA,IAAI,EAAE,CADQ;AAEdC,IAAAA,cAAc,EAAE;AAFF,GADe;AAK/BT,EAAAA,oBAAoB,EAAE;AAAEU,IAAAA,eAAe,EAAE;AAAnB,GALS;AAM/BL,EAAAA,qBAAqB,EAAE;AACrBM,IAAAA,SAAS,EAAE,KADU;AAErBD,IAAAA,eAAe,EAAEE,eAAOC,KAFH;AAGrBC,IAAAA,mBAAmB,EAAE,EAHA;AAIrBC,IAAAA,oBAAoB,EAAE;AAJD;AANQ,CAAlB,CAAf;;eAcenB,W","sourcesContent":["import React from 'react';\nimport {\n Modal,\n TouchableOpacity,\n SafeAreaView,\n StyleSheet,\n} from 'react-native';\nimport { colors } from '../../styles/colors';\n\nconst CustomModal = ({\n open,\n handleToggleModal,\n onRequestClose,\n modalBackgroundStyle,\n modalOptionsContainerStyle,\n children,\n}: any) => {\n return (\n <Modal\n transparent={true}\n visible={open}\n onRequestClose={() => onRequestClose()}\n animationType=\"fade\"\n >\n <TouchableOpacity\n onPress={() => handleToggleModal()}\n style={[\n styles.modalContainer,\n styles.modalBackgroundStyle,\n modalBackgroundStyle,\n ]}\n >\n <SafeAreaView\n style={[styles.modalOptionsContainer, modalOptionsContainerStyle]}\n >\n {children}\n </SafeAreaView>\n </TouchableOpacity>\n </Modal>\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});\n\nexport default CustomModal;\n"]}
|
|
@@ -11,9 +11,9 @@ var _reactNative = require("react-native");
|
|
|
11
11
|
|
|
12
12
|
var _SelectedItemsView = _interopRequireDefault(require("./SelectedItemsView"));
|
|
13
13
|
|
|
14
|
-
var _colors = require("
|
|
14
|
+
var _colors = require("../../styles/colors");
|
|
15
15
|
|
|
16
|
-
var _typography = require("
|
|
16
|
+
var _typography = require("../../styles/typography");
|
|
17
17
|
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
19
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Dropdown.tsx"],"names":["Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","multipleSelectedItemStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","primaryColor","disabled","styles","dropdownInputContainer","helper","StyleSheet","create","marginBottom","color","colors","gray","typography","caption","inputFocusErrorState","borderWidth","borderStyle","borderColor","red","marginTop","primary","width","blackText","black"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport SelectedItemsView from './SelectedItemsView';\nimport { colors } from '
|
|
1
|
+
{"version":3,"sources":["Dropdown.tsx"],"names":["Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","multipleSelectedItemStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","primaryColor","disabled","styles","dropdownInputContainer","helper","StyleSheet","create","marginBottom","color","colors","gray","typography","caption","inputFocusErrorState","borderWidth","borderStyle","borderColor","red","marginTop","primary","width","blackText","black"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport SelectedItemsView from './SelectedItemsView';\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 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 <SelectedItemsView\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 />\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 inputFocusErrorState: {\n borderWidth: 2,\n borderStyle: 'solid',\n borderColor: colors.red,\n },\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"]}
|
|
@@ -11,7 +11,7 @@ var _reactNative = require("react-native");
|
|
|
11
11
|
|
|
12
12
|
var _DropdownListItem = _interopRequireDefault(require("./DropdownListItem"));
|
|
13
13
|
|
|
14
|
-
var _colors = require("
|
|
14
|
+
var _colors = require("../../styles/colors");
|
|
15
15
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
@@ -25,7 +25,10 @@ const DropdownList = _ref => {
|
|
|
25
25
|
selectedItem,
|
|
26
26
|
handleMultipleSelections,
|
|
27
27
|
handleSingleSelection,
|
|
28
|
-
primaryColor
|
|
28
|
+
primaryColor,
|
|
29
|
+
checkboxSize,
|
|
30
|
+
checkboxStyle,
|
|
31
|
+
checkboxLabelStyle
|
|
29
32
|
} = _ref;
|
|
30
33
|
return /*#__PURE__*/_react.default.createElement(_reactNative.FlatList, {
|
|
31
34
|
data: options,
|
|
@@ -43,7 +46,10 @@ const DropdownList = _ref => {
|
|
|
43
46
|
isMultiple,
|
|
44
47
|
selectedOption: isMultiple ? selectedItems : selectedItem,
|
|
45
48
|
onChange: isMultiple ? handleMultipleSelections : handleSingleSelection,
|
|
46
|
-
primaryColor
|
|
49
|
+
primaryColor,
|
|
50
|
+
checkboxSize,
|
|
51
|
+
checkboxStyle,
|
|
52
|
+
checkboxLabelStyle
|
|
47
53
|
}),
|
|
48
54
|
keyExtractor: (_item, index) => `Options${index}`
|
|
49
55
|
});
|
|
@@ -60,7 +66,10 @@ const _renderItem = (_ref2, props) => {
|
|
|
60
66
|
isMultiple: props.isMultiple,
|
|
61
67
|
selectedOption: props.selectedOption,
|
|
62
68
|
onChange: props.onChange,
|
|
63
|
-
primaryColor: props.primaryColor
|
|
69
|
+
primaryColor: props.primaryColor,
|
|
70
|
+
checkboxSize: props.checkboxSize,
|
|
71
|
+
checkboxStyle: props.checkboxStyle,
|
|
72
|
+
checkboxLabelStyle: props.checkboxLabelStyle
|
|
64
73
|
});
|
|
65
74
|
};
|
|
66
75
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["DropdownList.tsx"],"names":["DropdownList","options","optionLabel","optionValue","isMultiple","selectedItems","selectedItem","handleMultipleSelections","handleSingleSelection","primaryColor","checkboxSize","checkboxStyle","checkboxLabelStyle","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":"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","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 checkboxSize,\n checkboxStyle,\n checkboxLabelStyle,\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 checkboxSize,\n checkboxStyle,\n checkboxLabelStyle,\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 checkboxSize={props.checkboxSize}\n checkboxStyle={props.checkboxStyle}\n checkboxLabelStyle={props.checkboxLabelStyle}\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"]}
|
|
@@ -9,9 +9,9 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _CheckBox = _interopRequireDefault(require("../CheckBox"));
|
|
13
13
|
|
|
14
|
-
var _colors = require("
|
|
14
|
+
var _colors = require("../../styles/colors");
|
|
15
15
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
@@ -27,34 +27,27 @@ const DropdownListItem = _ref => {
|
|
|
27
27
|
isMultiple,
|
|
28
28
|
selectedOption,
|
|
29
29
|
onChange,
|
|
30
|
-
primaryColor
|
|
30
|
+
primaryColor,
|
|
31
|
+
checkboxSize,
|
|
32
|
+
checkboxStyle,
|
|
33
|
+
checkboxLabelStyle
|
|
31
34
|
} = _ref;
|
|
32
35
|
const selectedOptionValue = optionValue !== null && optionValue !== void 0 ? optionValue : 'value';
|
|
33
36
|
return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
|
|
34
37
|
style: styles.modalOptions,
|
|
35
38
|
onPress: () => onChange(item[selectedOptionValue])
|
|
36
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
37
|
-
style: styles.spacing
|
|
38
|
-
}, /*#__PURE__*/_react.default.createElement(_checkbox.default, {
|
|
39
|
+
}, /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
|
|
39
40
|
value: isMultiple ? selectedOption.includes(item[selectedOptionValue]) : [selectedOption].includes(item[selectedOptionValue]),
|
|
41
|
+
label: item[optionLabel !== null && optionLabel !== void 0 ? optionLabel : ''],
|
|
40
42
|
onChange: () => onChange(item[selectedOptionValue]),
|
|
41
|
-
|
|
42
|
-
,
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
,
|
|
47
|
-
onCheckColor: primaryColor || _colors.colors.primary //ios checkmark colour control
|
|
48
|
-
,
|
|
49
|
-
onTintColor: primaryColor || _colors.colors.primary //ios box colour control
|
|
50
|
-
|
|
51
|
-
})), /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.Text, null, item[optionLabel !== null && optionLabel !== void 0 ? optionLabel : 'label'])));
|
|
43
|
+
primaryColor: primaryColor || _colors.colors.primary,
|
|
44
|
+
checkboxSize: checkboxSize,
|
|
45
|
+
checkboxStyle: checkboxStyle,
|
|
46
|
+
checkboxLabelStyle: checkboxLabelStyle
|
|
47
|
+
}));
|
|
52
48
|
};
|
|
53
49
|
|
|
54
50
|
const styles = _reactNative.StyleSheet.create({
|
|
55
|
-
spacing: {
|
|
56
|
-
marginRight: 10
|
|
57
|
-
},
|
|
58
51
|
modalOptions: {
|
|
59
52
|
paddingHorizontal: 20,
|
|
60
53
|
paddingVertical: 10,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["DropdownListItem.tsx"],"names":["DropdownListItem","item","optionLabel","optionValue","isMultiple","selectedOption","onChange","primaryColor","checkboxSize","checkboxStyle","checkboxLabelStyle","selectedOptionValue","styles","modalOptions","includes","colors","primary","StyleSheet","create","paddingHorizontal","paddingVertical","flexDirection","alignItems"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,gBAAgB,GAAG,QAWd;AAAA,MAXe;AACxBC,IAAAA,IADwB;AAExBC,IAAAA,WAFwB;AAGxBC,IAAAA,WAHwB;AAIxBC,IAAAA,UAJwB;AAKxBC,IAAAA,cALwB;AAMxBC,IAAAA,QANwB;AAOxBC,IAAAA,YAPwB;AAQxBC,IAAAA,YARwB;AASxBC,IAAAA,aATwB;AAUxBC,IAAAA;AAVwB,GAWf;AACT,QAAMC,mBAAmB,GAAGR,WAAH,aAAGA,WAAH,cAAGA,WAAH,GAAkB,OAA3C;AACA,sBACE,6BAAC,6BAAD;AACE,IAAA,KAAK,EAAES,MAAM,CAACC,YADhB;AAEE,IAAA,OAAO,EAAE,MAAMP,QAAQ,CAACL,IAAI,CAACU,mBAAD,CAAL;AAFzB,kBAIE,6BAAC,iBAAD;AACE,IAAA,KAAK,EACHP,UAAU,GACNC,cAAc,CAACS,QAAf,CAAwBb,IAAI,CAACU,mBAAD,CAA5B,CADM,GAEN,CAACN,cAAD,EAAiBS,QAAjB,CAA0Bb,IAAI,CAACU,mBAAD,CAA9B,CAJR;AAME,IAAA,KAAK,EAAEV,IAAI,CAACC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgB,EAAhB,CANb;AAOE,IAAA,QAAQ,EAAE,MAAMI,QAAQ,CAACL,IAAI,CAACU,mBAAD,CAAL,CAP1B;AAQE,IAAA,YAAY,EAAEJ,YAAY,IAAIQ,eAAOC,OARvC;AASE,IAAA,YAAY,EAAER,YAThB;AAUE,IAAA,aAAa,EAAEC,aAVjB;AAWE,IAAA,kBAAkB,EAAEC;AAXtB,IAJF,CADF;AAoBD,CAjCD;;AAmCA,MAAME,MAAM,GAAGK,wBAAWC,MAAX,CAAkB;AAC/BL,EAAAA,YAAY,EAAE;AACZM,IAAAA,iBAAiB,EAAE,EADP;AAEZC,IAAAA,eAAe,EAAE,EAFL;AAGZC,IAAAA,aAAa,EAAE,KAHH;AAIZC,IAAAA,UAAU,EAAE;AAJA;AADiB,CAAlB,CAAf;;4BASe,iBAAKtB,gBAAL,C","sourcesContent":["import React, { memo } from 'react';\nimport { TouchableOpacity, StyleSheet } from 'react-native';\nimport CheckBox from '../CheckBox';\nimport { colors } from '../../styles/colors';\n\nconst DropdownListItem = ({\n item,\n optionLabel,\n optionValue,\n isMultiple,\n selectedOption,\n onChange,\n primaryColor,\n checkboxSize,\n checkboxStyle,\n checkboxLabelStyle,\n}: any) => {\n const selectedOptionValue = optionValue ?? 'value';\n return (\n <TouchableOpacity\n style={styles.modalOptions}\n onPress={() => onChange(item[selectedOptionValue])}\n >\n <CheckBox\n value={\n isMultiple\n ? selectedOption.includes(item[selectedOptionValue])\n : [selectedOption].includes(item[selectedOptionValue])\n }\n label={item[optionLabel ?? '']}\n onChange={() => onChange(item[selectedOptionValue])}\n primaryColor={primaryColor || colors.primary}\n checkboxSize={checkboxSize}\n checkboxStyle={checkboxStyle}\n checkboxLabelStyle={checkboxLabelStyle}\n />\n </TouchableOpacity>\n );\n};\n\nconst styles = StyleSheet.create({\n modalOptions: {\n paddingHorizontal: 20,\n paddingVertical: 10,\n flexDirection: 'row',\n alignItems: 'center',\n },\n});\n\nexport default memo(DropdownListItem);\n"]}
|
|
@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
-
var _colors = require("
|
|
12
|
+
var _colors = require("../../styles/colors");
|
|
13
13
|
|
|
14
|
-
var _input = require("
|
|
14
|
+
var _input = require("../../styles/input");
|
|
15
15
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
@@ -70,7 +70,7 @@ const SelectedItemsView = _ref => {
|
|
|
70
70
|
}, placeholder !== null && placeholder !== void 0 ? placeholder : 'Select an option')), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
71
71
|
style: styles.iconStyle
|
|
72
72
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
|
|
73
|
-
source: require('
|
|
73
|
+
source: require('../../asset/arrow-down.png')
|
|
74
74
|
})));
|
|
75
75
|
};
|
|
76
76
|
|
package/lib/commonjs/{SelectedItemsView.js.map → components/Dropdown/SelectedItemsView.js.map}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SelectedItemsView.tsx"],"names":["SelectedItemsView","placeholder","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","dropdownStyle","selectedItemStyle","multipleSelectedItemStyle","dropdownErrorStyle","primaryColor","disabled","pressed","inputStyles","inputFocusState","borderColor","input","inputFocusErrorState","styles","selectedItemsContainer","map","item","i","Math","random","backgroundColor","blackText","length","iconStyle","require","StyleSheet","create","position","right","top","flexDirection","flexWrap","color","colors","white","paddingHorizontal","paddingVertical","borderRadius","primary","marginRight","black"],"mappings":";;;;;;;AAAA;;AACA;;AASA;;AACA;;;;AAEA,MAAMA,iBAAiB,GAAG,QAcf;AAAA,MAdgB;AACzBC,IAAAA,WADyB;AAEzBC,IAAAA,KAFyB;AAGzBC,IAAAA,qBAHyB;AAIzBC,IAAAA,iBAJyB;AAKzBC,IAAAA,UALyB;AAMzBC,IAAAA,YANyB;AAOzBC,IAAAA,aAPyB;AAQzBC,IAAAA,aARyB;AASzBC,IAAAA,iBATyB;AAUzBC,IAAAA,yBAVyB;AAWzBC,IAAAA,kBAXyB;AAYzBC,IAAAA,YAZyB;AAazBC,IAAAA;AAbyB,GAchB;AACT,sBACE,6BAAC,sBAAD;AACE,IAAA,OAAO,EAAE,MAAMT,iBAAiB,EADlC;AAEE,IAAA,KAAK,EAAE;AAAA,UAAC;AAAEU,QAAAA;AAAF,OAAD;AAAA,aAAiB,CACtBA,OAAO,IAAI,EACT,GAAGC,mBAAYC,eADN;AAETC,QAAAA,WAAW,EAAEL;AAFJ,OADW,EAKtBG,mBAAYG,KALU,EAMtBV,aANsB,EAOtBN,KAAK,IAAI;AACPA,MAAAA,KAAK,KAAK,EADZ,IAEE,CAACY,OAFH,IAEc,EACV,GAAGC,mBAAYI,oBADL;AAEV,WAAGR;AAFO,OATQ,CAAjB;AAAA,KAFT;AAgBE,IAAA,QAAQ,EAAEE;AAhBZ,kBAkBE,6BAAC,uBAAD;AACE,IAAA,UAAU,MADZ;AAEE,IAAA,sBAAsB,MAFxB;AAGE,IAAA,8BAA8B,EAAE;AAHlC,kBAKE,6BAAC,iBAAD;AACE,IAAA,KAAK,EAAEO,MAAM,CAACC,sBADhB;AAEE,IAAA,yBAAyB,EAAE,MAAM;AAFnC,KAIGhB,UAAU,GACTF,qBAAqB,GAAGmB,GAAxB,CAA4B,CAACC,IAAD,EAAYC,CAAZ,kBAC1B,6BAAC,6BAAD;AACE,IAAA,OAAO,EAAE,MAAMpB,iBAAiB,EADlC;AAEE,IAAA,GAAG,EAAG,6BAA4BqB,IAAI,CAACC,MAAL,EAAc,IAAGF,CAAE,EAFvD;AAGE,IAAA,QAAQ,EAAEX;AAHZ,kBAKE,6BAAC,iBAAD;AACE,IAAA,KAAK,EAAE,CACLO,MAAM,CAACb,aADF,EAEL;AAAEoB,MAAAA,eAAe,EAAEf;AAAnB,KAFK,EAGLF,yBAHK;AADT,KAOGa,IAPH,CALF,CADF,CADS,gBAmBT,6BAAC,6BAAD;AACE,IAAA,OAAO,EAAE,MAAMnB,iBAAiB,EADlC;AAEE,IAAA,QAAQ,EAAES;AAFZ,kBAIE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACO,MAAM,CAACQ,SAAR,EAAmBnB,iBAAnB;AAAb,KACGN,qBAAqB,EADxB,CAJF,CAvBJ,CALF,EAuCG,CAACG,YAAD,IAAiB,CAAAC,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAEsB,MAAf,MAA0B,CAA3C,iBACC,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAET,MAAM,CAACQ;AAApB,KACG3B,WADH,aACGA,WADH,cACGA,WADH,GACkB,kBADlB,CAxCJ,CAlBF,eA+DE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAEmB,MAAM,CAACU;AAApB,kBACE,6BAAC,kBAAD;AAAO,IAAA,MAAM,EAAEC,OAAO,CAAC,
|
|
1
|
+
{"version":3,"sources":["SelectedItemsView.tsx"],"names":["SelectedItemsView","placeholder","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","dropdownStyle","selectedItemStyle","multipleSelectedItemStyle","dropdownErrorStyle","primaryColor","disabled","pressed","inputStyles","inputFocusState","borderColor","input","inputFocusErrorState","styles","selectedItemsContainer","map","item","i","Math","random","backgroundColor","blackText","length","iconStyle","require","StyleSheet","create","position","right","top","flexDirection","flexWrap","color","colors","white","paddingHorizontal","paddingVertical","borderRadius","primary","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 TouchableOpacity,\n} from 'react-native';\nimport { colors } from '../../styles/colors';\nimport { inputStyles } from '../../styles/input';\n\nconst SelectedItemsView = ({\n placeholder,\n error,\n getSelectedItemsLabel,\n handleToggleModal,\n isMultiple,\n selectedItem,\n selectedItems,\n dropdownStyle,\n selectedItemStyle,\n multipleSelectedItemStyle,\n dropdownErrorStyle,\n primaryColor,\n disabled,\n}: any) => {\n return (\n <Pressable\n onPress={() => handleToggleModal()}\n style={({ pressed }) => [\n pressed && {\n ...inputStyles.inputFocusState,\n borderColor: primaryColor,\n },\n inputStyles.input,\n dropdownStyle,\n error && //this must be last\n error !== '' &&\n !pressed && {\n ...inputStyles.inputFocusErrorState,\n ...dropdownErrorStyle,\n },\n ]}\n disabled={disabled}\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 <TouchableOpacity\n onPress={() => handleToggleModal()}\n key={`react-native-input-select-${Math.random()}-${i}`}\n disabled={disabled}\n >\n <Text\n style={[\n styles.selectedItems,\n { backgroundColor: primaryColor },\n multipleSelectedItemStyle,\n ]}\n >\n {item}\n </Text>\n </TouchableOpacity>\n ))\n ) : (\n <TouchableOpacity\n onPress={() => handleToggleModal()}\n disabled={disabled}\n >\n <Text style={[styles.blackText, selectedItemStyle]}>\n {getSelectedItemsLabel()}\n </Text>\n </TouchableOpacity>\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('../../asset/arrow-down.png')} />\n </View>\n </Pressable>\n );\n};\n\nconst styles = StyleSheet.create({\n iconStyle: { position: 'absolute', right: 25, top: 25 },\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 SelectedItemsView;\n"]}
|
|
@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
|
|
10
10
|
var _reactNative = require("react-native");
|
|
11
11
|
|
|
12
|
-
var _input = require("
|
|
12
|
+
var _input = require("../../styles/input");
|
|
13
13
|
|
|
14
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
15
|
|
|
@@ -50,4 +50,4 @@ const styles = _reactNative.StyleSheet.create({
|
|
|
50
50
|
margin: 23
|
|
51
51
|
}
|
|
52
52
|
});
|
|
53
|
-
//# sourceMappingURL=
|
|
53
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["index.tsx"],"names":["Input","placeholder","value","onChangeText","style","primaryColor","rest","isFocused","setFocus","styles","container","inputStyles","input","inputFocusState","borderColor","StyleSheet","create","margin"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAEO,MAAMA,KAAK,GAAG,QAOV;AAAA,MAPW;AACpBC,IAAAA,WADoB;AAEpBC,IAAAA,KAFoB;AAGpBC,IAAAA,YAHoB;AAIpBC,IAAAA,KAJoB;AAKpBC,IAAAA,YALoB;AAMpB,OAAGC;AANiB,GAOX;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,EAAET,WADf;AAEE,IAAA,KAAK,EAAE,CACLU,mBAAYC,KADP,EAELL,SAAS,IACPI,mBAAYE,eADd,IACiC;AAAEC,MAAAA,WAAW,EAAET;AAAf,KAH5B,EAILD,KAJK,CAFT;AAQE,IAAA,OAAO,EAAE,MAAM;AACbI,MAAAA,QAAQ,CAAC,IAAD,CAAR;AACD,KAVH;AAWE,IAAA,MAAM,EAAE,MAAMA,QAAQ,CAAC,KAAD,CAXxB;AAYE,IAAA,KAAK,EAAEN,KAZT;AAaE,IAAA,YAAY,EAAEC;AAbhB,KAcMG,IAdN,EADF,CADF;AAoBD,CA9BM;;;;AAgCP,MAAMG,MAAM,GAAGM,wBAAWC,MAAX,CAAkB;AAC/BN,EAAAA,SAAS,EAAE;AAAEO,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 primaryColor,\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 &&\n inputStyles.inputFocusState && { borderColor: primaryColor },\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"]}
|
|
@@ -3,9 +3,11 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.DEFAULT_OPTION_VALUE = exports.DEFAULT_OPTION_LABEL = void 0;
|
|
6
|
+
exports.DEFAULT_OPTION_VALUE = exports.DEFAULT_OPTION_LABEL = exports.CHECKBOX_SIZE = void 0;
|
|
7
7
|
const DEFAULT_OPTION_LABEL = 'label';
|
|
8
8
|
exports.DEFAULT_OPTION_LABEL = DEFAULT_OPTION_LABEL;
|
|
9
9
|
const DEFAULT_OPTION_VALUE = 'value';
|
|
10
10
|
exports.DEFAULT_OPTION_VALUE = DEFAULT_OPTION_VALUE;
|
|
11
|
+
const CHECKBOX_SIZE = 14;
|
|
12
|
+
exports.CHECKBOX_SIZE = CHECKBOX_SIZE;
|
|
11
13
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +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"]}
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":["DEFAULT_OPTION_LABEL","DEFAULT_OPTION_VALUE","CHECKBOX_SIZE"],"mappings":";;;;;;AAAO,MAAMA,oBAAoB,GAAG,OAA7B;;AACA,MAAMC,oBAAoB,GAAG,OAA7B;;AACA,MAAMC,aAAa,GAAG,EAAtB","sourcesContent":["export const DEFAULT_OPTION_LABEL = 'label';\nexport const DEFAULT_OPTION_VALUE = 'value';\nexport const CHECKBOX_SIZE = 14;\n"]}
|
package/lib/commonjs/index.js
CHANGED
|
@@ -7,15 +7,15 @@ exports.default = exports.DropdownSelect = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
|
|
10
|
-
var _Dropdown = _interopRequireDefault(require("./Dropdown"));
|
|
10
|
+
var _Dropdown = _interopRequireDefault(require("./components/Dropdown/Dropdown"));
|
|
11
11
|
|
|
12
|
-
var
|
|
12
|
+
var _DropdownList = _interopRequireDefault(require("./components/Dropdown/DropdownList"));
|
|
13
13
|
|
|
14
|
-
var
|
|
14
|
+
var _CustomModal = _interopRequireDefault(require("./components/CustomModal"));
|
|
15
15
|
|
|
16
16
|
var _constants = require("./constants");
|
|
17
17
|
|
|
18
|
-
var _Input = require("./Input");
|
|
18
|
+
var _Input = require("./components/Input");
|
|
19
19
|
|
|
20
20
|
var _colors = require("./styles/colors");
|
|
21
21
|
|
|
@@ -27,7 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
27
27
|
|
|
28
28
|
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); }
|
|
29
29
|
|
|
30
|
-
const DropdownSelect =
|
|
30
|
+
const DropdownSelect = _ref => {
|
|
31
31
|
let {
|
|
32
32
|
placeholder,
|
|
33
33
|
label,
|
|
@@ -52,7 +52,11 @@ const DropdownSelect = (_ref, rest) => {
|
|
|
52
52
|
modalOptionsContainer,
|
|
53
53
|
searchInputStyle,
|
|
54
54
|
primaryColor,
|
|
55
|
-
disabled
|
|
55
|
+
disabled,
|
|
56
|
+
checkboxSize,
|
|
57
|
+
checkboxStyle,
|
|
58
|
+
checkboxLabelStyle,
|
|
59
|
+
...rest
|
|
56
60
|
} = _ref;
|
|
57
61
|
const [newOptions, setNewOptions] = (0, _react.useState)(options ? options : []);
|
|
58
62
|
const [open, setOpen] = (0, _react.useState)(false);
|
|
@@ -86,6 +90,7 @@ const DropdownSelect = (_ref, rest) => {
|
|
|
86
90
|
}
|
|
87
91
|
|
|
88
92
|
setSelectedItems(selectedValues);
|
|
93
|
+
onValueChange(selectedValues); //send value to parent
|
|
89
94
|
};
|
|
90
95
|
/*===========================================
|
|
91
96
|
* Get label handler
|
|
@@ -155,7 +160,7 @@ const DropdownSelect = (_ref, rest) => {
|
|
|
155
160
|
isMultiple: isMultiple,
|
|
156
161
|
primaryColor: primary,
|
|
157
162
|
disabled: disabled
|
|
158
|
-
}, rest)), /*#__PURE__*/_react.default.createElement(
|
|
163
|
+
}, rest)), /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
|
|
159
164
|
open: open,
|
|
160
165
|
handleToggleModal: handleToggleModal,
|
|
161
166
|
modalBackgroundStyle: modalBackgroundStyle,
|
|
@@ -175,7 +180,10 @@ const DropdownSelect = (_ref, rest) => {
|
|
|
175
180
|
selectedItem: selectedItem,
|
|
176
181
|
handleMultipleSelections: handleMultipleSelections,
|
|
177
182
|
handleSingleSelection: handleSingleSelection,
|
|
178
|
-
primaryColor: primary
|
|
183
|
+
primaryColor: primary,
|
|
184
|
+
checkboxSize: checkboxSize,
|
|
185
|
+
checkboxStyle: checkboxStyle,
|
|
186
|
+
checkboxLabelStyle: checkboxLabelStyle
|
|
179
187
|
})));
|
|
180
188
|
};
|
|
181
189
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.tsx"],"names":["DropdownSelect","rest","placeholder","label","error","helperText","options","optionLabel","optionValue","onValueChange","selectedValue","isMultiple","isSearchable","labelStyle","dropdownStyle","dropdownContainerStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","selectedItemStyle","multipleSelectedItemStyle","modalBackgroundStyle","modalOptionsContainer","searchInputStyle","primaryColor","disabled","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","searchText","toString","toLocaleLowerCase","trim","regexFilter","RegExp","searchResults","toLowerCase","search","handleToggleModal","primary","colors","gray","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 type { DropdownProps } from './types/index.types';\nimport { Input } from './Input';\nimport { colors } from './styles/colors';\n\nexport const DropdownSelect = (\n {\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 dropdownErrorStyle,\n dropdownErrorTextStyle,\n dropdownHelperTextStyle,\n selectedItemStyle,\n multipleSelectedItemStyle,\n modalBackgroundStyle,\n modalOptionsContainer,\n searchInputStyle,\n primaryColor,\n disabled,\n }: DropdownProps,\n rest: any\n) => {\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: any) =>\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: any) =>\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\n let searchText = value.toString().toLocaleLowerCase().trim();\n\n const regexFilter = new RegExp(searchText, 'i');\n\n const searchResults = options.filter((item: any) => {\n if (\n item[optionLabel ?? DEFAULT_OPTION_LABEL]\n .toString()\n .toLowerCase()\n .search(regexFilter) !== -1 ||\n item[optionValue ?? DEFAULT_OPTION_VALUE]\n .toString(regexFilter)\n .toLowerCase()\n .search(regexFilter) !== -1\n ) {\n return item;\n }\n });\n\n setNewOptions(searchResults);\n };\n\n /*===========================================\n * Modal\n *==========================================*/\n const handleToggleModal = () => {\n setOpen(!open);\n setSearchValue('');\n setNewOptions(options);\n };\n\n let primary = primaryColor || colors.gray;\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 handleToggleModal={handleToggleModal}\n labelStyle={labelStyle}\n dropdownStyle={dropdownStyle}\n dropdownContainerStyle={dropdownContainerStyle}\n dropdownErrorStyle={dropdownErrorStyle}\n dropdownErrorTextStyle={dropdownErrorTextStyle}\n dropdownHelperTextStyle={dropdownHelperTextStyle}\n selectedItemStyle={selectedItemStyle}\n multipleSelectedItemStyle={multipleSelectedItemStyle}\n isMultiple={isMultiple}\n primaryColor={primary}\n disabled={disabled}\n {...rest}\n />\n <CustomModal\n open={open}\n handleToggleModal={handleToggleModal}\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 primaryColor={primary}\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={primary}\n />\n </CustomModal>\n </>\n );\n};\n\nexport default DropdownSelect;\n"]}
|
|
1
|
+
{"version":3,"sources":["index.tsx"],"names":["DropdownSelect","placeholder","label","error","helperText","options","optionLabel","optionValue","onValueChange","selectedValue","isMultiple","isSearchable","labelStyle","dropdownStyle","dropdownContainerStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","selectedItemStyle","multipleSelectedItemStyle","modalBackgroundStyle","modalOptionsContainer","searchInputStyle","primaryColor","disabled","checkboxSize","checkboxStyle","checkboxLabelStyle","rest","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","searchText","toString","toLocaleLowerCase","trim","regexFilter","RegExp","searchResults","toLowerCase","search","handleToggleModal","primary","colors","gray","text"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport Dropdown from './components/Dropdown/Dropdown';\nimport DropdownList from './components/Dropdown/DropdownList';\nimport CustomModal from './components/CustomModal';\nimport { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';\nimport type { DropdownProps } from './types/index.types';\nimport { Input } from './components/Input';\nimport { colors } from './styles/colors';\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 dropdownErrorStyle,\n dropdownErrorTextStyle,\n dropdownHelperTextStyle,\n selectedItemStyle,\n multipleSelectedItemStyle,\n modalBackgroundStyle,\n modalOptionsContainer,\n searchInputStyle,\n primaryColor,\n disabled,\n checkboxSize,\n checkboxStyle,\n checkboxLabelStyle,\n ...rest\n}: DropdownProps) => {\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 onValueChange(selectedValues); //send value to parent\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: any) =>\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: any) =>\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\n let searchText = value.toString().toLocaleLowerCase().trim();\n\n const regexFilter = new RegExp(searchText, 'i');\n\n const searchResults = options.filter((item: any) => {\n if (\n item[optionLabel ?? DEFAULT_OPTION_LABEL]\n .toString()\n .toLowerCase()\n .search(regexFilter) !== -1 ||\n item[optionValue ?? DEFAULT_OPTION_VALUE]\n .toString(regexFilter)\n .toLowerCase()\n .search(regexFilter) !== -1\n ) {\n return item;\n }\n });\n\n setNewOptions(searchResults);\n };\n\n /*===========================================\n * Modal\n *==========================================*/\n const handleToggleModal = () => {\n setOpen(!open);\n setSearchValue('');\n setNewOptions(options);\n };\n\n let primary = primaryColor || colors.gray;\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 handleToggleModal={handleToggleModal}\n labelStyle={labelStyle}\n dropdownStyle={dropdownStyle}\n dropdownContainerStyle={dropdownContainerStyle}\n dropdownErrorStyle={dropdownErrorStyle}\n dropdownErrorTextStyle={dropdownErrorTextStyle}\n dropdownHelperTextStyle={dropdownHelperTextStyle}\n selectedItemStyle={selectedItemStyle}\n multipleSelectedItemStyle={multipleSelectedItemStyle}\n isMultiple={isMultiple}\n primaryColor={primary}\n disabled={disabled}\n {...rest}\n />\n <CustomModal\n open={open}\n handleToggleModal={handleToggleModal}\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 primaryColor={primary}\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={primary}\n checkboxSize={checkboxSize}\n checkboxStyle={checkboxStyle}\n checkboxLabelStyle={checkboxLabelStyle}\n />\n </CustomModal>\n </>\n );\n};\n\nexport default DropdownSelect;\n"]}
|
|
Binary file
|