Merge branch 'master' into release

Author: ethanshar

demo/src/assets/icons/add.png

@@ -1,6 +1,7 @@
 import {Assets, Typography, Spacings} from 'react-native-ui-lib'; // eslint-disable-line
 
 Assets.loadAssetsGroup('icons.demo', {
+  add: require('./assets/icons/add.png'),
   close: require('./assets/icons/close.png'),
   dashboard: require('./assets/icons/dashboard.png'),
   image: require('./assets/icons/image.png'),

demo/src/assets/icons/[email protected]

@@ -98,6 +98,7 @@ class MainScreen extends Component {
 
   setDefaultScreen = item => {
     AsyncStorage.setItem('uilib.defaultScreen', item.screen);
+    this.openScreen(item);
   };
 
   openScreen = row => {
@@ -158,7 +159,7 @@ class MainScreen extends Component {
         hideUnderline
         floatingPlaceholder={false}
         text70
-        rightButtonProps={{iconSource: Assets.icons.search, style: {marginRight: 12}}}
+        rightButtonProps={{iconSource: Assets.icons.search, style: {marginRight: 12, alignSelf: 'center'}}}
       />
     );
   };

demo/src/assets/icons/[email protected]

@@ -100,6 +100,11 @@ export const navigationData = {
         tags: 'scroll reach start end',
         screen: 'unicorn.components.WithScrollReachedScreen'
       },
+      {
+        title: 'Fader',
+        tags: 'scroll fader',
+        screen: 'unicorn.components.FaderScreen'
+      },
       {title: 'Wizard', tags: 'wizard', screen: 'unicorn.components.WizardScreen'}
     ]
   },
@@ -142,7 +147,8 @@ export const navigationData = {
   Incubator: {
     title: 'Incubator (Experimental)',
     screens: [
-      {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'}
+      {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
+      {title: '(New) TextField', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'}
     ]
   },
   Inspirations: {

demo/src/assets/icons/[email protected]

@@ -24,17 +24,20 @@ const ITEMS = {
   read: {
     icon: require('../../assets/icons/mail.png'),
     text: 'Read',
-    background: Colors.green30
+    background: Colors.green30,
+    testID: "left_item_read"
   },
   archive: {
     icon: require('../../assets/icons/archive.png'),
     text: 'Archive',
-    background: Colors.blue30
+    background: Colors.blue30,
+    testID: "right_item_archive"
   },
   delete: {
     icon: require('../../assets/icons/delete.png'),
     text: 'Delete',
-    background: Colors.red30
+    background: Colors.red30,
+    testID: "right_item_delete"
   }
 };
 
@@ -131,18 +134,21 @@ class DrawerScreen extends Component {
               label="Open left"
               style={{margin: 3}}
               size={'xSmall'}
+              testID="open_left_btn"
             />
             <Button
               onPress={this.openLeftDrawerFull}
               label="Full left swipe"
               style={{margin: 3}}
               size={'xSmall'}
+              testID="swipe_left_btn"
             />
             <Button
               onPress={this.toggleLeftDrawer}
               label="Left toggle"
               style={{margin: 3}}
               size={'xSmall'}
+              testID="toggle_left_btn"
             />
           </View>
 
@@ -152,6 +158,7 @@ class DrawerScreen extends Component {
               label="Close"
               style={{margin: 3}}
               size={'xSmall'}
+              testID="close_btn"
             />
           </View>
 
@@ -161,12 +168,14 @@ class DrawerScreen extends Component {
               label="Open right"
               style={{margin: 3}}
               size={'xSmall'}
+              testID="open_right_btn"
             />
             <Button
               onPress={this.openRightDrawerFull}
               label="Full right swipe"
               style={{margin: 3}}
               size={'xSmall'}
+              testID="swipe_right_btn"
             />
           </View>
         </View>
@@ -175,6 +184,8 @@ class DrawerScreen extends Component {
   }
 
   renderListItem() {
+    const data = conversations[2];
+
     return (
       <View
         bg-grey80
@@ -183,13 +194,14 @@ class DrawerScreen extends Component {
         row
         centerV
         style={{borderBottomWidth: 1, borderColor: Colors.grey60}}
+        testID="drawer_item"
       >
-        {this.state.unread && <Badge size={'pimpleSmall'} backgroundColor={Colors.red30} containerStyle={{marginRight: 8}}/>}
-        <Avatar source={{uri: conversations[0].thumbnail}}/>
+        {this.state.unread && <Badge testID="drawer_item_badge" size={'pimpleSmall'} backgroundColor={Colors.red30} containerStyle={{marginRight: 8}}/>}
+        <Avatar source={{uri: data.thumbnail}}/>
         <View marginL-20>
-          <Text text70R={!this.state.unread} text70BO={this.state.unread}>{conversations[0].name}</Text>
+          <Text text70R={!this.state.unread} text70BO={this.state.unread}>{data.name}</Text>
           <Text text80 marginT-2>
-            {conversations[0].text}
+            {data.text}
           </Text>
         </View>
       </View>
@@ -218,14 +230,16 @@ class DrawerScreen extends Component {
       fullSwipeLeft,
       onWillFullSwipeLeft: this.deleteItem,
       onToggleSwipeLeft: this.toggleReadState,
-      leftToggleHapticTrigger: this.triggerLeftToggleHaptic
+      leftToggleHapticTrigger: this.triggerLeftToggleHaptic,
+      testID: 'drawer'
     };
     if (showRightItems) {
       drawerProps.rightItems = [{...ITEMS.delete, onPress: this.deleteItem}, ITEMS.archive];
     }
 
     if (showLeftItem) {
       drawerProps.leftItem = {
+        ...ITEMS.read,
         icon: this.state.unread ? require('../../assets/icons/mail.png') : require('../../assets/icons/refresh.png'),
         text: !this.state.unread ? 'Unread' : 'Read', 
         background: this.state.unread ? Colors.green30 : Colors.orange30,
@@ -245,6 +259,7 @@ class DrawerScreen extends Component {
             iconSource={Assets.icons.demo.refresh}
             onPress={this.showItem}
             disabled={!hideItem}
+            testID="refresh_btn"
           />
         </View>
         {!hideItem && (

demo/src/assets/icons/[email protected]

@@ -0,0 +1,90 @@
+import _ from 'lodash';
+import React, {Component} from 'react';
+import {StyleSheet, ScrollView} from 'react-native';
+import {
+  Colors,
+  Text,
+  View,
+  Fader,
+  withScrollReached,
+  WithScrollReachedProps
+} from 'react-native-ui-lib';
+import {renderHeader} from '../ExampleScreenPresenter';
+
+const numberOfItems = 3;
+const faderPosition = Fader.position.BOTTOM;
+const itemWidth = 100;
+const itemHeight = 100;
+const tintColor = undefined;
+
+const horizontal =
+  faderPosition === Fader.position.LEFT ||
+  faderPosition === Fader.position.RIGHT;
+
+class FaderScreen extends Component<WithScrollReachedProps> {
+  renderItem = (index: number) => {
+    return (
+      <View key={index} style={styles.item}>
+        <Text>{index + 1}</Text>
+      </View>
+    );
+  };
+
+  render() {
+    const {scrollReachedProps} = this.props;
+    const visible =
+      faderPosition === Fader.position.BOTTOM ||
+      faderPosition === Fader.position.RIGHT
+        ? !scrollReachedProps.isScrollAtEnd
+        : !scrollReachedProps.isScrollAtStart;
+
+    return (
+      <View margin-10>
+        {renderHeader('Fader', {'marginB-10': true})}
+        <View center>
+          <View style={styles.container}>
+            <ScrollView
+              horizontal={horizontal}
+              style={styles.scrollView}
+              showsVerticalScrollIndicator={false}
+              showsHorizontalScrollIndicator={false}
+              scrollEventThrottle={16}
+              onScroll={scrollReachedProps.onScroll}
+            >
+              {_.times(numberOfItems, this.renderItem)}
+            </ScrollView>
+            <Fader
+              visible={visible}
+              position={faderPosition}
+              tintColor={tintColor}
+            />
+          </View>
+        </View>
+      </View>
+    );
+  }
+}
+
+export default withScrollReached(FaderScreen, {
+  horizontal
+});
+
+const styles = StyleSheet.create({
+  container: {
+    width: horizontal ? undefined : itemWidth,
+    height: horizontal ? itemHeight : undefined
+  },
+  scrollView: {
+    width: horizontal ? 240 : undefined,
+    height: horizontal ? undefined : 240
+  },
+  item: {
+    height: itemHeight,
+    width: itemWidth,
+    backgroundColor: Colors.grey60,
+    borderColor: Colors.grey40,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});