aboutsummaryrefslogtreecommitdiff
path: root/src/settings/components/ui/Input.tsx
diff options
context:
space:
mode:
authorShin'ya Ueoka <ueokande@i-beam.org>2020-09-21 15:20:41 +0900
committerShin'ya Ueoka <ueokande@i-beam.org>2020-09-21 22:07:55 +0900
commit063ceb215f858a8e2a5bde85d8f9ca24240894c6 (patch)
tree1d5f856885e072124d1d025808ee366e7add2ce1 /src/settings/components/ui/Input.tsx
parent5d82441ce3d12301bb8f04b78b79fffb04121a37 (diff)
Separate input component
Diffstat (limited to 'src/settings/components/ui/Input.tsx')
-rw-r--r--src/settings/components/ui/Input.tsx89
1 files changed, 0 insertions, 89 deletions
diff --git a/src/settings/components/ui/Input.tsx b/src/settings/components/ui/Input.tsx
deleted file mode 100644
index 0e24277..0000000
--- a/src/settings/components/ui/Input.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import React from "react";
-import "./Input.scss";
-
-interface Props extends React.AllHTMLAttributes<HTMLElement> {
- name: string;
- type: string;
- error?: string;
- label: string;
- value: string;
- onValueChange?: (name: string, value: string) => void;
- onBlur?: (e: React.FocusEvent<Element>) => void;
-}
-
-class Input extends React.Component<Props> {
- renderText(props: Props) {
- 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
- className={inputClassName}
- onChange={this.bindOnChange.bind(this)}
- {...pp}
- />
- </div>
- );
- }
-
- renderRadio(props: Props) {
- const inputClassName = props.error ? "input-error" : "";
- const pp = { ...props };
- delete pp.onValueChange;
- return (
- <div className="settings-ui-input">
- <label>
- <input
- className={inputClassName}
- onChange={this.bindOnChange.bind(this)}
- {...pp}
- />
- {props.label}
- </label>
- </div>
- );
- }
-
- renderTextArea(props: Props) {
- 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>
- );
- }
-
- 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}`);
- }
- return null;
- }
-
- bindOnChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
- if (this.props.onValueChange) {
- this.props.onValueChange(e.target.name, e.target.value);
- }
- }
-}
-
-export default Input;