Merge branch 'master' into release

demo/src/screens/ExampleScreenPresenter.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React from 'react';
 import {StyleSheet} from 'react-native';
-import {Checkbox, ColorPalette, Colors, RadioButton, RadioGroup, Slider, Text, View} from 'react-native-ui-lib';
+import {Checkbox, Switch, ColorPalette, Colors, RadioButton, RadioGroup, Slider, Text, View} from 'react-native-ui-lib';
 
 export function renderHeader(title, others) {
   return (
@@ -18,7 +18,7 @@ export function renderBooleanOption(title, key) {
       <Text text70 style={{flex: 1}}>
         {title}
       </Text>
-      <Checkbox
+      <Switch
         useCustomTheme
         key={key}
         textID={key}

demo/src/screens/MainScreen.js

@@ -243,7 +243,7 @@ class MainScreen extends Component {
 
         {showCarousel && (
           <TabController asCarousel>
-            <TabController.TabBar items={_.map(data, section => ({label: section.title}))}/>
+            <TabController.TabBar testID={'mainScreenTabBar'} items={_.map(data, section => ({label: section.title, testID: `section.${section.title}`}))}/>
             {this.renderPages(data)}
           </TabController>
         )}

demo/src/screens/SettingsScreen.js

@@ -61,7 +61,8 @@ class SettingsScreen extends Component {
   };
 
   render() {
-    const {defaultScreen, showRefreshMessage, isRTL} = this.state;
+    const {defaultScreen, showRefreshMessage, isRTL, screens} = this.state;
+    const filteredScreens = _.filter(screens, screen => !_.isUndefined(screen.value));
 
     return (
       <View flex padding-25 bg-grey80>
@@ -77,7 +78,7 @@ class SettingsScreen extends Component {
             value={defaultScreen}
             onChange={this.setDefaultScreen}
           >
-            {_.map(this.state.screens, screen => (
+            {_.map(filteredScreens, screen => (
               <Picker.Item key={screen.value} value={screen}/>
             ))}
           </Picker>

demo/src/screens/componentScreens/DrawerScreen.js

@@ -1,199 +1,122 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import {StyleSheet, Alert, ScrollView} from 'react-native';
+import {StyleSheet, ScrollView, LayoutAnimation} from 'react-native';
 import {Colors, Typography, View, Drawer, Text, Button, ListItem, Avatar, AvatarHelper} from 'react-native-ui-lib'; //eslint-disable-line
 import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 import conversations from '../../data/conversations';
 
+import {renderBooleanOption, renderSliderOption, renderColorOption} from '../ExampleScreenPresenter';
 
-const collectionsIcon = require('../../assets/icons/collections.png');
-const starIcon = require('../../assets/icons/star.png');
-const shareIcon = require('../../assets/icons/share.png');
-const videoIcon = require('../../assets/icons/video.png');
-const tagsIcon = require('../../assets/icons/tags.png');
+const ITEMS = {
+  read: {icon: require('../../assets/icons/mail.png'), text: 'Read', background: Colors.green30},
+  archive: {icon: require('../../assets/icons/archive.png'), text: 'Archive', background: Colors.blue30},
+  delete: {icon: require('../../assets/icons/delete.png'), text: 'Delete', background: Colors.red30}
+};
 
 class DrawerScreen extends Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      itemsTintColor: undefined,
-      leftItem: {icon: collectionsIcon, text: 'Archive', onPress: this.onLeftItemPressed},
-      rightItems: [
-        {icon: starIcon, text: 'Accessories', onPress: this.onItemPress, background: Colors.violet10},
-        {icon: shareIcon, text: 'Share', onPress: this.onItemPress, background: Colors.violet30},
-        {icon: videoIcon, text: 'Video', onPress: this.onItemPress, background: Colors.violet40},
-        // {icon: tagsIcon, text: 'Video', background: Colors.red30},
-      ],
+      hideItem: false,
+      showRightItems: true,
+      showLeftItem: true,
+      fullSwipeLeft: true
     };
   }
 
-  onItemPress = () => {
-    Alert.alert('Right drawer item pressed');
-
-    this.toggleDynamicItem();
-    this.firstDrawer.closeDrawer();
-  };
-  onItemPress2 = () => {
-    const {itemsTintColor} = this.state;
-    const color = itemsTintColor === undefined ? Colors.blue30 : undefined;
-
-    this.setState({itemsTintColor: color});
-  };
-  onLeftItemPressed = () => {
-    Alert.alert('Left drawer item pressed');
-  };
-  onContentPress(id) {
-    Alert.alert(`List item #${id + 1} pressed`);
-  }
-  onButtonPress(id) {
-    Alert.alert(`Button '${id}' pressed`);
-  }
-
-  async setItemWidth(item) {
-    if (item && !item.width && !_.isEmpty(item.text)) {
-      const horizontalPadding = 12;
-      const typography = Typography.text70;
-      const width = await Typography.measureWidth(item.text, typography);
-      const itemCopy = item;
-      itemCopy.width = width + horizontalPadding * 2;
-      return itemCopy;
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.hideItem && prevState.hideItem) {
+      this.setState({
+        hideItem: false
+      });
     }
   }
 
-  toggleDynamicItem() {
-    const {rightItems} = this.state;
-    let newItem;
-    if (rightItems[0].text === 'Accessories') {
-      newItem = {icon: starIcon, text: 'More', onPress: this.onItemPress, background: Colors.violet10};
-    } else {
-      newItem = {
-        icon: starIcon,
-        text: 'Accessories',
-        onPress: this.onItemPress,
-        background: Colors.violet10
-      };
-    }
-    rightItems[0] = newItem;
-    this.setState({rightItems});
-  }
+  onWillFullSwipeLeft = () => {
+
+    // TODO: consider including this functionality as part of the drawer component
+    setTimeout(() => {
+      LayoutAnimation.configureNext({
+        update: {
+          type: LayoutAnimation.Types.easeInEaseOut,
+          property: LayoutAnimation.Properties.scaleY
+        },
+        delete: {
+          type: LayoutAnimation.Types.easeInEaseOut,
+          property: LayoutAnimation.Properties.scaleY,
+          duration: 2000
+        },
+        duration: 120
+      });
+      this.setState({hideItem: true});
+    }, 200);
+  };
 
-  renderContent(id, row) {
-    const initials = AvatarHelper.getInitials(row.name);
+  renderListItem() {
     return (
-      <ListItem key={id} onPress={() => this.onContentPress(id)} style={styles.listContent}>
-        <ListItem.Part left>
-          <Avatar
-            source={row.thumbnail ? {uri: row.thumbnail} : null}
-            label={initials}
-            badgeProps={{backgroundColor: Number(id) % 3 === 0 ? Colors.green30 : undefined}}
-            containerStyle={{marginHorizontal: 18}}
-            backgroundColor={Colors.white}
-          />
-        </ListItem.Part>
-        <ListItem.Part middle containerStyle={styles.border}>
-          <Text text70>{row.name}</Text>
-        </ListItem.Part>
-      </ListItem>
+      <View bg-grey80 paddingH-20 paddingV-10 row centerV style={{borderBottomWidth: 1, borderColor: Colors.grey60}}>
+        <Avatar source={{uri: conversations[0].thumbnail}}/>
+        <View marginL-20>
+          <Text text70R>{conversations[0].name}</Text>
+          <Text text80 marginT-2>
+            {conversations[0].text}
+          </Text>
+        </View>
+      </View>
     );
   }
 
   render() {
-    const {leftItem, rightItems} = this.state;
-
-    return (
-      <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
-        <Drawer
-          leftItem={leftItem}
-          rightItems={rightItems}
-          style={styles.drawer}
-          itemsIconSize={20}
-          ref={r => this.firstDrawer = r}
-        >
-          {this.renderContent('0', conversations[0])}
-        </Drawer>
-
-        <Drawer
-          leftItem={leftItem}
-          rightItems={[
-            {icon: shareIcon, text: 'Share', onPress: this.onItemPress},
-            {icon: videoIcon, text: 'Video', onPress: this.onItemPress, background: Colors.blue10},
-          ]}
-          style={styles.drawer}
-        >
-          {this.renderContent('1', conversations[1])}
-        </Drawer>
-
-        {/* <Drawer
-          // leftItem={leftItem}
-          rightItems={rightItems}
-          style={styles.drawer}
-          equalWidths
-        >
-          {this.renderContent('1', conversations[1])}
-        </Drawer> */}
+    const {
+      showRightItems,
+      showLeftItem,
+      fullSwipeLeft,
+      itemsTintColor,
+      bounciness,
+      itemsIconSize,
+      hideItem
+    } = this.state;
+
+    const drawerProps = {
+      itemsTintColor,
+      itemsIconSize,
+      bounciness,
+      fullSwipeLeft,
+      onWillFullSwipeLeft: this.onWillFullSwipeLeft
+    };
+    if (showRightItems) {
+      drawerProps.rightItems = [ITEMS.read, ITEMS.archive];
+    }
 
-        <Drawer
-          leftItem={{text: 'Archive', background: Colors.blue10, width: 100, onPress: this.onLeftItemPressed}}
-          // rightItems={rightItems}
-          style={styles.drawer}
-          itemsTextStyle={{fontSize: 18, fontWeight: 'bold'}}
-        >
-          {this.renderContent('2', conversations[2])}
-        </Drawer>
+    if (showLeftItem) {
+      drawerProps.leftItem = ITEMS.delete;
+    }
 
-        <View style={{paddingHorizontal: 50}}>
-          <Drawer
-            leftItem={leftItem}
-            rightItems={[rightItems[1], rightItems[2]]}
-            itemsIconSize={24}
-            style={{marginTop: 20}}
-            onPress={this.onPress}
-          >
-            {this.renderContent('2', conversations[2])}
-          </Drawer>
+    return (
+      <View flex>
+        <View padding-20 paddingB-0>
+          <Text text40 marginB-20>
+            Drawer
+          </Text>
         </View>
-
-        <Drawer
-          leftItem={{icon: collectionsIcon, background: Colors.blue10, width: 100}}
-          rightItems={[
-            {icon: starIcon, background: Colors.dark60},
-            {icon: shareIcon, background: Colors.yellow20},
-            {icon: videoIcon, background: Colors.red30, onPress: this.onItemPress2},
-            {icon: tagsIcon, background: Colors.green30},
-          ]}
-          style={styles.drawer}
-          itemsIconSize={30}
-          itemsTintColor={this.state.itemsTintColor}
-        >
-          {this.renderContent('4', conversations[4])}
-        </Drawer>
-
-        <Drawer
-          leftItem={leftItem}
-          rightItems={rightItems}
-          style={styles.drawer}
-          itemsTextStyle={{fontSize: 12}}
-        >
-          <View style={styles.rowContent}>
-            <View style={styles.rowIcon}/>
-            <View>
-              <Text style={styles.rowTitle}>Row Title</Text>
-              <Text style={styles.rowSubtitle}>Drag the row left and right</Text>
-            </View>
-            <View style={styles.rowButtonContainer}>
-              <Button
-                label={'1'}
-                size={'small'}
-                round
-                backgroundColor={Colors.yellow30}
-                white
-                onPress={() => this.onButtonPress('1')}
-              />
-            </View>
+        {!hideItem && (
+          <Drawer key={Date.now()} {...drawerProps}>
+            {this.renderListItem()}
+          </Drawer>
+        )}
+
+        <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
+          <View padding-20>
+            {renderBooleanOption.call(this, 'rightItems', 'showRightItems')}
+            {renderBooleanOption.call(this, 'leftItem', 'showLeftItem')}
+            {showLeftItem && renderBooleanOption.call(this, 'fullSwipeLeft', 'fullSwipeLeft')}
+            {renderColorOption.call(this, 'icon+text color', 'itemsTintColor')}
+            {renderSliderOption.call(this, 'bounciness', 'bounciness', {min: 5, max: 15, step: 1, initial: 5})}
+            {renderSliderOption.call(this, 'iconSize', 'itemsIconSize', {min: 15, max: 25, step: 1, initial: 20})}
           </View>
-        </Drawer>
-      </ScrollView>
+        </ScrollView>
+      </View>
     );
   }
 }

demo/src/screens/componentScreens/FloatingButtonScreen.js

@@ -26,12 +26,12 @@ export default class FloatingButtonScreen extends Component {
 
   notNow = () => {
     Alert.alert('Not Now!');
-    this._hideButton();
+    this.hideButton();
   }
 
   close = () => {
     Alert.alert('Closed.');
-    this._hideButton();
+    this.hideButton();
   }
 
   render() {