diff options
Diffstat (limited to 'src/settings/components/ui/Input.tsx')
| -rw-r--r-- | src/settings/components/ui/Input.tsx | 89 | 
1 files changed, 49 insertions, 40 deletions
| diff --git a/src/settings/components/ui/Input.tsx b/src/settings/components/ui/Input.tsx index 69c14b3..6819ddb 100644 --- a/src/settings/components/ui/Input.tsx +++ b/src/settings/components/ui/Input.tsx @@ -1,5 +1,5 @@ -import React from 'react'; -import './Input.scss'; +import React from "react"; +import "./Input.scss";  interface Props extends React.AllHTMLAttributes<HTMLElement> {    name: string; @@ -13,66 +13,75 @@ interface Props extends React.AllHTMLAttributes<HTMLElement> {  class Input extends React.Component<Props> {    renderText(props: Props) { -    const inputClassName = props.error ? 'input-error' : ''; +    const inputClassName = props.error ? "input-error" : "";      const pp = { ...props };      delete pp.onValueChange; -    return <div className='settings-ui-input'> -      <label htmlFor={props.id}>{ props.label }</label> -      <input -        type='text' className={inputClassName} -        onChange={this.bindOnChange.bind(this)} -        { ...pp } /> -    </div>; +    return ( +      <div className="settings-ui-input"> +        <label htmlFor={props.id}>{props.label}</label> +        <input +          type="text" +          className={inputClassName} +          onChange={this.bindOnChange.bind(this)} +          {...pp} +        /> +      </div> +    );    }    renderRadio(props: Props) { -    const inputClassName = props.error ? 'input-error' : ''; +    const inputClassName = props.error ? "input-error" : "";      const pp = { ...props };      delete pp.onValueChange; -    return <div className='settings-ui-input'> -      <label> -        <input -          type='radio' className={inputClassName} -          onChange={this.bindOnChange.bind(this)} -          { ...pp } /> -        { props.label } -      </label> -    </div>; +    return ( +      <div className="settings-ui-input"> +        <label> +          <input +            type="radio" +            className={inputClassName} +            onChange={this.bindOnChange.bind(this)} +            {...pp} +          /> +          {props.label} +        </label> +      </div> +    );    }    renderTextArea(props: Props) { -    const inputClassName = props.error ? 'input-error' : ''; +    const inputClassName = props.error ? "input-error" : "";      const pp = { ...props };      delete pp.onValueChange; -    return <div className='settings-ui-input'> -      <label -        htmlFor={props.id} -      >{ props.label }</label> -      <textarea -        className={inputClassName} -        onChange={this.bindOnChange.bind(this)} -        { ...pp } /> -      <p className='settings-ui-input-error'>{ this.props.error }</p> -    </div>; +    return ( +      <div className="settings-ui-input"> +        <label htmlFor={props.id}>{props.label}</label> +        <textarea +          className={inputClassName} +          onChange={this.bindOnChange.bind(this)} +          {...pp} +        /> +        <p className="settings-ui-input-error">{this.props.error}</p> +      </div> +    );    }    render() {      const { 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}`); +      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;    } -  bindOnChange(e: React.ChangeEvent<HTMLInputElement|HTMLTextAreaElement>) { +  bindOnChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {      if (this.props.onValueChange) {        this.props.onValueChange(e.target.name, e.target.value);      } | 
