Keep working on WheelPicker (incubator)

Author: ethanshar

demo/src/screens/MenuStructure.js

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

demo/src/screens/incubatorScreens/WheelPickerScreen.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {View, Text, Incubator} from 'react-native-ui-lib';
+import _ from 'lodash';
+
+const items = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December'
+];
+
+export default () => {
+  return (
+    <View flex padding-page>
+      <Text h1>Wheel Picker</Text>
+      <View flex centerH paddingT-page>
+        <Incubator.WheelPicker
+          items={_.map(items, (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)
+  );
 }

src/incubator/WheelPicker/Item.tsx

@@ -0,0 +1,85 @@
+import React, {useCallback, useMemo} from 'react';
+import Animated, {concat} from 'react-native-reanimated';
+import {transformOrigin} from 'react-native-redash';
+import Text from '../../components/text';
+import TouchableOpacity from '../../components/touchableOpacity';
+import {TextStyle} from 'react-native';
+
+const AnimatedTouchableOpacity = Animated.createAnimatedComponent(
+  TouchableOpacity
+);
+const AnimatedText = Animated.createAnimatedComponent(Text);
+
+export interface ItemProps {
+  text: string;
+  value: string | number;
+  onSelect: (index: number) => void;
+}
+
+interface InternalProps extends ItemProps {
+  index: number;
+  offset: any;
+  itemHeight: number;
+  textStyle?: TextStyle;
+}
+
+export default ({
+  index,
+  text,
+  textStyle,
+  value,
+  itemHeight,
+  onSelect,
+  offset
+}: 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]
+    });
+  }, [itemHeight]);
+
+  const selectItem = useCallback(() => onSelect(index), [index]);
+
+  return (
+    <AnimatedTouchableOpacity
+      activeOpacity={1}
+      style={{
+        height: itemHeight,
+        opacity,
+        transform: transformOrigin({x: 125, y: 24}, {rotateX})
+      }}
+      key={index}
+      center
+      onPress={selectItem}
+      index={index}
+    >
+      <AnimatedText text60 style={[textStyle, {transform: [{scale}]}]}>
+        {text}
+      </AnimatedText>
+    </AnimatedTouchableOpacity>
+  );
+};

src/incubator/WheelPicker/index.js

@@ -0,0 +1,89 @@
+// TODO: Support onChange callback
+// TODO: Support style customization
+// TODO: Support control of visible items
+import _ from 'lodash';
+import React, {useCallback, useRef} from 'react';
+import {TextStyle} from 'react-native';
+import Animated from 'react-native-reanimated';
+import {onScrollEvent, useValues} from 'react-native-redash';
+
+import View from '../../components/view';
+import {Constants} from '../../helpers';
+
+import Item, {ItemProps} from './Item';
+
+export interface WheelPickerProps {
+  items?: ItemProps[];
+  itemHeight?: number;
+  itemTextStyle?: TextStyle;
+  onChange: (item: ItemProps, index: number) => void;
+}
+
+const WheelPicker = ({
+  items,
+  itemHeight = 48,
+  itemTextStyle
+}: WheelPickerProps) => {
+  const height = itemHeight * 4;
+  const scrollview = useRef();
+  const [offset] = useValues([0], []);
+  const onScroll = onScrollEvent({y: offset});
+
+  const selectItem = useCallback(
+    (index) => {
+      scrollview.current
+        .getNode()
+        .scrollTo({y: index * itemHeight, animated: true});
+    },
+    [itemHeight]
+  );
+
+  const onChange = useCallback(() => {
+    // TODO: need to implement on change event that calc the current selected index 
+
+  }, [itemHeight]);
+
+  return (
+    <View>
+      <View width={250} height={height} br20>
+        <Animated.ScrollView
+          scrollEventThrottle={16}
+          onScroll={onScroll}
+          onMomentumScrollEnd={onChange}
+          showsVerticalScrollIndicator={false}
+          ref={scrollview}
+          contentContainerStyle={{
+            paddingVertical: height / 2 - itemHeight / 2
+          }}
+          snapToInterval={itemHeight}
+          decelerationRate={Constants.isAndroid ? 0.98 : 'normal'}
+        >
+          {_.map(items, (item, index) => {
+            return (
+              <Item
+                key={item.value}
+                index={index}
+                itemHeight={itemHeight}
+                onSelect={selectItem}
+                offset={offset}
+                textStyle={itemTextStyle}
+                {...item}
+              />
+            );
+          })}
+        </Animated.ScrollView>
+        <View absF centerV pointerEvents="none">
+          <View
+            style={{
+              borderTopWidth: 1,
+              borderBottomWidth: 1,
+              height: itemHeight
+            }}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default WheelPicker;