Skip to content

Commit 930e11d

Browse files
Himanshu SatijaHimanshu Satija
Himanshu Satija
authored and
Himanshu Satija
committed
fix icon.props issue
1 parent 81eafa0 commit 930e11d

File tree

2 files changed

+154
-158
lines changed

2 files changed

+154
-158
lines changed

‎Components/Widgets/Input.js‎

Lines changed: 23 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,35 +7,33 @@ import NativeBaseComponent from '../Base/NativeBaseComponent';
77
import computeProps from '../../Utils/computeProps';
88

99
export default class Input extends NativeBaseComponent {
10-
11-
getInitialStyle() {
12-
return {
13-
input: {
14-
height: this.getTheme().inputHeightBase,
15-
color: this.getTheme().textColor,
16-
paddingLeft: 10
17-
}
18-
}
19-
}
10+
11+
getInitialStyle() {
12+
return {
13+
input: {
14+
height: this.getTheme().inputHeightBase,
15+
color: this.getTheme().textColor,
16+
}
17+
}
18+
}
2019

21-
prepareRootProps() {
20+
prepareRootProps() {
2221

23-
var defaultProps = {
24-
style: this.getInitialStyle().input
25-
}
22+
var defaultProps = {
23+
style: this.getInitialStyle().input
24+
}
2625

27-
return computeProps(this.props, defaultProps);
26+
return computeProps(this.props, defaultProps);
2827

29-
}
28+
}
3029

31-
render() {
30+
render() {
3231

33-
return (
34-
<View style={{ flex: 1 }}>
35-
<TextInput {...this.prepareRootProps()} placeholderTextColor={this.getTheme().inputColorPlaceholder} />
36-
</View>
37-
);
38-
}
39-
40-
}
32+
return (
33+
<View style={{ flex: 1 }}>
34+
<TextInput {...this.prepareRootProps()} placeholderTextColor={ this.getTheme().inputColorPlaceholder} />
35+
</View>
36+
);
37+
}
4138

39+
}

‎Components/Widgets/InputGroup.js‎

Lines changed: 131 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -11,136 +11,134 @@ import _ from 'lodash';
1111

1212

1313
export default class InputGroup extends NativeBaseComponent {
14-
15-
getInitialStyle() {
16-
return {
17-
textInput: {
18-
height: this.getTheme().inputHeightBase,
19-
backgroundColor: 'transparent',
20-
flex: 1,
21-
flexDirection: 'row',
22-
borderColor: this.getTheme().inputBorderColor
23-
},
24-
outerBorder: {
25-
position:'relative',
26-
borderColor: 'white',
27-
borderWidth: 1 / PixelRatio.get(),
28-
borderTopWidth: 0,
29-
borderRightWidth: 0,
30-
borderLeftWidth: 0,
31-
margin: 15,
32-
marginTop: 5
33-
},
34-
darkborder: {
35-
borderColor: '#000'
36-
},
37-
lightborder: {
38-
borderColor: '#fff'
39-
},
40-
underline: {
41-
position:'relative',
42-
borderWidth: 1 / PixelRatio.get(),
43-
borderTopWidth: 0,
44-
borderRightWidth: 0,
45-
borderLeftWidth: 0,
46-
margin: 15,
47-
marginTop: 5
48-
},
49-
50-
bordered: {
51-
position:'relative',
52-
borderWidth: 1 / PixelRatio.get(),
53-
margin: 15,
54-
marginTop: 5
55-
},
56-
57-
rounded: {
58-
position:'relative',
59-
borderWidth: 1 / PixelRatio.get(),
60-
borderRadius: 30,
61-
margin: 15,
62-
marginTop: 5
63-
}
64-
}
65-
}
66-
67-
prepareRootProps() {
68-
69-
var type = {
70-
paddingLeft: (this.props.borderType === 'rounded' && !this.props.children.type == Icon) ? 15 :
71-
(this.props.children.type == Icon ) ? this.getTheme().inputPaddingLeftIcon : 10
72-
}
73-
74-
var defaultStyle = (this.props.borderType === 'regular') ? this.getInitialStyle().bordered : (this.props.borderType === 'rounded') ? this.getInitialStyle().rounded : this.getInitialStyle().underline;
75-
76-
type = _.merge(type, defaultStyle);
77-
78-
var addedProps = _.merge(this.getInitialStyle().textInput, type);
79-
80-
var defaultProps = {
81-
style: addedProps
82-
}
83-
84-
return computeProps(this.props, defaultProps);
85-
}
86-
87-
getIconProps(icon) {
88-
var defaultStyle = {
89-
color: this.getTheme().inputColor,
90-
fontSize: 27
91-
}
92-
93-
var defaultProps = {
94-
style: defaultStyle
95-
}
96-
97-
return computeProps(icon.props, defaultProps);
98-
}
99-
100-
renderIcon() {
101-
if(!Array.isArray(this.props.children) && this.props.children.type == Icon)
102-
return React.cloneElement(this.props.children, this.getIconProps(this.props.children));
103-
104-
else {
105-
var iconRender = _.find(this.props.children, function(item) {
106-
if(item && item.type == Icon) {
107-
return true;
108-
}
109-
});
110-
return <Text style={{ alignSelf: 'center'}}>{React.cloneElement(iconRender, this.getIconProps(iconRender))}</Text>
111-
}
112-
}
113-
114-
115-
renderInput() {
116-
var inputProps = {};
117-
118-
if(!Array.isArray(this.props.children) && this.props.children.type == undefined) {
119-
inputProps = computeProps(this.props, this.props.children.props);
120-
}
121-
122-
else {
123-
var inp = _.find(this.props.children, function(item) {
124-
if(item && item.type == undefined) {
125-
return true;
126-
}
127-
});
128-
129-
if(inp)
130-
inputProps = computeProps(this.props, inp.props);
131-
else
132-
inputProps = this.props;
133-
}
134-
135-
return <Input {...inputProps}/>
136-
}
137-
138-
render() {
139-
return (
140-
<View {...this.prepareRootProps()} >
141-
{this.renderIcon()}
142-
{this.renderInput()}
143-
</View>
144-
);
145-
}
146-
}
14+
15+
getInitialStyle() {
16+
return {
17+
textInput: {
18+
height: this.getTheme().inputHeightBase,
19+
backgroundColor: 'transparent',
20+
flex: 1,
21+
flexDirection: 'row',
22+
borderColor: this.getTheme().inputBorderColor
23+
},
24+
outerBorder: {
25+
position:'relative',
26+
borderColor: 'white',
27+
borderWidth: this.getTheme().borderWidth,
28+
borderTopWidth: 0,
29+
borderRightWidth: 0,
30+
borderLeftWidth: 0,
31+
marginTop: 5
32+
},
33+
darkborder: {
34+
borderColor: '#000'
35+
},
36+
lightborder: {
37+
borderColor: '#fff'
38+
},
39+
underline: {
40+
position:'relative',
41+
borderWidth: this.getTheme().borderWidth,
42+
borderTopWidth: 0,
43+
borderRightWidth: 0,
44+
borderLeftWidth: 0,
45+
marginTop: 5
46+
},
47+
48+
bordered: {
49+
position:'relative',
50+
borderWidth: this.getTheme().borderWidth,
51+
marginTop: 5
52+
},
53+
54+
rounded: {
55+
position:'relative',
56+
borderWidth: this.getTheme().borderWidth,
57+
borderRadius: 30,
58+
marginTop: 5
59+
}
60+
}
61+
}
62+
63+
prepareRootProps() {
64+
65+
var type = {
66+
paddingLeft: (this.props.borderType === 'rounded' && !this.props.children.type == Icon) ? 15 :
67+
(this.props.children.type == Icon ) ? this.getTheme().inputPaddingLeftIcon : 10
68+
}
69+
70+
var defaultStyle = (this.props.borderType === 'regular') ? this.getInitialStyle().bordered : (this.props.borderType === 'rounded') ? this.getInitialStyle().rounded : this.getInitialStyle().underline;
71+
72+
type = _.merge(type, defaultStyle);
73+
74+
var addedProps = _.merge(this.getInitialStyle().textInput, type);
75+
76+
var defaultProps = {
77+
style: addedProps
78+
}
79+
80+
return computeProps(this.props, defaultProps);
81+
}
82+
83+
getIconProps(icon) {
84+
var defaultStyle = {
85+
color: this.getTheme().inputColor,
86+
fontSize: 27
87+
}
88+
89+
var defaultProps = {
90+
style: defaultStyle
91+
}
92+
93+
return computeProps(icon.props, defaultProps);
94+
}
95+
96+
renderIcon() {
97+
if(!Array.isArray(this.props.children) && this.props.children.type == Icon)
98+
return React.cloneElement(this.props.children, this.getIconProps(this.props.children));
99+
100+
else {
101+
var iconRender = _.find(this.props.children, function(item) {
102+
if(item && item.type == Icon) {
103+
return true;
104+
}
105+
});
106+
if (iconRender) {
107+
return <Text style={{ alignSelf: 'center'}}>{React.cloneElement(iconRender, this.getIconProps(iconRender))}</Text>
108+
109+
}
110+
}
111+
}
112+
113+
114+
renderInput() {
115+
var inputProps = {};
116+
if(!Array.isArray(this.props.children) && this.props.children.type == undefined) {
117+
inputProps = computeProps(this.props, this.props.children.props);
118+
}
119+
120+
else {
121+
var inp = _.find(this.props.children, function(item) {
122+
if(item && item.type == undefined) {
123+
return true;
124+
}
125+
});
126+
127+
if(inp)
128+
inputProps = computeProps(this.props, inp.props);
129+
else
130+
inputProps = this.props;
131+
}
132+
133+
return <Input {...inputProps}/>
134+
}
135+
136+
render() {
137+
return (
138+
<View {...this.prepareRootProps()} >
139+
{this.renderIcon()}
140+
{this.renderInput()}
141+
</View>
142+
);
143+
}
144+
}

0 commit comments

Comments
 (0)