input label

gfviegas · Apr 19, 2016 · 9c869e2 · 9c869e2
1 parent 1fb97d3
commit 9c869e2
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 150 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,5 @@
+# OSX
+#
+.DS_Store
+
+node_modules
diff --git a/Components/Themes/light.js b/Components/Themes/light.js
@@ -1,9 +1,5 @@
-<<<<<<< HEAD
-var Color = require("color");
-=======
-var Color = require("color")
->>>>>>> 1702224571f9416624cf195b9bc87ac0e782f553
 
+var Color = require("color");
 var primary = Color("#384850");
 var secondary = Color("#00c497");
 var success = Color("#428F26");
@@ -29,8 +25,6 @@ module.exports = {
 
 
 
-<<<<<<< HEAD
-
 //
 // Variables
 // --------------------------------------------------
@@ -947,5 +941,3 @@ dlHorizontalOffset:        componentOffsetHorizontal,
 dlHorizontalBreakpoint:    gridFloatBreakpoint,
 //** Horizontal line color.
 hrBorder:                   grayLighter,
-=======
->>>>>>> 1702224571f9416624cf195b9bc87ac0e782f553
diff --git a/Components/Widgets/Input.js b/Components/Widgets/Input.js
@@ -3,26 +3,39 @@
 
 import React, {Component, Text, View, TextInput } from 'react-native';
 import {brandPrimary as primary} from '../Styles/variable';
-import {dark} from '../Styles/variable';
-import {light} from '../Styles/variable';
 import Icon from 'react-native-vector-icons/Ionicons';
 import bootstrap from '../Styles/bootstrap';
+import computeProps from '../../Utils/computeProps';
 
-export default class IconInput extends Component {
-
-    	render() {
-
-	        return (
-	           	<TextInput
-					style={[(this.props.dark) ? bootstrap.dark : bootstrap.light, 
-						(this.props.icon) ? bootstrap.textIconInput : bootstrap.textInput, 
-						{ paddingLeft:  (this.props.borderType === 'rounded' && !this.props.icon) ? 15 : 
-							(this.props.icon) ? 40 : 5
-						}] }
-					placeholderTextColor={(this.props.dark) ? dark : light}
-					{...this.props}
-				/> 
-	        );
+export default class Input extends Component {
+
+	getInitialStyle() {
+	    return {
+	       input: {
+	       		height: 40
+	       } 
+	    }
+	}
+
+	prepareRootProps() {
+
+	    var defaultProps = {
+	        style: this.getInitialStyle().input
+	    }
+
+	    console.log("awdaw*(^(( ", this.props);
+
+	    console.log("input style *&*(*&(", computeProps(this.props, defaultProps));
+
+	    return computeProps(this.props, defaultProps);
+
+	}
+
+	render() {
+
+        return (
+           	<TextInput {...this.prepareRootProps()} /> 
+        );
     }    
 
 }

diff --git a/Components/Widgets/InputGroup.js b/Components/Widgets/InputGroup.js
@@ -1,141 +1,148 @@
 /* @flow */
 'use strict';
 
-import React, {Text, View, TextInput } from 'react-native';
+import React, {Text, View, TextInput, PixelRatio } from 'react-native';
 import NativeBaseComponent from '../Base/NativeBaseComponent';
 import Icon from 'react-native-vector-icons/Ionicons';
 import _ from 'lodash';
 import computeProps from '../../Utils/computeProps';
-import Input from './Input'
+import Input from './Input';
+import InputLabel from './InputLabel';
 
 
 export default class IconInput extends NativeBaseComponent {
 
-		getInitialStyle() {
-		    return {
-		        textInput: {
-		        	height: 40, 
-		        	backgroundColor: 'transparent',
-		        },	
-		        outerBorder: {
-		        	position:'relative',
-		        	borderColor: 'white', 
-		        	borderWidth: 1 / PixelRatio.get(),
-		        	borderTopWidth: 0, 
-		        	borderRightWidth: 0, 
-		        	borderLeftWidth: 0, 
-		        	margin: 15,
-		        	marginTop: 5
-		        },
-		        darkborder: {
-		        	borderColor: '#000',		
-		        },
-		        lightborder: {
-		        	borderColor: '#fff',		
-		        },
-		        underline: {
-		        	position:'relative',
-		        	borderWidth: 1 / PixelRatio.get(),
-		        	borderTopWidth: 0, 
-		        	borderRightWidth: 0, 
-		        	borderLeftWidth: 0, 
-		        	margin: 15,
-		        	marginTop: 5
-		        },
-
-		        bordered: {
-		        	position:'relative',
-		        	borderWidth: 1 / PixelRatio.get(),
-		        	margin: 15,
-		        	marginTop: 5
-		        },
-
-		        rounded: {
-		        	position:'relative',
-		        	borderWidth: 1 / PixelRatio.get(),
-		        	borderRadius: 30,
-		        	margin: 15,
-		        	marginTop: 5
-		        }
-		    }
+	getInitialStyle() {
+	    return {
+	        textInput: {
+	        	height: 40, 
+	        	backgroundColor: 'transparent',
+	        },	
+	        outerBorder: {
+	        	position:'relative',
+	        	borderColor: 'white', 
+	        	borderWidth: 1 / PixelRatio.get(),
+	        	borderTopWidth: 0, 
+	        	borderRightWidth: 0, 
+	        	borderLeftWidth: 0, 
+	        	margin: 15,
+	        	marginTop: 5
+	        },
+	        darkborder: {
+	        	borderColor: '#000',		
+	        },
+	        lightborder: {
+	        	borderColor: '#fff',		
+	        },
+	        underline: {
+	        	position:'relative',
+	        	borderWidth: 1 / PixelRatio.get(),
+	        	borderTopWidth: 0, 
+	        	borderRightWidth: 0, 
+	        	borderLeftWidth: 0, 
+	        	margin: 15,
+	        	marginTop: 5
+	        },
+
+	        bordered: {
+	        	position:'relative',
+	        	borderWidth: 1 / PixelRatio.get(),
+	        	margin: 15,
+	        	marginTop: 5
+	        },
+
+	        rounded: {
+	        	position:'relative',
+	        	borderWidth: 1 / PixelRatio.get(),
+	        	borderRadius: 30,
+	        	margin: 15,
+	        	marginTop: 5
+	        }
+	    }
+	}
+
+	prepareRootProps() {
+
+	    var type = {
+	    	paddingLeft:  (this.props.borderType === 'rounded' && !this.props.children.type == Icon) ? 15 : 
+			(this.props.children.type == Icon) ? this.getTheme().inputPaddingLeftIcon : this.getTheme().inputPaddingLeft
+	    }
+
+
+	    var  addedProps = _.merge(this.getInitialStyle().textInput,type);
+
+	    var defaultProps = {
+	        style: addedProps
+	    }
+
+	    console.log("input style", computeProps(this.props, defaultProps));
+
+	    return computeProps(this.props, defaultProps);
+
+	}
+	renderLabel() {
+		if(!Array.isArray(this.props.children) && this.props.children.type == InputLabel)
+			return this.props.children;
+
+		else 
+			return _.find(this.props.children, function(item) {
+	            if(item && item.type == InputLabel) {
+	                return true;
+	            }
+	        });
+	}
+
+	renderIcon() {
+		if(!Array.isArray(this.props.children) && this.props.children.type == Icon)
+			return this.props.children;
+
+		else 
+			return _.find(this.props.children, function(item) {
+	            if(item && item.type == Icon) {
+	                return true;
+	            }
+	        });
+	}
+
+	renderInput() {
+		if(!Array.isArray(this.props.children) && this.props.children.type == Input) {
+			console.log(11111);
+			var inputProps = {};
+
+	        inputProps = computeProps(this.props, this.props.children.props);
+
+	        return <Input {...inputProps}/> 
 		}
 
-		prepareRootProps() {
-
-		    var type = {
-		    	paddingLeft:  (this.props.borderType === 'rounded' && !this.props.children.type == Icon) ? 15 : 
-				(this.props.children.type == Icon) ? inputPaddingLeftIcon : inputPaddingLeft
-		    }
-
-
-		    var  addedProps = _.merge(this.getInitialStyle().textInput,type);
-
-		    var defaultProps = {
-		        style: addedProps
-		    }
-
-		    console.log("input style", computeProps(this.props, defaultProps));
-
-		    return computeProps(this.props, defaultProps);
-
-		}
-		renderLabel() {
-			if(!Array.isArray(this.props.children) && this.props.children.type == Text)
-				return this.props.children;
-
-			else 
-				return _.find(this.props.children, function(item) {
-		            if(item && item.type == Text) {
-		                return true;
-		            }
-		        });
-		}
-
-		renderIcon() {
-			if(!Array.isArray(this.props.children) && this.props.children.type == Icon)
-				return this.props.children;
-
-			else 
-				return _.find(this.props.children, function(item) {
-		            if(item && item.type == Icon) {
-		                return true;
-		            }
-		        });
-		}
-
-		renderInput() {
-			if(!Array.isArray(this.props.children) && this.props.children.type == Input) {
-				var inputProps = {};
-
-		        inputProps = computeProps(this.props, this.props.children.props);
-
-		        return <Input {...inputProps}/> 
-			}
-
-			else {
-				var inp =  _.find(this.props.children, function(item) {
-		            if(item && item.type == Input) {
-		                return true;
-		            }
-		        });
-
-				var inputProps = {};
-
-		        inputProps = computeProps(this.props, inp.props);
-
-		        return <Input {...inputProps}/> 
-			}
+		else {
+			console.log(2222);
+			var inp =  _.find(this.props.children, function(item) {
+	            if(item && item.type == Input) {
+	                return true;
+	            }
+	        });
+	        console.log(this.props.children, "awaw909000990909");
+
+			var inputProps = {};
+
+			if(inp)
+	        	inputProps = computeProps(this.props, inp.props);
+	        else 
+	        	inputProps = this.props;
+
+	        return <Input {...inputProps}/> 
 		}
+	}
 
-    	render() {
-	        return (
-	           	<View {...this.prepareRootProps()} style={[(this.props.borderType === 'regular') ? this.getInitialStyle().bordered : (this.props.borderType === 'rounded') ? this.getInitialStyle().rounded : this.getInitialStyle().underline]} >   
+	render() {
+        return (
+           	<View {...this.prepareRootProps()} style={[(this.props.borderType === 'regular') ? this.getInitialStyle().bordered : (this.props.borderType === 'rounded') ? this.getInitialStyle().rounded : this.getInitialStyle().underline]} >   
 
-	              	{this.renderIcon()}
-	              	{this.renderLabel()}
-	              	{this.renderInput()}
-	          	</View>  
-	        );
+              	{this.renderIcon()}
+              	{this.renderLabel()}
+              	{this.renderInput()}
+          	</View>  
+        );
     }    
 
 }

diff --git a/Utils/computeProps.js b/Utils/computeProps.js
@@ -11,7 +11,7 @@ module.exports = function(incomingProps, defaultProps) {
     incomingProps = _.clone(incomingProps);
     delete incomingProps.children;
 
-    console.log(defaultProps, incomingProps);
+    // console.log(defaultProps, incomingProps);
 
     if(incomingProps)
         _.merge(computedProps, defaultProps, incomingProps);
@@ -32,7 +32,7 @@ module.exports = function(incomingProps, defaultProps) {
 
     }
 
-    console.log("computedProps ", computedProps);
+    // console.log("computedProps ", computedProps);
 
     return computedProps;