Merge branch 'master' into feat/WheelPicker

Author: ethanshar

.prettierrc

@@ -1,11 +1,6 @@
 {
-  // "eslintIntegration": true,
-  // "printWidth": 120,
-  // "useTabs": false,
-  // "semi": true,
-  // "singleQuote": true,
-  // "jsxSingleQuote": false,
-  // "trailingComma": "none",
-  // "bracketSpacing": false,
-  // "arrowParens": "avoid"
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "singleQuote": true,
+  "bracketSpacing": false
 }

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/assets/icons/refresh.png

@@ -1,9 +1,32 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import {Navigation} from 'react-native-navigation';
 import * as Animatable from 'react-native-animatable';
-import {AnimatableManager, ThemeManager, Constants, Assets, Colors, Typography} from 'react-native-ui-lib'; // eslint-disable-line
+import {
+  AnimatableManager,
+  ThemeManager,
+  Constants,
+  Assets,
+  Colors,
+  Typography,
+  Spacings
+} from 'react-native-ui-lib'; // eslint-disable-line
 import {registerScreens} from './screens';
 
+Assets.loadAssetsGroup('icons.demo', {
+  refresh: require('./assets/icons/refresh.png'),
+  search: require('./assets/icons/search.png')
+});
+
+Typography.loadTypographies({
+  h1: {...Typography.text40},
+  h2: {...Typography.text50},
+  h3: {...Typography.text60}
+});
+
+Spacings.loadSpacings({
+  page: Spacings.s5
+});
+
 /** Examples - uncomment when needed */
 // Typography.loadTypographies({
 //   h1: {fontSize: 58, fontWeight: '300', lineHeight: 80},
@@ -36,10 +59,6 @@ import {registerScreens} from './screens';
 //   }
 // });
 
-// Assets.loadAssetsGroup('icons.general', {
-//   camera: require('./assets/icons/cameraSelected.png'),
-// });
-
 // AnimatableManager.loadAnimationPresets({
 //   preset1: {
 //     animation: 'fadeIn',
@@ -66,7 +85,9 @@ import {registerScreens} from './screens';
 //   },
 // };
 // IMPORTANT! Make uilib's animations available globally for the app's use (option to pass adittional animation definitions)
-Animatable.initializeRegistryWithDefinitions(AnimatableManager.loadAnimationDefinitions(/** customAnimationsDefinitions */));
+Animatable.initializeRegistryWithDefinitions(
+  AnimatableManager.loadAnimationDefinitions(/** customAnimationsDefinitions */)
+);
 
 function getDefaultNavigationStyle() {
   return {
@@ -89,13 +110,17 @@ function getDefaultNavigationStyle() {
       title: {
         color: Colors.white,
         fontSize: Typography.text60H.fontSize,
-        fontFamily: Constants.isAndroid ? Typography.text65H.fontFamily : '.SFUIText-Heavy',
+        fontFamily: Constants.isAndroid
+          ? Typography.text65H.fontFamily
+          : '.SFUIText-Heavy',
         fontWeight: 'heavy'
       },
       subtitle: {
         color: Colors.white,
         fontSize: Typography.text80T.fontSize,
-        fontFamily: Constants.isAndroid ? Typography.text80.fontFamily : '.SFUIText-Medium',
+        fontFamily: Constants.isAndroid
+          ? Typography.text80.fontFamily
+          : '.SFUIText-Medium',
         fontWeight: 'medium'
       },
       backButton: {

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

@@ -59,13 +59,13 @@ export function renderBooleanGroup(title, options) {
   );
 }
 
-export function renderRadioGroup(title, key, options, {isRow, afterValueChanged} = {}) {
+export function renderRadioGroup(title, key, options, {isRow, afterValueChanged, useValueAsLabel} = {}) {
   const value = this.state[key];
   return (
     <View marginB-s2>
-      <Text text70M marginB-s2>
+      {!_.isUndefined(title) && <Text text70M marginB-s2>
         {title}
-      </Text>
+      </Text>}
       <RadioGroup
         row={isRow}
         style={isRow && styles.rowWrap}
@@ -80,7 +80,7 @@ export function renderRadioGroup(title, key, options, {isRow, afterValueChanged}
               key={key}
               marginB-s2
               marginR-s2={isRow}
-              label={key}
+              label={useValueAsLabel ? value : key}
               value={value}
             />
           );

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

@@ -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/assets/icons/[email protected]

@@ -1,18 +1,18 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet} from 'react-native';
-import {View, Text, Card, Incubator} from 'react-native-ui-lib'; //eslint-disable-line
+import {View, Incubator, 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>
         <Incubator.WheelPicker/>
       </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
-  container: {}
+  container: {},
 });

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

@@ -15,6 +15,29 @@ export default class CardsScreen extends Component {
     selected2: true
   };
 
+  renderCoupon = (options) => {
+    return (
+      <Card {...options} flex height={160} onPress={() => {}} useNative activeOpacity={1} activeScale={0.96}>
+        <Card.Section
+          backgroundColor={Colors.red30}
+          padding-20
+          flex-3
+          content={[
+            {text: 'Special sale!', text70: true, white: true},
+            {text: '10%', text60: true, white: true}
+          ]}
+          contentStyle={{alignItems: 'center'}}
+        />
+        <Card.Section
+          padding-20
+          flex
+          content={[{text: 'All site', text70: true, dark10: true, flex: 1, textAlign: 'center'}]}
+          contentStyle={{alignItems: 'center'}}
+        />
+      </Card>
+    );
+  };
+
   render() {
     const {selected1, selected2} = this.state;
 
@@ -37,7 +60,7 @@ export default class CardsScreen extends Component {
               contentContainerStyle={{padding: 5}}
               showsHorizontalScrollIndicator={false}
             >
-              {_.times(4, i => {
+              {_.times(4, (i) => {
                 return (
                   <Card key={i} width={100} style={{marginRight: 20}}>
                     <View padding-15>
@@ -209,6 +232,10 @@ export default class CardsScreen extends Component {
                 </Card>
               );
             })}
+            <View row spread>
+              {this.renderCoupon({'marginR-10': true})}
+              {this.renderCoupon({'marginL-10': true})}
+            </View>
           </View>
         </ScrollView>
       </View>

demo/src/assets/icons/search.png

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

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

@@ -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>
     );
   }