aboutsummaryrefslogblamecommitdiff
path: root/src/settings/components/ui/input.jsx
blob: 2f42b62df47049cd5148a2be95d34fe577dbb47e (plain) (tree)
1
2
3
4
5
6
7
8
9
                          
                      
                                     
 

                                                          
                                                       


                                                                 
                      
                                                          
             
                                                                    




                         
                                                          
            
                              
                                                                     





                              
                                         










                                                     
import React from 'react';
import './input.scss';

class Input extends React.Component {

  renderText(props) {
    let inputClassName = props.error ? 'input-error' : '';
    return <div className='settings-ui-input'>
      <label htmlFor={props.id}>{ props.label }</label>
      <input type='text' className={inputClassName} {...props} />
    </div>;
  }

  renderRadio(props) {
    let inputClassName = props.error ? 'input-error' : '';
    return <div className='settings-ui-input'>
      <label>
        <input type='radio' className={inputClassName} {...props} />
        { props.label }
      </label>
    </div>;
  }

  renderTextArea(props) {
    let inputClassName = props.error ? 'input-error' : '';
    return <div className='settings-ui-input'>
      <label
        htmlFor={props.id}
      >{ props.label }</label>
      <textarea className={inputClassName} {...props} />
      <p className='settings-ui-input-error'>{ this.props.error }</p>
    </div>;
  }

  render() {
    let { type } = this.props;

    switch (this.props.type) {
    case 'text':
      return this.renderText(this.props);
    case 'radio':
      return this.renderRadio(this.props);
    case 'textarea':
      return this.renderTextArea(this.props);
    default:
      console.warn(`Unsupported input type ${type}`);
    }
    return null;
  }
}

export default Input;