Merge branch 'master' into release

Author: ethanshar

demo/src/index.js

@@ -130,18 +130,15 @@ module.exports = {
         return require('./screens/componentScreens/TextScreen').default;
       },
       // TODO: fix Expo issues (navigation) before un-commenting
-      // get TextFieldScreen() {
-      //   return require('./screens/componentScreens/TextFieldScreen').default;
-      // },
+      get TextFieldScreen() {
+        return require('./screens/componentScreens/TextFieldScreen').default;
+      },
       get TourScreen() {
         return require('./screens/componentScreens/TourScreen').default;
       },
       get FeatureHighlightScreen() {
         return require('./screens/componentScreens/FeatureHighlightScreen').default;
       },
-      get WheelPickerDialogScreen() {
-        return require('./screens/componentScreens/WheelPickerDialogScreen').default;
-      },
       get SliderScreen() {
         return require('./screens/componentScreens/SliderScreen').default;
       },
@@ -173,9 +170,6 @@ module.exports = {
       get SafeAreaSpacerViewScreen() {
         return require('./screens/nativeComponentScreens/SafeAreaSpacerViewScreen').default;
       },
-      get WheelPickerViewScreen() {
-        return require('./screens/nativeComponentScreens/WheelPickerViewScreen').default;
-      },
       // Full Screen components
       get EmptyStateScreen() {
         return require('./screens/componentScreens/EmptyStateScreen').default;
@@ -221,9 +215,6 @@ module.exports = {
         return require('./screens/componentScreens/ProgressBarScreen').default;
       },
       // Incubator
-      get IncubatorTextFieldScreen() {
-        return require('./screens/incubatorScreens/IncubatorTextFieldScreen').default;
-      },
       get PanViewScreen() {
         return require('./screens/incubatorScreens/PanViewScreen').default;
       },

demo/src/screens/MenuStructure.js

@@ -43,7 +43,6 @@ export const navigationData = {
         screen: 'unicorn.components.SharedTransitionScreen'
       },
       {title: 'Stack Aggregator', tags: 'stack aggregator', screen: 'unicorn.components.StackAggregatorScreen'},
-      {title: 'Wheel Picker Dialog', tags: 'wheel picker dialog', screen: 'unicorn.components.WheelPickerDialogScreen'},
       {title: 'Marquee', tags: 'sliding text', screen: 'unicorn.components.MarqueeScreen'}
     ]
   },
@@ -71,8 +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: 'ChipsInput', tags: 'chips tags input form', screen: 'unicorn.components.ChipsInputScreen'},
-      {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: {
@@ -141,7 +144,6 @@ export const navigationData = {
         tags: 'native overlay',
         screen: 'unicorn.nativeComponents.HighlightOverlayViewScreen'
       },
-      {title: 'Wheel Picker', tags: 'wheel picker', screen: 'unicorn.nativeComponents.WheelPickerViewScreen'},
       {title: 'SafeArea Spacer', tags: 'native safe area', screen: 'unicorn.nativeComponents.SafeAreaSpacerViewScreen'},
       {
         title: 'KeyboardTracking (iOS)',
@@ -175,21 +177,15 @@ export const navigationData = {
     title: 'Incubator (Experimental)',
     screens: [
       {title: 'Calendar', tags: 'calendar', screen: 'unicorn.components.IncubatorCalendarScreen'},
-      {title: 'ChipsInput (New)', tags: 'chips input', screen: 'unicorn.components.IncubatorChipsInputScreen'},
+      {title: 'ChipsInput', tags: 'chips input', screen: 'unicorn.components.ChipsInputScreen'},
       {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
       {title: 'Dialog (New)', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},
-      {title: 'TextField (New)', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'},
       {title: 'Toast (New)', tags: 'toast', screen: 'unicorn.components.IncubatorToastScreen'},
       {
         title: 'ExpandableOverlay',
         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/ChipScreen.tsx

@@ -1,7 +1,6 @@
-import _ from 'lodash';
 import React, {Component} from 'react';
 import {Alert} from 'react-native';
-import {Chip, Colors, Spacings, Text, Typography, View, Incubator, WheelPickerDialog, Image} from 'react-native-ui-lib';
+import {Chip, Colors, Spacings, Text, Typography, View, Image} from 'react-native-ui-lib';
 
 const avatarImage = {
   uri: 'https://randomuser.me/api/portraits/women/24.jpg'
@@ -20,64 +19,9 @@ export default class ChipScreen extends Component {
   ];
 
   state = {
-    showDialog: false,
     selectedValue: this.colors[2].label
   };
 
-  toggleDialog = (showDialog: boolean) => {
-    this.setState({showDialog});
-  };
-
-  openDialog = () => {
-    this.toggleDialog(true);
-  };
-
-  closeDialog = () => {
-    this.toggleDialog(false);
-  };
-
-  onSelect = (itemValue: string) => {
-    const values = _.filter(this.colors, {value: itemValue});
-    if (values.length > 0) {
-      this.setState({selectedValue: values[0].label});
-    }
-    this.closeDialog();
-  };
-
-  renderItem = ({item: color}) => {
-    return (
-      <Text text50 margin-20 color={color.value}>
-        {color.label}
-      </Text>
-    );
-  };
-
-  renderContent = () => {
-    const {selectedValue} = this.state;
-
-    return (
-      <WheelPickerDialog
-        items={this.colors}
-        selectedValue={selectedValue}
-        onSelect={this.onSelect}
-        onCancel={this.closeDialog}
-        wheelPickerProps={{
-          style: {width: 200}
-        }}
-      />
-    );
-  };
-
-  renderPickerDialog = () => {
-    const {showDialog} = this.state;
-
-    return (
-      <Incubator.Dialog visible={showDialog} useSafeArea bottom onDismiss={this.closeDialog}>
-        {this.renderContent()}
-      </Incubator.Dialog>
-    );
-  };
-
   renderExample = (text: string, chip: JSX.Element) => {
     return (
       <View row spread marginB-12>
@@ -90,7 +34,6 @@ export default class ChipScreen extends Component {
   render() {
     return (
       <View style={{padding: 20}}>
-        {this.renderPickerDialog()}
         <Text marginB-20 text40 $textDefault>
           Chip
         </Text>
@@ -120,12 +63,11 @@ export default class ChipScreen extends Component {
             iconStyle={{width: 24, height: 24}}
             iconProps={{tintColor: Colors.$iconDefault}}
           />)}
-        {this.renderExample('Right icon + onPress + dynamic label',
+        {this.renderExample('Right icon',
           <Chip
             label={this.state.selectedValue}
             rightIconSource={chevron}
             iconStyle={{margin: 8}}
-            onPress={this.openDialog}
           />)}
         {this.renderExample('Label + Avatar', <Chip label={'Chip'} avatarProps={{source: avatarImage, size: 20}}/>)}
         {this.renderExample('Label + Counter',