Picker selection control bar and toggle all items functionality

demo/src/screens/componentScreens/PickerScreen.tsx

@@ -15,7 +15,8 @@ import {
   PanningProvider,
   PickerProps,
   RenderCustomModalProps,
-  PickerMethods
+  PickerMethods,
+  SegmentedControl
 } from 'react-native-ui-lib'; //eslint-disable-line
 import contactsData from '../../data/conversations';
 import {longOptions} from './PickerScreenLongOptions';
@@ -24,6 +25,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: Picker.selectAllType.button}, {label: Picker.selectAllType.checkbox}];
+
+const buttonProps = {
+  onPress: (items: any) => console.log('onPress', items)
+};
+
+const checkboxProps = {
+  onValueChange: (value: boolean) => console.log('onValueChange', value)
+};
+
 const renderContact = (contactValue: any, props: any) => {
   const contact = contacts[contactValue as number];
   return (
@@ -107,7 +118,12 @@ export default class PickerScreen extends Component {
     filter: undefined,
     statOption: [],
     scheme: undefined,
-    contact: 0
+    contact: 0,
+    selectAllType: Picker.selectAllType.button
+  };
+
+  _onSegmentChange = (index: number) => {
+    this.setState({selectAllType: Picker.selectAllType[selectAllSegment[index].label]});
   };
 
   renderDialog: PickerProps['renderOverlay'] = (modalProps: RenderCustomModalProps) => {
@@ -148,7 +164,7 @@ export default class PickerScreen extends Component {
           <Text text40 $textDefault>
             Picker
           </Text>
-          
+
           <Picker
             placeholder="Favorite Language"
             floatingPlaceholder
@@ -215,9 +231,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 +245,18 @@ 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,
+              getLabel: data => {
+                const {selectedCount, isAllSelected} = data;
+                return `${selectedCount} ${isAllSelected ? 'All Items' : ' Items Are'} Selected`;
+              }
             }}
           />
 
-          <Text marginB-10 text70 $textDefault>
+          <Text marginV-10 text70 $textDefault>
             Custom Picker:
           </Text>
           <Picker
@@ -299,7 +315,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

@@ -9,10 +9,11 @@ import Text from '../text';
 import Icon from '../icon';
 import Button from '../button';
 import WheelPicker from '../WheelPicker';
-import {PickerItemProps, PickerItemsListProps, PickerSingleValue, PickerModes} from './types';
+import {PickerItemProps, PickerItemsListProps, PickerSingleValue, PickerModes, PickerMultiValue} from './types';
 import PickerContext from './PickerContext';
 import PickerItem from './PickerItem';
 import {Constants} from '../../commons/new';
+import PickerSelectionStatusToolbar from './PickerSelectionStatusToolbar';
 
 const keyExtractor = (_item: string, index: number) => index.toString();
 
@@ -35,7 +36,8 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     testID,
     showLoader,
     customLoaderElement,
-    renderCustomTopElement
+    renderCustomTopElement,
+    selectionStatus
   } = props;
   const context = useContext(PickerContext);
 
@@ -169,13 +171,25 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     );
   };
 
+  const renderSelectionStatus = useMemo(() => {
+    return (
+      <PickerSelectionStatusToolbar
+        {...selectionStatus}
+        availableItems={context?.availableItems}
+        value={context?.value as PickerMultiValue}
+        toggleAllItemsSelection={context?.toggleAllItemsSelection}
+      />
+    );
+  }, [selectionStatus, context?.value, context?.availableItems, context?.toggleAllItemsSelection]);
+
   const renderContent = () => {
     return useWheelPicker ? (
       renderWheel()
     ) : (
       <>
         {renderSearchInput()}
         {renderCustomTopElement?.(context.value)}
+        {mode === PickerModes.MULTI && selectionStatus && renderSelectionStatus}
         {renderList()}
       </>
     );

src/components/picker/PickerSelectionStatusToolbar.tsx

@@ -0,0 +1,96 @@
+import React, {useCallback} from 'react';
+import Button from '../button';
+import Checkbox from '../checkbox';
+import View from '../view';
+import Text from '../text';
+import {
+  PickerProps,
+  PickerContextProps,
+  PickerMultiValue,
+  PickerSelectAllType,
+  ButtonSelectionStatus,
+  CheckboxSelectionStatus
+} from './types';
+
+export type PickerSelectionStatusToolbarBaseProps = PickerProps['selectionStatus'] & {
+  value?: PickerMultiValue;
+  availableItems?: PickerMultiValue;
+};
+
+export type PickerSelectionStatusToolbarProps =
+  | (Partial<PickerContextProps> & (ButtonSelectionStatus & PickerSelectionStatusToolbarBaseProps))
+  | (Partial<PickerContextProps> & (CheckboxSelectionStatus & PickerSelectionStatusToolbarBaseProps));
+
+export default function PickerSelectionStatusToolbar(props: PickerSelectionStatusToolbarProps) {
+  const {
+    containerStyle,
+    getLabel,
+    availableItems = [],
+    selectAllType = 'none',
+    showLabel = true,
+    toggleAllItemsSelection,
+    value = [],
+    renderTopCustomElement,
+    renderBottomCustomElement
+  } = props;
+
+  const isAllSelected = value.length === availableItems.length;
+  const checkboxIndeterminate = value.length > 0 && value.length < availableItems.length;
+  const label =
+    getLabel?.({selectedCount: value.length, value, isAllSelected}) ??
+    `${value.length} Selected ${isAllSelected ? '(All)' : ''}`;
+
+  let buttonProps: ButtonSelectionStatus['buttonProps'] | undefined;
+  let checkboxProps: CheckboxSelectionStatus['checkboxProps'] | undefined;
+
+  switch (props.selectAllType) {
+    case PickerSelectAllType.button:
+      buttonProps = props.buttonProps;
+      break;
+    case PickerSelectAllType.checkbox:
+      checkboxProps = props.checkboxProps;
+      break;
+  }
+
+  const handlePress = useCallback(() => {
+    const newSelectionState = !isAllSelected;
+    toggleAllItemsSelection?.(newSelectionState);
+    buttonProps?.onPress?.(availableItems);
+    checkboxProps?.onValueChange?.(newSelectionState);
+  }, [isAllSelected, toggleAllItemsSelection, availableItems, buttonProps, checkboxProps]);
+
+  const renderSelectionStatus = () => {
+    if (selectAllType === 'button') {
+      return (
+        <Button label={isAllSelected ? 'Deselect All' : 'Select All'} link {...buttonProps} onPress={handlePress}/>
+      );
+    } else if (selectAllType === 'checkbox') {
+      return (
+        <Checkbox
+          {...checkboxProps}
+          value={value.length > 0}
+          indeterminate={checkboxIndeterminate}
+          onValueChange={handlePress}
+        />
+      );
+    }
+  };
+
+  const renderLabel = () => {
+    if (showLabel) {
+      return <Text>{label}</Text>;
+    }
+    return null;
+  };
+
+  return (
+    <View>
+      {renderTopCustomElement?.()}
+      <View row spread centerV paddingH-page style={containerStyle}>
+        {renderLabel()}
+        {renderSelectionStatus()}
+      </View>
+      {renderBottomCustomElement?.()}
+    </View>
+  );
+}

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,23 @@ const usePickerSelection = (props: UsePickerSelectionProps) => {
     topBarProps?.onCancel?.();
   }, [multiFinalValue, topBarProps]);
 
+  const availableItems: PickerMultiValue = useMemo(() => {
+    return items?.filter(item => !item.disabled).map(item => item.value) || [];
+  }, [items]);
+
+  const toggleAllItemsSelection = useCallback((selectAll: boolean) => {
+    setMultiDraftValue(selectAll ? availableItems : []);
+  },
+  [availableItems]);
+
   return {
     multiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
-    cancelSelect
+    cancelSelect,
+    setMultiFinalValue,
+    availableItems,
+    toggleAllItemsSelection
   };
 };
 

src/components/picker/index.tsx

@@ -28,7 +28,8 @@ import {
   PickerSearchStyle,
   RenderCustomModalProps,
   PickerItemsListProps,
-  PickerMethods
+  PickerMethods,
+  PickerSelectAllType
 } from './types';
 import {DialogProps} from '../../incubator/dialog';
 
@@ -42,6 +43,7 @@ type PickerStatics = {
   modes: typeof PickerModes;
   fieldTypes: typeof PickerFieldTypes;
   extractPickerItems: typeof extractPickerItems;
+  selectAllType: typeof PickerSelectAllType;
 };
 
 const Picker = React.forwardRef((props: PickerProps, ref) => {
@@ -79,6 +81,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     showLoader,
     customLoaderElement,
     renderCustomTopElement,
+    selectionStatus,
     ...others
   } = themeProps;
   const {preset, placeholder, style, trailingAccessory, label: propsLabel} = others;
@@ -102,16 +105,18 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     setSearchValue,
     onSearchChange: _onSearchChange
   } = usePickerSearch({showSearch, onSearchChange, getItemLabel, children, items});
-  const {multiDraftValue, onDoneSelecting, toggleItemSelection, cancelSelect} = usePickerSelection({
-    migrate,
-    value,
-    onChange,
-    pickerExpandableRef: pickerExpandable,
-    getItemValue,
-    topBarProps,
-    setSearchValue,
-    mode
-  });
+  const {multiDraftValue, onDoneSelecting, toggleItemSelection, cancelSelect, availableItems, toggleAllItemsSelection} =
+    usePickerSelection({
+      migrate,
+      value,
+      onChange,
+      pickerExpandableRef: pickerExpandable,
+      getItemValue,
+      topBarProps,
+      setSearchValue,
+      mode,
+      items
+    });
 
   const {label, accessibilityInfo} = usePickerLabel({
     value,
@@ -152,7 +157,9 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
       getItemLabel,
       onSelectedLayout: onSelectedItemLayout,
       renderItem,
-      selectionLimit
+      selectionLimit,
+      availableItems,
+      toggleAllItemsSelection
     };
   }, [
     migrate,
@@ -165,7 +172,9 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     selectionLimit,
     onSelectedItemLayout,
     toggleItemSelection,
-    onDoneSelecting
+    onDoneSelecting,
+    availableItems,
+    toggleAllItemsSelection
   ]);
 
   const renderPickerItem = useCallback((item: PickerItemProps, index: number): React.ReactElement => {
@@ -247,6 +256,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
         showLoader={showLoader}
         customLoaderElement={customLoaderElement}
         renderCustomTopElement={renderCustomTopElement}
+        selectionStatus={selectionStatus}
       >
         {filteredItems}
       </PickerItemsList>
@@ -306,6 +316,8 @@ Picker.modes = PickerModes;
 Picker.fieldTypes = PickerFieldTypes;
 // @ts-expect-error
 Picker.extractPickerItems = extractPickerItems;
+//@ts-ignore
+Picker.selectAllType = PickerSelectAllType;
 
 export {
   PickerProps,
@@ -316,7 +328,8 @@ export {
   PickerSearchStyle,
   RenderCustomModalProps,
   PickerItemsListProps,
-  PickerMethods
+  PickerMethods,
+  PickerSelectAllType
 };
 export {Picker}; // For tests
 export default Picker as typeof Picker & PickerStatics;