Fix Picker to use new dialog and also fix height issues (#3331)

Author: ethanshar

demo/src/screens/componentScreens/PickerScreen.tsx

@@ -191,7 +191,6 @@ export default class PickerScreen extends Component {
                 <Button link label="Done" onPress={onDone}/>
               </View>
             )}
-            customPickerProps={{migrateDialog: true, dialogProps: {bottom: true, width: '100%', height: '45%'}}}
             showSearch
             searchPlaceholder={'Search a language'}
             items={dialogOptions}

src/components/actionSheet/index.tsx

@@ -255,7 +255,6 @@ class ActionSheet extends Component<ActionSheetProps> {
     }
 
     return (
-      // @ts-expect-error height might be null here
       <IncubatorDialog
         bottom
         centerH

src/components/picker/PickerItemsList.tsx

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import React, {useCallback, useContext, useState, useMemo} from 'react';
+import React, {useCallback, useContext, useState} from 'react';
 import {StyleSheet, FlatList, TextInput, ListRenderItemInfo, ActivityIndicator} from 'react-native';
 import {Typography, Colors} from '../../style';
 import Assets from '../../assets';
@@ -39,13 +39,6 @@ const PickerItemsList = (props: PickerItemsListProps) => {
   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) {
@@ -180,7 +173,7 @@ const PickerItemsList = (props: PickerItemsListProps) => {
   };
 
   return (
-    <View style={wrapperContainerStyle} useSafeArea={useSafeArea}>
+    <View style={styles.container} useSafeArea={useSafeArea}>
       {renderPickerHeader()}
       {showLoader ? renderLoader() : renderContent()}
     </View>
@@ -189,6 +182,11 @@ const PickerItemsList = (props: PickerItemsListProps) => {
 
 const styles = StyleSheet.create({
   modalBody: {},
+  container: {
+    minHeight: 250,
+    flexShrink: 1,
+    maxHeight: Constants.isWeb ? Constants.windowHeight * 0.75 : undefined
+  },
   searchInputContainer: {
     flexDirection: 'row',
     alignItems: 'center',

src/components/picker/index.tsx

@@ -30,11 +30,11 @@ import {
   PickerItemsListProps,
   PickerMethods
 } from './types';
+import {DialogProps} from '../../incubator/Dialog';
 
-const DIALOG_PROPS = {
+const DEFAULT_DIALOG_PROPS: DialogProps = {
   bottom: true,
-  width: '100%',
-  height: 250
+  width: '100%'
 };
 
 type PickerStatics = {
@@ -278,7 +278,8 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
         <ExpandableOverlay
           ref={pickerExpandable}
           useDialog={useDialog || useWheelPicker}
-          dialogProps={DIALOG_PROPS}
+          dialogProps={DEFAULT_DIALOG_PROPS}
+          migrateDialog
           expandableContent={expandableModalContent}
           renderCustomOverlay={renderOverlay ? _renderOverlay : undefined}
           onPress={onPress}

src/incubator/Dialog/types.ts

@@ -105,7 +105,7 @@ export interface _DialogProps extends AlignmentModifiers, Pick<ViewProps, 'useSa
   /**
    * The dialog height.
    */
-  height?: string | number;
+  height?: string | number | null;
 
   /**
    * Callback that is called after the dialog's dismiss (after the animation has ended).

src/incubator/expandableOverlay/index.tsx

@@ -106,7 +106,6 @@ const ExpandableOverlay = (props: ExpandableOverlayProps, ref: any) => {
   const renderDialog = () => {
     const Dialog = migrateDialog ? DialogNew : DialogOld;
     return (
-      // @ts-expect-error
       <Dialog testID={`${testID}.overlay`} {...dialogProps} visible={visible} onDismiss={closeExpandable}>
         {expandableContent}
       </Dialog>