Add keybindings form

This commit is contained in:
Shin'ya Ueoka 2017-11-22 22:38:34 +09:00
parent d33b37cdb9
commit 4e5ddc1d57
7 changed files with 268 additions and 45 deletions

View file

@ -3,32 +3,35 @@ import './input.scss';
class Input extends Component {
renderText(props) {
let inputClassName = props.error ? 'input-error' : '';
return <div className='settings-ui-input'>
<label
type='text'
htmlFor={props.id}
>{ props.label }</label>
<input type='text' className={inputClassName} {...props} />
</div>;
}
renderRadio(props) {
let inputClasses = 'form-field-input';
if (props.error) {
inputClasses += ' input-error';
}
return <div>
let inputClassName = props.error ? 'input-error' : '';
return <div className='settings-ui-input'>
<label>
<input className={ inputClasses } type='radio' {...props} />
<input type='radio' className={inputClassName} {...props} />
{ props.label }
</label>
</div>;
}
renderTextArea(props) {
let inputClasses = 'form-field-input';
if (props.error) {
inputClasses += ' input-error';
}
return <div>
let inputClassName = props.error ? 'input-error' : '';
return <div className='settings-ui-input'>
<label
className='form-field-label'
htmlFor={props.id}
>{ props.label }</label>
<textarea className={inputClasses} {...props} />
<p className='form-field-error'>{ this.props.error }</p>
<textarea className={inputClassName} {...props} />
<p className='settings-ui-input-error'>{ this.props.error }</p>
</div>;
}
@ -36,6 +39,8 @@ class Input extends Component {
let { type } = this.props;
switch (this.props.type) {
case 'text':
return this.renderText(this.props);
case 'radio':
return this.renderRadio(this.props);
case 'textarea':