Skip to content

Commit 1fb0c83

Browse files
ButuzGOLButuzGOL
committed
fix #143 add documentation to inputs
1 parent a97440c commit 1fb0c83

File tree

1 file changed

+149
-31
lines changed
  • docs/src/app/components/pages/components

1 file changed

+149
-31
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 = require('../../../../../../src/js/input.jsx');
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: 'multiline',
62+
type: 'bool',
63+
header: 'default: false',
64+
desc: 'Input becames multiline (textarea).'
65+
},
66+
{
67+
name: 'required',
68+
type: 'bool',
69+
header: 'default: true',
70+
desc: 'Is required.'
71+
},
72+
{
73+
name: 'rows',
74+
type: 'bool',
75+
header: 'default: false',
76+
desc: 'Count of rows in textarea related to multiline: true.'
77+
},
78+
{
79+
name: 'inlinePlaceholder',
80+
type: 'bool',
81+
header: 'default: false',
82+
desc: 'Placeholder will be inline.'
83+
},
84+
{
85+
name: 'error',
86+
type: 'string',
87+
header: 'optional',
88+
desc: 'Error message.'
89+
},
90+
{
91+
name: 'description',
92+
type: 'string',
93+
header: 'optional',
94+
desc: 'Input description.'
95+
},
96+
{
97+
name: 'placeholder',
98+
type: 'string',
99+
header: 'optional',
100+
desc: 'Input placeholder.'
101+
},
102+
{
103+
name: 'type',
104+
type: 'string',
105+
header: 'default: "text"',
106+
desc: 'Input type, current supports only text and email.'
107+
},
108+
{
109+
name: 'name',
110+
type: 'string',
111+
header: 'required',
112+
desc: 'Input name.'
113+
},
114+
];
115+
116+
return <ComponentInfo infoArray={info} />;
117+
},
118+
119+
_getMethodInfo: function() {
120+
var info = [
121+
{
122+
name: 'getValue',
123+
header: 'Input.getValue()',
124+
desc: 'Getting value.'
125+
},
126+
{
127+
name: 'setValue',
128+
header: 'Input.setValue("txt")',
129+
desc: 'Setting value.'
130+
},
131+
{
132+
name: 'clearValue',
133+
header: 'Input.clearValue()',
134+
desc: 'Clearing value.'
135+
},
136+
{
137+
name: 'blur',
138+
header: 'Input.blur()',
139+
desc: 'Blur input.'
140+
},
141+
{
142+
name: 'focus',
143+
header: 'Input.focus()',
144+
desc: 'Focus input.'
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
});

0 commit comments

Comments
 (0)