Feat/add label to wheelPicker (#1259)

* Feat/add label to wheelPicker

* naming

* naming + edit screen

Author: lidord-wix

demo/src/screens/incubatorScreens/WheelPickerScreen.tsx

@@ -1,5 +1,5 @@
 import React, {useCallback, useState} from 'react';
-import {View, Text, Incubator, Colors, Typography} from 'react-native-ui-lib';
+import {View, Text, Incubator, Colors, Typography, Button, Dialog} from 'react-native-ui-lib';
 import _ from 'lodash';
 
 // Months
@@ -21,10 +21,21 @@ const months = [
 // Years
 const years = _.times(2020, i => i);
 
-const useData = (initialMonth?: string, initialYear?: string) => {
+const days = _.times(365, i => i + 1);
 
+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 [showDialog, setShowDialog] = useState(false);
+
+  const onPickDaysPress = () => {
+    setShowDialog(true);
+  };
+
+  const onDialogDismissed = () => {
+    setShowDialog(false);
+  };
 
   const onMonthChange = (item: string | undefined, _: number) => {
     setMonth(item);
@@ -34,6 +45,10 @@ const useData = (initialMonth?: string, initialYear?: string) => {
     setYear(item);
   };
 
+  const onDaysChange = (item: number | undefined, _: number) => {
+    setDays(item);
+  };
+
   const getMonths = useCallback(() => {
     return _.map(months, item => ({label: item, value: item}));
   }, []);
@@ -42,25 +57,47 @@ const useData = (initialMonth?: string, initialYear?: string) => {
     return _.map(years, item => ({label: '' + item, value: item}));
   }, []);
 
+  const getDays = useCallback(() => {
+    return _.map(days, item => ({label: '' + item, value: item}));
+  }, []);
+
   return {
-    getMonths, 
+    getMonths,
     getYears,
+    getDays,
     onMonthChange,
     onYearChange,
+    onDaysChange,
     selectedMonth,
-    selectedYear
+    selectedYear,
+    selectedDays,
+    onPickDaysPress,
+    onDialogDismissed,
+    showDialog
   };
 };
 
 export default () => {
-  
-  const {selectedMonth, onMonthChange, getMonths, selectedYear, onYearChange, getYears} = useData('February', undefined);
+  const {
+    selectedMonth,
+    onMonthChange,
+    getMonths,
+    selectedYear,
+    onYearChange,
+    getYears,
+    selectedDays,
+    onDaysChange,
+    getDays,
+    onPickDaysPress,
+    onDialogDismissed,
+    showDialog
+  } = useData('February', undefined, 5);
 
   return (
     <View flex padding-page>
       <Text h1>Wheel Picker</Text>
-      
-      <View flex centerV centerH>
+
+      <View flex marginT-20 centerH>
         <Text h3>Months</Text>
         <Incubator.WheelPicker
           style={{width: '100%'}}
@@ -71,11 +108,26 @@ export default () => {
           textStyle={Typography.text60R}
           selectedValue={selectedMonth}
         />
-        
+
         <Text h3>Years</Text>
-        <View height={300} width={'100%'}>
-          <Incubator.WheelPicker onChange={onYearChange} selectedValue={selectedYear} items={getYears()}/>
+        <View width={'100%'}>
+          <Incubator.WheelPicker
+            onChange={onYearChange}
+            numberOfVisibleRows={3}
+            selectedValue={selectedYear}
+            items={getYears()}
+          />
         </View>
+
+        <Button marginT-40 label={'Pick Days'} marginH-120 onPress={onPickDaysPress}/>
+        <Dialog width={'90%'} height={260} bottom visible={showDialog} onDismiss={onDialogDismissed}>
+          <Incubator.WheelPicker
+            onChange={onDaysChange}
+            selectedValue={selectedDays}
+            label={selectedDays === 1 ? 'Day' : 'Days'}
+            items={getDays()}
+          />
+        </Dialog>
       </View>
     </View>
   );

generatedTypes/incubator/WheelPicker/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { TextStyle, ViewStyle } from 'react-native';
 import { ItemProps } from './Item';
+import { TextProps } from '../../components/text';
 export interface WheelPickerProps {
     /**
      * Data source for WheelPicker
@@ -28,6 +29,18 @@ export interface WheelPickerProps {
      * Row text style
      */
     textStyle?: TextStyle;
+    /**
+     * Additional label on the right of the item text
+     */
+    label?: string;
+    /**
+     * The Additional label's style
+     */
+    labelStyle?: TextStyle;
+    /**
+     * The Additional label's props
+     */
+    labelProps?: TextProps;
     /**
      * Event, on active row change
      */
@@ -45,5 +58,5 @@ export interface WheelPickerProps {
      */
     selectedValue: ItemProps | number | string;
 }
-declare const WheelPicker: React.MemoExoticComponent<({ items: propItems, itemHeight, numberOfVisibleRows, activeTextColor, inactiveTextColor, textStyle, onChange, style, children, selectedValue }: WheelPickerProps) => JSX.Element>;
+declare const WheelPicker: React.MemoExoticComponent<({ items: propItems, itemHeight, numberOfVisibleRows, activeTextColor, inactiveTextColor, textStyle, label, labelStyle, labelProps, onChange, style, children, selectedValue }: WheelPickerProps) => JSX.Element>;
 export default WheelPicker;

src/incubator/WheelPicker/index.tsx

@@ -9,6 +9,7 @@ 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';
 
 const AnimatedFlatList = Animated.createAnimatedComponent(FlatList);
 
@@ -39,6 +40,18 @@ export interface WheelPickerProps {
    * Row text style
    */
   textStyle?: TextStyle;
+  /**
+   * Additional label on the right of the item text
+   */
+  label?: string;
+  /**
+   * The Additional label's style
+   */
+  labelStyle?: TextStyle;
+  /**
+   * The Additional label's props
+   */
+  labelProps?: TextProps;
   /**
    * Event, on active row change
    */
@@ -62,9 +75,12 @@ const WheelPicker = React.memo(
     items: propItems,
     itemHeight = 44,
     numberOfVisibleRows = 5,
-    activeTextColor,
+    activeTextColor = Colors.primary,
     inactiveTextColor,
     textStyle,
+    label,
+    labelStyle,
+    labelProps,
     onChange,
     style,
     children,
@@ -143,7 +159,7 @@ const WheelPicker = React.memo(
       [itemHeight]
     );
 
-    const separators = () => {
+    const renderSeparatorsAndLabel = () => {
       return (
         <View absF centerV pointerEvents="none">
           <View
@@ -153,17 +169,28 @@ const WheelPicker = React.memo(
               height: Spacings.s9,
               borderColor: Colors.grey60
             }}
-          />
+            center
+          >
+            {renderLabel()}
+          </View>
         </View>
       );
     };
 
+    const renderLabel = () => {
+      return (
+        <Text marginL-80 text80M {...labelProps} color={activeTextColor} style={labelStyle}>
+          {label}
+        </Text>
+      );
+    };
+
     const fader = useMemo(() => (position: FaderPosition) => {
       return <Fader visible position={position} size={60}/>;
     }, []);
 
     return (
-      <View style={style}>
+      <View bg-white style={style}>
         <AnimatedFlatList
           height={height}
           data={items}
@@ -185,7 +212,7 @@ const WheelPicker = React.memo(
         />
         {fader(FaderPosition.BOTTOM)}
         {fader(FaderPosition.TOP)}
-        {separators()}
+        {renderSeparatorsAndLabel()}
       </View>
     );
   });