setitem height, number of visible rows as defaults (#2916)

* setitem height, number of visible rows as defaults

* fiexed small issues

* added test for default item height and number of visible rows values

* revert the defaults

* moved the defaults test to be first

Author: adids1221

src/components/WheelPicker/WheelPicker.driver.tsx

@@ -1,5 +1,5 @@
 import {FlatListProps} from 'react-native';
-import {WheelPickerProps, WheelPickerItemProps} from './index';
+import {WheelPickerProps, WheelPickerItemProps, ITEM_HEIGHT} from './index';
 import {useComponentDriver, ComponentProps} from '../../testkit/new/Component.driver';
 import {useScrollableDriver} from '../../testkit/new/useScrollable.driver';
 import {TextDriver} from '../../components/Text/Text.driver.new';
@@ -11,10 +11,12 @@ export const WheelPickerDriver = (props: ComponentProps) => {
     renderTree: props.renderTree,
     testID: `${props.testID}.list`
   }));
-  
-  const moveToItem = (index: number, numberOfRows: number, itemHeight: number) => {
+
+  const itemsLength = listDriver.getProps().data?.length ?? 0;
+
+  const moveToItem = (index: number, itemHeight: number = ITEM_HEIGHT, numberOfRows: number = itemsLength) => {
     listDriver.triggerEvent('onMomentumScrollEnd', {
-      contentOffset: {x: 0, y: itemHeight * index}, 
+      contentOffset: {x: 0, y: itemHeight * index},
       contentSize: {height: numberOfRows * itemHeight, width: 400},
       layoutMeasurement: {height: 100, width: 400}
     });

src/components/WheelPicker/__tests__/index.spec.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React from 'react';
-import {render/* , act, waitFor */} from '@testing-library/react-native';
+import {render /* , act, waitFor */} from '@testing-library/react-native';
 import {Colors} from '../../../style';
 import WheelPicker from '../index';
 import {WheelPickerDriver} from '../WheelPicker.driver';
@@ -39,14 +39,26 @@ describe('WheelPicker', () => {
       expect(driver.getListHeight()).toBe(NUM_OF_ROWS * ITEM_HEIGHT);
     });
 
+    it('should call onChange after scrolling ends with default itemHeight and numberOfRows', () => {
+      const props = {itemHeight: undefined, numberOfVisibleRows: undefined};
+      const renderTree = render(<TestCase {...props}/>);
+      const driver = WheelPickerDriver({renderTree, testID});
+
+      driver.moveToItem(4);
+      expect(onChange).toHaveBeenCalledWith(4, 4);
+
+      driver.moveToItem(7);
+      expect(onChange).toHaveBeenCalledWith(7, 7);
+    });
+
     it('should call onChange after scrolling ends', () => {
       const renderTree = render(<TestCase/>);
       const driver = WheelPickerDriver({renderTree, testID});
 
-      driver.moveToItem(4, NUM_OF_ROWS, ITEM_HEIGHT);
+      driver.moveToItem(4, ITEM_HEIGHT);
       expect(onChange).toHaveBeenCalledWith(4, 4);
 
-      driver.moveToItem(7, NUM_OF_ROWS, ITEM_HEIGHT);
+      driver.moveToItem(7, ITEM_HEIGHT);
       expect(onChange).toHaveBeenCalledWith(7, 7);
     });
   });
@@ -88,7 +100,7 @@ describe('WheelPicker', () => {
     //   const renderTree = render(<TestCase/>);
     //   const index = 1;
     //   const driver = WheelPickerItemDriver({renderTree, testID: `${index}`});
-      
+
     //   driver.press();
 
     //   expect(await onChange).toHaveBeenCalledTimes(1);
@@ -99,7 +111,7 @@ describe('WheelPicker', () => {
     //   const renderTree = render(<TestCase/>);
     //   const index = 0;
     //   const driver = WheelPickerItemDriver({renderTree, testID: `${index}`});
-      
+
     //   driver.press();
 
     //   expect(onChange).not.toHaveBeenCalledTimes(1);

src/components/WheelPicker/index.tsx

@@ -23,6 +23,7 @@ import {WheelPickerAlign} from './types';
 export {WheelPickerAlign};
 
 const AnimatedFlatList = Animated.createAnimatedComponent<FlatListProps<ItemProps>>(FlatList);
+export const ITEM_HEIGHT = 44;
 
 export interface WheelPickerProps {
   /**
@@ -101,7 +102,7 @@ export interface WheelPickerProps {
 
 const WheelPicker = ({
   items: propItems,
-  itemHeight = 44,
+  itemHeight = ITEM_HEIGHT,
   numberOfVisibleRows = 5,
   activeTextColor = Colors.$textPrimary,
   inactiveTextColor,