Feat/new wheel picker integration (#1083)

* Change prop name to match current picker

* Fix Container type, when no panDirection set - fixing scrollable content to be avoided

* added logic to support the current WheelPicker api and behaviour, added option to pass selected predefined value

* Support integrating new WeelPicker

* New WheelPicker integration

* WIP - picker item needs to be created

* Fix build issue by reorder methods

* Using reanimated tests stub to fix failing tests

* fix WheelPicker demo screen

* align items in demo screen

* showcase both options to manage WeelPicker style

* typescript

* Fix extra space on the bottom of the wheel, use onLayout for starting-index instead timer

* replace native WheelPicker in android with our new WheelPicker

* replaced Android's  WheelPicker when useNativePicker - with our new WheelPicker

* support WheelPicker to be fully controlled

* added WheelPicker presenter

* implement WheelPicker presenter

* WheelPicker unittests

* lint fix

* ts file

* fix android import

* wheel-picker import style

* Fixing demo screen

* ts fix

* PR Comments - naming

* Demo screen structure code

* PR Comment - spacing

* Avoid check when offset send is -1 (prior render)

* API naming

* API naming + demo fixes

* PR Comments - added component memo, remove unnecessary memo from separators

* Style is based on parent, so no need for extra

* fix lint errors

* Fixing issue when not passing back the onChange event

* lint

Co-authored-by: Ethan Sharabi <[email protected]>

Author: mendyEdri

demo/src/screens/incubatorScreens/WheelPickerScreen.tsx

@@ -1,7 +1,6 @@
-import React, {useCallback} from 'react';
+import React, {useCallback, useState} from 'react';
 import {View, Text, Incubator, Colors, Typography} from 'react-native-ui-lib';
 import _ from 'lodash';
-import {ItemProps} from 'src/incubator/WheelPicker/Item';
 
 // Months
 const months = [
@@ -22,27 +21,61 @@ const months = [
 // Years
 const years = _.times(2020, i => i);
 
-export default () => {
+const useData = (initialMonth?: string, initialYear?: string) => {
+
+  const [selectedMonth, setMonth] = useState<string | undefined>(initialMonth);
+  const [selectedYear, setYear] = useState<string | undefined>(initialYear);
+
+  const onMonthChange = (item: string | undefined, _: number) => {
+    setMonth(item);
+  };
+
+  const onYearChange = (item: string | undefined, _: number) => {
+    setYear(item);
+  };
+
+  const getMonths = useCallback(() => {
+    return _.map(months, item => ({label: item, value: item}));
+  }, []);
 
-  const onChange = useCallback((index: number, item?: ItemProps) => {
-    console.log(item, index);
+  const getYears = useCallback(() => {
+    return _.map(years, item => ({label: '' + item, value: item}));
   }, []);
 
+  return {
+    getMonths, 
+    getYears,
+    onMonthChange,
+    onYearChange,
+    selectedMonth,
+    selectedYear
+  };
+};
+
+export default () => {
+  
+  const {selectedMonth, onMonthChange, getMonths, selectedYear, onYearChange, getYears} = useData('February', undefined);
+
   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}
+          style={{width: '100%'}}
+          onChange={onMonthChange}
           activeTextColor={Colors.primary}
           inactiveTextColor={Colors.grey20}
-          items={_.map(months, i => ({text: i, value: i}))}
-          textStyle={{...Typography.text60R}}
+          items={getMonths()}
+          textStyle={Typography.text60R}
+          selectedValue={selectedMonth}
         />
-
-        <Text h3 marginT-s5>Years</Text>
-        <Incubator.WheelPicker onChange={onChange} items={_.map(years, i => ({text: '' + i, value: i}))} />
+        
+        <Text h3>Years</Text>
+        <View height={300} width={'100%'}>
+          <Incubator.WheelPicker onChange={onYearChange} selectedValue={selectedYear} items={getYears()}/>
+        </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
+   */
+  onChange?: (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 | string | 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;

generatedTypes/incubator/WheelPicker/usePresenter.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { ItemProps } from './Item';
+declare type ItemValueTypes = ItemProps | number | string;
+export { ItemValueTypes };
+declare type PropTypes = {
+    selectedValue: ItemValueTypes;
+    children?: JSX.Element | JSX.Element[];
+    items?: ItemProps[];
+    itemHeight: number;
+    preferredNumVisibleRows: number;
+};
+declare type RowItem = {
+    value: string | number;
+    index: number;
+};
+interface Presenter {
+    items: ItemProps[];
+    shouldControlComponent: (offset: number) => boolean;
+    index: number;
+    height: number;
+    getRowItemAtOffset: (offset: number) => RowItem;
+}
+declare const usePresenter: ({ selectedValue, children, items: propItems, itemHeight, preferredNumVisibleRows }: PropTypes) => Presenter;
+export default usePresenter;

jest-setup.js

@@ -6,6 +6,6 @@ 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', () => {});
 jest.mock('@react-native-picker/picker', () => ({Picker: {Item: {}}}));

src/components/dialog/index.tsx

@@ -211,10 +211,18 @@ class Dialog extends Component<DialogProps, DialogState> {
     }
   };
 
+  getContainerType = () => {
+    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.getContainerType();
 
     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,10 @@ class NativePicker extends BaseComponent {
 
   renderPickerDialog = () => {
     const {selectedValue, showDialog} = this.state;
-
+    
     return (
       <PickerDialog
+        height={this.PICKER_HEIGHT + this.MENU_HEIGHT}
         {...this.getThemeProps()}
         visible={showDialog}
         panDirection={null}

src/components/picker/PickerDialog.android.js

@@ -9,7 +9,7 @@ import Dialog from '../dialog';
 import View from '../view';
 import Text from '../text';
 import {Colors, BorderRadiuses} from '../../style';
-import {WheelPicker} from '../../nativeComponents';
+import {WheelPicker} from '../../incubator';
 
 class PickerDialog extends BaseComponent {
   static displayName = 'IGNORE';
@@ -74,7 +74,7 @@ class PickerDialog extends BaseComponent {
       return renderNativePicker(this.props);
     }
     return (
-      <WheelPicker onValueChange={onValueChange} selectedValue={selectedValue} {...wheelPickerProps}>
+      <WheelPicker selectedValue={selectedValue} onChange={onValueChange} {...wheelPickerProps}>
         {children}
       </WheelPicker>
     );

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';
 
 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} onChange={onValueChange}>
         {children}
       </WheelPicker>
     );
@@ -56,12 +56,13 @@ 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>
             {this.renderPicker()}
           </View>
+          <View useSafeArea/>
         </View>
       </Dialog>
     );

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,
@@ -64,7 +64,7 @@ export default ({
     >
       {/* @ts-ignore reanimated2*/}
       <AnimatedText text60R style={{color, ...style}}>
-        {text}
+        {label}
       </AnimatedText>
     </AnimatedTouchableOpacity>
   );