Merge branch 'master' into release

Author: ethanshar

babel.config.js

@@ -1,11 +1,8 @@
 module.exports = {
   env: {
     test: {
-      presets: ['module:metro-react-native-babel-preset'],
-      retainLines: true,
-    },
+      presets: ['module:metro-react-native-babel-preset']
+    }
   },
-  presets: ['module:metro-react-native-babel-preset'],
-  retainLines: true,
-  plugins: ['transform-inline-environment-variables'],
+  presets: ['module:metro-react-native-babel-preset']
 };

demo/src/screens/MainScreen.js

@@ -113,7 +113,7 @@ class MainScreen extends Component {
         const filteredMenuSection = _.filter(menuSection.screens, menuItem => {
           const {title, description, tags} = menuItem;
           return (
-            _.includes(_.lowerCase(title), _.toLower(filterText)) ||
+            _.includes(_.toLower(title), _.toLower(filterText)) ||
             _.includes(_.toLower(description), _.toLower(filterText)) ||
             _.includes(_.toLower(tags), _.toLower(filterText))
           );
@@ -137,6 +137,7 @@ class MainScreen extends Component {
       <TextField
         ref={r => (this.input = r)}
         value={this.state.filterText}
+        testID="uilib.search_for_component"
         placeholder="Search for your component..."
         onChangeText={this.filterExplorerScreens}
         onBlur={this.onSearchBoxBlur}
@@ -242,8 +243,8 @@ class MainScreen extends Component {
         {showResults && this.renderSearchResults(filteredNavigationData)}
 
         {showCarousel && (
-          <TabController asCarousel>
-            <TabController.TabBar testID={'mainScreenTabBar'} items={_.map(data, section => ({label: section.title, testID: `section.${section.title}`}))}/>
+          <TabController asCarousel items={_.map(data, section => ({label: section.title, testID: `section.${section.title}`}))}>
+            <TabController.TabBar testID={'mainScreenTabBar'}/>
             {this.renderPages(data)}
           </TabController>
         )}

demo/src/screens/PlaygroundScreen.tsx

@@ -1,20 +1,26 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {View, Text, Card,} from 'react-native-ui-lib'; //eslint-disable-line
+import {View, Text, Card, TextField, Button} from 'react-native-ui-lib'; //eslint-disable-line
 
 export default class PlaygroundScreen extends Component {
   render() {
     return (
-      <View center bg-dark80 flex>
+      <View bg-dark80 flex padding-20>
+        <View marginT-20>
+          <TextField placeholder="Placeholder" />
+        </View>
         <Card height={100} center padding-20>
           <Text text50>Playground Screen</Text>
         </Card>
+        <View flex center>
+          <Button marginV-20 label="Button"/>
+        </View>
       </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
-  container: {}
+  container: {},
 });

demo/src/screens/componentScreens/CheckboxScreen.js renamed to demo/src/screens/componentScreens/CheckboxScreen.tsx

@@ -10,7 +10,7 @@ class CheckboxScreen extends Component {
     value4: true,
     value5: false
   };
-  
+
   render() {
     return (
       <View useSafeArea flex>

demo/src/screens/componentScreens/DateTimePickerScreen.js

@@ -1,27 +1,42 @@
 import React, {Component} from 'react';
 import {DateTimePicker, View, Text} from 'react-native-ui-lib'; // eslint-disable-line
 
-
 export default class DateTimePickerScreen extends Component {
-  
   render() {
     return (
-      <View flex padding-20>
-        <Text text40 marginB-40>Date Time Picker</Text>
-        
-        <DateTimePicker 
-          title={'Date'} 
-          placeholder={'Select a date'} 
+      <View flex padding-s5>
+        <Text text40>Date Time Picker</Text>
+        <DateTimePicker
+          containerStyle={{marginVertical: 20}}
+          title={'Date'}
+          placeholder={'Select a date'}
           // dateFormat={'MMM D, YYYY'}
-          // value={new Date('October 13, 2014')} 
+          // value={new Date('October 13, 2014')}
         />
-        <DateTimePicker 
-          mode={'time'} 
-          title={'Time'} 
+        <DateTimePicker
+          mode={'time'}
+          title={'Time'}
           placeholder={'Select time'}
           // timeFormat={'h:mm A'}
           // value={new Date('2015-03-25T12:00:00-06:30')}
         />
+
+        <Text text60R marginT-40>
+          Disabled
+        </Text>
+        <DateTimePicker
+          containerStyle={{marginBottom: 20}}
+          editable={false}
+          title={'Date'}
+          placeholder={'Select a date'}
+        />
+        <DateTimePicker
+          editable={false}
+          mode={'time'}
+          title={'Time'}
+          placeholder={'Select time'}
+          value={new Date('2015-03-25T12:00:00-06:30')}
+        />
       </View>
     );
   }

demo/src/screens/componentScreens/FloatingButtonScreen.js

@@ -83,14 +83,12 @@ export default class FloatingButtonScreen extends Component {
           visible={this.state.showButton}
           button={{
             label: 'Approve', 
-            onPress: this.close, 
-            labelStyle: {fontWeight: '400'}
+            onPress: this.close
           }}
           secondaryButton={{
             label: 'Not now', 
             onPress: this.notNow, 
-            color: Colors.red30, 
-            labelStyle: {fontWeight: '400'}
+            color: Colors.red30
           }}
           // bottomMargin={80}
           // hideBackgroundOverlay

demo/src/screens/componentScreens/ImageScreen.js renamed to demo/src/screens/componentScreens/ImageScreen.tsx

@@ -15,7 +15,7 @@ class SwitchScreen extends Component {
     return (
       <View flex bottom padding-20>
         <View flex center>
-          <Switch value={this.state.value1} onValueChange={value1 => this.setState({value1})} style={{marginBottom: 20}}/>
+          <Switch testID="switch" value={this.state.value1} onValueChange={value1 => this.setState({value1})} style={{marginBottom: 20}}/>
           <Switch
             onColor={Colors.purple30}
             offColor={Colors.purple60}

demo/src/screens/componentScreens/OverlaysScreen.js renamed to demo/src/screens/componentScreens/OverlaysScreen.tsx

@@ -109,10 +109,11 @@ class TabControllerScreen extends Component {
           key={key}
           asCarousel={asCarousel}
           selectedIndex={selectedIndex}
-          onChangeIndex={this.onChangeIndex}
+          onChangeIndex={this.onChangeIndex}  
+          items={items}
         >
           <TabController.TabBar
-            items={items}
+            // items={items}
             // key={key}
             // uppercase
             // indicatorStyle={{backgroundColor: 'green', height: 3}}