Infra/picker screen ts (#1888)

* Change PickerScreen to TS

* Migrate PickerScreen to TS

* Remove old Picker typings

* Revert changes in globalTypes file

Author: ethanshar

demo/src/screens/componentScreens/PickerScreen.js renamed to demo/src/screens/componentScreens/PickerScreen.tsx

@@ -11,14 +11,17 @@ import {
   Avatar,
   Assets,
   PanningProvider,
-  Typography
+  Typography,
+  PickerProps,
+  DialogProps
 } from 'react-native-ui-lib'; //eslint-disable-line
 import contactsData from '../../data/conversations';
-import tagIcon from '../../assets/icons/tags.png';
-import dropdown from '../../assets/icons/chevronDown.png';
 import {longOptions} from './PickerScreenLongOptions';
 
-const contacts = _.map(contactsData, c => ({...c, value: c.name, label: c.name}));
+const tagIcon = require('../../assets/icons/tags.png');
+const dropdown = require('../../assets/icons/chevronDown.png');
+
+const contacts = _.map(contactsData, (c, index) => ({...c, value: index, label: c.name}));
 
 const options = [
   {label: 'JavaScript', value: 'js'},
@@ -35,26 +38,19 @@ const filters = [
 ];
 
 export default class PickerScreen extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      itemsCount: 1,
-      // language: {value: 'java', label: 'Java'},
-      language: undefined,
-      language2: options[2].value, // for migrated picker example
-      languages: [],
-      nativePickerValue: 'java',
-      customModalValues: [],
-      filter: filters[0],
-      contact: contacts[0],
-      tags: [{label: 'Amit'}, {label: 'Ethan'}],
-      tags2: ['Tags', 'Input'],
-      tags3: ['Non', 'Removable', 'Tags']
-    };
-  }
+  state = {
+    itemsCount: 1,
+    // language: {value: 'java', label: 'Java'},
+    language: undefined,
+    language2: options[2].value, // for migrated picker example
+    languages: [],
+    nativePickerValue: 'java',
+    customModalValues: [],
+    filter: filters[0],
+    contact: 0
+  };
 
-  dialogHeader = props => {
+  dialogHeader: DialogProps['renderPannableHeader'] = props => {
     const {title} = props;
     return (
       <Text margin-15 text60>
@@ -63,7 +59,7 @@ export default class PickerScreen extends Component {
     );
   };
 
-  renderDialog = modalProps => {
+  renderDialog: PickerProps['renderCustomModal'] = modalProps => {
     const {visible, children, toggleModal, onDone} = modalProps;
 
     return (
@@ -99,19 +95,18 @@ export default class PickerScreen extends Component {
             enableModalBlur={false}
             onChange={item => this.setState({language: item})}
             topBarProps={{title: 'Languages'}}
-            style={{color: Colors.red20}}
+            // style={{color: Colors.red20}}
             showSearch
             searchPlaceholder={'Search a language'}
             searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
             // onSearchChange={value => console.warn('value', value)}
           >
             {_.map(longOptions, option => (
-              <Picker.Item key={option.value} value={option} disabled={option.disabled}/>
+              <Picker.Item key={option.value} value={option} label={''} disabled={option.disabled}/>
             ))}
           </Picker>
 
           <Picker
-            marginT-20
             placeholder="Favorite Languages (up to 3)"
             value={this.state.languages}
             onChange={items => this.setState({languages: items})}
@@ -120,7 +115,7 @@ export default class PickerScreen extends Component {
             rightIconSource={dropdown}
           >
             {_.map(options, option => (
-              <Picker.Item key={option.value} value={option} disabled={option.disabled}/>
+              <Picker.Item key={option.value} value={option} label={''} disabled={option.disabled}/>
             ))}
           </Picker>
 
@@ -131,7 +126,7 @@ export default class PickerScreen extends Component {
             value={this.state.nativePickerValue}
             onChange={nativePickerValue => this.setState({nativePickerValue})}
             rightIconSource={dropdown}
-            containerStyle={{marginTop: 20}}
+            // containerStyle={{marginTop: 20}}
             // renderPicker={() => {
             //   return (
             //     <View>
@@ -154,7 +149,6 @@ export default class PickerScreen extends Component {
           </Picker>
 
           <Picker
-            marginT-20
             title="Custom modal"
             placeholder="Pick multiple Languages"
             value={this.state.customModalValues}
@@ -174,13 +168,13 @@ export default class PickerScreen extends Component {
             ))}
           </Picker>
 
-          <Text marginT-20 marginB-10 text70 grey60>
+          <Text marginB-10 text70>
             Custom Picker:
           </Text>
           <Picker
             value={this.state.filter}
             onChange={filter => this.setState({filter})}
-            renderPicker={({label}) => {
+            renderPicker={(_value?: any, label?: string) => {
               return (
                 <View row>
                   <Icon style={{marginRight: 1, height: 16, resizeMode: 'contain'}} source={tagIcon}/>
@@ -192,62 +186,78 @@ export default class PickerScreen extends Component {
             }}
           >
             {_.map(filters, filter => (
-              <Picker.Item key={filter.value} value={filter}/>
+              <Picker.Item key={filter.value} value={filter} label={''}/>
             ))}
           </Picker>
 
-          <Text marginT-20 marginB-10 text70 grey60>
+          <Text text60 marginT-s5>
+            Migrated Pickers
+          </Text>
+
+          <Text marginT-20 marginB-10 text70>
             Custom Picker Items:
           </Text>
           <Picker
+            migrate
             value={this.state.contact}
-            onChange={contact => this.setState({contact})}
-            getItemValue={contact => contact.name}
-            renderPicker={contact => {
+            onChange={contact => {
+              this.setState({contact});
+            }}
+            // getItemValue={contact => contact?.value}
+            renderPicker={(contactValue?: number) => {
+              const contact = contacts[contactValue!] ?? undefined;
               return (
                 <View row>
-                  <Avatar size={30} source={{uri: contact.thumbnail}}/>
-                  <Text text70 marginL-10>
-                    {contact.name}
-                  </Text>
+                  {contact ? (
+                    <>
+                      <Avatar size={30} source={{uri: contact?.thumbnail}}/>
+                      <Text text70 marginL-10>
+                        {contact?.name}
+                      </Text>
+                    </>
+                  ) : (
+                    <Text text70 grey30>
+                      Pick a contact
+                    </Text>
+                  )}
                 </View>
               );
             }}
           >
             {_.map(contacts, contact => (
               <Picker.Item
                 key={contact.name}
-                value={contact}
-                renderItem={(item, props) => (
-                  <View
-                    style={{
-                      height: 56,
-                      borderBottomWidth: 1,
-                      borderColor: Colors.grey80
-                    }}
-                    paddingH-15
-                    row
-                    centerV
-                    spread
-                  >
-                    <View row centerV>
-                      <Avatar size={35} source={{uri: item.thumbnail}}/>
-                      <Text marginL-10 text70 grey10>
-                        {item.name}
-                      </Text>
+                value={contact.value}
+                label={contact.label}
+                renderItem={(contactValue, props) => {
+                  const contact = contacts[contactValue as number];
+                  return (
+                    <View
+                      style={{
+                        height: 56,
+                        borderBottomWidth: 1,
+                        borderColor: Colors.grey80
+                      }}
+                      paddingH-15
+                      row
+                      centerV
+                      spread
+                    >
+                      <View row centerV>
+                        <Avatar size={35} source={{uri: contact?.thumbnail}}/>
+                        <Text marginL-10 text70 grey10>
+                          {contact?.name}
+                        </Text>
+                      </View>
+                      {props.isSelected && <Icon source={Assets.icons.check}/>}
                     </View>
-                    {props.isSelected && <Icon source={Assets.icons.check}/>}
-                  </View>
-                )}
-                getItemLabel={item => item.name}
+                  );
+                }}
+                getItemLabel={contactValue => contacts[contactValue as number]?.name}
               />
             ))}
           </Picker>
 
-          <Text text60 marginT-s5 marginB-s2>
-            Migrated Picker
-          </Text>
-
           <Picker
             migrate
             migrateTextField
@@ -259,6 +269,7 @@ export default class PickerScreen extends Component {
             showSearch
             searchPlaceholder={'Search a language'}
             searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
+            marginT-s4
             // mode={Picker.modes.MULTI}
             // useNativePicker
           >

demo/src/screens/componentScreens/PickerScreenLongOptions.js renamed to demo/src/screens/componentScreens/PickerScreenLongOptions.ts

@@ -3,13 +3,13 @@ export const longOptions = [
   {label: 'ABAP2', value: 'ABAP2'},
   {label: 'ABAP3', value: 'ABAP3'},
   {label: 'ABAP4', value: 'ABAP4'},
-  {label: 'ABAP5', value: 'ABAP5'},
+  {label: 'ABAP5', value: 'ABAP5', disabled: true},
   {label: 'ActionScript1', value: 'ActionScript1'},
   {label: 'ActionScript2', value: 'ActionScript2'},
   {label: 'ActionScript3', value: 'ActionScript3'},
   {label: 'ActionScript4', value: 'ActionScript4'},
   {label: 'ActionScript5', value: 'ActionScript5'},
-  {label: 'Ada1', value: 'Ada1'},
+  {label: 'Ada1', value: 'Ada1', disabled: true},
   {label: 'Ada2', value: 'Ada2'},
   {label: 'Ada3', value: 'Ada3'},
   {label: 'Ada4', value: 'Ada4'},

generatedTypes/src/components/picker/new.d.ts

@@ -16,17 +16,17 @@ declare const Picker: {
 };
 export { PickerProps, PickerItemProps, PickerValue, PickerModes, PickerSearchStyle };
 export { Picker };
-declare const _default: React.ComponentClass<(import("./types").PickerPropsWithSingle | import("./types").PickerPropsWithMulti) & {
+declare const _default: React.ComponentClass<PickerProps & {
     useCustomTheme?: boolean | undefined;
 }, any> & {
-    (props: React.PropsWithChildren<import("./types").PickerPropsWithSingle | import("./types").PickerPropsWithMulti> & ForwardRefInjectedProps & BaseComponentInjectedProps): JSX.Element;
+    (props: React.PropsWithChildren<PickerProps> & ForwardRefInjectedProps & BaseComponentInjectedProps): JSX.Element;
     Item: {
         (props: PickerItemProps): JSX.Element;
         displayName: string;
     };
     defaultProps: any;
     modes: typeof PickerModes;
-    extractPickerItems(props: React.PropsWithChildren<import("./types").PickerPropsWithSingle | import("./types").PickerPropsWithMulti>): {
+    extractPickerItems(props: React.PropsWithChildren<PickerProps>): {
         value: any;
         label: any;
     }[] | null | undefined;

generatedTypes/src/components/picker/types.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 import { FlatListProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { ExpandableOverlayProps } from '../../incubator/expandableOverlay';
 import { ModalTopBarProps } from '../modal/TopBar';
@@ -13,7 +13,17 @@ declare type PickerValueDeprecated = {
 };
 export declare type PickerSingleValue = string | number | PickerValueDeprecated;
 export declare type PickerMultiValue = PickerSingleValue[];
-export declare type PickerValue = PickerSingleValue | PickerMultiValue;
+export declare type PickerValue = PickerSingleValue | PickerMultiValue | undefined;
+declare type RenderPickerOverloads<ValueType> = ValueType extends PickerValue ? (value?: ValueType, label?: string) => React.ReactElement : never;
+declare type RenderPicker = RenderPickerOverloads<PickerValue>;
+declare type RenderCustomModalProps = {
+    visible: boolean;
+    toggleModal: (show: boolean) => void;
+    onSearchChange: (searchValue: string) => void;
+    children: ReactNode;
+    onDone: () => void;
+    onCancel: () => void;
+};
 export interface PickerSearchStyle {
     icon?: number;
     color?: string;
@@ -54,7 +64,7 @@ export interface PickerBaseProps extends Omit<TextFieldProps, 'value' | 'onChang
      * Example:
      * renderPicker = (selectedItem) => {...}
      */
-    renderPicker?: (value?: PickerValue, label?: string) => React.ReactElement;
+    renderPicker?: RenderPicker;
     /**
      * Render custom picker item
      */
@@ -64,7 +74,7 @@ export interface PickerBaseProps extends Omit<TextFieldProps, 'value' | 'onChang
     /**
      * Render custom picker modal (e.g ({visible, children, toggleModal}) => {...})
      */
-    renderCustomModal?: (modalProps: ExpandableOverlayProps['modalProps']) => React.ReactElement;
+    renderCustomModal?: (modalProps: RenderCustomModalProps) => React.ReactElement;
     /**
      * Custom picker props (when using renderPicker, will apply on the button wrapper)
      */
@@ -142,13 +152,13 @@ export interface PickerBaseProps extends Omit<TextFieldProps, 'value' | 'onChang
 }
 export interface PickerPropsWithSingle extends PickerBaseProps {
     mode?: PickerModes.SINGLE;
-    value: PickerSingleValue;
+    value?: PickerSingleValue;
 }
 export interface PickerPropsWithMulti extends PickerBaseProps {
     mode?: PickerModes.MULTI;
-    value: PickerMultiValue;
+    value?: PickerMultiValue;
 }
-export declare type PickerProps = (PickerPropsWithSingle | PickerPropsWithMulti);
+export declare type PickerProps = PickerPropsWithSingle | PickerPropsWithMulti;
 export interface PickerItemProps {
     /**
      * Item's value

src/components/picker/new.tsx

@@ -211,6 +211,7 @@ const Picker = (props: PropsWithChildren<PickerProps> & ForwardRefInjectedProps
         disabled={editable === false}
       >
         {renderPicker ? (
+          // @ts-expect-error TS throws a weird error, might be an issue with TS
           renderPicker(value, label)
         ) : (
           <TextFieldMigrator