react-native-input-select 0.8.0 → 0.12.0

package/README.md

@@ -1,12 +1,12 @@
-# react-native-select
+# react-native-input-select
 
-Dropdown package for react-native.
-Works perfectly on android and iOS.
+A customizable dropdown selection package for react-native for android and iOS with multiple select and search capabilities.
 
 ## Installation
 
 ```sh
-npm install react-native-select
+npm install react-native-input-select
+yarn add react-native-input-select
 ```
 
 ## Demo
@@ -18,16 +18,14 @@ npm install react-native-select
 ## Usage
 
 ```js
-import * as React from 'react';
-
-import { StyleSheet, View } from 'react-native';
-import DropdownSelect from 'react-native-select';
+import React from 'react';
+import Dropdown from 'react-native-input-select';
 
 export default function App() {
   const [country, setCountry] = React.useState<number | undefined>();
 
   return (
-      <DropdownSelect
+      <Dropdown
         label="Country"
         placeholder="Select an option..."
         options={[
@@ -60,18 +58,23 @@ export default function App() {
 | options                   | `Array`             | `[{ name: 'Albania', code: 'AL' }, { name: 'Åland Islands', code: 'AX' }]` |
 | optionLabel               | `string`            | `name`                                                                     |
 | optionValue               | `string`            | `code`                                                                     |
+| error                     | `string`            | `This is a required field`                                                 |
+| helperText                | `string`            | `Only countries in the east are listed`                                    |
 | selectedValue             | `string` or `Array` | `AL` or `[AL, AX]`                                                         |
 | onValueChange             | `function`          | `()=>{}`                                                                   |
 | isMultiple                | `Boolean`           | `true`                                                                     |
 | isSearchable              | `Boolean`           | `true`                                                                     |
 | labelStyle                | `Object`            | `{backgroundColor: 'red', borderRadius: 0, ...}`                           |
-| dropdownStyle             | `Object`            | `{backgroundColor: 'red', margin: 5, ...}`                                 |
-| dropdownContainerStyle    | `Object`            | `{backgroundColor: 'red', borderRadius: 0, ...}`                           |
+| dropdownStyle             | `Object`            | `{borderColor: 'blue', margin: 5, borderWidth:0 ...}`                      |
+| dropdownContainerStyle    | `Object`            | `{backgroundColor: 'red', width: '30%', ...}`                              |
 | searchInputStyle          | `Object`            | `{backgroundColor: 'red', borderRadius: 0, ...}`                           |
 | selectedItemStyle         | `Object`            | `{backgroundColor: 'red', color: 'yellow', ...}`                           |
 | multipleSelectedItemStyle | `Object`            | `{backgroundColor: 'red', color: 'yellow', ...}`                           |
 | modalBackgroundStyle      | `Object`            | `{backgroundColor: 'blue', ...}`                                           |
 | modalOptionsContainer     | `Object`            | `{padding: 5}`                                                             |
+| dropdownErrorStyle        | `Object`            | `{borderWidth: 2, borderStyle: 'solid'}`                           |
+| dropdownErrorTextStyle    | `Object`            | `{color: 'red', fontWeight:500}`                                           |
+| dropdownHelperTextStyle   | `Object`            | `{color: 'green', fontWeight:500}`                                         |
 | primaryColor              | `string`            | `blue`                                                                     |
 
 ## Contributing

package/lib/commonjs/Dropdown.js

@@ -33,7 +33,11 @@ const Dropdown = _ref => {
     dropdownContainerStyle,
     selectedItemStyle,
     multipleSelectedItemStyle,
-    primaryColor
+    dropdownErrorStyle,
+    dropdownErrorTextStyle,
+    dropdownHelperTextStyle,
+    primaryColor,
+    disabled
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
     style: [styles.dropdownInputContainer, dropdownContainerStyle]
@@ -45,10 +49,13 @@ const Dropdown = _ref => {
       let {
         pressed
       } = _ref2;
-      return [pressed && _input.inputStyles.inputFocusState && {
+      return [pressed && { ..._input.inputStyles.inputFocusState,
         borderColor: primaryColor
-      }, _input.inputStyles.input, dropdownStyle];
-    }
+      }, _input.inputStyles.input, error && error !== '' && !pressed && { ..._input.inputStyles.inputFocusErrorState,
+        ...dropdownErrorStyle
+      }, dropdownStyle];
+    },
+    disabled: disabled
   }, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
     horizontal: true,
     alwaysBounceHorizontal: true,
@@ -57,9 +64,10 @@ const Dropdown = _ref => {
     style: styles.selectedItemsContainer,
     onStartShouldSetResponder: () => true
   }, isMultiple ? getSelectedItemsLabel().map((item, i) => /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    onPress: () => handleToggleModal()
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    onPress: () => handleToggleModal(),
     key: `SelectedItems${i}`,
+    disabled: disabled
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: [styles.selectedItems, {
       backgroundColor: primaryColor
     }, multipleSelectedItemStyle]
@@ -72,9 +80,9 @@ const Dropdown = _ref => {
   }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
     source: require('../src/asset/arrow-down.png')
   }))), error && error !== '' && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.error
+    style: [styles.error, dropdownErrorTextStyle]
   }, error), helperText && helperText !== '' && !error && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.helper
+    style: [styles.helper, dropdownHelperTextStyle]
   }, helperText));
 };
 

package/lib/commonjs/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Dropdown.tsx"],"names":["Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","multipleSelectedItemStyle","primaryColor","styles","dropdownInputContainer","pressed","inputStyles","inputFocusState","borderColor","input","selectedItemsContainer","map","item","i","backgroundColor","blackText","length","iconStyle","require","helper","StyleSheet","create","marginBottom","color","colors","gray","typography","caption","inputFocusErrorState","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  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 &&\n            inputStyles.inputFocusState && { borderColor: primaryColor },\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                <TouchableOpacity onPress={() => handleToggleModal()}>\n                  <Text\n                    key={`SelectedItems${i}`}\n                    style={[\n                      styles.selectedItems,\n                      { backgroundColor: primaryColor },\n                      multipleSelectedItemStyle,\n                    ]}\n                  >\n                    {item}\n                  </Text>\n                </TouchableOpacity>\n              ))\n            ) : (\n              <Text style={[styles.blackText, selectedItemStyle]}>\n                {getSelectedItemsLabel()}\n              </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"]}
+{"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          error &&\n            error !== '' &&\n            !pressed && {\n              ...inputStyles.inputFocusErrorState,\n              ...dropdownErrorStyle,\n            },\n          dropdownStyle,\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              <Text style={[styles.blackText, selectedItemStyle]}>\n                {getSelectedItemsLabel()}\n              </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 !== '' && (\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

@@ -44,7 +44,8 @@ const DropdownSelect = _ref => {
     modalBackgroundStyle,
     modalOptionsContainer,
     searchInputStyle,
-    primaryColor
+    primaryColor,
+    disabled
   } = _ref;
   const [newOptions, setNewOptions] = (0, _react.useState)(options ? options : []);
   const [open, setOpen] = (0, _react.useState)(false);
@@ -106,10 +107,8 @@ const DropdownSelect = _ref => {
 
   const onSearch = value => {
     setSearchValue(value);
-    let searchTerm = value.toString().toLocaleLowerCase();
-    const searchResults = options.filter(item => {
-      return item[optionLabel !== null && optionLabel !== void 0 ? optionLabel : _constants.DEFAULT_OPTION_LABEL].toString().toLowerCase().includes(searchTerm) || item[optionValue !== null && optionValue !== void 0 ? optionValue : _constants.DEFAULT_OPTION_VALUE].toString(searchTerm).toLowerCase().includes();
-    });
+    let searchTerm = value.toString().toLocaleLowerCase().trim();
+    const searchResults = options.filter(item => 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());
     setNewOptions(searchResults);
   };
   /*===========================================
@@ -138,7 +137,8 @@ const DropdownSelect = _ref => {
     selectedItemStyle: selectedItemStyle,
     multipleSelectedItemStyle: multipleSelectedItemStyle,
     isMultiple: isMultiple,
-    primaryColor: primaryColor
+    primaryColor: primaryColor,
+    disabled: disabled
   }), /*#__PURE__*/_react.default.createElement(_Modal.default, {
     open: open,
     handleToggleModal: handleToggleModal,

package/lib/commonjs/index.js.map

@@ -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","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  multipleSelectedItemStyle,\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        multipleSelectedItemStyle={multipleSelectedItemStyle}\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            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"]}
+{"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":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;AAEO,MAAMA,cAAc,GAAG,QAsBT;AAAA,MAtBU;AAC7BC,IAAAA,WAD6B;AAE7BC,IAAAA,KAF6B;AAG7BC,IAAAA,KAH6B;AAI7BC,IAAAA,UAJ6B;AAK7BC,IAAAA,OAL6B;AAM7BC,IAAAA,WAN6B;AAO7BC,IAAAA,WAP6B;AAQ7BC,IAAAA,aAR6B;AAS7BC,IAAAA,aAT6B;AAU7BC,IAAAA,UAV6B;AAW7BC,IAAAA,YAX6B;AAY7BC,IAAAA,UAZ6B;AAa7BC,IAAAA,aAb6B;AAc7BC,IAAAA,sBAd6B;AAe7BC,IAAAA,iBAf6B;AAgB7BC,IAAAA,yBAhB6B;AAiB7BC,IAAAA,oBAjB6B;AAkB7BC,IAAAA,qBAlB6B;AAmB7BC,IAAAA,gBAnB6B;AAoB7BC,IAAAA,YApB6B;AAqB7BC,IAAAA;AArB6B,GAsBV;AACnB,QAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B,qBAASlB,OAAO,GAAGA,OAAH,GAAa,EAA7B,CAApC;AACA,QAAM,CAACmB,IAAD,EAAOC,OAAP,IAAkB,qBAAS,KAAT,CAAxB;AACA,QAAM,CAACC,YAAD,EAAeC,eAAf,IAAkC,qBAASlB,aAAT,CAAxC,CAHmB,CAG8C;;AACjE,QAAM,CAACmB,aAAD,EAAgBC,gBAAhB,IAAoC,qBACxCC,KAAK,CAACC,OAAN,CAActB,aAAd,IACIA,aADJ,GAEIA,aAAa,KAAK,EAAlB,IAAwBA,aAAa,KAAKuB,SAA1C,GACA,EADA,GAEA,CAACvB,aAAD,CALoC,CAA1C,CAJmB,CAUhB;;AACH,QAAM,CAACwB,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;AACA5B,MAAAA,aAAa,CAAC4B,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,QAAIjC,UAAJ,EAAgB;AACd,UAAIkC,cAA6B,GAAG,EAApC;AACAhB,MAAAA,aAAa,IACXA,aAAa,CAACiB,OAAd,CAAuBC,OAAD,IAAa;AAAA;;AACjC,YAAIC,iBAAiB,GACnB1C,OAAO,sBACPA,OAAO,CAAC2C,IAAR,CACGP,IAAD,IACEA,IAAI,CAAClC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgB0C,+BAAhB,CAAJ,KAA8CH,OAFlD,CADO,kDACP,cAGIxC,WAHJ,CADO,CADT;AAMAsC,QAAAA,cAAc,CAACF,IAAf,CAAoBK,iBAApB;AACD,OARD,CADF;AAUA,aAAOH,cAAP;AACD;;AAED,QAAIG,iBAAiB,GACnB1C,OAAO,IACPA,OAAO,CAAC2C,IAAR,CACGP,IAAD,IACEA,IAAI,CAAClC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgB0C,+BAAhB,CAAJ,KAA8CvB,YAFlD,CAFF;AAMA,WAAOqB,iBAAP,aAAOA,iBAAP,uBAAOA,iBAAiB,CAAGzC,WAAH,aAAGA,WAAH,cAAGA,WAAH,GAAkB4C,+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,GAAGnD,OAAO,CAACmC,MAAR,CACnBC,IAAD,IACEA,IAAI,CAACnC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgB4C,+BAAhB,CAAJ,CACGG,QADH,GAEGI,WAFH,GAGGlB,QAHH,CAGYa,UAHZ,KAIAX,IAAI,CAAClC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgB0C,+BAAhB,CAAJ,CACGI,QADH,CACYD,UADZ,EAEGK,WAFH,GAGGlB,QAHH,EANkB,CAAtB;AAYAhB,IAAAA,aAAa,CAACiC,aAAD,CAAb;AACD,GAjBD;AAmBA;AACF;AACA;;;AACE,QAAME,iBAAiB,GAAG,MAAM;AAC9BjC,IAAAA,OAAO,CAAC,CAACD,IAAF,CAAP;AACAU,IAAAA,cAAc,CAAC,EAAD,CAAd;AACAX,IAAAA,aAAa,CAAClB,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,EAAEwC,qBALzB;AAME,IAAA,YAAY,EAAEjB,YANhB;AAOE,IAAA,aAAa,EAAEE,aAPjB;AAQE,IAAA,iBAAiB,EAAE8B,iBARrB;AASE,IAAA,UAAU,EAAE9C,UATd;AAUE,IAAA,aAAa,EAAEC,aAVjB;AAWE,IAAA,sBAAsB,EAAEC,sBAX1B;AAYE,IAAA,iBAAiB,EAAEC,iBAZrB;AAaE,IAAA,yBAAyB,EAAEC,yBAb7B;AAcE,IAAA,UAAU,EAAEN,UAdd;AAeE,IAAA,YAAY,EAAEU,YAfhB;AAgBE,IAAA,QAAQ,EAAEC;AAhBZ,IADF,eAmBE,6BAAC,cAAD;AACE,IAAA,IAAI,EAAEG,IADR;AAEE,IAAA,iBAAiB,EAAEkC,iBAFrB;AAGE,IAAA,oBAAoB,EAAEzC,oBAHxB;AAIE,IAAA,qBAAqB,EAAEC,qBAJzB;AAKE,IAAA,cAAc,EAAE,MAAM,CAAE;AAL1B,KAOGP,YAAY,iBACX,6BAAC,YAAD;AACE,IAAA,KAAK,EAAEsB,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,EAAEhB,WAFf;AAGE,IAAA,WAAW,EAAEC,WAHf;AAIE,IAAA,UAAU,EAAEG,UAJd;AAKE,IAAA,aAAa,EAAEkB,aALjB;AAME,IAAA,YAAY,EAAEF,YANhB;AAOE,IAAA,wBAAwB,EAAEW,wBAP5B;AAQE,IAAA,qBAAqB,EAAEF,qBARzB;AASE,IAAA,YAAY,EAAEf;AAThB,IAfF,CAnBF,CADF;AAiDD,CAvKM;;;eAyKQpB,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  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"]}

package/lib/commonjs/styles/input.js

@@ -21,6 +21,11 @@ const inputStyles = _reactNative.StyleSheet.create({
     width: '100%',
     minHeight: 64
   },
+  inputFocusErrorState: {
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: _colors.colors.red
+  },
   inputFocusState: {
     borderWidth: 2,
     borderStyle: 'solid',

package/lib/commonjs/styles/input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["input.ts"],"names":["inputStyles","StyleSheet","create","input","paddingVertical","paddingHorizontal","backgroundColor","colors","lightGray","borderRadius","borderColor","dark","borderWidth","color","width","minHeight","inputFocusState","borderStyle","primary"],"mappings":";;;;;;;AAAA;;AACA;;AAEO,MAAMA,WAAgB,GAAGC,wBAAWC,MAAX,CAAkB;AAChDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,eAAe,EAAE,EADZ;AAELC,IAAAA,iBAAiB,EAAE,EAFd;AAGLC,IAAAA,eAAe,EAAEC,eAAOC,SAHnB;AAILC,IAAAA,YAAY,EAAE,CAJT;AAKLC,IAAAA,WAAW,EAAEH,eAAOI,IALf;AAMLC,IAAAA,WAAW,EAAE,CANR;AAOLC,IAAAA,KAAK,EAAEN,eAAOI,IAPT;AAQLG,IAAAA,KAAK,EAAE,MARF;AASLC,IAAAA,SAAS,EAAE;AATN,GADyC;AAYhDC,EAAAA,eAAe,EAAE;AACfJ,IAAAA,WAAW,EAAE,CADE;AAEfK,IAAAA,WAAW,EAAE,OAFE;AAGfP,IAAAA,WAAW,EAAEH,eAAOW;AAHL;AAZ+B,CAAlB,CAAzB","sourcesContent":["import { StyleSheet } from 'react-native';\nimport { colors } from './colors';\n\nexport const inputStyles: any = StyleSheet.create({\n  input: {\n    paddingVertical: 18,\n    paddingHorizontal: 23,\n    backgroundColor: colors.lightGray,\n    borderRadius: 8,\n    borderColor: colors.dark,\n    borderWidth: 1,\n    color: colors.dark,\n    width: '100%',\n    minHeight: 64,\n  },\n  inputFocusState: {\n    borderWidth: 2,\n    borderStyle: 'solid',\n    borderColor: colors.primary,\n  },\n});\n"]}
+{"version":3,"sources":["input.ts"],"names":["inputStyles","StyleSheet","create","input","paddingVertical","paddingHorizontal","backgroundColor","colors","lightGray","borderRadius","borderColor","dark","borderWidth","color","width","minHeight","inputFocusErrorState","borderStyle","red","inputFocusState","primary"],"mappings":";;;;;;;AAAA;;AACA;;AAEO,MAAMA,WAAgB,GAAGC,wBAAWC,MAAX,CAAkB;AAChDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,eAAe,EAAE,EADZ;AAELC,IAAAA,iBAAiB,EAAE,EAFd;AAGLC,IAAAA,eAAe,EAAEC,eAAOC,SAHnB;AAILC,IAAAA,YAAY,EAAE,CAJT;AAKLC,IAAAA,WAAW,EAAEH,eAAOI,IALf;AAMLC,IAAAA,WAAW,EAAE,CANR;AAOLC,IAAAA,KAAK,EAAEN,eAAOI,IAPT;AAQLG,IAAAA,KAAK,EAAE,MARF;AASLC,IAAAA,SAAS,EAAE;AATN,GADyC;AAYhDC,EAAAA,oBAAoB,EAAE;AACpBJ,IAAAA,WAAW,EAAE,CADO;AAEpBK,IAAAA,WAAW,EAAE,OAFO;AAGpBP,IAAAA,WAAW,EAAEH,eAAOW;AAHA,GAZ0B;AAiBhDC,EAAAA,eAAe,EAAE;AACfP,IAAAA,WAAW,EAAE,CADE;AAEfK,IAAAA,WAAW,EAAE,OAFE;AAGfP,IAAAA,WAAW,EAAEH,eAAOa;AAHL;AAjB+B,CAAlB,CAAzB","sourcesContent":["import { StyleSheet } from 'react-native';\nimport { colors } from './colors';\n\nexport const inputStyles: any = StyleSheet.create({\n  input: {\n    paddingVertical: 18,\n    paddingHorizontal: 23,\n    backgroundColor: colors.lightGray,\n    borderRadius: 8,\n    borderColor: colors.dark,\n    borderWidth: 1,\n    color: colors.dark,\n    width: '100%',\n    minHeight: 64,\n  },\n  inputFocusErrorState: {\n    borderWidth: 2,\n    borderStyle: 'solid',\n    borderColor: colors.red,\n  },\n  inputFocusState: {\n    borderWidth: 2,\n    borderStyle: 'solid',\n    borderColor: colors.primary,\n  },\n});\n"]}

package/lib/commonjs/types/index.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=index.types.js.map

package/lib/commonjs/types/index.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/lib/module/Dropdown.js

@@ -20,7 +20,11 @@ const Dropdown = _ref => {
     dropdownContainerStyle,
     selectedItemStyle,
     multipleSelectedItemStyle,
-    primaryColor
+    dropdownErrorStyle,
+    dropdownErrorTextStyle,
+    dropdownHelperTextStyle,
+    primaryColor,
+    disabled
   } = _ref;
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.dropdownInputContainer, dropdownContainerStyle]
@@ -32,10 +36,13 @@ const Dropdown = _ref => {
       let {
         pressed
       } = _ref2;
-      return [pressed && inputStyles.inputFocusState && {
+      return [pressed && { ...inputStyles.inputFocusState,
         borderColor: primaryColor
-      }, inputStyles.input, dropdownStyle];
-    }
+      }, inputStyles.input, error && error !== '' && !pressed && { ...inputStyles.inputFocusErrorState,
+        ...dropdownErrorStyle
+      }, dropdownStyle];
+    },
+    disabled: disabled
   }, /*#__PURE__*/React.createElement(ScrollView, {
     horizontal: true,
     alwaysBounceHorizontal: true,
@@ -44,9 +51,10 @@ const Dropdown = _ref => {
     style: styles.selectedItemsContainer,
     onStartShouldSetResponder: () => true
   }, isMultiple ? getSelectedItemsLabel().map((item, i) => /*#__PURE__*/React.createElement(TouchableOpacity, {
-    onPress: () => handleToggleModal()
-  }, /*#__PURE__*/React.createElement(Text, {
+    onPress: () => handleToggleModal(),
     key: `SelectedItems${i}`,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Text, {
     style: [styles.selectedItems, {
       backgroundColor: primaryColor
     }, multipleSelectedItemStyle]
@@ -59,9 +67,9 @@ const Dropdown = _ref => {
   }, /*#__PURE__*/React.createElement(Image, {
     source: require('../src/asset/arrow-down.png')
   }))), error && error !== '' && /*#__PURE__*/React.createElement(Text, {
-    style: styles.error
+    style: [styles.error, dropdownErrorTextStyle]
   }, error), helperText && helperText !== '' && !error && /*#__PURE__*/React.createElement(Text, {
-    style: styles.helper
+    style: [styles.helper, dropdownHelperTextStyle]
   }, helperText));
 };
 

package/lib/module/Dropdown.js.map

@@ -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","primaryColor","styles","dropdownInputContainer","pressed","inputFocusState","borderColor","input","selectedItemsContainer","map","item","i","backgroundColor","blackText","length","iconStyle","require","helper","create","marginBottom","color","gray","caption","inputFocusErrorState","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  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 &&\n            inputStyles.inputFocusState && { borderColor: primaryColor },\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                <TouchableOpacity onPress={() => handleToggleModal()}>\n                  <Text\n                    key={`SelectedItems${i}`}\n                    style={[\n                      styles.selectedItems,\n                      { backgroundColor: primaryColor },\n                      multipleSelectedItemStyle,\n                    ]}\n                  >\n                    {item}\n                  </Text>\n                </TouchableOpacity>\n              ))\n            ) : (\n              <Text style={[styles.blackText, selectedItemStyle]}>\n                {getSelectedItemsLabel()}\n              </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"]}
+{"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          error &&\n            error !== '' &&\n            !pressed && {\n              ...inputStyles.inputFocusErrorState,\n              ...dropdownErrorStyle,\n            },\n          dropdownStyle,\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              <Text style={[styles.blackText, selectedItemStyle]}>\n                {getSelectedItemsLabel()}\n              </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 !== '' && (\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

@@ -25,7 +25,8 @@ export const DropdownSelect = _ref => {
     modalBackgroundStyle,
     modalOptionsContainer,
     searchInputStyle,
-    primaryColor
+    primaryColor,
+    disabled
   } = _ref;
   const [newOptions, setNewOptions] = useState(options ? options : []);
   const [open, setOpen] = useState(false);
@@ -87,10 +88,8 @@ export const DropdownSelect = _ref => {
 
   const onSearch = value => {
     setSearchValue(value);
-    let searchTerm = value.toString().toLocaleLowerCase();
-    const searchResults = options.filter(item => {
-      return 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();
-    });
+    let searchTerm = value.toString().toLocaleLowerCase().trim();
+    const searchResults = options.filter(item => 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());
     setNewOptions(searchResults);
   };
   /*===========================================
@@ -119,7 +118,8 @@ export const DropdownSelect = _ref => {
     selectedItemStyle: selectedItemStyle,
     multipleSelectedItemStyle: multipleSelectedItemStyle,
     isMultiple: isMultiple,
-    primaryColor: primaryColor
+    primaryColor: primaryColor,
+    disabled: disabled
   }), /*#__PURE__*/React.createElement(CustomModal, {
     open: open,
     handleToggleModal: handleToggleModal,

package/lib/module/index.js.map

@@ -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","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":"AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,WAAP,MAAwB,SAAxB;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AACA,SAASC,oBAAT,EAA+BC,oBAA/B,QAA2D,aAA3D;AACA,SAASC,KAAT,QAAsB,SAAtB;AAEA,OAAO,MAAMC,cAAc,GAAG,QAqBnB;AAAA,MArBoB;AAC7BC,IAAAA,WAD6B;AAE7BC,IAAAA,KAF6B;AAG7BC,IAAAA,KAH6B;AAI7BC,IAAAA,UAJ6B;AAK7BC,IAAAA,OAL6B;AAM7BC,IAAAA,WAN6B;AAO7BC,IAAAA,WAP6B;AAQ7BC,IAAAA,aAR6B;AAS7BC,IAAAA,aAT6B;AAU7BC,IAAAA,UAV6B;AAW7BC,IAAAA,YAX6B;AAY7BC,IAAAA,UAZ6B;AAa7BC,IAAAA,aAb6B;AAc7BC,IAAAA,sBAd6B;AAe7BC,IAAAA,iBAf6B;AAgB7BC,IAAAA,yBAhB6B;AAiB7BC,IAAAA,oBAjB6B;AAkB7BC,IAAAA,qBAlB6B;AAmB7BC,IAAAA,gBAnB6B;AAoB7BC,IAAAA;AApB6B,GAqBpB;AACT,QAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B7B,QAAQ,CAACY,OAAO,GAAGA,OAAH,GAAa,EAArB,CAA5C;AACA,QAAM,CAACkB,IAAD,EAAOC,OAAP,IAAkB/B,QAAQ,CAAC,KAAD,CAAhC;AACA,QAAM,CAACgC,YAAD,EAAeC,eAAf,IAAkCjC,QAAQ,CAACgB,aAAD,CAAhD,CAHS,CAGwD;;AACjE,QAAM,CAACkB,aAAD,EAAgBC,gBAAhB,IAAoCnC,QAAQ,CAChDoC,KAAK,CAACC,OAAN,CAAcrB,aAAd,IACIA,aADJ,GAEIA,aAAa,KAAK,EAAlB,IAAwBA,aAAa,KAAKsB,SAA1C,GACA,EADA,GAEA,CAACtB,aAAD,CAL4C,CAAlD,CAJS,CAUN;;AACH,QAAM,CAACuB,WAAD,EAAcC,cAAd,IAAgCxC,QAAQ,CAAC,EAAD,CAA9C;AAEA;AACF;AACA;;AACE,QAAMyC,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;AACA3B,MAAAA,aAAa,CAAC2B,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,QAAIhC,UAAJ,EAAgB;AACd,UAAIiC,cAA6B,GAAG,EAApC;AACAhB,MAAAA,aAAa,IACXA,aAAa,CAACiB,OAAd,CAAuBC,OAAD,IAAa;AAAA;;AACjC,YAAIC,iBAAiB,GACnBzC,OAAO,sBACPA,OAAO,CAAC0C,IAAR,CACGP,IAAD,IACEA,IAAI,CAACjC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgBT,oBAAhB,CAAJ,KAA8C+C,OAFlD,CADO,kDACP,cAGIvC,WAHJ,CADO,CADT;AAMAqC,QAAAA,cAAc,CAACF,IAAf,CAAoBK,iBAApB;AACD,OARD,CADF;AAUA,aAAOH,cAAP;AACD;;AAED,QAAIG,iBAAiB,GACnBzC,OAAO,IACPA,OAAO,CAAC0C,IAAR,CACGP,IAAD,IACEA,IAAI,CAACjC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgBT,oBAAhB,CAAJ,KAA8C2B,YAFlD,CAFF;AAMA,WAAOqB,iBAAP,aAAOA,iBAAP,uBAAOA,iBAAiB,CAAGxC,WAAH,aAAGA,WAAH,cAAGA,WAAH,GAAkBT,oBAAlB,CAAxB;AACD,GAvBD;AAyBA;AACF;AACA;;;AACE,QAAMmD,QAAQ,GAAIb,KAAD,IAAmB;AAClCF,IAAAA,cAAc,CAACE,KAAD,CAAd;AACA,QAAIc,UAAU,GAAGd,KAAK,CAACe,QAAN,GAAiBC,iBAAjB,EAAjB;AACA,UAAMC,aAAa,GAAG/C,OAAO,CAACkC,MAAR,CAAgBC,IAAD,IAAe;AAClD,aACEA,IAAI,CAAClC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgBT,oBAAhB,CAAJ,CACGqD,QADH,GAEGG,WAFH,GAGGf,QAHH,CAGYW,UAHZ,KAIAT,IAAI,CAACjC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgBT,oBAAhB,CAAJ,CACGoD,QADH,CACYD,UADZ,EAEGI,WAFH,GAGGf,QAHH,EALF;AAUD,KAXqB,CAAtB;AAaAhB,IAAAA,aAAa,CAAC8B,aAAD,CAAb;AACD,GAjBD;AAmBA;AACF;AACA;;;AACE,QAAME,iBAAiB,GAAG,MAAM;AAC9B9B,IAAAA,OAAO,CAAC,CAACD,IAAF,CAAP;AACAU,IAAAA,cAAc,CAAC,EAAD,CAAd;AACAX,IAAAA,aAAa,CAACjB,OAAD,CAAb;AACD,GAJD;;AAMA,sBACE,uDACE,oBAAC,QAAD;AACE,IAAA,KAAK,EAAEH,KADT;AAEE,IAAA,WAAW,EAAED,WAFf;AAGE,IAAA,UAAU,EAAEG,UAHd;AAIE,IAAA,KAAK,EAAED,KAJT;AAKE,IAAA,qBAAqB,EAAEuC,qBALzB;AAME,IAAA,YAAY,EAAEjB,YANhB;AAOE,IAAA,aAAa,EAAEE,aAPjB;AAQE,IAAA,iBAAiB,EAAE2B,iBARrB;AASE,IAAA,UAAU,EAAE1C,UATd;AAUE,IAAA,aAAa,EAAEC,aAVjB;AAWE,IAAA,sBAAsB,EAAEC,sBAX1B;AAYE,IAAA,iBAAiB,EAAEC,iBAZrB;AAaE,IAAA,yBAAyB,EAAEC,yBAb7B;AAcE,IAAA,UAAU,EAAEN,UAdd;AAeE,IAAA,YAAY,EAAEU;AAfhB,IADF,eAkBE,oBAAC,WAAD;AACE,IAAA,IAAI,EAAEG,IADR;AAEE,IAAA,iBAAiB,EAAE+B,iBAFrB;AAGE,IAAA,oBAAoB,EAAErC,oBAHxB;AAIE,IAAA,qBAAqB,EAAEC,qBAJzB;AAKE,IAAA,cAAc,EAAE,MAAM,CAAE;AAL1B,KAOGP,YAAY,iBACX,oBAAC,KAAD;AACE,IAAA,KAAK,EAAEqB,WADT;AAEE,IAAA,YAAY,EAAGuB,IAAD,IAAkBP,QAAQ,CAACO,IAAD,CAF1C;AAGE,IAAA,KAAK,EAAEpC,gBAHT;AAIE,IAAA,YAAY,EAAEC;AAJhB,IARJ,eAeE,oBAAC,YAAD;AACE,IAAA,OAAO,EAAEC,UADX;AAEE,IAAA,WAAW,EAAEf,WAFf;AAGE,IAAA,WAAW,EAAEC,WAHf;AAIE,IAAA,UAAU,EAAEG,UAJd;AAKE,IAAA,aAAa,EAAEiB,aALjB;AAME,IAAA,YAAY,EAAEF,YANhB;AAOE,IAAA,wBAAwB,EAAEW,wBAP5B;AAQE,IAAA,qBAAqB,EAAEF,qBARzB;AASE,IAAA,YAAY,EAAEd;AAThB,IAfF,CAlBF,CADF;AAgDD,CArKM;AAuKP,eAAepB,cAAf","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  multipleSelectedItemStyle,\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        multipleSelectedItemStyle={multipleSelectedItemStyle}\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            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"]}
+{"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"]}

package/lib/module/styles/input.js

@@ -12,6 +12,11 @@ export const inputStyles = StyleSheet.create({
     width: '100%',
     minHeight: 64
   },
+  inputFocusErrorState: {
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: colors.red
+  },
   inputFocusState: {
     borderWidth: 2,
     borderStyle: 'solid',

package/lib/module/styles/input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["input.ts"],"names":["StyleSheet","colors","inputStyles","create","input","paddingVertical","paddingHorizontal","backgroundColor","lightGray","borderRadius","borderColor","dark","borderWidth","color","width","minHeight","inputFocusState","borderStyle","primary"],"mappings":"AAAA,SAASA,UAAT,QAA2B,cAA3B;AACA,SAASC,MAAT,QAAuB,UAAvB;AAEA,OAAO,MAAMC,WAAgB,GAAGF,UAAU,CAACG,MAAX,CAAkB;AAChDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,eAAe,EAAE,EADZ;AAELC,IAAAA,iBAAiB,EAAE,EAFd;AAGLC,IAAAA,eAAe,EAAEN,MAAM,CAACO,SAHnB;AAILC,IAAAA,YAAY,EAAE,CAJT;AAKLC,IAAAA,WAAW,EAAET,MAAM,CAACU,IALf;AAMLC,IAAAA,WAAW,EAAE,CANR;AAOLC,IAAAA,KAAK,EAAEZ,MAAM,CAACU,IAPT;AAQLG,IAAAA,KAAK,EAAE,MARF;AASLC,IAAAA,SAAS,EAAE;AATN,GADyC;AAYhDC,EAAAA,eAAe,EAAE;AACfJ,IAAAA,WAAW,EAAE,CADE;AAEfK,IAAAA,WAAW,EAAE,OAFE;AAGfP,IAAAA,WAAW,EAAET,MAAM,CAACiB;AAHL;AAZ+B,CAAlB,CAAzB","sourcesContent":["import { StyleSheet } from 'react-native';\nimport { colors } from './colors';\n\nexport const inputStyles: any = StyleSheet.create({\n  input: {\n    paddingVertical: 18,\n    paddingHorizontal: 23,\n    backgroundColor: colors.lightGray,\n    borderRadius: 8,\n    borderColor: colors.dark,\n    borderWidth: 1,\n    color: colors.dark,\n    width: '100%',\n    minHeight: 64,\n  },\n  inputFocusState: {\n    borderWidth: 2,\n    borderStyle: 'solid',\n    borderColor: colors.primary,\n  },\n});\n"]}
+{"version":3,"sources":["input.ts"],"names":["StyleSheet","colors","inputStyles","create","input","paddingVertical","paddingHorizontal","backgroundColor","lightGray","borderRadius","borderColor","dark","borderWidth","color","width","minHeight","inputFocusErrorState","borderStyle","red","inputFocusState","primary"],"mappings":"AAAA,SAASA,UAAT,QAA2B,cAA3B;AACA,SAASC,MAAT,QAAuB,UAAvB;AAEA,OAAO,MAAMC,WAAgB,GAAGF,UAAU,CAACG,MAAX,CAAkB;AAChDC,EAAAA,KAAK,EAAE;AACLC,IAAAA,eAAe,EAAE,EADZ;AAELC,IAAAA,iBAAiB,EAAE,EAFd;AAGLC,IAAAA,eAAe,EAAEN,MAAM,CAACO,SAHnB;AAILC,IAAAA,YAAY,EAAE,CAJT;AAKLC,IAAAA,WAAW,EAAET,MAAM,CAACU,IALf;AAMLC,IAAAA,WAAW,EAAE,CANR;AAOLC,IAAAA,KAAK,EAAEZ,MAAM,CAACU,IAPT;AAQLG,IAAAA,KAAK,EAAE,MARF;AASLC,IAAAA,SAAS,EAAE;AATN,GADyC;AAYhDC,EAAAA,oBAAoB,EAAE;AACpBJ,IAAAA,WAAW,EAAE,CADO;AAEpBK,IAAAA,WAAW,EAAE,OAFO;AAGpBP,IAAAA,WAAW,EAAET,MAAM,CAACiB;AAHA,GAZ0B;AAiBhDC,EAAAA,eAAe,EAAE;AACfP,IAAAA,WAAW,EAAE,CADE;AAEfK,IAAAA,WAAW,EAAE,OAFE;AAGfP,IAAAA,WAAW,EAAET,MAAM,CAACmB;AAHL;AAjB+B,CAAlB,CAAzB","sourcesContent":["import { StyleSheet } from 'react-native';\nimport { colors } from './colors';\n\nexport const inputStyles: any = StyleSheet.create({\n  input: {\n    paddingVertical: 18,\n    paddingHorizontal: 23,\n    backgroundColor: colors.lightGray,\n    borderRadius: 8,\n    borderColor: colors.dark,\n    borderWidth: 1,\n    color: colors.dark,\n    width: '100%',\n    minHeight: 64,\n  },\n  inputFocusErrorState: {\n    borderWidth: 2,\n    borderStyle: 'solid',\n    borderColor: colors.red,\n  },\n  inputFocusState: {\n    borderWidth: 2,\n    borderStyle: 'solid',\n    borderColor: colors.primary,\n  },\n});\n"]}

package/lib/module/types/index.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.types.js.map

package/lib/module/types/index.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/lib/typescript/Dropdown.d.ts

@@ -1,2 +1,2 @@
-declare const Dropdown: ({ label, placeholder, helperText, error, getSelectedItemsLabel, handleToggleModal, isMultiple, selectedItem, selectedItems, labelStyle, dropdownStyle, dropdownContainerStyle, selectedItemStyle, multipleSelectedItemStyle, primaryColor, }: any) => JSX.Element;
+declare const Dropdown: ({ label, placeholder, helperText, error, getSelectedItemsLabel, handleToggleModal, isMultiple, selectedItem, selectedItems, labelStyle, dropdownStyle, dropdownContainerStyle, selectedItemStyle, multipleSelectedItemStyle, dropdownErrorStyle, dropdownErrorTextStyle, dropdownHelperTextStyle, primaryColor, disabled, }: any) => JSX.Element;
 export default Dropdown;

package/lib/typescript/index.d.ts

@@ -1,2 +1,3 @@
-export declare const DropdownSelect: ({ placeholder, label, error, helperText, options, optionLabel, optionValue, onValueChange, selectedValue, isMultiple, isSearchable, labelStyle, dropdownStyle, dropdownContainerStyle, selectedItemStyle, multipleSelectedItemStyle, modalBackgroundStyle, modalOptionsContainer, searchInputStyle, primaryColor, }: any) => JSX.Element;
+import type { DropdownProps } from './types/index.types';
+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;
 export default DropdownSelect;

package/lib/typescript/types/index.types.d.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties } from 'react';
+export declare type DropdownProps = {
+    placeholder: string;
+    label: string;
+    error: string;
+    helperText: string;
+    options: any[];
+    optionLabel: string;
+    optionValue: string;
+    onValueChange: Function;
+    selectedValue: string | any[] | null;
+    isMultiple: boolean;
+    isSearchable: boolean;
+    labelStyle: string;
+    dropdownStyle: CSSProperties;
+    dropdownContainerStyle: CSSProperties;
+    selectedItemStyle: CSSProperties;
+    multipleSelectedItemStyle: CSSProperties;
+    modalBackgroundStyle: CSSProperties;
+    modalOptionsContainer: CSSProperties;
+    searchInputStyle: CSSProperties;
+    primaryColor: string;
+    disabled: boolean;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-input-select",
-  "version": "0.8.0",
-  "description": "Dropdown package for react-native",
+  "version": "0.12.0",
+  "description": "A customizable dropdown selection package for react-native for android and iOS with multiple select and search capabilities.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",

package/src/Dropdown.tsx

@@ -27,7 +27,11 @@ const Dropdown = ({
   dropdownContainerStyle,
   selectedItemStyle,
   multipleSelectedItemStyle,
+  dropdownErrorStyle,
+  dropdownErrorTextStyle,
+  dropdownHelperTextStyle,
   primaryColor,
+  disabled,
 }: any) => {
   return (
     <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>
@@ -37,11 +41,20 @@ const Dropdown = ({
       <Pressable
         onPress={() => handleToggleModal()}
         style={({ pressed }) => [
-          pressed &&
-            inputStyles.inputFocusState && { borderColor: primaryColor },
+          pressed && {
+            ...inputStyles.inputFocusState,
+            borderColor: primaryColor,
+          },
           inputStyles.input,
+          error &&
+            error !== '' &&
+            !pressed && {
+              ...inputStyles.inputFocusErrorState,
+              ...dropdownErrorStyle,
+            },
           dropdownStyle,
         ]}
+        disabled={disabled}
       >
         <ScrollView
           horizontal
@@ -54,9 +67,12 @@ const Dropdown = ({
           >
             {isMultiple ? (
               getSelectedItemsLabel().map((item: any, i: Number) => (
-                <TouchableOpacity onPress={() => handleToggleModal()}>
+                <TouchableOpacity
+                  onPress={() => handleToggleModal()}
+                  key={`SelectedItems${i}`}
+                  disabled={disabled}
+                >
                   <Text
-                    key={`SelectedItems${i}`}
                     style={[
                       styles.selectedItems,
                       { backgroundColor: primaryColor },
@@ -85,10 +101,14 @@ const Dropdown = ({
         </View>
       </Pressable>
 
-      {error && error !== '' && <Text style={styles.error}>{error}</Text>}
+      {error && error !== '' && (
+        <Text style={[styles.error, dropdownErrorTextStyle]}>{error}</Text>
+      )}
 
       {helperText && helperText !== '' && !error && (
-        <Text style={styles.helper}>{helperText}</Text>
+        <Text style={[styles.helper, dropdownHelperTextStyle]}>
+          {helperText}
+        </Text>
       )}
     </View>
   );

package/src/index.tsx

@@ -3,6 +3,7 @@ import Dropdown from './Dropdown';
 import CustomModal from './Modal';
 import DropdownList from './DropdownList';
 import { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';
+import type { DropdownProps } from './types/index.types';
 import { Input } from './Input';
 
 export const DropdownSelect = ({
@@ -26,7 +27,8 @@ export const DropdownSelect = ({
   modalOptionsContainer,
   searchInputStyle,
   primaryColor,
-}: any) => {
+  disabled,
+}: DropdownProps) => {
   const [newOptions, setNewOptions] = useState(options ? options : []);
   const [open, setOpen] = useState(false);
   const [selectedItem, setSelectedItem] = useState(selectedValue); //for single selection
@@ -74,7 +76,7 @@ export const DropdownSelect = ({
           let selectedItemLabel =
             options &&
             options.find(
-              (item: string) =>
+              (item: any) =>
                 item[optionValue ?? DEFAULT_OPTION_VALUE] === element
             )?.[optionLabel];
           selectedLabels.push(selectedItemLabel);
@@ -85,7 +87,7 @@ export const DropdownSelect = ({
     let selectedItemLabel =
       options &&
       options.find(
-        (item: string) =>
+        (item: any) =>
           item[optionValue ?? DEFAULT_OPTION_VALUE] === selectedItem
       );
     return selectedItemLabel?.[optionLabel ?? DEFAULT_OPTION_LABEL];
@@ -96,9 +98,10 @@ export const DropdownSelect = ({
    *==========================================*/
   const onSearch = (value: string) => {
     setSearchValue(value);
-    let searchTerm = value.toString().toLocaleLowerCase();
-    const searchResults = options.filter((item: any) => {
-      return (
+
+    let searchTerm = value.toString().toLocaleLowerCase().trim();
+    const searchResults = options.filter(
+      (item: any) =>
         item[optionLabel ?? DEFAULT_OPTION_LABEL]
           .toString()
           .toLowerCase()
@@ -107,8 +110,7 @@ export const DropdownSelect = ({
           .toString(searchTerm)
           .toLowerCase()
           .includes()
-      );
-    });
+    );
 
     setNewOptions(searchResults);
   };
@@ -140,6 +142,7 @@ export const DropdownSelect = ({
         multipleSelectedItemStyle={multipleSelectedItemStyle}
         isMultiple={isMultiple}
         primaryColor={primaryColor}
+        disabled={disabled}
       />
       <CustomModal
         open={open}

package/src/styles/input.ts

@@ -13,6 +13,11 @@ export const inputStyles: any = StyleSheet.create({
     width: '100%',
     minHeight: 64,
   },
+  inputFocusErrorState: {
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: colors.red,
+  },
   inputFocusState: {
     borderWidth: 2,
     borderStyle: 'solid',

package/src/types/index.types.ts

@@ -0,0 +1,25 @@
+import type { CSSProperties } from 'react';
+
+export type DropdownProps = {
+  placeholder: string;
+  label: string;
+  error: string;
+  helperText: string;
+  options: any[];
+  optionLabel: string;
+  optionValue: string;
+  onValueChange: Function;
+  selectedValue: string | any[] | null;
+  isMultiple: boolean;
+  isSearchable: boolean;
+  labelStyle: string;
+  dropdownStyle: CSSProperties;
+  dropdownContainerStyle: CSSProperties;
+  selectedItemStyle: CSSProperties;
+  multipleSelectedItemStyle: CSSProperties;
+  modalBackgroundStyle: CSSProperties;
+  modalOptionsContainer: CSSProperties;
+  searchInputStyle: CSSProperties;
+  primaryColor: string;
+  disabled: boolean;
+};