Add support to initialValue in WheelPicker (#1436)

* Add support to initialValue in WheelPicker

* Fix typings stuff in WheelPicker screen

* Remove reset button in example scren

* Remove redundant type conversion

Author: ethanshar

demo/src/configurations.js

@@ -22,7 +22,8 @@ Typography.loadTypographies({
   h1: {...Typography.text40},
   h2: {...Typography.text50},
   h3: {...Typography.text60},
-  body: Typography.text70
+  body: Typography.text70,
+  bodySmall: Typography.text80
 });
 
 Spacings.loadSpacings({

demo/src/screens/incubatorScreens/WheelPickerScreen.tsx

@@ -1,9 +1,10 @@
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {useCallback, useState} from 'react';
 import {View, Text, Incubator, Colors, Typography, Button, Dialog} from 'react-native-ui-lib';
 import _ from 'lodash';
 
-// Months
-const months = [
+type WheelPickerValue = Incubator.WheelPickerProps['initialValue'];
+
+const monthItems = _.map([
   'January',
   'February',
   'March',
@@ -16,17 +17,18 @@ const months = [
   'October',
   'November',
   'December'
-];
-
-// Years
-const years = _.times(2020, i => i);
+],
+item => ({label: item, value: item}));
 
-const days = _.times(365, i => i + 1);
+const yearItems = _.times(2030, i => i)
+  .reverse()
+  .map(item => ({label: `${item}`, value: item}));
+const dayItems = _.times(31, i => i + 1).map(day => ({label: `${day}`, value: day}));
 
 const useData = (initialMonth?: string, initialYear?: string, initialDays?: number) => {
-  const [selectedMonth, setMonth] = useState<string | undefined>(initialMonth);
-  const [selectedYear, setYear] = useState<string | undefined>(initialYear);
-  const [selectedDays, setDays] = useState<number | undefined>(initialDays);
+  const [selectedMonth, setMonth] = useState<WheelPickerValue>(initialMonth);
+  const [, setYear] = useState<WheelPickerValue>(initialYear);
+  const [selectedDays, setDays] = useState<WheelPickerValue>(initialDays);
   const [showDialog, setShowDialog] = useState(false);
 
   const onPickDaysPress = useCallback(() => {
@@ -37,39 +39,23 @@ const useData = (initialMonth?: string, initialYear?: string, initialDays?: numb
     setShowDialog(false);
   }, []);
 
-  const onMonthChange = useCallback((item: string | undefined, _: number) => {
+  const onMonthChange = useCallback((item: WheelPickerValue, _: number) => {
     setMonth(item);
   }, []);
 
-  const onYearChange = useCallback((item: string | undefined, _: number) => {
+  const onYearChange = useCallback((item: WheelPickerValue, _: number) => {
     setYear(item);
   }, []);
 
-  const onDaysChange = useCallback((item: number | undefined, _: number) => {
+  const onDaysChange = useCallback((item: WheelPickerValue, _: number) => {
     setDays(item);
   }, []);
 
-  const monthItems = useMemo(() => {
-    return _.map(months, item => ({label: item, value: item}));
-  }, []);
-
-  const yearItems = useMemo(() => {
-    return _.map(years, item => ({label: '' + item, value: item}));
-  }, []);
-
-  const dayItems = useMemo(() => {
-    return _.map(days, item => ({label: '' + item, value: item}));
-  }, []);
-
   return {
-    monthItems,
-    yearItems,
-    dayItems,
     onMonthChange,
     onYearChange,
     onDaysChange,
     selectedMonth,
-    selectedYear,
     selectedDays,
     onPickDaysPress,
     onDialogDismissed,
@@ -81,13 +67,9 @@ export default () => {
   const {
     selectedMonth,
     onMonthChange,
-    monthItems,
-    selectedYear,
     onYearChange,
-    yearItems,
     selectedDays,
     onDaysChange,
-    dayItems,
     onPickDaysPress,
     onDialogDismissed,
     showDialog
@@ -97,10 +79,9 @@ export default () => {
     <View flex padding-page>
       <Text h1>Wheel Picker</Text>
 
-      <View flex marginT-20 centerH>
+      <View marginT-s5 centerH>
         <Text h3>Months</Text>
         <Incubator.WheelPicker
-          style={{width: '100%'}}
           onChange={onMonthChange}
           activeTextColor={Colors.primary}
           inactiveTextColor={Colors.grey20}
@@ -110,15 +91,20 @@ export default () => {
         />
 
         <Text h3>Years</Text>
-        <View width={'100%'}>
+        <Text bodySmall grey30>
+          (Uncontrolled, initialValue passed)
+        </Text>
+        <View width={'100%'} marginT-s3>
           <Incubator.WheelPicker
             onChange={onYearChange}
             numberOfVisibleRows={3}
-            selectedValue={selectedYear}
+            initialValue={2021}
             items={yearItems}
           />
         </View>
+      </View>
 
+      <View marginB-s10>
         <Button marginT-40 label={'Pick Days'} marginH-100 onPress={onPickDaysPress}/>
         <Dialog width={'90%'} height={260} bottom visible={showDialog} onDismiss={onDialogDismissed}>
           <Incubator.WheelPicker onChange={onDaysChange} selectedValue={selectedDays} label={'Days'} items={dayItems}/>

generatedTypes/incubator/WheelPicker/index.d.ts

@@ -3,6 +3,14 @@ import { TextStyle, ViewStyle } from 'react-native';
 import { ItemProps } from './Item';
 import { TextProps } from '../../components/text';
 export interface WheelPickerProps {
+    /**
+     * Initial value (doesn't work with selectedValue)
+     */
+    initialValue?: ItemProps | number | string;
+    /**
+     * The current selected value
+     */
+    selectedValue?: ItemProps | number | string;
     /**
      * Data source for WheelPicker
      */
@@ -53,11 +61,7 @@ export interface WheelPickerProps {
      * Support passing items as children props
      */
     children?: JSX.Element | JSX.Element[];
-    /**
-     * WheelPicker initial value, can be ItemProps.value, number as index
-     */
-    selectedValue: ItemProps | number | string;
     testID?: string;
 }
-declare const WheelPicker: React.MemoExoticComponent<({ items: propItems, itemHeight, numberOfVisibleRows, activeTextColor, inactiveTextColor, textStyle, label, labelStyle, labelProps, onChange, style, children, selectedValue, testID }: WheelPickerProps) => JSX.Element>;
+declare const WheelPicker: React.MemoExoticComponent<({ items: propItems, itemHeight, numberOfVisibleRows, activeTextColor, inactiveTextColor, textStyle, label, labelStyle, labelProps, onChange, style, children, initialValue, selectedValue, testID }: WheelPickerProps) => JSX.Element>;
 export default WheelPicker;

generatedTypes/incubator/WheelPicker/usePresenter.d.ts

@@ -2,7 +2,8 @@
 import { ItemProps } from './Item';
 export declare type ItemValueTypes = ItemProps | number | string;
 declare type PropTypes = {
-    selectedValue: ItemValueTypes;
+    initialValue?: ItemValueTypes;
+    selectedValue?: ItemValueTypes;
     children?: JSX.Element | JSX.Element[];
     items?: ItemProps[];
     itemHeight: number;
@@ -19,5 +20,5 @@ interface Presenter {
     height: number;
     getRowItemAtOffset: (offset: number) => RowItem;
 }
-declare const usePresenter: ({ selectedValue, children, items: propItems, itemHeight, preferredNumVisibleRows }: PropTypes) => Presenter;
+declare const usePresenter: ({ initialValue, selectedValue, children, items: propItems, itemHeight, preferredNumVisibleRows }: PropTypes) => Presenter;
 export default usePresenter;

src/incubator/WheelPicker/index.tsx

@@ -14,6 +14,14 @@ import Text, {TextProps} from '../../components/text';
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
 
 export interface WheelPickerProps {
+  /**
+   * Initial value (doesn't work with selectedValue)
+   */
+  initialValue?: ItemProps | number | string;
+  /**
+   * The current selected value
+   */
+  selectedValue?: ItemProps | number | string;
   /**
    * Data source for WheelPicker
    */
@@ -64,10 +72,6 @@ export interface WheelPickerProps {
    * Support passing items as children props
    */
   children?: JSX.Element | JSX.Element[];
-  /**
-   * WheelPicker initial value, can be ItemProps.value, number as index
-   */
-  selectedValue: ItemProps | number | string;
   testID?: string;
 }
 
@@ -84,6 +88,7 @@ const WheelPicker = React.memo(({
   onChange,
   style,
   children,
+  initialValue,
   selectedValue,
   testID
 }: WheelPickerProps) => {
@@ -100,6 +105,7 @@ const WheelPicker = React.memo(({
     index: currentIndex,
     getRowItemAtOffset
   } = usePresenter({
+    initialValue,
     selectedValue,
     items: propItems,
     children,
@@ -109,24 +115,19 @@ const WheelPicker = React.memo(({
 
   const prevIndex = useRef(currentIndex);
   const [scrollOffset, setScrollOffset] = useState(currentIndex * itemHeight);
-
-  useEffect(() => {
-    controlComponent();
-  });
-
   const keyExtractor = useCallback((item: ItemProps, index: number) => `${item}.${index}`, []);
 
-  /**
-     * The picker is a controlled component. This means we expect the
-     * to relay on `selectedValue` prop to be our
-     * source of truth - not the picker current value.
-     * This way, you can control disallow or mutate selection of some values.
-     */
-  const controlComponent = () => {
+  /* This effect enforce the index to be controlled by selectedValue passed by the user */
+  useEffect(() => {
     if (shouldControlComponent(scrollOffset)) {
       scrollToIndex(currentIndex, true);
     }
-  };
+  });
+
+  /* This effect making sure to reset index if initialValue has changed */
+  useEffect(() => {
+    scrollToIndex(currentIndex, true);
+  }, [currentIndex]);
 
   const scrollToPassedIndex = useCallback(() => {
     scrollToIndex(currentIndex, false);
@@ -164,7 +165,8 @@ const WheelPicker = React.memo(({
 
     const {index, value} = getRowItemAtOffset(event.nativeEvent.contentOffset.y);
     onChange?.(value, index);
-  }, [onChange]);
+  },
+  [onChange]);
 
   const renderItem = useCallback(({item, index}) => {
     return (

src/incubator/WheelPicker/usePresenter.ts

@@ -6,7 +6,8 @@ import useMiddleIndex from './helpers/useListMiddleIndex';
 export type ItemValueTypes = ItemProps | number | string;
 
 type PropTypes = {
-  selectedValue: ItemValueTypes;
+  initialValue?: ItemValueTypes;
+  selectedValue?: ItemValueTypes;
   children?: JSX.Element | JSX.Element[];
   items?: ItemProps[];
   itemHeight: number;
@@ -27,13 +28,14 @@ interface Presenter {
 }
 
 const usePresenter = ({
+  initialValue,
   selectedValue,
   children,
   items: propItems,
   itemHeight,
   preferredNumVisibleRows
 }: PropTypes): Presenter => {
-  
+  const value = !_.isUndefined(selectedValue) ? selectedValue : initialValue;
   const extractItemsFromChildren = (): ItemProps[] => {
     const items = React.Children.map(children, child => {
       const childAsType: ItemProps = {value: child?.props.value, label: child?.props.label};
@@ -45,15 +47,18 @@ const usePresenter = ({
   const items = useRef<ItemProps[]>(children ? extractItemsFromChildren() : propItems!).current;
   const middleIndex = useMiddleIndex({itemHeight, listSize: items.length});
 
-  const getSelectedValueIndex = (): number => {
-    if (_.isString(selectedValue) || _.isNumber(selectedValue)) {
-      return _.findIndex(items, {value: selectedValue});
+  const getSelectedValueIndex = () => {
+    if (_.isString(value) || _.isNumber(value)) {
+      return _.findIndex(items, {value});
     }
-    return _.findIndex(items, {value: selectedValue?.value});
+    return _.findIndex(items, {value: (value)?.value});
   };
 
   const shouldControlComponent = (offset: number): boolean => {
-    return offset >= 0 && selectedValue !== getRowItemAtOffset(offset).value;
+    if (!_.isUndefined(selectedValue)) {
+      return offset >= 0 && selectedValue !== getRowItemAtOffset(offset).value;
+    }
+    return false;
   };
 
   const getRowItemAtOffset = (offset: number): RowItem => {