Feat/new wheel picker integration

demo/src/screens/incubatorScreens/WheelPickerScreen.tsx

@@ -23,26 +23,29 @@ const months = [
 const years = _.times(2020, i => i);
 
 export default () => {
-
-  const onChange = useCallback((index: number, item?: ItemProps) => {
+  const onChange = useCallback((item: string | undefined, index: number) => {
     console.log(item, index);
   }, []);
 
   return (
     <View flex padding-page>
       <Text h1>Wheel Picker</Text>
-      <View flex centerV centerH paddingT-page>
+
+      <View flex centerV centerH>
         <Text h3>Months</Text>
-        <Incubator.WheelPicker
-          onChange={onChange}
-          activeTextColor={Colors.primary}
-          inactiveTextColor={Colors.grey20}
-          items={_.map(months, i => ({text: i, value: i}))}
-          textStyle={{...Typography.text60R}}
-        />
-
-        <Text h3 marginT-s5>Years</Text>
-        <Incubator.WheelPicker onChange={onChange} items={_.map(years, i => ({text: '' + i, value: i}))} />
+          <Incubator.WheelPicker
+            style={{width: '100%'}}
+            onValueChange={onChange}
+            activeTextColor={Colors.primary}
+            inactiveTextColor={Colors.grey20}
+            items={_.map(months, i => ({label: i, value: i}))}
+            textStyle={{...Typography.text60R}}
+          />
+
+        <Text h3>Years</Text>
+        <View height={300} width={'100%'}>
+          <Incubator.WheelPicker onValueChange={onChange} items={_.map(years, i => ({label: '' + i, value: i}))} />
+        </View>
       </View>
     </View>
   );

generatedTypes/incubator/WheelPicker/Item.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { TextStyle } from 'react-native';
 export interface ItemProps {
-    text: string;
+    label: string;
     value: string | number;
 }
 interface InternalProps extends ItemProps {
@@ -13,5 +13,5 @@ interface InternalProps extends ItemProps {
     style?: TextStyle;
     onSelect: (index: number) => void;
 }
-declare const _default: ({ index, text, itemHeight, onSelect, offset, activeColor, inactiveColor, style }: InternalProps) => JSX.Element;
+declare const _default: ({ index, label, itemHeight, onSelect, offset, activeColor, inactiveColor, style }: InternalProps) => JSX.Element;
 export default _default;

generatedTypes/incubator/WheelPicker/index.d.ts

@@ -1,31 +1,56 @@
 /// <reference types="react" />
-import { TextStyle } from 'react-native';
-import { ItemProps } from './Item';
+import {TextStyle} from 'react-native';
+import {ItemProps} from './Item';
 export interface WheelPickerProps {
-    /**
-     * Data source for WheelPicker
-     */
-    items?: ItemProps[];
-    /**
-     * Describe the height of each item in the WheelPicker
-     */
-    itemHeight?: number;
-    /**
-     * Text color for the focused row
-     */
-    activeTextColor?: string;
-    /**
-     * Text color for other, non-focused rows
-     */
-    inactiveTextColor?: string;
-    /**
-     * Row text style
-     */
-    textStyle?: TextStyle;
-    /**
-     * Event, on active row change
-     */
-    onChange: (index: number, item?: ItemProps) => void;
+  /**
+   * Data source for WheelPicker
+   */
+  items?: ItemProps[];
+  /**
+   * Describe the height of each item in the WheelPicker
+   * default value: 44
+   */
+  itemHeight?: number;
+  /**
+   * Describe the number of rows visible
+   * default value: 5
+   */
+  numberOfVisibleRows?: number;
+  /**
+   * Text color for the focused row
+   */
+  activeTextColor?: string;
+  /**
+   * Text color for other, non-focused rows
+   */
+  inactiveTextColor?: string;
+  /**
+   * Row text style
+   */
+  textStyle?: TextStyle;
+  /**
+   * Event, on active row change
+   */
+  onValueChange: (item: string | undefined, index: number) => void;
+  /**
+   * Container's ViewStyle, height is computed according to itemHeight * numberOfVisibleRows
+   */
+  style?: Omit<ViewStyle, 'height'>;
+  /**
+   * Support passing items as children props
+   */
+  children?: JSX.Element | JSX.Element[];
+  /**
+   * WheelPicker initial value, can be ItemProps.value, number as index
+   */
+  selectedValue?: ItemProps | number;
 }
-declare const WheelPicker: ({ items, itemHeight, activeTextColor, inactiveTextColor, textStyle, onChange: onChangeEvent }: WheelPickerProps) => JSX.Element;
+declare const WheelPicker: ({
+  items,
+  itemHeight,
+  activeTextColor,
+  inactiveTextColor,
+  textStyle,
+  onChange: onChangeEvent
+}: WheelPickerProps) => JSX.Element;
 export default WheelPicker;

jest-setup.js

@@ -6,5 +6,5 @@ jest.spyOn(AccessibilityInfo, 'isScreenReaderEnabled').mockImplementation(() =>
 // mock native modules
 jest.mock('@react-native-community/blur', () => {});
 jest.mock('@react-native-community/netinfo', () => {});
-jest.mock('react-native-reanimated', () => ({}));
+jest.mock('react-native-reanimated', () => require('react-native-reanimated/mock'));
 jest.mock('react-native-gesture-handler', () => {});

src/components/dialog/index.tsx

@@ -200,10 +200,18 @@ class Dialog extends Component<DialogProps, DialogState> {
     }
   };
 
+  containerType = () => {
+    const {panDirection, renderPannableHeader} = this.props;
+    if (!panDirection || renderPannableHeader) {
+      return View;
+    }
+    return PanListenerView;
+  }
+
   renderDialogView = () => {
-    const {children, renderPannableHeader, panDirection = PanningProvider.Directions.DOWN, containerStyle, testID} = this.props;
+    const {children, panDirection = PanningProvider.Directions.DOWN, containerStyle, testID} = this.props;
     const {dialogVisibility} = this.state;
-    const Container = renderPannableHeader ? View : PanListenerView;
+    const Container = this.containerType();
 
     return (
       <View testID={testID} style={[this.styles.dialogViewSize]} pointerEvents="box-none">

src/components/picker/NativePicker.js

@@ -2,10 +2,10 @@ import _ from 'lodash';
 import React from 'react';
 import {BaseComponent} from '../../commons';
 import TextField from '../textField';
-import {WheelPicker} from '../../nativeComponents';
 import PickerDialog from './PickerDialog';
 import TouchableOpacity from '../touchableOpacity';
 import {Colors} from '../../style';
+import {WheelPicker} from '../../nativeComponents';
 
 class NativePicker extends BaseComponent {
   static displayName = 'IGNORE';
@@ -15,6 +15,11 @@ class NativePicker extends BaseComponent {
     showDialog: false
   };
 
+  NUMBER_OF_ROWS = 5;
+  ROW_HEIGHT = 44;
+  MENU_HEIGHT = 44;
+  PICKER_HEIGHT = this.NUMBER_OF_ROWS * this.ROW_HEIGHT + this.MENU_HEIGHT;
+
   extractPickerItems(props) {
     const {children, useNativePicker} = props;
     if (useNativePicker) {
@@ -59,9 +64,11 @@ class NativePicker extends BaseComponent {
 
   renderPickerDialog = () => {
     const {selectedValue, showDialog} = this.state;
-
+    
     return (
       <PickerDialog
+        height={this.PICKER_HEIGHT + this.MENU_HEIGHT}
+        pickerStyle={{width: '100%'}}
         {...this.getThemeProps()}
         visible={showDialog}
         panDirection={null}

src/components/picker/PickerDialog.ios.js

@@ -9,7 +9,7 @@ import Dialog from '../dialog';
 import View from '../view';
 import Text from '../text';
 import {Colors} from '../../style';
-import {WheelPicker} from '../../nativeComponents';
+import WheelPicker from '../../incubator/WheelPicker';
 
 class PickerDialog extends BaseComponent {
   static displayName = 'IGNORE';
@@ -40,12 +40,12 @@ class PickerDialog extends BaseComponent {
   }
 
   renderPicker() {
-    const {children, onValueChange, selectedValue, renderNativePicker} = this.props;
+    const {children, onValueChange, selectedValue, renderNativePicker, pickerStyle} = this.props;
     if (_.isFunction(renderNativePicker)) {
       return renderNativePicker(this.props);
     }
     return (
-      <WheelPicker onValueChange={onValueChange} selectedValue={selectedValue}>
+      <WheelPicker style={pickerStyle} selectedValue={selectedValue} onValueChange={onValueChange}>
         {children}
       </WheelPicker>
     );
@@ -56,7 +56,7 @@ class PickerDialog extends BaseComponent {
     // TODO: should be taken from dialogProps but there's an issue with "babel-plugin-typescript-to-proptypes" plugin
     const {panDirection} = this.props;
     return (
-      <Dialog {...dialogProps} height={250} width="100%" migrate bottom animationConfig={{duration: 300}} panDirection={panDirection}>
+      <Dialog {...dialogProps} width="100%" migrate bottom animationConfig={{duration: 300}} panDirection={panDirection}>
         <View flex bg-white>
           {this.renderHeader()}
           <View centerV flex>

src/incubator/WheelPicker/Item.tsx

@@ -11,7 +11,7 @@ const AnimatedTouchableOpacity = Animated.createAnimatedComponent(
 const AnimatedText = Animated.createAnimatedComponent(Text);
 
 export interface ItemProps {
-  text: string;
+  label: string;
   value: string | number;
 }
 
@@ -27,7 +27,7 @@ interface InternalProps extends ItemProps {
 
 export default ({
   index,
-  text,
+  label,
   itemHeight,
   onSelect,
   offset,
@@ -62,7 +62,7 @@ export default ({
       index={index}
     >
       <AnimatedText text60R style={{color, ...style}}>
-        {text}
+        {label}
       </AnimatedText>
     </AnimatedTouchableOpacity>
   );