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]>

Author: mendyEdri

demo/src/screens/incubatorScreens/WheelPickerScreen.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
-import {View, Text, Incubator} from 'react-native-ui-lib';
+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 = [
@@ -22,14 +23,26 @@ const months = [
 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 centerH paddingT-page>
+      <View flex centerV centerH paddingT-page>
         <Text h3>Months</Text>
-        <Incubator.WheelPicker items={_.map(months, i => ({text: i, value: i}))} />
+        <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 items={_.map(years, i => ({text: i, value: i}))} />
+        <Incubator.WheelPicker onChange={onChange} items={_.map(years, i => ({text: '' + i, value: i}))} />
       </View>
     </View>
   );

generatedTypes/incubator/WheelPicker/Item.d.ts

@@ -8,8 +8,10 @@ interface InternalProps extends ItemProps {
     index: number;
     offset: any;
     itemHeight: number;
-    textStyle?: TextStyle;
+    activeColor?: string;
+    inactiveColor?: string;
+    style?: TextStyle;
     onSelect: (index: number) => void;
 }
-declare const _default: ({ index, text, textStyle, itemHeight, onSelect, offset }: InternalProps) => JSX.Element;
+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

@@ -2,10 +2,30 @@
 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;
-    itemTextStyle?: TextStyle;
-    onChange: (item: ItemProps, index: number) => void;
+    /**
+     * 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, itemTextStyle }: WheelPickerProps) => JSX.Element;
+declare const WheelPicker: ({ items, itemHeight, activeTextColor, inactiveTextColor, textStyle, onChange: onChangeEvent }: WheelPickerProps) => JSX.Element;
 export default WheelPicker;

src/incubator/WheelPicker/Item.tsx

@@ -1,9 +1,9 @@
 import React, {useCallback, useMemo} from 'react';
-import Animated, {concat} from 'react-native-reanimated';
-import {transformOrigin} from 'react-native-redash';
+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
@@ -19,67 +19,49 @@ interface InternalProps extends ItemProps {
   index: number;
   offset: any;
   itemHeight: number;
-  textStyle?: TextStyle;
+  activeColor?: string;
+  inactiveColor?: string;
+  style?: TextStyle;
   onSelect: (index: number) => void;
 }
 
 export default ({
   index,
   text,
-  textStyle,
-  // value,
   itemHeight,
   onSelect,
-  offset
+  offset,
+  activeColor = Colors.primary,
+  inactiveColor = Colors.grey20,
+  style
 }: InternalProps) => {
+  
+  const selectItem = useCallback(() => onSelect(index), [index]);
   const itemOffset = index * itemHeight;
-  const opacity = Animated.interpolate(offset, {
-    inputRange: [itemOffset - itemHeight, itemOffset, itemOffset + itemHeight],
-    outputRange: [0.5, 1, 0.5]
-  });
 
-  const rotateXValue = useMemo(() => {
-    return Animated.interpolate(offset, {
+  const color = useMemo(() => {
+    return interpolateColors(offset, {
       inputRange: [
-        itemOffset - 2.5 * itemHeight,
+        itemOffset - itemHeight,
         itemOffset,
-        itemOffset + 2.5 * itemHeight
+        itemOffset + itemHeight
       ],
-      outputRange: [-85, 0, -85]
+      outputColorRange: [inactiveColor, activeColor, inactiveColor]
     });
   }, [itemHeight]);
-
-  const rotateX = concat(rotateXValue, 'deg');
-
-  const scale = useMemo(() => {
-    return Animated.interpolate(offset, {
-      inputRange: [
-        itemOffset - 2 * itemHeight,
-        itemOffset,
-        itemOffset + 2 * itemHeight
-      ],
-      // outputRange: [0.8, 1, 0.8], // with scale change
-      outputRange: [1, 1, 1],
-    });
-  }, [itemHeight]);
-
-  const selectItem = useCallback(() => onSelect(index), [index]);
-
+  
   return (
     <AnimatedTouchableOpacity
       activeOpacity={1}
       style={{
-        height: itemHeight,
-        opacity,
-        // @ts-ignore
-        transform: transformOrigin({x: 125, y: 24}, {rotateX})
+        height: itemHeight
       }}
       key={index}
       center
       onPress={selectItem}
       index={index}
     >
-      <AnimatedText text60 style={[textStyle, {transform: [{scale}]}]}>
+      <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
+};