react-native-input-select 1.1.2 → 1.1.4

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["index.types.ts"],"sourcesContent":["import type {\n  ViewStyle,\n  ColorValue,\n  TextStyle,\n  ModalProps,\n} from 'react-native';\n\nexport type DropdownProps = {\n  placeholder?: string;\n  label?: string;\n  error?: string;\n  helperText?: string;\n  options: TFlatList | TSectionList;\n  optionLabel?: string;\n  optionValue?: string;\n  onValueChange: Function;\n  selectedValue?:\n    | string\n    | boolean\n    | number\n    | string[]\n    | boolean[]\n    | number[]\n    | null;\n  isMultiple?: boolean;\n  isSearchable?: boolean;\n  dropdownIcon?: React.ReactNode;\n  labelStyle?: TextStyle;\n  dropdownStyle?: ViewStyle;\n  dropdownIconStyle?: ViewStyle;\n  dropdownContainerStyle?: ViewStyle;\n  dropdownErrorStyle?: ViewStyle;\n  dropdownErrorTextStyle?: TextStyle;\n  dropdownHelperTextStyle?: TextStyle;\n  selectedItemStyle?: TextStyle;\n  multipleSelectedItemStyle?: TextStyle;\n  modalBackgroundStyle?: ViewStyle;\n  modalOptionsContainerStyle?: ViewStyle;\n  searchInputStyle?: ViewStyle;\n  primaryColor?: ColorValue;\n  disabled?: boolean;\n  checkboxSize?: number;\n  checkboxStyle?: ViewStyle;\n  checkboxLabelStyle?: TextStyle;\n  checkboxComponentStyles?: {\n    checkboxSize?: number;\n    checkboxStyle?: ViewStyle;\n    checkboxLabelStyle?: TextStyle;\n  };\n  placeholderStyle?: TextStyle;\n  listHeaderComponent?: React.ReactNode;\n  listFooterComponent?: React.ReactNode;\n  hideModal?: boolean;\n  modalProps?: ModalProps;\n  listComponentStyles?: {\n    listEmptyComponentStyle?: TextStyle;\n    itemSeparatorStyle?: ViewStyle;\n    sectionHeaderStyle?: TextStyle;\n  };\n};\n\nexport type TFlatList = TFlatListItem[];\nexport type TFlatListItem = {\n  [key: string]: string | number | boolean;\n}\n\nexport type TSectionList = TSectionListItem[];\nexport type TSectionListItem = { title: string; data: TFlatList };\n"],"mappings":""}
+{"version":3,"names":[],"sources":["index.types.ts"],"sourcesContent":["import type {\n  ViewStyle,\n  ColorValue,\n  TextStyle,\n  ModalProps,\n} from 'react-native';\n\nexport type DropdownProps = {\n  placeholder?: string;\n  label?: string;\n  error?: string;\n  helperText?: string;\n  options: TFlatList | TSectionList;\n  optionLabel?: string;\n  optionValue?: string;\n  onValueChange: Function;\n  selectedValue?:\n    | string\n    | boolean\n    | number\n    | string[]\n    | boolean[]\n    | number[]\n    | null;\n  isMultiple?: boolean;\n  isSearchable?: boolean;\n  dropdownIcon?: React.ReactNode;\n  labelStyle?: TextStyle;\n  dropdownStyle?: ViewStyle;\n  dropdownIconStyle?: ViewStyle;\n  dropdownContainerStyle?: ViewStyle;\n  dropdownErrorStyle?: ViewStyle;\n  dropdownErrorTextStyle?: TextStyle;\n  dropdownHelperTextStyle?: TextStyle;\n  selectedItemStyle?: TextStyle;\n  multipleSelectedItemStyle?: TextStyle;\n  modalBackgroundStyle?: ViewStyle;\n  modalOptionsContainerStyle?: ViewStyle;\n  searchInputStyle?: ViewStyle;\n  primaryColor?: ColorValue;\n  disabled?: boolean;\n  checkboxSize?: number;\n  checkboxStyle?: ViewStyle;\n  checkboxLabelStyle?: TextStyle;\n  checkboxComponentStyles?: {\n    checkboxSize?: number;\n    checkboxStyle?: ViewStyle;\n    checkboxLabelStyle?: TextStyle;\n  };\n  checkboxComponent?: React.ReactNode;\n  placeholderStyle?: TextStyle;\n  listHeaderComponent?: React.ReactNode;\n  listFooterComponent?: React.ReactNode;\n  hideModal?: boolean;\n  modalProps?: ModalProps;\n  listComponentStyles?: {\n    listEmptyComponentStyle?: TextStyle;\n    itemSeparatorStyle?: ViewStyle;\n    sectionHeaderStyle?: TextStyle;\n  };\n  selectAllControls?: {\n    selectAllText?: string;\n    unselectAllText?: string;\n    selectAllCallback?: () => void;\n    unselectAllCallback?: () => void;\n  };\n};\n\nexport type TFlatList = TFlatListItem[];\nexport type TFlatListItem = {\n  [key: string]: string | number | boolean;\n};\n\nexport type TSectionList = TSectionListItem[];\nexport type TSectionListItem = { title: string; data: TFlatList };\n"],"mappings":""}

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

@@ -17,5 +17,5 @@ const checkboxComponentStyles = {
 };
 ```
   */
-declare const CheckBox: ({ label, value, disabled, primaryColor, checkboxSize, checkboxStyle, checkboxLabelStyle, checkboxComponentStyles, onChange, }: CheckboxProps) => JSX.Element;
+declare const CheckBox: ({ label, value, disabled, primaryColor, checkboxSize, checkboxStyle, checkboxLabelStyle, checkboxComponentStyles, checkboxComponent, onChange, }: CheckboxProps) => JSX.Element;
 export default CheckBox;

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ColorValue, ViewStyle, TextStyle } from 'react-native';
 export type CheckboxProps = {
     label?: string;
@@ -12,5 +13,6 @@ export type CheckboxProps = {
         checkboxStyle?: ViewStyle;
         checkboxLabelStyle?: TextStyle;
     };
+    checkboxComponent?: React.ReactNode;
     onChange?: (value: boolean | string | number) => void;
 };

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

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

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

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const _default: React.MemoExoticComponent<({ item, optionLabel, optionValue, isMultiple, selectedOption, onChange, primaryColor, checkboxSize, checkboxStyle, checkboxLabelStyle, checkboxComponentStyles, }: any) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ item, optionLabel, optionValue, isMultiple, selectedOption, onChange, primaryColor, checkboxSize, checkboxStyle, checkboxLabelStyle, checkboxComponentStyles, checkboxComponent, }: any) => JSX.Element>;
 export default _default;

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

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

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

@@ -35,6 +35,7 @@ export type DropdownProps = {
         checkboxStyle?: ViewStyle;
         checkboxLabelStyle?: TextStyle;
     };
+    checkboxComponent?: React.ReactNode;
     placeholderStyle?: TextStyle;
     listHeaderComponent?: React.ReactNode;
     listFooterComponent?: React.ReactNode;
@@ -45,6 +46,12 @@ export type DropdownProps = {
         itemSeparatorStyle?: ViewStyle;
         sectionHeaderStyle?: TextStyle;
     };
+    selectAllControls?: {
+        selectAllText?: string;
+        unselectAllText?: string;
+        selectAllCallback?: () => void;
+        unselectAllCallback?: () => void;
+    };
 };
 export type TFlatList = TFlatListItem[];
 export type TFlatListItem = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-input-select",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "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",
@@ -26,7 +26,7 @@
     "typescript": "tsc --noEmit",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "prepare": "bob build",
-    "release": "release-it -- patch --ci",
+    "release": "release-it --ci",
     "example": "yarn --cwd example",
     "pods": "cd example && pod-install --quiet",
     "bootstrap": "yarn example && yarn && yarn pods",

package/src/components/CheckBox/index.tsx

@@ -31,6 +31,7 @@ const CheckBox = ({
   checkboxStyle,
   checkboxLabelStyle,
   checkboxComponentStyles,
+  checkboxComponent,
   onChange,
 }: CheckboxProps) => {
   // const { checkboxSize, checkboxStyle, checkboxLabelStyle } =
@@ -57,22 +58,30 @@ const CheckBox = ({
       style={[styles.checkboxContainer]}
       disabled={disabled}
     >
-      <View style={[styles.checkbox, checkboxStyle, fillColor]}>
-        <Image
-          source={require('../../asset/check.png')}
-          style={[
-            {
-              height:
-                checkboxComponentStyles?.checkboxSize ||
-                checkboxSize ||
-                CHECKBOX_SIZE,
-              width:
-                checkboxComponentStyles?.checkboxSize ||
-                checkboxSize ||
-                CHECKBOX_SIZE,
-            },
-          ]}
-        />
+      <View
+        style={[
+          styles.checkbox,
+          checkboxComponentStyles?.checkboxStyle || checkboxStyle,
+          fillColor,
+        ]}
+      >
+        {checkboxComponent || (
+          <Image
+            source={require('../../asset/check.png')}
+            style={[
+              {
+                height:
+                  checkboxComponentStyles?.checkboxSize ||
+                  checkboxSize ||
+                  CHECKBOX_SIZE,
+                width:
+                  checkboxComponentStyles?.checkboxSize ||
+                  checkboxSize ||
+                  CHECKBOX_SIZE,
+              },
+            ]}
+          />
+        )}
       </View>
       {label && (
         <Text

package/src/components/CheckBox/types.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { ColorValue, ViewStyle, TextStyle } from 'react-native';
 
 export type CheckboxProps = {
@@ -13,5 +14,6 @@ export type CheckboxProps = {
     checkboxStyle?: ViewStyle;
     checkboxLabelStyle?: TextStyle;
   };
+  checkboxComponent?: React.ReactNode;
   onChange?: (value: boolean | string | number) => void;
 };

package/src/components/Dropdown/DropdownFlatList.tsx

@@ -20,6 +20,7 @@ const DropdownFlatList = ({
   checkboxStyle, // kept for backwards compatibility to be removed in future release
   checkboxLabelStyle, // kept for backwards compatibility to be removed  in future release
   checkboxComponentStyles,
+  checkboxComponent,
   listComponentStyles,
   listIndex,
   ...rest
@@ -70,6 +71,7 @@ const DropdownFlatList = ({
           checkboxStyle, // kept for backwards compatibility
           checkboxLabelStyle, // kept for backwards compatibility
           checkboxComponentStyles,
+          checkboxComponent
         })
       }
       keyExtractor={(_item, index) => `Options${index}`}
@@ -99,6 +101,7 @@ const _renderItem = ({ item }: any, props: any) => {
       checkboxLabelStyle={props.checkboxLabelStyle}
       scrollToItem={props.scrollToItem}
       checkboxComponentStyles={props.checkboxComponentStyles}
+      checkboxComponent={props.checkboxComponent}
     />
   );
 };

package/src/components/Dropdown/DropdownListItem.tsx

@@ -14,6 +14,7 @@ const DropdownListItem = ({
   checkboxStyle,
   checkboxLabelStyle,
   checkboxComponentStyles,
+  checkboxComponent,
 }: any) => {
   return (
     <TouchableOpacity
@@ -37,6 +38,7 @@ const DropdownListItem = ({
           checkboxComponentStyles?.checkboxLabelStyle || checkboxLabelStyle
         }
         disabled={item.disabled}
+        checkboxComponent={checkboxComponent}
       />
     </TouchableOpacity>
   );

package/src/components/Dropdown/DropdownSectionList.tsx

@@ -25,6 +25,7 @@ const DropdownSectionList = ({
   checkboxStyle,
   checkboxLabelStyle,
   checkboxComponentStyles,
+  checkboxComponent,
   listComponentStyles,
   listIndex,
   ...rest
@@ -105,6 +106,7 @@ const DropdownSectionList = ({
           checkboxStyle, // kept for backwards compatibility
           checkboxLabelStyle, // kept for backwards compatibility
           checkboxComponentStyles,
+          checkboxComponent,
           expandedSections,
         })
       }
@@ -150,6 +152,7 @@ const _renderItem = ({ section: { title }, item }: any, props: any) => {
       checkboxStyle={props.checkboxStyle}
       checkboxLabelStyle={props.checkboxLabelStyle}
       checkboxComponentStyles={props.checkboxComponentStyles}
+      checkboxComponent={props.checkboxComponent}
     />
   );
 };

package/src/index.tsx

@@ -52,11 +52,13 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
   checkboxStyle, // kept for backwards compatibility
   checkboxLabelStyle, // kept for backwards compatibility
   checkboxComponentStyles,
+  checkboxComponent,
   listHeaderComponent,
   listFooterComponent,
   listComponentStyles,
   modalProps,
   hideModal = false,
+  selectAllControls,
   ...rest
 }) => {
   const [newOptions, setNewOptions] = useState<TFlatList | TSectionList>([]);
@@ -153,6 +155,20 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
       onValueChange(selectedValues); //send value to parent
       return !prevVal;
     });
+
+    if (
+      typeof selectAllControls?.selectAllCallback === 'function' &&
+      !selectAll
+    ) {
+      selectAllControls.selectAllCallback();
+    }
+
+    if (
+      typeof selectAllControls?.unselectAllCallback === 'function' &&
+      selectAll
+    ) {
+      selectAllControls.unselectAllCallback();
+    }
   };
 
   /*===========================================
@@ -355,13 +371,18 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
                   <TouchableOpacity onPress={() => {}}>
                     <CheckBox
                       value={selectAll}
-                      label={selectAll ? 'Clear all' : 'Select all'}
+                      label={
+                        selectAll
+                          ? selectAllControls?.unselectAllText || 'Clear all'
+                          : selectAllControls?.selectAllText || 'Select all'
+                      }
                       onChange={() => handleSelectAll()}
                       primaryColor={primary}
                       checkboxSize={checkboxSize}
                       checkboxStyle={checkboxStyle}
                       checkboxLabelStyle={checkboxLabelStyle}
                       checkboxComponentStyles={checkboxComponentStyles}
+                      checkboxComponent={checkboxComponent}
                     />
                   </TouchableOpacity>
                 </View>
@@ -384,6 +405,7 @@ export const DropdownSelect: React.FC<DropdownProps> = ({
           checkboxStyle={checkboxStyle}
           checkboxLabelStyle={checkboxLabelStyle}
           checkboxComponentStyles={checkboxComponentStyles}
+          checkboxComponent={checkboxComponent}
           listIndex={listIndex}
         />
       </CustomModal>

package/src/types/index.types.ts

@@ -47,6 +47,7 @@ export type DropdownProps = {
     checkboxStyle?: ViewStyle;
     checkboxLabelStyle?: TextStyle;
   };
+  checkboxComponent?: React.ReactNode;
   placeholderStyle?: TextStyle;
   listHeaderComponent?: React.ReactNode;
   listFooterComponent?: React.ReactNode;
@@ -57,12 +58,18 @@ export type DropdownProps = {
     itemSeparatorStyle?: ViewStyle;
     sectionHeaderStyle?: TextStyle;
   };
+  selectAllControls?: {
+    selectAllText?: string;
+    unselectAllText?: string;
+    selectAllCallback?: () => void;
+    unselectAllCallback?: () => void;
+  };
 };
 
 export type TFlatList = TFlatListItem[];
 export type TFlatListItem = {
   [key: string]: string | number | boolean;
-}
+};
 
 export type TSectionList = TSectionListItem[];
 export type TSectionListItem = { title: string; data: TFlatList };