New custom WheelPicker (#740)

* create a customizable WheelPicker

* Reset PlaygroundScreen changes

* Keep working on WheelPicker (incubator)

* Fix TS issues

* export WheelPicker in incubator index

* Use Flatlist for WheelPicker for better performance when having big lists

* Separate to two examples: months and years

* Feat/basic ui (#1038)

* Removed 'wheel` animation to match the design guidlines + added default colors and font

* added text configuration props

* on selecting item - wheel will scroll to the right row

* added Fader and extract separators

* Calculate current active index

* added onChange event

* Increase visible rows to 5

* change separator color to be visible

* added demo code

* update reanimated version

* types changes

* type update

* extract logic to it's own type

* refactor item center calculation to be based on the offset

* update demo screen according to the new api

* pass style to item

* added unittests to listMiddleIndex calculations

* made demo more clear

* Update src/incubator/WheelPicker/index.tsx

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

* PR fixes - naming

* PR fixes - naming

* PR fix - optional chaining

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

Co-authored-by: Mendy Edri <[email protected]>

Author: ethanshar

demo/src/screens/MenuStructure.js

@@ -149,7 +149,8 @@ export const navigationData = {
     title: 'Incubator (Experimental)',
     screens: [
       {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
-      {title: '(New) TextField', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'}
+      {title: '(New) TextField', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'},
+      {title: 'WheelPicker (Incubator)', tags: 'wheel picker spinner experimental', screen: 'unicorn.incubator.WheelPickerScreen'}
     ]
   },
   Inspirations: {

demo/src/screens/incubatorScreens/WheelPickerScreen.tsx

@@ -0,0 +1,49 @@
+import React, {useCallback} 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 = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December'
+];
+
+// Years
+const years = _.times(2020, i => i);
+
+export default () => {
+
+  const onChange = useCallback((index: number, item?: ItemProps) => {
+    console.log(item, index);
+  }, []);
+
+  return (
+    <View flex padding-page>
+      <Text h1>Wheel Picker</Text>
+      <View flex centerV centerH paddingT-page>
+        <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}))} />
+      </View>
+    </View>
+  );
+};

demo/src/screens/incubatorScreens/index.js

@@ -2,5 +2,9 @@ import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 
 export function registerScreens(registrar) {
   registrar('unicorn.incubator.TouchableOpacityScreen', () =>
-    gestureHandlerRootHOC(require('./TouchableOpacityScreen').default));
+    gestureHandlerRootHOC(require('./TouchableOpacityScreen').default)
+  );
+  registrar('unicorn.incubator.WheelPickerScreen', () =>
+    gestureHandlerRootHOC(require('./WheelPickerScreen').default)
+  );
 }

generatedTypes/incubator/WheelPicker/Item.d.ts

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

generatedTypes/incubator/WheelPicker/helpers/useListMiddleIndex.d.ts

@@ -0,0 +1,6 @@
+declare type ItemType = {
+    itemHeight: number;
+    listSize: number;
+};
+declare const _default: ({ itemHeight, listSize }: ItemType) => (offset: number) => number;
+export default _default;

generatedTypes/incubator/WheelPicker/index.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+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;
+}
+declare const WheelPicker: ({ items, itemHeight, activeTextColor, inactiveTextColor, textStyle, onChange: onChangeEvent }: WheelPickerProps) => JSX.Element;
+export default WheelPicker;

generatedTypes/incubator/index.d.ts

@@ -1,3 +1,4 @@
 export { default as TabController } from './TabController';
 export { default as TextField } from './TextField';
 export { default as TouchableOpacity } from './TouchableOpacity';
+export { default as WheelPicker } from './WheelPicker';

src/incubator/WheelPicker/Item.tsx

@@ -0,0 +1,69 @@
+import React, {useCallback, useMemo} from 'react';
+import Animated, {interpolateColors} from 'react-native-reanimated';
+import Text from '../../components/text';
+import TouchableOpacity from '../../components/touchableOpacity';
+import {TextStyle} from 'react-native';
+import {Colors} from '../../../src/style';
+
+const AnimatedTouchableOpacity = Animated.createAnimatedComponent(
+  TouchableOpacity
+);
+const AnimatedText = Animated.createAnimatedComponent(Text);
+
+export interface ItemProps {
+  text: string;
+  value: string | number;
+}
+
+interface InternalProps extends ItemProps {
+  index: number;
+  offset: any;
+  itemHeight: number;
+  activeColor?: string;
+  inactiveColor?: string;
+  style?: TextStyle;
+  onSelect: (index: number) => void;
+}
+
+export default ({
+  index,
+  text,
+  itemHeight,
+  onSelect,
+  offset,
+  activeColor = Colors.primary,
+  inactiveColor = Colors.grey20,
+  style
+}: InternalProps) => {
+  
+  const selectItem = useCallback(() => onSelect(index), [index]);
+  const itemOffset = index * itemHeight;
+
+  const color = useMemo(() => {
+    return interpolateColors(offset, {
+      inputRange: [
+        itemOffset - itemHeight,
+        itemOffset,
+        itemOffset + itemHeight
+      ],
+      outputColorRange: [inactiveColor, activeColor, inactiveColor]
+    });
+  }, [itemHeight]);
+  
+  return (
+    <AnimatedTouchableOpacity
+      activeOpacity={1}
+      style={{
+        height: itemHeight
+      }}
+      key={index}
+      center
+      onPress={selectItem}
+      index={index}
+    >
+      <AnimatedText text60R style={{color, ...style}}>
+        {text}
+      </AnimatedText>
+    </AnimatedTouchableOpacity>
+  );
+};

src/incubator/WheelPicker/__tests__/useListMiddleIndex.spec.js

@@ -0,0 +1,40 @@
+import useMiddleIndex from '../helpers/useListMiddleIndex';
+
+describe('Finds list\'s middle index', () => {
+  
+  it('When list is at offset 0, it should return the index of the first item', () => {
+    const sut = useMiddleIndex({itemHeight: 50, listSize: 10});
+    const offset = 0;
+    expect(sut(offset)).toEqual(0);
+  });
+
+  it('When list is at offset 100, it means we are at passed on 2 items', () => {
+    const sut = useMiddleIndex({itemHeight: 50, listSize: 10});
+    const offset = 100;
+    expect(sut(offset)).toEqual(2);
+  });
+
+  it('Make sure calculation changes on the middle of the item height', () => {
+    const sut = useMiddleIndex({itemHeight: 50, listSize: 10});
+    let offset = 24;
+    expect(sut(offset)).toEqual(0);
+
+    offset = 26;
+    expect(sut(offset)).toEqual(1);
+  });
+
+  it('Make sure calculation does not exceeds the number of items', () => {
+    const sut = useMiddleIndex({itemHeight: 50, listSize: 10});
+    let offset = 501;
+    expect(sut(offset)).toEqual(9);
+
+    offset = 600;
+    expect(sut(offset)).toEqual(9);
+  });
+
+  it('Make sure calculation does not less then 0', () => {
+    const sut = useMiddleIndex({itemHeight: 50, listSize: 10});
+    const offset = -100;
+    expect(sut(offset)).toEqual(0);
+  });
+});

src/incubator/WheelPicker/helpers/useListMiddleIndex.ts

@@ -0,0 +1,23 @@
+type ItemType = {
+    itemHeight: number;
+    listSize: number;
+}
+
+export default ({itemHeight, listSize}: ItemType) => {
+  const valueInRange = (value: number, min: number, max: number): number => {
+    if (value < min || value === -0) {
+      return min;
+    }
+    if (value > max) {
+      return max;
+    }
+    return value;
+  };
+
+  const middleIndex = (offset: number): number => {
+    const calculatedIndex = Math.round(offset / itemHeight);
+    return valueInRange(calculatedIndex, 0, listSize - 1);
+  };
+
+  return middleIndex
+};