From afed8e043bfc29166b1f1e8159fae74c20e5b078 Mon Sep 17 00:00:00 2001
From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com>
Date: Wed, 15 Feb 2023 12:58:42 +0200
Subject: [PATCH 1/2] Migrate picker component

---
 .../screens/componentScreens/PickerScreen.tsx | 63 ++++---------------
 src/components/picker/NativePicker.js         |  9 +--
 src/components/picker/PickerItem.tsx          |  2 +
 src/components/picker/PickerItemsList.tsx     |  4 +-
 src/components/picker/PickerPresenter.ts      |  1 +
 .../picker/__tests__/index.spec.tsx           |  7 ++-
 src/components/picker/api/picker.api.json     | 10 ---
 .../picker/helpers/usePickerLabel.tsx         |  7 ++-
 .../helpers/usePickerMigrationWarnings.tsx    |  1 +
 src/components/picker/index.tsx               | 22 ++++---
 src/components/picker/types.tsx               | 27 ++++----
 11 files changed, 59 insertions(+), 94 deletions(-)

diff --git a/demo/src/screens/componentScreens/PickerScreen.tsx b/demo/src/screens/componentScreens/PickerScreen.tsx
index db6216c871..bd99b6b877 100644
--- a/demo/src/screens/componentScreens/PickerScreen.tsx
+++ b/demo/src/screens/componentScreens/PickerScreen.tsx
@@ -51,11 +51,11 @@ export default class PickerScreen extends Component {
     itemsCount: 1,
     // language: {value: 'java', label: 'Java'},
     language: undefined,
-    language2: options[2].value, // for migrated picker example
+    language2: options[2].value,
     languages: [],
     nativePickerValue: 'java',
     customModalValues: [],
-    filter: filters[0],
+    filter: filters[0].value,
     scheme: schemes[0].value,
     contact: 0
   };
@@ -102,10 +102,9 @@ export default class PickerScreen extends Component {
             searchPlaceholder={'Search a language'}
             searchStyle={{color: Colors.blue30, placeholderTextColor: Colors.grey50}}
             // onSearchChange={value => console.warn('value', value)}
-            migrateTextField
           >
             {_.map(longOptions, option => (
-              <Picker.Item key={option.value} value={option} label={''} disabled={option.disabled}/>
+              <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
             ))}
           </Picker>
 
@@ -116,21 +115,20 @@ export default class PickerScreen extends Component {
             mode={Picker.modes.MULTI}
             selectionLimit={3}
             trailingAccessory={dropdownIcon}
-            migrateTextField
           >
             {_.map(options, option => (
-              <Picker.Item key={option.value} value={option} label={''} disabled={option.disabled}/>
+              <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
             ))}
           </Picker>
 
           <Picker
-            title="Wheel Picker"
+            label="Wheel Picker"
             placeholder="Pick a Language"
-            useNativePicker
+            useWheelPicker
             // useWheelPicker
             value={this.state.nativePickerValue}
             onChange={nativePickerValue => this.setState({nativePickerValue})}
-            rightIconSource={dropdown}
+            trailingAccessory={<Icon source={dropdown}/>}
             // containerStyle={{marginTop: 20}}
             // renderPicker={() => {
             //   return (
@@ -139,13 +137,6 @@ export default class PickerScreen extends Component {
             //     </View>
             //   );
             // }}
-            // renderNativePicker={props => {
-            //   return (
-            //     <View flex bg-red50>
-            //       <Text>CUSTOM NATIVE PICKER</Text>
-            //     </View>
-            //   );
-            // }}
             // topBarProps={{doneLabel: 'YES', cancelLabel: 'NO'}}
           >
             {_.map(options, option => (
@@ -160,13 +151,12 @@ export default class PickerScreen extends Component {
             onChange={items => this.setState({customModalValues: items})}
             mode={Picker.modes.MULTI}
             trailingAccessory={dropdownIcon}
-            migrateTextField
             renderCustomModal={this.renderDialog}
           >
             {_.map(options, option => (
               <Picker.Item
                 key={option.value}
-                value={option}
+                value={option.value}
                 label={option.label}
                 labelStyle={Typography.text65}
                 disabled={option.disabled}
@@ -196,19 +186,15 @@ export default class PickerScreen extends Component {
             }}
           >
             {_.map(filters, filter => (
-              <Picker.Item key={filter.value} value={filter} label={''}/>
+              <Picker.Item key={filter.value} value={filter.value} label={filter.label}/>
             ))}
           </Picker>
 
-          <Text text60 marginT-s5 $textDefault>
-            Migrated Pickers
-          </Text>
-
           <Text marginT-20 marginB-10 text70 $textDefault>
             Custom Picker Items:
           </Text>
           <Picker
-            migrate
+            ref={this.picker}
             value={this.state.contact}
             onChange={contact => {
               this.setState({contact});
@@ -268,27 +254,6 @@ export default class PickerScreen extends Component {
             ))}
           </Picker>
 
-          <Picker
-            migrate
-            ref={this.picker}
-            migrateTextField
-            label="Language"
-            placeholder="Favorite Language"
-            value={this.state.language2}
-            onChange={value => this.setState({language2: value})}
-            topBarProps={{title: 'Languages'}}
-            showSearch
-            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
@@ -299,11 +264,11 @@ export default class PickerScreen extends Component {
           <Text text60 marginT-s5>
             Different Field Types
           </Text>
-          <Text text80 marginB-s5>(Form/Filter/Settings)</Text>
+          <Text text80 marginB-s5>
+            (Form/Filter/Settings)
+          </Text>
 
           <Picker
-            migrate
-            migrateTextField
             value={this.state.filter}
             onChange={value => this.setState({filter: value})}
             placeholder="Filter posts"
@@ -316,8 +281,6 @@ export default class PickerScreen extends Component {
           </Picker>
 
           <Picker
-            migrate
-            migrateTextField
             value={this.state.scheme}
             onChange={value => this.setState({scheme: value})}
             label="Color Scheme"
diff --git a/src/components/picker/NativePicker.js b/src/components/picker/NativePicker.js
index 45f9d6baa0..fd3aa2b618 100644
--- a/src/components/picker/NativePicker.js
+++ b/src/components/picker/NativePicker.js
@@ -1,3 +1,4 @@
+// TODO: Remove this sub component
 import _ from 'lodash';
 import React, {Component} from 'react';
 import TextField from '../textField';
@@ -64,10 +65,10 @@ class NativePicker extends Component {
 
   renderPicker = () => {
     const {selectedValue} = this.state;
-    const {children, renderNativePicker, pickerStyle, wheelPickerProps, testID} = this.props;
-    if (_.isFunction(renderNativePicker)) {
-      return renderNativePicker(this.props);
-    }
+    const {children, /* renderNativePicker, */ pickerStyle, wheelPickerProps, testID} = this.props;
+    // if (_.isFunction(renderNativePicker)) {
+    //   return renderNativePicker(this.props);
+    // }
     return (
       <WheelPicker
         style={pickerStyle}
diff --git a/src/components/picker/PickerItem.tsx b/src/components/picker/PickerItem.tsx
index ffdc7bcd74..20fb1c1d28 100644
--- a/src/components/picker/PickerItem.tsx
+++ b/src/components/picker/PickerItem.tsx
@@ -30,6 +30,7 @@ const PickerItem = (props: PickerItemProps) => {
   const context = useContext(PickerContext);
   const {migrate} = context;
   const customRenderItem = context.renderItem || props.renderItem;
+  // @ts-expect-error TODO: fix after removing migrate prop completely
   const itemValue = !migrate && typeof value === 'object' ? value?.value : value;
   const isSelected = isItemSelected(itemValue, context.value);
   const itemLabel = getItemLabel(label, value, props.getItemLabel || context.getItemLabel);
@@ -64,6 +65,7 @@ const PickerItem = (props: PickerItemProps) => {
     if (migrate) {
       context.onPress(value);
     } else {
+      // @ts-expect-error TODO: fix after removing migrate prop completely
       context.onPress(typeof value === 'object' || context.isMultiMode ? value : ({value, label: itemLabel}) as PickerSingleValue);
     }
   }, [migrate, value, context.onPress]);
diff --git a/src/components/picker/PickerItemsList.tsx b/src/components/picker/PickerItemsList.tsx
index 412e946abd..af7398898d 100644
--- a/src/components/picker/PickerItemsList.tsx
+++ b/src/components/picker/PickerItemsList.tsx
@@ -82,9 +82,9 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     return (
       <View>
         <View row spread padding-page>
-          <Text>{topBarProps.title}</Text>
+          <Text>{topBarProps?.title}</Text>
           <Text text70 $textPrimary accessibilityRole={'button'} onPress={() => context.onPress(wheelPickerValue)}>
-            {topBarProps.doneLabel ?? 'Select'}
+            {topBarProps?.doneLabel ?? 'Select'}
           </Text>
         </View>
         <WheelPicker
diff --git a/src/components/picker/PickerPresenter.ts b/src/components/picker/PickerPresenter.ts
index dae7a44c38..c1133e2f24 100644
--- a/src/components/picker/PickerPresenter.ts
+++ b/src/components/picker/PickerPresenter.ts
@@ -18,6 +18,7 @@ export function isItemSelected(childValue: PickerSingleValue, selectedValue?: Pi
 
   if (Array.isArray(selectedValue)) {
     isSelected = !!_.find(selectedValue, v => {
+      // @ts-expect-error TODO: fix after removing migrate prop completely
       return v === childValue || (typeof v === 'object' && v?.value === childValue);
     });
   } else {
diff --git a/src/components/picker/__tests__/index.spec.tsx b/src/components/picker/__tests__/index.spec.tsx
index d68c71f406..37388faf39 100644
--- a/src/components/picker/__tests__/index.spec.tsx
+++ b/src/components/picker/__tests__/index.spec.tsx
@@ -14,14 +14,17 @@ const testID = 'picker';
 describe('Picker', () => {
   describe('getLabel', () => {
     it('should get label of a simple item', async () => {
-      const driver = new PickerDriver({component: <TestCase value={countries[2]}/>, testID});
+      const driver = new PickerDriver({component: <TestCase value={countries[2].value}/>, testID});
 
       expect(await driver.getByDisplayValue(countries[2].label)).toBeDefined();
       expect(await driver.getByDisplayValue(countries[3].label)).not.toBeDefined();
     });
 
     it('should get label out of an array of items', async () => {
-      const driver = new PickerDriver({component: <TestCase value={[countries[2], countries[4]]}/>, testID});
+      const driver = new PickerDriver({
+        component: <TestCase value={[countries[2].value, countries[4].value]}/>,
+        testID
+      });
 
       expect(await driver.getByDisplayValue(`${countries[2].label}, ${countries[4].label}`)).toBeDefined();
     });
diff --git a/src/components/picker/api/picker.api.json b/src/components/picker/api/picker.api.json
index 2be77cdee8..0523bf6936 100644
--- a/src/components/picker/api/picker.api.json
+++ b/src/components/picker/api/picker.api.json
@@ -81,21 +81,11 @@
       "type": "(props) => void",
       "description": "Render custom search input (only when passing showSearch)"
     },
-    {
-      "name": "useNativePicker",
-      "type": "boolean",
-      "description": "Allow to use the native picker solution (different style for iOS and Android)"
-    },
     {
       "name": "useWheelPicker",
       "type": "boolean",
       "description": "Use wheel picker instead of a list picker"
     },
-    {
-      "name": "renderNativePicker",
-      "type": "(props) => void",
-      "description": "Callback for rendering a custom native picker inside the dialog (relevant to native picker only)"
-    },
     {
       "name": "listProps",
       "type": "FlatListProps",
diff --git a/src/components/picker/helpers/usePickerLabel.tsx b/src/components/picker/helpers/usePickerLabel.tsx
index fb4c658294..a991a2fd55 100644
--- a/src/components/picker/helpers/usePickerLabel.tsx
+++ b/src/components/picker/helpers/usePickerLabel.tsx
@@ -31,9 +31,10 @@ const usePickerLabel = (props: UsePickerLabelProps) => {
       return getLabelsFromArray(value);
     }
 
-    if (typeof value === 'object') {
-      return value?.label;
-    }
+    // TODO: Remove
+    // if (typeof value === 'object') {
+    //   return value?.label;
+    // }
 
     // otherwise, extract from picker items
     const selectedItem = _.find(items, {value});
diff --git a/src/components/picker/helpers/usePickerMigrationWarnings.tsx b/src/components/picker/helpers/usePickerMigrationWarnings.tsx
index 77350f2da1..53bd84c877 100644
--- a/src/components/picker/helpers/usePickerMigrationWarnings.tsx
+++ b/src/components/picker/helpers/usePickerMigrationWarnings.tsx
@@ -3,6 +3,7 @@ import _ from 'lodash';
 import {LogService} from '../../../services';
 import {PickerProps, PickerModes} from '../types';
 
+// @ts-expect-error TODO: Remove this whole file when migration is completed
 type UsePickerMigrationWarnings = Pick<PickerProps, 'value' | 'mode' | 'useNativePicker'>;
 
 const usePickerMigrationWarnings = (props: UsePickerMigrationWarnings) => {
diff --git a/src/components/picker/index.tsx b/src/components/picker/index.tsx
index fc39f5b828..a06de5d1b3 100644
--- a/src/components/picker/index.tsx
+++ b/src/components/picker/index.tsx
@@ -17,8 +17,7 @@ import TextFieldMigrator from '../textField/TextFieldMigrator';
 import Icon from '../icon';
 import View from '../view';
 import Text from '../text';
-// @ts-expect-error
-import NativePicker from './NativePicker';
+// import NativePicker from './NativePicker';
 import PickerItemsList from './PickerItemsList';
 import PickerItem from './PickerItem';
 import PickerContext from './PickerContext';
@@ -26,7 +25,7 @@ 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 usePickerMigrationWarnings from './helpers/usePickerMigrationWarnings';
 import {extractPickerItems} from './PickerPresenter';
 import {
   PickerProps,
@@ -63,7 +62,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     searchStyle,
     searchPlaceholder,
     renderCustomSearch,
-    useNativePicker,
+    // useNativePicker,
     useWheelPicker,
     renderPicker,
     customPickerProps,
@@ -86,8 +85,9 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     renderItem,
     children,
     useSafeArea,
-    migrate,
-    migrateTextField,
+    // TODO: Remove migrate props and migrate code
+    migrate = true,
+    migrateTextField = true,
     accessibilityLabel,
     accessibilityHint,
     ...others
@@ -99,7 +99,8 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
 
   const pickerExpandable = useRef<ExpandableOverlayMethods>(null);
 
-  usePickerMigrationWarnings({value, mode});
+  // TODO: Remove
+  // usePickerMigrationWarnings({value, mode});
 
   const pickerRef = useImperativePickerHandle(ref, pickerExpandable);
   const {
@@ -134,6 +135,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
   }, []);
 
   const contextValue = useMemo(() => {
+    // @ts-expect-error cleanup after removing migrate prop
     const pickerValue = !migrate && typeof value === 'object' && !_.isArray(value) ? value?.value : value;
     return {
       migrate,
@@ -264,9 +266,9 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     }
   };
 
-  if (useNativePicker) {
-    return <NativePicker {...themeProps}/>;
-  }
+  // if (useNativePicker) {
+  //   return <NativePicker {...themeProps}/>;
+  // }
 
   return (
     <PickerContext.Provider value={contextValue}>
diff --git a/src/components/picker/types.tsx b/src/components/picker/types.tsx
index dac08b2047..0ec9c76e3c 100644
--- a/src/components/picker/types.tsx
+++ b/src/components/picker/types.tsx
@@ -3,7 +3,7 @@ import {FlatListProps, StyleProp, ViewStyle, TextStyle} from 'react-native';
 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 {TextFieldProps} from '../../../typings/components/Inputs';
 import {TextFieldMethods, TextFieldProps as NewTextFieldProps} from '../../incubator/TextField';
 
 // Note: enum values are uppercase due to legacy
@@ -18,9 +18,10 @@ export enum PickerFieldTypes {
   settings = 'settings'
 }
 
-type PickerValueDeprecated = {value: string | number; label: string};
+// TODO: Remove type
+// type PickerValueDeprecated = {value: string | number; label: string};
 
-export type PickerSingleValue = string | number | PickerValueDeprecated;
+export type PickerSingleValue = string | number/*  | PickerValueDeprecated */;
 export type PickerMultiValue = PickerSingleValue[];
 export type PickerValue = PickerSingleValue | PickerMultiValue | undefined;
 
@@ -47,7 +48,7 @@ export interface PickerSearchStyle {
 }
 
 // TODO: need to extend TextField props (and not just TextInputProps)
-export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
+export type PickerBaseProps = /* Omit<TextFieldProps, 'value' | 'onChange'> & */
   Omit<NewTextFieldProps, 'value' | 'onChange'> & ThemeComponent & {
     /* ...TextField.propTypes, */
     /**
@@ -146,19 +147,19 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
      * Render custom search input (only when passing showSearch)
      */
     renderCustomSearch?: (props: PickerItemsListProps) => React.ReactElement;
-    /**
-     * @deprecated pass useWheelPicker prop instead
-     * Allow to use the native picker solution (different style for iOS and Android)
-     */
-    useNativePicker?: boolean;
+    // /**
+    //  * @deprecated pass useWheelPicker prop instead
+    //  * Allow to use the native picker solution (different style for iOS and Android)
+    //  */
+    // useNativePicker?: boolean;
     /**
      * Use wheel picker instead of a list picker
      */
     useWheelPicker?: boolean;
-    /**
-     * Callback for rendering a custom native picker inside the dialog (relevant to native picker only)
-     */
-    renderNativePicker?: () => React.ReactElement;
+    // /**
+    //  * Callback for rendering a custom native picker inside the dialog (relevant to native picker only)
+    //  */
+    // renderNativePicker?: () => React.ReactElement;
     /**
      * Pass props to the list component that wraps the picker options (allows to control FlatList behavior)
      */

From d9aebbdb4f107312eae1f55765250bd6ea1e9d88 Mon Sep 17 00:00:00 2001
From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com>
Date: Wed, 15 Feb 2023 15:18:36 +0200
Subject: [PATCH 2/2] Remove commented code

---
 src/components/picker/types.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/picker/types.tsx b/src/components/picker/types.tsx
index 0ec9c76e3c..c06702eba7 100644
--- a/src/components/picker/types.tsx
+++ b/src/components/picker/types.tsx
@@ -21,7 +21,7 @@ export enum PickerFieldTypes {
 // TODO: Remove type
 // type PickerValueDeprecated = {value: string | number; label: string};
 
-export type PickerSingleValue = string | number/*  | PickerValueDeprecated */;
+export type PickerSingleValue = string | number;
 export type PickerMultiValue = PickerSingleValue[];
 export type PickerValue = PickerSingleValue | PickerMultiValue | undefined;
 
@@ -47,9 +47,8 @@ export interface PickerSearchStyle {
   selectionColor?: string;
 }
 
-// TODO: need to extend TextField props (and not just TextInputProps)
-export type PickerBaseProps = /* Omit<TextFieldProps, 'value' | 'onChange'> & */
-  Omit<NewTextFieldProps, 'value' | 'onChange'> & ThemeComponent & {
+export type PickerBaseProps = Omit<NewTextFieldProps, 'value' | 'onChange'> &
+  ThemeComponent & {
     /* ...TextField.propTypes, */
     /**
      * Temporary prop required for migration to Picker's new API
@@ -184,7 +183,7 @@ export type PickerBaseProps = /* Omit<TextFieldProps, 'value' | 'onChange'> & */
      * Component test id
      */
     testID?: string;
-    children?: ReactNode | undefined
+    children?: ReactNode | undefined;
   };
 
 export type PickerPropsWithSingle = PickerBaseProps & {