react-native-input-select 0.6.0 → 0.7.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/lib/commonjs/Dropdown.js +2 -3
- package/lib/commonjs/Dropdown.js.map +1 -1
- package/lib/commonjs/Modal.js +2 -2
- package/lib/commonjs/Modal.js.map +1 -1
- package/lib/commonjs/index.js +12 -3
- package/lib/commonjs/index.js.map +1 -1
- package/lib/module/Dropdown.js +2 -3
- package/lib/module/Dropdown.js.map +1 -1
- package/lib/module/Modal.js +2 -2
- package/lib/module/Modal.js.map +1 -1
- package/lib/module/index.js +12 -3
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/Dropdown.d.ts +1 -1
- package/lib/typescript/Modal.d.ts +1 -1
- package/package.json +1 -1
- package/src/Dropdown.tsx +2 -3
- package/src/Modal.tsx +2 -2
- package/src/index.tsx +11 -3
package/lib/commonjs/Dropdown.js
CHANGED
|
@@ -24,8 +24,7 @@ const Dropdown = _ref => {
|
|
|
24
24
|
helperText,
|
|
25
25
|
error,
|
|
26
26
|
getSelectedItemsLabel,
|
|
27
|
-
|
|
28
|
-
open,
|
|
27
|
+
handleToggleModal,
|
|
29
28
|
isMultiple,
|
|
30
29
|
selectedItem,
|
|
31
30
|
selectedItems,
|
|
@@ -40,7 +39,7 @@ const Dropdown = _ref => {
|
|
|
40
39
|
}, label && label !== '' && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
41
40
|
style: [styles.label, labelStyle]
|
|
42
41
|
}, label), /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
|
|
43
|
-
onPress: () =>
|
|
42
|
+
onPress: () => handleToggleModal(),
|
|
44
43
|
style: _ref2 => {
|
|
45
44
|
let {
|
|
46
45
|
pressed
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Dropdown.tsx"],"names":["Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","
|
|
1
|
+
{"version":3,"sources":["Dropdown.tsx"],"names":["Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","handleToggleModal","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 handleToggleModal,\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={() => handleToggleModal()}\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"]}
|
package/lib/commonjs/Modal.js
CHANGED
|
@@ -16,7 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
16
16
|
const CustomModal = _ref => {
|
|
17
17
|
let {
|
|
18
18
|
open,
|
|
19
|
-
|
|
19
|
+
handleToggleModal,
|
|
20
20
|
onRequestClose,
|
|
21
21
|
modalBackgroundStyle,
|
|
22
22
|
modalOptionsContainerStyle,
|
|
@@ -28,7 +28,7 @@ const CustomModal = _ref => {
|
|
|
28
28
|
onRequestClose: () => onRequestClose(),
|
|
29
29
|
animationType: "fade"
|
|
30
30
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
|
|
31
|
-
onPress: () =>
|
|
31
|
+
onPress: () => handleToggleModal(),
|
|
32
32
|
style: [styles.modalContainer, styles.modalBackgroundStyle, modalBackgroundStyle]
|
|
33
33
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.SafeAreaView, {
|
|
34
34
|
style: [styles.modalOptionsContainer, modalOptionsContainerStyle]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Modal.tsx"],"names":["CustomModal","open","
|
|
1
|
+
{"version":3,"sources":["Modal.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"]}
|
package/lib/commonjs/index.js
CHANGED
|
@@ -111,6 +111,16 @@ const DropdownSelect = _ref => {
|
|
|
111
111
|
});
|
|
112
112
|
setNewOptions(searchResults);
|
|
113
113
|
};
|
|
114
|
+
/*===========================================
|
|
115
|
+
* Modal
|
|
116
|
+
*==========================================*/
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
const handleToggleModal = () => {
|
|
120
|
+
setOpen(!open);
|
|
121
|
+
setSearchValue('');
|
|
122
|
+
setNewOptions(options);
|
|
123
|
+
};
|
|
114
124
|
|
|
115
125
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
|
|
116
126
|
label: label,
|
|
@@ -120,8 +130,7 @@ const DropdownSelect = _ref => {
|
|
|
120
130
|
getSelectedItemsLabel: getSelectedItemsLabel,
|
|
121
131
|
selectedItem: selectedItem,
|
|
122
132
|
selectedItems: selectedItems,
|
|
123
|
-
|
|
124
|
-
open: open,
|
|
133
|
+
handleToggleModal: handleToggleModal,
|
|
125
134
|
labelStyle: labelStyle,
|
|
126
135
|
dropdownStyle: dropdownStyle,
|
|
127
136
|
dropdownContainerStyle: dropdownContainerStyle,
|
|
@@ -130,7 +139,7 @@ const DropdownSelect = _ref => {
|
|
|
130
139
|
primaryColor: primaryColor
|
|
131
140
|
}), /*#__PURE__*/_react.default.createElement(_Modal.default, {
|
|
132
141
|
open: open,
|
|
133
|
-
|
|
142
|
+
handleToggleModal: handleToggleModal,
|
|
134
143
|
modalBackgroundStyle: modalBackgroundStyle,
|
|
135
144
|
modalOptionsContainer: modalOptionsContainer,
|
|
136
145
|
onRequestClose: () => {}
|
|
@@ -1 +1 @@
|
|
|
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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
|
|
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","handleToggleModal","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 /*===========================================\n * Modal\n *==========================================*/\n const handleToggleModal = () => {\n setOpen(!open);\n setSearchValue('');\n setNewOptions(options);\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 handleToggleModal={handleToggleModal}\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 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 />\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"]}
|
package/lib/module/Dropdown.js
CHANGED
|
@@ -11,8 +11,7 @@ const Dropdown = _ref => {
|
|
|
11
11
|
helperText,
|
|
12
12
|
error,
|
|
13
13
|
getSelectedItemsLabel,
|
|
14
|
-
|
|
15
|
-
open,
|
|
14
|
+
handleToggleModal,
|
|
16
15
|
isMultiple,
|
|
17
16
|
selectedItem,
|
|
18
17
|
selectedItems,
|
|
@@ -27,7 +26,7 @@ const Dropdown = _ref => {
|
|
|
27
26
|
}, label && label !== '' && /*#__PURE__*/React.createElement(Text, {
|
|
28
27
|
style: [styles.label, labelStyle]
|
|
29
28
|
}, label), /*#__PURE__*/React.createElement(Pressable, {
|
|
30
|
-
onPress: () =>
|
|
29
|
+
onPress: () => handleToggleModal(),
|
|
31
30
|
style: _ref2 => {
|
|
32
31
|
let {
|
|
33
32
|
pressed
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Dropdown.tsx"],"names":["React","View","Text","Pressable","ScrollView","StyleSheet","Image","colors","inputStyles","typography","Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","
|
|
1
|
+
{"version":3,"sources":["Dropdown.tsx"],"names":["React","View","Text","Pressable","ScrollView","StyleSheet","Image","colors","inputStyles","typography","Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","primaryColor","styles","dropdownInputContainer","pressed","inputFocusState","input","selectedItemsContainer","map","item","i","backgroundColor","blackText","length","iconStyle","require","helper","create","marginBottom","color","gray","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 handleToggleModal,\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={() => handleToggleModal()}\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"]}
|
package/lib/module/Modal.js
CHANGED
|
@@ -5,7 +5,7 @@ import { colors } from './styles/colors';
|
|
|
5
5
|
const CustomModal = _ref => {
|
|
6
6
|
let {
|
|
7
7
|
open,
|
|
8
|
-
|
|
8
|
+
handleToggleModal,
|
|
9
9
|
onRequestClose,
|
|
10
10
|
modalBackgroundStyle,
|
|
11
11
|
modalOptionsContainerStyle,
|
|
@@ -17,7 +17,7 @@ const CustomModal = _ref => {
|
|
|
17
17
|
onRequestClose: () => onRequestClose(),
|
|
18
18
|
animationType: "fade"
|
|
19
19
|
}, /*#__PURE__*/React.createElement(TouchableOpacity, {
|
|
20
|
-
onPress: () =>
|
|
20
|
+
onPress: () => handleToggleModal(),
|
|
21
21
|
style: [styles.modalContainer, styles.modalBackgroundStyle, modalBackgroundStyle]
|
|
22
22
|
}, /*#__PURE__*/React.createElement(SafeAreaView, {
|
|
23
23
|
style: [styles.modalOptionsContainer, modalOptionsContainerStyle]
|
package/lib/module/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Modal.tsx"],"names":["React","Modal","TouchableOpacity","SafeAreaView","StyleSheet","colors","CustomModal","open","
|
|
1
|
+
{"version":3,"sources":["Modal.tsx"],"names":["React","Modal","TouchableOpacity","SafeAreaView","StyleSheet","colors","CustomModal","open","handleToggleModal","onRequestClose","modalBackgroundStyle","modalOptionsContainerStyle","children","styles","modalContainer","modalOptionsContainer","create","flex","justifyContent","backgroundColor","maxHeight","white","borderTopLeftRadius","borderTopRightRadius"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SACEC,KADF,EAEEC,gBAFF,EAGEC,YAHF,EAIEC,UAJF,QAKO,cALP;AAMA,SAASC,MAAT,QAAuB,iBAAvB;;AAEA,MAAMC,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,oBAAC,KAAD;AACE,IAAA,WAAW,EAAE,IADf;AAEE,IAAA,OAAO,EAAEL,IAFX;AAGE,IAAA,cAAc,EAAE,MAAME,cAAc,EAHtC;AAIE,IAAA,aAAa,EAAC;AAJhB,kBAME,oBAAC,gBAAD;AACE,IAAA,OAAO,EAAE,MAAMD,iBAAiB,EADlC;AAEE,IAAA,KAAK,EAAE,CACLK,MAAM,CAACC,cADF,EAELD,MAAM,CAACH,oBAFF,EAGLA,oBAHK;AAFT,kBAQE,oBAAC,YAAD;AACE,IAAA,KAAK,EAAE,CAACG,MAAM,CAACE,qBAAR,EAA+BJ,0BAA/B;AADT,KAGGC,QAHH,CARF,CANF,CADF;AAuBD,CA/BD;;AAiCA,MAAMC,MAAM,GAAGT,UAAU,CAACY,MAAX,CAAkB;AAC/BF,EAAAA,cAAc,EAAE;AACdG,IAAAA,IAAI,EAAE,CADQ;AAEdC,IAAAA,cAAc,EAAE;AAFF,GADe;AAK/BR,EAAAA,oBAAoB,EAAE;AAAES,IAAAA,eAAe,EAAE;AAAnB,GALS;AAM/BJ,EAAAA,qBAAqB,EAAE;AACrBK,IAAAA,SAAS,EAAE,KADU;AAErBD,IAAAA,eAAe,EAAEd,MAAM,CAACgB,KAFH;AAGrBC,IAAAA,mBAAmB,EAAE,EAHA;AAIrBC,IAAAA,oBAAoB,EAAE;AAJD;AANQ,CAAlB,CAAf;AAcA,eAAejB,WAAf","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"]}
|
package/lib/module/index.js
CHANGED
|
@@ -92,6 +92,16 @@ export const DropdownSelect = _ref => {
|
|
|
92
92
|
});
|
|
93
93
|
setNewOptions(searchResults);
|
|
94
94
|
};
|
|
95
|
+
/*===========================================
|
|
96
|
+
* Modal
|
|
97
|
+
*==========================================*/
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
const handleToggleModal = () => {
|
|
101
|
+
setOpen(!open);
|
|
102
|
+
setSearchValue('');
|
|
103
|
+
setNewOptions(options);
|
|
104
|
+
};
|
|
95
105
|
|
|
96
106
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
|
|
97
107
|
label: label,
|
|
@@ -101,8 +111,7 @@ export const DropdownSelect = _ref => {
|
|
|
101
111
|
getSelectedItemsLabel: getSelectedItemsLabel,
|
|
102
112
|
selectedItem: selectedItem,
|
|
103
113
|
selectedItems: selectedItems,
|
|
104
|
-
|
|
105
|
-
open: open,
|
|
114
|
+
handleToggleModal: handleToggleModal,
|
|
106
115
|
labelStyle: labelStyle,
|
|
107
116
|
dropdownStyle: dropdownStyle,
|
|
108
117
|
dropdownContainerStyle: dropdownContainerStyle,
|
|
@@ -111,7 +120,7 @@ export const DropdownSelect = _ref => {
|
|
|
111
120
|
primaryColor: primaryColor
|
|
112
121
|
}), /*#__PURE__*/React.createElement(CustomModal, {
|
|
113
122
|
open: open,
|
|
114
|
-
|
|
123
|
+
handleToggleModal: handleToggleModal,
|
|
115
124
|
modalBackgroundStyle: modalBackgroundStyle,
|
|
116
125
|
modalOptionsContainer: modalOptionsContainer,
|
|
117
126
|
onRequestClose: () => {}
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.tsx"],"names":["React","useState","Dropdown","CustomModal","DropdownList","DEFAULT_OPTION_LABEL","DEFAULT_OPTION_VALUE","Input","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","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
|
+
{"version":3,"sources":["index.tsx"],"names":["React","useState","Dropdown","CustomModal","DropdownList","DEFAULT_OPTION_LABEL","DEFAULT_OPTION_VALUE","Input","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","onSearch","searchTerm","toString","toLocaleLowerCase","searchResults","toLowerCase","handleToggleModal","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 /*===========================================\n * Modal\n *==========================================*/\n const handleToggleModal = () => {\n setOpen(!open);\n setSearchValue('');\n setNewOptions(options);\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 handleToggleModal={handleToggleModal}\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 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 />\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,2 +1,2 @@
|
|
|
1
|
-
declare const Dropdown: ({ label, placeholder, helperText, error, getSelectedItemsLabel,
|
|
1
|
+
declare const Dropdown: ({ label, placeholder, helperText, error, getSelectedItemsLabel, handleToggleModal, isMultiple, selectedItem, selectedItems, labelStyle, dropdownStyle, dropdownContainerStyle, selectedItemStyle, primaryColor, }: any) => JSX.Element;
|
|
2
2
|
export default Dropdown;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const CustomModal: ({ open,
|
|
1
|
+
declare const CustomModal: ({ open, handleToggleModal, onRequestClose, modalBackgroundStyle, modalOptionsContainerStyle, children, }: any) => JSX.Element;
|
|
2
2
|
export default CustomModal;
|
package/package.json
CHANGED
package/src/Dropdown.tsx
CHANGED
|
@@ -17,8 +17,7 @@ const Dropdown = ({
|
|
|
17
17
|
helperText,
|
|
18
18
|
error,
|
|
19
19
|
getSelectedItemsLabel,
|
|
20
|
-
|
|
21
|
-
open,
|
|
20
|
+
handleToggleModal,
|
|
22
21
|
isMultiple,
|
|
23
22
|
selectedItem,
|
|
24
23
|
selectedItems,
|
|
@@ -34,7 +33,7 @@ const Dropdown = ({
|
|
|
34
33
|
<Text style={[styles.label, labelStyle]}>{label}</Text>
|
|
35
34
|
)}
|
|
36
35
|
<Pressable
|
|
37
|
-
onPress={() =>
|
|
36
|
+
onPress={() => handleToggleModal()}
|
|
38
37
|
style={({ pressed }) => [
|
|
39
38
|
pressed && inputStyles.inputFocusState,
|
|
40
39
|
inputStyles.input,
|
package/src/Modal.tsx
CHANGED
|
@@ -9,7 +9,7 @@ import { colors } from './styles/colors';
|
|
|
9
9
|
|
|
10
10
|
const CustomModal = ({
|
|
11
11
|
open,
|
|
12
|
-
|
|
12
|
+
handleToggleModal,
|
|
13
13
|
onRequestClose,
|
|
14
14
|
modalBackgroundStyle,
|
|
15
15
|
modalOptionsContainerStyle,
|
|
@@ -23,7 +23,7 @@ const CustomModal = ({
|
|
|
23
23
|
animationType="fade"
|
|
24
24
|
>
|
|
25
25
|
<TouchableOpacity
|
|
26
|
-
onPress={() =>
|
|
26
|
+
onPress={() => handleToggleModal()}
|
|
27
27
|
style={[
|
|
28
28
|
styles.modalContainer,
|
|
29
29
|
styles.modalBackgroundStyle,
|
package/src/index.tsx
CHANGED
|
@@ -112,6 +112,15 @@ export const DropdownSelect = ({
|
|
|
112
112
|
setNewOptions(searchResults);
|
|
113
113
|
};
|
|
114
114
|
|
|
115
|
+
/*===========================================
|
|
116
|
+
* Modal
|
|
117
|
+
*==========================================*/
|
|
118
|
+
const handleToggleModal = () => {
|
|
119
|
+
setOpen(!open);
|
|
120
|
+
setSearchValue('');
|
|
121
|
+
setNewOptions(options);
|
|
122
|
+
};
|
|
123
|
+
|
|
115
124
|
return (
|
|
116
125
|
<>
|
|
117
126
|
<Dropdown
|
|
@@ -122,8 +131,7 @@ export const DropdownSelect = ({
|
|
|
122
131
|
getSelectedItemsLabel={getSelectedItemsLabel}
|
|
123
132
|
selectedItem={selectedItem}
|
|
124
133
|
selectedItems={selectedItems}
|
|
125
|
-
|
|
126
|
-
open={open}
|
|
134
|
+
handleToggleModal={handleToggleModal}
|
|
127
135
|
labelStyle={labelStyle}
|
|
128
136
|
dropdownStyle={dropdownStyle}
|
|
129
137
|
dropdownContainerStyle={dropdownContainerStyle}
|
|
@@ -133,7 +141,7 @@ export const DropdownSelect = ({
|
|
|
133
141
|
/>
|
|
134
142
|
<CustomModal
|
|
135
143
|
open={open}
|
|
136
|
-
|
|
144
|
+
handleToggleModal={handleToggleModal}
|
|
137
145
|
modalBackgroundStyle={modalBackgroundStyle}
|
|
138
146
|
modalOptionsContainer={modalOptionsContainer}
|
|
139
147
|
onRequestClose={() => {}}
|