react-toolbox/spec/components/input.js

44 lines
1.9 KiB
JavaScript
Raw Normal View History

import React from 'react';
2015-10-09 20:48:30 +03:00
import Input from '../../components/input';
2015-11-08 01:38:26 +03:00
class InputTest extends React.Component {
state = {
normal: 'Tony Stark',
2015-11-08 01:38:26 +03:00
fixedLabel: '',
2016-01-20 01:14:17 +03:00
withIcon: '',
2016-03-10 07:23:35 +03:00
withCustomIcon: '',
withHintCustomIcon: '',
2016-10-13 03:15:33 +03:00
multilineHint: 'Long Description here',
2016-10-13 03:19:21 +03:00
multilineRows: 'A\n\B\nC\nD\nE\nF'
2015-11-08 01:38:26 +03:00
};
2015-11-29 03:25:21 +03:00
handleChange = (name, value) => {
this.setState({...this.state, [name]: value});
2015-11-08 01:38:26 +03:00
};
render () {
return (
<section>
<h5>Inputs</h5>
<p>lorem ipsum...</p>
2015-11-18 11:19:58 +03:00
<Input
type='text'
value={this.state.normal}
2016-03-13 03:05:19 +03:00
label='First Name' onChange={this.handleChange.bind(this, 'normal')}
2015-11-18 11:19:58 +03:00
maxLength={12}
/>
2015-11-08 01:38:26 +03:00
<Input type='email' value={this.state.fixedLabel} label='Label fixed' floating={false} onChange={this.handleChange.bind(this, 'fixedLabel')} />
<Input type='text' value='Read only' readOnly label='Phone Number' />
2016-03-10 07:23:35 +03:00
<Input type='email' value={this.state.multilineHint} label='Description' hint='Enter Description' multiline onChange={this.handleChange.bind(this, 'multilineHint')} />
2016-10-13 03:19:21 +03:00
<Input type='text' value={this.state.multilineRows} label='Row Limited Description' hint='Enter Description' multiline rows={4} onChange={this.handleChange.bind(this, 'multilineRows')} />
2015-11-08 01:38:26 +03:00
<Input type='text' label='Disabled field' disabled />
2016-03-13 03:05:19 +03:00
<Input type='tel' value={this.state.withIcon} required label='With icon' onChange={this.handleChange.bind(this, 'withIcon')} icon='phone' />
2016-05-21 19:57:49 +03:00
<Input type='tel' value={this.state.withCustomIcon} label='With custom icon' onChange={this.handleChange.bind(this, 'withCustomIcon')} icon='favorite' />
<Input type='text' value={this.state.withHintCustomIcon} label='With Hint Text Icon' hint='Hint Text' onChange={this.handleChange.bind(this, 'withHintCustomIcon')} icon='share' />
2015-11-08 01:38:26 +03:00
</section>
);
}
}
2015-10-09 20:48:30 +03:00
export default InputTest;