react-native-input-select 0.22.0 → 0.24.0

package/lib/module/components/Dropdown/{SelectedItemsView.js → DropdownSelectedItemsView.js}

@@ -2,8 +2,7 @@ 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 => {
+const DropdownSelectedItemsView = _ref => {
   let {
     placeholder,
     error,
@@ -25,10 +24,13 @@ const SelectedItemsView = _ref => {
       let {
         pressed
       } = _ref2;
-      return [pressed && { ...inputStyles.inputFocusState,
+      return [pressed && {
+        ...inputStyles.inputFocusState,
         borderColor: primaryColor
-      }, inputStyles.input, dropdownStyle, error && //this must be last
-      error !== '' && !pressed && { ...inputStyles.inputFocusErrorState,
+      }, inputStyles.input, dropdownStyle, error &&
+      //this must be last
+      error !== '' && !pressed && {
+        ...inputStyles.inputFocusErrorState,
         ...dropdownErrorStyle
       }];
     },
@@ -55,13 +57,12 @@ const SelectedItemsView = _ref => {
     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, {
+  }, placeholder ?? 'Select an option')), /*#__PURE__*/React.createElement(View, {
     style: styles.iconStyle
   }, /*#__PURE__*/React.createElement(Image, {
     source: require('../../asset/arrow-down.png')
   })));
 };
-
 const styles = StyleSheet.create({
   iconStyle: {
     position: 'absolute',
@@ -78,11 +79,12 @@ const styles = StyleSheet.create({
     paddingVertical: 5,
     borderRadius: 10,
     backgroundColor: colors.primary,
-    marginRight: 10
+    marginRight: 10,
+    overflow: 'hidden'
   },
   blackText: {
     color: colors.black
   }
 });
-export default SelectedItemsView;
-//# sourceMappingURL=SelectedItemsView.js.map
+export default DropdownSelectedItemsView;
+//# sourceMappingURL=DropdownSelectedItemsView.js.map

package/lib/module/components/Dropdown/DropdownSelectedItemsView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","Pressable","ScrollView","StyleSheet","Image","TouchableOpacity","colors","inputStyles","DropdownSelectedItemsView","_ref","placeholder","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","dropdownStyle","selectedItemStyle","multipleSelectedItemStyle","dropdownErrorStyle","primaryColor","disabled","createElement","onPress","style","_ref2","pressed","inputFocusState","borderColor","input","inputFocusErrorState","horizontal","alwaysBounceHorizontal","showsHorizontalScrollIndicator","styles","selectedItemsContainer","onStartShouldSetResponder","map","item","i","key","Math","random","backgroundColor","blackText","length","iconStyle","source","require","create","position","right","top","flexDirection","flexWrap","color","white","paddingHorizontal","paddingVertical","borderRadius","primary","marginRight","overflow","black"],"sources":["DropdownSelectedItemsView.tsx"],"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 DropdownSelectedItemsView = ({\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('../../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    overflow: 'hidden',\n  },\n  blackText: { color: colors.black },\n});\n\nexport default DropdownSelectedItemsView;\n"],"mappings":"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"}

package/lib/module/components/Input/index.js

@@ -1,5 +1,4 @@
-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); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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';

package/lib/module/components/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":["React","useState","TextInput","StyleSheet","View","inputStyles","Input","placeholder","value","onChangeText","style","primaryColor","rest","isFocused","setFocus","styles","container","input","inputFocusState","borderColor","create","margin"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,QAAhB,QAAgC,OAAhC;AACA,SAASC,SAAT,EAAoBC,UAApB,EAAgCC,IAAhC,QAA4C,cAA5C;AACA,SAASC,WAAT,QAA4B,oBAA5B;AAEA,OAAO,MAAMC,KAAK,GAAG,QAOV;AAAA,MAPW;AACpBC,IAAAA,WADoB;AAEpBC,IAAAA,KAFoB;AAGpBC,IAAAA,YAHoB;AAIpBC,IAAAA,KAJoB;AAKpBC,IAAAA,YALoB;AAMpB,OAAGC;AANiB,GAOX;AACT,QAAM,CAACC,SAAD,EAAYC,QAAZ,IAAwBb,QAAQ,CAAC,KAAD,CAAtC;AAEA,sBACE,oBAAC,IAAD;AAAM,IAAA,KAAK,EAAEc,MAAM,CAACC;AAApB,kBACE,oBAAC,SAAD;AACE,IAAA,WAAW,EAAET,WADf;AAEE,IAAA,KAAK,EAAE,CACLF,WAAW,CAACY,KADP,EAELJ,SAAS,IACPR,WAAW,CAACa,eADd,IACiC;AAAEC,MAAAA,WAAW,EAAER;AAAf,KAH5B,EAILD,KAJK,CAFT;AAQE,IAAA,OAAO,EAAE,MAAM;AACbI,MAAAA,QAAQ,CAAC,IAAD,CAAR;AACD,KAVH;AAWE,IAAA,MAAM,EAAE,MAAMA,QAAQ,CAAC,KAAD,CAXxB;AAYE,IAAA,KAAK,EAAEN,KAZT;AAaE,IAAA,YAAY,EAAEC;AAbhB,KAcMG,IAdN,EADF,CADF;AAoBD,CA9BM;AAgCP,MAAMG,MAAM,GAAGZ,UAAU,CAACiB,MAAX,CAAkB;AAC/BJ,EAAAA,SAAS,EAAE;AAAEK,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  primaryColor,\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 &&\n            inputStyles.inputFocusState && { borderColor: primaryColor },\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"]}
+{"version":3,"names":["React","useState","TextInput","StyleSheet","View","inputStyles","Input","_ref","placeholder","value","onChangeText","style","primaryColor","rest","isFocused","setFocus","createElement","styles","container","_extends","input","inputFocusState","borderColor","onFocus","onBlur","create","margin"],"sources":["index.tsx"],"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  primaryColor,\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 &&\n            inputStyles.inputFocusState && { borderColor: primaryColor },\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"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,SAASC,SAAS,EAAEC,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC1D,SAASC,WAAW,QAAQ,oBAAoB;AAEhD,OAAO,MAAMC,KAAK,GAAGC,IAAA,IAOV;EAAA,IAPW;IACpBC,WAAW;IACXC,KAAK;IACLC,YAAY;IACZC,KAAK;IACLC,YAAY;IACZ,GAAGC;EACA,CAAC,GAAAN,IAAA;EACJ,MAAM,CAACO,SAAS,EAAEC,QAAQ,CAAC,GAAGd,QAAQ,CAAC,KAAK,CAAC;EAE7C,oBACED,KAAA,CAAAgB,aAAA,CAACZ,IAAI;IAACO,KAAK,EAAEM,MAAM,CAACC;EAAU,gBAC5BlB,KAAA,CAAAgB,aAAA,CAACd,SAAS,EAAAiB,QAAA;IACRX,WAAW,EAAEA,WAAY;IACzBG,KAAK,EAAE,CACLN,WAAW,CAACe,KAAK,EACjBN,SAAS,IACPT,WAAW,CAACgB,eAAe,IAAI;MAAEC,WAAW,EAAEV;IAAa,CAAC,EAC9DD,KAAK,CACL;IACFY,OAAO,EAAEA,CAAA,KAAM;MACbR,QAAQ,CAAC,IAAI,CAAC;IAChB,CAAE;IACFS,MAAM,EAAEA,CAAA,KAAMT,QAAQ,CAAC,KAAK,CAAE;IAC9BN,KAAK,EAAEA,KAAM;IACbC,YAAY,EAAEA;EAAa,GACvBG,IAAI,EACR,CACG;AAEX,CAAC;AAED,MAAMI,MAAM,GAAGd,UAAU,CAACsB,MAAM,CAAC;EAC/BP,SAAS,EAAE;IAAEQ,MAAM,EAAE;EAAG;AAC1B,CAAC,CAAC"}

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

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

package/lib/module/index.js

@@ -1,12 +1,13 @@
-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); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 { TouchableOpacity, StyleSheet, View } from 'react-native';
 import Dropdown from './components/Dropdown/Dropdown';
 import DropdownList from './components/Dropdown/DropdownList';
 import CustomModal from './components/CustomModal';
-import { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';
 import { Input } from './components/Input';
+import CheckBox from './components/CheckBox';
 import { colors } from './styles/colors';
+import { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';
 export const DropdownSelect = _ref => {
   let {
     placeholder,
@@ -40,85 +41,94 @@ export const DropdownSelect = _ref => {
   } = _ref;
   const [newOptions, setNewOptions] = useState(options ? options : []);
   const [open, setOpen] = useState(false);
+  const [selectAll, setSelectAll] = 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
    *==========================================*/
-
   const handleSingleSelection = value => {
     if (selectedItem === value) {
       setSelectedItem(null);
     } else {
       setSelectedItem(value);
       onValueChange(value); //send value to parent
-
       setOpen(false); //close modal upon selection
     }
   };
 
   const handleMultipleSelections = value => {
     let selectedValues = [...selectedItems];
-
     if (selectedValues.includes(value)) {
       selectedValues = selectedValues.filter(item => item !== value);
     } else {
       selectedValues.push(value);
     }
-
     setSelectedItems(selectedValues);
     onValueChange(selectedValues); //send value to parent
+
+    if (newOptions.length === selectedValues.length) {
+      setSelectAll(true);
+    } else {
+      setSelectAll(false);
+    }
+  };
+  const handleSelectAll = () => {
+    setSelectAll(prevVal => {
+      const selectedValues = [];
+      if (!prevVal) {
+        for (let i = 0; i < newOptions.length; i++) {
+          selectedValues.push(newOptions[i][optionValue]);
+        }
+      }
+      setSelectedItems(selectedValues);
+      onValueChange(selectedValues); //send value to parent
+      return !prevVal;
+    });
   };
+
   /*===========================================
    * Get label handler
    *==========================================*/
-
-
   const getSelectedItemsLabel = () => {
     if (isMultiple) {
       let selectedLabels = [];
       selectedItems && selectedItems.forEach(element => {
         var _options$find;
-
-        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]);
+        let selectedItemLabel = options && ((_options$find = options.find(item => item[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 : DEFAULT_OPTION_VALUE] === selectedItem);
-    return selectedItemLabel === null || selectedItemLabel === void 0 ? void 0 : selectedItemLabel[optionLabel !== null && optionLabel !== void 0 ? optionLabel : DEFAULT_OPTION_LABEL];
+    let selectedItemLabel = options && options.find(item => item[optionValue ?? DEFAULT_OPTION_VALUE] === selectedItem);
+    return selectedItemLabel === null || selectedItemLabel === void 0 ? void 0 : selectedItemLabel[optionLabel ?? DEFAULT_OPTION_LABEL];
   };
+
   /*===========================================
    * Search
    *==========================================*/
-
-
   const onSearch = value => {
     setSearchValue(value);
     let searchText = value.toString().toLocaleLowerCase().trim();
     const regexFilter = new RegExp(searchText, 'i');
     const searchResults = options.filter(item => {
-      if (item[optionLabel !== null && optionLabel !== void 0 ? optionLabel : DEFAULT_OPTION_LABEL].toString().toLowerCase().search(regexFilter) !== -1 || item[optionValue !== null && optionValue !== void 0 ? optionValue : DEFAULT_OPTION_VALUE].toString(regexFilter).toLowerCase().search(regexFilter) !== -1) {
+      if (item[optionLabel ?? DEFAULT_OPTION_LABEL].toString().toLowerCase().search(regexFilter) !== -1 || item[optionValue ?? DEFAULT_OPTION_VALUE].toString(regexFilter).toLowerCase().search(regexFilter) !== -1) {
         return item;
       }
     });
     setNewOptions(searchResults);
   };
+
   /*===========================================
    * Modal
    *==========================================*/
-
-
   const handleToggleModal = () => {
     setOpen(!open);
     setSearchValue('');
     setNewOptions(options);
   };
-
   let primary = primaryColor || colors.gray;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, _extends({
     label: label,
@@ -151,7 +161,19 @@ export const DropdownSelect = _ref => {
     onChangeText: text => onSearch(text),
     style: searchInputStyle,
     primaryColor: primary
-  }), /*#__PURE__*/React.createElement(DropdownList, {
+  }), isMultiple && newOptions.length > 1 && /*#__PURE__*/React.createElement(View, {
+    style: styles.optionsContainerStyle
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: () => {}
+  }, /*#__PURE__*/React.createElement(CheckBox, {
+    value: selectAll,
+    label: selectAll ? 'Clear all' : 'Select all',
+    onChange: () => handleSelectAll(),
+    primaryColor: primary,
+    checkboxSize: checkboxSize,
+    checkboxStyle: checkboxStyle,
+    checkboxLabelStyle: checkboxLabelStyle
+  }))), /*#__PURE__*/React.createElement(DropdownList, {
     options: newOptions,
     optionLabel: optionLabel,
     optionValue: optionValue,
@@ -166,5 +188,12 @@ export const DropdownSelect = _ref => {
     checkboxLabelStyle: checkboxLabelStyle
   })));
 };
+const styles = StyleSheet.create({
+  optionsContainerStyle: {
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    flexDirection: 'row'
+  }
+});
 export default DropdownSelect;
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":["React","useState","Dropdown","DropdownList","CustomModal","DEFAULT_OPTION_LABEL","DEFAULT_OPTION_VALUE","Input","colors","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","checkboxSize","checkboxStyle","checkboxLabelStyle","rest","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 './components/Dropdown/Dropdown';\nimport DropdownList from './components/Dropdown/DropdownList';\nimport CustomModal from './components/CustomModal';\nimport { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';\nimport type { DropdownProps } from './types/index.types';\nimport { Input } from './components/Input';\nimport { colors } from './styles/colors';\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  dropdownErrorStyle,\n  dropdownErrorTextStyle,\n  dropdownHelperTextStyle,\n  selectedItemStyle,\n  multipleSelectedItemStyle,\n  modalBackgroundStyle,\n  modalOptionsContainer,\n  searchInputStyle,\n  primaryColor,\n  disabled,\n  checkboxSize,\n  checkboxStyle,\n  checkboxLabelStyle,\n  ...rest\n}: DropdownProps) => {\n  const [newOptions, setNewOptions] = useState(options ? options : []);\n  const [open, setOpen] = useState(false);\n  const [selectedItem, setSelectedItem] = useState(selectedValue); //for single selection\n  const [selectedItems, setSelectedItems] = useState(\n    Array.isArray(selectedValue)\n      ? selectedValue\n      : selectedValue === '' || selectedValue === undefined\n      ? []\n      : [selectedValue]\n  ); //for multiple selection\n  const [searchValue, setSearchValue] = useState('');\n\n  /*===========================================\n   * Selection handlers\n   *==========================================*/\n  const handleSingleSelection = (value: any) => {\n    if (selectedItem === value) {\n      setSelectedItem(null);\n    } else {\n      setSelectedItem(value);\n      onValueChange(value); //send value to parent\n      setOpen(false); //close modal upon selection\n    }\n  };\n\n  const handleMultipleSelections = (value: any) => {\n    let selectedValues = [...selectedItems];\n\n    if (selectedValues.includes(value)) {\n      selectedValues = selectedValues.filter((item) => item !== value);\n    } else {\n      selectedValues.push(value);\n    }\n    setSelectedItems(selectedValues);\n    onValueChange(selectedValues); //send value to parent\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          checkboxSize={checkboxSize}\n          checkboxStyle={checkboxStyle}\n          checkboxLabelStyle={checkboxLabelStyle}\n        />\n      </CustomModal>\n    </>\n  );\n};\n\nexport default DropdownSelect;\n"]}
+{"version":3,"names":["React","useState","TouchableOpacity","StyleSheet","View","Dropdown","DropdownList","CustomModal","Input","CheckBox","colors","DEFAULT_OPTION_LABEL","DEFAULT_OPTION_VALUE","DropdownSelect","_ref","placeholder","label","error","helperText","options","optionLabel","optionValue","onValueChange","selectedValue","isMultiple","isSearchable","labelStyle","dropdownStyle","dropdownContainerStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","selectedItemStyle","multipleSelectedItemStyle","modalBackgroundStyle","modalOptionsContainer","searchInputStyle","primaryColor","disabled","checkboxSize","checkboxStyle","checkboxLabelStyle","rest","newOptions","setNewOptions","open","setOpen","selectAll","setSelectAll","selectedItem","setSelectedItem","selectedItems","setSelectedItems","Array","isArray","undefined","searchValue","setSearchValue","handleSingleSelection","value","handleMultipleSelections","selectedValues","includes","filter","item","push","length","handleSelectAll","prevVal","i","getSelectedItemsLabel","selectedLabels","forEach","element","_options$find","selectedItemLabel","find","onSearch","searchText","toString","toLocaleLowerCase","trim","regexFilter","RegExp","searchResults","toLowerCase","search","handleToggleModal","primary","gray","createElement","Fragment","_extends","onRequestClose","onChangeText","text","style","styles","optionsContainerStyle","onPress","onChange","create","paddingHorizontal","paddingVertical","flexDirection"],"sources":["index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { TouchableOpacity, StyleSheet, View } from 'react-native';\nimport Dropdown from './components/Dropdown/Dropdown';\nimport DropdownList from './components/Dropdown/DropdownList';\nimport CustomModal from './components/CustomModal';\nimport { Input } from './components/Input';\nimport CheckBox from './components/CheckBox';\nimport { colors } from './styles/colors';\nimport { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';\nimport type { DropdownProps } from './types/index.types';\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  dropdownErrorStyle,\n  dropdownErrorTextStyle,\n  dropdownHelperTextStyle,\n  selectedItemStyle,\n  multipleSelectedItemStyle,\n  modalBackgroundStyle,\n  modalOptionsContainer,\n  searchInputStyle,\n  primaryColor,\n  disabled,\n  checkboxSize,\n  checkboxStyle,\n  checkboxLabelStyle,\n  ...rest\n}: DropdownProps) => {\n  const [newOptions, setNewOptions] = useState(options ? options : []);\n  const [open, setOpen] = useState(false);\n  const [selectAll, setSelectAll] = 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    onValueChange(selectedValues); //send value to parent\n\n    if (newOptions.length === selectedValues.length) {\n      setSelectAll(true);\n    } else {\n      setSelectAll(false);\n    }\n  };\n\n  const handleSelectAll = () => {\n    setSelectAll((prevVal) => {\n      const selectedValues = [];\n\n      if (!prevVal) {\n        for (let i = 0; i < newOptions.length; i++) {\n          selectedValues.push(newOptions[i][optionValue]);\n        }\n      }\n\n      setSelectedItems(selectedValues);\n      onValueChange(selectedValues); //send value to parent\n      return !prevVal;\n    });\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        {isMultiple && newOptions.length > 1 && (\n          <View style={styles.optionsContainerStyle}>\n            <TouchableOpacity onPress={() => {}}>\n              <CheckBox\n                value={selectAll}\n                label={selectAll ? 'Clear all' : 'Select all'}\n                onChange={() => handleSelectAll()}\n                primaryColor={primary}\n                checkboxSize={checkboxSize}\n                checkboxStyle={checkboxStyle}\n                checkboxLabelStyle={checkboxLabelStyle}\n              />\n            </TouchableOpacity>\n          </View>\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          checkboxSize={checkboxSize}\n          checkboxStyle={checkboxStyle}\n          checkboxLabelStyle={checkboxLabelStyle}\n        />\n      </CustomModal>\n    </>\n  );\n};\n\nconst styles = StyleSheet.create({\n  optionsContainerStyle: {\n    paddingHorizontal: 20,\n    paddingVertical: 10,\n    flexDirection: 'row',\n  },\n});\n\nexport default DropdownSelect;\n"],"mappings":"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"}

package/lib/module/styles/colors.js

@@ -1,5 +1,5 @@
 export const colors = {
-  primary: '#EF8031',
+  primary: 'green',
   red: '#FA4169',
   black: '#000000',
   white: '#FFFFFF',

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

@@ -1 +1 @@
-{"version":3,"sources":["colors.ts"],"names":["colors","primary","red","black","white","dark","gray","lightGray"],"mappings":"AAAA,OAAO,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"]}
+{"version":3,"names":["colors","primary","red","black","white","dark","gray","lightGray"],"sources":["colors.ts"],"sourcesContent":["export const colors: any = {\n  primary: 'green',\n  red: '#FA4169',\n  black: '#000000',\n  white: '#FFFFFF',\n  dark: '#11142D',\n  gray: '#808191',\n  lightGray: '#F7F7F7',\n};\n"],"mappings":"AAAA,OAAO,MAAMA,MAAW,GAAG;EACzBC,OAAO,EAAE,OAAO;EAChBC,GAAG,EAAE,SAAS;EACdC,KAAK,EAAE,SAAS;EAChBC,KAAK,EAAE,SAAS;EAChBC,IAAI,EAAE,SAAS;EACfC,IAAI,EAAE,SAAS;EACfC,SAAS,EAAE;AACb,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["typography.ts"],"names":["StyleSheet","typography","create","caption","fontStyle","fontWeight","fontSize","lineHeight"],"mappings":"AAAA,SAASA,UAAT,QAA2B,cAA3B;AAEA,OAAO,MAAMC,UAAe,GAAGD,UAAU,CAACE,MAAX,CAAkB;AAC/CC,EAAAA,OAAO,EAAE;AACPC,IAAAA,SAAS,EAAE,QADJ;AAEPC,IAAAA,UAAU,EAAE,QAFL;AAGPC,IAAAA,QAAQ,EAAE,EAHH;AAIPC,IAAAA,UAAU,EAAE;AAJL;AADsC,CAAlB,CAAxB","sourcesContent":["import { StyleSheet } from 'react-native';\n\nexport const typography: any = StyleSheet.create({\n  caption: {\n    fontStyle: 'normal',\n    fontWeight: 'normal',\n    fontSize: 12,\n    lineHeight: 15,\n  },\n});\n"]}
+{"version":3,"names":["StyleSheet","typography","create","caption","fontStyle","fontWeight","fontSize","lineHeight"],"sources":["typography.ts"],"sourcesContent":["import { StyleSheet } from 'react-native';\n\nexport const typography: any = StyleSheet.create({\n  caption: {\n    fontStyle: 'normal',\n    fontWeight: 'normal',\n    fontSize: 12,\n    lineHeight: 15,\n  },\n});\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,cAAc;AAEzC,OAAO,MAAMC,UAAe,GAAGD,UAAU,CAACE,MAAM,CAAC;EAC/CC,OAAO,EAAE;IACPC,SAAS,EAAE,QAAQ;IACnBC,UAAU,EAAE,QAAQ;IACpBC,QAAQ,EAAE,EAAE;IACZC,UAAU,EAAE;EACd;AACF,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"version":3,"names":[],"sources":["index.types.ts"],"sourcesContent":["import type { ViewStyle, ColorValue, TextStyle } from 'react-native';\n\nexport type DropdownProps = {\n  placeholder?: string;\n  label?: string;\n  error?: string;\n  helperText?: string;\n  options: any[];\n  optionLabel: string;\n  optionValue: string;\n  onValueChange: Function;\n  selectedValue?: string | any[] | null;\n  isMultiple?: boolean;\n  isSearchable?: boolean;\n  labelStyle?: TextStyle;\n  dropdownStyle?: ViewStyle;\n  dropdownContainerStyle?: ViewStyle;\n  dropdownErrorStyle?: ViewStyle;\n  dropdownErrorTextStyle?: TextStyle;\n  dropdownHelperTextStyle?: TextStyle;\n  selectedItemStyle?: ViewStyle;\n  multipleSelectedItemStyle?: ViewStyle;\n  modalBackgroundStyle?: ViewStyle;\n  modalOptionsContainer?: ViewStyle;\n  searchInputStyle?: ViewStyle;\n  primaryColor?: ColorValue;\n  disabled?: boolean;\n  checkboxSize?: number;\n  checkboxStyle?: ViewStyle;\n  checkboxLabelStyle?: TextStyle;\n};\n"],"mappings":""}

package/lib/typescript/components/CheckBox/types.d.ts

@@ -1,5 +1,5 @@
 import type { ColorValue, ViewStyle, TextStyle } from 'react-native';
-export declare type CheckboxProps = {
+export type CheckboxProps = {
     label?: string;
     value?: boolean;
     primaryColor?: ColorValue;

package/lib/typescript/components/Dropdown/DropdownSelectedItemsView.d.ts

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

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

@@ -1,12 +1,12 @@
 import type { ViewStyle, ColorValue, TextStyle } from 'react-native';
-export declare type DropdownProps = {
+export type DropdownProps = {
     placeholder?: string;
     label?: string;
     error?: string;
     helperText?: string;
     options: any[];
     optionLabel: string;
-    optionValue?: string;
+    optionValue: string;
     onValueChange: Function;
     selectedValue?: string | any[] | null;
     isMultiple?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-input-select",
-  "version": "0.22.0",
+  "version": "0.24.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",

package/src/components/CheckBox/index.tsx

@@ -14,7 +14,9 @@ const CheckBox = ({
   onChange,
 }: CheckboxProps) => {
   const fillColor = {
-    backgroundColor: value ? primaryColor || 'green' : 'white',
+    backgroundColor: value
+      ? checkboxStyle?.backgroundColor || primaryColor || 'green'
+      : 'white',
   };
   return (
     <Pressable

package/src/components/Dropdown/Dropdown.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import SelectedItemsView from './SelectedItemsView';
+import DropdownSelectedItemsView from './DropdownSelectedItemsView';
 import { colors } from '../../styles/colors';
 import { typography } from '../../styles/typography';
 
@@ -30,7 +30,7 @@ const Dropdown = ({
       {label && label !== '' && (
         <Text style={[styles.label, labelStyle]}>{label}</Text>
       )}
-      <SelectedItemsView
+      <DropdownSelectedItemsView
         placeholder={placeholder}
         error={error}
         getSelectedItemsLabel={getSelectedItemsLabel}

package/src/components/Dropdown/DropdownList.tsx

@@ -66,17 +66,6 @@ const _renderItem = ({ item }: any, props: any) => {
 };
 
 const styles = StyleSheet.create({
-  modalContainer: {
-    flex: 1,
-    justifyContent: 'flex-end',
-  },
-  modalBackgroundStyle: { backgroundColor: 'rgba(0, 0, 0, 0.5)' },
-  modalOptionsContainer: {
-    maxHeight: '50%',
-    backgroundColor: colors.white,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-  },
   itemSeparatorStyle: {
     backgroundColor: colors.gray,
     height: 1,

package/src/components/Dropdown/DropdownListItem.tsx

@@ -1,7 +1,6 @@
 import React, { memo } from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
 import CheckBox from '../CheckBox';
-import { colors } from '../../styles/colors';
 
 const DropdownListItem = ({
   item,
@@ -18,7 +17,7 @@ const DropdownListItem = ({
   const selectedOptionValue = optionValue ?? 'value';
   return (
     <TouchableOpacity
-      style={styles.modalOptions}
+      style={styles.dropdownModalOptions}
       onPress={() => onChange(item[selectedOptionValue])}
     >
       <CheckBox
@@ -29,7 +28,7 @@ const DropdownListItem = ({
         }
         label={item[optionLabel ?? '']}
         onChange={() => onChange(item[selectedOptionValue])}
-        primaryColor={primaryColor || colors.primary}
+        primaryColor={primaryColor}
         checkboxSize={checkboxSize}
         checkboxStyle={checkboxStyle}
         checkboxLabelStyle={checkboxLabelStyle}
@@ -39,7 +38,7 @@ const DropdownListItem = ({
 };
 
 const styles = StyleSheet.create({
-  modalOptions: {
+  dropdownModalOptions: {
     paddingHorizontal: 20,
     paddingVertical: 10,
     flexDirection: 'row',

package/src/components/Dropdown/{SelectedItemsView.tsx → DropdownSelectedItemsView.tsx}

@@ -11,7 +11,7 @@ import {
 import { colors } from '../../styles/colors';
 import { inputStyles } from '../../styles/input';
 
-const SelectedItemsView = ({
+const DropdownSelectedItemsView = ({
   placeholder,
   error,
   getSelectedItemsLabel,
@@ -107,8 +107,9 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     backgroundColor: colors.primary,
     marginRight: 10,
+    overflow: 'hidden',
   },
   blackText: { color: colors.black },
 });
 
-export default SelectedItemsView;
+export default DropdownSelectedItemsView;

package/src/index.tsx

@@ -1,11 +1,13 @@
 import React, { useState } from 'react';
+import { TouchableOpacity, StyleSheet, View } from 'react-native';
 import Dropdown from './components/Dropdown/Dropdown';
 import DropdownList from './components/Dropdown/DropdownList';
 import CustomModal from './components/CustomModal';
-import { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';
-import type { DropdownProps } from './types/index.types';
 import { Input } from './components/Input';
+import CheckBox from './components/CheckBox';
 import { colors } from './styles/colors';
+import { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';
+import type { DropdownProps } from './types/index.types';
 
 export const DropdownSelect = ({
   placeholder,
@@ -39,6 +41,7 @@ export const DropdownSelect = ({
 }: DropdownProps) => {
   const [newOptions, setNewOptions] = useState(options ? options : []);
   const [open, setOpen] = useState(false);
+  const [selectAll, setSelectAll] = useState(false);
   const [selectedItem, setSelectedItem] = useState(selectedValue); //for single selection
   const [selectedItems, setSelectedItems] = useState(
     Array.isArray(selectedValue)
@@ -72,6 +75,28 @@ export const DropdownSelect = ({
     }
     setSelectedItems(selectedValues);
     onValueChange(selectedValues); //send value to parent
+
+    if (newOptions.length === selectedValues.length) {
+      setSelectAll(true);
+    } else {
+      setSelectAll(false);
+    }
+  };
+
+  const handleSelectAll = () => {
+    setSelectAll((prevVal) => {
+      const selectedValues = [];
+
+      if (!prevVal) {
+        for (let i = 0; i < newOptions.length; i++) {
+          selectedValues.push(newOptions[i][optionValue]);
+        }
+      }
+
+      setSelectedItems(selectedValues);
+      onValueChange(selectedValues); //send value to parent
+      return !prevVal;
+    });
   };
 
   /*===========================================
@@ -179,6 +204,21 @@ export const DropdownSelect = ({
             primaryColor={primary}
           />
         )}
+        {isMultiple && newOptions.length > 1 && (
+          <View style={styles.optionsContainerStyle}>
+            <TouchableOpacity onPress={() => {}}>
+              <CheckBox
+                value={selectAll}
+                label={selectAll ? 'Clear all' : 'Select all'}
+                onChange={() => handleSelectAll()}
+                primaryColor={primary}
+                checkboxSize={checkboxSize}
+                checkboxStyle={checkboxStyle}
+                checkboxLabelStyle={checkboxLabelStyle}
+              />
+            </TouchableOpacity>
+          </View>
+        )}
         <DropdownList
           options={newOptions}
           optionLabel={optionLabel}
@@ -198,4 +238,12 @@ export const DropdownSelect = ({
   );
 };
 
+const styles = StyleSheet.create({
+  optionsContainerStyle: {
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    flexDirection: 'row',
+  },
+});
+
 export default DropdownSelect;

package/src/styles/colors.ts

@@ -1,5 +1,5 @@
 export const colors: any = {
-  primary: '#EF8031',
+  primary: 'green',
   red: '#FA4169',
   black: '#000000',
   white: '#FFFFFF',

package/src/types/index.types.ts

@@ -7,7 +7,7 @@ export type DropdownProps = {
   helperText?: string;
   options: any[];
   optionLabel: string;
-  optionValue?: string;
+  optionValue: string;
   onValueChange: Function;
   selectedValue?: string | any[] | null;
   isMultiple?: boolean;