Merge branch 'master' into feat/WheelPicker

Author: ethanshar

demo/src/demoApp.js

@@ -1,15 +1,10 @@
 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,
-  Colors,
-  Typography
-} from 'react-native-ui-lib'; // eslint-disable-line
+import {AnimatableManager, Constants, Colors, Typography} from 'react-native-ui-lib'; // eslint-disable-line
 import {registerScreens} from './screens';
 
+
 /** Examples - uncomment when needed */
 // Typography.loadTypographies({
 //   h1: {fontSize: 58, fontWeight: '300', lineHeight: 80},
@@ -21,16 +16,6 @@ import {registerScreens} from './screens';
 //   gold: '#FFD700',
 // });
 
-// ThemeManager.setTheme({
-//   primaryColor: Colors.purple30,
-//   CTA: {
-//     backgroundColor: Colors.purple30,
-//     textColor: Colors.dark10,
-//   },
-//   titleColor: Colors.blue10,
-//   subtitleColor: Colors.blue40,
-// });
-
 // ThemeManager.setComponentTheme('Picker', (props) => {
 //   if (props.useNativePicker) {
 //     return {
@@ -77,7 +62,7 @@ function getDefaultNavigationStyle() {
     statusBar: {
       visible: true,
       style: 'light',
-      backgroundColor: ThemeManager.primaryColor // for Android
+      backgroundColor: Colors.primary // for Android
     },
     layout: {
       backgroundColor: Colors.white,
@@ -88,7 +73,7 @@ function getDefaultNavigationStyle() {
       noBorder: true, // for iOS
       elevation: 0, // for Android
       background: {
-        color: ThemeManager.primaryColor
+        color: Colors.primary
       },
       title: {
         color: Colors.white,

demo/src/index.js

@@ -46,8 +46,11 @@ module.exports = {
       get DrawerScreen() {
         return require('./screens/componentScreens/DrawerScreen').default;
       },
-      get TagsInputScreen() {
-        return require('./screens/componentScreens/TagsInputScreen').default;
+      get ExpandableSectionScreen() {
+        return require('./screens/componentScreens/ExpandableSectionScreen').default;
+      },
+      get ChipsInputScreen() {
+        return require('./screens/componentScreens/ChipsInputScreen').default;
       },
       get HintsScreen() {
         return require('./screens/componentScreens/HintsScreen').default;
@@ -103,7 +106,7 @@ module.exports = {
       get TextScreen() {
         return require('./screens/componentScreens/TextScreen').default;
       },
-      // TODO: fix Expo issues (navigation) before un-commenting 
+      // TODO: fix Expo issues (navigation) before un-commenting
       // get TextFieldScreen() {
       //   return require('./screens/componentScreens/TextFieldScreen').default;
       // },
@@ -157,7 +160,7 @@ module.exports = {
       get LoadingScreen() {
         return require('./screens/componentScreens/LoadingScreen').default;
       },
-      // TODO: fix Expo issues (navigation) before un-commenting 
+      // TODO: fix Expo issues (navigation) before un-commenting
       // get ModalScreen() {
       //   return require('./screens/componentScreens/ModalScreen').default;
       // },

demo/src/screens/CustomScreen.js

@@ -31,6 +31,7 @@ export const navigationData = {
       {title: 'Cards', tags: 'cards feed', screen: 'unicorn.components.CardsScreen'},
       {title: 'Connection Status Bar', tags: 'connection status bar', screen: 'unicorn.components.ConnectionStatusBar'},
       {title: 'Chip', tags: 'chip', screen: 'unicorn.components.ChipScreen'},
+      {title: 'ExpandableSection', tags: 'expandable section', screen: 'unicorn.components.ExpandableSectionScreen'},
       // {title: 'Overlays', tags: 'overlay image', screen: 'unicorn.components.OverlaysScreen'},
       {title: 'Page Control', tags: 'page', screen: 'unicorn.components.PageControlScreen'},
       {title: 'ProgressBar', tags: 'progress bar animated', screen: 'unicorn.animations.ProgressBarScreen'},
@@ -57,7 +58,7 @@ export const navigationData = {
       {title: 'Stepper', tags: 'stepper form', screen: 'unicorn.components.StepperScreen'},
       {title: 'Slider', tags: 'slider', screen: 'unicorn.components.SliderScreen'},
       {title: 'Switch', tags: 'switch toggle', screen: 'unicorn.components.SwitchScreen'},
-      {title: 'TagsInput', tags: 'tags input form', screen: 'unicorn.components.TagsInputScreen'},
+      {title: 'ChipsInput', tags: 'chips tags input form', screen: 'unicorn.components.ChipsInputScreen'},
       {title: 'Masked Inputs', tags: 'text input form mask', screen: 'unicorn.components.MaskedInputScreen'}
     ]
   },

demo/src/screens/MenuStructure.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import {Alert, StyleSheet, ScrollView, FlatList} from 'react-native';
 import * as Animatable from 'react-native-animatable';
-import {AnimatableManager, ThemeManager, Colors, View, Button, ListItem, Text} from 'react-native-ui-lib';//eslint-disable-line
+import {AnimatableManager, Colors, View, Button, ListItem, Text} from 'react-native-ui-lib'; //eslint-disable-line
 
 
 const listItems = [
@@ -31,7 +31,7 @@ export default class ListAnimationsScreen extends Component {
       entranceAnimation: true,
       addingAnimation: false,
       animation: animationType.ENTRANCE,
-      counter: 0,
+      counter: 0
     };
   }
 
@@ -53,12 +53,14 @@ export default class ListAnimationsScreen extends Component {
   addItem() {
     const {items, counter} = this.state;
     const itemsCopy = [...items];
+
     itemsCopy.splice(counter, 0, {id: `${itemsCopy.length}-new`, text: 'Item'});
     this.setState({items: itemsCopy, animation: animationType.ADDING});
   }
 
   renderItem(item, index) {
     const {animation, counter} = this.state;
+
     let animationProps;
     switch (animation) {
       case animationType.FADE_IN:
@@ -98,17 +100,17 @@ export default class ListAnimationsScreen extends Component {
         </View>
         <View row center>
           <Button outline size='medium' margin-10 label={`Add at index: ${counter}`} onPress={() => this.addItem()}/>
-          <Button 
-            round outline size='large' label='+' 
+          <Button
+            round outline size='large' label='+'
             onPress={() => this.setState({counter: counter < items.length ? counter + 1 : counter})}
           />
-          <Button 
-            round outline size='large' margin-10 label='-' 
+          <Button
+            round outline size='large' margin-10 label='-'
             onPress={() => this.setState({counter: counter !== 0 ? counter - 1 : 0})}
           />
         </View>
         <ScrollView style={{flex: 1}}>
-          {visible && 
+          {visible &&
           <FlatList
             data={items}
             renderItem={({item, index}) => this.renderItem(item, index)}
@@ -125,6 +127,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     backgroundColor: Colors.dark60,
     borderBottomWidth: 2,
-    borderColor: ThemeManager.dividerColor,
-  },
+    borderColor: Colors.dark70
+  }
 });

demo/src/screens/animationScreens/ListAnimationsScreen.js

@@ -8,7 +8,6 @@ import tags from '../../assets/icons/tags.png';
 import collections from '../../assets/icons/collections.png';
 import richText from '../../assets/icons/richText.png';
 
-
 export default class ActionBarScreen extends Component {
 
   constructor(props) {

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

@@ -1,18 +1,18 @@
 import React, {Component} from 'react';
 import {StyleSheet, Alert, FlatList} from 'react-native';
 import * as Animatable from 'react-native-animatable';
-import {AnimatableManager, ThemeManager, Colors, BorderRadiuses, ListItem, Text} from 'react-native-ui-lib'; //eslint-disable-line
+import {AnimatableManager, Colors, BorderRadiuses, ListItem, Text} from 'react-native-ui-lib'; //eslint-disable-line
 import orders from '../../data/orders';
 
 
 export default class BasicListScreen extends Component {
 
   constructor(props) {
     super(props);
-    
+
     this.state = {
       onEdit: false,
-      updating: false,
+      updating: false
     };
   }
 
@@ -69,10 +69,10 @@ const styles = StyleSheet.create({
     width: 54,
     height: 54,
     borderRadius: BorderRadiuses.br20,
-    marginHorizontal: 14,
+    marginHorizontal: 14
   },
   border: {
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderColor: ThemeManager.dividerColor,
-  },
+    borderColor: Colors.dark70
+  }
 });

demo/src/screens/componentScreens/BasicListScreen.js

@@ -1,68 +1,68 @@
 import React, {Component} from 'react';
-import {StyleSheet} from 'react-native';
-import {View, Assets, Constants, Card, Button, Colors, Typography, Text, AnimatedScanner} from 'react-native-ui-lib'; //eslint-disable-line
+import {View, Card, Button, Colors, Text, AnimatedScanner} from 'react-native-ui-lib'; //eslint-disable-line
 import posts from '../../data/posts';
 
+
 const featureIcon = require('../../assets/icons/star.png');
 const shareIcon = require('../../assets/icons/share.png');
 
 export default class CardScannerScreen extends Component {
   constructor(props) {
     super(props);
 
-    this.start = this.start.bind(this);
-    this.reset = this.reset.bind(this);
-    this.onBreak = this.onBreak.bind(this);
-
     this.state = {
       progress: 0,
       started: false,
       reset: false,
-      isDone: false,
+      isDone: false
     };
   }
 
-  onBreak({isDone}) {
+  onBreak = ({isDone}) => {
     if (!isDone) {
       this.start();
     } else {
-      this.setState({
-        isDone,
-      });
+      this.setState({isDone});
     }
   }
 
-  start() {
+  start = () => {
     const {progress} = this.state;
+
     this.setState({
       started: true,
       reset: false,
-      progress: progress + 25,
+      progress: progress + 25
     });
   }
 
-  reset() {
+  reset = () => {
     this.setState({
       started: false,
       progress: 0,
       reset: true,
-      isDone: false,
+      isDone: false
     });
   }
 
   render() {
     const {reset} = this.state;
     const post = posts[0];
     const statusColor = post.status === 'Published' ? Colors.green30 : Colors.orange30;
+
     return (
       <View flex useSafeArea>
         <View flex padding-20>
-          <View paddingL-40 height={6} width={'100%'} bg-violet50 marginB-20>
-            <AnimatedScanner backgroundColor={Colors.purple30} progress={98} duration={1600} />
+          <View paddingL-40 marginB-20>
+            <AnimatedScanner
+              backgroundColor={Colors.purple30}
+              progress={98} duration={1600}
+              containerStyle={{backgroundColor: Colors.violet50, height: 6}}
+            />
           </View>
 
           <Card containerStyle={{marginBottom: 15}} onPress={() => console.log('press on a card')}>
-            <Card.Image height={115} imageSource={post.coverImage} />
+            <Card.Image height={115} source={post.coverImage}/>
             <View padding-20>
               <Text text40 color={Colors.dark10}>
                 {post.title}
@@ -80,8 +80,8 @@ export default class CardScannerScreen extends Component {
                 {post.likes} Likes
               </Text>
               <View row spread>
-                <Button style={{marginRight: 10}} text90 link iconSource={featureIcon} label="Feature" />
-                <Button text90 link iconSource={shareIcon} label="Share" />
+                <Button style={{marginRight: 10}} text90 link iconSource={featureIcon} label="Feature"/>
+                <Button text90 link iconSource={shareIcon} label="Share"/>
               </View>
             </View>
 
@@ -107,8 +107,8 @@ export default class CardScannerScreen extends Component {
         </View>
 
         <View row center padding-20>
-          <Button size="medium" label="Reset" onPress={this.reset} disabled={!this.state.isDone} />
-          <Button marginL-10 size="medium" label="Publish" onPress={this.start} disabled={this.state.started} />
+          <Button size="medium" label="Reset" onPress={this.reset} disabled={!this.state.isDone}/>
+          <Button marginL-10 size="medium" label="Publish" onPress={this.start} disabled={this.state.started}/>
         </View>
       </View>
     );