Feat/picker custom top element (#3465)

* Picker types - customTopElement, onItemSelection

* add customTopElement support in Picker component

* PickerScreen example

* refactor: rename customTopElement, types fix

* remove onItemSelection prop

* remove unused setValue from Picker context

* use optional chaining for renderCustomTopElement

* renderCustomTopElement added to api.json

Author: adids1221

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?.(context.value)}
         {renderList()}
       </>
     );

src/components/picker/api/picker.api.json

@@ -47,6 +47,11 @@
       "type": "(value, {{...props, isSelected}}, itemLabel) => void",
       "description": "Render custom picker item"
     },
+    {
+      "name": "renderCustomTopElement",
+      "type": "(value?: PickerValue) => React.ReactElement",
+      "description": "Render custom top element"
+    },
     {
       "name": "renderCustomModal",
       "type": "({visible, children, toggleModal}) => void)",

src/components/picker/index.tsx

@@ -78,6 +78,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     items: propItems,
     showLoader,
     customLoaderElement,
+    renderCustomTopElement,
     ...others
   } = themeProps;
   const {preset, placeholder, style, trailingAccessory, label: propsLabel} = others;
@@ -245,6 +246,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
         useSafeArea={useSafeArea}
         showLoader={showLoader}
         customLoaderElement={customLoaderElement}
+        renderCustomTopElement={renderCustomTopElement}
       >
         {filteredItems}
       </PickerItemsList>

src/components/picker/types.ts

@@ -206,6 +206,10 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
       itemProps: PickerItemProps & {isSelected: boolean; isItemDisabled: boolean},
       label?: string
     ) => React.ReactElement;
+    /**
+     * Render custom top element
+     */
+    renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
     /**
      * Add onPress callback for when pressing the picker
      */
@@ -315,6 +319,7 @@ export type PickerItemsListProps = Pick<
   | 'useSafeArea'
   | 'showLoader'
   | 'customLoaderElement'
+  | 'renderCustomTopElement'
   | 'showSearch'
   | 'searchStyle'
   | 'searchPlaceholder'