react-native-input-select 0.24.0 → 0.26.0

package/src/components/Dropdown/Dropdown.tsx

@@ -18,6 +18,7 @@ const Dropdown = ({
   dropdownStyle,
   dropdownContainerStyle,
   selectedItemStyle,
+  placeholderStyle,
   multipleSelectedItemStyle,
   dropdownErrorStyle,
   dropdownErrorTextStyle,
@@ -44,6 +45,7 @@ const Dropdown = ({
         dropdownErrorStyle={dropdownErrorStyle}
         primaryColor={primaryColor}
         disabled={disabled}
+        placeholderStyle={placeholderStyle}
       />
 
       {error && error !== '' && (

package/src/components/Dropdown/DropdownList.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-native/no-inline-styles */
 import React from 'react';
 import { View, FlatList, StyleSheet, Text } from 'react-native';
 import DropdownListItem from './DropdownListItem';
@@ -8,6 +9,7 @@ const DropdownList = ({
   optionLabel,
   optionValue,
   isMultiple,
+  isSearchable,
   selectedItems,
   selectedItem,
   handleMultipleSelections,
@@ -16,6 +18,7 @@ const DropdownList = ({
   checkboxSize,
   checkboxStyle,
   checkboxLabelStyle,
+  ...rest
 }: any) => {
   return (
     <FlatList
@@ -27,6 +30,9 @@ const DropdownList = ({
           <Text>No options available</Text>
         </View>
       }
+      contentContainerStyle={[
+        isSearchable ? { paddingTop: 0 } : styles.contentContainerStyle,
+      ]}
       ItemSeparatorComponent={() => <View style={styles.itemSeparatorStyle} />}
       renderItem={(item) =>
         _renderItem(item, {
@@ -44,6 +50,7 @@ const DropdownList = ({
         })
       }
       keyExtractor={(_item, index) => `Options${index}`}
+      {...rest}
     />
   );
 };
@@ -72,6 +79,7 @@ const styles = StyleSheet.create({
     opacity: 0.15,
   },
   emptyListStyle: { alignItems: 'center', width: '100%', marginVertical: 20 },
+  contentContainerStyle: { paddingTop: 20 },
 });
 
 export default DropdownList;

package/src/components/Dropdown/DropdownListItem.tsx

@@ -18,7 +18,9 @@ const DropdownListItem = ({
   return (
     <TouchableOpacity
       style={styles.dropdownModalOptions}
-      onPress={() => onChange(item[selectedOptionValue])}
+      onPress={
+        item.disabled ? () => {} : () => onChange(item[selectedOptionValue]) // intentionally didn't use the disable property
+      }
     >
       <CheckBox
         value={
@@ -32,6 +34,7 @@ const DropdownListItem = ({
         checkboxSize={checkboxSize}
         checkboxStyle={checkboxStyle}
         checkboxLabelStyle={checkboxLabelStyle}
+        disabled={item.disabled}
       />
     </TouchableOpacity>
   );

package/src/components/Dropdown/DropdownSelectedItemsView.tsx

@@ -21,6 +21,7 @@ const DropdownSelectedItemsView = ({
   selectedItems,
   dropdownStyle,
   selectedItemStyle,
+  placeholderStyle,
   multipleSelectedItemStyle,
   dropdownErrorStyle,
   primaryColor,
@@ -85,7 +86,7 @@ const DropdownSelectedItemsView = ({
         </View>
 
         {!selectedItem && selectedItems?.length === 0 && (
-          <Text style={styles.blackText}>
+          <Text style={[styles.blackText, placeholderStyle]}>
             {placeholder ?? 'Select an option'}
           </Text>
         )}

package/src/index.tsx

@@ -37,6 +37,7 @@ export const DropdownSelect = ({
   checkboxSize,
   checkboxStyle,
   checkboxLabelStyle,
+  placeholderStyle,
   ...rest
 }: DropdownProps) => {
   const [newOptions, setNewOptions] = useState(options ? options : []);
@@ -76,7 +77,7 @@ export const DropdownSelect = ({
     setSelectedItems(selectedValues);
     onValueChange(selectedValues); //send value to parent
 
-    if (newOptions.length === selectedValues.length) {
+    if (options.length === selectedValues.length) {
       setSelectAll(true);
     } else {
       setSelectAll(false);
@@ -86,10 +87,10 @@ export const DropdownSelect = ({
   const handleSelectAll = () => {
     setSelectAll((prevVal) => {
       const selectedValues = [];
-
+      const filteredOptions = newOptions.filter((item) => !item.disabled); //don't select disabled items
       if (!prevVal) {
-        for (let i = 0; i < newOptions.length; i++) {
-          selectedValues.push(newOptions[i][optionValue]);
+        for (let i = 0; i < filteredOptions.length; i++) {
+          selectedValues.push(filteredOptions[i][optionValue]);
         }
       }
 
@@ -187,6 +188,7 @@ export const DropdownSelect = ({
         isMultiple={isMultiple}
         primaryColor={primary}
         disabled={disabled}
+        placeholderStyle={placeholderStyle}
         {...rest}
       />
       <CustomModal
@@ -196,34 +198,39 @@ export const DropdownSelect = ({
         modalOptionsContainer={modalOptionsContainer}
         onRequestClose={() => {}}
       >
-        {isSearchable && (
-          <Input
-            value={searchValue}
-            onChangeText={(text: string) => onSearch(text)}
-            style={searchInputStyle}
-            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
+          ListHeaderComponent={
+            <>
+              {isSearchable && (
+                <Input
+                  value={searchValue}
+                  onChangeText={(text: string) => onSearch(text)}
+                  style={searchInputStyle}
+                  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>
+              )}
+            </>
+          }
           options={newOptions}
           optionLabel={optionLabel}
           optionValue={optionValue}
           isMultiple={isMultiple}
+          isSearchable={isSearchable}
           selectedItems={selectedItems}
           selectedItem={selectedItem}
           handleMultipleSelections={handleMultipleSelections}

package/src/styles/colors.ts

@@ -6,4 +6,5 @@ export const colors: any = {
   dark: '#11142D',
   gray: '#808191',
   lightGray: '#F7F7F7',
+  disabled: '#d3d3d3',
 };

package/src/types/index.types.ts

@@ -28,4 +28,5 @@ export type DropdownProps = {
   checkboxSize?: number;
   checkboxStyle?: ViewStyle;
   checkboxLabelStyle?: TextStyle;
+  placeholderStyle?: TextStyle;
 };