Refcator renderCustomTopElement to use setValue

demo/src/screens/PlaygroundScreen.tsx

@@ -1,20 +1,56 @@
-import React, {Component} from 'react';
-import {View, Text, Card, TextField, Button} from 'react-native-ui-lib';
+import React, {useState} from 'react';
+import {View, Text, Checkbox, Picker, PickerValue} from 'react-native-ui-lib';
 
-export default class PlaygroundScreen extends Component {
-  render() {
+const STATUS = [
+  {value: 1, label: 'Curious'},
+  {value: 2, label: 'Engaged'},
+  {value: 3, label: 'Satisfied'},
+  {value: 4, label: 'Anticipative'},
+  {value: 5, label: 'Elated'},
+  {value: 6, label: 'Disappointed'}
+];
+
+export default function PlaygroundScreen() {
+  const [statOption, setStatOption] = useState<PickerValue>([]);
+
+  const onTopElementPress = (allOptionsSelected: boolean, setMultiDraftValue: any) => {
+    if (allOptionsSelected) {
+      setMultiDraftValue([]);
+    } else {
+      const allValues = STATUS.map(option => option.value);
+      setMultiDraftValue(allValues);
+    }
+  };
+
+  const renderCustomTopElement = (value?: PickerValue, setMultiDraftValue?: any) => {
+    console.log(`inside renderCustomTopElement: ${value}`);
+    const allOptionsSelected = Array.isArray(value) && value.length === STATUS.length;
     return (
-      <View bg-grey80 flex padding-20>
-        <View marginT-20>
-          <TextField migrate placeholder="Placeholder"/>
-        </View>
-        <Card height={100} center padding-20>
-          <Text text50>Playground Screen</Text>
-        </Card>
-        <View flex center>
-          <Button marginV-20 label="Button"/>
+      <View>
+        <View padding-page spread row>
+          <Text bodyBold>
+            {value?.length} Selected Items{allOptionsSelected && `(All)`}
+          </Text>
+          <Checkbox
+            indeterminate={!allOptionsSelected && value?.length > 0}
+            value={value?.length > 0}
+            onValueChange={() => onTopElementPress(allOptionsSelected, setMultiDraftValue)}
+          />
         </View>
       </View>
     );
-  }
+  };
+  return (
+    <View flex padding-page>
+      <Picker
+        mode={Picker.modes.MULTI}
+        onChange={(items: PickerValue) => setStatOption(items as PickerValue)}
+        placeholder="Choose Multiple Statuses"
+        value={statOption}
+        items={STATUS}
+        renderCustomTopElement={renderCustomTopElement}
+        showSearch
+      />
+    </View>
+  );
 }

src/components/picker/PickerItemsList.tsx

@@ -175,7 +175,7 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     ) : (
       <>
         {renderSearchInput()}
-        {renderCustomTopElement?.(context.value)}
+        {renderCustomTopElement?.(context.value, context.setMultiDraftValue)}
         {renderList()}
       </>
     );

src/components/picker/helpers/usePickerSelection.tsx

@@ -20,6 +20,25 @@ const usePickerSelection = (props: UsePickerSelectionProps) => {
     }
   }, [value]);
 
+  const isPickerSingleValue = useCallback((item: any): item is PickerSingleValue => {
+    return typeof item === 'string' || typeof item === 'number';
+  }, []);
+
+  const isMultiValue = useCallback((value: any): value is PickerMultiValue => {
+    if (!Array.isArray(value)) {
+      return false;
+    }
+    return value.every(item => isPickerSingleValue(item));
+  },
+  [isPickerSingleValue]);
+
+  const setExperimentalValue = useCallback((value: any) => {
+    if (isMultiValue(value)) {
+      setMultiDraftValue(value);
+    }
+  },
+  [setMultiDraftValue, isMultiValue]);
+
   const onDoneSelecting = useCallback((item: PickerValue) => {
     setSearchValue('');
     setMultiFinalValue(item as PickerMultiValue);
@@ -50,6 +69,7 @@ const usePickerSelection = (props: UsePickerSelectionProps) => {
 
   return {
     multiDraftValue,
+    setMultiDraftValue: setExperimentalValue,
     onDoneSelecting,
     toggleItemSelection,
     cancelSelect

src/components/picker/index.tsx

@@ -102,7 +102,7 @@ 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,
@@ -146,6 +146,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     return {
       migrate,
       value: mode === PickerModes.MULTI ? multiDraftValue : pickerValue,
+      setMultiDraftValue: mode === PickerModes.MULTI ? setMultiDraftValue : undefined,
       onPress: mode === PickerModes.MULTI ? toggleItemSelection : onDoneSelecting,
       isMultiMode: mode === PickerModes.MULTI,
       getItemValue,
@@ -159,6 +160,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     mode,
     value,
     multiDraftValue,
+    setMultiDraftValue,
     renderItem,
     getItemValue,
     getItemLabel,

src/components/picker/types.ts

@@ -209,7 +209,10 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
     /**
      * Render custom top element
      */
-    renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
+    renderCustomTopElement?: (
+      value?: PickerValue,
+      setValue?: React.Dispatch<React.SetStateAction<PickerMultiValue>> | undefined
+    ) => React.ReactElement;
     /**
      * Add onPress callback for when pressing the picker
      */
@@ -309,6 +312,7 @@ export interface PickerContextProps
   isMultiMode: boolean;
   onSelectedLayout: (event: any) => any;
   selectionLimit: PickerProps['selectionLimit'];
+  setMultiDraftValue?: React.Dispatch<React.SetStateAction<PickerMultiValue>> | undefined;
 }
 
 export type PickerItemsListProps = Pick<