Merge branch 'master' of github.com:GeekyAnts/NativeBase into develop…

…ment
GeekyAnts · Nov 3, 2016 · 04117da · 04117da
2 parents d8b7137 + de8f468
commit 04117da
Show file tree

Hide file tree

Showing 40 changed files with 794 additions and 276 deletions.
diff --git a/Components/Themes/light.js b/Components/Themes/light.js
@@ -112,6 +112,13 @@ export default {
     tabBarActiveTextColor: (Platform.OS === 'ios' ) ? '#007aff' : '#fff',
     tabActiveBgColor: (Platform.OS=='ios') ? '#cde1f9' : undefined,
 
+    //Tab
+    tabDefaultBg: (Platform.OS === 'ios' ) ? '#F8F8F8' : '#4179F7',
+    topTabBarTextColor: (Platform.OS === 'ios' ) ? '#6b6b6b' : '#b3c7f9',
+    topTabBarActiveTextColor: (Platform.OS === 'ios' ) ? '#007aff' : '#fff',
+    topTabActiveBgColor: (Platform.OS=='ios') ? '#cde1f9' : undefined,
+    topTabBarBorderColor: (Platform.OS === 'ios' ) ? '#007aff' : '#fff',
+
 
     // Header
     iosToolbarBtnColor: '#007aff',

diff --git a/Components/Widgets/Badge.js b/Components/Widgets/Badge.js
@@ -46,7 +46,7 @@ export default class BadgeNB extends NativeBaseComponent {
     }
     render() {
         return(
-            <View {...this.prepareRootProps()}>
+            <View ref={c => this._root = c} {...this.prepareRootProps()}>
                 <Text style={{ color: (this.props.textStyle && this.props.textStyle.color) ? this.props.textStyle.color : this.getTheme().badgeColor,
                                 fontSize: (this.props.textStyle && this.props.textStyle.fontSize) ? this.props.textStyle.fontSize : this.getTheme().fontSizeBase,
                                 lineHeight: (this.props.textStyle && this.props.textStyle.lineHeight) ? this.props.textStyle.lineHeight : this.getTheme().lineHeight-1,

diff --git a/Components/Widgets/Button.js b/Components/Widgets/Button.js
@@ -29,7 +29,8 @@ export default class Button extends NativeBaseComponent {
         rounded : React.PropTypes.bool,
         large : React.PropTypes.bool,
         small : React.PropTypes.bool,
-        inputButton : React.PropTypes.bool
+        inputButton : React.PropTypes.bool,
+        tabButton : React.PropTypes.bool
     }
 
     getInitialStyle() {
@@ -125,12 +126,15 @@ export default class Button extends NativeBaseComponent {
                 (this.props.bordered) ? this.getTheme().btnPrimaryBg :
                 (this.props.color) ? this.props.color :
                 (this.props.header) ? this.getTheme().toolbarTextColor :
+                (this.props.activeTabButton) ? this.getTheme().topTabBarActiveTextColor :
+                (this.props.tabButton) ? this.getTheme().topTabBarTextColor :
                 (this.props.transparent) ? this.getContextForegroundColor() :
                 this.getTheme().inverseTextColor,
-
+            marginBottom: ((this.props.vertical) && (Platform.OS == 'android')) ? 2 : undefined,
             fontSize: (this.props.large) ? this.getTheme().iconSizeLarge :
                       (this.props.small) ? this.getTheme().iconSizeSmall :
                       (this.props.inputButton) ? this.getTheme().toolbarIconSize :
+                      (this.props.fabButton) ? 22 :
                       (this.props.header) ? this.getTheme().iconFontSize : this.getTheme().iconFontSize-5,
             lineHeight: (this.props.large) ? 52: (this.props.small || this.props.inputButton) ? 22 : this.getTheme().iconLineHeight-9
         }
@@ -150,7 +154,6 @@ export default class Button extends NativeBaseComponent {
         return iconComponentPresent;
     }
     renderChildren() {
-
         if(typeof this.props.children == 'string') {
             return <Text style={this.getTextStyle()}>{(Platform.OS==='ios' || !this.props.capitalize) ? this.props.children : this.props.children.toUpperCase()}</Text>
         }
@@ -205,7 +208,7 @@ export default class Button extends NativeBaseComponent {
 
     render() {
         return(
-            <TouchableOpacity {...this.prepareRootProps()} activeOpacity={0.5} >
+            <TouchableOpacity ref={c => this._root = c} {...this.prepareRootProps()} activeOpacity={0.5} >
                 {this.renderChildren()}
             </TouchableOpacity>
         );

diff --git a/Components/Widgets/Card.js b/Components/Widgets/Card.js
@@ -61,7 +61,7 @@ export default class CardNB extends NativeBaseComponent {
             );
         }
         return(
-            <View {...this.prepareRootProps()} >
+            <View ref={c => this._root = c} {...this.prepareRootProps()} >
                 {this.renderChildren()}
             </View>
         );

diff --git a/Components/Widgets/CardItem.js b/Components/Widgets/CardItem.js
@@ -292,7 +292,7 @@ export default class CardItemNB extends NativeBaseComponent {
 
     render() {
         return(
-            <TouchableOpacity {...this.prepareRootProps()} activeOpacity={ (this.props.button) ? 0.2 : 1} >
+            <TouchableOpacity ref={c => this._root = c} {...this.prepareRootProps()} activeOpacity={ (this.props.button) ? 0.2 : 1} >
                 {this.renderChildren()}
             </TouchableOpacity>
         );

diff --git a/Components/Widgets/CardSwiper.js b/Components/Widgets/CardSwiper.js
@@ -91,12 +91,12 @@ export default class CardSwiper extends NativeBaseComponent {
         let opacity = pan.x.interpolate({inputRange: [-150, 0, 150], outputRange: [0.5, 1, 0.5]})
         let scale = enter;
 
-        let animatedCardStyles = {transform: [{translateX}, {translateY}, {rotate}, {scale}], opacity};        
+        let animatedCardStyles = {transform: [{translateX}, {translateY}, {rotate}, {scale}], opacity};
+
 
-
 
         return(
-            <View>
+            <View ref={c => this._root = c}>
                 <Animated.View style={ animatedCardStyles } {...this._panResponder.panHandlers} >
                 {this.props.children}
                 </Animated.View>

diff --git a/Components/Widgets/Checkbox.js b/Components/Widgets/Checkbox.js
@@ -26,7 +26,7 @@ export default class CheckBox extends NativeBaseComponent {
 
     render() {
         return(
-            <TouchableOpacity style={this.getInitialStyle().checkbox} {...this.props}>
+            <TouchableOpacity ref={c => this._root = c} style={this.getInitialStyle().checkbox} {...this.props}>
             <Icon name={(Platform.OS === 'ios') ? 'ios-checkmark-outline' : 'md-checkmark'} style={{color:  this.props.checked ? this.getTheme().checkboxTickColor : 'transparent', lineHeight: (Platform.OS === 'ios') ? this.getTheme().checkboxSize/0.93 : this.getTheme().checkboxSize-5, marginTop: (Platform.OS==='ios') ? undefined : 1, fontSize: (Platform.OS === 'ios') ? this.getTheme().checkboxSize/0.8 : this.getTheme().checkboxSize/1.2}} />
             </TouchableOpacity>
         );

diff --git a/Components/Widgets/Container.js b/Components/Widgets/Container.js
@@ -7,88 +7,89 @@ import ViewNB from './View';
 import Header from './Header';
 import Content from './Content';
 import Footer from './Footer';
+import Fab from './Fab';
 import NativeBaseComponent from '../Base/NativeBaseComponent';
 import _ from 'lodash';
 import computeProps from '../../Utils/computeProps';
 
 export default class Container extends NativeBaseComponent {
 
-	propTypes: {
+  propTypes: {
         style : React.PropTypes.object
     }
 
-	renderHeader() {
-		if(Array.isArray(this.props.children)) {
-			return _.find(this.props.children, function(item) {
-				if(item && item.type == Header) {
-					return true;
-				}
-			});
-		}
-
-		else {
-			if(this.props.children && this.props.children.type == Header) {
-				return this.props.children;
-			}
-		}
-	}
-	renderContent() {
-		if(Array.isArray(this.props.children)) {
-
-			return _.filter(this.props.children, function(item) {
-				if(item && (item.type == ViewNB || item.type == Content || item.type == Image || item.type == View || item.type == ScrollView )) {
-
-					return true;
-				}
-			});
-		}
-
-		else {
-			if(this.props.children && (this.props.children.type == Content || this.props.children.type == ViewNB || this.props.children.type == View || this.props.children.type == Image || this.props.children.type == ScrollView)) {
-				return this.props.children;
-			}
-		}
-	}
-	renderFooter() {
-		if(Array.isArray(this.props.children)) {
-			return _.find(this.props.children, function(item) {
-				if(item && item.type == Footer) {
-					return true;
-				}
-			});
-		}
-
-		else {
-			if(this.props.children && this.props.children.type == Footer) {
-				return this.props.children;
-			}
-		}
-	}
-	prepareRootProps() {
-
-		var type = {
-			flex: 1
-		}
-
-		var defaultProps = {
-			style: type
-		}
-
-		return computeProps(this.props, defaultProps);
-	}
-	render() {
-		return(
-			<View {...this.prepareRootProps()}>
-
-				{this.renderHeader()}
-
-				{this.renderContent()}
-
-				{this.renderFooter()}
-
-			</View>
-		);
-
-	}
+  renderHeader() {
+    if(Array.isArray(this.props.children)) {
+      return _.find(this.props.children, function(item) {
+        if(item && item.type == Header) {
+          return true;
+        }
+      });
+    }
+
+    else {
+      if(this.props.children && this.props.children.type == Header) {
+        return this.props.children;
+      }
+    }
+  }
+  renderContent() {
+    if(Array.isArray(this.props.children)) {
+
+      return _.filter(this.props.children, function(item) {
+        if(item && (item.type == ViewNB || item.type == Content || item.type == Image || item.type == View || item.type == ScrollView || item.type == Fab )) {
+
+          return true;
+        }
+      });
+    }
+
+    else {
+      if(this.props.children && (this.props.children.type == Content || this.props.children.type == ViewNB || this.props.children.type == View || this.props.children.type == Image || this.props.children.type == ScrollView)) {
+        return this.props.children;
+      }
+    }
+  }
+  renderFooter() {
+    if(Array.isArray(this.props.children)) {
+      return _.find(this.props.children, function(item) {
+        if(item && item.type == Footer) {
+          return true;
+        }
+      });
+    }
+
+    else {
+      if(this.props.children && this.props.children.type == Footer) {
+        return this.props.children;
+      }
+    }
+  }
+  prepareRootProps() {
+
+    var type = {
+      flex: 1
+    }
+
+    var defaultProps = {
+      style: type
+    }
+
+    return computeProps(this.props, defaultProps);
+  }
+  render() {
+    return(
+      <View ref={c => this._root = c} {...this.prepareRootProps()}>
+
+        {this.renderHeader()}
+
+        {this.renderContent()}
+
+        {this.renderFooter()}
+
+      </View>
+    );
+
+  }
 
 }
diff --git a/Components/Widgets/Content.js b/Components/Widgets/Content.js
@@ -37,7 +37,7 @@ export default class Content extends NativeBaseComponent {
     const contentContainerStyle = this.props.contentContainerStyle || {};
     contentContainerStyle.padding = (this.props.padder) ? this.getTheme().contentPadding : 0;
     return(
-      <KeyboardAwareScrollView automaticallyAdjustContentInsets={false} ref={c => this._scrollview = c} {...this.prepareRootProps()} contentContainerStyle={contentContainerStyle}>{this.props.children}</KeyboardAwareScrollView>
+      <KeyboardAwareScrollView automaticallyAdjustContentInsets={false} ref={(c) => {this._scrollview = c; this._root = c;}} {...this.prepareRootProps()} contentContainerStyle={contentContainerStyle}>{this.props.children}</KeyboardAwareScrollView>
     );
   }
 }
diff --git a/Components/Widgets/DeckSwiper.js b/Components/Widgets/DeckSwiper.js
@@ -40,13 +40,13 @@ export default class CardSwiper extends NativeBaseComponent {
     findNextIndexes() {
         let currentIndex = this.props.dataSource.indexOf(this.state.selectedItem);
         let newIdx = currentIndex + 1;
-        let newIdx2 = currentIndex + 2;        
+        let newIdx2 = currentIndex + 2;
 
-        if(newIdx2 > this.props.dataSource.length - 1 && newIdx === this.props.dataSource.length - 1) {            
+        if(newIdx2 > this.props.dataSource.length - 1 && newIdx === this.props.dataSource.length - 1) {
             return [newIdx, 0];
-        } else if (newIdx > this.props.dataSource.length - 1) {            
+        } else if (newIdx > this.props.dataSource.length - 1) {
             return [0, 1];
-        } else {            
+        } else {
             return [newIdx, newIdx2];
         }
     }
@@ -60,7 +60,7 @@ export default class CardSwiper extends NativeBaseComponent {
             setTimeout( () => {
                 this.setState({
                     selectedItem2: this.props.dataSource[nextIndexes[1]]
-                });                
+                });
             }, 350);
         }, 50);
 
@@ -99,9 +99,9 @@ export default class CardSwiper extends NativeBaseComponent {
                 var velocity;
 
                 if (vx >= 0) {
-                    velocity = clamp(vx, 4.5, 10);                    
+                    velocity = clamp(vx, 4.5, 10);
                 } else if (vx < 0) {
-                    velocity = clamp(vx * -1, 4.5, 10) * -1;                    
+                    velocity = clamp(vx * -1, 4.5, 10) * -1;
                 }
 
                 if (Math.abs(this.state.pan.x._value) > SWIPE_THRESHOLD) {
@@ -161,7 +161,7 @@ export default class CardSwiper extends NativeBaseComponent {
 
 
         return(
-            <View style={{position: 'relative', flexDirection: 'column'}}>{(this.state.selectedItem)===undefined ? (<View />) :
+            <View ref={c => this._root = c} style={{position: 'relative', flexDirection: 'column'}}>{(this.state.selectedItem)===undefined ? (<View />) :
                 (<View>
                     <Animated.View style={[this.getCardStyles()[1],{opacity: this.state.fadeAnim}]} {...this._panResponder.panHandlers}>
                         {this.props.renderItem(this.state.selectedItem2)}
-Original file line number
+Diff line change
@@ Expand Up / @@ -61,7 +61,7 @@ export default class CardNB extends NativeBaseComponent { @@
                 );
             }
             return(
-                <View {...this.prepareRootProps()} >
+                <View ref={c => this._root = c} {...this.prepareRootProps()} >
                     {this.renderChildren()}
                 </View>
             );
@@ Expand Down @@