react-native-input-select 0.12.0 → 0.16.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 +5 -4
- package/lib/commonjs/Dropdown.js +8 -4
- package/lib/commonjs/Dropdown.js.map +1 -1
- package/lib/commonjs/index.js +16 -4
- package/lib/commonjs/index.js.map +1 -1
- package/lib/module/Dropdown.js +8 -4
- package/lib/module/Dropdown.js.map +1 -1
- package/lib/module/index.js +16 -4
- package/lib/module/index.js.map +1 -1
- package/lib/typescript/index.d.ts +1 -1
- package/lib/typescript/types/index.types.d.ts +3 -0
- package/package.json +1 -1
- package/src/Dropdown.tsx +10 -5
- package/src/index.tsx +39 -26
- package/src/types/index.types.ts +3 -0
package/README.md
CHANGED
|
@@ -11,9 +11,9 @@ yarn add react-native-input-select
|
|
|
11
11
|
|
|
12
12
|
## Demo
|
|
13
13
|
|
|
14
|
-
| Multiple Select | Single Select |
|
|
15
|
-
| :--------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: |
|
|
16
|
-
| <video src='https://user-images.githubusercontent.com/9849221/148039859-9eb4ef87-60ca-4300-9899-fbe81dcb0fb6.mov' width=90/> | <video src='https://user-images.githubusercontent.com/9849221/148039800-9c30509a-6115-415e-aa3c-0402d64ec578.mov' width=90/> |
|
|
14
|
+
| Multiple Select | Single Select | Search |
|
|
15
|
+
| :--------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: |
|
|
16
|
+
| <video src='https://user-images.githubusercontent.com/9849221/148039859-9eb4ef87-60ca-4300-9899-fbe81dcb0fb6.mov' width=90/> | <video src='https://user-images.githubusercontent.com/9849221/148039800-9c30509a-6115-415e-aa3c-0402d64ec578.mov' width=90/> | <video src='https://user-images.githubusercontent.com/9849221/148668734-a48aad4d-99bb-4942-a167-561ed59fe38e.mov' width=90/> |
|
|
17
17
|
|
|
18
18
|
## Usage
|
|
19
19
|
|
|
@@ -64,6 +64,7 @@ export default function App() {
|
|
|
64
64
|
| onValueChange | `function` | `()=>{}` |
|
|
65
65
|
| isMultiple | `Boolean` | `true` |
|
|
66
66
|
| isSearchable | `Boolean` | `true` |
|
|
67
|
+
| disabled | `Boolean` | `true` |
|
|
67
68
|
| labelStyle | `Object` | `{backgroundColor: 'red', borderRadius: 0, ...}` |
|
|
68
69
|
| dropdownStyle | `Object` | `{borderColor: 'blue', margin: 5, borderWidth:0 ...}` |
|
|
69
70
|
| dropdownContainerStyle | `Object` | `{backgroundColor: 'red', width: '30%', ...}` |
|
|
@@ -72,7 +73,7 @@ export default function App() {
|
|
|
72
73
|
| multipleSelectedItemStyle | `Object` | `{backgroundColor: 'red', color: 'yellow', ...}` |
|
|
73
74
|
| modalBackgroundStyle | `Object` | `{backgroundColor: 'blue', ...}` |
|
|
74
75
|
| modalOptionsContainer | `Object` | `{padding: 5}` |
|
|
75
|
-
| dropdownErrorStyle | `Object` | `{borderWidth: 2, borderStyle: 'solid'}`
|
|
76
|
+
| dropdownErrorStyle | `Object` | `{borderWidth: 2, borderStyle: 'solid'}` |
|
|
76
77
|
| dropdownErrorTextStyle | `Object` | `{color: 'red', fontWeight:500}` |
|
|
77
78
|
| dropdownHelperTextStyle | `Object` | `{color: 'green', fontWeight:500}` |
|
|
78
79
|
| primaryColor | `string` | `blue` |
|
package/lib/commonjs/Dropdown.js
CHANGED
|
@@ -51,9 +51,10 @@ const Dropdown = _ref => {
|
|
|
51
51
|
} = _ref2;
|
|
52
52
|
return [pressed && { ..._input.inputStyles.inputFocusState,
|
|
53
53
|
borderColor: primaryColor
|
|
54
|
-
}, _input.inputStyles.input,
|
|
54
|
+
}, _input.inputStyles.input, dropdownStyle, error && //order matters
|
|
55
|
+
error !== '' && !pressed && { ..._input.inputStyles.inputFocusErrorState,
|
|
55
56
|
...dropdownErrorStyle
|
|
56
|
-
}
|
|
57
|
+
}];
|
|
57
58
|
},
|
|
58
59
|
disabled: disabled
|
|
59
60
|
}, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
|
|
@@ -71,9 +72,12 @@ const Dropdown = _ref => {
|
|
|
71
72
|
style: [styles.selectedItems, {
|
|
72
73
|
backgroundColor: primaryColor
|
|
73
74
|
}, multipleSelectedItemStyle]
|
|
74
|
-
}, item))) : /*#__PURE__*/_react.default.createElement(_reactNative.
|
|
75
|
+
}, item))) : /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
|
|
76
|
+
onPress: () => handleToggleModal(),
|
|
77
|
+
disabled: disabled
|
|
78
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
75
79
|
style: [styles.blackText, selectedItemStyle]
|
|
76
|
-
}, getSelectedItemsLabel())), !selectedItem && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0 && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
80
|
+
}, getSelectedItemsLabel()))), !selectedItem && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0 && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
77
81
|
style: styles.blackText
|
|
78
82
|
}, placeholder !== null && placeholder !== void 0 ? placeholder : 'Select an option')), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
79
83
|
style: styles.iconStyle
|
|
@@ -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","pressed","inputStyles","inputFocusState","borderColor","input","inputFocusErrorState","selectedItemsContainer","map","item","i","backgroundColor","blackText","length","iconStyle","require","helper","StyleSheet","create","marginBottom","color","colors","gray","typography","caption","borderWidth","borderStyle","red","position","right","top","marginTop","primary","width","flexDirection","flexWrap","white","paddingHorizontal","paddingVertical","borderRadius","marginRight","black"],"mappings":";;;;;;;AAAA;;AACA;;AASA;;AACA;;AACA;;;;AAEA,MAAMA,QAAQ,GAAG,QAoBN;AAAA,MApBO;AAChBC,IAAAA,KADgB;AAEhBC,IAAAA,WAFgB;AAGhBC,IAAAA,UAHgB;AAIhBC,IAAAA,KAJgB;AAKhBC,IAAAA,qBALgB;AAMhBC,IAAAA,iBANgB;AAOhBC,IAAAA,UAPgB;AAQhBC,IAAAA,YARgB;AAShBC,IAAAA,aATgB;AAUhBC,IAAAA,UAVgB;AAWhBC,IAAAA,aAXgB;AAYhBC,IAAAA,sBAZgB;AAahBC,IAAAA,iBAbgB;AAchBC,IAAAA,yBAdgB;AAehBC,IAAAA,kBAfgB;AAgBhBC,IAAAA,sBAhBgB;AAiBhBC,IAAAA,uBAjBgB;AAkBhBC,IAAAA,YAlBgB;AAmBhBC,IAAAA;AAnBgB,GAoBP;AACT,sBACE,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACC,MAAM,CAACC,sBAAR,EAAgCT,sBAAhC;AAAb,KACGX,KAAK,IAAIA,KAAK,KAAK,EAAnB,iBACC,6BAAC,iBAAD;AAAM,IAAA,KAAK,EAAE,CAACmB,MAAM,CAACnB,KAAR,EAAeS,UAAf;AAAb,KAA0CT,KAA1C,CAFJ,eAIE,6BAAC,sBAAD;AACE,IAAA,OAAO,EAAE,MAAMK,iBAAiB,EADlC;AAEE,IAAA,KAAK,EAAE;AAAA,UAAC;AAAEgB,QAAAA;AAAF,OAAD;AAAA,aAAiB,CACtBA,OAAO,IAAI,EACT,GAAGC,mBAAYC,eADN;AAETC,QAAAA,WAAW,EAAEP;AAFJ,OADW,EAKtBK,mBAAYG,KALU,
|
|
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","pressed","inputStyles","inputFocusState","borderColor","input","inputFocusErrorState","selectedItemsContainer","map","item","i","backgroundColor","blackText","length","iconStyle","require","helper","StyleSheet","create","marginBottom","color","colors","gray","typography","caption","borderWidth","borderStyle","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 TouchableOpacity,\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 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 <Pressable\n onPress={() => handleToggleModal()}\n style={({ pressed }) => [\n pressed && {\n ...inputStyles.inputFocusState,\n borderColor: primaryColor,\n },\n inputStyles.input,\n dropdownStyle,\n error && //order matters\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={`SelectedItems${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('../src/asset/arrow-down.png')} />\n </View>\n </Pressable>\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 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/index.js
CHANGED
|
@@ -23,7 +23,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
23
23
|
|
|
24
24
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
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); }
|
|
27
|
+
|
|
28
|
+
const DropdownSelect = (_ref, rest) => {
|
|
27
29
|
let {
|
|
28
30
|
placeholder,
|
|
29
31
|
label,
|
|
@@ -39,6 +41,9 @@ const DropdownSelect = _ref => {
|
|
|
39
41
|
labelStyle,
|
|
40
42
|
dropdownStyle,
|
|
41
43
|
dropdownContainerStyle,
|
|
44
|
+
dropdownErrorStyle,
|
|
45
|
+
dropdownErrorTextStyle,
|
|
46
|
+
dropdownHelperTextStyle,
|
|
42
47
|
selectedItemStyle,
|
|
43
48
|
multipleSelectedItemStyle,
|
|
44
49
|
modalBackgroundStyle,
|
|
@@ -108,7 +113,11 @@ const DropdownSelect = _ref => {
|
|
|
108
113
|
const onSearch = value => {
|
|
109
114
|
setSearchValue(value);
|
|
110
115
|
let searchTerm = value.toString().toLocaleLowerCase().trim();
|
|
111
|
-
const searchResults = options.filter(item =>
|
|
116
|
+
const searchResults = options.filter(item => {
|
|
117
|
+
if (item[optionLabel !== null && optionLabel !== void 0 ? optionLabel : _constants.DEFAULT_OPTION_LABEL].toString().toLowerCase().includes(searchTerm) || item[optionValue !== null && optionValue !== void 0 ? optionValue : _constants.DEFAULT_OPTION_VALUE].toString(searchTerm).toLowerCase().includes()) {
|
|
118
|
+
return item;
|
|
119
|
+
}
|
|
120
|
+
});
|
|
112
121
|
setNewOptions(searchResults);
|
|
113
122
|
};
|
|
114
123
|
/*===========================================
|
|
@@ -122,7 +131,7 @@ const DropdownSelect = _ref => {
|
|
|
122
131
|
setNewOptions(options);
|
|
123
132
|
};
|
|
124
133
|
|
|
125
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default, {
|
|
134
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default, _extends({
|
|
126
135
|
label: label,
|
|
127
136
|
placeholder: placeholder,
|
|
128
137
|
helperText: helperText,
|
|
@@ -134,12 +143,15 @@ const DropdownSelect = _ref => {
|
|
|
134
143
|
labelStyle: labelStyle,
|
|
135
144
|
dropdownStyle: dropdownStyle,
|
|
136
145
|
dropdownContainerStyle: dropdownContainerStyle,
|
|
146
|
+
dropdownErrorStyle: dropdownErrorStyle,
|
|
147
|
+
dropdownErrorTextStyle: dropdownErrorTextStyle,
|
|
148
|
+
dropdownHelperTextStyle: dropdownHelperTextStyle,
|
|
137
149
|
selectedItemStyle: selectedItemStyle,
|
|
138
150
|
multipleSelectedItemStyle: multipleSelectedItemStyle,
|
|
139
151
|
isMultiple: isMultiple,
|
|
140
152
|
primaryColor: primaryColor,
|
|
141
153
|
disabled: disabled
|
|
142
|
-
}), /*#__PURE__*/_react.default.createElement(_Modal.default, {
|
|
154
|
+
}, rest)), /*#__PURE__*/_react.default.createElement(_Modal.default, {
|
|
143
155
|
open: open,
|
|
144
156
|
handleToggleModal: handleToggleModal,
|
|
145
157
|
modalBackgroundStyle: modalBackgroundStyle,
|
|
@@ -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","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","searchTerm","toString","toLocaleLowerCase","trim","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 type { DropdownProps } from './types/index.types';\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 multipleSelectedItemStyle,\n modalBackgroundStyle,\n modalOptionsContainer,\n searchInputStyle,\n primaryColor,\n disabled,\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 };\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 searchTerm = value.toString().toLocaleLowerCase().trim();\n const searchResults = options.filter(\n (item: any) =>\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 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 multipleSelectedItemStyle={multipleSelectedItemStyle}\n isMultiple={isMultiple}\n primaryColor={primaryColor}\n disabled={disabled}\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={primaryColor}\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":["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","searchTerm","toString","toLocaleLowerCase","trim","searchResults","toLowerCase","handleToggleModal","text"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAEO,MAAMA,cAAc,GAAG,OA2B5BC,IA3B4B,KA4BzB;AAAA,MA3BH;AACEC,IAAAA,WADF;AAEEC,IAAAA,KAFF;AAGEC,IAAAA,KAHF;AAIEC,IAAAA,UAJF;AAKEC,IAAAA,OALF;AAMEC,IAAAA,WANF;AAOEC,IAAAA,WAPF;AAQEC,IAAAA,aARF;AASEC,IAAAA,aATF;AAUEC,IAAAA,UAVF;AAWEC,IAAAA,YAXF;AAYEC,IAAAA,UAZF;AAaEC,IAAAA,aAbF;AAcEC,IAAAA,sBAdF;AAeEC,IAAAA,kBAfF;AAgBEC,IAAAA,sBAhBF;AAiBEC,IAAAA,uBAjBF;AAkBEC,IAAAA,iBAlBF;AAmBEC,IAAAA,yBAnBF;AAoBEC,IAAAA,oBApBF;AAqBEC,IAAAA,qBArBF;AAsBEC,IAAAA,gBAtBF;AAuBEC,IAAAA,YAvBF;AAwBEC,IAAAA;AAxBF,GA2BG;AACH,QAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B,qBAASrB,OAAO,GAAGA,OAAH,GAAa,EAA7B,CAApC;AACA,QAAM,CAACsB,IAAD,EAAOC,OAAP,IAAkB,qBAAS,KAAT,CAAxB;AACA,QAAM,CAACC,YAAD,EAAeC,eAAf,IAAkC,qBAASrB,aAAT,CAAxC,CAHG,CAG8D;;AACjE,QAAM,CAACsB,aAAD,EAAgBC,gBAAhB,IAAoC,qBACxCC,KAAK,CAACC,OAAN,CAAczB,aAAd,IACIA,aADJ,GAEIA,aAAa,KAAK,EAAlB,IAAwBA,aAAa,KAAK0B,SAA1C,GACA,EADA,GAEA,CAAC1B,aAAD,CALoC,CAA1C,CAJG,CAUA;;AACH,QAAM,CAAC2B,WAAD,EAAcC,cAAd,IAAgC,qBAAS,EAAT,CAAtC;AAEA;AACF;AACA;;AACE,QAAMC,qBAAqB,GAAIC,KAAD,IAAgB;AAC5C,QAAIV,YAAY,KAAKU,KAArB,EAA4B;AAC1BT,MAAAA,eAAe,CAAC,IAAD,CAAf;AACD,KAFD,MAEO;AACLA,MAAAA,eAAe,CAACS,KAAD,CAAf;AACA/B,MAAAA,aAAa,CAAC+B,KAAD,CAAb,CAFK,CAEiB;;AACtBX,MAAAA,OAAO,CAAC,KAAD,CAAP,CAHK,CAGW;AACjB;AACF,GARD;;AAUA,QAAMY,wBAAwB,GAAID,KAAD,IAAgB;AAC/C,QAAIE,cAAc,GAAG,CAAC,GAAGV,aAAJ,CAArB;;AAEA,QAAIU,cAAc,CAACC,QAAf,CAAwBH,KAAxB,CAAJ,EAAoC;AAClCE,MAAAA,cAAc,GAAGA,cAAc,CAACE,MAAf,CAAuBC,IAAD,IAAUA,IAAI,KAAKL,KAAzC,CAAjB;AACD,KAFD,MAEO;AACLE,MAAAA,cAAc,CAACI,IAAf,CAAoBN,KAApB;AACD;;AACDP,IAAAA,gBAAgB,CAACS,cAAD,CAAhB;AACD,GATD;AAWA;AACF;AACA;;;AACE,QAAMK,qBAAqB,GAAG,MAAM;AAClC,QAAIpC,UAAJ,EAAgB;AACd,UAAIqC,cAA6B,GAAG,EAApC;AACAhB,MAAAA,aAAa,IACXA,aAAa,CAACiB,OAAd,CAAuBC,OAAD,IAAa;AAAA;;AACjC,YAAIC,iBAAiB,GACnB7C,OAAO,sBACPA,OAAO,CAAC8C,IAAR,CACGP,IAAD,IACEA,IAAI,CAACrC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgB6C,+BAAhB,CAAJ,KAA8CH,OAFlD,CADO,kDACP,cAGI3C,WAHJ,CADO,CADT;AAMAyC,QAAAA,cAAc,CAACF,IAAf,CAAoBK,iBAApB;AACD,OARD,CADF;AAUA,aAAOH,cAAP;AACD;;AAED,QAAIG,iBAAiB,GACnB7C,OAAO,IACPA,OAAO,CAAC8C,IAAR,CACGP,IAAD,IACEA,IAAI,CAACrC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgB6C,+BAAhB,CAAJ,KAA8CvB,YAFlD,CAFF;AAMA,WAAOqB,iBAAP,aAAOA,iBAAP,uBAAOA,iBAAiB,CAAG5C,WAAH,aAAGA,WAAH,cAAGA,WAAH,GAAkB+C,+BAAlB,CAAxB;AACD,GAvBD;AAyBA;AACF;AACA;;;AACE,QAAMC,QAAQ,GAAIf,KAAD,IAAmB;AAClCF,IAAAA,cAAc,CAACE,KAAD,CAAd;AAEA,QAAIgB,UAAU,GAAGhB,KAAK,CAACiB,QAAN,GAAiBC,iBAAjB,GAAqCC,IAArC,EAAjB;AACA,UAAMC,aAAa,GAAGtD,OAAO,CAACsC,MAAR,CAAgBC,IAAD,IAAe;AAClD,UACEA,IAAI,CAACtC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgB+C,+BAAhB,CAAJ,CACGG,QADH,GAEGI,WAFH,GAGGlB,QAHH,CAGYa,UAHZ,KAIAX,IAAI,CAACrC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgB6C,+BAAhB,CAAJ,CACGI,QADH,CACYD,UADZ,EAEGK,WAFH,GAGGlB,QAHH,EALF,EASE;AACA,eAAOE,IAAP;AACD;AACF,KAbqB,CAAtB;AAeAlB,IAAAA,aAAa,CAACiC,aAAD,CAAb;AACD,GApBD;AAsBA;AACF;AACA;;;AACE,QAAME,iBAAiB,GAAG,MAAM;AAC9BjC,IAAAA,OAAO,CAAC,CAACD,IAAF,CAAP;AACAU,IAAAA,cAAc,CAAC,EAAD,CAAd;AACAX,IAAAA,aAAa,CAACrB,OAAD,CAAb;AACD,GAJD;;AAMA,sBACE,yEACE,6BAAC,iBAAD;AACE,IAAA,KAAK,EAAEH,KADT;AAEE,IAAA,WAAW,EAAED,WAFf;AAGE,IAAA,UAAU,EAAEG,UAHd;AAIE,IAAA,KAAK,EAAED,KAJT;AAKE,IAAA,qBAAqB,EAAE2C,qBALzB;AAME,IAAA,YAAY,EAAEjB,YANhB;AAOE,IAAA,aAAa,EAAEE,aAPjB;AAQE,IAAA,iBAAiB,EAAE8B,iBARrB;AASE,IAAA,UAAU,EAAEjD,UATd;AAUE,IAAA,aAAa,EAAEC,aAVjB;AAWE,IAAA,sBAAsB,EAAEC,sBAX1B;AAYE,IAAA,kBAAkB,EAAEC,kBAZtB;AAaE,IAAA,sBAAsB,EAAEC,sBAb1B;AAcE,IAAA,uBAAuB,EAAEC,uBAd3B;AAeE,IAAA,iBAAiB,EAAEC,iBAfrB;AAgBE,IAAA,yBAAyB,EAAEC,yBAhB7B;AAiBE,IAAA,UAAU,EAAET,UAjBd;AAkBE,IAAA,YAAY,EAAEa,YAlBhB;AAmBE,IAAA,QAAQ,EAAEC;AAnBZ,KAoBMxB,IApBN,EADF,eAuBE,6BAAC,cAAD;AACE,IAAA,IAAI,EAAE2B,IADR;AAEE,IAAA,iBAAiB,EAAEkC,iBAFrB;AAGE,IAAA,oBAAoB,EAAEzC,oBAHxB;AAIE,IAAA,qBAAqB,EAAEC,qBAJzB;AAKE,IAAA,cAAc,EAAE,MAAM,CAAE;AAL1B,KAOGV,YAAY,iBACX,6BAAC,YAAD;AACE,IAAA,KAAK,EAAEyB,WADT;AAEE,IAAA,YAAY,EAAG0B,IAAD,IAAkBR,QAAQ,CAACQ,IAAD,CAF1C;AAGE,IAAA,KAAK,EAAExC,gBAHT;AAIE,IAAA,YAAY,EAAEC;AAJhB,IARJ,eAeE,6BAAC,qBAAD;AACE,IAAA,OAAO,EAAEE,UADX;AAEE,IAAA,WAAW,EAAEnB,WAFf;AAGE,IAAA,WAAW,EAAEC,WAHf;AAIE,IAAA,UAAU,EAAEG,UAJd;AAKE,IAAA,aAAa,EAAEqB,aALjB;AAME,IAAA,YAAY,EAAEF,YANhB;AAOE,IAAA,wBAAwB,EAAEW,wBAP5B;AAQE,IAAA,qBAAqB,EAAEF,qBARzB;AASE,IAAA,YAAY,EAAEf;AAThB,IAfF,CAvBF,CADF;AAqDD,CApLM;;;eAsLQxB,c","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';\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 searchTerm = value.toString().toLocaleLowerCase().trim();\n const searchResults = options.filter((item: any) => {\n if (\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 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 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={primaryColor}\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={primaryColor}\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
|
@@ -38,9 +38,10 @@ const Dropdown = _ref => {
|
|
|
38
38
|
} = _ref2;
|
|
39
39
|
return [pressed && { ...inputStyles.inputFocusState,
|
|
40
40
|
borderColor: primaryColor
|
|
41
|
-
}, inputStyles.input,
|
|
41
|
+
}, inputStyles.input, dropdownStyle, error && //order matters
|
|
42
|
+
error !== '' && !pressed && { ...inputStyles.inputFocusErrorState,
|
|
42
43
|
...dropdownErrorStyle
|
|
43
|
-
}
|
|
44
|
+
}];
|
|
44
45
|
},
|
|
45
46
|
disabled: disabled
|
|
46
47
|
}, /*#__PURE__*/React.createElement(ScrollView, {
|
|
@@ -58,9 +59,12 @@ const Dropdown = _ref => {
|
|
|
58
59
|
style: [styles.selectedItems, {
|
|
59
60
|
backgroundColor: primaryColor
|
|
60
61
|
}, multipleSelectedItemStyle]
|
|
61
|
-
}, item))) : /*#__PURE__*/React.createElement(
|
|
62
|
+
}, item))) : /*#__PURE__*/React.createElement(TouchableOpacity, {
|
|
63
|
+
onPress: () => handleToggleModal(),
|
|
64
|
+
disabled: disabled
|
|
65
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
62
66
|
style: [styles.blackText, selectedItemStyle]
|
|
63
|
-
}, getSelectedItemsLabel())), !selectedItem && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0 && /*#__PURE__*/React.createElement(Text, {
|
|
67
|
+
}, getSelectedItemsLabel()))), !selectedItem && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0 && /*#__PURE__*/React.createElement(Text, {
|
|
64
68
|
style: styles.blackText
|
|
65
69
|
}, placeholder !== null && placeholder !== void 0 ? placeholder : 'Select an option')), /*#__PURE__*/React.createElement(View, {
|
|
66
70
|
style: styles.iconStyle
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Dropdown.tsx"],"names":["React","View","Text","Pressable","ScrollView","StyleSheet","Image","TouchableOpacity","colors","inputStyles","typography","Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","multipleSelectedItemStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","primaryColor","disabled","styles","dropdownInputContainer","pressed","inputFocusState","borderColor","input","inputFocusErrorState","selectedItemsContainer","map","item","i","backgroundColor","blackText","length","iconStyle","require","helper","create","marginBottom","color","gray","caption","borderWidth","borderStyle","red","position","right","top","marginTop","primary","width","flexDirection","flexWrap","white","paddingHorizontal","paddingVertical","borderRadius","marginRight","black"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SACEC,IADF,EAEEC,IAFF,EAGEC,SAHF,EAIEC,UAJF,EAKEC,UALF,EAMEC,KANF,EAOEC,gBAPF,QAQO,cARP;AASA,SAASC,MAAT,QAAuB,iBAAvB;AACA,SAASC,WAAT,QAA4B,gBAA5B;AACA,SAASC,UAAT,QAA2B,qBAA3B;;AAEA,MAAMC,QAAQ,GAAG,QAoBN;AAAA,MApBO;AAChBC,IAAAA,KADgB;AAEhBC,IAAAA,WAFgB;AAGhBC,IAAAA,UAHgB;AAIhBC,IAAAA,KAJgB;AAKhBC,IAAAA,qBALgB;AAMhBC,IAAAA,iBANgB;AAOhBC,IAAAA,UAPgB;AAQhBC,IAAAA,YARgB;AAShBC,IAAAA,aATgB;AAUhBC,IAAAA,UAVgB;AAWhBC,IAAAA,aAXgB;AAYhBC,IAAAA,sBAZgB;AAahBC,IAAAA,iBAbgB;AAchBC,IAAAA,yBAdgB;AAehBC,IAAAA,kBAfgB;AAgBhBC,IAAAA,sBAhBgB;AAiBhBC,IAAAA,uBAjBgB;AAkBhBC,IAAAA,YAlBgB;AAmBhBC,IAAAA;AAnBgB,GAoBP;AACT,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE,CAACC,MAAM,CAACC,sBAAR,EAAgCT,sBAAhC;AAAb,KACGX,KAAK,IAAIA,KAAK,KAAK,EAAnB,iBACC,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE,CAACmB,MAAM,CAACnB,KAAR,EAAeS,UAAf;AAAb,KAA0CT,KAA1C,CAFJ,eAIE,oBAAC,SAAD;AACE,IAAA,OAAO,EAAE,MAAMK,iBAAiB,EADlC;AAEE,IAAA,KAAK,EAAE;AAAA,UAAC;AAAEgB,QAAAA;AAAF,OAAD;AAAA,aAAiB,CACtBA,OAAO,IAAI,EACT,GAAGxB,WAAW,CAACyB,eADN;AAETC,QAAAA,WAAW,EAAEN;AAFJ,OADW,EAKtBpB,WAAW,CAAC2B,KALU,
|
|
1
|
+
{"version":3,"sources":["Dropdown.tsx"],"names":["React","View","Text","Pressable","ScrollView","StyleSheet","Image","TouchableOpacity","colors","inputStyles","typography","Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","multipleSelectedItemStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","primaryColor","disabled","styles","dropdownInputContainer","pressed","inputFocusState","borderColor","input","inputFocusErrorState","selectedItemsContainer","map","item","i","backgroundColor","blackText","length","iconStyle","require","helper","create","marginBottom","color","gray","caption","borderWidth","borderStyle","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 TouchableOpacity,\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 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 <Pressable\n onPress={() => handleToggleModal()}\n style={({ pressed }) => [\n pressed && {\n ...inputStyles.inputFocusState,\n borderColor: primaryColor,\n },\n inputStyles.input,\n dropdownStyle,\n error && //order matters\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={`SelectedItems${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('../src/asset/arrow-down.png')} />\n </View>\n </Pressable>\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 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/index.js
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
|
+
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); }
|
|
2
|
+
|
|
1
3
|
import React, { useState } from 'react';
|
|
2
4
|
import Dropdown from './Dropdown';
|
|
3
5
|
import CustomModal from './Modal';
|
|
4
6
|
import DropdownList from './DropdownList';
|
|
5
7
|
import { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';
|
|
6
8
|
import { Input } from './Input';
|
|
7
|
-
export const DropdownSelect = _ref => {
|
|
9
|
+
export const DropdownSelect = (_ref, rest) => {
|
|
8
10
|
let {
|
|
9
11
|
placeholder,
|
|
10
12
|
label,
|
|
@@ -20,6 +22,9 @@ export const DropdownSelect = _ref => {
|
|
|
20
22
|
labelStyle,
|
|
21
23
|
dropdownStyle,
|
|
22
24
|
dropdownContainerStyle,
|
|
25
|
+
dropdownErrorStyle,
|
|
26
|
+
dropdownErrorTextStyle,
|
|
27
|
+
dropdownHelperTextStyle,
|
|
23
28
|
selectedItemStyle,
|
|
24
29
|
multipleSelectedItemStyle,
|
|
25
30
|
modalBackgroundStyle,
|
|
@@ -89,7 +94,11 @@ export const DropdownSelect = _ref => {
|
|
|
89
94
|
const onSearch = value => {
|
|
90
95
|
setSearchValue(value);
|
|
91
96
|
let searchTerm = value.toString().toLocaleLowerCase().trim();
|
|
92
|
-
const searchResults = options.filter(item =>
|
|
97
|
+
const searchResults = options.filter(item => {
|
|
98
|
+
if (item[optionLabel !== null && optionLabel !== void 0 ? optionLabel : DEFAULT_OPTION_LABEL].toString().toLowerCase().includes(searchTerm) || item[optionValue !== null && optionValue !== void 0 ? optionValue : DEFAULT_OPTION_VALUE].toString(searchTerm).toLowerCase().includes()) {
|
|
99
|
+
return item;
|
|
100
|
+
}
|
|
101
|
+
});
|
|
93
102
|
setNewOptions(searchResults);
|
|
94
103
|
};
|
|
95
104
|
/*===========================================
|
|
@@ -103,7 +112,7 @@ export const DropdownSelect = _ref => {
|
|
|
103
112
|
setNewOptions(options);
|
|
104
113
|
};
|
|
105
114
|
|
|
106
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
|
|
115
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, _extends({
|
|
107
116
|
label: label,
|
|
108
117
|
placeholder: placeholder,
|
|
109
118
|
helperText: helperText,
|
|
@@ -115,12 +124,15 @@ export const DropdownSelect = _ref => {
|
|
|
115
124
|
labelStyle: labelStyle,
|
|
116
125
|
dropdownStyle: dropdownStyle,
|
|
117
126
|
dropdownContainerStyle: dropdownContainerStyle,
|
|
127
|
+
dropdownErrorStyle: dropdownErrorStyle,
|
|
128
|
+
dropdownErrorTextStyle: dropdownErrorTextStyle,
|
|
129
|
+
dropdownHelperTextStyle: dropdownHelperTextStyle,
|
|
118
130
|
selectedItemStyle: selectedItemStyle,
|
|
119
131
|
multipleSelectedItemStyle: multipleSelectedItemStyle,
|
|
120
132
|
isMultiple: isMultiple,
|
|
121
133
|
primaryColor: primaryColor,
|
|
122
134
|
disabled: disabled
|
|
123
|
-
}), /*#__PURE__*/React.createElement(CustomModal, {
|
|
135
|
+
}, rest)), /*#__PURE__*/React.createElement(CustomModal, {
|
|
124
136
|
open: open,
|
|
125
137
|
handleToggleModal: handleToggleModal,
|
|
126
138
|
modalBackgroundStyle: modalBackgroundStyle,
|
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","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","onSearch","searchTerm","toString","toLocaleLowerCase","trim","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 type { DropdownProps } from './types/index.types';\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 multipleSelectedItemStyle,\n modalBackgroundStyle,\n modalOptionsContainer,\n searchInputStyle,\n primaryColor,\n disabled,\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 };\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 searchTerm = value.toString().toLocaleLowerCase().trim();\n const searchResults = options.filter(\n (item: any) =>\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 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 multipleSelectedItemStyle={multipleSelectedItemStyle}\n isMultiple={isMultiple}\n primaryColor={primaryColor}\n disabled={disabled}\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={primaryColor}\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","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","onSearch","searchTerm","toString","toLocaleLowerCase","trim","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 type { DropdownProps } from './types/index.types';\nimport { Input } from './Input';\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 searchTerm = value.toString().toLocaleLowerCase().trim();\n const searchResults = options.filter((item: any) => {\n if (\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 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 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={primaryColor}\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={primaryColor}\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,3 +1,3 @@
|
|
|
1
1
|
import type { DropdownProps } from './types/index.types';
|
|
2
|
-
export declare const DropdownSelect: ({ placeholder, label, error, helperText, options, optionLabel, optionValue, onValueChange, selectedValue, isMultiple, isSearchable, labelStyle, dropdownStyle, dropdownContainerStyle, selectedItemStyle, multipleSelectedItemStyle, modalBackgroundStyle, modalOptionsContainer, searchInputStyle, primaryColor, disabled, }: DropdownProps) => JSX.Element;
|
|
2
|
+
export declare const 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, }: DropdownProps, rest: any) => JSX.Element;
|
|
3
3
|
export default DropdownSelect;
|
|
@@ -14,6 +14,9 @@ export declare type DropdownProps = {
|
|
|
14
14
|
labelStyle: string;
|
|
15
15
|
dropdownStyle: CSSProperties;
|
|
16
16
|
dropdownContainerStyle: CSSProperties;
|
|
17
|
+
dropdownErrorStyle: CSSProperties;
|
|
18
|
+
dropdownErrorTextStyle: CSSProperties;
|
|
19
|
+
dropdownHelperTextStyle: CSSProperties;
|
|
17
20
|
selectedItemStyle: CSSProperties;
|
|
18
21
|
multipleSelectedItemStyle: CSSProperties;
|
|
19
22
|
modalBackgroundStyle: CSSProperties;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-input-select",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.16.0",
|
|
4
4
|
"description": "A customizable dropdown selection package for react-native for android and iOS with multiple select and search capabilities.",
|
|
5
5
|
"main": "lib/commonjs/index",
|
|
6
6
|
"module": "lib/module/index",
|
package/src/Dropdown.tsx
CHANGED
|
@@ -46,13 +46,13 @@ const Dropdown = ({
|
|
|
46
46
|
borderColor: primaryColor,
|
|
47
47
|
},
|
|
48
48
|
inputStyles.input,
|
|
49
|
-
|
|
49
|
+
dropdownStyle,
|
|
50
|
+
error && //order matters
|
|
50
51
|
error !== '' &&
|
|
51
52
|
!pressed && {
|
|
52
53
|
...inputStyles.inputFocusErrorState,
|
|
53
54
|
...dropdownErrorStyle,
|
|
54
55
|
},
|
|
55
|
-
dropdownStyle,
|
|
56
56
|
]}
|
|
57
57
|
disabled={disabled}
|
|
58
58
|
>
|
|
@@ -84,9 +84,14 @@ const Dropdown = ({
|
|
|
84
84
|
</TouchableOpacity>
|
|
85
85
|
))
|
|
86
86
|
) : (
|
|
87
|
-
<
|
|
88
|
-
{
|
|
89
|
-
|
|
87
|
+
<TouchableOpacity
|
|
88
|
+
onPress={() => handleToggleModal()}
|
|
89
|
+
disabled={disabled}
|
|
90
|
+
>
|
|
91
|
+
<Text style={[styles.blackText, selectedItemStyle]}>
|
|
92
|
+
{getSelectedItemsLabel()}
|
|
93
|
+
</Text>
|
|
94
|
+
</TouchableOpacity>
|
|
90
95
|
)}
|
|
91
96
|
</View>
|
|
92
97
|
|
package/src/index.tsx
CHANGED
|
@@ -6,29 +6,35 @@ import { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';
|
|
|
6
6
|
import type { DropdownProps } from './types/index.types';
|
|
7
7
|
import { Input } from './Input';
|
|
8
8
|
|
|
9
|
-
export const DropdownSelect = (
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
9
|
+
export const DropdownSelect = (
|
|
10
|
+
{
|
|
11
|
+
placeholder,
|
|
12
|
+
label,
|
|
13
|
+
error,
|
|
14
|
+
helperText,
|
|
15
|
+
options,
|
|
16
|
+
optionLabel,
|
|
17
|
+
optionValue,
|
|
18
|
+
onValueChange,
|
|
19
|
+
selectedValue,
|
|
20
|
+
isMultiple,
|
|
21
|
+
isSearchable,
|
|
22
|
+
labelStyle,
|
|
23
|
+
dropdownStyle,
|
|
24
|
+
dropdownContainerStyle,
|
|
25
|
+
dropdownErrorStyle,
|
|
26
|
+
dropdownErrorTextStyle,
|
|
27
|
+
dropdownHelperTextStyle,
|
|
28
|
+
selectedItemStyle,
|
|
29
|
+
multipleSelectedItemStyle,
|
|
30
|
+
modalBackgroundStyle,
|
|
31
|
+
modalOptionsContainer,
|
|
32
|
+
searchInputStyle,
|
|
33
|
+
primaryColor,
|
|
34
|
+
disabled,
|
|
35
|
+
}: DropdownProps,
|
|
36
|
+
rest: any
|
|
37
|
+
) => {
|
|
32
38
|
const [newOptions, setNewOptions] = useState(options ? options : []);
|
|
33
39
|
const [open, setOpen] = useState(false);
|
|
34
40
|
const [selectedItem, setSelectedItem] = useState(selectedValue); //for single selection
|
|
@@ -100,8 +106,8 @@ export const DropdownSelect = ({
|
|
|
100
106
|
setSearchValue(value);
|
|
101
107
|
|
|
102
108
|
let searchTerm = value.toString().toLocaleLowerCase().trim();
|
|
103
|
-
const searchResults = options.filter(
|
|
104
|
-
(
|
|
109
|
+
const searchResults = options.filter((item: any) => {
|
|
110
|
+
if (
|
|
105
111
|
item[optionLabel ?? DEFAULT_OPTION_LABEL]
|
|
106
112
|
.toString()
|
|
107
113
|
.toLowerCase()
|
|
@@ -110,7 +116,10 @@ export const DropdownSelect = ({
|
|
|
110
116
|
.toString(searchTerm)
|
|
111
117
|
.toLowerCase()
|
|
112
118
|
.includes()
|
|
113
|
-
|
|
119
|
+
) {
|
|
120
|
+
return item;
|
|
121
|
+
}
|
|
122
|
+
});
|
|
114
123
|
|
|
115
124
|
setNewOptions(searchResults);
|
|
116
125
|
};
|
|
@@ -138,11 +147,15 @@ export const DropdownSelect = ({
|
|
|
138
147
|
labelStyle={labelStyle}
|
|
139
148
|
dropdownStyle={dropdownStyle}
|
|
140
149
|
dropdownContainerStyle={dropdownContainerStyle}
|
|
150
|
+
dropdownErrorStyle={dropdownErrorStyle}
|
|
151
|
+
dropdownErrorTextStyle={dropdownErrorTextStyle}
|
|
152
|
+
dropdownHelperTextStyle={dropdownHelperTextStyle}
|
|
141
153
|
selectedItemStyle={selectedItemStyle}
|
|
142
154
|
multipleSelectedItemStyle={multipleSelectedItemStyle}
|
|
143
155
|
isMultiple={isMultiple}
|
|
144
156
|
primaryColor={primaryColor}
|
|
145
157
|
disabled={disabled}
|
|
158
|
+
{...rest}
|
|
146
159
|
/>
|
|
147
160
|
<CustomModal
|
|
148
161
|
open={open}
|
package/src/types/index.types.ts
CHANGED
|
@@ -15,6 +15,9 @@ export type DropdownProps = {
|
|
|
15
15
|
labelStyle: string;
|
|
16
16
|
dropdownStyle: CSSProperties;
|
|
17
17
|
dropdownContainerStyle: CSSProperties;
|
|
18
|
+
dropdownErrorStyle: CSSProperties;
|
|
19
|
+
dropdownErrorTextStyle: CSSProperties;
|
|
20
|
+
dropdownHelperTextStyle: CSSProperties;
|
|
18
21
|
selectedItemStyle: CSSProperties;
|
|
19
22
|
multipleSelectedItemStyle: CSSProperties;
|
|
20
23
|
modalBackgroundStyle: CSSProperties;
|