Expose new impertive methods on picker (#1988)

* Expose new impertive methods on picker to allow opening expandable picker modal

* Remove redundant view

* Extend types

* Expose PickerMethods type

Author: ethanshar

demo/src/screens/componentScreens/PickerScreen.tsx

@@ -13,7 +13,9 @@ import {
   PanningProvider,
   Typography,
   PickerProps,
-  DialogProps
+  PickerMethods,
+  DialogProps,
+  Button
 } from 'react-native-ui-lib'; //eslint-disable-line
 import contactsData from '../../data/conversations';
 import {longOptions} from './PickerScreenLongOptions';
@@ -38,6 +40,7 @@ const filters = [
 ];
 
 export default class PickerScreen extends Component {
+  picker = React.createRef<PickerMethods>();
   state = {
     itemsCount: 1,
     // language: {value: 'java', label: 'Java'},
@@ -260,6 +263,8 @@ export default class PickerScreen extends Component {
 
           <Picker
             migrate
+            // @ts-expect-error
+            ref={this.picker}
             migrateTextField
             label="Language"
             placeholder="Favorite Language"
@@ -270,13 +275,20 @@ export default class PickerScreen extends Component {
             searchPlaceholder={'Search a language'}
             searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
             marginT-s4
+            enableErrors={false}
             // mode={Picker.modes.MULTI}
             // useNativePicker
           >
             {_.map(options, option => (
               <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
             ))}
           </Picker>
+          <Button
+            label="Open Picker Manually"
+            link
+            style={{alignSelf: 'flex-start'}}
+            onPress={() => this.picker.current?.openExpandable?.()}
+          />
         </View>
       </ScrollView>
     );

src/components/picker/helpers/useImperativePickerHandle.ts

@@ -0,0 +1,29 @@
+import React, {useImperativeHandle, useRef} from 'react';
+import {ExpandableOverlayMethods} from '../../../incubator/expandableOverlay';
+import {TextFieldMethods} from '../../../incubator/TextField';
+
+const useImperativePickerHandle = (ref: React.Ref<any>,
+  expandableRef: React.MutableRefObject<ExpandableOverlayMethods | null>) => {
+  const pickerRef = useRef<TextFieldMethods>();
+  useImperativeHandle(ref, () => {
+    // @ts-expect-error useRef return type is possible null therefor it throw TS error
+    const {isFocused, focus, blur, clear, validate} = pickerRef.current;
+    // @ts-expect-error useRef return type is possible null therefor it throw TS error
+    const {openExpandable, closeExpandable, toggleExpandable} = expandableRef.current;
+
+    return {
+      isFocused,
+      focus,
+      blur,
+      clear,
+      validate,
+      openExpandable,
+      closeExpandable,
+      toggleExpandable
+    };
+  });
+
+  return pickerRef;
+};
+
+export default useImperativePickerHandle;

src/components/picker/new.tsx

@@ -14,7 +14,7 @@ import {
   ForwardRefInjectedProps,
   BaseComponentInjectedProps
 } from '../../commons/new';
-import ExpandableOverlay, {ExpandableOverlayProps} from '../../incubator/expandableOverlay';
+import ExpandableOverlay, {ExpandableOverlayProps, ExpandableOverlayMethods} from '../../incubator/expandableOverlay';
 // @ts-expect-error
 import {TextField} from '../inputs';
 import TextFieldMigrator from '../textField/TextFieldMigrator';
@@ -26,8 +26,9 @@ import PickerContext from './PickerContext';
 import usePickerSelection from './helpers/usePickerSelection';
 import usePickerLabel from './helpers/usePickerLabel';
 import usePickerSearch from './helpers/usePickerSearch';
+import useImperativePickerHandle from './helpers/useImperativePickerHandle';
 import usePickerMigrationWarnings from './helpers/usePickerMigrationWarnings';
-import {PickerProps, PickerItemProps, PickerValue, PickerModes, PickerSearchStyle} from './types';
+import {PickerProps, PickerItemProps, PickerValue, PickerModes, PickerSearchStyle, PickerMethods} from './types';
 
 const Picker = (props: PropsWithChildren<PickerProps> & ForwardRefInjectedProps & BaseComponentInjectedProps) => {
   const {
@@ -68,9 +69,11 @@ const Picker = (props: PropsWithChildren<PickerProps> & ForwardRefInjectedProps
   const [selectedItemPosition, setSelectedItemPosition] = useState(0);
   const [items] = useState(Picker.extractPickerItems(props));
 
-  const pickerExpandable = useRef<typeof ExpandableOverlay>();
+  const pickerExpandable = useRef<ExpandableOverlayMethods>(null);
 
   usePickerMigrationWarnings({value, mode});
+
+  const pickerRef = useImperativePickerHandle(forwardedRef, pickerExpandable);
   const {
     filteredChildren,
     setSearchValue,
@@ -199,7 +202,6 @@ const Picker = (props: PropsWithChildren<PickerProps> & ForwardRefInjectedProps
   return (
     <PickerContext.Provider value={contextValue}>
       <ExpandableOverlay
-        // @ts-expect-error
         ref={pickerExpandable}
         modalProps={modalProps}
         expandableContent={expandableModalContent}
@@ -216,7 +218,7 @@ const Picker = (props: PropsWithChildren<PickerProps> & ForwardRefInjectedProps
           <TextFieldMigrator
             migrate={migrateTextField}
             customWarning="RNUILib Picker component's internal TextField will soon be replaced with a new implementation, in order to start the migration - please pass to Picker the 'migrateTextField' prop"
-            ref={forwardedRef}
+            ref={pickerRef}
             // {...textInputProps}
             {...others}
             testID={`${testID}.input`}
@@ -251,6 +253,6 @@ Picker.extractPickerItems = (props: PropsWithChildren<PickerProps>) => {
   return items;
 };
 
-export {PickerProps, PickerItemProps, PickerValue, PickerModes, PickerSearchStyle};
+export {PickerProps, PickerItemProps, PickerValue, PickerModes, PickerSearchStyle, PickerMethods};
 export {Picker}; // For tests
 export default asBaseComponent<PickerProps, typeof Picker>(forwardRef(Picker));

src/components/picker/types.tsx

@@ -1,9 +1,10 @@
 import React, {PropsWithChildren, ReactNode} from 'react';
 import {FlatListProps, StyleProp, ViewStyle, TextStyle} from 'react-native';
-import {ExpandableOverlayProps} from '../../incubator/expandableOverlay';
+import {ExpandableOverlayProps, ExpandableOverlayMethods} from '../../incubator/expandableOverlay';
 import {ModalTopBarProps} from '../modal/TopBar';
 // TODO: Replace with new TextField Props after migration to new TextField has completed
 import {TextFieldProps} from '../../../typings/components/Inputs';
+import {TextFieldMethods} from '../../incubator/TextField';
 
 // Note: enum values are uppercase due to legacy
 export enum PickerModes {
@@ -248,3 +249,5 @@ export type PickerItemsListProps = Pick<
   | 'useSafeArea'
   | 'testID'
 >;
+
+export type PickerMethods = TextFieldMethods & ExpandableOverlayMethods;

src/incubator/TextField/index.tsx

@@ -11,7 +11,7 @@ import {asBaseComponent, forwardRef} from '../../commons/new';
 import View from '../../components/view';
 import {Colors} from '../../style';
 import {useMeasure} from '../../hooks';
-import {TextFieldProps, InternalTextFieldProps, ValidationMessagePosition, FieldContextType} from './types';
+import {TextFieldProps, InternalTextFieldProps, ValidationMessagePosition, FieldContextType, TextFieldMethods} from './types';
 import {shouldHidePlaceholder} from './Presenter';
 import Input from './Input';
 import ValidationMessage from './ValidationMessage';
@@ -170,5 +170,5 @@ const TextField = (props: InternalTextFieldProps) => {
 TextField.displayName = 'Incubator.TextField';
 TextField.validationMessagePositions = ValidationMessagePosition;
 
-export {TextFieldProps, FieldContextType, StaticMembers as TextFieldStaticMembers};
+export {TextFieldProps, FieldContextType, StaticMembers as TextFieldStaticMembers, TextFieldMethods};
 export default asBaseComponent<TextFieldProps, StaticMembers>(forwardRef(TextField as any));

src/incubator/TextField/types.ts

@@ -227,3 +227,11 @@ export type FieldContextType = {
   disabled: boolean;
   validateField: () => void;
 };
+
+export interface TextFieldMethods {
+  isFocused: () => void;
+  focus: () => void;
+  blur: () => void;
+  clear: () => void;
+  validate: () => boolean;
+}

src/incubator/expandableOverlay/index.tsx

@@ -5,13 +5,16 @@ import View from '../../components/view';
 import Modal, {ModalProps, ModalTopBarProps} from '../../components/modal';
 import Dialog, {DialogProps} from '../../components/dialog';
 
-export interface RenderCustomOverlayProps {
-  visible: boolean;
+export interface ExpandableOverlayMethods {
   openExpandable: () => void;
   closeExpandable: () => void;
   toggleExpandable: () => void;
 }
 
+export interface RenderCustomOverlayProps extends ExpandableOverlayMethods {
+  visible: boolean;
+}
+
 export type ExpandableOverlayProps = TouchableOpacityProps &
   PropsWithChildren<{
     /**
@@ -48,11 +51,6 @@ export type ExpandableOverlayProps = TouchableOpacityProps &
     disabled?: boolean;
   }>;
 
-interface ExpandableOverlayMethods {
-  openExpandable: () => void;
-  closeExpandable: () => void;
-}
-
 const ExpandableOverlay = (props: ExpandableOverlayProps, ref: any) => {
   const {
     children,

src/index.ts

@@ -114,7 +114,8 @@ export {
   PickerItemProps,
   PickerValue,
   PickerModes,
-  PickerSearchStyle
+  PickerSearchStyle,
+  PickerMethods
 } from './components/picker/new';
 export {default as ProgressBar, ProgressBarProps} from './components/progressBar';
 export {default as RadioButton, RadioButtonProps} from './components/radioButton';