Skip to content

Commit 9c869e2

Browse files
Himanshu SatijaHimanshu Satija
Himanshu Satija
authored and
Himanshu Satija
committed
input label
1 parent 1fb97d3 commit 9c869e2

5 files changed

Lines changed: 167 additions & 150 deletions

File tree

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
node_modules

‎Components/Themes/light.js‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
<<<<<<< HEAD
2-
var Color = require("color");
3-
=======
4-
var Color = require("color")
5-
>>>>>>> 1702224571f9416624cf195b9bc87ac0e782f553
61

2+
var Color = require("color");
73
var primary = Color("#384850");
84
var secondary = Color("#00c497");
95
var success = Color("#428F26");
@@ -29,8 +25,6 @@ module.exports = {
2925

3026

3127

32-
<<<<<<< HEAD
33-
3428
//
3529
// Variables
3630
// --------------------------------------------------
@@ -947,5 +941,3 @@ dlHorizontalOffset: componentOffsetHorizontal,
947941
dlHorizontalBreakpoint: gridFloatBreakpoint,
948942
//** Horizontal line color.
949943
hrBorder: grayLighter,
950-
=======
951-
>>>>>>> 1702224571f9416624cf195b9bc87ac0e782f553

‎Components/Widgets/Input.js‎

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,39 @@
33

44
import React, {Component, Text, View, TextInput } from 'react-native';
55
import {brandPrimary as primary} from '../Styles/variable';
6-
import {dark} from '../Styles/variable';
7-
import {light} from '../Styles/variable';
86
import Icon from 'react-native-vector-icons/Ionicons';
97
import bootstrap from '../Styles/bootstrap';
8+
import computeProps from '../../Utils/computeProps';
109

11-
export default class IconInput extends Component {
12-
13-
render() {
14-
15-
return (
16-
<TextInput
17-
style={[(this.props.dark) ? bootstrap.dark : bootstrap.light,
18-
(this.props.icon) ? bootstrap.textIconInput : bootstrap.textInput,
19-
{ paddingLeft: (this.props.borderType === 'rounded' && !this.props.icon) ? 15 :
20-
(this.props.icon) ? 40 : 5
21-
}] }
22-
placeholderTextColor={(this.props.dark) ? dark : light}
23-
{...this.props}
24-
/>
25-
);
10+
export default class Input extends Component {
11+
12+
getInitialStyle() {
13+
return {
14+
input: {
15+
height: 40
16+
}
17+
}
18+
}
19+
20+
prepareRootProps() {
21+
22+
var defaultProps = {
23+
style: this.getInitialStyle().input
24+
}
25+
26+
console.log("awdaw*(^(( ", this.props);
27+
28+
console.log("input style *&*(*&(", computeProps(this.props, defaultProps));
29+
30+
return computeProps(this.props, defaultProps);
31+
32+
}
33+
34+
render() {
35+
36+
return (
37+
<TextInput {...this.prepareRootProps()} />
38+
);
2639
}
2740

2841
}

‎Components/Widgets/InputGroup.js‎

Lines changed: 129 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,141 +1,148 @@
11
/* @flow */
22
'use strict';
33

4-
import React, {Text, View, TextInput } from 'react-native';
4+
import React, {Text, View, TextInput, PixelRatio } from 'react-native';
55
import NativeBaseComponent from '../Base/NativeBaseComponent';
66
import Icon from 'react-native-vector-icons/Ionicons';
77
import _ from 'lodash';
88
import computeProps from '../../Utils/computeProps';
9-
import Input from './Input'
9+
import Input from './Input';
10+
import InputLabel from './InputLabel';
1011

1112

1213
export default class IconInput extends NativeBaseComponent {
1314

14-
getInitialStyle() {
15-
return {
16-
textInput: {
17-
height: 40,
18-
backgroundColor: 'transparent',
19-
},
20-
outerBorder: {
21-
position:'relative',
22-
borderColor: 'white',
23-
borderWidth: 1 / PixelRatio.get(),
24-
borderTopWidth: 0,
25-
borderRightWidth: 0,
26-
borderLeftWidth: 0,
27-
margin: 15,
28-
marginTop: 5
29-
},
30-
darkborder: {
31-
borderColor: '#000',
32-
},
33-
lightborder: {
34-
borderColor: '#fff',
35-
},
36-
underline: {
37-
position:'relative',
38-
borderWidth: 1 / PixelRatio.get(),
39-
borderTopWidth: 0,
40-
borderRightWidth: 0,
41-
borderLeftWidth: 0,
42-
margin: 15,
43-
marginTop: 5
44-
},
45-
46-
bordered: {
47-
position:'relative',
48-
borderWidth: 1 / PixelRatio.get(),
49-
margin: 15,
50-
marginTop: 5
51-
},
52-
53-
rounded: {
54-
position:'relative',
55-
borderWidth: 1 / PixelRatio.get(),
56-
borderRadius: 30,
57-
margin: 15,
58-
marginTop: 5
59-
}
60-
}
15+
getInitialStyle() {
16+
return {
17+
textInput: {
18+
height: 40,
19+
backgroundColor: 'transparent',
20+
},
21+
outerBorder: {
22+
position:'relative',
23+
borderColor: 'white',
24+
borderWidth: 1 / PixelRatio.get(),
25+
borderTopWidth: 0,
26+
borderRightWidth: 0,
27+
borderLeftWidth: 0,
28+
margin: 15,
29+
marginTop: 5
30+
},
31+
darkborder: {
32+
borderColor: '#000',
33+
},
34+
lightborder: {
35+
borderColor: '#fff',
36+
},
37+
underline: {
38+
position:'relative',
39+
borderWidth: 1 / PixelRatio.get(),
40+
borderTopWidth: 0,
41+
borderRightWidth: 0,
42+
borderLeftWidth: 0,
43+
margin: 15,
44+
marginTop: 5
45+
},
46+
47+
bordered: {
48+
position:'relative',
49+
borderWidth: 1 / PixelRatio.get(),
50+
margin: 15,
51+
marginTop: 5
52+
},
53+
54+
rounded: {
55+
position:'relative',
56+
borderWidth: 1 / PixelRatio.get(),
57+
borderRadius: 30,
58+
margin: 15,
59+
marginTop: 5
60+
}
61+
}
62+
}
63+
64+
prepareRootProps() {
65+
66+
var type = {
67+
paddingLeft: (this.props.borderType === 'rounded' && !this.props.children.type == Icon) ? 15 :
68+
(this.props.children.type == Icon) ? this.getTheme().inputPaddingLeftIcon : this.getTheme().inputPaddingLeft
69+
}
70+
71+
72+
var addedProps = _.merge(this.getInitialStyle().textInput,type);
73+
74+
var defaultProps = {
75+
style: addedProps
76+
}
77+
78+
console.log("input style", computeProps(this.props, defaultProps));
79+
80+
return computeProps(this.props, defaultProps);
81+
82+
}
83+
renderLabel() {
84+
if(!Array.isArray(this.props.children) && this.props.children.type == InputLabel)
85+
return this.props.children;
86+
87+
else
88+
return _.find(this.props.children, function(item) {
89+
if(item && item.type == InputLabel) {
90+
return true;
91+
}
92+
});
93+
}
94+
95+
renderIcon() {
96+
if(!Array.isArray(this.props.children) && this.props.children.type == Icon)
97+
return this.props.children;
98+
99+
else
100+
return _.find(this.props.children, function(item) {
101+
if(item && item.type == Icon) {
102+
return true;
103+
}
104+
});
105+
}
106+
107+
renderInput() {
108+
if(!Array.isArray(this.props.children) && this.props.children.type == Input) {
109+
console.log(11111);
110+
var inputProps = {};
111+
112+
inputProps = computeProps(this.props, this.props.children.props);
113+
114+
return <Input {...inputProps}/>
61115
}
62116

63-
prepareRootProps() {
64-
65-
var type = {
66-
paddingLeft: (this.props.borderType === 'rounded' && !this.props.children.type == Icon) ? 15 :
67-
(this.props.children.type == Icon) ? inputPaddingLeftIcon : inputPaddingLeft
68-
}
69-
70-
71-
var addedProps = _.merge(this.getInitialStyle().textInput,type);
72-
73-
var defaultProps = {
74-
style: addedProps
75-
}
76-
77-
console.log("input style", computeProps(this.props, defaultProps));
78-
79-
return computeProps(this.props, defaultProps);
80-
81-
}
82-
renderLabel() {
83-
if(!Array.isArray(this.props.children) && this.props.children.type == Text)
84-
return this.props.children;
85-
86-
else
87-
return _.find(this.props.children, function(item) {
88-
if(item && item.type == Text) {
89-
return true;
90-
}
91-
});
92-
}
93-
94-
renderIcon() {
95-
if(!Array.isArray(this.props.children) && this.props.children.type == Icon)
96-
return this.props.children;
97-
98-
else
99-
return _.find(this.props.children, function(item) {
100-
if(item && item.type == Icon) {
101-
return true;
102-
}
103-
});
104-
}
105-
106-
renderInput() {
107-
if(!Array.isArray(this.props.children) && this.props.children.type == Input) {
108-
var inputProps = {};
109-
110-
inputProps = computeProps(this.props, this.props.children.props);
111-
112-
return <Input {...inputProps}/>
113-
}
114-
115-
else {
116-
var inp = _.find(this.props.children, function(item) {
117-
if(item && item.type == Input) {
118-
return true;
119-
}
120-
});
121-
122-
var inputProps = {};
123-
124-
inputProps = computeProps(this.props, inp.props);
125-
126-
return <Input {...inputProps}/>
127-
}
117+
else {
118+
console.log(2222);
119+
var inp = _.find(this.props.children, function(item) {
120+
if(item && item.type == Input) {
121+
return true;
122+
}
123+
});
124+
console.log(this.props.children, "awaw909000990909");
125+
126+
var inputProps = {};
127+
128+
if(inp)
129+
inputProps = computeProps(this.props, inp.props);
130+
else
131+
inputProps = this.props;
132+
133+
return <Input {...inputProps}/>
128134
}
135+
}
129136

130-
render() {
131-
return (
132-
<View {...this.prepareRootProps()} style={[(this.props.borderType === 'regular') ? this.getInitialStyle().bordered : (this.props.borderType === 'rounded') ? this.getInitialStyle().rounded : this.getInitialStyle().underline]} >
137+
render() {
138+
return (
139+
<View {...this.prepareRootProps()} style={[(this.props.borderType === 'regular') ? this.getInitialStyle().bordered : (this.props.borderType === 'rounded') ? this.getInitialStyle().rounded : this.getInitialStyle().underline]} >
133140

134-
{this.renderIcon()}
135-
{this.renderLabel()}
136-
{this.renderInput()}
137-
</View>
138-
);
141+
{this.renderIcon()}
142+
{this.renderLabel()}
143+
{this.renderInput()}
144+
</View>
145+
);
139146
}
140147

141148
}

‎Utils/computeProps.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ module.exports = function(incomingProps, defaultProps) {
1111
incomingProps = _.clone(incomingProps);
1212
delete incomingProps.children;
1313

14-
console.log(defaultProps, incomingProps);
14+
// console.log(defaultProps, incomingProps);
1515

1616
if(incomingProps)
1717
_.merge(computedProps, defaultProps, incomingProps);
@@ -32,7 +32,7 @@ module.exports = function(incomingProps, defaultProps) {
3232

3333
}
3434

35-
console.log("computedProps ", computedProps);
35+
// console.log("computedProps ", computedProps);
3636

3737
return computedProps;
3838

0 commit comments

Comments
 (0)