react-native-input-select 0.35.0 → 1.1.0

package/src/index.tsx

@@ -1,13 +1,24 @@
 import React, { useState, useEffect } from 'react';
 import { TouchableOpacity, StyleSheet, View } from 'react-native';
+import Input from './components/Input';
+import CheckBox from './components/CheckBox';
 import Dropdown from './components/Dropdown/Dropdown';
-import DropdownList from './components/Dropdown/DropdownList';
+import DropdownFlatList from './components/Dropdown/DropdownFlatList';
+import DropdownSectionList from './components/Dropdown/DropdownSectionList';
 import CustomModal from './components/CustomModal';
-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';
+import type {
+  DropdownProps,
+  TFlatList,
+  TFlatListItem,
+  TSectionList,
+  TSectionListItem,
+} from './types/index.types';
+import {
+  extractPropertyFromArray,
+  getMaxLengthOfSectionListProperty,
+} from './utils';
 
 export const DropdownSelect: React.FC<DropdownProps> = ({
   placeholder,
@@ -37,16 +48,18 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   searchInputStyle,
   primaryColor,
   disabled,
-  checkboxSize,
-  checkboxStyle,
-  checkboxLabelStyle,
+  checkboxSize, // kept for backwards compatibility
+  checkboxStyle, // kept for backwards compatibility
+  checkboxLabelStyle, // kept for backwards compatibility
+  checkboxComponentStyles,
   listHeaderComponent,
   listFooterComponent,
+  listComponentStyles,
   modalProps,
   hideModal = false,
   ...rest
 }) => {
-  const [newOptions, setNewOptions] = useState<any[]>([]);
+  const [newOptions, setNewOptions] = useState<TFlatList | TSectionList>([]);
   const [open, setOpen] = useState<boolean>(false);
   const [selectAll, setSelectAll] = useState<boolean>(false);
   const [selectedItem, setSelectedItem] = useState<any>(''); //for single selection
@@ -57,18 +70,38 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
     if (options) {
       setNewOptions(options);
     }
+    return () => {};
   }, [options]);
 
   useEffect(() => {
     isMultiple
       ? setSelectedItems(Array.isArray(selectedValue) ? selectedValue : [])
       : setSelectedItem(selectedValue);
+
+    return () => {};
   }, [selectedValue, isMultiple, onValueChange]);
 
+  /*===========================================
+   * List type
+   *==========================================*/
+
+  const isSectionList = newOptions.some(
+    (item) => item.title && item.data && Array.isArray(item.data)
+  );
+
+  const ListTypeComponent = isSectionList
+    ? DropdownSectionList
+    : DropdownFlatList;
+  let modifiedSectionData = extractPropertyFromArray(newOptions, 'data').flat();
+  let modifiedOptions = isSectionList ? modifiedSectionData : newOptions;
+
+  const optLabel = optionLabel || DEFAULT_OPTION_LABEL;
+  const optValue = optionValue || DEFAULT_OPTION_VALUE;
+
   /*===========================================
    * Selection handlers
    *==========================================*/
-  const handleSingleSelection = (value: any) => {
+  const handleSingleSelection = (value: string | number) => {
     if (selectedItem === value) {
       setSelectedItem(null);
       onValueChange(null); //send value to parent
@@ -79,7 +112,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
     }
   };
 
-  const handleMultipleSelections = (value: any) => {
+  const handleMultipleSelections = (value: string[] | number[]) => {
     setSelectedItems((prevVal) => {
       let selectedValues = [...prevVal];
 
@@ -94,8 +127,8 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
 
       //select all checkbox should not be checked if the list contains disabled values
       if (
-        options.filter((item) => !item.disabled).length ===
-        selectedValues.length
+        modifiedOptions.filter((item: TFlatListItem) => !item.disabled)
+          .length === selectedValues.length
       ) {
         setSelectAll(true);
       } else {
@@ -108,10 +141,15 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   const handleSelectAll = () => {
     setSelectAll((prevVal) => {
       const selectedValues = [];
-      const filteredOptions = newOptions.filter((item) => !item.disabled); //don't select disabled items
+
+      //don't select disabled items
+      const filteredOptions = modifiedOptions.filter(
+        (item: TFlatListItem) => !item.disabled
+      );
+
       if (!prevVal) {
         for (let i = 0; i < filteredOptions.length; i++) {
-          selectedValues.push(filteredOptions[i][optionValue]);
+          selectedValues.push(filteredOptions[i][optValue]);
         }
       }
 
@@ -127,24 +165,20 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   const getSelectedItemsLabel = () => {
     if (isMultiple && Array.isArray(selectedItems)) {
       let selectedLabels: Array<string> = [];
-      selectedItems?.forEach((element: any) => {
-        let selectedItemLabel =
-          options &&
-          options.find(
-            (item: any) => item[optionValue ?? DEFAULT_OPTION_VALUE] === element
-          )?.[optionLabel];
+
+      selectedItems?.forEach((element: number | string) => {
+        let selectedItemLabel = modifiedOptions?.find(
+          (item: TFlatListItem) => item[optValue] === element
+        )?.[optLabel];
         selectedLabels.push(selectedItemLabel);
       });
       return selectedLabels;
     }
 
-    let selectedItemLabel =
-      options &&
-      options.find(
-        (item: any) =>
-          item[optionValue ?? DEFAULT_OPTION_VALUE] === selectedItem
-      );
-    return selectedItemLabel?.[optionLabel ?? DEFAULT_OPTION_LABEL];
+    let selectedItemLabel = modifiedOptions?.find(
+      (item: TFlatListItem) => item[optValue] === selectedItem
+    );
+    return selectedItemLabel?.[optLabel];
   };
 
   /*===========================================
@@ -157,22 +191,47 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
 
     const regexFilter = new RegExp(searchText, 'i');
 
-    const searchResults = options.filter((item: any) => {
+    //Because Search mutates the initial state, we have to search with a copy of the original array
+    const optionsCopy = JSON.parse(JSON.stringify(options));
+    const searchResults = isSectionList
+      ? searchSectionList(optionsCopy as TSectionList, regexFilter)
+      : searchFlatList(optionsCopy as TFlatList, regexFilter);
+
+    setNewOptions(searchResults);
+  };
+
+  const searchFlatList = (flatList: TFlatList, regexFilter: RegExp) => {
+    const searchResults = flatList.filter((item: TFlatListItem) => {
       if (
-        item[optionLabel ?? DEFAULT_OPTION_LABEL]
-          .toString()
-          .toLowerCase()
-          .search(regexFilter) !== -1 ||
-        item[optionValue ?? DEFAULT_OPTION_VALUE]
-          .toString(regexFilter)
-          .toLowerCase()
-          .search(regexFilter) !== -1
+        item[optLabel].toString().toLowerCase().search(regexFilter) !== -1 ||
+        item[optValue].toString().toLowerCase().search(regexFilter) !== -1
       ) {
         return item;
       }
+      return;
     });
+    return searchResults;
+  };
 
-    setNewOptions(searchResults);
+  const searchSectionList = (
+    sectionList: TSectionList,
+    regexFilter: RegExp
+  ) => {
+    const searchResults = sectionList.map((listItem: TSectionListItem) => {
+      listItem.data = listItem.data.filter((item: TFlatListItem) => {
+        if (
+          item[optLabel].toString().toLowerCase().search(regexFilter) !== -1 ||
+          item[optValue].toString().toLowerCase().search(regexFilter) !== -1
+        ) {
+          return listItem.data.push(item);
+        }
+        return;
+      });
+
+      return listItem;
+    });
+
+    return searchResults;
   };
 
   /*===========================================
@@ -188,9 +247,20 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
     if (hideModal) {
       setOpen(false);
     }
+    return () => {};
   }, [hideModal]);
 
   let primary = primaryColor || colors.gray;
+
+  const sectionListMaxLength = getMaxLengthOfSectionListProperty(
+    newOptions as TSectionList,
+    'data'
+  );
+
+  const listIsEmpty = isSectionList
+    ? sectionListMaxLength > 1
+    : newOptions.length > 1;
+
   return (
     <>
       <Dropdown
@@ -226,7 +296,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
         onRequestClose={() => {}}
         modalProps={modalProps}
       >
-        <DropdownList
+        <ListTypeComponent
           ListHeaderComponent={
             <>
               {isSearchable && (
@@ -238,7 +308,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
                 />
               )}
               {listHeaderComponent}
-              {isMultiple && newOptions.length > 1 && (
+              {isMultiple && listIsEmpty && (
                 <View style={styles.optionsContainerStyle}>
                   <TouchableOpacity onPress={() => {}}>
                     <CheckBox
@@ -249,6 +319,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
                       checkboxSize={checkboxSize}
                       checkboxStyle={checkboxStyle}
                       checkboxLabelStyle={checkboxLabelStyle}
+                      checkboxComponentStyles={checkboxComponentStyles}
                     />
                   </TouchableOpacity>
                 </View>
@@ -256,9 +327,10 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
             </>
           }
           ListFooterComponent={listFooterComponent}
+          listComponentStyles={listComponentStyles}
           options={newOptions}
-          optionLabel={optionLabel}
-          optionValue={optionValue}
+          optionLabel={optLabel}
+          optionValue={optValue}
           isMultiple={isMultiple}
           isSearchable={isSearchable}
           selectedItems={selectedItems}
@@ -269,6 +341,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
           checkboxSize={checkboxSize}
           checkboxStyle={checkboxStyle}
           checkboxLabelStyle={checkboxLabelStyle}
+          checkboxComponentStyles={checkboxComponentStyles}
         />
       </CustomModal>
     </>

package/src/types/index.types.ts

@@ -10,9 +10,9 @@ export type DropdownProps = {
   label?: string;
   error?: string;
   helperText?: string;
-  options: any[];
-  optionLabel: string;
-  optionValue: string;
+  options: TFlatList | TSectionList;
+  optionLabel?: string;
+  optionValue?: string;
   onValueChange: Function;
   selectedValue?:
     | string
@@ -33,7 +33,7 @@ export type DropdownProps = {
   dropdownErrorTextStyle?: TextStyle;
   dropdownHelperTextStyle?: TextStyle;
   selectedItemStyle?: TextStyle;
-  multipleSelectedItemStyle?: ViewStyle;
+  multipleSelectedItemStyle?: TextStyle;
   modalBackgroundStyle?: ViewStyle;
   modalOptionsContainerStyle?: ViewStyle;
   searchInputStyle?: ViewStyle;
@@ -42,9 +42,27 @@ export type DropdownProps = {
   checkboxSize?: number;
   checkboxStyle?: ViewStyle;
   checkboxLabelStyle?: TextStyle;
+  checkboxComponentStyles?: {
+    checkboxSize?: number;
+    checkboxStyle?: ViewStyle;
+    checkboxLabelStyle?: TextStyle;
+  };
   placeholderStyle?: TextStyle;
   listHeaderComponent?: React.ReactNode;
   listFooterComponent?: React.ReactNode;
   hideModal?: boolean;
   modalProps?: ModalProps;
+  listComponentStyles?: {
+    listEmptyComponentStyle?: TextStyle;
+    itemSeparatorStyle?: ViewStyle;
+    sectionHeaderStyle?: TextStyle;
+  };
 };
+
+export type TFlatList = TFlatListItem[];
+export type TFlatListItem = {
+  [key: string]: string | number | boolean;
+}
+
+export type TSectionList = TSectionListItem[];
+export type TSectionListItem = { title: string; data: TFlatList };

package/src/utils/index.ts

@@ -0,0 +1,25 @@
+import { TSectionList } from 'src/types/index.types';
+
+/**
+ * Extract property from array
+ */
+export const extractPropertyFromArray = (arr: any, property: string) => {
+  let extractedValue = arr.map((item: any) => item[property]);
+
+  return extractedValue;
+};
+
+export const getMaxLengthOfSectionListProperty = (
+  sectionList: TSectionList,
+  property: 'title' | 'data'
+) => {
+  let maxLength = 0;
+
+  sectionList.forEach((obj) => {
+    if (obj[property]?.length > maxLength) {
+      maxLength = obj.data.length;
+    }
+  });
+
+  return maxLength;
+};

package/lib/commonjs/components/Dropdown/DropdownList.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["DropdownList.tsx"],"names":["DropdownList","options","optionLabel","optionValue","isMultiple","isSearchable","selectedItems","selectedItem","handleMultipleSelections","handleSingleSelection","primaryColor","checkboxSize","checkboxStyle","checkboxLabelStyle","rest","styles","emptyListStyle","paddingTop","contentContainerStyle","itemSeparatorStyle","item","_renderItem","selectedOption","onChange","_item","index","props","StyleSheet","create","backgroundColor","colors","gray","height","opacity","alignItems","width","marginVertical"],"mappings":"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","sourcesContent":["/* eslint-disable react-native/no-inline-styles */\nimport 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  isSearchable,\n  selectedItems,\n  selectedItem,\n  handleMultipleSelections,\n  handleSingleSelection,\n  primaryColor,\n  checkboxSize,\n  checkboxStyle,\n  checkboxLabelStyle,\n  ...rest\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      contentContainerStyle={[\n        isSearchable ? { paddingTop: 0 } : styles.contentContainerStyle,\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          checkboxSize,\n          checkboxStyle,\n          checkboxLabelStyle,\n        })\n      }\n      keyExtractor={(_item, index) => `Options${index}`}\n      {...rest}\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      checkboxSize={props.checkboxSize}\n      checkboxStyle={props.checkboxStyle}\n      checkboxLabelStyle={props.checkboxLabelStyle}\n    />\n  );\n};\n\nconst styles = StyleSheet.create({\n  itemSeparatorStyle: {\n    backgroundColor: colors.gray,\n    height: 1,\n    opacity: 0.15,\n  },\n  emptyListStyle: { alignItems: 'center', width: '100%', marginVertical: 20 },\n  contentContainerStyle: { paddingTop: 20 },\n});\n\nexport default DropdownList;\n"]}

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

@@ -1 +0,0 @@
-{"version":3,"sources":["DropdownList.tsx"],"names":["React","View","FlatList","StyleSheet","Text","DropdownListItem","colors","DropdownList","options","optionLabel","optionValue","isMultiple","isSearchable","selectedItems","selectedItem","handleMultipleSelections","handleSingleSelection","primaryColor","checkboxSize","checkboxStyle","checkboxLabelStyle","rest","styles","emptyListStyle","paddingTop","contentContainerStyle","itemSeparatorStyle","item","_renderItem","selectedOption","onChange","_item","index","props","create","backgroundColor","gray","height","opacity","alignItems","width","marginVertical"],"mappings":"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","sourcesContent":["/* eslint-disable react-native/no-inline-styles */\nimport 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  isSearchable,\n  selectedItems,\n  selectedItem,\n  handleMultipleSelections,\n  handleSingleSelection,\n  primaryColor,\n  checkboxSize,\n  checkboxStyle,\n  checkboxLabelStyle,\n  ...rest\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      contentContainerStyle={[\n        isSearchable ? { paddingTop: 0 } : styles.contentContainerStyle,\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          checkboxSize,\n          checkboxStyle,\n          checkboxLabelStyle,\n        })\n      }\n      keyExtractor={(_item, index) => `Options${index}`}\n      {...rest}\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      checkboxSize={props.checkboxSize}\n      checkboxStyle={props.checkboxStyle}\n      checkboxLabelStyle={props.checkboxLabelStyle}\n    />\n  );\n};\n\nconst styles = StyleSheet.create({\n  itemSeparatorStyle: {\n    backgroundColor: colors.gray,\n    height: 1,\n    opacity: 0.15,\n  },\n  emptyListStyle: { alignItems: 'center', width: '100%', marginVertical: 20 },\n  contentContainerStyle: { paddingTop: 20 },\n});\n\nexport default DropdownList;\n"]}

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

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