Skip to content

Commit 66d0b2a

Browse files
hai-ceahai-cea
committed
Merge pull request #182 from ButuzGOL/issue-143-add-input-documentation-fix-textarea
Issue 143 add input documentation and textarea fix
2 parents b0821db + 77946a0 commit 66d0b2a

File tree

3 files changed

+161
-168
lines changed

3 files changed

+161
-168
lines changed

‎docs/src/app/components/pages/components/inputs.jsx‎

Lines changed: 149 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,163 @@
1-
var React = require('react'),
2-
mui = require('mui');
1+
var React = require('react');
2+
var mui = require('mui');
3+
var Input = mui.Input;
4+
var CodeExample = require('../../code-example/code-example.jsx');
5+
var ComponentInfo = require('../../component-info.jsx');
36

47
var InputsPage = React.createClass({
58

6-
7-
componentDidMount: function() {
8-
//console.log(this.refs.firstname.getValue());
9-
},
10-
119
render: function() {
10+
var code =
11+
'// Default\n' +
12+
'<Input ref="firstname" type="text" name="firstname" placeholder="First Name" />\n' +
13+
'// With description\n' +
14+
'<Input ref="lastname" type="text" name="lastname" placeholder="Last Name" description="Your last name as it appears on your credit card." />\n' +
15+
'// Disabled\n' +
16+
'<Input ref="addressline1" type="text" name="addressline1" disabled={true} placeholder="Address Line 1" />\n' +
17+
'// Disabled with value\n' +
18+
'<Input ref="addressline2" type="text" name="addressline2" disabled={true} defaultValue="with value" placeholder="Address Line 2" />\n' +
19+
'// With error\n' +
20+
'<Input ref="city" type="text" name="city" defaultValue="Detroit" placeholder="City" description="Your city as it appears on your credit card." error="Can\'t process city name" />\n' +
21+
'// Inline placeholder\n' +
22+
'<Input ref="state" type="text" name="state" inlinePlaceholder={true} placeholder="State" description="Your state as it appears on your credit card." />\n' +
23+
'// Input style "float"\n' +
24+
'<Input ref="allegiance" inputStyle="floating" type="text" name="allegiance" placeholder="Allegiance" description="The house of which you served under." />\n' +
25+
'// Textarea\n' +
26+
'<Input ref="phones" multiline={true} rows={5} type="text" name="phones" placeholder="Phone numbers" description="Your phone numbers." />';
27+
1228
return (
1329
<div>
1430
<h2 className="mui-font-style-headline">Inputs</h2>
15-
<br />
16-
<mui.Input ref="firstname" onChange={this._onChange} type="text" name="firstname" placeholder="First Name" description="Your first name as it appears on your credit card." />
17-
<mui.Input ref="lastname" type="text" name="lastname" placeholder="Last Name" description="Your last name as it appears on your credit card." />
18-
<mui.Input ref="disabled" type="text" name="disabled" disabled={true} placeholder="Disabled input" />
19-
<mui.Input ref="disabled_v" type="text" name="disabled_v" disabled={true} defaultValue="with value" placeholder="Disabled input" />
20-
<mui.Input ref="addressline1" type="text" name="addressline1" placeholder="Address Line 1" description="Your address as it appears on your credit card." />
21-
<mui.Input ref="addressline2" type="text" name="zipcode" placeholder="Zip Code" description="Your zip code as it appears on your credit card." />
22-
<mui.Input ref="city" type="text" name="city" placeholder="City" description="Your city as it appears on your credit card." />
23-
<mui.Input ref="state" type="text" name="state" placeholder="State" description="Your state as it appears on your credit card." />
24-
<h2 className="mui-font-style-headline">Error Validation</h2>
25-
<br />
26-
<mui.Input ref="allegiance" type="text" name="allegiance" placeholder="Allegiance" description="The house of which you served under." />
27-
<br />
28-
<h2 className="mui-font-style-headline">Floating</h2>
29-
<br />
30-
<mui.Input ref="username" type="text" inputStyle="floating" name="Username" description="The username associated with your account." />
31-
32-
{/* TODO: Needs to be completed}
33-
<h2 className="mui-font-style-headline">Multi-Line</h2>
34-
<br />
35-
<mui.Input multiline={true} ref="textmessage" type="text" name="textmessage" placeholder="Text Message" description="Your text message." />
36-
{*/}
31+
<CodeExample code={code}>
32+
<Input ref="firstname" type="text" name="firstname" placeholder="First Name" />
33+
<Input ref="lastname" type="text" name="lastname" placeholder="Last Name" description="Your last name as it appears on your credit card." />
34+
<Input ref="addressline1" type="text" name="addressline1" disabled={true} placeholder="Address Line 1" />
35+
<Input ref="addressline2" type="text" name="addressline2" disabled={true} defaultValue="with value" placeholder="Address Line 2" />
36+
<Input ref="city" type="text" name="city" defaultValue="Detroit" placeholder="City" description="Your city as it appears on your credit card." error="Can't process city name" />
37+
<Input ref="state" type="text" name="state" inlinePlaceholder={true} placeholder="State" description="Your state as it appears on your credit card." />
38+
<Input ref="allegiance" inputStyle="floating" type="text" name="allegiance" placeholder="Allegiance" description="The house of which you served under." />
39+
<Input ref="phones" multiline={true} rows={5} type="text" name="phones" placeholder="Phone numbers" description="Your phone numbers." />
40+
</CodeExample>
41+
42+
<h3 className="mui-font-style-title">Props</h3>
43+
{this._getPropInfo()}
44+
45+
<br/><hr/><br/>
46+
47+
<h3 className="mui-font-style-title">Methods</h3>
48+
{this._getMethodInfo()}
49+
50+
<br/><hr/><br/>
51+
52+
<h3 className="mui-font-style-title">Events</h3>
53+
{this._getEventInfo()}
3754
</div>
3855
);
3956
},
4057

41-
_onChange: function(e, value) {
42-
//console.log(value);
58+
_getPropInfo: function() {
59+
var info = [
60+
{
61+
name: 'description',
62+
type: 'string',
63+
header: 'optional',
64+
desc: 'Input description.'
65+
},
66+
{
67+
name: 'error',
68+
type: 'string',
69+
header: 'optional',
70+
desc: 'Error message.'
71+
},
72+
{
73+
name: 'inlinePlaceholder',
74+
type: 'bool',
75+
header: 'default: false',
76+
desc: 'Placeholder will be inline.'
77+
},
78+
{
79+
name: 'multiline',
80+
type: 'bool',
81+
header: 'default: false',
82+
desc: 'Input becames multiline (textarea).'
83+
},
84+
{
85+
name: 'name',
86+
type: 'string',
87+
header: 'required',
88+
desc: 'Input name.'
89+
},
90+
{
91+
name: 'placeholder',
92+
type: 'string',
93+
header: 'optional',
94+
desc: 'Input placeholder.'
95+
},
96+
{
97+
name: 'required',
98+
type: 'bool',
99+
header: 'default: true',
100+
desc: 'Is required.'
101+
},
102+
{
103+
name: 'rows',
104+
type: 'bool',
105+
header: 'default: false',
106+
desc: 'Count of rows in textarea related to multiline: true.'
107+
},
108+
{
109+
name: 'type',
110+
type: 'string',
111+
header: 'default: "text"',
112+
desc: 'Input type, current supports only text and email.'
113+
}
114+
];
115+
116+
return <ComponentInfo infoArray={info} />;
117+
},
118+
119+
_getMethodInfo: function() {
120+
var info = [
121+
{
122+
name: 'blur',
123+
header: 'Input.blur()',
124+
desc: 'Blur input.'
125+
},
126+
{
127+
name: 'clearValue',
128+
header: 'Input.clearValue()',
129+
desc: 'Clearing value.'
130+
},
131+
{
132+
name: 'focus',
133+
header: 'Input.focus()',
134+
desc: 'Focus input.'
135+
},
136+
{
137+
name: 'getValue',
138+
header: 'Input.getValue()',
139+
desc: 'Getting value.'
140+
},
141+
{
142+
name: 'setValue',
143+
header: 'Input.setValue("txt")',
144+
desc: 'Setting value.'
145+
}
146+
];
147+
148+
return <ComponentInfo infoArray={info} />;
149+
},
150+
151+
_getEventInfo: function() {
152+
var info = [
153+
{
154+
name: 'onChange',
155+
header: 'function(e, value)',
156+
desc: 'Fired when the input is changed.'
157+
}
158+
];
159+
160+
return <ComponentInfo infoArray={info} />;
43161
}
44162

45163
});

‎src/js/input.jsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,6 @@ var Input = React.createClass({
1111
required: React.PropTypes.bool,
1212
inlinePlaceholder: React.PropTypes.bool,
1313
rows: React.PropTypes.number,
14-
min: React.PropTypes.number,
15-
max: React.PropTypes.number,
16-
step: React.PropTypes.number,
1714
inputStyle: React.PropTypes.string,
1815
error: React.PropTypes.string,
1916
description: React.PropTypes.string,
@@ -56,7 +53,7 @@ var Input = React.createClass({
5653
'mui-disabled': !!this.props.disabled,
5754
}),
5855
placeholder = this.props.inlinePlaceholder ? this.props.placeholder : "",
59-
inputIsNotEmpty = Boolean(this.state.value),
56+
inputIsNotEmpty = !!this.state.value,
6057
inputClassName = classSet({
6158
'mui-is-not-empty': inputIsNotEmpty
6259
}),
@@ -125,10 +122,12 @@ var Input = React.createClass({
125122
},
126123

127124
_onLineBreak: function(e) {
128-
var input = (e.target.value.slice(-1));
125+
var value = e.target.value,
126+
input = (value.slice(-1)),
127+
lines = value.split('\n').length;
129128

130-
if(input.match(/\n/gm)) {
131-
if(this.state.rows != 20) {
129+
if (lines > this.state.rows) {
130+
if (this.state.rows != 20) {
132131
this.setState({ rows: ((this.state.rows) + 1)});
133132
}
134133
}

0 commit comments

Comments
 (0)