WheelPicker (incubator) - fix updates (#1693)

* WheelPicker (incubator) - allow 'item' change; block 'onChange' call when 'initialValue' changes

* organize code

Author: Inbal-Tish

src/incubator/WheelPicker/index.tsx

@@ -3,14 +3,14 @@ import {isFunction, isUndefined} from 'lodash';
 import React, {useCallback, useRef, useMemo, useEffect, useState} from 'react';
 import {TextStyle, ViewStyle, FlatList, NativeSyntheticEvent, NativeScrollEvent, StyleSheet} from 'react-native';
 import Animated, {useSharedValue, useAnimatedScrollHandler} from 'react-native-reanimated';
+import {Constants} from 'helpers';
 import {Colors, Spacings} from 'style';
+import {asBaseComponent} from '../../commons/new';
 import View from '../../components/view';
 import Fader, {FaderPosition} from '../../components/fader';
-import {Constants} from 'helpers';
 import Item, {ItemProps} from './Item';
-import usePresenter from './usePresenter';
 import Text, {TextProps} from '../../components/text';
-import {asBaseComponent} from '../../commons/new';
+import usePresenter from './usePresenter';
 
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
 
@@ -125,26 +125,46 @@ const WheelPicker = ({
     preferredNumVisibleRows: numberOfVisibleRows
   });
 
+  const prevInitialValue = useRef(initialValue);
   const prevIndex = useRef(currentIndex);
   const [scrollOffset, setScrollOffset] = useState(currentIndex * itemHeight);
   const [flatListWidth, setFlatListWidth] = useState(0);
   const keyExtractor = useCallback((item: ItemProps, index: number) => `${item}.${index}`, []);
 
-  /* This effect enforce the index to be controlled by selectedValue passed by the user */
   useEffect(() => {
+    // This effect enforce the index to be controlled by selectedValue passed by the user
     if (shouldControlComponent(scrollOffset)) {
       scrollToIndex(currentIndex, true);
     }
   });
 
-  /* This effect making sure to reset index if initialValue has changed */
   useEffect(() => {
+    // This effect making sure to reset index if initialValue has changed
     !isUndefined(initialValue) && scrollToIndex(currentIndex, true);
   }, [currentIndex]);
 
-  const scrollToPassedIndex = useCallback(() => {
-    scrollToIndex(currentIndex, false);
-  }, []);
+  const _onChange = useCallback((value: string | number, index: number) => {
+    if (prevInitialValue.current !== initialValue) {
+      // don't invoke 'onChange' if 'initialValue' changed
+      prevInitialValue.current = initialValue;
+    } else {
+      onChange?.(value, index);
+    }
+  }, [initialValue, onChange]);
+
+  const onValueChange = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    setScrollOffset(event.nativeEvent.contentOffset.y);
+    const {index, value} = getRowItemAtOffset(event.nativeEvent.contentOffset.y);
+    _onChange(value, index);
+  }, [_onChange, getRowItemAtOffset]);
+
+  const onMomentumScrollEndAndroid = (index: number) => {
+    // handle Android bug: ScrollView does not call 'onMomentumScrollEnd' when scrolled programmatically (https://github.com/facebook/react-native/issues/26661)
+    if (Constants.isAndroid && prevIndex.current !== index) {
+      prevIndex.current = index;
+      _onChange(items?.[index]?.value, index);
+    }
+  };
 
   const scrollToOffset = (index: number, animated: boolean) => {
     // TODO: we should remove this split (the getNode section) in V6 and remove support for reanimated 1
@@ -159,35 +179,17 @@ const WheelPicker = ({
   };
 
   const scrollToIndex = (index: number, animated: boolean) => {
-    // this is done to handle onMomentumScrollEnd not being called in Android:
-    // https://github.com/facebook/react-native/issues/26661
-    if (Constants.isAndroid && prevIndex.current !== index) {
-      prevIndex.current = index;
-      onChange?.(items?.[index]?.value, index);
-    }
+    onMomentumScrollEndAndroid(index);
     setTimeout(() => scrollToOffset(index, animated), 100);
   };
 
+  const scrollToPassedIndex = useCallback(() => {
+    scrollToIndex(currentIndex, false);
+  }, []);
+
   const selectItem = useCallback(index => {
     scrollToIndex(index, true);
-  },
-  [itemHeight]);
-
-  const onValueChange = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    setScrollOffset(event.nativeEvent.contentOffset.y);
-
-    const {index, value} = getRowItemAtOffset(event.nativeEvent.contentOffset.y);
-    onChange?.(value, index);
-  },
-  [onChange]);
-
-  const alignmentStyle = useMemo(() => {
-    return align === WheelPickerAlign.RIGHT
-      ? {alignSelf: undefined}
-      : align === WheelPickerAlign.LEFT
-        ? {alignSelf: 'flex-start'}
-        : {alignSelf: 'center'};
-  }, [align]);
+  }, [itemHeight]);
 
   const renderItem = useCallback(({item, index}) => {
     return (
@@ -207,17 +209,33 @@ const WheelPicker = ({
         testID={`${testID}.item_${index}`}
       />
     );
-  },
-  [itemHeight]);
+  }, [itemHeight]);
 
-  const separators = useMemo(() => {
-    return (
-      <View absF centerV pointerEvents="none">
-        <View style={styles.separators}/>
-      </View>
-    );
+  const getItemLayout = useCallback((_data, index: number) => {
+    return {length: itemHeight, offset: itemHeight * index, index};
+  }, [itemHeight]);
+
+  const updateFlatListWidth = useCallback((width: number) => {
+    setFlatListWidth(width);
   }, []);
 
+  const alignmentStyle = useMemo(() => {
+    return align === WheelPickerAlign.RIGHT
+      ? {alignSelf: undefined}
+      : align === WheelPickerAlign.LEFT
+        ? {alignSelf: 'flex-start'}
+        : {alignSelf: 'center'};
+  }, [align]);
+
+  const contentContainerStyle = useMemo(() => {
+    return [
+      {
+        paddingVertical: height / 2 - itemHeight / 2
+      },
+      alignmentStyle
+    ];
+  }, [height, itemHeight, alignmentStyle]);
+
   const labelContainerStyle = useMemo(() => {
     return [{position: 'absolute', top: 0, bottom: 0}, alignmentStyle];
   }, [alignmentStyle]);
@@ -237,26 +255,15 @@ const WheelPicker = ({
 
   const fader = useMemo(() => (position: FaderPosition) => {
     return <Fader visible position={position} size={60}/>;
-  },
-  []);
-
-  const getItemLayout = useCallback((_data, index: number) => {
-    return {length: itemHeight, offset: itemHeight * index, index};
-  },
-  [itemHeight]);
-
-  const updateFlatListWidth = useCallback((width: number) => {
-    setFlatListWidth(width);
   }, []);
 
-  const contentContainerStyle = useMemo(() => {
-    return [
-      {
-        paddingVertical: height / 2 - itemHeight / 2
-      },
-      alignmentStyle
-    ];
-  }, [height, itemHeight, alignmentStyle]);
+  const separators = useMemo(() => {
+    return (
+      <View absF centerV pointerEvents="none">
+        <View style={styles.separators}/>
+      </View>
+    );
+  }, []);
 
   return (
     <View testID={testID} bg-white style={style}>

src/incubator/WheelPicker/usePresenter.ts

@@ -1,5 +1,5 @@
-import React, {useRef} from 'react';
 import _ from 'lodash';
+import React from 'react';
 import {ItemProps} from './Item';
 import useMiddleIndex from './helpers/useListMiddleIndex';
 
@@ -44,7 +44,7 @@ const usePresenter = ({
     return items || [];
   };
 
-  const items = useRef<ItemProps[]>(children ? extractItemsFromChildren() : propItems!).current;
+  const items = children ? extractItemsFromChildren() : propItems || [];
   const middleIndex = useMiddleIndex({itemHeight, listSize: items.length});
 
   const getSelectedValueIndex = () => {