react-native-input-select 0.17.0 → 0.19.0

package/README.md

@@ -1,6 +1,6 @@
 # react-native-input-select
 
-A customizable dropdown selection package for react-native for android and iOS with multiple select and search capabilities.
+A fully customizable dropdown selection package for react-native for android and iOS with multiple select and search capabilities.
 
 ## Installation
 

package/lib/commonjs/Dropdown.js

@@ -9,9 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
-var _colors = require("./styles/colors");
+var _SelectedItemsView = _interopRequireDefault(require("./SelectedItemsView"));
 
-var _input = require("./styles/input");
+var _colors = require("./styles/colors");
 
 var _typography = require("./styles/typography");
 
@@ -43,47 +43,21 @@ const Dropdown = _ref => {
     style: [styles.dropdownInputContainer, dropdownContainerStyle]
   }, label && label !== '' && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: [styles.label, labelStyle]
-  }, label), /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
-    onPress: () => handleToggleModal(),
-    style: _ref2 => {
-      let {
-        pressed
-      } = _ref2;
-      return [pressed && { ..._input.inputStyles.inputFocusState,
-        borderColor: primaryColor
-      }, _input.inputStyles.input, dropdownStyle, error && //order matters
-      error !== '' && !pressed && { ..._input.inputStyles.inputFocusErrorState,
-        ...dropdownErrorStyle
-      }];
-    },
-    disabled: disabled
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
-    horizontal: true,
-    alwaysBounceHorizontal: true,
-    showsHorizontalScrollIndicator: false
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.selectedItemsContainer,
-    onStartShouldSetResponder: () => true
-  }, isMultiple ? getSelectedItemsLabel().map((item, i) => /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    onPress: () => handleToggleModal(),
-    key: `SelectedItems${i}`,
-    disabled: disabled
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: [styles.selectedItems, {
-      backgroundColor: primaryColor
-    }, multipleSelectedItemStyle]
-  }, item))) : /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
-    onPress: () => handleToggleModal(),
+  }, label), /*#__PURE__*/_react.default.createElement(_SelectedItemsView.default, {
+    placeholder: placeholder,
+    error: error,
+    getSelectedItemsLabel: getSelectedItemsLabel,
+    handleToggleModal: handleToggleModal,
+    isMultiple: isMultiple,
+    selectedItem: selectedItem,
+    selectedItems: selectedItems,
+    dropdownStyle: dropdownStyle,
+    selectedItemStyle: selectedItemStyle,
+    multipleSelectedItemStyle: multipleSelectedItemStyle,
+    dropdownErrorStyle: dropdownErrorStyle,
+    primaryColor: primaryColor,
     disabled: disabled
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: [styles.blackText, selectedItemStyle]
-  }, getSelectedItemsLabel()))), !selectedItem && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0 && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
-    style: styles.blackText
-  }, placeholder !== null && placeholder !== void 0 ? placeholder : 'Select an option')), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
-    style: styles.iconStyle
-  }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
-    source: require('../src/asset/arrow-down.png')
-  }))), error && error !== '' && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+  }), error && error !== '' && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: [styles.error, dropdownErrorTextStyle]
   }, error), helperText && helperText !== '' && !error && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
     style: [styles.helper, dropdownHelperTextStyle]
@@ -101,11 +75,6 @@ const styles = _reactNative.StyleSheet.create({
     borderStyle: 'solid',
     borderColor: _colors.colors.red
   },
-  iconStyle: {
-    position: 'absolute',
-    right: 25,
-    top: 25
-  },
   error: {
     color: _colors.colors.red,
     marginTop: 8,
@@ -120,18 +89,6 @@ const styles = _reactNative.StyleSheet.create({
     marginBottom: 23,
     width: '100%'
   },
-  selectedItemsContainer: {
-    flexDirection: 'row',
-    flexWrap: 'nowrap'
-  },
-  selectedItems: {
-    color: _colors.colors.white,
-    paddingHorizontal: 10,
-    paddingVertical: 5,
-    borderRadius: 10,
-    backgroundColor: _colors.colors.primary,
-    marginRight: 10
-  },
   blackText: {
     color: _colors.colors.black
   }

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","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"]}
+{"version":3,"sources":["Dropdown.tsx"],"names":["Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","multipleSelectedItemStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","primaryColor","disabled","styles","dropdownInputContainer","helper","StyleSheet","create","marginBottom","color","colors","gray","typography","caption","inputFocusErrorState","borderWidth","borderStyle","borderColor","red","marginTop","primary","width","blackText","black"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport SelectedItemsView from './SelectedItemsView';\nimport { colors } from './styles/colors';\nimport { typography } from './styles/typography';\n\nconst Dropdown = ({\n  label,\n  placeholder,\n  helperText,\n  error,\n  getSelectedItemsLabel,\n  handleToggleModal,\n  isMultiple,\n  selectedItem,\n  selectedItems,\n  labelStyle,\n  dropdownStyle,\n  dropdownContainerStyle,\n  selectedItemStyle,\n  multipleSelectedItemStyle,\n  dropdownErrorStyle,\n  dropdownErrorTextStyle,\n  dropdownHelperTextStyle,\n  primaryColor,\n  disabled,\n}: any) => {\n  return (\n    <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>\n      {label && label !== '' && (\n        <Text style={[styles.label, labelStyle]}>{label}</Text>\n      )}\n      <SelectedItemsView\n        placeholder={placeholder}\n        error={error}\n        getSelectedItemsLabel={getSelectedItemsLabel}\n        handleToggleModal={handleToggleModal}\n        isMultiple={isMultiple}\n        selectedItem={selectedItem}\n        selectedItems={selectedItems}\n        dropdownStyle={dropdownStyle}\n        selectedItemStyle={selectedItemStyle}\n        multipleSelectedItemStyle={multipleSelectedItemStyle}\n        dropdownErrorStyle={dropdownErrorStyle}\n        primaryColor={primaryColor}\n        disabled={disabled}\n      />\n\n      {error && error !== '' && (\n        <Text style={[styles.error, dropdownErrorTextStyle]}>{error}</Text>\n      )}\n\n      {helperText && helperText !== '' && !error && (\n        <Text style={[styles.helper, dropdownHelperTextStyle]}>\n          {helperText}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  label: { marginBottom: 16, color: colors.gray, ...typography.caption },\n  inputFocusErrorState: {\n    borderWidth: 2,\n    borderStyle: 'solid',\n    borderColor: colors.red,\n  },\n  error: { color: colors.red, marginTop: 8, ...typography.caption },\n  helper: { marginTop: 8, color: colors.primary, ...typography.caption },\n  dropdownInputContainer: { marginBottom: 23, width: '100%' },\n  blackText: { color: colors.black },\n});\n\nexport default Dropdown;\n"]}

package/lib/commonjs/SelectedItemsView.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactNative = require("react-native");
+
+var _colors = require("./styles/colors");
+
+var _input = require("./styles/input");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const SelectedItemsView = _ref => {
+  let {
+    placeholder,
+    error,
+    getSelectedItemsLabel,
+    handleToggleModal,
+    isMultiple,
+    selectedItem,
+    selectedItems,
+    dropdownStyle,
+    selectedItemStyle,
+    multipleSelectedItemStyle,
+    dropdownErrorStyle,
+    primaryColor,
+    disabled
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
+    onPress: () => handleToggleModal(),
+    style: _ref2 => {
+      let {
+        pressed
+      } = _ref2;
+      return [pressed && { ..._input.inputStyles.inputFocusState,
+        borderColor: primaryColor
+      }, _input.inputStyles.input, dropdownStyle, error && //this must be last
+      error !== '' && !pressed && { ..._input.inputStyles.inputFocusErrorState,
+        ...dropdownErrorStyle
+      }];
+    },
+    disabled: disabled
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.ScrollView, {
+    horizontal: true,
+    alwaysBounceHorizontal: true,
+    showsHorizontalScrollIndicator: false
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.selectedItemsContainer,
+    onStartShouldSetResponder: () => true
+  }, isMultiple ? getSelectedItemsLabel().map((item, i) => /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: () => handleToggleModal(),
+    key: `react-native-input-select-${Math.random()}-${i}`,
+    disabled: disabled
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.selectedItems, {
+      backgroundColor: primaryColor
+    }, multipleSelectedItemStyle]
+  }, item))) : /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
+    onPress: () => handleToggleModal(),
+    disabled: disabled
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: [styles.blackText, selectedItemStyle]
+  }, getSelectedItemsLabel()))), !selectedItem && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0 && /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
+    style: styles.blackText
+  }, placeholder !== null && placeholder !== void 0 ? placeholder : 'Select an option')), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
+    style: styles.iconStyle
+  }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
+    source: require('../src/asset/arrow-down.png')
+  })));
+};
+
+const styles = _reactNative.StyleSheet.create({
+  iconStyle: {
+    position: 'absolute',
+    right: 25,
+    top: 25
+  },
+  selectedItemsContainer: {
+    flexDirection: 'row',
+    flexWrap: 'nowrap'
+  },
+  selectedItems: {
+    color: _colors.colors.white,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 10,
+    backgroundColor: _colors.colors.primary,
+    marginRight: 10
+  },
+  blackText: {
+    color: _colors.colors.black
+  }
+});
+
+var _default = SelectedItemsView;
+exports.default = _default;
+//# sourceMappingURL=SelectedItemsView.js.map

package/lib/commonjs/SelectedItemsView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SelectedItemsView.tsx"],"names":["SelectedItemsView","placeholder","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","dropdownStyle","selectedItemStyle","multipleSelectedItemStyle","dropdownErrorStyle","primaryColor","disabled","pressed","inputStyles","inputFocusState","borderColor","input","inputFocusErrorState","styles","selectedItemsContainer","map","item","i","Math","random","backgroundColor","blackText","length","iconStyle","require","StyleSheet","create","position","right","top","flexDirection","flexWrap","color","colors","white","paddingHorizontal","paddingVertical","borderRadius","primary","marginRight","black"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  View,\n  Text,\n  Pressable,\n  ScrollView,\n  StyleSheet,\n  Image,\n  TouchableOpacity,\n} from 'react-native';\nimport { colors } from './styles/colors';\nimport { inputStyles } from './styles/input';\n\nconst SelectedItemsView = ({\n  placeholder,\n  error,\n  getSelectedItemsLabel,\n  handleToggleModal,\n  isMultiple,\n  selectedItem,\n  selectedItems,\n  dropdownStyle,\n  selectedItemStyle,\n  multipleSelectedItemStyle,\n  dropdownErrorStyle,\n  primaryColor,\n  disabled,\n}: any) => {\n  return (\n    <Pressable\n      onPress={() => handleToggleModal()}\n      style={({ pressed }) => [\n        pressed && {\n          ...inputStyles.inputFocusState,\n          borderColor: primaryColor,\n        },\n        inputStyles.input,\n        dropdownStyle,\n        error && //this must be last\n          error !== '' &&\n          !pressed && {\n            ...inputStyles.inputFocusErrorState,\n            ...dropdownErrorStyle,\n          },\n      ]}\n      disabled={disabled}\n    >\n      <ScrollView\n        horizontal\n        alwaysBounceHorizontal\n        showsHorizontalScrollIndicator={false}\n      >\n        <View\n          style={styles.selectedItemsContainer}\n          onStartShouldSetResponder={() => true}\n        >\n          {isMultiple ? (\n            getSelectedItemsLabel().map((item: any, i: Number) => (\n              <TouchableOpacity\n                onPress={() => handleToggleModal()}\n                key={`react-native-input-select-${Math.random()}-${i}`}\n                disabled={disabled}\n              >\n                <Text\n                  style={[\n                    styles.selectedItems,\n                    { backgroundColor: primaryColor },\n                    multipleSelectedItemStyle,\n                  ]}\n                >\n                  {item}\n                </Text>\n              </TouchableOpacity>\n            ))\n          ) : (\n            <TouchableOpacity\n              onPress={() => handleToggleModal()}\n              disabled={disabled}\n            >\n              <Text style={[styles.blackText, selectedItemStyle]}>\n                {getSelectedItemsLabel()}\n              </Text>\n            </TouchableOpacity>\n          )}\n        </View>\n\n        {!selectedItem && selectedItems?.length === 0 && (\n          <Text style={styles.blackText}>\n            {placeholder ?? 'Select an option'}\n          </Text>\n        )}\n      </ScrollView>\n      <View style={styles.iconStyle}>\n        <Image source={require('../src/asset/arrow-down.png')} />\n      </View>\n    </Pressable>\n  );\n};\n\nconst styles = StyleSheet.create({\n  iconStyle: { position: 'absolute', right: 25, top: 25 },\n  selectedItemsContainer: { flexDirection: 'row', flexWrap: 'nowrap' },\n  selectedItems: {\n    color: colors.white,\n    paddingHorizontal: 10,\n    paddingVertical: 5,\n    borderRadius: 10,\n    backgroundColor: colors.primary,\n    marginRight: 10,\n  },\n  blackText: { color: colors.black },\n});\n\nexport default SelectedItemsView;\n"]}

package/lib/commonjs/index.js

@@ -17,6 +17,8 @@ var _constants = require("./constants");
 
 var _Input = require("./Input");
 
+var _colors = require("./styles/colors");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -132,6 +134,7 @@ const DropdownSelect = (_ref, rest) => {
     setNewOptions(options);
   };
 
+  let primary = primaryColor || _colors.colors.gray;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Dropdown.default, _extends({
     label: label,
     placeholder: placeholder,
@@ -150,7 +153,7 @@ const DropdownSelect = (_ref, rest) => {
     selectedItemStyle: selectedItemStyle,
     multipleSelectedItemStyle: multipleSelectedItemStyle,
     isMultiple: isMultiple,
-    primaryColor: primaryColor,
+    primaryColor: primary,
     disabled: disabled
   }, rest)), /*#__PURE__*/_react.default.createElement(_Modal.default, {
     open: open,
@@ -162,7 +165,7 @@ const DropdownSelect = (_ref, rest) => {
     value: searchValue,
     onChangeText: text => onSearch(text),
     style: searchInputStyle,
-    primaryColor: primaryColor
+    primaryColor: primary
   }), /*#__PURE__*/_react.default.createElement(_DropdownList.default, {
     options: newOptions,
     optionLabel: optionLabel,
@@ -172,7 +175,7 @@ const DropdownSelect = (_ref, rest) => {
     selectedItem: selectedItem,
     handleMultipleSelections: handleMultipleSelections,
     handleSingleSelection: handleSingleSelection,
-    primaryColor: primaryColor
+    primaryColor: primary
   })));
 };
 

package/lib/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":["DropdownSelect","rest","placeholder","label","error","helperText","options","optionLabel","optionValue","onValueChange","selectedValue","isMultiple","isSearchable","labelStyle","dropdownStyle","dropdownContainerStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","selectedItemStyle","multipleSelectedItemStyle","modalBackgroundStyle","modalOptionsContainer","searchInputStyle","primaryColor","disabled","newOptions","setNewOptions","open","setOpen","selectedItem","setSelectedItem","selectedItems","setSelectedItems","Array","isArray","undefined","searchValue","setSearchValue","handleSingleSelection","value","handleMultipleSelections","selectedValues","includes","filter","item","push","getSelectedItemsLabel","selectedLabels","forEach","element","selectedItemLabel","find","DEFAULT_OPTION_VALUE","DEFAULT_OPTION_LABEL","onSearch","searchText","toString","toLocaleLowerCase","trim","regexFilter","RegExp","searchResults","toLowerCase","search","handleToggleModal","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 searchText = value.toString().toLocaleLowerCase().trim();\n\n    const regexFilter = new RegExp(searchText, 'i');\n\n    const searchResults = options.filter((item: any) => {\n      if (\n        item[optionLabel ?? DEFAULT_OPTION_LABEL]\n          .toString()\n          .toLowerCase()\n          .search(regexFilter) !== -1 ||\n        item[optionValue ?? DEFAULT_OPTION_VALUE]\n          .toString(regexFilter)\n          .toLowerCase()\n          .search(regexFilter) !== -1\n      ) {\n        return item;\n      }\n    });\n\n    setNewOptions(searchResults);\n  };\n\n  /*===========================================\n   * Modal\n   *==========================================*/\n  const handleToggleModal = () => {\n    setOpen(!open);\n    setSearchValue('');\n    setNewOptions(options);\n  };\n\n  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"]}
+{"version":3,"sources":["index.tsx"],"names":["DropdownSelect","rest","placeholder","label","error","helperText","options","optionLabel","optionValue","onValueChange","selectedValue","isMultiple","isSearchable","labelStyle","dropdownStyle","dropdownContainerStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","selectedItemStyle","multipleSelectedItemStyle","modalBackgroundStyle","modalOptionsContainer","searchInputStyle","primaryColor","disabled","newOptions","setNewOptions","open","setOpen","selectedItem","setSelectedItem","selectedItems","setSelectedItems","Array","isArray","undefined","searchValue","setSearchValue","handleSingleSelection","value","handleMultipleSelections","selectedValues","includes","filter","item","push","getSelectedItemsLabel","selectedLabels","forEach","element","selectedItemLabel","find","DEFAULT_OPTION_VALUE","DEFAULT_OPTION_LABEL","onSearch","searchText","toString","toLocaleLowerCase","trim","regexFilter","RegExp","searchResults","toLowerCase","search","handleToggleModal","primary","colors","gray","text"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport Dropdown from './Dropdown';\nimport CustomModal from './Modal';\nimport DropdownList from './DropdownList';\nimport { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';\nimport type { DropdownProps } from './types/index.types';\nimport { Input } from './Input';\nimport { colors } from './styles/colors';\n\nexport const DropdownSelect = (\n  {\n    placeholder,\n    label,\n    error,\n    helperText,\n    options,\n    optionLabel,\n    optionValue,\n    onValueChange,\n    selectedValue,\n    isMultiple,\n    isSearchable,\n    labelStyle,\n    dropdownStyle,\n    dropdownContainerStyle,\n    dropdownErrorStyle,\n    dropdownErrorTextStyle,\n    dropdownHelperTextStyle,\n    selectedItemStyle,\n    multipleSelectedItemStyle,\n    modalBackgroundStyle,\n    modalOptionsContainer,\n    searchInputStyle,\n    primaryColor,\n    disabled,\n  }: DropdownProps,\n  rest: any\n) => {\n  const [newOptions, setNewOptions] = useState(options ? options : []);\n  const [open, setOpen] = useState(false);\n  const [selectedItem, setSelectedItem] = useState(selectedValue); //for single selection\n  const [selectedItems, setSelectedItems] = useState(\n    Array.isArray(selectedValue)\n      ? selectedValue\n      : selectedValue === '' || selectedValue === undefined\n      ? []\n      : [selectedValue]\n  ); //for multiple selection\n  const [searchValue, setSearchValue] = useState('');\n\n  /*===========================================\n   * Selection handlers\n   *==========================================*/\n  const handleSingleSelection = (value: any) => {\n    if (selectedItem === value) {\n      setSelectedItem(null);\n    } else {\n      setSelectedItem(value);\n      onValueChange(value); //send value to parent\n      setOpen(false); //close modal upon selection\n    }\n  };\n\n  const handleMultipleSelections = (value: any) => {\n    let selectedValues = [...selectedItems];\n\n    if (selectedValues.includes(value)) {\n      selectedValues = selectedValues.filter((item) => item !== value);\n    } else {\n      selectedValues.push(value);\n    }\n    setSelectedItems(selectedValues);\n  };\n\n  /*===========================================\n   * Get label handler\n   *==========================================*/\n  const getSelectedItemsLabel = () => {\n    if (isMultiple) {\n      let selectedLabels: Array<string> = [];\n      selectedItems &&\n        selectedItems.forEach((element) => {\n          let selectedItemLabel =\n            options &&\n            options.find(\n              (item: any) =>\n                item[optionValue ?? DEFAULT_OPTION_VALUE] === element\n            )?.[optionLabel];\n          selectedLabels.push(selectedItemLabel);\n        });\n      return selectedLabels;\n    }\n\n    let selectedItemLabel =\n      options &&\n      options.find(\n        (item: any) =>\n          item[optionValue ?? DEFAULT_OPTION_VALUE] === selectedItem\n      );\n    return selectedItemLabel?.[optionLabel ?? DEFAULT_OPTION_LABEL];\n  };\n\n  /*===========================================\n   * Search\n   *==========================================*/\n  const onSearch = (value: string) => {\n    setSearchValue(value);\n\n    let searchText = value.toString().toLocaleLowerCase().trim();\n\n    const regexFilter = new RegExp(searchText, 'i');\n\n    const searchResults = options.filter((item: any) => {\n      if (\n        item[optionLabel ?? DEFAULT_OPTION_LABEL]\n          .toString()\n          .toLowerCase()\n          .search(regexFilter) !== -1 ||\n        item[optionValue ?? DEFAULT_OPTION_VALUE]\n          .toString(regexFilter)\n          .toLowerCase()\n          .search(regexFilter) !== -1\n      ) {\n        return item;\n      }\n    });\n\n    setNewOptions(searchResults);\n  };\n\n  /*===========================================\n   * Modal\n   *==========================================*/\n  const handleToggleModal = () => {\n    setOpen(!open);\n    setSearchValue('');\n    setNewOptions(options);\n  };\n\n  let primary = primaryColor || colors.gray;\n  return (\n    <>\n      <Dropdown\n        label={label}\n        placeholder={placeholder}\n        helperText={helperText}\n        error={error}\n        getSelectedItemsLabel={getSelectedItemsLabel}\n        selectedItem={selectedItem}\n        selectedItems={selectedItems}\n        handleToggleModal={handleToggleModal}\n        labelStyle={labelStyle}\n        dropdownStyle={dropdownStyle}\n        dropdownContainerStyle={dropdownContainerStyle}\n        dropdownErrorStyle={dropdownErrorStyle}\n        dropdownErrorTextStyle={dropdownErrorTextStyle}\n        dropdownHelperTextStyle={dropdownHelperTextStyle}\n        selectedItemStyle={selectedItemStyle}\n        multipleSelectedItemStyle={multipleSelectedItemStyle}\n        isMultiple={isMultiple}\n        primaryColor={primary}\n        disabled={disabled}\n        {...rest}\n      />\n      <CustomModal\n        open={open}\n        handleToggleModal={handleToggleModal}\n        modalBackgroundStyle={modalBackgroundStyle}\n        modalOptionsContainer={modalOptionsContainer}\n        onRequestClose={() => {}}\n      >\n        {isSearchable && (\n          <Input\n            value={searchValue}\n            onChangeText={(text: string) => onSearch(text)}\n            style={searchInputStyle}\n            primaryColor={primary}\n          />\n        )}\n        <DropdownList\n          options={newOptions}\n          optionLabel={optionLabel}\n          optionValue={optionValue}\n          isMultiple={isMultiple}\n          selectedItems={selectedItems}\n          selectedItem={selectedItem}\n          handleMultipleSelections={handleMultipleSelections}\n          handleSingleSelection={handleSingleSelection}\n          primaryColor={primary}\n        />\n      </CustomModal>\n    </>\n  );\n};\n\nexport default DropdownSelect;\n"]}

package/lib/module/Dropdown.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { View, Text, Pressable, ScrollView, StyleSheet, Image, TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
+import SelectedItemsView from './SelectedItemsView';
 import { colors } from './styles/colors';
-import { inputStyles } from './styles/input';
 import { typography } from './styles/typography';
 
 const Dropdown = _ref => {
@@ -30,47 +30,21 @@ const Dropdown = _ref => {
     style: [styles.dropdownInputContainer, dropdownContainerStyle]
   }, label && label !== '' && /*#__PURE__*/React.createElement(Text, {
     style: [styles.label, labelStyle]
-  }, label), /*#__PURE__*/React.createElement(Pressable, {
-    onPress: () => handleToggleModal(),
-    style: _ref2 => {
-      let {
-        pressed
-      } = _ref2;
-      return [pressed && { ...inputStyles.inputFocusState,
-        borderColor: primaryColor
-      }, inputStyles.input, dropdownStyle, error && //order matters
-      error !== '' && !pressed && { ...inputStyles.inputFocusErrorState,
-        ...dropdownErrorStyle
-      }];
-    },
+  }, label), /*#__PURE__*/React.createElement(SelectedItemsView, {
+    placeholder: placeholder,
+    error: error,
+    getSelectedItemsLabel: getSelectedItemsLabel,
+    handleToggleModal: handleToggleModal,
+    isMultiple: isMultiple,
+    selectedItem: selectedItem,
+    selectedItems: selectedItems,
+    dropdownStyle: dropdownStyle,
+    selectedItemStyle: selectedItemStyle,
+    multipleSelectedItemStyle: multipleSelectedItemStyle,
+    dropdownErrorStyle: dropdownErrorStyle,
+    primaryColor: primaryColor,
     disabled: disabled
-  }, /*#__PURE__*/React.createElement(ScrollView, {
-    horizontal: true,
-    alwaysBounceHorizontal: true,
-    showsHorizontalScrollIndicator: false
-  }, /*#__PURE__*/React.createElement(View, {
-    style: styles.selectedItemsContainer,
-    onStartShouldSetResponder: () => true
-  }, isMultiple ? getSelectedItemsLabel().map((item, i) => /*#__PURE__*/React.createElement(TouchableOpacity, {
-    onPress: () => handleToggleModal(),
-    key: `SelectedItems${i}`,
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: [styles.selectedItems, {
-      backgroundColor: primaryColor
-    }, multipleSelectedItemStyle]
-  }, item))) : /*#__PURE__*/React.createElement(TouchableOpacity, {
-    onPress: () => handleToggleModal(),
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(Text, {
-    style: [styles.blackText, selectedItemStyle]
-  }, getSelectedItemsLabel()))), !selectedItem && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0 && /*#__PURE__*/React.createElement(Text, {
-    style: styles.blackText
-  }, placeholder !== null && placeholder !== void 0 ? placeholder : 'Select an option')), /*#__PURE__*/React.createElement(View, {
-    style: styles.iconStyle
-  }, /*#__PURE__*/React.createElement(Image, {
-    source: require('../src/asset/arrow-down.png')
-  }))), error && error !== '' && /*#__PURE__*/React.createElement(Text, {
+  }), error && error !== '' && /*#__PURE__*/React.createElement(Text, {
     style: [styles.error, dropdownErrorTextStyle]
   }, error), helperText && helperText !== '' && !error && /*#__PURE__*/React.createElement(Text, {
     style: [styles.helper, dropdownHelperTextStyle]
@@ -88,11 +62,6 @@ const styles = StyleSheet.create({
     borderStyle: 'solid',
     borderColor: colors.red
   },
-  iconStyle: {
-    position: 'absolute',
-    right: 25,
-    top: 25
-  },
   error: {
     color: colors.red,
     marginTop: 8,
@@ -107,18 +76,6 @@ const styles = StyleSheet.create({
     marginBottom: 23,
     width: '100%'
   },
-  selectedItemsContainer: {
-    flexDirection: 'row',
-    flexWrap: 'nowrap'
-  },
-  selectedItems: {
-    color: colors.white,
-    paddingHorizontal: 10,
-    paddingVertical: 5,
-    borderRadius: 10,
-    backgroundColor: colors.primary,
-    marginRight: 10
-  },
   blackText: {
     color: colors.black
   }

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","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"]}
+{"version":3,"sources":["Dropdown.tsx"],"names":["React","View","Text","StyleSheet","SelectedItemsView","colors","typography","Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","multipleSelectedItemStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","primaryColor","disabled","styles","dropdownInputContainer","helper","create","marginBottom","color","gray","caption","inputFocusErrorState","borderWidth","borderStyle","borderColor","red","marginTop","primary","width","blackText","black"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View, Text, StyleSheet } from 'react-native';\nimport SelectedItemsView from './SelectedItemsView';\nimport { colors } from './styles/colors';\nimport { typography } from './styles/typography';\n\nconst Dropdown = ({\n  label,\n  placeholder,\n  helperText,\n  error,\n  getSelectedItemsLabel,\n  handleToggleModal,\n  isMultiple,\n  selectedItem,\n  selectedItems,\n  labelStyle,\n  dropdownStyle,\n  dropdownContainerStyle,\n  selectedItemStyle,\n  multipleSelectedItemStyle,\n  dropdownErrorStyle,\n  dropdownErrorTextStyle,\n  dropdownHelperTextStyle,\n  primaryColor,\n  disabled,\n}: any) => {\n  return (\n    <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>\n      {label && label !== '' && (\n        <Text style={[styles.label, labelStyle]}>{label}</Text>\n      )}\n      <SelectedItemsView\n        placeholder={placeholder}\n        error={error}\n        getSelectedItemsLabel={getSelectedItemsLabel}\n        handleToggleModal={handleToggleModal}\n        isMultiple={isMultiple}\n        selectedItem={selectedItem}\n        selectedItems={selectedItems}\n        dropdownStyle={dropdownStyle}\n        selectedItemStyle={selectedItemStyle}\n        multipleSelectedItemStyle={multipleSelectedItemStyle}\n        dropdownErrorStyle={dropdownErrorStyle}\n        primaryColor={primaryColor}\n        disabled={disabled}\n      />\n\n      {error && error !== '' && (\n        <Text style={[styles.error, dropdownErrorTextStyle]}>{error}</Text>\n      )}\n\n      {helperText && helperText !== '' && !error && (\n        <Text style={[styles.helper, dropdownHelperTextStyle]}>\n          {helperText}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  label: { marginBottom: 16, color: colors.gray, ...typography.caption },\n  inputFocusErrorState: {\n    borderWidth: 2,\n    borderStyle: 'solid',\n    borderColor: colors.red,\n  },\n  error: { color: colors.red, marginTop: 8, ...typography.caption },\n  helper: { marginTop: 8, color: colors.primary, ...typography.caption },\n  dropdownInputContainer: { marginBottom: 23, width: '100%' },\n  blackText: { color: colors.black },\n});\n\nexport default Dropdown;\n"]}

package/lib/module/SelectedItemsView.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { View, Text, Pressable, ScrollView, StyleSheet, Image, TouchableOpacity } from 'react-native';
+import { colors } from './styles/colors';
+import { inputStyles } from './styles/input';
+
+const SelectedItemsView = _ref => {
+  let {
+    placeholder,
+    error,
+    getSelectedItemsLabel,
+    handleToggleModal,
+    isMultiple,
+    selectedItem,
+    selectedItems,
+    dropdownStyle,
+    selectedItemStyle,
+    multipleSelectedItemStyle,
+    dropdownErrorStyle,
+    primaryColor,
+    disabled
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Pressable, {
+    onPress: () => handleToggleModal(),
+    style: _ref2 => {
+      let {
+        pressed
+      } = _ref2;
+      return [pressed && { ...inputStyles.inputFocusState,
+        borderColor: primaryColor
+      }, inputStyles.input, dropdownStyle, error && //this must be last
+      error !== '' && !pressed && { ...inputStyles.inputFocusErrorState,
+        ...dropdownErrorStyle
+      }];
+    },
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(ScrollView, {
+    horizontal: true,
+    alwaysBounceHorizontal: true,
+    showsHorizontalScrollIndicator: false
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.selectedItemsContainer,
+    onStartShouldSetResponder: () => true
+  }, isMultiple ? getSelectedItemsLabel().map((item, i) => /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: () => handleToggleModal(),
+    key: `react-native-input-select-${Math.random()}-${i}`,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.selectedItems, {
+      backgroundColor: primaryColor
+    }, multipleSelectedItemStyle]
+  }, item))) : /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: () => handleToggleModal(),
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.blackText, selectedItemStyle]
+  }, getSelectedItemsLabel()))), !selectedItem && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0 && /*#__PURE__*/React.createElement(Text, {
+    style: styles.blackText
+  }, placeholder !== null && placeholder !== void 0 ? placeholder : 'Select an option')), /*#__PURE__*/React.createElement(View, {
+    style: styles.iconStyle
+  }, /*#__PURE__*/React.createElement(Image, {
+    source: require('../src/asset/arrow-down.png')
+  })));
+};
+
+const styles = StyleSheet.create({
+  iconStyle: {
+    position: 'absolute',
+    right: 25,
+    top: 25
+  },
+  selectedItemsContainer: {
+    flexDirection: 'row',
+    flexWrap: 'nowrap'
+  },
+  selectedItems: {
+    color: colors.white,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 10,
+    backgroundColor: colors.primary,
+    marginRight: 10
+  },
+  blackText: {
+    color: colors.black
+  }
+});
+export default SelectedItemsView;
+//# sourceMappingURL=SelectedItemsView.js.map

package/lib/module/SelectedItemsView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["SelectedItemsView.tsx"],"names":["React","View","Text","Pressable","ScrollView","StyleSheet","Image","TouchableOpacity","colors","inputStyles","SelectedItemsView","placeholder","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","dropdownStyle","selectedItemStyle","multipleSelectedItemStyle","dropdownErrorStyle","primaryColor","disabled","pressed","inputFocusState","borderColor","input","inputFocusErrorState","styles","selectedItemsContainer","map","item","i","Math","random","backgroundColor","blackText","length","iconStyle","require","create","position","right","top","flexDirection","flexWrap","color","white","paddingHorizontal","paddingVertical","borderRadius","primary","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;;AAEA,MAAMC,iBAAiB,GAAG,QAcf;AAAA,MAdgB;AACzBC,IAAAA,WADyB;AAEzBC,IAAAA,KAFyB;AAGzBC,IAAAA,qBAHyB;AAIzBC,IAAAA,iBAJyB;AAKzBC,IAAAA,UALyB;AAMzBC,IAAAA,YANyB;AAOzBC,IAAAA,aAPyB;AAQzBC,IAAAA,aARyB;AASzBC,IAAAA,iBATyB;AAUzBC,IAAAA,yBAVyB;AAWzBC,IAAAA,kBAXyB;AAYzBC,IAAAA,YAZyB;AAazBC,IAAAA;AAbyB,GAchB;AACT,sBACE,oBAAC,SAAD;AACE,IAAA,OAAO,EAAE,MAAMT,iBAAiB,EADlC;AAEE,IAAA,KAAK,EAAE;AAAA,UAAC;AAAEU,QAAAA;AAAF,OAAD;AAAA,aAAiB,CACtBA,OAAO,IAAI,EACT,GAAGf,WAAW,CAACgB,eADN;AAETC,QAAAA,WAAW,EAAEJ;AAFJ,OADW,EAKtBb,WAAW,CAACkB,KALU,EAMtBT,aANsB,EAOtBN,KAAK,IAAI;AACPA,MAAAA,KAAK,KAAK,EADZ,IAEE,CAACY,OAFH,IAEc,EACV,GAAGf,WAAW,CAACmB,oBADL;AAEV,WAAGP;AAFO,OATQ,CAAjB;AAAA,KAFT;AAgBE,IAAA,QAAQ,EAAEE;AAhBZ,kBAkBE,oBAAC,UAAD;AACE,IAAA,UAAU,MADZ;AAEE,IAAA,sBAAsB,MAFxB;AAGE,IAAA,8BAA8B,EAAE;AAHlC,kBAKE,oBAAC,IAAD;AACE,IAAA,KAAK,EAAEM,MAAM,CAACC,sBADhB;AAEE,IAAA,yBAAyB,EAAE,MAAM;AAFnC,KAIGf,UAAU,GACTF,qBAAqB,GAAGkB,GAAxB,CAA4B,CAACC,IAAD,EAAYC,CAAZ,kBAC1B,oBAAC,gBAAD;AACE,IAAA,OAAO,EAAE,MAAMnB,iBAAiB,EADlC;AAEE,IAAA,GAAG,EAAG,6BAA4BoB,IAAI,CAACC,MAAL,EAAc,IAAGF,CAAE,EAFvD;AAGE,IAAA,QAAQ,EAAEV;AAHZ,kBAKE,oBAAC,IAAD;AACE,IAAA,KAAK,EAAE,CACLM,MAAM,CAACZ,aADF,EAEL;AAAEmB,MAAAA,eAAe,EAAEd;AAAnB,KAFK,EAGLF,yBAHK;AADT,KAOGY,IAPH,CALF,CADF,CADS,gBAmBT,oBAAC,gBAAD;AACE,IAAA,OAAO,EAAE,MAAMlB,iBAAiB,EADlC;AAEE,IAAA,QAAQ,EAAES;AAFZ,kBAIE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAE,CAACM,MAAM,CAACQ,SAAR,EAAmBlB,iBAAnB;AAAb,KACGN,qBAAqB,EADxB,CAJF,CAvBJ,CALF,EAuCG,CAACG,YAAD,IAAiB,CAAAC,aAAa,SAAb,IAAAA,aAAa,WAAb,YAAAA,aAAa,CAAEqB,MAAf,MAA0B,CAA3C,iBACC,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAET,MAAM,CAACQ;AAApB,KACG1B,WADH,aACGA,WADH,cACGA,WADH,GACkB,kBADlB,CAxCJ,CAlBF,eA+DE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEkB,MAAM,CAACU;AAApB,kBACE,oBAAC,KAAD;AAAO,IAAA,MAAM,EAAEC,OAAO,CAAC,6BAAD;AAAtB,IADF,CA/DF,CADF;AAqED,CApFD;;AAsFA,MAAMX,MAAM,GAAGxB,UAAU,CAACoC,MAAX,CAAkB;AAC/BF,EAAAA,SAAS,EAAE;AAAEG,IAAAA,QAAQ,EAAE,UAAZ;AAAwBC,IAAAA,KAAK,EAAE,EAA/B;AAAmCC,IAAAA,GAAG,EAAE;AAAxC,GADoB;AAE/Bd,EAAAA,sBAAsB,EAAE;AAAEe,IAAAA,aAAa,EAAE,KAAjB;AAAwBC,IAAAA,QAAQ,EAAE;AAAlC,GAFO;AAG/B7B,EAAAA,aAAa,EAAE;AACb8B,IAAAA,KAAK,EAAEvC,MAAM,CAACwC,KADD;AAEbC,IAAAA,iBAAiB,EAAE,EAFN;AAGbC,IAAAA,eAAe,EAAE,CAHJ;AAIbC,IAAAA,YAAY,EAAE,EAJD;AAKbf,IAAAA,eAAe,EAAE5B,MAAM,CAAC4C,OALX;AAMbC,IAAAA,WAAW,EAAE;AANA,GAHgB;AAW/BhB,EAAAA,SAAS,EAAE;AAAEU,IAAAA,KAAK,EAAEvC,MAAM,CAAC8C;AAAhB;AAXoB,CAAlB,CAAf;AAcA,eAAe5C,iBAAf","sourcesContent":["import React from 'react';\nimport {\n  View,\n  Text,\n  Pressable,\n  ScrollView,\n  StyleSheet,\n  Image,\n  TouchableOpacity,\n} from 'react-native';\nimport { colors } from './styles/colors';\nimport { inputStyles } from './styles/input';\n\nconst SelectedItemsView = ({\n  placeholder,\n  error,\n  getSelectedItemsLabel,\n  handleToggleModal,\n  isMultiple,\n  selectedItem,\n  selectedItems,\n  dropdownStyle,\n  selectedItemStyle,\n  multipleSelectedItemStyle,\n  dropdownErrorStyle,\n  primaryColor,\n  disabled,\n}: any) => {\n  return (\n    <Pressable\n      onPress={() => handleToggleModal()}\n      style={({ pressed }) => [\n        pressed && {\n          ...inputStyles.inputFocusState,\n          borderColor: primaryColor,\n        },\n        inputStyles.input,\n        dropdownStyle,\n        error && //this must be last\n          error !== '' &&\n          !pressed && {\n            ...inputStyles.inputFocusErrorState,\n            ...dropdownErrorStyle,\n          },\n      ]}\n      disabled={disabled}\n    >\n      <ScrollView\n        horizontal\n        alwaysBounceHorizontal\n        showsHorizontalScrollIndicator={false}\n      >\n        <View\n          style={styles.selectedItemsContainer}\n          onStartShouldSetResponder={() => true}\n        >\n          {isMultiple ? (\n            getSelectedItemsLabel().map((item: any, i: Number) => (\n              <TouchableOpacity\n                onPress={() => handleToggleModal()}\n                key={`react-native-input-select-${Math.random()}-${i}`}\n                disabled={disabled}\n              >\n                <Text\n                  style={[\n                    styles.selectedItems,\n                    { backgroundColor: primaryColor },\n                    multipleSelectedItemStyle,\n                  ]}\n                >\n                  {item}\n                </Text>\n              </TouchableOpacity>\n            ))\n          ) : (\n            <TouchableOpacity\n              onPress={() => handleToggleModal()}\n              disabled={disabled}\n            >\n              <Text style={[styles.blackText, selectedItemStyle]}>\n                {getSelectedItemsLabel()}\n              </Text>\n            </TouchableOpacity>\n          )}\n        </View>\n\n        {!selectedItem && selectedItems?.length === 0 && (\n          <Text style={styles.blackText}>\n            {placeholder ?? 'Select an option'}\n          </Text>\n        )}\n      </ScrollView>\n      <View style={styles.iconStyle}>\n        <Image source={require('../src/asset/arrow-down.png')} />\n      </View>\n    </Pressable>\n  );\n};\n\nconst styles = StyleSheet.create({\n  iconStyle: { position: 'absolute', right: 25, top: 25 },\n  selectedItemsContainer: { flexDirection: 'row', flexWrap: 'nowrap' },\n  selectedItems: {\n    color: colors.white,\n    paddingHorizontal: 10,\n    paddingVertical: 5,\n    borderRadius: 10,\n    backgroundColor: colors.primary,\n    marginRight: 10,\n  },\n  blackText: { color: colors.black },\n});\n\nexport default SelectedItemsView;\n"]}

package/lib/module/index.js

@@ -6,6 +6,7 @@ import CustomModal from './Modal';
 import DropdownList from './DropdownList';
 import { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';
 import { Input } from './Input';
+import { colors } from './styles/colors';
 export const DropdownSelect = (_ref, rest) => {
   let {
     placeholder,
@@ -113,6 +114,7 @@ export const DropdownSelect = (_ref, rest) => {
     setNewOptions(options);
   };
 
+  let primary = primaryColor || colors.gray;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, _extends({
     label: label,
     placeholder: placeholder,
@@ -131,7 +133,7 @@ export const DropdownSelect = (_ref, rest) => {
     selectedItemStyle: selectedItemStyle,
     multipleSelectedItemStyle: multipleSelectedItemStyle,
     isMultiple: isMultiple,
-    primaryColor: primaryColor,
+    primaryColor: primary,
     disabled: disabled
   }, rest)), /*#__PURE__*/React.createElement(CustomModal, {
     open: open,
@@ -143,7 +145,7 @@ export const DropdownSelect = (_ref, rest) => {
     value: searchValue,
     onChangeText: text => onSearch(text),
     style: searchInputStyle,
-    primaryColor: primaryColor
+    primaryColor: primary
   }), /*#__PURE__*/React.createElement(DropdownList, {
     options: newOptions,
     optionLabel: optionLabel,
@@ -153,7 +155,7 @@ export const DropdownSelect = (_ref, rest) => {
     selectedItem: selectedItem,
     handleMultipleSelections: handleMultipleSelections,
     handleSingleSelection: handleSingleSelection,
-    primaryColor: primaryColor
+    primaryColor: primary
   })));
 };
 export default DropdownSelect;

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","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","searchText","toString","toLocaleLowerCase","trim","regexFilter","RegExp","searchResults","toLowerCase","search","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 searchText = value.toString().toLocaleLowerCase().trim();\n\n    const regexFilter = new RegExp(searchText, 'i');\n\n    const searchResults = options.filter((item: any) => {\n      if (\n        item[optionLabel ?? DEFAULT_OPTION_LABEL]\n          .toString()\n          .toLowerCase()\n          .search(regexFilter) !== -1 ||\n        item[optionValue ?? DEFAULT_OPTION_VALUE]\n          .toString(regexFilter)\n          .toLowerCase()\n          .search(regexFilter) !== -1\n      ) {\n        return item;\n      }\n    });\n\n    setNewOptions(searchResults);\n  };\n\n  /*===========================================\n   * Modal\n   *==========================================*/\n  const handleToggleModal = () => {\n    setOpen(!open);\n    setSearchValue('');\n    setNewOptions(options);\n  };\n\n  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"]}
+{"version":3,"sources":["index.tsx"],"names":["React","useState","Dropdown","CustomModal","DropdownList","DEFAULT_OPTION_LABEL","DEFAULT_OPTION_VALUE","Input","colors","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","searchText","toString","toLocaleLowerCase","trim","regexFilter","RegExp","searchResults","toLowerCase","search","handleToggleModal","primary","gray","text"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport Dropdown from './Dropdown';\nimport CustomModal from './Modal';\nimport DropdownList from './DropdownList';\nimport { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';\nimport type { DropdownProps } from './types/index.types';\nimport { Input } from './Input';\nimport { colors } from './styles/colors';\n\nexport const DropdownSelect = (\n  {\n    placeholder,\n    label,\n    error,\n    helperText,\n    options,\n    optionLabel,\n    optionValue,\n    onValueChange,\n    selectedValue,\n    isMultiple,\n    isSearchable,\n    labelStyle,\n    dropdownStyle,\n    dropdownContainerStyle,\n    dropdownErrorStyle,\n    dropdownErrorTextStyle,\n    dropdownHelperTextStyle,\n    selectedItemStyle,\n    multipleSelectedItemStyle,\n    modalBackgroundStyle,\n    modalOptionsContainer,\n    searchInputStyle,\n    primaryColor,\n    disabled,\n  }: DropdownProps,\n  rest: any\n) => {\n  const [newOptions, setNewOptions] = useState(options ? options : []);\n  const [open, setOpen] = useState(false);\n  const [selectedItem, setSelectedItem] = useState(selectedValue); //for single selection\n  const [selectedItems, setSelectedItems] = useState(\n    Array.isArray(selectedValue)\n      ? selectedValue\n      : selectedValue === '' || selectedValue === undefined\n      ? []\n      : [selectedValue]\n  ); //for multiple selection\n  const [searchValue, setSearchValue] = useState('');\n\n  /*===========================================\n   * Selection handlers\n   *==========================================*/\n  const handleSingleSelection = (value: any) => {\n    if (selectedItem === value) {\n      setSelectedItem(null);\n    } else {\n      setSelectedItem(value);\n      onValueChange(value); //send value to parent\n      setOpen(false); //close modal upon selection\n    }\n  };\n\n  const handleMultipleSelections = (value: any) => {\n    let selectedValues = [...selectedItems];\n\n    if (selectedValues.includes(value)) {\n      selectedValues = selectedValues.filter((item) => item !== value);\n    } else {\n      selectedValues.push(value);\n    }\n    setSelectedItems(selectedValues);\n  };\n\n  /*===========================================\n   * Get label handler\n   *==========================================*/\n  const getSelectedItemsLabel = () => {\n    if (isMultiple) {\n      let selectedLabels: Array<string> = [];\n      selectedItems &&\n        selectedItems.forEach((element) => {\n          let selectedItemLabel =\n            options &&\n            options.find(\n              (item: any) =>\n                item[optionValue ?? DEFAULT_OPTION_VALUE] === element\n            )?.[optionLabel];\n          selectedLabels.push(selectedItemLabel);\n        });\n      return selectedLabels;\n    }\n\n    let selectedItemLabel =\n      options &&\n      options.find(\n        (item: any) =>\n          item[optionValue ?? DEFAULT_OPTION_VALUE] === selectedItem\n      );\n    return selectedItemLabel?.[optionLabel ?? DEFAULT_OPTION_LABEL];\n  };\n\n  /*===========================================\n   * Search\n   *==========================================*/\n  const onSearch = (value: string) => {\n    setSearchValue(value);\n\n    let searchText = value.toString().toLocaleLowerCase().trim();\n\n    const regexFilter = new RegExp(searchText, 'i');\n\n    const searchResults = options.filter((item: any) => {\n      if (\n        item[optionLabel ?? DEFAULT_OPTION_LABEL]\n          .toString()\n          .toLowerCase()\n          .search(regexFilter) !== -1 ||\n        item[optionValue ?? DEFAULT_OPTION_VALUE]\n          .toString(regexFilter)\n          .toLowerCase()\n          .search(regexFilter) !== -1\n      ) {\n        return item;\n      }\n    });\n\n    setNewOptions(searchResults);\n  };\n\n  /*===========================================\n   * Modal\n   *==========================================*/\n  const handleToggleModal = () => {\n    setOpen(!open);\n    setSearchValue('');\n    setNewOptions(options);\n  };\n\n  let primary = primaryColor || colors.gray;\n  return (\n    <>\n      <Dropdown\n        label={label}\n        placeholder={placeholder}\n        helperText={helperText}\n        error={error}\n        getSelectedItemsLabel={getSelectedItemsLabel}\n        selectedItem={selectedItem}\n        selectedItems={selectedItems}\n        handleToggleModal={handleToggleModal}\n        labelStyle={labelStyle}\n        dropdownStyle={dropdownStyle}\n        dropdownContainerStyle={dropdownContainerStyle}\n        dropdownErrorStyle={dropdownErrorStyle}\n        dropdownErrorTextStyle={dropdownErrorTextStyle}\n        dropdownHelperTextStyle={dropdownHelperTextStyle}\n        selectedItemStyle={selectedItemStyle}\n        multipleSelectedItemStyle={multipleSelectedItemStyle}\n        isMultiple={isMultiple}\n        primaryColor={primary}\n        disabled={disabled}\n        {...rest}\n      />\n      <CustomModal\n        open={open}\n        handleToggleModal={handleToggleModal}\n        modalBackgroundStyle={modalBackgroundStyle}\n        modalOptionsContainer={modalOptionsContainer}\n        onRequestClose={() => {}}\n      >\n        {isSearchable && (\n          <Input\n            value={searchValue}\n            onChangeText={(text: string) => onSearch(text)}\n            style={searchInputStyle}\n            primaryColor={primary}\n          />\n        )}\n        <DropdownList\n          options={newOptions}\n          optionLabel={optionLabel}\n          optionValue={optionValue}\n          isMultiple={isMultiple}\n          selectedItems={selectedItems}\n          selectedItem={selectedItem}\n          handleMultipleSelections={handleMultipleSelections}\n          handleSingleSelection={handleSingleSelection}\n          primaryColor={primary}\n        />\n      </CustomModal>\n    </>\n  );\n};\n\nexport default DropdownSelect;\n"]}

package/lib/typescript/Dropdown.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 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/DropdownList.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const DropdownList: ({ options, optionLabel, optionValue, isMultiple, selectedItems, selectedItem, handleMultipleSelections, handleSingleSelection, primaryColor, }: any) => JSX.Element;
 export default DropdownList;

package/lib/typescript/Input.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const Input: ({ placeholder, value, onChangeText, style, primaryColor, ...rest }: any) => JSX.Element;

package/lib/typescript/Modal.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const CustomModal: ({ open, handleToggleModal, onRequestClose, modalBackgroundStyle, modalOptionsContainerStyle, children, }: any) => JSX.Element;
 export default CustomModal;

package/lib/typescript/SelectedItemsView.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const SelectedItemsView: ({ placeholder, error, getSelectedItemsLabel, handleToggleModal, isMultiple, selectedItem, selectedItems, dropdownStyle, selectedItemStyle, multipleSelectedItemStyle, dropdownErrorStyle, primaryColor, disabled, }: any) => JSX.Element;
+export default SelectedItemsView;

package/lib/typescript/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 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, dropdownErrorStyle, dropdownErrorTextStyle, dropdownHelperTextStyle, selectedItemStyle, multipleSelectedItemStyle, modalBackgroundStyle, modalOptionsContainer, searchInputStyle, primaryColor, disabled, }: DropdownProps, rest: any) => JSX.Element;
 export default DropdownSelect;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-input-select",
-  "version": "0.17.0",
+  "version": "0.19.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",
@@ -32,14 +32,17 @@
     "bootstrap": "yarn example && yarn && yarn pods",
     "start": "yarn example start",
     "android": "yarn example android",
-    "ios": "yarn example ios"
+    "ios": "yarn example ios",
+    "clean": "yarn example clean",
+    "watchman:clear": "watchman watch-del-all"
   },
   "keywords": [
     "react-native",
     "ios",
     "android",
     "dropdown",
-    "selection"
+    "selection",
+    "multiple select"
   ],
   "repository": "https://github.com/azeezat/react-native-select",
   "author": "Azeezat <azeezat94@gmail.com> (https://github.com/azeezat)",
@@ -56,8 +59,8 @@
     "@react-native-community/eslint-config": "^2.0.0",
     "@release-it/conventional-changelog": "^2.0.0",
     "@types/jest": "^26.0.0",
-    "@types/react": "^16.9.19",
-    "@types/react-native": "^0.66.11",
+    "@types/react": "17.0.14",
+    "@types/react-native": "^0.66.27",
     "commitlint": "^11.0.0",
     "eslint": "^7.2.0",
     "eslint-config-prettier": "^7.0.0",

package/src/Dropdown.tsx

@@ -1,15 +1,7 @@
 import React from 'react';
-import {
-  View,
-  Text,
-  Pressable,
-  ScrollView,
-  StyleSheet,
-  Image,
-  TouchableOpacity,
-} from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
+import SelectedItemsView from './SelectedItemsView';
 import { colors } from './styles/colors';
-import { inputStyles } from './styles/input';
 import { typography } from './styles/typography';
 
 const Dropdown = ({
@@ -38,73 +30,21 @@ const Dropdown = ({
       {label && label !== '' && (
         <Text style={[styles.label, labelStyle]}>{label}</Text>
       )}
-      <Pressable
-        onPress={() => handleToggleModal()}
-        style={({ pressed }) => [
-          pressed && {
-            ...inputStyles.inputFocusState,
-            borderColor: primaryColor,
-          },
-          inputStyles.input,
-          dropdownStyle,
-          error && //order matters
-            error !== '' &&
-            !pressed && {
-              ...inputStyles.inputFocusErrorState,
-              ...dropdownErrorStyle,
-            },
-        ]}
+      <SelectedItemsView
+        placeholder={placeholder}
+        error={error}
+        getSelectedItemsLabel={getSelectedItemsLabel}
+        handleToggleModal={handleToggleModal}
+        isMultiple={isMultiple}
+        selectedItem={selectedItem}
+        selectedItems={selectedItems}
+        dropdownStyle={dropdownStyle}
+        selectedItemStyle={selectedItemStyle}
+        multipleSelectedItemStyle={multipleSelectedItemStyle}
+        dropdownErrorStyle={dropdownErrorStyle}
+        primaryColor={primaryColor}
         disabled={disabled}
-      >
-        <ScrollView
-          horizontal
-          alwaysBounceHorizontal
-          showsHorizontalScrollIndicator={false}
-        >
-          <View
-            style={styles.selectedItemsContainer}
-            onStartShouldSetResponder={() => true}
-          >
-            {isMultiple ? (
-              getSelectedItemsLabel().map((item: any, i: Number) => (
-                <TouchableOpacity
-                  onPress={() => handleToggleModal()}
-                  key={`SelectedItems${i}`}
-                  disabled={disabled}
-                >
-                  <Text
-                    style={[
-                      styles.selectedItems,
-                      { backgroundColor: primaryColor },
-                      multipleSelectedItemStyle,
-                    ]}
-                  >
-                    {item}
-                  </Text>
-                </TouchableOpacity>
-              ))
-            ) : (
-              <TouchableOpacity
-                onPress={() => handleToggleModal()}
-                disabled={disabled}
-              >
-                <Text style={[styles.blackText, selectedItemStyle]}>
-                  {getSelectedItemsLabel()}
-                </Text>
-              </TouchableOpacity>
-            )}
-          </View>
-
-          {!selectedItem && selectedItems?.length === 0 && (
-            <Text style={styles.blackText}>
-              {placeholder ?? 'Select an option'}
-            </Text>
-          )}
-        </ScrollView>
-        <View style={styles.iconStyle}>
-          <Image source={require('../src/asset/arrow-down.png')} />
-        </View>
-      </Pressable>
+      />
 
       {error && error !== '' && (
         <Text style={[styles.error, dropdownErrorTextStyle]}>{error}</Text>
@@ -126,19 +66,9 @@ const styles = StyleSheet.create({
     borderStyle: 'solid',
     borderColor: colors.red,
   },
-  iconStyle: { position: 'absolute', right: 25, top: 25 },
   error: { color: colors.red, marginTop: 8, ...typography.caption },
   helper: { marginTop: 8, color: colors.primary, ...typography.caption },
   dropdownInputContainer: { marginBottom: 23, width: '100%' },
-  selectedItemsContainer: { flexDirection: 'row', flexWrap: 'nowrap' },
-  selectedItems: {
-    color: colors.white,
-    paddingHorizontal: 10,
-    paddingVertical: 5,
-    borderRadius: 10,
-    backgroundColor: colors.primary,
-    marginRight: 10,
-  },
   blackText: { color: colors.black },
 });
 

package/src/SelectedItemsView.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Image,
+  TouchableOpacity,
+} from 'react-native';
+import { colors } from './styles/colors';
+import { inputStyles } from './styles/input';
+
+const SelectedItemsView = ({
+  placeholder,
+  error,
+  getSelectedItemsLabel,
+  handleToggleModal,
+  isMultiple,
+  selectedItem,
+  selectedItems,
+  dropdownStyle,
+  selectedItemStyle,
+  multipleSelectedItemStyle,
+  dropdownErrorStyle,
+  primaryColor,
+  disabled,
+}: any) => {
+  return (
+    <Pressable
+      onPress={() => handleToggleModal()}
+      style={({ pressed }) => [
+        pressed && {
+          ...inputStyles.inputFocusState,
+          borderColor: primaryColor,
+        },
+        inputStyles.input,
+        dropdownStyle,
+        error && //this must be last
+          error !== '' &&
+          !pressed && {
+            ...inputStyles.inputFocusErrorState,
+            ...dropdownErrorStyle,
+          },
+      ]}
+      disabled={disabled}
+    >
+      <ScrollView
+        horizontal
+        alwaysBounceHorizontal
+        showsHorizontalScrollIndicator={false}
+      >
+        <View
+          style={styles.selectedItemsContainer}
+          onStartShouldSetResponder={() => true}
+        >
+          {isMultiple ? (
+            getSelectedItemsLabel().map((item: any, i: Number) => (
+              <TouchableOpacity
+                onPress={() => handleToggleModal()}
+                key={`react-native-input-select-${Math.random()}-${i}`}
+                disabled={disabled}
+              >
+                <Text
+                  style={[
+                    styles.selectedItems,
+                    { backgroundColor: primaryColor },
+                    multipleSelectedItemStyle,
+                  ]}
+                >
+                  {item}
+                </Text>
+              </TouchableOpacity>
+            ))
+          ) : (
+            <TouchableOpacity
+              onPress={() => handleToggleModal()}
+              disabled={disabled}
+            >
+              <Text style={[styles.blackText, selectedItemStyle]}>
+                {getSelectedItemsLabel()}
+              </Text>
+            </TouchableOpacity>
+          )}
+        </View>
+
+        {!selectedItem && selectedItems?.length === 0 && (
+          <Text style={styles.blackText}>
+            {placeholder ?? 'Select an option'}
+          </Text>
+        )}
+      </ScrollView>
+      <View style={styles.iconStyle}>
+        <Image source={require('../src/asset/arrow-down.png')} />
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  iconStyle: { position: 'absolute', right: 25, top: 25 },
+  selectedItemsContainer: { flexDirection: 'row', flexWrap: 'nowrap' },
+  selectedItems: {
+    color: colors.white,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 10,
+    backgroundColor: colors.primary,
+    marginRight: 10,
+  },
+  blackText: { color: colors.black },
+});
+
+export default SelectedItemsView;

package/src/index.tsx

@@ -5,6 +5,7 @@ import DropdownList from './DropdownList';
 import { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';
 import type { DropdownProps } from './types/index.types';
 import { Input } from './Input';
+import { colors } from './styles/colors';
 
 export const DropdownSelect = (
   {
@@ -136,6 +137,7 @@ export const DropdownSelect = (
     setNewOptions(options);
   };
 
+  let primary = primaryColor || colors.gray;
   return (
     <>
       <Dropdown
@@ -156,7 +158,7 @@ export const DropdownSelect = (
         selectedItemStyle={selectedItemStyle}
         multipleSelectedItemStyle={multipleSelectedItemStyle}
         isMultiple={isMultiple}
-        primaryColor={primaryColor}
+        primaryColor={primary}
         disabled={disabled}
         {...rest}
       />
@@ -172,7 +174,7 @@ export const DropdownSelect = (
             value={searchValue}
             onChangeText={(text: string) => onSearch(text)}
             style={searchInputStyle}
-            primaryColor={primaryColor}
+            primaryColor={primary}
           />
         )}
         <DropdownList
@@ -184,7 +186,7 @@ export const DropdownSelect = (
           selectedItem={selectedItem}
           handleMultipleSelections={handleMultipleSelections}
           handleSingleSelection={handleSingleSelection}
-          primaryColor={primaryColor}
+          primaryColor={primary}
         />
       </CustomModal>
     </>

package/src/types/index.types.ts

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