aboutsummaryrefslogtreecommitdiff
path: root/src/settings/components/ui/Input.tsx
diff options
context:
space:
mode:
authorShin'ya Ueoka <ueokande@i-beam.org>2020-05-02 17:25:56 +0900
committerGitHub <noreply@github.com>2020-05-02 17:25:56 +0900
commit5df0537bcf65a341e79852b1b30379c73318529c (patch)
treeaee5efe52412855f620cb514a13a2c14373f27b7 /src/settings/components/ui/Input.tsx
parent685f2b7b69218b06b5bb676069e35f79c5048c9b (diff)
parent75abd90ecb8201ad845b266f96220d8adfe19b2d (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.tsx89
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);
}