aboutsummaryrefslogtreecommitdiff
path: root/src/settings/components/ui/Input.tsx
diff options
context:
space:
mode:
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);
}