v7_Picker (#2478)

* Migrate picker component

* Remove commented code

Author: ethanshar

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"

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}

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]);

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

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 {

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();
     });

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",

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});

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) => {

src/components/picker/index.tsx

@@ -17,16 +17,15 @@ 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';
 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}>