Picker selection control bar and toggle all items functionality (#3557)

* Picker selection control bar and toggle all items functionality

* Refactor PickerScreen layout

* Rename PickerSelectionControlBar to PickerSelectionStatusToolbar and update related references

* Enhance selection status label functionality in PickerSelectionStatusToolbar

* Refactor PickerSelectionStatusToolbar and types for improved selection handling

* Remove 'none' option from select all types in Picker and update related types

* Fix types issue in PickerItemsList

* Refactor toggleAllItemsSelection and availableItems usage

* Remove customLabel prop from PickerSelectionStatusProps

* Add renderTopCustomElement and renderBottomCustomElement props to PickerSelectionStatusToolbar

* Rename getLabel prop to getSelectionStatusLabe and update related usages

* Refactor selectionStatus handling in PickerItemsList

* Remove unnecessary null return in renderLabel

* Remove renderTopCustomElement prop

* Rename _onSegmentChange to onSegmentChange

* Fix TypeScript ignore directive for selectAllType in Picker

* Update buttonProps onPress parameter to use selectionValue and set default selectAllType to 'button'

* Refactor Picker selection logic to use areAllItemsSelected and simplify selection status handling

* Rename getSelectionStatusLabel to getLabel and update type definitions for clarity

* Remove renderBottomCustomElement prop and add divider in PickerSelectionStatusToolbar

* Refactor Picker component to remove PickerSelectAllType enum

* Refactor PickerSelectionStatusToolbar to simplify props and selection handling

* Rename PickerSelectionStatusToolbar to PickerSelectionStatusBar and update related references

* Update buttonProps onPress to use customValue instead of selectionValue in PickerSelectionStatusBar

* Add selectAllType prop to PickerSelectionStatusBar for flexible selection handling

* Refactor PickerSelectionStatusBar to remove selectAllType prop and simplify selection handling

* Fix type assertion for value in PickerSelectionStatusBar to ensure correct handling of PickerMultiValue

* Refactor renderSelectionStatus, fix when showLabel is false

* Add PickerSelectionStatusProps import to PickerScreen and index files

* Remove unused setMultiFinalValue from usePickerSelection hook

* Remove value from PickerSelectionStatusLabelData

* selectedCount moved to usePickerSelection

* PickerSelectionStatusBar simplify selectedCount

---------

Co-authored-by: Miki Leib <38354019+M-i-k-e-l@users.noreply.github.com>

Author: adids1221

demo/src/screens/componentScreens/PickerScreen.tsx

@@ -15,7 +15,9 @@ import {
   PanningProvider,
   PickerProps,
   RenderCustomModalProps,
-  PickerMethods
+  PickerMethods,
+  SegmentedControl,
+  PickerSelectionStatusProps
 } from 'react-native-ui-lib'; //eslint-disable-line
 import contactsData from '../../data/conversations';
 import {longOptions} from './PickerScreenLongOptions';
@@ -24,6 +26,16 @@ const tagIcon = require('../../assets/icons/tags.png');
 const dropdown = require('../../assets/icons/chevronDown.png');
 const dropdownIcon = <Icon source={dropdown} tintColor={Colors.$iconDefault}/>;
 
+const selectAllSegment = [{label: 'button'}, {label: 'checkbox'}];
+
+const buttonProps = {
+  onPress: (selectionValue: any) => console.log('onPress', selectionValue)
+};
+
+const checkboxProps = {
+  onValueChange: (value: boolean) => console.log('onValueChange', value)
+};
+
 const renderContact = (contactValue: any, props: any) => {
   const contact = contacts[contactValue as number];
   return (
@@ -107,7 +119,12 @@ export default class PickerScreen extends Component {
     filter: undefined,
     statOption: [],
     scheme: undefined,
-    contact: 0
+    contact: 0,
+    selectAllType: 'button' as PickerSelectionStatusProps['selectAllType']
+  };
+
+  onSegmentChange = (index: number) => {
+    this.setState({selectAllType: selectAllSegment[index].label});
   };
 
   renderDialog: PickerProps['renderOverlay'] = (modalProps: RenderCustomModalProps) => {
@@ -148,7 +165,7 @@ export default class PickerScreen extends Component {
           <Text text40 $textDefault>
             Picker
           </Text>
-          
+
           <Picker
             placeholder="Favorite Language"
             floatingPlaceholder
@@ -215,9 +232,12 @@ export default class PickerScreen extends Component {
             items={dialogOptions}
           />
 
-          <Text text70 $textDefault>
-            Custom Top Element:
-          </Text>
+          <View row spread centerV>
+            <Text text70 $textDefault>
+              Selection Status:
+            </Text>
+            <SegmentedControl segments={selectAllSegment} onChangeIndex={this.onSegmentChange}/>
+          </View>
           <Picker
             placeholder="Status"
             floatingPlaceholder
@@ -226,21 +246,14 @@ export default class PickerScreen extends Component {
             topBarProps={{title: 'Status'}}
             mode={Picker.modes.MULTI}
             items={statusOptions}
-            renderCustomTopElement={value => {
-              const allOptionsSelected = Array.isArray(value) && value.length === statusOptions.length;
-              return (
-                <View margin-s3>
-                  <Button
-                    label={allOptionsSelected ? 'Unselect All' : 'Select All'}
-                    onPress={() => this.onTopElementPress(allOptionsSelected)}
-                    size="small"
-                  />
-                </View>
-              );
+            selectionStatus={{
+              selectAllType: this.state.selectAllType,
+              buttonProps,
+              checkboxProps
             }}
           />
 
-          <Text marginB-10 text70 $textDefault>
+          <Text marginV-10 text70 $textDefault>
             Custom Picker:
           </Text>
           <Picker
@@ -299,7 +312,7 @@ export default class PickerScreen extends Component {
             style={{alignSelf: 'flex-start'}}
             onPress={() => this.picker.current?.openExpandable?.()}
           />
-          
+
           <Text text60 marginT-s5>
             Different Field Types
           </Text>

src/components/picker/PickerItemsList.tsx

@@ -13,6 +13,7 @@ import {PickerItemProps, PickerItemsListProps, PickerSingleValue, PickerModes} f
 import PickerContext from './PickerContext';
 import PickerItem from './PickerItem';
 import {Constants} from '../../commons/new';
+import PickerSelectionStatusBar from './PickerSelectionStatusBar';
 
 const keyExtractor = (_item: string, index: number) => index.toString();
 
@@ -35,7 +36,8 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     testID,
     showLoader,
     customLoaderElement,
-    renderCustomTopElement
+    renderCustomTopElement,
+    selectionStatus: selectionStatusProps
   } = props;
   const context = useContext(PickerContext);
 
@@ -169,13 +171,17 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     );
   };
 
+  const selectionStatus = useMemo(() => mode === PickerModes.MULTI && selectionStatusProps && <PickerSelectionStatusBar {...selectionStatusProps}/>,
+    [selectionStatusProps, mode]);
+
   const renderContent = () => {
     return useWheelPicker ? (
       renderWheel()
     ) : (
       <>
         {renderSearchInput()}
         {renderCustomTopElement?.(context.value)}
+        {selectionStatus}
         {renderList()}
       </>
     );

src/components/picker/PickerSelectionStatusBar.tsx

@@ -0,0 +1,77 @@
+import React, {useCallback, useContext} from 'react';
+import {StyleSheet} from 'react-native';
+import Button from '../button';
+import Checkbox from '../checkbox';
+import View from '../view';
+import Text from '../text';
+import Dividers from '../../style/dividers';
+import PickerContext from './PickerContext';
+import {PickerSelectionStatusProps} from './types';
+
+export default function PickerSelectionStatusBar(props: PickerSelectionStatusProps) {
+  const {containerStyle, getLabel, showLabel = true} = props;
+  const context = useContext(PickerContext);
+  const {toggleAllItemsSelection, selectedCount, areAllItemsSelected} = context;
+
+  const checkboxIndeterminate = selectedCount > 0 && !areAllItemsSelected;
+  const label =
+    getLabel?.({selectedCount, areAllItemsSelected}) ??
+    `${selectedCount} Selected ${areAllItemsSelected ? '(All)' : ''}`;
+
+  const handlePress = useCallback(() => {
+    const newSelectionState = !areAllItemsSelected;
+    toggleAllItemsSelection?.(newSelectionState);
+    if (props.selectAllType === 'button') {
+      props?.buttonProps?.onPress?.({customValue: newSelectionState});
+    } else if (props.selectAllType === 'checkbox') {
+      props?.checkboxProps?.onValueChange?.(newSelectionState);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [areAllItemsSelected, toggleAllItemsSelection]);
+
+  const renderSelectionStatus = () => {
+    return (
+      <View flexG={!showLabel} style={!showLabel && styles.componentContainer}>
+        {props.selectAllType === 'button' ? (
+          <Button
+            label={areAllItemsSelected ? 'Deselect All' : 'Select All'}
+            link
+            {...props?.buttonProps}
+            onPress={handlePress}
+          />
+        ) : (
+          props.selectAllType === 'checkbox' && (
+            <Checkbox
+              {...props.checkboxProps}
+              value={selectedCount > 0}
+              indeterminate={checkboxIndeterminate}
+              onValueChange={handlePress}
+            />
+          )
+        )}
+      </View>
+    );
+  };
+
+  const renderLabel = () => {
+    if (showLabel) {
+      return <Text>{label}</Text>;
+    }
+  };
+
+  return (
+    <View>
+      <View row spread paddingH-page marginV-s4 style={containerStyle}>
+        {renderLabel()}
+        {renderSelectionStatus()}
+      </View>
+      <View style={Dividers.d20}/>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  componentContainer: {
+    alignItems: 'flex-end'
+  }
+});

src/components/picker/helpers/usePickerSelection.tsx

@@ -1,15 +1,15 @@
-import {RefObject, useCallback, useState, useEffect} from 'react';
+import {RefObject, useCallback, useState, useEffect, useMemo} from 'react';
 import _ from 'lodash';
 import {PickerProps, PickerValue, PickerSingleValue, PickerMultiValue, PickerModes} from '../types';
 
 interface UsePickerSelectionProps
-  extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode'> {
+  extends Pick<PickerProps, 'migrate' | 'value' | 'onChange' | 'getItemValue' | 'topBarProps' | 'mode' | 'items'> {
   pickerExpandableRef: RefObject<any>;
   setSearchValue: (searchValue: string) => void;
 }
 
 const usePickerSelection = (props: UsePickerSelectionProps) => {
-  const {migrate, value, onChange, topBarProps, pickerExpandableRef, getItemValue, setSearchValue, mode} = props;
+  const {migrate, value, onChange, topBarProps, pickerExpandableRef, getItemValue, setSearchValue, mode, items} = props;
   const [multiDraftValue, setMultiDraftValue] = useState(value as PickerMultiValue);
   const [multiFinalValue, setMultiFinalValue] = useState(value as PickerMultiValue);
 
@@ -48,11 +48,31 @@ const usePickerSelection = (props: UsePickerSelectionProps) => {
     topBarProps?.onCancel?.();
   }, [multiFinalValue, topBarProps]);
 
+  const availableItems: PickerMultiValue = useMemo(() => {
+    return items?.filter(item => !item.disabled).map(item => item.value) || [];
+  }, [items]);
+
+  const areAllItemsSelected = useMemo(() => {
+    return multiDraftValue?.length === availableItems.length;
+  }, [multiDraftValue, availableItems]);
+
+  const selectedCount = useMemo(() => {
+    return multiDraftValue?.length;
+  }, [multiDraftValue]);
+
+  const toggleAllItemsSelection = useCallback((selectAll: boolean) => {
+    setMultiDraftValue(selectAll ? availableItems : []);
+  },
+  [availableItems]);
+
   return {
     multiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
-    cancelSelect
+    cancelSelect,
+    areAllItemsSelected,
+    selectedCount,
+    toggleAllItemsSelection
   };
 };
 

src/components/picker/index.tsx

@@ -28,7 +28,8 @@ import {
   PickerSearchStyle,
   RenderCustomModalProps,
   PickerItemsListProps,
-  PickerMethods
+  PickerMethods,
+  PickerSelectionStatusProps
 } from './types';
 import {DialogProps} from '../../incubator/dialog';
 
@@ -79,6 +80,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     showLoader,
     customLoaderElement,
     renderCustomTopElement,
+    selectionStatus,
     ...others
   } = themeProps;
   const {preset, placeholder, style, trailingAccessory, label: propsLabel} = others;
@@ -102,15 +104,24 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     setSearchValue,
     onSearchChange: _onSearchChange
   } = usePickerSearch({showSearch, onSearchChange, getItemLabel, children, items});
-  const {multiDraftValue, onDoneSelecting, toggleItemSelection, cancelSelect} = usePickerSelection({
+  const {
+    multiDraftValue,
+    onDoneSelecting,
+    toggleItemSelection,
+    cancelSelect,
+    areAllItemsSelected,
+    selectedCount,
+    toggleAllItemsSelection
+  } = usePickerSelection({
     migrate,
     value,
     onChange,
     pickerExpandableRef: pickerExpandable,
     getItemValue,
     topBarProps,
     setSearchValue,
-    mode
+    mode,
+    items
   });
 
   const {label, accessibilityInfo} = usePickerLabel({
@@ -152,7 +163,10 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
       getItemLabel,
       onSelectedLayout: onSelectedItemLayout,
       renderItem,
-      selectionLimit
+      selectionLimit,
+      areAllItemsSelected,
+      selectedCount,
+      toggleAllItemsSelection
     };
   }, [
     migrate,
@@ -165,7 +179,10 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     selectionLimit,
     onSelectedItemLayout,
     toggleItemSelection,
-    onDoneSelecting
+    onDoneSelecting,
+    areAllItemsSelected,
+    selectedCount,
+    toggleAllItemsSelection
   ]);
 
   const renderPickerItem = useCallback((item: PickerItemProps, index: number): React.ReactElement => {
@@ -247,6 +264,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
         showLoader={showLoader}
         customLoaderElement={customLoaderElement}
         renderCustomTopElement={renderCustomTopElement}
+        selectionStatus={selectionStatus}
       >
         {filteredItems}
       </PickerItemsList>
@@ -316,7 +334,8 @@ export {
   PickerSearchStyle,
   RenderCustomModalProps,
   PickerItemsListProps,
-  PickerMethods
+  PickerMethods,
+  PickerSelectionStatusProps
 };
 export {Picker}; // For tests
 export default Picker as typeof Picker & PickerStatics;