WheelPicker - move from incubator (#2486)

Author: M-i-k-e-l

demo/src/screens/MenuStructure.js

@@ -70,7 +70,12 @@ export const navigationData = {
       {title: 'Stepper', tags: 'stepper form', screen: 'unicorn.components.StepperScreen'},
       {title: 'Slider', tags: 'slider', screen: 'unicorn.components.SliderScreen'},
       {title: 'Switch', tags: 'switch toggle', screen: 'unicorn.components.SwitchScreen'},
-      {title: 'Masked Inputs', tags: 'text input form mask', screen: 'unicorn.components.MaskedInputScreen'}
+      {title: 'Masked Inputs', tags: 'text input form mask', screen: 'unicorn.components.MaskedInputScreen'},
+      {
+        title: 'WheelPicker',
+        tags: 'wheel picker spinner',
+        screen: 'unicorn.components.WheelPickerScreen'
+      }
     ]
   },
   Overlays: {
@@ -181,11 +186,6 @@ export const navigationData = {
         tags: 'text field expandable input picker',
         screen: 'unicorn.components.IncubatorExpandableOverlayScreen'
       },
-      {
-        title: 'WheelPicker (Incubator)',
-        tags: 'wheel picker spinner experimental',
-        screen: 'unicorn.incubator.WheelPickerScreen'
-      },
       {title: 'Pan View', tags: 'pan swipe drag', screen: 'unicorn.incubator.PanViewScreen'}
     ]
   },

demo/src/screens/componentScreens/SectionsWheelPickerScreen.tsx

@@ -7,14 +7,13 @@ import {
   SectionsWheelPicker,
   SegmentedControl,
   Button,
-  Incubator,
+  WheelPicker,
+  WheelPickerProps,
   Constants,
   Switch,
   Colors
 } from 'react-native-ui-lib';
 
-const {WheelPicker} = Incubator;
-
 const DAYS = _.times(10, i => i);
 const HOURS = _.times(24, i => i);
 const MINUTES = _.times(60, i => i);
@@ -75,7 +74,7 @@ const SectionsWheelPickerScreen = () => {
     setSelectedMinutes(0);
   }, []);
 
-  const sections: Incubator.WheelPickerProps[] = useMemo(() => {
+  const sections: WheelPickerProps[] = useMemo(() => {
     return [
       {
         items: getItems(DAYS),

demo/src/screens/incubatorScreens/WheelPickerScreen.tsx renamed to demo/src/screens/componentScreens/WheelPickerScreen.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, {useCallback, useState} from 'react';
-import {View, Text, Incubator, Colors, Typography, Button} from 'react-native-ui-lib';
+import {View, Text, Incubator, WheelPicker, WheelPickerAlign, Colors, Typography, Button} from 'react-native-ui-lib';
 
 const monthItems = _.map([
   'January',
@@ -16,7 +16,7 @@ const monthItems = _.map([
   'November',
   'December'
 ],
-item => ({label: item, value: item, align: Incubator.WheelPickerAlign.RIGHT}));
+item => ({label: item, value: item, align: WheelPickerAlign.RIGHT}));
 
 const yearItems = _.times(2050, i => i)
   .reverse()
@@ -51,7 +51,7 @@ export default () => {
       <View row center marginT-30>
         <View center>
           <Text h3>Months</Text>
-          <Incubator.WheelPicker
+          <WheelPicker
             initialValue={'February'}
             activeTextColor={Colors.$textPrimary}
             inactiveTextColor={Colors.$textNeutralHeavy}
@@ -63,7 +63,7 @@ export default () => {
 
         <View center>
           <Text h3>Years</Text>
-          <Incubator.WheelPicker
+          <WheelPicker
             numberOfVisibleRows={3} 
             initialValue={yearsValue} 
             items={yearItems}
@@ -80,22 +80,22 @@ export default () => {
           (by updating the initialValue prop)
         </Text>
         <View marginT-10 row>
-          <Button size="medium" label={'Previous'} marginR-20 onPress={() => updateYearsInitialValue(false)}/>
-          <Button size="medium" label={'Next'} onPress={() => updateYearsInitialValue(true)}/>
+          <Button size={Button.sizes.medium} label={'Previous'} marginR-20 onPress={() => updateYearsInitialValue(false)}/>
+          <Button size={Button.sizes.medium} label={'Next'} onPress={() => updateYearsInitialValue(true)}/>
         </View>
       </View>
 
       <View center marginT-40>
         <Text h3 marginB-20>Days</Text>
-        <Button size="small" label={'Pick Days'} onPress={onPickDaysPress}/>
+        <Button size={Button.sizes.small} label={'Pick Days'} onPress={onPickDaysPress}/>
         <Incubator.Dialog
           width={'90%'}
           bottom
           visible={showDialog}
           onDismiss={onDialogDismissed}
           headerProps={{showKnob: false, showDivider: false}}
         >
-          <Incubator.WheelPicker initialValue={5} label={'Days'} items={dayItems}/>
+          <WheelPicker initialValue={5} label={'Days'} items={dayItems}/>
         </Incubator.Dialog>
       </View>
     </View>

demo/src/screens/componentScreens/index.js

@@ -1,3 +1,4 @@
+import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 
 export function registerScreens(registrar) {
 
@@ -60,6 +61,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.TourScreen', () => require('./TourScreen').default);
   registrar('unicorn.components.ViewScreen', () => require('./ViewScreen').default);
   registrar('unicorn.components.WizardScreen', () => require('./WizardScreen').default);
+  registrar('unicorn.components.WheelPickerScreen', () => gestureHandlerRootHOC(require('./WheelPickerScreen').default));
   // List Components
   registrar('unicorn.lists.BasicListScreen', () => require('./BasicListScreen').default);
   registrar('unicorn.lists.ContactsListScreen', () => require('./ContactsListScreen').default);

demo/src/screens/incubatorScreens/index.js

@@ -8,5 +8,4 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.IncubatorExpandableOverlayScreen', () => require('./IncubatorExpandableOverlayScreen').default);
   registrar('unicorn.components.IncubatorToastScreen', () => require('./IncubatorToastScreen').default);
   registrar('unicorn.incubator.PanViewScreen', () => require('./PanViewScreen').default);
-  registrar('unicorn.incubator.WheelPickerScreen', () => gestureHandlerRootHOC(require('./WheelPickerScreen').default));
 }

src/incubator/WheelPicker/Item.tsx renamed to src/components/WheelPicker/Item.tsx

@@ -110,7 +110,6 @@ const WheelPickerItem = memo(({
   );
 });
 
-WheelPickerItem.displayName = 'Incubator.WheelPickerItem';
 export default asBaseComponent<InternalProps>(WheelPickerItem);
 
 const styles = StyleSheet.create({

src/incubator/WheelPicker/__tests__/index.spec.js renamed to src/components/WheelPicker/__tests__/index.spec.js

@@ -3,7 +3,7 @@ import React from 'react';
 import {render} from '@testing-library/react-native';
 import {fireOnMomentumScrollEnd} from '../../../uilib-test-renderer';
 import {Colors} from 'style';
-import {WheelPicker} from '../../../incubator';
+import WheelPicker from '../index';
 
 
 const ITEM_HEIGHT = 50;

src/incubator/WheelPicker/__tests__/useListMiddleIndex.spec.js renamed to src/components/WheelPicker/__tests__/useListMiddleIndex.spec.js

@@ -20,6 +20,7 @@ import Item, {ItemProps} from './Item';
 import Text, {TextProps} from '../../components/text';
 import usePresenter from './usePresenter';
 import {WheelPickerAlign} from './types';
+export {WheelPickerAlign};
 
 const AnimatedFlatList = Animated.createAnimatedComponent<FlatListProps<ItemProps>>(FlatList);
 
@@ -358,7 +359,6 @@ const WheelPicker = ({
 };
 
 WheelPicker.alignments = WheelPickerAlign;
-WheelPicker.displayName = 'Incubator.WheelPicker';
 export default asBaseComponent<WheelPickerProps, typeof WheelPicker>(WheelPicker);
 export {ItemProps as WheelPickerItemProps};
 

src/incubator/WheelPicker/__tests__/usePresenter.spec.js renamed to src/components/WheelPicker/__tests__/usePresenter.spec.js

@@ -1,8 +1,8 @@
 {
   "name": "WheelPicker",
-  "category": "incubator",
+  "category": "form",
   "description": "A customizable WheelPicker component",
-  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/incubatorScreens/WheelPickerScreen.tsx",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/WheelPickerScreen.tsx",
   "images": [],
   "props": [
     {"name": "initialValue", "type": "number | string", "description": "Initial value (uncontrolled)"},

src/incubator/WheelPicker/helpers/useListMiddleIndex.ts renamed to src/components/WheelPicker/helpers/useListMiddleIndex.ts

@@ -7,7 +7,7 @@ import Modal from '../modal';
 import View from '../view';
 import Text from '../text';
 import Icon from '../icon';
-import WheelPicker from '../../incubator/WheelPicker';
+import WheelPicker from '../WheelPicker';
 import {PickerItemProps, PickerItemsListProps, PickerSingleValue} from './types';
 import PickerContext from './PickerContext';
 

src/incubator/WheelPicker/index.tsx renamed to src/components/WheelPicker/index.tsx

@@ -3,7 +3,7 @@ import React, {useMemo} from 'react';
 import {TextStyle, StyleSheet} from 'react-native';
 import {Constants, asBaseComponent} from '../../commons/new';
 import View from '../view';
-import {WheelPicker, WheelPickerProps} from '../../incubator';
+import WheelPicker, {WheelPickerProps} from '../WheelPicker';
 
 export type SectionsWheelPickerProps = {
   /**

src/incubator/WheelPicker/types.ts renamed to src/components/WheelPicker/types.ts

@@ -5,7 +5,5 @@ export {default as ExpandableOverlay} from './expandableOverlay';
 export {default as TextField, TextFieldProps, FieldContextType, TextFieldMethods} from './TextField';
 export {default as Toast, ToastProps, ToastPresets} from './toast';
 export {default as TouchableOpacity, TouchableOpacityProps} from './TouchableOpacity';
-export {default as WheelPicker, WheelPickerProps, WheelPickerItemProps} from './WheelPicker';
-export {WheelPickerAlign} from './WheelPicker/types';
 export {default as PanView, PanViewProps, PanViewDirections, PanViewDismissThreshold} from './panView';
 export {default as Dialog, DialogProps, DialogHeaderProps, DialogStatics, DialogImperativeMethods} from './Dialog';

src/incubator/WheelPicker/usePresenter.ts renamed to src/components/WheelPicker/usePresenter.ts

@@ -32,9 +32,6 @@ export {
   FieldContextType,
   ToastProps,
   ToastPresets,
-  WheelPickerProps,
-  WheelPickerItemProps,
-  WheelPickerAlign,
   PanViewProps,
   PanViewDirections,
   PanViewDismissThreshold
@@ -172,6 +169,12 @@ export {
   WizardStepConfig,
   WizardStepsConfig
 } from './components/wizard';
+export {
+  default as WheelPicker,
+  WheelPickerProps,
+  WheelPickerItemProps,
+  WheelPickerAlign
+} from './components/WheelPicker';
 
 /* ===== TestKit ===== */
 // export {default as TextTestKit} from './components/text/Text.driver';