Feat/basic ui

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, Typography, Colors} 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);
+  }, []);
+
+  const activeFont = Typography.text60BO;
+  const inactiveFont = Typography.text60R;
+  const activeTextColor = Colors.primary;
+  const inactiveTextColor = Colors.grey20;
+
   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} activeItemTextStyle={{...activeTextColor, ...activeFont}} inactiveItemTextStyle={{color: inactiveTextColor, ...inactiveFont}} items={_.map(months, i => ({text: i, value: i}))} />
+
         <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

@@ -9,7 +9,8 @@ interface InternalProps extends ItemProps {
     offset: any;
     itemHeight: number;
     textStyle?: TextStyle;
+    activeIndex: number;
     onSelect: (index: number) => void;
 }
-declare const _default: ({ index, text, textStyle, itemHeight, onSelect, offset }: InternalProps) => JSX.Element;
+declare const _default: ({ index, text, textStyle, itemHeight, onSelect, activeIndex }: InternalProps) => JSX.Element;
 export default _default;

generatedTypes/incubator/WheelPicker/index.d.ts

@@ -1,11 +1,27 @@
 /// <reference types="react" />
-import { TextStyle } from 'react-native';
+import { TextStyle, StyleProp } 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;
+    /**
+     * TextStyle for the focused row
+     */
+    activeItemTextStyle?: StyleProp<TextStyle>;
+    /**
+     * TextStyle for other, non-focused rows
+     */
+    inactiveItemTextStyle?: StyleProp<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, activeItemTextStyle, 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 React, {useCallback} from 'react';
+import Animated from 'react-native-reanimated';
 import Text from '../../components/text';
 import TouchableOpacity from '../../components/touchableOpacity';
 import {TextStyle} from 'react-native';
+import {Typography, Colors} from '../../../src/style';
 
 const AnimatedTouchableOpacity = Animated.createAnimatedComponent(
   TouchableOpacity
@@ -20,6 +20,7 @@ interface InternalProps extends ItemProps {
   offset: any;
   itemHeight: number;
   textStyle?: TextStyle;
+  activeIndex: number;
   onSelect: (index: number) => void;
 }
 
@@ -30,56 +31,28 @@ export default ({
   // value,
   itemHeight,
   onSelect,
-  offset
+  activeIndex
 }: InternalProps) => {
-  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, {
-      inputRange: [
-        itemOffset - 2.5 * itemHeight,
-        itemOffset,
-        itemOffset + 2.5 * itemHeight
-      ],
-      outputRange: [-85, 0, -85]
-    });
-  }, [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 isActive = activeIndex === index;
 
   const selectItem = useCallback(() => onSelect(index), [index]);
 
+  const color = isActive ? Colors.primary : Colors.grey20;
+  const font = isActive ? Typography.text60BO : Typography.text60R;
+
   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 text60 style={[{color, ...font}, textStyle]}>
         {text}
       </AnimatedText>
     </AnimatedTouchableOpacity>

src/incubator/WheelPicker/index.tsx

@@ -2,90 +2,164 @@
 // TODO: Support style customization
 // TODO: Support control of visible items
 import _ from 'lodash';
-import React, {useCallback, useRef} from 'react';
-import {TextStyle, FlatList, StyleProp} from 'react-native';
+import React, {useCallback, useRef, useState, useMemo} from 'react';
+import {TextStyle, FlatList, StyleProp, NativeSyntheticEvent, NativeScrollEvent} from 'react-native';
 import Animated from 'react-native-reanimated';
-import {onScrollEvent, useValues} from 'react-native-redash';
-
+import {useValues} from 'react-native-redash';
+import {Colors} from '../../../src/style';
 import View from '../../components/view';
+import Fader, {FaderPosition} from '../../components/fader';
 import {Constants} from '../../helpers';
 
 import Item, {ItemProps} from './Item';
 
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
 
 export interface WheelPickerProps {
+  /**
+   * Data source for WheelPicker
+   */
   items?: ItemProps[];
+  /**
+   * Describe the height of each item in the WheelPicker
+   */
   itemHeight?: number;
-  itemTextStyle?: StyleProp<TextStyle>;
-  onChange: (item: ItemProps, index: number) => void;
+  /**
+   * TextStyle for the focused row
+   */
+  activeItemTextStyle?: StyleProp<TextStyle>;
+  /**
+   * TextStyle for other, non-focused rows
+   */
+  inactiveItemTextStyle?: StyleProp<TextStyle>;
+  /**
+   * Event, on active row change
+   */
+  onChange: (index: number, item?: ItemProps) => void;
 }
 
-const WheelPicker = ({items, itemHeight = 48, itemTextStyle}: WheelPickerProps) => {
-  const height = itemHeight * 4;
-  const scrollview = useRef<Animated.ScrollView>();
+type WrappedItem = {
+  isActive: boolean;
+} & ItemProps;
+
+const WheelPicker = ({items, itemHeight = 48, activeItemTextStyle, inactiveItemTextStyle, onChange: onChangeEvent}: WheelPickerProps) => {
+  const height = itemHeight * 5;
+  const scrollView = useRef<Animated.ScrollView>();
   const [offset] = useValues([0], []);
-  const onScroll = onScrollEvent({y: offset});
+  const activeIndex = useRef<number>(0);
+
+  const wrapItems = (items?: ItemProps[]): WrappedItem[] => {
+    return _.map(items, (item, index: number) => {
+      return {...item, isActive: activeIndex.current === index};
+    });
+  };
+
+  const [itemsWrap, setItemWrapped] = useState<WrappedItem[]>(wrapItems(items));
+
+  const updateItems = () => {
+    setItemWrapped(wrapItems(items));
+  };
 
   const selectItem = useCallback(
     index => {
-      if (scrollview.current) {
-        scrollview.current.getNode().scrollTo({y: index * itemHeight, animated: true});
+      if (scrollView.current?.getNode()) {
+        //@ts-ignore for some reason scrollToOffset not recognized
+        scrollView.current.getNode().scrollToOffset({offset: index * itemHeight, animated: true});
       }
     },
     [itemHeight]
   );
 
   const onChange = useCallback(() => {
-    // TODO: need to implement on change event that calc the current selected index
-  }, [itemHeight]);
+    onChangeEvent(activeIndex.current, items?.[activeIndex.current]);
+  }, []);
+
+  const valueInRange = (value: number, min: number, max: number): number => {
+    if (value < min || value === -0) {
+      return min;
+    }
+    if (value > max) {
+      return max;
+    }
+    return value;
+  };
+
+  const calculateCurrentIndex = (offset: number): number => {
+    const calculatedIndex = Math.round(offset / itemHeight);
+    return valueInRange(calculatedIndex, 0, items!.length - 1);
+  };
+
+  const onScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const currentIndex = calculateCurrentIndex(event.nativeEvent.contentOffset.y);
+    if (activeIndex.current != currentIndex) {
+      activeIndex.current = currentIndex;
+      updateItems();
+    }
+  }, []);
 
   const renderItem = useCallback(({item, index}) => {
     return (
       <Item
         index={index}
+        activeIndex={activeIndex.current}
         itemHeight={itemHeight}
         offset={offset}
-        textStyle={itemTextStyle}
+        textStyle={index === activeIndex.current ? activeItemTextStyle : inactiveItemTextStyle}
         {...item}
         onSelect={selectItem}
       />
     );
   }, []);
 
+  const renderFader = useMemo(
+    () => (position: FaderPosition) => {
+      return <Fader visible position={position} size={60} />;
+    },
+    []
+  );
+
+  const renderSeparators = useMemo(() => {
+    return (
+      <View absF centerV pointerEvents="none">
+        <View
+          style={{
+            borderTopWidth: 1,
+            borderBottomWidth: 1,
+            height: itemHeight,
+            borderColor: Colors.grey50
+          }}
+        />
+      </View>
+    );
+  }, []);
+
   return (
     <View>
       <View width={250} height={height} br20>
         <AnimatedFlatList
-          data={items}
+          data={itemsWrap}
           keyExtractor={keyExtractor}
-          scrollEventThrottle={16}
+          scrollEventThrottle={100}
           onScroll={onScroll}
           onMomentumScrollEnd={onChange}
           showsVerticalScrollIndicator={false}
           // @ts-ignore
-          ref={scrollview}
+          ref={scrollView}
           contentContainerStyle={{
             paddingVertical: height / 2 - itemHeight / 2
           }}
           snapToInterval={itemHeight}
           decelerationRate={Constants.isAndroid ? 0.98 : 'normal'}
           renderItem={renderItem}
         />
-        <View absF centerV pointerEvents="none">
-          <View
-            style={{
-              borderTopWidth: 1,
-              borderBottomWidth: 1,
-              height: itemHeight
-            }}
-          />
-        </View>
+        {renderFader(FaderPosition.BOTTOM)}
+        {renderFader(FaderPosition.TOP)}
+        {renderSeparators}
       </View>
     </View>
   );
 };
 
-const keyExtractor = (item: ItemProps) => item.value;
+const keyExtractor = (item: WrappedItem) => `${item.value}-${item.isActive}`;
 
 export default WheelPicker;