diff options
author | Shin'ya Ueoka <ueokande@i-beam.org> | 2020-05-02 17:25:56 +0900 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-05-02 17:25:56 +0900 |
commit | 5df0537bcf65a341e79852b1b30379c73318529c (patch) | |
tree | aee5efe52412855f620cb514a13a2c14373f27b7 /src/settings/components/ui/Input.tsx | |
parent | 685f2b7b69218b06b5bb676069e35f79c5048c9b (diff) | |
parent | 75abd90ecb8201ad845b266f96220d8adfe19b2d (diff) |
Merge pull request #749 from ueokande/qa-0.28
QA 0.28
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); } |