Feat/picker custom top element

demo/src/screens/componentScreens/PickerScreen.tsx

@@ -83,6 +83,15 @@ const dialogOptions = [
   {label: 'Option 8', value: 6}
 ];
 
+const statusOptions = [
+  {label: 'Overview', value: 'overview'},
+  {label: 'In Progress', value: 'inProgress'},
+  {label: 'Completed', value: 'completed'},
+  {label: 'Pending Review', value: 'pendingReview'},
+  {label: 'Approved', value: 'approved'},
+  {label: 'Rejected', value: 'rejected'}
+];
+
 export default class PickerScreen extends Component {
   picker = React.createRef<PickerMethods>();
   state = {
@@ -96,6 +105,7 @@ export default class PickerScreen extends Component {
     dialogPickerValue: 'java',
     customModalValues: [],
     filter: undefined,
+    statOption: [],
     scheme: undefined,
     contact: 0
   };
@@ -122,6 +132,15 @@ export default class PickerScreen extends Component {
     );
   };
 
+  onTopElementPress = (allOptionsSelected: boolean) => {
+    if (allOptionsSelected) {
+      this.setState({statOption: []});
+    } else {
+      const allValues = statusOptions.map(option => option.value);
+      this.setState({statOption: allValues});
+    }
+  };
+
   render() {
     return (
       <ScrollView keyboardShouldPersistTaps="always">
@@ -195,7 +214,32 @@ export default class PickerScreen extends Component {
             searchPlaceholder={'Search a language'}
             items={dialogOptions}
           />
-
+
+          <Text text70 $textDefault>
+            Custom Top Element:
+          </Text>
+          <Picker
+            placeholder="Status"
+            floatingPlaceholder
+            value={this.state.statOption}
+            onChange={items => this.setState({statOption: items})}
+            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>
+              );
+            }}
+          />
+
           <Text marginB-10 text70 $textDefault>
             Custom Picker:
           </Text>

src/components/picker/PickerItemsList.tsx

@@ -34,7 +34,8 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     mode,
     testID,
     showLoader,
-    customLoaderElement
+    customLoaderElement,
+    renderCustomTopElement
   } = props;
   const context = useContext(PickerContext);
 
@@ -167,6 +168,7 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     ) : (
       <>
         {renderSearchInput()}
+        {!!renderCustomTopElement && renderCustomTopElement(context.value)}
         {renderList()}
       </>
     );

src/components/picker/helpers/usePickerSelection.tsx

@@ -3,16 +3,35 @@ 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' | 'onItemSelection' | 'getItemValue' | 'topBarProps' | 'mode'
+  > {
   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,
+    onItemSelection,
+    topBarProps,
+    pickerExpandableRef,
+    getItemValue,
+    setSearchValue,
+    mode
+  } = props;
   const [multiDraftValue, setMultiDraftValue] = useState(value as PickerMultiValue);
   const [multiFinalValue, setMultiFinalValue] = useState(value as PickerMultiValue);
 
+  useEffect(() => {
+    if (mode === PickerModes.MULTI && multiFinalValue !== multiDraftValue) {
+      onItemSelection?.(multiDraftValue);
+    }
+  }, [multiDraftValue]);
+
   useEffect(() => {
     if (mode === PickerModes.MULTI && multiFinalValue !== value) {
       setMultiDraftValue(value as PickerMultiValue);
@@ -50,6 +69,7 @@ const usePickerSelection = (props: UsePickerSelectionProps) => {
 
   return {
     multiDraftValue,
+    setMultiDraftValue,
     onDoneSelecting,
     toggleItemSelection,
     cancelSelect

src/components/picker/index.tsx

@@ -60,6 +60,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     labelStyle,
     testID,
     onChange,
+    onItemSelection,
     onPress,
     onSearchChange,
     topBarProps,
@@ -78,6 +79,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     items: propItems,
     showLoader,
     customLoaderElement,
+    renderCustomTopElement,
     ...others
   } = themeProps;
   const {preset, placeholder, style, trailingAccessory, label: propsLabel} = others;
@@ -101,10 +103,11 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     setSearchValue,
     onSearchChange: _onSearchChange
   } = usePickerSearch({showSearch, onSearchChange, getItemLabel, children, items});
-  const {multiDraftValue, onDoneSelecting, toggleItemSelection, cancelSelect} = usePickerSelection({
+  const {multiDraftValue, setMultiDraftValue, onDoneSelecting, toggleItemSelection, cancelSelect} = usePickerSelection({
     migrate,
     value,
     onChange,
+    onItemSelection,
     pickerExpandableRef: pickerExpandable,
     getItemValue,
     topBarProps,
@@ -145,6 +148,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     return {
       migrate,
       value: mode === PickerModes.MULTI ? multiDraftValue : pickerValue,
+      setValue: mode === PickerModes.MULTI ? setMultiDraftValue : undefined,
       onPress: mode === PickerModes.MULTI ? toggleItemSelection : onDoneSelecting,
       isMultiMode: mode === PickerModes.MULTI,
       getItemValue,
@@ -245,6 +249,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
         useSafeArea={useSafeArea}
         showLoader={showLoader}
         customLoaderElement={customLoaderElement}
+        renderCustomTopElement={renderCustomTopElement}
       >
         {filteredItems}
       </PickerItemsList>

src/components/picker/types.ts

@@ -180,6 +180,10 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
      * Callback for when picker value change
      */
     onChange?: (value: PickerValue) => void;
+    /**
+     * Callback for when picker item is selected (only for multi mode)
+     */
+    onItemSelection?: (value: PickerMultiValue) => void;
     /**
      * SINGLE or MULTI selection mode
      */
@@ -206,6 +210,10 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
       itemProps: PickerItemProps & {isSelected: boolean; isItemDisabled: boolean},
       label?: string
     ) => React.ReactElement;
+    /**
+     * Custom top element, value prop is relevant for multi picker use cases
+     */
+    renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
     /**
      * Add onPress callback for when pressing the picker
      */
@@ -305,6 +313,7 @@ export interface PickerContextProps
   isMultiMode: boolean;
   onSelectedLayout: (event: any) => any;
   selectionLimit: PickerProps['selectionLimit'];
+  setValue?: React.Dispatch<React.SetStateAction<PickerMultiValue>> | undefined;
 }
 
 export type PickerItemsListProps = Pick<
@@ -315,6 +324,7 @@ export type PickerItemsListProps = Pick<
   | 'useSafeArea'
   | 'showLoader'
   | 'customLoaderElement'
+  | 'renderCustomTopElement'
   | 'showSearch'
   | 'searchStyle'
   | 'searchPlaceholder'