Feat/picker use dialog 2

demo/src/screens/componentScreens/PickerScreen.tsx

@@ -32,6 +32,7 @@ const options = [
   {label: 'C++', value: 'c++', disabled: true},
   {label: 'Perl', value: 'perl'}
 ];
+
 const filters = [
   {label: 'All', value: 0},
   {label: 'Draft', value: 1},
@@ -45,6 +46,16 @@ const schemes = [
   {label: 'Dark', value: 3}
 ];
 
+const dialogOptions = [
+  {label: 'Option 1', value: 0},
+  {label: 'Option 2', value: 1},
+  {label: 'Option 3', value: 2},
+  {label: 'Option 4', value: 3, disabled: true},
+  {label: 'Option 5', value: 4},
+  {label: 'Option 6', value: 5},
+  {label: 'Option 7', value: 6},
+  {label: 'Option 8', value: 6}
+];
 export default class PickerScreen extends Component {
   picker = React.createRef<PickerMethods>();
   state = {
@@ -53,7 +64,9 @@ export default class PickerScreen extends Component {
     language: undefined,
     language2: options[2].value,
     languages: [],
+    option: undefined,
     nativePickerValue: 'java',
+    dialogPickerValue: 'java',
     customModalValues: [],
     filter: filters[0].value,
     scheme: schemes[0].value,
@@ -125,7 +138,6 @@ export default class PickerScreen extends Component {
             label="Wheel Picker"
             placeholder="Pick a Language"
             useWheelPicker
-            // useWheelPicker
             value={this.state.nativePickerValue}
             onChange={nativePickerValue => this.setState({nativePickerValue})}
             trailingAccessory={<Icon source={dropdown}/>}
@@ -164,6 +176,30 @@ export default class PickerScreen extends Component {
             ))}
           </Picker>
 
+          <Picker
+            label="Dialog Picker"
+            placeholder="Favorite Language"
+            mode={Picker.modes.MULTI}
+            value={this.state.option}
+            enableModalBlur={false}
+            onChange={item => this.setState({option: item})}
+            topBarProps={{title: 'Languages'}}
+            useDialog
+            renderCustomDialogHeader={({onDone, onCancel}) => (
+              <View padding-s5 row spread>
+                <Button link label="Cancel" onPress={onCancel}/>
+                <Button link label="Done" onPress={onDone}/>
+              </View>
+            )}
+            customPickerProps={{migrateDialog: true, dialogProps: {bottom: true, width: '100%', height: '45%'}}}
+            showSearch
+            searchPlaceholder={'Search a language'}
+          >
+            {_.map(dialogOptions, option => (
+              <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
+            ))}
+          </Picker>
+
           <Text marginB-10 text70 $textDefault>
             Custom Picker:
           </Text>

src/components/picker/PickerItemsList.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React, {useCallback, useContext, useState} from 'react';
+import React, {useCallback, useContext, useState, useMemo} from 'react';
 import {StyleSheet, FlatList, TextInput, ListRenderItemInfo} from 'react-native';
 import {Typography, Colors} from '../../style';
 import Assets from '../../assets';
@@ -9,9 +9,10 @@ import Text from '../text';
 import Icon from '../icon';
 import Button from '../button';
 import WheelPicker from '../WheelPicker';
-import {PickerItemProps, PickerItemsListProps, PickerSingleValue} from './types';
+import {PickerItemProps, PickerItemsListProps, PickerSingleValue, PickerModes} from './types';
 import PickerContext from './PickerContext';
 import PickerItem from './PickerItem';
+import {Constants} from '../../commons/new';
 
 const keyExtractor = (_item: string, index: number) => index.toString();
 
@@ -27,11 +28,21 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     searchPlaceholder = 'Search...',
     onSearchChange,
     renderCustomSearch,
+    renderCustomDialogHeader,
     useSafeArea,
+    useDialog,
+    mode,
     testID
   } = props;
   const context = useContext(PickerContext);
   const [wheelPickerValue, setWheelPickerValue] = useState<PickerSingleValue>(context.value ?? items?.[0].value);
+  // TODO: Might not need this memoized style, instead we can move it to a stylesheet
+  const wrapperContainerStyle = useMemo(() => {
+    // const shouldFlex = Constants.isWeb ? 1 : useDialog ? 1 : 1;
+    const shouldFlex = true;
+    const style = {flex: shouldFlex ? 1 : 0, maxHeight: Constants.isWeb ? Constants.windowHeight * 0.75 : undefined};
+    return style;
+  }, [/* useDialog */]);
 
   const renderSearchInput = () => {
     if (showSearch) {
@@ -135,11 +146,19 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     );
   };
 
+  const renderPickerHeader = () => {
+    if (renderCustomDialogHeader) {
+      return renderCustomDialogHeader?.({onDone: topBarProps?.onDone, onCancel: topBarProps?.onCancel});
+    } else if (!useDialog || mode === PickerModes.MULTI) {
+      return <Modal.TopBar {...topBarProps}/>;
+    }
+  };
+
   return (
-    <View bg-$backgroundDefault flex useSafeArea={useSafeArea}>
+    <View bg-$backgroundDefault style={wrapperContainerStyle} useSafeArea={useSafeArea}>
       {!useWheelPicker && (
         <>
-          {<Modal.TopBar {...topBarProps}/>}
+          {renderPickerHeader()}
           {renderSearchInput()}
           {renderList()}
         </>

src/components/picker/index.tsx

@@ -60,8 +60,10 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     searchStyle,
     searchPlaceholder,
     renderCustomSearch,
+    renderCustomDialogHeader,
     // useNativePicker,
     useWheelPicker,
+    useDialog,
     renderPicker,
     customPickerProps,
     containerStyle,
@@ -218,6 +220,8 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
       <PickerItemsList
         testID={`${testID}.modal`}
         useWheelPicker={useWheelPicker}
+        mode={mode}
+        useDialog={useDialog}
         items={useItems ? items : undefined}
         topBarProps={{
           ...topBarProps,
@@ -229,6 +233,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
         searchPlaceholder={searchPlaceholder}
         onSearchChange={_onSearchChange}
         renderCustomSearch={renderCustomSearch}
+        renderCustomDialogHeader={renderCustomDialogHeader}
         listProps={listProps}
         useSafeArea={useSafeArea}
       >
@@ -238,6 +243,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
   }, [
     testID,
     mode,
+    useDialog,
     selectedItemPosition,
     topBarProps,
     cancelSelect,
@@ -248,6 +254,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     searchPlaceholder,
     _onSearchChange,
     renderCustomSearch,
+    renderCustomDialogHeader,
     listProps,
     filteredChildren,
     useSafeArea,
@@ -281,44 +288,45 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
   // }
 
   return (
+    //TODO : fix the ExpandableOverlay ts error
     <PickerContext.Provider value={contextValue}>
-      <ExpandableOverlay
-        ref={pickerExpandable}
-        useDialog={useWheelPicker}
-        modalProps={modalProps}
-        dialogProps={DIALOG_PROPS}
-        expandableContent={expandableModalContent}
-        renderCustomOverlay={renderCustomModal ? _renderCustomModal : undefined}
-        onPress={onPress}
-        testID={testID}
-        {...customPickerProps}
-        disabled={themeProps.editable === false}
-      >
-        {renderPicker ? (
-          // @ts-expect-error - hopefully will be solved after the picker migration ends
-          renderPicker(value, label)
-        ) : (
-          <TextField
-            // @ts-expect-error
-            ref={pickerRef}
-            // {...textInputProps}
-            {...others}
-            {...propsByFieldType}
-            testID={`${testID}.input`}
-            // @ts-expect-error
-            containerStyle={[containerStyle, propsByFieldType?.containerStyle]}
-            labelStyle={[propsByFieldType?.labelStyle, labelStyle]}
-            {...accessibilityInfo}
-            importantForAccessibility={'no-hide-descendants'}
-            value={label}
-            selection={Constants.isAndroid ? {start: 0} : undefined}
-            /* Note: Disable TextField expandable feature */
-            // topBarProps={undefined}
-          >
-            {renderPickerInnerInput()}
-          </TextField>
-        )}
-      </ExpandableOverlay>
+      {
+        /* @ts-expect-error */
+        <ExpandableOverlay
+          ref={pickerExpandable}
+          useDialog={useDialog || useWheelPicker}
+          modalProps={modalProps}
+          dialogProps={customPickerProps?.dialogProps || DIALOG_PROPS}
+          expandableContent={expandableModalContent}
+          renderCustomOverlay={renderCustomModal ? _renderCustomModal : undefined}
+          onPress={onPress}
+          testID={testID}
+          {...customPickerProps}
+          disabled={themeProps.editable === false}
+        >
+          {renderPicker ? (
+            // @ts-expect-error - hopefully will be solved after the picker migration ends
+            renderPicker(value, label)
+          ) : (
+            <TextField
+              // @ts-expect-error
+              ref={pickerRef}
+              {...others}
+              {...propsByFieldType}
+              testID={`${testID}.input`}
+              // @ts-expect-error
+              containerStyle={[containerStyle, propsByFieldType?.containerStyle]}
+              labelStyle={[propsByFieldType?.labelStyle, labelStyle]}
+              {...accessibilityInfo}
+              importantForAccessibility={'no-hide-descendants'}
+              value={label}
+              selection={Constants.isAndroid ? {start: 0} : undefined}
+            >
+              {renderPickerInnerInput()}
+            </TextField>
+          )}
+        </ExpandableOverlay>
+      }
     </PickerContext.Provider>
   );
 });

src/components/picker/types.tsx

@@ -50,6 +50,10 @@ export interface PickerSearchStyle {
 
 export type PickerBaseProps = Omit<NewTextFieldProps, 'value' | 'onChange'> & {
   /* ...TextField.propTypes, */
+  /**
+   * Use dialog instead of modal picker
+   */
+  useDialog?: boolean;
   /**
    * Temporary prop required for migration to Picker's new API
    */
@@ -142,6 +146,10 @@ export type PickerBaseProps = Omit<NewTextFieldProps, 'value' | 'onChange'> & {
    * Render custom search input (only when passing showSearch)
    */
   renderCustomSearch?: (props: PickerItemsListProps) => React.ReactElement;
+  /**
+   * Render a custom header for Picker's dialog
+   */
+  renderCustomDialogHeader?: (callbacks: {onDone?: () => void, onCancel?: ()=> void}) => React.ReactElement;
   // /**
   //  * @deprecated pass useWheelPicker prop instead
   //  * Allow to use the native picker solution (different style for iOS and Android)
@@ -261,8 +269,11 @@ export type PickerItemsListProps = Pick<
   | 'searchPlaceholder'
   | 'onSearchChange'
   | 'renderCustomSearch'
+  | 'renderCustomDialogHeader'
   | 'useSafeArea'
   | 'useWheelPicker'
+  | 'useDialog'
+  | 'mode'
   | 'testID'
 > & {
   items?: {value: any; label: any}[];