Merge branch 'master' into release

Author: ethanshar

_editorconfig renamed to .editorconfig

@@ -234,6 +234,7 @@ ios/
 android/
 demo/
 expoDemo/
+webDemo/
 uilib-docs/
 markdowns/
 .babelrc

.npmignore

@@ -201,3 +201,7 @@ export const navigationData = {
     ]
   }
 };
+
+if (__DEV__) {
+  navigationData.Foundation.screens.unshift({title: 'Playground', screen: 'unicorn.PlaygroundScreen'});
+}

demo/src/screens/MenuStructure.js

@@ -2,29 +2,33 @@ import _ from 'lodash';
 import React, {Component} from 'react';
 import AsyncStorage from '@react-native-community/async-storage';
 import {StyleSheet, I18nManager} from 'react-native';
-import {Colors, View, Text, Picker, Toast, Switch} from 'react-native-ui-lib'; //eslint-disable-line
+import {Colors, View, Text, Picker, Incubator, Switch} from 'react-native-ui-lib'; //eslint-disable-line
 import {navigationData} from './MenuStructure';
 
 const none = {label: '[None]', value: ''};
-const playgroundScreen = {label: 'Playground', value: 'unicorn.PlaygroundScreen'};
 
 class SettingsScreen extends Component {
   constructor(props) {
     super(props);
 
     const data = props.navigationData || navigationData;
-    const playground = props.playground || playgroundScreen;
+    const playground = props.playground;
+
+    const screens = [
+      none,
+      ..._.flow(_.values,
+        screens => _.map(screens, 'screens'),
+        _.flatten,
+        screens => _.map(screens, screen => ({label: screen.title, value: screen.screen})))(data)
+    ];
+
+    if (playground) {
+      screens.splice(1, 0, playground);
+    }
 
     this.state = {
       showRefreshMessage: false,
-      screens: [
-        none,
-        playground,
-        ..._.flow(_.values,
-          screens => _.map(screens, 'screens'),
-          _.flatten,
-          screens => _.map(screens, screen => ({label: screen.title, value: screen.screen})))(data)
-      ]
+      screens
     };
   }
 
@@ -107,7 +111,10 @@ class SettingsScreen extends Component {
         <Text text30 grey10>
           Settings
         </Text>
-        <Toast visible={showRefreshMessage} position="bottom" message="Refresh the app!"/>
+        <Incubator.Toast
+          visible={showRefreshMessage}
+          message={`Default screen set to: ${defaultScreen?.label}. Please refresh the app.`}
+        />
       </View>
     );
   }

demo/src/screens/SettingsScreen.js

@@ -64,6 +64,7 @@ export default class ActionSheetScreen extends Component {
           cancelButtonIndex={3}
           destructiveButtonIndex={0}
           useNativeIOS={false}
+          migrateDialog
           options={[
             {label: 'option 1', onPress: () => this.pickOption('option 1')},
             {label: 'option 2', onPress: () => this.pickOption('option 2')},
@@ -79,6 +80,7 @@ export default class ActionSheetScreen extends Component {
           message={'Message of action sheet'}
           cancelButtonIndex={3}
           destructiveButtonIndex={0}
+          migrateDialog
           options={[
             {label: 'option 1', onPress: () => this.pickOption('option 1'), iconSource: collectionsIcon},
             {label: 'option 2', onPress: () => this.pickOption('option 2'), iconSource: shareIcon},

demo/src/screens/componentScreens/ActionSheetScreen.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {Alert} from 'react-native';
-import {Chip, Colors, Spacings, Text, Typography, View, Dialog, WheelPickerDialog, Image} from 'react-native-ui-lib';
+import {Chip, Colors, Spacings, Text, Typography, View, Incubator, WheelPickerDialog, Image} from 'react-native-ui-lib';
 
 const avatarImage = {
   uri: 'https://randomuser.me/api/portraits/women/24.jpg'
@@ -72,9 +72,9 @@ export default class ChipScreen extends Component {
     const {showDialog} = this.state;
 
     return (
-      <Dialog visible={showDialog} useSafeArea bottom onDismiss={this.closeDialog}>
+      <Incubator.Dialog visible={showDialog} useSafeArea bottom onDismiss={this.closeDialog}>
         {this.renderContent()}
-      </Dialog>
+      </Incubator.Dialog>
     );
   };
 
@@ -90,7 +90,7 @@ export default class ChipScreen extends Component {
   render() {
     return (
       <View style={{padding: 20}}>
-        {this.state.showDialog && this.renderPickerDialog()}
+        {this.renderPickerDialog()}
         <Text marginB-20 text40 $textDefault>
           Chip
         </Text>

demo/src/screens/componentScreens/ChipScreen.tsx

@@ -1,17 +1,19 @@
 import React, {Component} from 'react';
 import {View, StyleSheet, Alert, ScrollView} from 'react-native';
-import {Colors, Text, FloatingButton} from 'react-native-ui-lib';
+import {Colors, Text, FloatingButton, FloatingButtonLayouts} from 'react-native-ui-lib';
 import {renderBooleanOption} from '../ExampleScreenPresenter';
 
 interface State {
   showButton: boolean;
   showSecondary: boolean;
+  showVertical: boolean;
 }
 
 export default class FloatingButtonScreen extends Component<{}, State> {
   state = {
     showButton: true,
-    showSecondary: true
+    showSecondary: true,
+    showVertical: true
   };
 
   notNow = () => {
@@ -25,14 +27,15 @@ export default class FloatingButtonScreen extends Component<{}, State> {
   };
 
   render() {
-    const {showSecondary} = this.state;
+    const {showSecondary, showVertical} = this.state;
     return (
       <View style={styles.container}>
         <Text text60 center $textDefault marginB-s4>
           Trigger Floating Button
         </Text>
         {renderBooleanOption.call(this, 'Show Floating Button', 'showButton')}
         {renderBooleanOption.call(this, 'Show Secondary Button', 'showSecondary')}
+        {renderBooleanOption.call(this, 'Button Layout Vertical', 'showVertical')}
 
         <ScrollView showsVerticalScrollIndicator={false}>
           <View paddingT-20>
@@ -69,11 +72,11 @@ export default class FloatingButtonScreen extends Component<{}, State> {
             showSecondary
               ? {
                 label: 'Not now',
-                onPress: this.notNow,
-                color: Colors.$textDangerLight
+                onPress: this.notNow
               }
               : undefined
           }
+          buttonLayout={showVertical ? FloatingButtonLayouts.VERTICAL : FloatingButtonLayouts.HORIZONTAL}
           // bottomMargin={80}
           // hideBackgroundOverlay
           // withoutAnimation

demo/src/screens/componentScreens/FloatingButtonScreen.tsx

@@ -1,11 +1,11 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {ScrollView} from 'react-native';
+import {ScrollView} from 'react-native-gesture-handler';
 import {
   View,
   Colors,
   Icon,
-  Dialog,
+  Incubator,
   Text,
   Picker,
   Avatar,
@@ -14,7 +14,6 @@ import {
   Typography,
   PickerProps,
   PickerMethods,
-  DialogProps,
   Button
 } from 'react-native-ui-lib'; //eslint-disable-line
 import contactsData from '../../data/conversations';
@@ -61,20 +60,11 @@ export default class PickerScreen extends Component {
     contact: 0
   };
 
-  dialogHeader: DialogProps['renderPannableHeader'] = props => {
-    const {title} = props;
-    return (
-      <Text margin-15 text60 $textDefault>
-        {title}
-      </Text>
-    );
-  };
-
   renderDialog: PickerProps['renderCustomModal'] = modalProps => {
     const {visible, children, toggleModal, onDone} = modalProps;
 
     return (
-      <Dialog
+      <Incubator.Dialog
         visible={visible}
         onDismiss={() => {
           onDone();
@@ -85,12 +75,11 @@ export default class PickerScreen extends Component {
         bottom
         useSafeArea
         containerStyle={{backgroundColor: Colors.$backgroundDefault}}
-        renderPannableHeader={this.dialogHeader}
-        panDirection={PanningProvider.Directions.DOWN}
-        pannableHeaderProps={{title: 'Custom modal'}}
+        direction={PanningProvider.Directions.DOWN}
+        headerProps={{title: 'Custom modal'}}
       >
         <ScrollView>{children}</ScrollView>
-      </Dialog>
+      </Incubator.Dialog>
     );
   };