WheelPicker - generic value (#2959)

* WheelPicker - item's value to generic type

* WheelPickerItem - replace asBaseComponent with useThemeProps hook, move memo to the export

* initialNumber type - remove ItemProps

* fix usages

* clean imports

* removing default type (number) and renaming ItemProps `WheelPickerItemProps`

* remove casting

* add WheelPickerItemValue type

* export as type

* remove useComponentDriver generic types

* removing generic from ComponentDriver

Author: Inbal-Tish

demo/src/screens/componentScreens/SectionsWheelPickerScreen.tsx

@@ -74,7 +74,7 @@ const SectionsWheelPickerScreen = () => {
     setSelectedMinutes(0);
   }, []);
 
-  const sections: WheelPickerProps[] = useMemo(() => {
+  const sections: WheelPickerProps<string | number>[] = useMemo(() => {
     return [
       {
         items: getItems(DAYS),

src/components/WheelPicker/Item.tsx

@@ -1,23 +1,23 @@
 import React, {useCallback, useMemo, memo, useRef} from 'react';
 import {TextStyle, StyleSheet} from 'react-native';
 import Animated, {interpolateColor, useAnimatedStyle} from 'react-native-reanimated';
-import Text, {TextProps} from '../../components/text';
-import TouchableOpacity from '../../components/touchableOpacity';
-import {Colors, Spacings} from '../../../src/style';
-import {asBaseComponent} from '../../commons/new';
-import {WheelPickerAlign} from './types';
+import {Colors, Spacings} from '../../style';
+import {useThemeProps} from '../../hooks';
+import Text, {TextProps} from '../text';
+import TouchableOpacity from '../touchableOpacity';
+import {WheelPickerAlign, WheelPickerItemValue} from './types';
 
 const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity);
 const AnimatedText = Animated.createAnimatedComponent(Text);
 
-export interface ItemProps {
+export interface WheelPickerItemProps<T = WheelPickerItemValue> {
   label: string;
-  value: string | number;
+  value: T;
   align?: WheelPickerAlign;
   disableRTL?: boolean;
 }
 
-interface InternalProps extends ItemProps {
+interface InternalProps<T> extends WheelPickerItemProps<T> {
   index: number;
   offset: Animated.SharedValue<number>;
   itemHeight: number;
@@ -32,23 +32,26 @@ interface InternalProps extends ItemProps {
   testID?: string;
 }
 
-const WheelPickerItem = memo(({
-  index,
-  label,
-  fakeLabel,
-  fakeLabelStyle,
-  fakeLabelProps,
-  itemHeight,
-  onSelect,
-  offset,
-  activeColor = Colors.$textPrimary,
-  inactiveColor = Colors.$textNeutralHeavy,
-  style,
-  testID,
-  centerH = true,
-  align,
-  disableRTL
-}: InternalProps) => {
+const WheelPickerItem = <T extends WheelPickerItemValue = number>(props: InternalProps<T>) => {
+  const themeProps = useThemeProps(props, 'WheelPickerItem');
+  const {
+    index,
+    label,
+    fakeLabel,
+    fakeLabelStyle,
+    fakeLabelProps,
+    itemHeight,
+    onSelect,
+    offset,
+    activeColor = Colors.$textPrimary,
+    inactiveColor = Colors.$textNeutralHeavy,
+    style,
+    testID,
+    centerH = true,
+    align,
+    disableRTL
+  } = themeProps;
+  
   const selectItem = useCallback(() => onSelect(index), [index]);
   const itemOffset = index * itemHeight;
   const _activeColor = useRef(activeColor.toString());
@@ -99,9 +102,9 @@ const WheelPickerItem = memo(({
       )}
     </AnimatedTouchableOpacity>
   );
-});
+};
 
-export default asBaseComponent<InternalProps>(WheelPickerItem);
+export default memo(WheelPickerItem);
 
 const styles = StyleSheet.create({
   container: {

src/components/WheelPicker/__tests__/usePresenter.spec.js

@@ -2,6 +2,8 @@ import usePresenter from '../usePresenter';
 import {renderHook} from '@testing-library/react-hooks';
 
 describe('WheelPicker presenter tests', () => {
+  jest.spyOn(global.console, 'warn');
+
   const makeSUT = ({items = makeItems(9), children, initialValue, itemHeight = 10, preferredNumVisibleRows = 20}) => {
     return renderHook(() =>
       usePresenter({
@@ -69,6 +71,7 @@ describe('WheelPicker presenter tests', () => {
   it('Expect to find items by their object of {value, label} types', () => {
     const {result} = makeSUT({items: makeItems(15, 'b'), initialValue: {value: 'b6', label: 'abc'}});
     expect(result.current.index).toEqual(6);
+    expect(console.warn).toHaveBeenCalledWith('UILib WheelPicker will stop supporting initialValue prop type as an object (ItemProps). Please pass string or number only');
   });
 
   it('Expect getRowItemAtOffset to return the right row for offset', () => {

src/components/WheelPicker/index.tsx

@@ -12,28 +12,28 @@ import {
 } from 'react-native';
 import Animated, {useSharedValue, useAnimatedScrollHandler} from 'react-native-reanimated';
 import {FlatList} from 'react-native-gesture-handler';
-import {Colors, Spacings} from 'style';
-import {Constants, asBaseComponent} from '../../commons/new';
-import View from '../../components/view';
-import Fader, {FaderPosition, FaderProps} from '../../components/fader';
-import Item, {ItemProps} from './Item';
-import Text, {TextProps} from '../../components/text';
+import {Colors, Spacings} from '../../style';
+import {Constants} from '../../commons/new';
+import {useThemeProps} from '../../hooks';
+import View from '../view';
+import Text, {TextProps} from '../text';
+import Fader, {FaderPosition, FaderProps} from '../fader';
+import Item, {WheelPickerItemProps} from './Item';
 import usePresenter from './usePresenter';
-import {WheelPickerAlign} from './types';
-export {WheelPickerAlign};
+import {WheelPickerAlign, WheelPickerItemValue} from './types';
+export type {WheelPickerAlign, WheelPickerItemValue};
 
-const AnimatedFlatList = Animated.createAnimatedComponent<FlatListProps<ItemProps>>(FlatList);
 export const ITEM_HEIGHT = 44;
 
-export interface WheelPickerProps {
+export type WheelPickerProps<T = WheelPickerItemValue> = {
   /**
    * Initial value
    */
-  initialValue?: ItemProps | number | string;
+  initialValue?: T;
   /**
    * Data source for WheelPicker
    */
-  items?: ItemProps[];
+  items?: WheelPickerItemProps<T>[];
   /**
    * Describe the height of each item in the WheelPicker
    * default value: 44
@@ -71,7 +71,7 @@ export interface WheelPickerProps {
   /**
    * Event, on active row change
    */
-  onChange?: (item: string | number, index: number) => void;
+  onChange?: (item: T, index: number) => void;
   /**
    * Container's ViewStyle, height is computed according to itemHeight * numberOfVisibleRows
    */
@@ -97,30 +97,35 @@ export interface WheelPickerProps {
   /**
    * Props to be sent to the FlatList
    */
-  flatListProps?: Partial<FlatListProps<ItemProps>>;
+  flatListProps?: Partial<FlatListProps<WheelPickerItemProps<T>>>;
 }
 
-const WheelPicker = ({
-  items: propItems,
-  itemHeight = ITEM_HEIGHT,
-  numberOfVisibleRows = 5,
-  activeTextColor = Colors.$textPrimary,
-  inactiveTextColor,
-  textStyle,
-  label,
-  labelStyle,
-  labelProps,
-  onChange,
-  align = WheelPickerAlign.CENTER,
-  disableRTL,
-  style,
-  children,
-  initialValue = 0,
-  separatorsStyle,
-  testID,
-  faderProps,
-  flatListProps
-}: WheelPickerProps) => {
+const WheelPicker = <T extends WheelPickerItemValue>(props: WheelPickerProps<T>) => {
+  const AnimatedFlatList = 
+    useMemo(() => Animated.createAnimatedComponent<FlatListProps<WheelPickerItemProps<T>>>(FlatList), []);
+  const themeProps = useThemeProps(props, 'WheelPicker');
+
+  const {
+    items: propItems,
+    itemHeight = ITEM_HEIGHT,
+    numberOfVisibleRows = 5,
+    activeTextColor = Colors.$textPrimary,
+    inactiveTextColor,
+    textStyle,
+    label,
+    labelStyle,
+    labelProps,
+    onChange,
+    align = WheelPickerAlign.CENTER,
+    disableRTL,
+    style,
+    children,
+    initialValue,
+    separatorsStyle,
+    testID,
+    faderProps,
+    flatListProps
+  } = themeProps;
   const scrollView = useRef<Animated.ScrollView>();
   const offset = useSharedValue(0);
   const scrollHandler = useAnimatedScrollHandler(e => {
@@ -133,7 +138,7 @@ const WheelPicker = ({
   const {
     height,
     items,
-    index: currentIndex,
+    index: currentIndex = 0,
     getRowItemAtOffset
   } = usePresenter({
     initialValue,
@@ -146,7 +151,7 @@ const WheelPicker = ({
   const prevInitialValue = useRef(initialValue);
   const prevIndex = useRef(currentIndex);
   const [flatListWidth, setFlatListWidth] = useState(0);
-  const keyExtractor = useCallback((item: ItemProps, index: number) => `${item}.${index}`, []);
+  const keyExtractor = useCallback((item: WheelPickerItemProps<T>, index: number) => `${item}.${index}`, []);
   const androidFlatListProps = useMemo(() => {
     if (Constants.isAndroid) {
       return {
@@ -156,7 +161,7 @@ const WheelPicker = ({
   }, [items]);
 
   useEffect(() => {
-    //This effect should replace the onLyout function in the flatlist, should happen only once
+    // This effect should replace the onLayout function in the FlatList, should happen only once
     scrollToIndex(currentIndex, true);
   }, []);
 
@@ -165,7 +170,7 @@ const WheelPicker = ({
     !isUndefined(initialValue) && scrollToIndex(currentIndex, true);
   }, [currentIndex]);
 
-  const _onChange = useCallback((value: string | number, index: number) => {
+  const _onChange = useCallback((value: T, index: number) => {
     if (prevInitialValue.current !== initialValue) {
       // don't invoke 'onChange' if 'initialValue' changed
       prevInitialValue.current = initialValue;
@@ -176,7 +181,7 @@ const WheelPicker = ({
   [initialValue, onChange]);
 
   const onValueChange = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const {index, value} = getRowItemAtOffset(event.nativeEvent.contentOffset.y);
+    const {value, index} = getRowItemAtOffset(event.nativeEvent.contentOffset.y);
     _onChange(value, index);
   },
   [_onChange, getRowItemAtOffset]);
@@ -224,7 +229,7 @@ const WheelPicker = ({
     return {...labelMargins, ...labelProps};
   }, [labelMargins, labelProps]);
 
-  const renderItem = useCallback(({item, index}: ListRenderItemInfo<ItemProps>) => {
+  const renderItem = useCallback(({item, index}: ListRenderItemInfo<WheelPickerItemProps<T>>) => {
     return (
       <Item
         index={index}
@@ -378,8 +383,8 @@ const WheelPicker = ({
 };
 
 WheelPicker.alignments = WheelPickerAlign;
-export default asBaseComponent<WheelPickerProps, typeof WheelPicker>(WheelPicker);
-export {ItemProps as WheelPickerItemProps};
+export default WheelPicker;
+export {WheelPickerItemProps};
 
 const styles = StyleSheet.create({
   separators: {

src/components/WheelPicker/types.ts

@@ -3,3 +3,5 @@ export enum WheelPickerAlign {
   RIGHT = 'right',
   LEFT = 'left'
 }
+
+export type WheelPickerItemValue = number | string;

src/components/WheelPicker/usePresenter.ts

@@ -1,59 +1,57 @@
 import _ from 'lodash';
 import React from 'react';
-import {ItemProps} from './Item';
+import {LogService} from '../../services';
 import useMiddleIndex from './helpers/useListMiddleIndex';
+import {WheelPickerItemValue} from './types';
+import {WheelPickerItemProps} from './Item';
 
-export type ItemValueTypes = ItemProps | number | string;
+//TODO: deprecate this type
 
-type PropTypes = {
-  initialValue?: ItemValueTypes;
+type PropTypes<T> = {
+  initialValue?: T;
   children?: JSX.Element | JSX.Element[];
-  items?: ItemProps[];
+  items?: WheelPickerItemProps<T>[];
   itemHeight: number;
   preferredNumVisibleRows: number;
 };
 
-type RowItem = {
-  value: string | number;
+type RowItem<T> = {
+  value: T;
   index: number;
 };
 
-interface Presenter {
-  items: ItemProps[];
-  index: number;
-  height: number;
-  getRowItemAtOffset: (offset: number) => RowItem;
-}
-
-const usePresenter = ({
-  initialValue = 0,
+const usePresenter = <T extends WheelPickerItemValue>({
+  initialValue,
   children,
   items: propItems,
   itemHeight,
   preferredNumVisibleRows
-}: PropTypes): Presenter => {
-  const extractItemsFromChildren = (): ItemProps[] => {
+}: PropTypes<T>) => {
+
+  const extractItemsFromChildren = (): WheelPickerItemProps<T>[] => {
     const items = React.Children.map(children, child => {
-      const childAsType: ItemProps = {value: child?.props.value, label: child?.props.label};
+      const childAsType: WheelPickerItemProps<T> = {value: child?.props.value, label: child?.props.label};
       return childAsType;
     });
     return items || [];
   };
-
   const items = children ? extractItemsFromChildren() : propItems || [];
   const middleIndex = useMiddleIndex({itemHeight, listSize: items.length});
 
   const getSelectedValueIndex = () => {
-    if (_.isString(initialValue) || _.isNumber(initialValue)) {
-      return _.findIndex(items, {value: initialValue});
+    if (_.isObject(initialValue)) {
+      LogService.warn('UILib WheelPicker will stop supporting initialValue prop type as an object (ItemProps). Please pass string or number only');
+      //@ts-expect-error
+      return _.findIndex(items, {value: initialValue?.value});
+    } else {
+      return initialValue && _.findIndex(items, (item) => item.value === initialValue);
     }
-    return _.findIndex(items, {value: initialValue?.value});
   };
 
-  const getRowItemAtOffset = (offset: number): RowItem => {
+  const getRowItemAtOffset = (offset: number): RowItem<T> => {
     const index = middleIndex(offset);
     const value = items[index].value;
-    return {index, value};
+    return {value, index};
   };
 
   return {

src/components/sectionsWheelPicker/SectionsWheelPicker.driver.tsx

@@ -1,11 +1,12 @@
 import _ from 'lodash';
 import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
 import {WheelPickerDriver} from '../WheelPicker/WheelPicker.driver';
+import {WheelPickerItemValue} from '../WheelPicker';
 import {SectionsWheelPickerProps} from './index';
 
-export const SectionsWheelPickerDriver = (props: ComponentProps) => {
+export const SectionsWheelPickerDriver = <T extends WheelPickerItemValue>(props: ComponentProps) => {
   const driver = useComponentDriver(props);
-  const sections = driver.getElement().children as SectionsWheelPickerProps;
+  const sections = driver.getElement().children as SectionsWheelPickerProps<T>;
   const sectionsDrivers = _.map(sections, (_, index) => {
     const sectionTestID = `${props.testID}.${index}`;
     return WheelPickerDriver({