react-native-input-select 0.3.0 → 0.7.0

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

package/lib/commonjs/styles/colors.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.colors = void 0;
 const colors = {
   primary: '#EF8031',
+  red: '#FA4169',
   black: '#000000',
   white: '#FFFFFF',
   dark: '#11142D',

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

@@ -1 +1 @@
-{"version":3,"sources":["colors.ts"],"names":["colors","primary","black","white","dark","gray","lightGray"],"mappings":";;;;;;AAAO,MAAMA,MAAW,GAAG;AACzBC,EAAAA,OAAO,EAAE,SADgB;AAEzBC,EAAAA,KAAK,EAAE,SAFkB;AAGzBC,EAAAA,KAAK,EAAE,SAHkB;AAIzBC,EAAAA,IAAI,EAAE,SAJmB;AAKzBC,EAAAA,IAAI,EAAE,SALmB;AAMzBC,EAAAA,SAAS,EAAE;AANc,CAApB","sourcesContent":["export const colors: any = {\n  primary: '#EF8031',\n  black: '#000000',\n  white: '#FFFFFF',\n  dark: '#11142D',\n  gray: '#808191',\n  lightGray: '#F7F7F7',\n};\n"]}
+{"version":3,"sources":["colors.ts"],"names":["colors","primary","red","black","white","dark","gray","lightGray"],"mappings":";;;;;;AAAO,MAAMA,MAAW,GAAG;AACzBC,EAAAA,OAAO,EAAE,SADgB;AAEzBC,EAAAA,GAAG,EAAE,SAFoB;AAGzBC,EAAAA,KAAK,EAAE,SAHkB;AAIzBC,EAAAA,KAAK,EAAE,SAJkB;AAKzBC,EAAAA,IAAI,EAAE,SALmB;AAMzBC,EAAAA,IAAI,EAAE,SANmB;AAOzBC,EAAAA,SAAS,EAAE;AAPc,CAApB","sourcesContent":["export const colors: any = {\n  primary: '#EF8031',\n  red: '#FA4169',\n  black: '#000000',\n  white: '#FFFFFF',\n  dark: '#11142D',\n  gray: '#808191',\n  lightGray: '#F7F7F7',\n};\n"]}

package/lib/commonjs/styles/input.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.inputStyles = void 0;
+
+var _reactNative = require("react-native");
+
+var _colors = require("./colors");
+
+const inputStyles = _reactNative.StyleSheet.create({
+  input: {
+    paddingVertical: 18,
+    paddingHorizontal: 23,
+    backgroundColor: _colors.colors.lightGray,
+    borderRadius: 8,
+    borderColor: _colors.colors.dark,
+    borderWidth: 1,
+    color: _colors.colors.dark,
+    width: '100%',
+    minHeight: 64
+  },
+  inputFocusState: {
+    borderWidth: 2,
+    borderStyle: 'solid',
+    borderColor: _colors.colors.primary,
+    borderRadius: 8
+  }
+});
+
+exports.inputStyles = inputStyles;
+//# sourceMappingURL=input.js.map

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

@@ -0,0 +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,OAHL;AAIfT,IAAAA,YAAY,EAAE;AAJC;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    borderRadius: 8,\n  },\n});\n"]}

package/lib/module/Dropdown.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, Text, Pressable, ScrollView, StyleSheet, Image } from 'react-native';
 import { colors } from './styles/colors';
+import { inputStyles } from './styles/input';
 import { typography } from './styles/typography';
 
 const Dropdown = _ref => {
@@ -10,27 +11,27 @@ const Dropdown = _ref => {
     helperText,
     error,
     getSelectedItemsLabel,
-    setOpen,
-    open,
+    handleToggleModal,
     isMultiple,
     selectedItem,
     selectedItems,
     labelStyle,
     dropdownStyle,
     dropdownContainerStyle,
-    selectedItemStyle
+    selectedItemStyle,
+    primaryColor
   } = _ref;
   return /*#__PURE__*/React.createElement(View, {
     style: [styles.dropdownInputContainer, dropdownContainerStyle]
   }, label && label !== '' && /*#__PURE__*/React.createElement(Text, {
     style: [styles.label, labelStyle]
   }, label), /*#__PURE__*/React.createElement(Pressable, {
-    onPress: () => setOpen(!open),
+    onPress: () => handleToggleModal(),
     style: _ref2 => {
       let {
         pressed
       } = _ref2;
-      return [pressed && styles.inputFocusState, styles.input, dropdownStyle];
+      return [pressed && inputStyles.inputFocusState, inputStyles.input, dropdownStyle];
     }
   }, /*#__PURE__*/React.createElement(ScrollView, {
     horizontal: true,
@@ -41,7 +42,9 @@ const Dropdown = _ref => {
     onStartShouldSetResponder: () => true
   }, isMultiple ? getSelectedItemsLabel().map((item, i) => /*#__PURE__*/React.createElement(Text, {
     key: `SelectedItems${i}`,
-    style: [styles.selectedItems, selectedItemStyle]
+    style: [styles.selectedItems, {
+      backgroundColor: primaryColor
+    }, selectedItemStyle]
   }, item)) : /*#__PURE__*/React.createElement(Text, {
     style: styles.blackText
   }, getSelectedItemsLabel())), !selectedItem && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0 && /*#__PURE__*/React.createElement(Text, {
@@ -63,27 +66,10 @@ const styles = StyleSheet.create({
     color: colors.gray,
     ...typography.caption
   },
-  input: {
-    paddingVertical: 18,
-    paddingHorizontal: 23,
-    backgroundColor: colors.lightGray,
-    borderRadius: 8,
-    borderColor: colors.dark,
-    borderWidth: 1,
-    color: colors.dark,
-    width: '100%',
-    minHeight: 64
-  },
-  inputFocusState: {
-    borderWidth: 2,
-    borderStyle: 'solid',
-    borderColor: colors.primary,
-    borderRadius: 8
-  },
   inputFocusErrorState: {
     borderWidth: 2,
     borderStyle: 'solid',
-    borderColor: colors.cliqkiRed
+    borderColor: colors.red
   },
   iconStyle: {
     position: 'absolute',
@@ -91,7 +77,7 @@ const styles = StyleSheet.create({
     top: 25
   },
   error: {
-    color: colors.cliqkiRed,
+    color: colors.red,
     marginTop: 8,
     ...typography.caption
   },

package/lib/module/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Dropdown.tsx"],"names":["React","View","Text","Pressable","ScrollView","StyleSheet","Image","colors","typography","Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","setOpen","open","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","styles","dropdownInputContainer","pressed","inputFocusState","input","selectedItemsContainer","map","item","i","blackText","length","iconStyle","require","helper","create","marginBottom","color","gray","caption","paddingVertical","paddingHorizontal","backgroundColor","lightGray","borderRadius","borderColor","dark","borderWidth","width","minHeight","borderStyle","primary","inputFocusErrorState","cliqkiRed","position","right","top","marginTop","flexDirection","flexWrap","white","marginRight","black"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  View,\n  Text,\n  Pressable,\n  ScrollView,\n  StyleSheet,\n  Image,\n} from 'react-native';\nimport { colors } from './styles/colors';\nimport { typography } from './styles/typography';\n\nconst Dropdown = ({\n  label,\n  placeholder,\n  helperText,\n  error,\n  getSelectedItemsLabel,\n  setOpen,\n  open,\n  isMultiple,\n  selectedItem,\n  selectedItems,\n  labelStyle,\n  dropdownStyle,\n  dropdownContainerStyle,\n  selectedItemStyle,\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={() => setOpen(!open)}\n        style={({ pressed }) => [\n          pressed && styles.inputFocusState,\n          styles.input,\n          dropdownStyle,\n        ]}\n      >\n        <ScrollView\n          horizontal\n          alwaysBounceHorizontal\n          showsHorizontalScrollIndicator={false}\n        >\n          <View\n            style={styles.selectedItemsContainer}\n            onStartShouldSetResponder={() => true}\n          >\n            {isMultiple ? (\n              getSelectedItemsLabel().map((item: any, i: Number) => (\n                <Text\n                  key={`SelectedItems${i}`}\n                  style={[styles.selectedItems, selectedItemStyle]}\n                >\n                  {item}\n                </Text>\n              ))\n            ) : (\n              <Text style={styles.blackText}>{getSelectedItemsLabel()}</Text>\n            )}\n          </View>\n\n          {!selectedItem && selectedItems?.length === 0 && (\n            <Text style={styles.blackText}>\n              {placeholder ?? 'Select an option'}\n            </Text>\n          )}\n        </ScrollView>\n        <View style={styles.iconStyle}>\n          <Image source={require('../src/asset/arrow-down.png')} />\n        </View>\n      </Pressable>\n\n      {error && error !== '' && <Text style={styles.error}>{error}</Text>}\n\n      {helperText && helperText !== '' && !error && (\n        <Text style={styles.helper}>{helperText}</Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  label: { marginBottom: 16, color: colors.gray, ...typography.caption },\n  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    borderRadius: 8,\n  },\n  inputFocusErrorState: {\n    borderWidth: 2,\n    borderStyle: 'solid',\n    borderColor: colors.cliqkiRed,\n  },\n  iconStyle: { position: 'absolute', right: 25, top: 25 },\n  error: { color: colors.cliqkiRed, 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","colors","inputStyles","typography","Dropdown","label","placeholder","helperText","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","labelStyle","dropdownStyle","dropdownContainerStyle","selectedItemStyle","primaryColor","styles","dropdownInputContainer","pressed","inputFocusState","input","selectedItemsContainer","map","item","i","backgroundColor","blackText","length","iconStyle","require","helper","create","marginBottom","color","gray","caption","inputFocusErrorState","borderWidth","borderStyle","borderColor","red","position","right","top","marginTop","primary","width","flexDirection","flexWrap","white","paddingHorizontal","paddingVertical","borderRadius","marginRight","black"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  View,\n  Text,\n  Pressable,\n  ScrollView,\n  StyleSheet,\n  Image,\n} from 'react-native';\nimport { colors } from './styles/colors';\nimport { inputStyles } from './styles/input';\nimport { typography } from './styles/typography';\n\nconst Dropdown = ({\n  label,\n  placeholder,\n  helperText,\n  error,\n  getSelectedItemsLabel,\n  handleToggleModal,\n  isMultiple,\n  selectedItem,\n  selectedItems,\n  labelStyle,\n  dropdownStyle,\n  dropdownContainerStyle,\n  selectedItemStyle,\n  primaryColor,\n}: any) => {\n  return (\n    <View style={[styles.dropdownInputContainer, dropdownContainerStyle]}>\n      {label && label !== '' && (\n        <Text style={[styles.label, labelStyle]}>{label}</Text>\n      )}\n      <Pressable\n        onPress={() => handleToggleModal()}\n        style={({ pressed }) => [\n          pressed && inputStyles.inputFocusState,\n          inputStyles.input,\n          dropdownStyle,\n        ]}\n      >\n        <ScrollView\n          horizontal\n          alwaysBounceHorizontal\n          showsHorizontalScrollIndicator={false}\n        >\n          <View\n            style={styles.selectedItemsContainer}\n            onStartShouldSetResponder={() => true}\n          >\n            {isMultiple ? (\n              getSelectedItemsLabel().map((item: any, i: Number) => (\n                <Text\n                  key={`SelectedItems${i}`}\n                  style={[\n                    styles.selectedItems,\n                    { backgroundColor: primaryColor },\n                    selectedItemStyle,\n                  ]}\n                >\n                  {item}\n                </Text>\n              ))\n            ) : (\n              <Text style={styles.blackText}>{getSelectedItemsLabel()}</Text>\n            )}\n          </View>\n\n          {!selectedItem && selectedItems?.length === 0 && (\n            <Text style={styles.blackText}>\n              {placeholder ?? 'Select an option'}\n            </Text>\n          )}\n        </ScrollView>\n        <View style={styles.iconStyle}>\n          <Image source={require('../src/asset/arrow-down.png')} />\n        </View>\n      </Pressable>\n\n      {error && error !== '' && <Text style={styles.error}>{error}</Text>}\n\n      {helperText && helperText !== '' && !error && (\n        <Text style={styles.helper}>{helperText}</Text>\n      )}\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  label: { marginBottom: 16, color: colors.gray, ...typography.caption },\n  inputFocusErrorState: {\n    borderWidth: 2,\n    borderStyle: 'solid',\n    borderColor: colors.red,\n  },\n  iconStyle: { position: 'absolute', right: 25, top: 25 },\n  error: { color: colors.red, marginTop: 8, ...typography.caption },\n  helper: { marginTop: 8, color: colors.primary, ...typography.caption },\n  dropdownInputContainer: { marginBottom: 23, width: '100%' },\n  selectedItemsContainer: { flexDirection: 'row', flexWrap: 'nowrap' },\n  selectedItems: {\n    color: colors.white,\n    paddingHorizontal: 10,\n    paddingVertical: 5,\n    borderRadius: 10,\n    backgroundColor: colors.primary,\n    marginRight: 10,\n  },\n  blackText: { color: colors.black },\n});\n\nexport default Dropdown;\n"]}

package/lib/module/DropdownList.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, FlatList, StyleSheet } from 'react-native';
+import { View, FlatList, StyleSheet, Text } from 'react-native';
 import DropdownListItem from './DropdownListItem';
 import { colors } from './styles/colors';
 
@@ -12,18 +12,16 @@ const DropdownList = _ref => {
     selectedItems,
     selectedItem,
     handleMultipleSelections,
-    handleSingleSelection
+    handleSingleSelection,
+    primaryColor
   } = _ref;
   return /*#__PURE__*/React.createElement(FlatList, {
     data: options,
     extraData: isMultiple ? selectedItems : selectedItem,
-    initialNumToRender: 5 // ListEmptyComponent={
-    //   <EmptyStateComponent
-    //     style={{alignItems: 'flex-start', marginTop: 30}}
-    //     message="Be the first to reply"
-    //   />
-    // }
-    ,
+    initialNumToRender: 5,
+    ListEmptyComponent: /*#__PURE__*/React.createElement(View, {
+      style: styles.emptyListStyle
+    }, /*#__PURE__*/React.createElement(Text, null, "No options available")),
     ItemSeparatorComponent: () => /*#__PURE__*/React.createElement(View, {
       style: styles.itemSeparatorStyle
     }),
@@ -32,7 +30,8 @@ const DropdownList = _ref => {
       optionValue,
       isMultiple,
       selectedOption: isMultiple ? selectedItems : selectedItem,
-      onChange: isMultiple ? handleMultipleSelections : handleSingleSelection
+      onChange: isMultiple ? handleMultipleSelections : handleSingleSelection,
+      primaryColor
     }),
     keyExtractor: (_item, index) => `Options${index}`
   });
@@ -48,7 +47,8 @@ const _renderItem = (_ref2, props) => {
     optionValue: props.optionValue,
     isMultiple: props.isMultiple,
     selectedOption: props.selectedOption,
-    onChange: props.onChange
+    onChange: props.onChange,
+    primaryColor: props.primaryColor
   });
 };
 
@@ -70,6 +70,11 @@ const styles = StyleSheet.create({
     backgroundColor: colors.gray,
     height: 1,
     opacity: 0.15
+  },
+  emptyListStyle: {
+    alignItems: 'center',
+    width: '100%',
+    marginVertical: 20
   }
 });
 export default DropdownList;

package/lib/module/DropdownList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DropdownList.tsx"],"names":["React","View","FlatList","StyleSheet","DropdownListItem","colors","DropdownList","options","optionLabel","optionValue","isMultiple","selectedItems","selectedItem","handleMultipleSelections","handleSingleSelection","styles","itemSeparatorStyle","item","_renderItem","selectedOption","onChange","_item","index","props","create","modalContainer","flex","justifyContent","modalBackgroundStyle","backgroundColor","modalOptionsContainer","maxHeight","white","borderTopLeftRadius","borderTopRightRadius","gray","height","opacity"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,QAAf,EAAyBC,UAAzB,QAA2C,cAA3C;AACA,OAAOC,gBAAP,MAA6B,oBAA7B;AACA,SAASC,MAAT,QAAuB,iBAAvB;;AAEA,MAAMC,YAAY,GAAG,QASV;AAAA,MATW;AACpBC,IAAAA,OADoB;AAEpBC,IAAAA,WAFoB;AAGpBC,IAAAA,WAHoB;AAIpBC,IAAAA,UAJoB;AAKpBC,IAAAA,aALoB;AAMpBC,IAAAA,YANoB;AAOpBC,IAAAA,wBAPoB;AAQpBC,IAAAA;AARoB,GASX;AACT,sBACE,oBAAC,QAAD;AACE,IAAA,IAAI,EAAEP,OADR;AAEE,IAAA,SAAS,EAAEG,UAAU,GAAGC,aAAH,GAAmBC,YAF1C;AAGE,IAAA,kBAAkB,EAAE,CAHtB,CAIE;AACA;AACA;AACA;AACA;AACA;AATF;AAUE,IAAA,sBAAsB,EAAE,mBAAM,oBAAC,IAAD;AAAM,MAAA,KAAK,EAAEG,MAAM,CAACC;AAApB,MAVhC;AAWE,IAAA,UAAU,EAAGC,IAAD,IACVC,WAAW,CAACD,IAAD,EAAO;AAChBT,MAAAA,WADgB;AAEhBC,MAAAA,WAFgB;AAGhBC,MAAAA,UAHgB;AAIhBS,MAAAA,cAAc,EAAET,UAAU,GAAGC,aAAH,GAAmBC,YAJ7B;AAKhBQ,MAAAA,QAAQ,EAAEV,UAAU,GAChBG,wBADgB,GAEhBC;AAPY,KAAP,CAZf;AAsBE,IAAA,YAAY,EAAE,CAACO,KAAD,EAAQC,KAAR,KAAmB,UAASA,KAAM;AAtBlD,IADF;AA0BD,CApCD;;AAsCA,MAAMJ,WAAW,GAAG,QAAgBK,KAAhB,KAA+B;AAAA,MAA9B;AAAEN,IAAAA;AAAF,GAA8B;AACjD,sBACE,oBAAC,gBAAD;AACE,IAAA,IAAI,EAAEA,IADR;AAEE,IAAA,WAAW,EAAEM,KAAK,CAACf,WAFrB;AAGE,IAAA,WAAW,EAAEe,KAAK,CAACd,WAHrB;AAIE,IAAA,UAAU,EAAEc,KAAK,CAACb,UAJpB;AAKE,IAAA,cAAc,EAAEa,KAAK,CAACJ,cALxB;AAME,IAAA,QAAQ,EAAEI,KAAK,CAACH;AANlB,IADF;AAUD,CAXD;;AAaA,MAAML,MAAM,GAAGZ,UAAU,CAACqB,MAAX,CAAkB;AAC/BC,EAAAA,cAAc,EAAE;AACdC,IAAAA,IAAI,EAAE,CADQ;AAEdC,IAAAA,cAAc,EAAE;AAFF,GADe;AAK/BC,EAAAA,oBAAoB,EAAE;AAAEC,IAAAA,eAAe,EAAE;AAAnB,GALS;AAM/BC,EAAAA,qBAAqB,EAAE;AACrBC,IAAAA,SAAS,EAAE,KADU;AAErBF,IAAAA,eAAe,EAAExB,MAAM,CAAC2B,KAFH;AAGrBC,IAAAA,mBAAmB,EAAE,EAHA;AAIrBC,IAAAA,oBAAoB,EAAE;AAJD,GANQ;AAY/BlB,EAAAA,kBAAkB,EAAE;AAClBa,IAAAA,eAAe,EAAExB,MAAM,CAAC8B,IADN;AAElBC,IAAAA,MAAM,EAAE,CAFU;AAGlBC,IAAAA,OAAO,EAAE;AAHS;AAZW,CAAlB,CAAf;AAmBA,eAAe/B,YAAf","sourcesContent":["import React from 'react';\nimport { View, FlatList, StyleSheet } from 'react-native';\nimport DropdownListItem from './DropdownListItem';\nimport { colors } from './styles/colors';\n\nconst DropdownList = ({\n  options,\n  optionLabel,\n  optionValue,\n  isMultiple,\n  selectedItems,\n  selectedItem,\n  handleMultipleSelections,\n  handleSingleSelection,\n}: any) => {\n  return (\n    <FlatList\n      data={options}\n      extraData={isMultiple ? selectedItems : selectedItem}\n      initialNumToRender={5}\n      // ListEmptyComponent={\n      //   <EmptyStateComponent\n      //     style={{alignItems: 'flex-start', marginTop: 30}}\n      //     message=\"Be the first to reply\"\n      //   />\n      // }\n      ItemSeparatorComponent={() => <View style={styles.itemSeparatorStyle} />}\n      renderItem={(item) =>\n        _renderItem(item, {\n          optionLabel,\n          optionValue,\n          isMultiple,\n          selectedOption: isMultiple ? selectedItems : selectedItem,\n          onChange: isMultiple\n            ? handleMultipleSelections\n            : handleSingleSelection,\n        })\n      }\n      keyExtractor={(_item, index) => `Options${index}`}\n    />\n  );\n};\n\nconst _renderItem = ({ item }: any, props: any) => {\n  return (\n    <DropdownListItem\n      item={item}\n      optionLabel={props.optionLabel}\n      optionValue={props.optionValue}\n      isMultiple={props.isMultiple}\n      selectedOption={props.selectedOption}\n      onChange={props.onChange}\n    />\n  );\n};\n\nconst styles = StyleSheet.create({\n  modalContainer: {\n    flex: 1,\n    justifyContent: 'flex-end',\n  },\n  modalBackgroundStyle: { backgroundColor: 'rgba(0, 0, 0, 0.5)' },\n  modalOptionsContainer: {\n    maxHeight: '50%',\n    backgroundColor: colors.white,\n    borderTopLeftRadius: 16,\n    borderTopRightRadius: 16,\n  },\n  itemSeparatorStyle: {\n    backgroundColor: colors.gray,\n    height: 1,\n    opacity: 0.15,\n  },\n});\n\nexport default DropdownList;\n"]}
+{"version":3,"sources":["DropdownList.tsx"],"names":["React","View","FlatList","StyleSheet","Text","DropdownListItem","colors","DropdownList","options","optionLabel","optionValue","isMultiple","selectedItems","selectedItem","handleMultipleSelections","handleSingleSelection","primaryColor","styles","emptyListStyle","itemSeparatorStyle","item","_renderItem","selectedOption","onChange","_item","index","props","create","modalContainer","flex","justifyContent","modalBackgroundStyle","backgroundColor","modalOptionsContainer","maxHeight","white","borderTopLeftRadius","borderTopRightRadius","gray","height","opacity","alignItems","width","marginVertical"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { View, FlatList, StyleSheet, Text } from 'react-native';\nimport DropdownListItem from './DropdownListItem';\nimport { colors } from './styles/colors';\n\nconst DropdownList = ({\n  options,\n  optionLabel,\n  optionValue,\n  isMultiple,\n  selectedItems,\n  selectedItem,\n  handleMultipleSelections,\n  handleSingleSelection,\n  primaryColor,\n}: any) => {\n  return (\n    <FlatList\n      data={options}\n      extraData={isMultiple ? selectedItems : selectedItem}\n      initialNumToRender={5}\n      ListEmptyComponent={\n        <View style={styles.emptyListStyle}>\n          <Text>No options available</Text>\n        </View>\n      }\n      ItemSeparatorComponent={() => <View style={styles.itemSeparatorStyle} />}\n      renderItem={(item) =>\n        _renderItem(item, {\n          optionLabel,\n          optionValue,\n          isMultiple,\n          selectedOption: isMultiple ? selectedItems : selectedItem,\n          onChange: isMultiple\n            ? handleMultipleSelections\n            : handleSingleSelection,\n          primaryColor,\n        })\n      }\n      keyExtractor={(_item, index) => `Options${index}`}\n    />\n  );\n};\n\nconst _renderItem = ({ item }: any, props: any) => {\n  return (\n    <DropdownListItem\n      item={item}\n      optionLabel={props.optionLabel}\n      optionValue={props.optionValue}\n      isMultiple={props.isMultiple}\n      selectedOption={props.selectedOption}\n      onChange={props.onChange}\n      primaryColor={props.primaryColor}\n    />\n  );\n};\n\nconst styles = StyleSheet.create({\n  modalContainer: {\n    flex: 1,\n    justifyContent: 'flex-end',\n  },\n  modalBackgroundStyle: { backgroundColor: 'rgba(0, 0, 0, 0.5)' },\n  modalOptionsContainer: {\n    maxHeight: '50%',\n    backgroundColor: colors.white,\n    borderTopLeftRadius: 16,\n    borderTopRightRadius: 16,\n  },\n  itemSeparatorStyle: {\n    backgroundColor: colors.gray,\n    height: 1,\n    opacity: 0.15,\n  },\n  emptyListStyle: { alignItems: 'center', width: '100%', marginVertical: 20 },\n});\n\nexport default DropdownList;\n"]}

package/lib/module/DropdownListItem.js

@@ -10,7 +10,8 @@ const DropdownListItem = _ref => {
     optionValue,
     isMultiple,
     selectedOption,
-    onChange
+    onChange,
+    primaryColor
   } = _ref;
   const selectedOptionValue = optionValue !== null && optionValue !== void 0 ? optionValue : 'value';
   return /*#__PURE__*/React.createElement(TouchableOpacity, {
@@ -24,12 +25,12 @@ const DropdownListItem = _ref => {
     boxType: "circle" //works on ios only
     ,
     tintColors: {
-      true: colors.primary
+      true: primaryColor || colors.primary
     } //android control
     ,
-    onCheckColor: colors.primary //ios checkmark colour control
+    onCheckColor: primaryColor || colors.primary //ios checkmark colour control
     ,
-    onTintColor: colors.primary //ios box colour control
+    onTintColor: primaryColor || colors.primary //ios box colour control
 
   })), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, null, item[optionLabel !== null && optionLabel !== void 0 ? optionLabel : 'label'])));
 };

package/lib/module/DropdownListItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DropdownListItem.tsx"],"names":["React","memo","View","Text","TouchableOpacity","StyleSheet","CheckBox","colors","DropdownListItem","item","optionLabel","optionValue","isMultiple","selectedOption","onChange","selectedOptionValue","styles","modalOptions","spacing","includes","true","primary","create","marginRight","paddingHorizontal","paddingVertical","flexDirection","alignItems"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,IAAhB,QAA4B,OAA5B;AACA,SAASC,IAAT,EAAeC,IAAf,EAAqBC,gBAArB,EAAuCC,UAAvC,QAAyD,cAAzD;AACA,OAAOC,QAAP,MAAqB,kCAArB;AACA,SAASC,MAAT,QAAuB,iBAAvB;;AAEA,MAAMC,gBAAgB,GAAG,QAOd;AAAA,MAPe;AACxBC,IAAAA,IADwB;AAExBC,IAAAA,WAFwB;AAGxBC,IAAAA,WAHwB;AAIxBC,IAAAA,UAJwB;AAKxBC,IAAAA,cALwB;AAMxBC,IAAAA;AANwB,GAOf;AACT,QAAMC,mBAAmB,GAAGJ,WAAH,aAAGA,WAAH,cAAGA,WAAH,GAAkB,OAA3C;AACA,sBACE,oBAAC,gBAAD;AACE,IAAA,KAAK,EAAEK,MAAM,CAACC,YADhB;AAEE,IAAA,OAAO,EAAE,MAAMH,QAAQ,CAACL,IAAI,CAACM,mBAAD,CAAL;AAFzB,kBAIE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEC,MAAM,CAACE;AAApB,kBACE,oBAAC,QAAD;AACE,IAAA,KAAK,EACHN,UAAU,GACNC,cAAc,CAACM,QAAf,CAAwBV,IAAI,CAACM,mBAAD,CAA5B,CADM,GAEN,CAACF,cAAD,EAAiBM,QAAjB,CAA0BV,IAAI,CAACM,mBAAD,CAA9B,CAJR;AAME,IAAA,QAAQ,EAAE,MAAMD,QAAQ,CAACL,IAAI,CAACM,mBAAD,CAAL,CAN1B;AAOE,IAAA,OAAO,EAAC,QAPV,CAOmB;AAPnB;AAQE,IAAA,UAAU,EAAE;AAAEK,MAAAA,IAAI,EAAEb,MAAM,CAACc;AAAf,KARd,CAQwC;AARxC;AASE,IAAA,YAAY,EAAEd,MAAM,CAACc,OATvB,CASgC;AAThC;AAUE,IAAA,WAAW,EAAEd,MAAM,CAACc,OAVtB,CAU+B;;AAV/B,IADF,CAJF,eAkBE,oBAAC,IAAD,qBACE,oBAAC,IAAD,QAAOZ,IAAI,CAACC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgB,OAAhB,CAAX,CADF,CAlBF,CADF;AAwBD,CAjCD;;AAmCA,MAAMM,MAAM,GAAGX,UAAU,CAACiB,MAAX,CAAkB;AAC/BJ,EAAAA,OAAO,EAAE;AAAEK,IAAAA,WAAW,EAAE;AAAf,GADsB;AAE/BN,EAAAA,YAAY,EAAE;AACZO,IAAAA,iBAAiB,EAAE,EADP;AAEZC,IAAAA,eAAe,EAAE,EAFL;AAGZC,IAAAA,aAAa,EAAE,KAHH;AAIZC,IAAAA,UAAU,EAAE;AAJA;AAFiB,CAAlB,CAAf;AAUA,4BAAe1B,IAAI,CAACO,gBAAD,CAAnB","sourcesContent":["import React, { memo } from 'react';\nimport { View, Text, TouchableOpacity, StyleSheet } from 'react-native';\nimport CheckBox from '@react-native-community/checkbox';\nimport { colors } from './styles/colors';\n\nconst DropdownListItem = ({\n  item,\n  optionLabel,\n  optionValue,\n  isMultiple,\n  selectedOption,\n  onChange,\n}: any) => {\n  const selectedOptionValue = optionValue ?? 'value';\n  return (\n    <TouchableOpacity\n      style={styles.modalOptions}\n      onPress={() => onChange(item[selectedOptionValue])}\n    >\n      <View style={styles.spacing}>\n        <CheckBox\n          value={\n            isMultiple\n              ? selectedOption.includes(item[selectedOptionValue])\n              : [selectedOption].includes(item[selectedOptionValue])\n          }\n          onChange={() => onChange(item[selectedOptionValue])}\n          boxType=\"circle\" //works on ios only\n          tintColors={{ true: colors.primary }} //android control\n          onCheckColor={colors.primary} //ios checkmark colour control\n          onTintColor={colors.primary} //ios box colour control\n        />\n      </View>\n      <View>\n        <Text>{item[optionLabel ?? 'label']}</Text>\n      </View>\n    </TouchableOpacity>\n  );\n};\n\nconst styles = StyleSheet.create({\n  spacing: { marginRight: 10 },\n  modalOptions: {\n    paddingHorizontal: 20,\n    paddingVertical: 10,\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n});\n\nexport default memo(DropdownListItem);\n"]}
+{"version":3,"sources":["DropdownListItem.tsx"],"names":["React","memo","View","Text","TouchableOpacity","StyleSheet","CheckBox","colors","DropdownListItem","item","optionLabel","optionValue","isMultiple","selectedOption","onChange","primaryColor","selectedOptionValue","styles","modalOptions","spacing","includes","true","primary","create","marginRight","paddingHorizontal","paddingVertical","flexDirection","alignItems"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,IAAhB,QAA4B,OAA5B;AACA,SAASC,IAAT,EAAeC,IAAf,EAAqBC,gBAArB,EAAuCC,UAAvC,QAAyD,cAAzD;AACA,OAAOC,QAAP,MAAqB,kCAArB;AACA,SAASC,MAAT,QAAuB,iBAAvB;;AAEA,MAAMC,gBAAgB,GAAG,QAQd;AAAA,MARe;AACxBC,IAAAA,IADwB;AAExBC,IAAAA,WAFwB;AAGxBC,IAAAA,WAHwB;AAIxBC,IAAAA,UAJwB;AAKxBC,IAAAA,cALwB;AAMxBC,IAAAA,QANwB;AAOxBC,IAAAA;AAPwB,GAQf;AACT,QAAMC,mBAAmB,GAAGL,WAAH,aAAGA,WAAH,cAAGA,WAAH,GAAkB,OAA3C;AACA,sBACE,oBAAC,gBAAD;AACE,IAAA,KAAK,EAAEM,MAAM,CAACC,YADhB;AAEE,IAAA,OAAO,EAAE,MAAMJ,QAAQ,CAACL,IAAI,CAACO,mBAAD,CAAL;AAFzB,kBAIE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEC,MAAM,CAACE;AAApB,kBACE,oBAAC,QAAD;AACE,IAAA,KAAK,EACHP,UAAU,GACNC,cAAc,CAACO,QAAf,CAAwBX,IAAI,CAACO,mBAAD,CAA5B,CADM,GAEN,CAACH,cAAD,EAAiBO,QAAjB,CAA0BX,IAAI,CAACO,mBAAD,CAA9B,CAJR;AAME,IAAA,QAAQ,EAAE,MAAMF,QAAQ,CAACL,IAAI,CAACO,mBAAD,CAAL,CAN1B;AAOE,IAAA,OAAO,EAAC,QAPV,CAOmB;AAPnB;AAQE,IAAA,UAAU,EAAE;AAAEK,MAAAA,IAAI,EAAEN,YAAY,IAAIR,MAAM,CAACe;AAA/B,KARd,CAQwD;AARxD;AASE,IAAA,YAAY,EAAEP,YAAY,IAAIR,MAAM,CAACe,OATvC,CASgD;AAThD;AAUE,IAAA,WAAW,EAAEP,YAAY,IAAIR,MAAM,CAACe,OAVtC,CAU+C;;AAV/C,IADF,CAJF,eAkBE,oBAAC,IAAD,qBACE,oBAAC,IAAD,QAAOb,IAAI,CAACC,WAAD,aAACA,WAAD,cAACA,WAAD,GAAgB,OAAhB,CAAX,CADF,CAlBF,CADF;AAwBD,CAlCD;;AAoCA,MAAMO,MAAM,GAAGZ,UAAU,CAACkB,MAAX,CAAkB;AAC/BJ,EAAAA,OAAO,EAAE;AAAEK,IAAAA,WAAW,EAAE;AAAf,GADsB;AAE/BN,EAAAA,YAAY,EAAE;AACZO,IAAAA,iBAAiB,EAAE,EADP;AAEZC,IAAAA,eAAe,EAAE,EAFL;AAGZC,IAAAA,aAAa,EAAE,KAHH;AAIZC,IAAAA,UAAU,EAAE;AAJA;AAFiB,CAAlB,CAAf;AAUA,4BAAe3B,IAAI,CAACO,gBAAD,CAAnB","sourcesContent":["import React, { memo } from 'react';\nimport { View, Text, TouchableOpacity, StyleSheet } from 'react-native';\nimport CheckBox from '@react-native-community/checkbox';\nimport { colors } from './styles/colors';\n\nconst DropdownListItem = ({\n  item,\n  optionLabel,\n  optionValue,\n  isMultiple,\n  selectedOption,\n  onChange,\n  primaryColor,\n}: any) => {\n  const selectedOptionValue = optionValue ?? 'value';\n  return (\n    <TouchableOpacity\n      style={styles.modalOptions}\n      onPress={() => onChange(item[selectedOptionValue])}\n    >\n      <View style={styles.spacing}>\n        <CheckBox\n          value={\n            isMultiple\n              ? selectedOption.includes(item[selectedOptionValue])\n              : [selectedOption].includes(item[selectedOptionValue])\n          }\n          onChange={() => onChange(item[selectedOptionValue])}\n          boxType=\"circle\" //works on ios only\n          tintColors={{ true: primaryColor || colors.primary }} //android control\n          onCheckColor={primaryColor || colors.primary} //ios checkmark colour control\n          onTintColor={primaryColor || colors.primary} //ios box colour control\n        />\n      </View>\n      <View>\n        <Text>{item[optionLabel ?? 'label']}</Text>\n      </View>\n    </TouchableOpacity>\n  );\n};\n\nconst styles = StyleSheet.create({\n  spacing: { marginRight: 10 },\n  modalOptions: {\n    paddingHorizontal: 20,\n    paddingVertical: 10,\n    flexDirection: 'row',\n    alignItems: 'center',\n  },\n});\n\nexport default memo(DropdownListItem);\n"]}

package/lib/module/Input.js

@@ -0,0 +1,33 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useState } from 'react';
+import { TextInput, StyleSheet, View } from 'react-native';
+import { inputStyles } from './styles/input';
+export const Input = _ref => {
+  let {
+    placeholder,
+    value,
+    onChangeText,
+    style,
+    ...rest
+  } = _ref;
+  const [isFocused, setFocus] = useState(false);
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(TextInput, _extends({
+    placeholder: placeholder,
+    style: [inputStyles.input, isFocused && inputStyles.inputFocusState, style],
+    onFocus: () => {
+      setFocus(true);
+    },
+    onBlur: () => setFocus(false),
+    value: value,
+    onChangeText: onChangeText
+  }, rest)));
+};
+const styles = StyleSheet.create({
+  container: {
+    margin: 23
+  }
+});
+//# sourceMappingURL=Input.js.map

package/lib/module/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Input.tsx"],"names":["React","useState","TextInput","StyleSheet","View","inputStyles","Input","placeholder","value","onChangeText","style","rest","isFocused","setFocus","styles","container","input","inputFocusState","create","margin"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,SAASC,SAAT,EAAoBC,UAApB,EAAgCC,IAAhC,QAA4C,cAA5C;AACA,SAASC,WAAT,QAA4B,gBAA5B;AAEA,OAAO,MAAMC,KAAK,GAAG,QAMV;AAAA,MANW;AACpBC,IAAAA,WADoB;AAEpBC,IAAAA,KAFoB;AAGpBC,IAAAA,YAHoB;AAIpBC,IAAAA,KAJoB;AAKpB,OAAGC;AALiB,GAMX;AACT,QAAM,CAACC,SAAD,EAAYC,QAAZ,IAAwBZ,QAAQ,CAAC,KAAD,CAAtC;AAEA,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEa,MAAM,CAACC;AAApB,kBACE,oBAAC,SAAD;AACE,IAAA,WAAW,EAAER,WADf;AAEE,IAAA,KAAK,EAAE,CACLF,WAAW,CAACW,KADP,EAELJ,SAAS,IAAIP,WAAW,CAACY,eAFpB,EAGLP,KAHK,CAFT;AAOE,IAAA,OAAO,EAAE,MAAM;AACbG,MAAAA,QAAQ,CAAC,IAAD,CAAR;AACD,KATH;AAUE,IAAA,MAAM,EAAE,MAAMA,QAAQ,CAAC,KAAD,CAVxB;AAWE,IAAA,KAAK,EAAEL,KAXT;AAYE,IAAA,YAAY,EAAEC;AAZhB,KAaME,IAbN,EADF,CADF;AAmBD,CA5BM;AA8BP,MAAMG,MAAM,GAAGX,UAAU,CAACe,MAAX,CAAkB;AAC/BH,EAAAA,SAAS,EAAE;AAAEI,IAAAA,MAAM,EAAE;AAAV;AADoB,CAAlB,CAAf","sourcesContent":["import React, { useState } from 'react';\nimport { TextInput, StyleSheet, View } from 'react-native';\nimport { inputStyles } from './styles/input';\n\nexport const Input = ({\n  placeholder,\n  value,\n  onChangeText,\n  style,\n  ...rest\n}: any) => {\n  const [isFocused, setFocus] = useState(false);\n\n  return (\n    <View style={styles.container}>\n      <TextInput\n        placeholder={placeholder}\n        style={[\n          inputStyles.input,\n          isFocused && inputStyles.inputFocusState,\n          style,\n        ]}\n        onFocus={() => {\n          setFocus(true);\n        }}\n        onBlur={() => setFocus(false)}\n        value={value}\n        onChangeText={onChangeText}\n        {...rest}\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: { margin: 23 },\n});\n"]}

package/lib/module/Modal.js

@@ -5,7 +5,7 @@ import { colors } from './styles/colors';
 const CustomModal = _ref => {
   let {
     open,
-    setOpen,
+    handleToggleModal,
     onRequestClose,
     modalBackgroundStyle,
     modalOptionsContainerStyle,
@@ -17,7 +17,7 @@ const CustomModal = _ref => {
     onRequestClose: () => onRequestClose(),
     animationType: "fade"
   }, /*#__PURE__*/React.createElement(TouchableOpacity, {
-    onPress: () => setOpen(!open),
+    onPress: () => handleToggleModal(),
     style: [styles.modalContainer, styles.modalBackgroundStyle, modalBackgroundStyle]
   }, /*#__PURE__*/React.createElement(SafeAreaView, {
     style: [styles.modalOptionsContainer, modalOptionsContainerStyle]

package/lib/module/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Modal.tsx"],"names":["React","Modal","TouchableOpacity","SafeAreaView","StyleSheet","colors","CustomModal","open","setOpen","onRequestClose","modalBackgroundStyle","modalOptionsContainerStyle","children","styles","modalContainer","modalOptionsContainer","create","flex","justifyContent","backgroundColor","maxHeight","white","borderTopLeftRadius","borderTopRightRadius"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SACEC,KADF,EAEEC,gBAFF,EAGEC,YAHF,EAIEC,UAJF,QAKO,cALP;AAMA,SAASC,MAAT,QAAuB,iBAAvB;;AAEA,MAAMC,WAAW,GAAG,QAOT;AAAA,MAPU;AACnBC,IAAAA,IADmB;AAEnBC,IAAAA,OAFmB;AAGnBC,IAAAA,cAHmB;AAInBC,IAAAA,oBAJmB;AAKnBC,IAAAA,0BALmB;AAMnBC,IAAAA;AANmB,GAOV;AACT,sBACE,oBAAC,KAAD;AACE,IAAA,WAAW,EAAE,IADf;AAEE,IAAA,OAAO,EAAEL,IAFX;AAGE,IAAA,cAAc,EAAE,MAAME,cAAc,EAHtC;AAIE,IAAA,aAAa,EAAC;AAJhB,kBAME,oBAAC,gBAAD;AACE,IAAA,OAAO,EAAE,MAAMD,OAAO,CAAC,CAACD,IAAF,CADxB;AAEE,IAAA,KAAK,EAAE,CACLM,MAAM,CAACC,cADF,EAELD,MAAM,CAACH,oBAFF,EAGLA,oBAHK;AAFT,kBAQE,oBAAC,YAAD;AACE,IAAA,KAAK,EAAE,CAACG,MAAM,CAACE,qBAAR,EAA+BJ,0BAA/B;AADT,KAGGC,QAHH,CARF,CANF,CADF;AAuBD,CA/BD;;AAiCA,MAAMC,MAAM,GAAGT,UAAU,CAACY,MAAX,CAAkB;AAC/BF,EAAAA,cAAc,EAAE;AACdG,IAAAA,IAAI,EAAE,CADQ;AAEdC,IAAAA,cAAc,EAAE;AAFF,GADe;AAK/BR,EAAAA,oBAAoB,EAAE;AAAES,IAAAA,eAAe,EAAE;AAAnB,GALS;AAM/BJ,EAAAA,qBAAqB,EAAE;AACrBK,IAAAA,SAAS,EAAE,KADU;AAErBD,IAAAA,eAAe,EAAEd,MAAM,CAACgB,KAFH;AAGrBC,IAAAA,mBAAmB,EAAE,EAHA;AAIrBC,IAAAA,oBAAoB,EAAE;AAJD;AANQ,CAAlB,CAAf;AAcA,eAAejB,WAAf","sourcesContent":["import React from 'react';\nimport {\n  Modal,\n  TouchableOpacity,\n  SafeAreaView,\n  StyleSheet,\n} from 'react-native';\nimport { colors } from './styles/colors';\n\nconst CustomModal = ({\n  open,\n  setOpen,\n  onRequestClose,\n  modalBackgroundStyle,\n  modalOptionsContainerStyle,\n  children,\n}: any) => {\n  return (\n    <Modal\n      transparent={true}\n      visible={open}\n      onRequestClose={() => onRequestClose()}\n      animationType=\"fade\"\n    >\n      <TouchableOpacity\n        onPress={() => setOpen(!open)}\n        style={[\n          styles.modalContainer,\n          styles.modalBackgroundStyle,\n          modalBackgroundStyle,\n        ]}\n      >\n        <SafeAreaView\n          style={[styles.modalOptionsContainer, modalOptionsContainerStyle]}\n        >\n          {children}\n        </SafeAreaView>\n      </TouchableOpacity>\n    </Modal>\n  );\n};\n\nconst styles = StyleSheet.create({\n  modalContainer: {\n    flex: 1,\n    justifyContent: 'flex-end',\n  },\n  modalBackgroundStyle: { backgroundColor: 'rgba(0, 0, 0, 0.5)' },\n  modalOptionsContainer: {\n    maxHeight: '50%',\n    backgroundColor: colors.white,\n    borderTopLeftRadius: 16,\n    borderTopRightRadius: 16,\n  },\n});\n\nexport default CustomModal;\n"]}
+{"version":3,"sources":["Modal.tsx"],"names":["React","Modal","TouchableOpacity","SafeAreaView","StyleSheet","colors","CustomModal","open","handleToggleModal","onRequestClose","modalBackgroundStyle","modalOptionsContainerStyle","children","styles","modalContainer","modalOptionsContainer","create","flex","justifyContent","backgroundColor","maxHeight","white","borderTopLeftRadius","borderTopRightRadius"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SACEC,KADF,EAEEC,gBAFF,EAGEC,YAHF,EAIEC,UAJF,QAKO,cALP;AAMA,SAASC,MAAT,QAAuB,iBAAvB;;AAEA,MAAMC,WAAW,GAAG,QAOT;AAAA,MAPU;AACnBC,IAAAA,IADmB;AAEnBC,IAAAA,iBAFmB;AAGnBC,IAAAA,cAHmB;AAInBC,IAAAA,oBAJmB;AAKnBC,IAAAA,0BALmB;AAMnBC,IAAAA;AANmB,GAOV;AACT,sBACE,oBAAC,KAAD;AACE,IAAA,WAAW,EAAE,IADf;AAEE,IAAA,OAAO,EAAEL,IAFX;AAGE,IAAA,cAAc,EAAE,MAAME,cAAc,EAHtC;AAIE,IAAA,aAAa,EAAC;AAJhB,kBAME,oBAAC,gBAAD;AACE,IAAA,OAAO,EAAE,MAAMD,iBAAiB,EADlC;AAEE,IAAA,KAAK,EAAE,CACLK,MAAM,CAACC,cADF,EAELD,MAAM,CAACH,oBAFF,EAGLA,oBAHK;AAFT,kBAQE,oBAAC,YAAD;AACE,IAAA,KAAK,EAAE,CAACG,MAAM,CAACE,qBAAR,EAA+BJ,0BAA/B;AADT,KAGGC,QAHH,CARF,CANF,CADF;AAuBD,CA/BD;;AAiCA,MAAMC,MAAM,GAAGT,UAAU,CAACY,MAAX,CAAkB;AAC/BF,EAAAA,cAAc,EAAE;AACdG,IAAAA,IAAI,EAAE,CADQ;AAEdC,IAAAA,cAAc,EAAE;AAFF,GADe;AAK/BR,EAAAA,oBAAoB,EAAE;AAAES,IAAAA,eAAe,EAAE;AAAnB,GALS;AAM/BJ,EAAAA,qBAAqB,EAAE;AACrBK,IAAAA,SAAS,EAAE,KADU;AAErBD,IAAAA,eAAe,EAAEd,MAAM,CAACgB,KAFH;AAGrBC,IAAAA,mBAAmB,EAAE,EAHA;AAIrBC,IAAAA,oBAAoB,EAAE;AAJD;AANQ,CAAlB,CAAf;AAcA,eAAejB,WAAf","sourcesContent":["import React from 'react';\nimport {\n  Modal,\n  TouchableOpacity,\n  SafeAreaView,\n  StyleSheet,\n} from 'react-native';\nimport { colors } from './styles/colors';\n\nconst CustomModal = ({\n  open,\n  handleToggleModal,\n  onRequestClose,\n  modalBackgroundStyle,\n  modalOptionsContainerStyle,\n  children,\n}: any) => {\n  return (\n    <Modal\n      transparent={true}\n      visible={open}\n      onRequestClose={() => onRequestClose()}\n      animationType=\"fade\"\n    >\n      <TouchableOpacity\n        onPress={() => handleToggleModal()}\n        style={[\n          styles.modalContainer,\n          styles.modalBackgroundStyle,\n          modalBackgroundStyle,\n        ]}\n      >\n        <SafeAreaView\n          style={[styles.modalOptionsContainer, modalOptionsContainerStyle]}\n        >\n          {children}\n        </SafeAreaView>\n      </TouchableOpacity>\n    </Modal>\n  );\n};\n\nconst styles = StyleSheet.create({\n  modalContainer: {\n    flex: 1,\n    justifyContent: 'flex-end',\n  },\n  modalBackgroundStyle: { backgroundColor: 'rgba(0, 0, 0, 0.5)' },\n  modalOptionsContainer: {\n    maxHeight: '50%',\n    backgroundColor: colors.white,\n    borderTopLeftRadius: 16,\n    borderTopRightRadius: 16,\n  },\n});\n\nexport default CustomModal;\n"]}

package/lib/module/constants/index.js

@@ -0,0 +1,3 @@
+export const DEFAULT_OPTION_LABEL = 'label';
+export const DEFAULT_OPTION_VALUE = 'value';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["DEFAULT_OPTION_LABEL","DEFAULT_OPTION_VALUE"],"mappings":"AAAA,OAAO,MAAMA,oBAAoB,GAAG,OAA7B;AACP,OAAO,MAAMC,oBAAoB,GAAG,OAA7B","sourcesContent":["export const DEFAULT_OPTION_LABEL = 'label';\nexport const DEFAULT_OPTION_VALUE = 'value';\n"]}

package/lib/module/index.js

@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import Dropdown from './Dropdown';
 import CustomModal from './Modal';
 import DropdownList from './DropdownList';
+import { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';
+import { Input } from './Input';
 export const DropdownSelect = _ref => {
   let {
     placeholder,
@@ -14,18 +16,23 @@ export const DropdownSelect = _ref => {
     onValueChange,
     selectedValue,
     isMultiple,
+    isSearchable,
     labelStyle,
     dropdownStyle,
     dropdownContainerStyle,
     selectedItemStyle,
     modalBackgroundStyle,
-    modalOptionsContainer
+    modalOptionsContainer,
+    searchInputStyle,
+    primaryColor
   } = _ref;
+  const [newOptions, setNewOptions] = useState(options ? options : []);
   const [open, setOpen] = useState(false);
   const [selectedItem, setSelectedItem] = useState(selectedValue); //for single selection
 
   const [selectedItems, setSelectedItems] = useState(Array.isArray(selectedValue) ? selectedValue : selectedValue === '' || selectedValue === undefined ? [] : [selectedValue]); //for multiple selection
 
+  const [searchValue, setSearchValue] = useState('');
   /*===========================================
    * Selection handlers
    *==========================================*/
@@ -63,14 +70,37 @@ export const DropdownSelect = _ref => {
       selectedItems && selectedItems.forEach(element => {
         var _options$find;
 
-        let selectedItemLabel = options && ((_options$find = options.find(item => item[optionValue !== null && optionValue !== void 0 ? optionValue : 'value'] === element)) === null || _options$find === void 0 ? void 0 : _options$find[optionLabel]);
+        let selectedItemLabel = options && ((_options$find = options.find(item => item[optionValue !== null && optionValue !== void 0 ? optionValue : DEFAULT_OPTION_VALUE] === element)) === null || _options$find === void 0 ? void 0 : _options$find[optionLabel]);
         selectedLabels.push(selectedItemLabel);
       });
       return selectedLabels;
     }
 
-    let selectedItemLabel = options && options.find(item => item[optionValue !== null && optionValue !== void 0 ? optionValue : 'value'] === selectedItem);
-    return selectedItemLabel === null || selectedItemLabel === void 0 ? void 0 : selectedItemLabel[optionLabel];
+    let selectedItemLabel = options && options.find(item => item[optionValue !== null && optionValue !== void 0 ? optionValue : DEFAULT_OPTION_VALUE] === selectedItem);
+    return selectedItemLabel === null || selectedItemLabel === void 0 ? void 0 : selectedItemLabel[optionLabel !== null && optionLabel !== void 0 ? optionLabel : DEFAULT_OPTION_LABEL];
+  };
+  /*===========================================
+   * Search
+   *==========================================*/
+
+
+  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();
+    });
+    setNewOptions(searchResults);
+  };
+  /*===========================================
+   * Modal
+   *==========================================*/
+
+
+  const handleToggleModal = () => {
+    setOpen(!open);
+    setSearchValue('');
+    setNewOptions(options);
   };
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, {
@@ -81,28 +111,33 @@ export const DropdownSelect = _ref => {
     getSelectedItemsLabel: getSelectedItemsLabel,
     selectedItem: selectedItem,
     selectedItems: selectedItems,
-    setOpen: setOpen,
-    open: open,
+    handleToggleModal: handleToggleModal,
     labelStyle: labelStyle,
     dropdownStyle: dropdownStyle,
     dropdownContainerStyle: dropdownContainerStyle,
     selectedItemStyle: selectedItemStyle,
-    isMultiple: isMultiple
+    isMultiple: isMultiple,
+    primaryColor: primaryColor
   }), /*#__PURE__*/React.createElement(CustomModal, {
     open: open,
-    setOpen: setOpen,
+    handleToggleModal: handleToggleModal,
     modalBackgroundStyle: modalBackgroundStyle,
     modalOptionsContainer: modalOptionsContainer,
     onRequestClose: () => {}
-  }, /*#__PURE__*/React.createElement(DropdownList, {
-    options: options,
+  }, isSearchable && /*#__PURE__*/React.createElement(Input, {
+    value: searchValue,
+    onChangeText: text => onSearch(text),
+    style: searchInputStyle
+  }), /*#__PURE__*/React.createElement(DropdownList, {
+    options: newOptions,
     optionLabel: optionLabel,
     optionValue: optionValue,
     isMultiple: isMultiple,
     selectedItems: selectedItems,
     selectedItem: selectedItem,
     handleMultipleSelections: handleMultipleSelections,
-    handleSingleSelection: handleSingleSelection
+    handleSingleSelection: handleSingleSelection,
+    primaryColor: primaryColor
   })));
 };
 export default DropdownSelect;