react-native-input-select 0.35.0 → 1.1.0

package/src/components/CheckBox/index.tsx

@@ -5,6 +5,12 @@ import { colors } from '../../styles/colors';
 import { CHECKBOX_SIZE } from '../../constants';
 import type { CheckboxProps } from './types';
 
+/**
+ *
+ *`checkboxSize`, `checkboxStyle`,`checkboxLabelStyle` Will be deleted in version 1.0.
+ * and replaced with `checkboxComponentStyles`
+ */
+
 const CheckBox = ({
   label,
   value,
@@ -13,17 +19,25 @@ const CheckBox = ({
   checkboxSize,
   checkboxStyle,
   checkboxLabelStyle,
+  checkboxComponentStyles,
   onChange,
 }: CheckboxProps) => {
+  // const { checkboxSize, checkboxStyle, checkboxLabelStyle } =
+  //   checkboxComponentStyles;
   const fillColor = {
     backgroundColor: disabled
       ? '#d3d3d3'
       : value
-      ? checkboxStyle?.backgroundColor || primaryColor || 'green'
+      ? checkboxComponentStyles?.checkboxStyle?.backgroundColor ||
+        checkboxStyle?.backgroundColor ||
+        primaryColor ||
+        'green'
       : 'white',
     borderColor: disabled
       ? colors.disabled
-      : checkboxStyle?.borderColor || styles.checkbox.borderColor,
+      : checkboxComponentStyles?.checkboxStyle?.borderColor ||
+        checkboxStyle?.borderColor ||
+        styles.checkbox.borderColor,
   };
 
   return (
@@ -37,14 +51,27 @@ const CheckBox = ({
           source={require('../../asset/check.png')}
           style={[
             {
-              height: checkboxSize || CHECKBOX_SIZE,
-              width: checkboxSize || CHECKBOX_SIZE,
+              height:
+                checkboxComponentStyles?.checkboxSize ||
+                checkboxSize ||
+                CHECKBOX_SIZE,
+              width:
+                checkboxComponentStyles?.checkboxSize ||
+                checkboxSize ||
+                CHECKBOX_SIZE,
             },
           ]}
         />
       </View>
       {label && (
-        <Text style={[checkboxLabelStyle, styles.labelStyle]}>{label}</Text>
+        <Text
+          style={[
+            checkboxComponentStyles?.checkboxLabelStyle || checkboxLabelStyle,
+            styles.labelStyle,
+          ]}
+        >
+          {label}
+        </Text>
       )}
     </Pressable>
   );

package/src/components/CheckBox/types.ts

@@ -8,5 +8,10 @@ export type CheckboxProps = {
   checkboxSize?: number;
   checkboxStyle?: ViewStyle;
   checkboxLabelStyle?: TextStyle;
+  checkboxComponentStyles?: {
+    checkboxSize?: number;
+    checkboxStyle?: ViewStyle;
+    checkboxLabelStyle?: TextStyle;
+  };
   onChange?: (value: boolean | string | number) => void;
 };

package/src/components/Dropdown/{DropdownList.tsx → DropdownFlatList.tsx}

@@ -1,10 +1,10 @@
 /* eslint-disable react-native/no-inline-styles */
 import React from 'react';
-import { View, FlatList, StyleSheet, Text } from 'react-native';
+import { FlatList, StyleSheet } from 'react-native';
 import DropdownListItem from './DropdownListItem';
-import { colors } from '../../styles/colors';
+import { ItemSeparatorComponent, ListEmptyComponent } from '../Others';
 
-const DropdownList = ({
+const DropdownFlatList = ({
   options,
   optionLabel,
   optionValue,
@@ -15,9 +15,11 @@ const DropdownList = ({
   handleMultipleSelections,
   handleSingleSelection,
   primaryColor,
-  checkboxSize,
-  checkboxStyle,
-  checkboxLabelStyle,
+  checkboxSize, // kept for backwards compatibility to be removed in future release
+  checkboxStyle, // kept for backwards compatibility to be removed in future release
+  checkboxLabelStyle, // kept for backwards compatibility to be removed  in future release
+  checkboxComponentStyles,
+  listComponentStyles,
   ...rest
 }: any) => {
   return (
@@ -26,14 +28,18 @@ const DropdownList = ({
       extraData={isMultiple ? selectedItems : selectedItem}
       initialNumToRender={5}
       ListEmptyComponent={
-        <View style={styles.emptyListStyle}>
-          <Text>No options available</Text>
-        </View>
+        <ListEmptyComponent
+          listEmptyComponentStyle={listComponentStyles?.listEmptyComponentStyle}
+        />
       }
       contentContainerStyle={[
         isSearchable ? { paddingTop: 0 } : styles.contentContainerStyle,
       ]}
-      ItemSeparatorComponent={() => <View style={styles.itemSeparatorStyle} />}
+      ItemSeparatorComponent={() => (
+        <ItemSeparatorComponent
+          itemSeparatorStyle={listComponentStyles?.itemSeparatorStyle}
+        />
+      )}
       renderItem={(item) =>
         _renderItem(item, {
           optionLabel,
@@ -44,9 +50,10 @@ const DropdownList = ({
             ? handleMultipleSelections
             : handleSingleSelection,
           primaryColor,
-          checkboxSize,
-          checkboxStyle,
-          checkboxLabelStyle,
+          checkboxSize, // kept for backwards compatibility
+          checkboxStyle, // kept for backwards compatibility
+          checkboxLabelStyle, // kept for backwards compatibility
+          checkboxComponentStyles,
         })
       }
       keyExtractor={(_item, index) => `Options${index}`}
@@ -68,18 +75,13 @@ const _renderItem = ({ item }: any, props: any) => {
       checkboxSize={props.checkboxSize}
       checkboxStyle={props.checkboxStyle}
       checkboxLabelStyle={props.checkboxLabelStyle}
+      checkboxComponentStyles={props.checkboxComponentStyles}
     />
   );
 };
 
 const styles = StyleSheet.create({
-  itemSeparatorStyle: {
-    backgroundColor: colors.gray,
-    height: 1,
-    opacity: 0.15,
-  },
-  emptyListStyle: { alignItems: 'center', width: '100%', marginVertical: 20 },
   contentContainerStyle: { paddingTop: 20 },
 });
 
-export default DropdownList;
+export default DropdownFlatList;

package/src/components/Dropdown/DropdownListItem.tsx

@@ -13,27 +13,29 @@ const DropdownListItem = ({
   checkboxSize,
   checkboxStyle,
   checkboxLabelStyle,
+  checkboxComponentStyles,
 }: any) => {
-  const selectedOptionValue = optionValue ?? 'value';
   return (
     <TouchableOpacity
-      style={styles.dropdownModalOptions}
+      style={styles.listItemContainerStyle}
       onPress={
-        item.disabled ? () => {} : () => onChange(item[selectedOptionValue]) // intentionally didn't use the disable property
+        item.disabled ? () => {} : () => onChange(item[optionValue]) // intentionally didn't use the disable property
       }
     >
       <CheckBox
         value={
           isMultiple
-            ? selectedOption.includes(item[selectedOptionValue])
-            : [selectedOption].includes(item[selectedOptionValue])
+            ? selectedOption.includes(item[optionValue])
+            : [selectedOption].includes(item[optionValue])
         }
-        label={item[optionLabel ?? '']}
-        onChange={() => onChange(item[selectedOptionValue])}
+        label={item[optionLabel]}
+        onChange={() => onChange(item[optionValue])}
         primaryColor={primaryColor}
-        checkboxSize={checkboxSize}
-        checkboxStyle={checkboxStyle}
-        checkboxLabelStyle={checkboxLabelStyle}
+        checkboxSize={checkboxComponentStyles?.checkboxSize || checkboxSize}
+        checkboxStyle={checkboxComponentStyles?.checkboxStyle || checkboxStyle}
+        checkboxLabelStyle={
+          checkboxComponentStyles?.checkboxLabelStyle || checkboxLabelStyle
+        }
         disabled={item.disabled}
       />
     </TouchableOpacity>
@@ -41,7 +43,7 @@ const DropdownListItem = ({
 };
 
 const styles = StyleSheet.create({
-  dropdownModalOptions: {
+  listItemContainerStyle: {
     paddingHorizontal: 20,
     paddingVertical: 10,
     flexDirection: 'row',

package/src/components/Dropdown/DropdownSectionList.tsx

@@ -0,0 +1,135 @@
+/* eslint-disable react-native/no-inline-styles */
+import React, { useEffect, useState } from 'react';
+import { SectionList, StyleSheet } from 'react-native';
+import DropdownListItem from './DropdownListItem';
+import {
+  ItemSeparatorComponent,
+  ListEmptyComponent,
+  SectionHeaderTitle,
+} from '../Others';
+import { extractPropertyFromArray } from '../../utils';
+
+const DropdownSectionList = ({
+  options,
+  optionLabel,
+  optionValue,
+  isMultiple,
+  isSearchable,
+  selectedItems,
+  selectedItem,
+  handleMultipleSelections,
+  handleSingleSelection,
+  primaryColor,
+  checkboxSize,
+  checkboxStyle,
+  checkboxLabelStyle,
+  checkboxComponentStyles,
+  listComponentStyles,
+  ...rest
+}: any) => {
+  const [expandedSections, setExpandedSections] = useState(new Set());
+
+  /**
+   * Expand all sections
+   */
+  useEffect(() => {
+    let initialState = new Set(extractPropertyFromArray(options, 'title'));
+    setExpandedSections(initialState);
+  }, [options]);
+
+  /**
+   * @param title
+   */
+  const handleToggleListExpansion = (title: string) => {
+    setExpandedSections((expandedSectionsState) => {
+      // Using Set here but you can use an array too
+      const next = new Set(expandedSectionsState);
+      if (next.has(title)) {
+        next.delete(title);
+      } else {
+        next.add(title);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <SectionList
+      sections={options}
+      extraData={isMultiple ? selectedItems : selectedItem}
+      initialNumToRender={5}
+      ListEmptyComponent={
+        <ListEmptyComponent
+          listEmptyComponentStyle={listComponentStyles?.listEmptyComponentStyle}
+        />
+      }
+      contentContainerStyle={[
+        isSearchable ? { paddingTop: 0 } : styles.contentContainerStyle,
+      ]}
+      ItemSeparatorComponent={() => (
+        <ItemSeparatorComponent
+          itemSeparatorStyle={listComponentStyles?.itemSeparatorStyle}
+        />
+      )}
+      renderItem={(item) =>
+        _renderItem(item, {
+          optionLabel,
+          optionValue,
+          isMultiple,
+          selectedOption: isMultiple ? selectedItems : selectedItem,
+          onChange: isMultiple
+            ? handleMultipleSelections
+            : handleSingleSelection,
+          primaryColor,
+          checkboxSize, // kept for backwards compatibility
+          checkboxStyle, // kept for backwards compatibility
+          checkboxLabelStyle, // kept for backwards compatibility
+          checkboxComponentStyles,
+          expandedSections,
+        })
+      }
+      renderSectionHeader={({ section: { title, data } }) =>
+        data.length > 0 && (
+          <SectionHeaderTitle
+            title={title}
+            sectionHeaderStyle={listComponentStyles?.sectionHeaderStyle}
+            onPress={() => handleToggleListExpansion(title)}
+            isExpanded={expandedSections.has(title)}
+          />
+        )
+      }
+      keyExtractor={(_item, index) => `Options${index}`}
+      stickySectionHeadersEnabled={false}
+      {...rest}
+    />
+  );
+};
+
+const _renderItem = ({ section: { title }, item }: any, props: any) => {
+  const isExpanded = props?.expandedSections.has(title);
+
+  //return null if it is not expanded
+  if (!isExpanded) return null;
+
+  return (
+    <DropdownListItem
+      item={item}
+      optionLabel={props.optionLabel}
+      optionValue={props.optionValue}
+      isMultiple={props.isMultiple}
+      selectedOption={props.selectedOption}
+      onChange={props.onChange}
+      primaryColor={props.primaryColor}
+      checkboxSize={props.checkboxSize}
+      checkboxStyle={props.checkboxStyle}
+      checkboxLabelStyle={props.checkboxLabelStyle}
+      checkboxComponentStyles={props.checkboxComponentStyles}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  contentContainerStyle: { paddingTop: 20 },
+});
+
+export default DropdownSectionList;

package/src/components/Dropdown/DropdownSelectedItemsView.tsx

@@ -6,7 +6,6 @@ import {
   ScrollView,
   StyleSheet,
   Image,
-  TouchableOpacity,
 } from 'react-native';
 import { colors } from '../../styles/colors';
 import { inputStyles } from '../../styles/input';
@@ -59,39 +58,28 @@ const DropdownSelectedItemsView = ({
         >
           {isMultiple ? (
             getSelectedItemsLabel()?.map((item: any, i: Number) => (
-              <TouchableOpacity
-                onPress={() => handleToggleModal()}
+              <Text
                 key={`react-native-input-select-${Math.random()}-${i}`}
-                disabled={disabled}
+                style={[
+                  styles.selectedItems,
+                  { backgroundColor: primaryColor },
+                  multipleSelectedItemStyle,
+                ]}
               >
-                <Text
-                  style={[
-                    styles.selectedItems,
-                    { backgroundColor: primaryColor },
-                    multipleSelectedItemStyle,
-                  ]}
-                >
-                  {item}
-                </Text>
-              </TouchableOpacity>
+                {item}
+              </Text>
             ))
           ) : (
-            <TouchableOpacity
-              onPress={() => handleToggleModal()}
-              disabled={disabled}
-            >
-              <Text style={[styles.blackText, selectedItemStyle]}>
-                {getSelectedItemsLabel()}
-              </Text>
-            </TouchableOpacity>
+            <Text style={[styles.blackText, selectedItemStyle]}>
+              {getSelectedItemsLabel()}
+            </Text>
+          )}
+          {!selectedItem && selectedItems?.length === 0 && (
+            <Text style={[styles.blackText, placeholderStyle]}>
+              {placeholder ?? 'Select an option'}
+            </Text>
           )}
         </View>
-
-        {!selectedItem && selectedItems?.length === 0 && (
-          <Text style={[styles.blackText, placeholderStyle]}>
-            {placeholder ?? 'Select an option'}
-          </Text>
-        )}
       </ScrollView>
       <View style={[styles.iconStyle, dropdownIconStyle]}>
         {dropdownIcon || (

package/src/components/Input/index.tsx

@@ -39,3 +39,5 @@ export const Input = ({
 const styles = StyleSheet.create({
   container: { margin: 23 },
 });
+
+export default Input;

package/src/components/Others/index.tsx

@@ -0,0 +1,91 @@
+import React, { ReactNode } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  TextStyle,
+  Image,
+  ViewStyle,
+} from 'react-native';
+import { colors } from '../../styles/colors';
+
+export const ListEmptyComponent = ({ listEmptyComponentStyle }: any) => {
+  return (
+    <View style={styles.listEmptyComponentStyle}>
+      <Text style={listEmptyComponentStyle}>No options available</Text>
+    </View>
+  );
+};
+
+export const ItemSeparatorComponent = ({ itemSeparatorStyle }: any) => {
+  return <View style={[styles.itemSeparatorStyle, itemSeparatorStyle]} />;
+};
+
+export const ListItemContainer = ({
+  children,
+  listItemContainerStyle,
+}: {
+  children: ReactNode;
+  listItemContainerStyle: ViewStyle;
+}) => {
+  return (
+    <View style={[styles.listItemContainerStyle, listItemContainerStyle]}>
+      {children}
+    </View>
+  );
+};
+
+export const SectionHeaderTitle = ({
+  title,
+  sectionHeaderStyle,
+  onPress,
+  isExpanded,
+}: {
+  title: string;
+  sectionHeaderStyle?: TextStyle;
+  onPress?: () => void;
+  isExpanded: Boolean;
+}) => {
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <ListItemContainer listItemContainerStyle={styles.accordionStyle}>
+        <Text style={[styles.sectionHeaderStyle, sectionHeaderStyle]}>
+          {title}
+        </Text>
+        <View style={isExpanded ? null : styles.rotatedIcon90}>
+          <Image source={require('../../asset/arrow-down.png')} />
+        </View>
+      </ListItemContainer>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  listEmptyComponentStyle: {
+    alignItems: 'center',
+    width: '100%',
+    marginVertical: 20,
+  },
+  itemSeparatorStyle: {
+    backgroundColor: colors.gray,
+    height: 1,
+    opacity: 0.15,
+  },
+  listItemContainerStyle: {
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  sectionHeaderStyle: { fontWeight: '500' },
+  accordionStyle: {
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    justifyContent: 'space-between',
+    alignContent: 'center',
+  },
+  rotatedIcon90: {
+    transform: [{ rotate: '-90deg' }],
+  },
+});