Unify some code in the native picker dialog implementation (#1368)

* Unify some code in the native picker dialog implementation

* PR review fixes

Author: ethanshar

demo/src/screens/componentScreens/PickerScreen.js

@@ -137,14 +137,6 @@ export default class PickerScreen extends Component {
             //   );
             // }}
             // topBarProps={{doneLabel: 'YES', cancelLabel: 'NO'}}
-            wheelPickerProps={{
-              style: {width: 200},
-              color: Colors.green30,
-              labelStyle: {fontSize: 32, fontFamily: 'sans-serif-condensed-light'},
-              itemHeight: 55
-            }}
-            selectLabelStyle={{color: Colors.green30}}
-            cancelLabelStyle={{color: Colors.green30}}
           >
             {_.map(options, option => (
               <Picker.Item key={option.value} value={option.value} label={option.label} disabled={option.disabled}/>
@@ -162,7 +154,13 @@ export default class PickerScreen extends Component {
             renderCustomModal={this.renderDialog}
           >
             {_.map(options, option => (
-              <Picker.Item key={option.value} value={option} label={option.label} labelStyle={Typography.text65} disabled={option.disabled}/>
+              <Picker.Item
+                key={option.value}
+                value={option}
+                label={option.label}
+                labelStyle={Typography.text65}
+                disabled={option.disabled}
+              />
             ))}
           </Picker>
 
@@ -236,7 +234,9 @@ export default class PickerScreen extends Component {
             ))}
           </Picker>
 
-          <Text text60 marginT-s5 marginB-s2>Migrated Picker</Text>
+          <Text text60 marginT-s5 marginB-s2>
+            Migrated Picker
+          </Text>
 
           <Picker
             migrate

src/components/picker/NativePicker.js

@@ -5,7 +5,7 @@ import TextField from '../textField';
 import PickerDialog from './PickerDialog';
 import TouchableOpacity from '../touchableOpacity';
 import {Colors} from '../../style';
-import {WheelPicker} from '../../nativeComponents';
+import {WheelPicker} from '../../incubator';
 
 class NativePicker extends BaseComponent {
   static displayName = 'IGNORE';
@@ -62,21 +62,40 @@ class NativePicker extends BaseComponent {
     this.setState({showDialog});
   };
 
+  renderPicker = () => {
+    const {selectedValue} = this.state;
+    const {children, renderNativePicker, pickerStyle, wheelPickerProps, testID} = this.props;
+    if (_.isFunction(renderNativePicker)) {
+      return renderNativePicker(this.props);
+    }
+    return (
+      <WheelPicker
+        style={pickerStyle}
+        selectedValue={selectedValue}
+        onChange={this.onValueChange}
+        testID={`${testID}.wheelPicker`}
+        {...wheelPickerProps}
+      >
+        {children}
+      </WheelPicker>
+    );
+  };
+
   renderPickerDialog = () => {
-    const {selectedValue, showDialog} = this.state;
-    
+    const {showDialog} = this.state;
+
     return (
       <PickerDialog
         height={this.PICKER_HEIGHT + this.MENU_HEIGHT}
         {...this.getThemeProps()}
         visible={showDialog}
         panDirection={null}
         onDismiss={this.onCancel}
-        onValueChange={this.onValueChange}
-        selectedValue={selectedValue}
         onDone={this.onDone}
         onCancel={this.onCancel}
-      />
+      >
+        {this.renderPicker()}
+      </PickerDialog>
     );
   };
 
@@ -110,5 +129,6 @@ class NativePicker extends BaseComponent {
   }
 }
 
-NativePicker.Item = WheelPicker.Item;
+// TODO: Doesn't seem to be needed
+// NativePicker.Item = WheelPicker.Item;
 export default NativePicker;

src/components/picker/PickerDialog.android.js

@@ -9,20 +9,13 @@ import Dialog from '../dialog';
 import View from '../view';
 import Text from '../text';
 import {Colors, BorderRadiuses} from '../../style';
-import {WheelPicker} from '../../incubator';
 
 class PickerDialog extends BaseComponent {
   static displayName = 'IGNORE';
   static propTypes = {
-    selectedValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    onValueChange: PropTypes.func,
     onDone: PropTypes.func,
     onCancel: PropTypes.func,
     children: PropTypes.array,
-    /**
-     * Pass props for the WheelPicker (Android only)
-     */
-    wheelPickerProps: PropTypes.shape(WheelPicker.propTypes),
     /**
      * select label style
      */
@@ -68,17 +61,6 @@ class PickerDialog extends BaseComponent {
     );
   }
 
-  renderPicker() {
-    const {children, onValueChange, selectedValue, renderNativePicker, wheelPickerProps, testID} = this.props;
-    if (_.isFunction(renderNativePicker)) {
-      return renderNativePicker(this.props);
-    }
-    return (
-      <WheelPicker selectedValue={selectedValue} onChange={onValueChange} {...wheelPickerProps} testID={`${testID}.wheelPicker`}>
-        {children}
-      </WheelPicker>
-    );
-  }
 
   render() {
     const dialogProps = extractComponentProps(Dialog, this.props);
@@ -89,7 +71,7 @@ class PickerDialog extends BaseComponent {
         <View style={styles.dialog}>
           {this.renderHeader()}
           <View flex center paddingH-24>
-            {this.renderPicker()}
+            {this.props.children}
           </View>
           {this.renderFooter()}
         </View>

src/components/picker/PickerDialog.ios.js

@@ -9,13 +9,10 @@ import Dialog from '../dialog';
 import View from '../view';
 import Text from '../text';
 import {Colors} from '../../style';
-import {WheelPicker} from '../../incubator';
 
 class PickerDialog extends BaseComponent {
   static displayName = 'IGNORE';
   static propTypes = {
-    selectedValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    onValueChange: PropTypes.func,
     onDone: PropTypes.func,
     onCancel: PropTypes.func,
     topBarProps: PropTypes.object,
@@ -39,17 +36,6 @@ class PickerDialog extends BaseComponent {
     );
   }
 
-  renderPicker() {
-    const {children, onValueChange, selectedValue, renderNativePicker, pickerStyle, testID} = this.props;
-    if (_.isFunction(renderNativePicker)) {
-      return renderNativePicker(this.props);
-    }
-    return (
-      <WheelPicker style={pickerStyle} selectedValue={selectedValue} onChange={onValueChange} testID={`${testID}.wheelPicker`}>
-        {children}
-      </WheelPicker>
-    );
-  }
 
   render() {
     const dialogProps = extractComponentProps(Dialog, this.props);
@@ -60,7 +46,7 @@ class PickerDialog extends BaseComponent {
         <View flex bg-white>
           {this.renderHeader()}
           <View centerV flex>
-            {this.renderPicker()}
+            {this.props.children}
           </View>
           <View useSafeArea/>
         </View>