Infra/picker new file (#2030)

* Replace Picker index with new file

* Fix error in NativePicker related to how we pass dialog props

* Add relevant displayName to internal components

* Fix Picker tests - move to render tests

* Fix displayName of PickerDialog

* Fix lint errors

Author: ethanshar

src/components/picker/NativePicker.js

@@ -1,14 +1,14 @@
 import _ from 'lodash';
-import React from 'react';
-import {BaseComponent} from '../../commons';
+import React, {Component} from 'react';
 import TextField from '../textField';
 import PickerDialog from './PickerDialog';
 import TouchableOpacity from '../touchableOpacity';
 import {Colors} from '../../style';
 import {WheelPicker} from '../../incubator';
 
-class NativePicker extends BaseComponent {
-  static displayName = 'IGNORE';
+class NativePicker extends Component {
+  static displayName = 'NativePicker';
+
   state = {
     selectedValue: this.props.value,
     items: this.extractPickerItems(this.props),
@@ -87,7 +87,7 @@ class NativePicker extends BaseComponent {
     return (
       <PickerDialog
         height={this.PICKER_HEIGHT + this.MENU_HEIGHT}
-        {...this.getThemeProps()}
+        {...this.props}
         visible={showDialog}
         panDirection={null}
         onDismiss={this.onCancel}

src/components/picker/PickerDialog.android.js

@@ -1,17 +1,15 @@
-import React from 'react';
+import React, {Component} from 'react';
 import {StyleSheet, Text as RNText} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 
-import {BaseComponent} from '../../commons';
-import {extractComponentProps} from '../../commons/modifiers';
 import Dialog from '../dialog';
 import View from '../view';
 import Text from '../text';
 import {Colors, BorderRadiuses} from '../../style';
 
-class PickerDialog extends BaseComponent {
-  static displayName = 'IGNORE';
+class PickerDialog extends Component {
+  static displayName = 'PickerDialog';
   static propTypes = {
     onDone: PropTypes.func,
     onCancel: PropTypes.func,
@@ -62,12 +60,10 @@ class PickerDialog extends BaseComponent {
   }
 
 
-  render() {
-    const dialogProps = extractComponentProps(Dialog, this.props);
-    // TODO: should be taken from dialogProps but there's an issue with "babel-plugin-typescript-to-proptypes" plugin
-    const {panDirection} = this.props;
+  render() {  
+    const {panDirection, visible, pickerModalProps} = this.props;
     return (
-      <Dialog {...dialogProps} height="50%" width="77%" panDirection={panDirection}>
+      <Dialog {...pickerModalProps} visible={visible} height="50%" width="77%" panDirection={panDirection}>
         <View style={styles.dialog}>
           {this.renderHeader()}
           <View flex center paddingH-24>

src/components/picker/PickerDialog.js

@@ -1,17 +1,15 @@
-import React from 'react';
+import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 
-import {BaseComponent} from '../../commons';
-import {extractComponentProps} from '../../commons/modifiers';
 import Dialog from '../dialog';
 import View from '../view';
 import Text from '../text';
 import {Colors} from '../../style';
 
-class PickerDialog extends BaseComponent {
-  static displayName = 'IGNORE';
+class PickerDialog extends Component {
+  static displayName = 'PickerDialog';
   static propTypes = {
     onDone: PropTypes.func,
     onCancel: PropTypes.func,
@@ -38,11 +36,10 @@ class PickerDialog extends BaseComponent {
 
 
   render() {
-    const dialogProps = extractComponentProps(Dialog, this.props);
-    // TODO: should be taken from dialogProps but there's an issue with "babel-plugin-typescript-to-proptypes" plugin
-    const {panDirection} = this.props;
+    const {panDirection, visible, height, pickerModalProps} = this.props;
+
     return (
-      <Dialog {...dialogProps} width="100%" bottom animationConfig={{duration: 300}} panDirection={panDirection}>
+      <Dialog {...pickerModalProps} visible={visible} height={height} width="100%" bottom animationConfig={{duration: 300}} panDirection={panDirection}>
         <View flex bg-$backgroundDefault>
           {this.renderHeader()}
           <View centerV flex>

src/components/picker/__tests__/index.spec.js

@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import {fireEvent, render} from '@testing-library/react-native';
-import Picker, {Picker as _Picker} from '../index';
+import Picker from '../index';
 
 const countries = [
   {label: 'Israel', value: 'IL'},
@@ -13,15 +13,16 @@ const countries = [
 describe('Picker', () => {
   describe('getLabel', () => {
     it('should get label of a simple item', () => {
-      let uut = new _Picker({value: countries[2]});
-      expect(uut.getLabelValueText()).toEqual(countries[2].label);
-      uut = new _Picker({value: countries[3]});
-      expect(uut.getLabelValueText()).toEqual(countries[3].label);
-    });
 
+      let renderTree = render(<TestCase value={countries[2]}/>);
+      renderTree.getByDisplayValue(countries[2].label);
+      renderTree = render(<TestCase value={countries[3]}/>);
+      renderTree.getByDisplayValue(countries[3].label);
+    });
+    
     it('should get label out of an array of items', () => {
-      const uut = new _Picker({value: [countries[2], countries[4]]});
-      expect(uut.getLabelValueText()).toEqual(`${countries[2].label}, ${countries[4].label}`);
+      const renderTree = render(<TestCase value={[countries[2], countries[4]]}/>);
+      renderTree.getByDisplayValue(`${countries[2].label}, ${countries[4].label}`);
     });
   });