Skip to content

Commit

Permalink
fix #143 add documentation to inputs
Browse files Browse the repository at this point in the history
  • Loading branch information
@ButuzGOL
ButuzGOL committed Dec 27, 2014
1 parent a97440c commit 2a73dc3
Showing 1 changed file with 149 additions and 31 deletions.
180 changes: 149 additions & 31 deletions docs/src/app/components/pages/components/inputs.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,163 @@
var React = require('react'),
mui = require('mui');
var React = require('react');
var mui = require('mui');
var Input = mui.Input;
var CodeExample = require('../../code-example/code-example.jsx');
var ComponentInfo = require('../../component-info.jsx');

var InputsPage = React.createClass({


componentDidMount: function() {
//console.log(this.refs.firstname.getValue());
},

render: function() {
var code =
'// Default\n' +
'<Input ref="firstname" type="text" name="firstname" placeholder="First Name" />\n' +
'// With description\n' +
'<Input ref="lastname" type="text" name="lastname" placeholder="Last Name" description="Your last name as it appears on your credit card." />\n' +
'// Disabled\n' +
'<Input ref="addressline1" type="text" name="addressline1" disabled={true} placeholder="Address Line 1" />\n' +
'// Disabled with value\n' +
'<Input ref="addressline2" type="text" name="addressline2" disabled={true} defaultValue="with value" placeholder="Address Line 2" />\n' +
'// With error\n' +
'<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' +
'// Inline placeholder\n' +
'<Input ref="state" type="text" name="state" inlinePlaceholder={true} placeholder="State" description="Your state as it appears on your credit card." />\n' +
'// Input style "float"\n' +
'<Input ref="allegiance" inputStyle="floating" type="text" name="allegiance" placeholder="Allegiance" description="The house of which you served under." />\n' +
'// Textarea\n' +
'<Input ref="phones" multiline={true} rows={5} type="text" name="phones" placeholder="Phone numbers" description="Your phone numbers." />';

return (
<div>
<h2 className="mui-font-style-headline">Inputs</h2>
<br />
<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." />
<mui.Input ref="lastname" type="text" name="lastname" placeholder="Last Name" description="Your last name as it appears on your credit card." />
<mui.Input ref="disabled" type="text" name="disabled" disabled={true} placeholder="Disabled input" />
<mui.Input ref="disabled_v" type="text" name="disabled_v" disabled={true} defaultValue="with value" placeholder="Disabled input" />
<mui.Input ref="addressline1" type="text" name="addressline1" placeholder="Address Line 1" description="Your address as it appears on your credit card." />
<mui.Input ref="addressline2" type="text" name="zipcode" placeholder="Zip Code" description="Your zip code as it appears on your credit card." />
<mui.Input ref="city" type="text" name="city" placeholder="City" description="Your city as it appears on your credit card." />
<mui.Input ref="state" type="text" name="state" placeholder="State" description="Your state as it appears on your credit card." />
<h2 className="mui-font-style-headline">Error Validation</h2>
<br />
<mui.Input ref="allegiance" type="text" name="allegiance" placeholder="Allegiance" description="The house of which you served under." />
<br />
<h2 className="mui-font-style-headline">Floating</h2>
<br />
<mui.Input ref="username" type="text" inputStyle="floating" name="Username" description="The username associated with your account." />

{/* TODO: Needs to be completed}
<h2 className="mui-font-style-headline">Multi-Line</h2>
<br />
<mui.Input multiline={true} ref="textmessage" type="text" name="textmessage" placeholder="Text Message" description="Your text message." />
{*/}
<CodeExample code={code}>
<Input ref="firstname" type="text" name="firstname" placeholder="First Name" />
<Input ref="lastname" type="text" name="lastname" placeholder="Last Name" description="Your last name as it appears on your credit card." />
<Input ref="addressline1" type="text" name="addressline1" disabled={true} placeholder="Address Line 1" />
<Input ref="addressline2" type="text" name="addressline2" disabled={true} defaultValue="with value" placeholder="Address Line 2" />
<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" />
<Input ref="state" type="text" name="state" inlinePlaceholder={true} placeholder="State" description="Your state as it appears on your credit card." />
<Input ref="allegiance" inputStyle="floating" type="text" name="allegiance" placeholder="Allegiance" description="The house of which you served under." />
<Input ref="phones" multiline={true} rows={5} type="text" name="phones" placeholder="Phone numbers" description="Your phone numbers." />
</CodeExample>

<h3 className="mui-font-style-title">Props</h3>
{this._getPropInfo()}

<br/><hr/><br/>

<h3 className="mui-font-style-title">Methods</h3>
{this._getMethodInfo()}

<br/><hr/><br/>

<h3 className="mui-font-style-title">Events</h3>
{this._getEventInfo()}
</div>
);
},

_onChange: function(e, value) {
//console.log(value);
_getPropInfo: function() {
var info = [
{
name: 'multiline',
type: 'bool',
header: 'default: false',
desc: 'Input becames multiline (textarea).'
},
{
name: 'required',
type: 'bool',
header: 'default: true',
desc: 'Is required.'
},
{
name: 'rows',
type: 'bool',
header: 'default: false',
desc: 'Count of rows in textarea related to multiline: true.'
},
{
name: 'inlinePlaceholder',
type: 'bool',
header: 'default: false',
desc: 'Placeholder will be inline.'
},
{
name: 'error',
type: 'string',
header: 'optional',
desc: 'Error message.'
},
{
name: 'description',
type: 'string',
header: 'optional',
desc: 'Input description.'
},
{
name: 'placeholder',
type: 'string',
header: 'optional',
desc: 'Input placeholder.'
},
{
name: 'type',
type: 'string',
header: 'default: "text"',
desc: 'Input type, current supports only text and email.'
},
{
name: 'name',
type: 'string',
header: 'required',
desc: 'Input name.'
},
];

return <ComponentInfo infoArray={info} />;
},

_getMethodInfo: function() {
var info = [
{
name: 'getValue',
header: 'Input.getValue()',
desc: 'Getting value.'
},
{
name: 'setValue',
header: 'Input.setValue("txt")',
desc: 'Setting value.'
},
{
name: 'clearValue',
header: 'Input.clearValue()',
desc: 'Clearing value.'
},
{
name: 'blur',
header: 'Input.blur()',
desc: 'Blur input.'
},
{
name: 'focus',
header: 'Input.focus()',
desc: 'Focus input.'
}
];

return <ComponentInfo infoArray={info} />;
},

_getEventInfo: function() {
var info = [
{
name: 'onChange',
header: 'function(e, value)',
desc: 'Fired when the input is changed.'
}
];

return <ComponentInfo infoArray={info} />;
}

});
Expand Down

0 comments on commit 2a73dc3

Please sign in to comment.