Support useWheelPicker in Picker component

demo/src/screens/componentScreens/PickerScreen.tsx

@@ -135,9 +135,10 @@ export default class PickerScreen extends Component {
           </Picker>
 
           <Picker
-            title="Native Picker"
+            title="Wheel Picker"
             placeholder="Pick a Language"
-            useNativePicker
+            // useNativePicker
+            useWheelPicker
             value={this.state.nativePickerValue}
             onChange={nativePickerValue => this.setState({nativePickerValue})}
             rightIconSource={dropdown}

src/components/picker/PickerItemsList.tsx

@@ -1,20 +1,25 @@
 import _ from 'lodash';
-import React, {useCallback} from 'react';
+import React, {useCallback, useContext, useState} from 'react';
 import {StyleSheet, FlatList, TextInput, ListRenderItemInfo} from 'react-native';
 import {Typography, Colors} from '../../style';
 import Assets from '../../assets';
 import Modal from '../modal';
 import View from '../view';
+import Text from '../text';
 import Icon from '../icon';
-import {PickerItemProps, PickerItemsListProps} from './types';
+import WheelPicker from '../../incubator/WheelPicker';
+import {PickerItemProps, PickerItemsListProps, PickerSingleValue} from './types';
+import PickerContext from './PickerContext';
 
 const keyExtractor = (_item: string, index: number) => index.toString();
 
 const PickerItemsList = (props: PickerItemsListProps) => {
   const {
+    useWheelPicker,
     topBarProps,
     listProps,
     children,
+    items,
     showSearch,
     searchStyle = {},
     searchPlaceholder = 'Search...',
@@ -23,6 +28,8 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     useSafeArea,
     testID
   } = props;
+  const context = useContext(PickerContext);
+  const [wheelPickerValue, setWheelPickerValue] = useState<PickerSingleValue>(context.value ?? items?.[0].value);
 
   const renderSearchInput = () => {
     if (showSearch) {
@@ -59,18 +66,43 @@ const PickerItemsList = (props: PickerItemsListProps) => {
   },
   [children]);
 
-  return (
-    <View bg-$backgroundDefault flex useSafeArea={useSafeArea}>
-      <Modal.TopBar {...topBarProps}/>
-      {renderSearchInput()}
-
+  const renderList = () => {
+    return (
       <FlatList
         data={_.times(React.Children.count(children))}
         // @ts-expect-error
         renderItem={renderItem}
         keyExtractor={keyExtractor}
         {...listProps}
       />
+    );
+  };
+
+  const renderWheel = () => {
+    return (
+      <View>
+        <View row spread padding-page>
+          <Text>{topBarProps.title}</Text>
+          <Text text70 primary accessibilityRole={'button'} onPress={() => context.onPress(wheelPickerValue)}>
+            {topBarProps.doneLabel ?? 'Select'}
+          </Text>
+        </View>
+        <WheelPicker initialValue={context.value as PickerSingleValue} items={items} onChange={setWheelPickerValue}/>
+      </View>
+    );
+  };
+
+  return (
+    <View bg-$backgroundDefault flex useSafeArea={useSafeArea}>
+      {!useWheelPicker && (
+        <>
+          {<Modal.TopBar {...topBarProps}/>}
+          {renderSearchInput()}
+          {renderList()}
+        </>
+      )}
+
+      {useWheelPicker && renderWheel()}
     </View>
   );
 };

src/components/picker/api/picker.api.json

@@ -86,6 +86,11 @@
       "type": "boolean",
       "description": "Allow to use the native picker solution (different style for iOS and Android)"
     },
+    {
+      "name": "useWheelPicker",
+      "type": "boolean",
+      "description": "Use wheel picker instead of a list picker"
+    },
     {
       "name": "renderNativePicker",
       "type": "(props) => void",

src/components/picker/index.tsx

@@ -43,6 +43,12 @@ import {
 
 const dropdown = require('./assets/dropdown.png');
 
+const DIALOG_PROPS = {
+  bottom: true,
+  width: '100%',
+  height: 250
+};
+
 const Picker = (props: PropsWithChildren<PickerProps> & ForwardRefInjectedProps & BaseComponentInjectedProps) => {
   const {
     mode,
@@ -53,6 +59,7 @@ const Picker = (props: PropsWithChildren<PickerProps> & ForwardRefInjectedProps
     searchPlaceholder,
     renderCustomSearch,
     useNativePicker,
+    useWheelPicker,
     renderPicker,
     customPickerProps,
     containerStyle,
@@ -190,6 +197,8 @@ const Picker = (props: PropsWithChildren<PickerProps> & ForwardRefInjectedProps
     return (
       <PickerItemsList
         testID={`${testID}.modal`}
+        useWheelPicker={useWheelPicker}
+        items={useWheelPicker ? items : undefined}
         topBarProps={{
           ...topBarProps,
           onCancel: cancelSelect,
@@ -221,7 +230,9 @@ const Picker = (props: PropsWithChildren<PickerProps> & ForwardRefInjectedProps
     renderCustomSearch,
     listProps,
     filteredChildren,
-    useSafeArea
+    useSafeArea,
+    useWheelPicker,
+    items
   ]);
 
   const renderPickerInnerInput = () => {
@@ -253,7 +264,9 @@ const Picker = (props: PropsWithChildren<PickerProps> & ForwardRefInjectedProps
     <PickerContext.Provider value={contextValue}>
       <ExpandableOverlay
         ref={pickerExpandable}
+        useDialog={useWheelPicker}
         modalProps={modalProps}
+        dialogProps={DIALOG_PROPS}
         expandableContent={expandableModalContent}
         renderCustomOverlay={renderCustomModal ? _renderCustomModal : undefined}
         onPress={onPress}
@@ -304,7 +317,7 @@ Picker.extractPickerItems = (props: PropsWithChildren<PickerProps>) => {
     // @ts-expect-error handle use PickerItemProps once exist
     label: child?.props.label
   }));
-  return items;
+  return items ?? [];
 };
 
 export {PickerProps, PickerItemProps, PickerValue, PickerModes, PickerFieldTypes, PickerSearchStyle, PickerMethods};

src/components/picker/types.tsx

@@ -150,6 +150,10 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
      * Allow to use the native picker solution (different style for iOS and Android)
      */
     useNativePicker?: boolean;
+    /**
+     * Use wheel picker instead of a list picker
+     */
+    useWheelPicker?: boolean;
     /**
      * Callback for rendering a custom native picker inside the dialog (relevant to native picker only)
      */
@@ -258,7 +262,10 @@ export type PickerItemsListProps = Pick<
   | 'onSearchChange'
   | 'renderCustomSearch'
   | 'useSafeArea'
+  | 'useWheelPicker'
   | 'testID'
->;
+> & {
+  items?: {value: any; label: any}[];
+};
 
 export type PickerMethods = TextFieldMethods & ExpandableOverlayMethods;