From e69497fab457df486b2a7068bdd0283505461f8b Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Thu, 2 May 2019 11:12:28 +0900
Subject: Types src/settings

---
 src/settings/components/ui/AddButton.tsx    |  5 ++-
 src/settings/components/ui/DeleteButton.tsx |  5 ++-
 src/settings/components/ui/Input.tsx        | 52 ++++++++++++++++++++---------
 3 files changed, 45 insertions(+), 17 deletions(-)

(limited to 'src/settings/components/ui')

diff --git a/src/settings/components/ui/AddButton.tsx b/src/settings/components/ui/AddButton.tsx
index 185a03b..0577068 100644
--- a/src/settings/components/ui/AddButton.tsx
+++ b/src/settings/components/ui/AddButton.tsx
@@ -1,7 +1,10 @@
 import './AddButton.scss';
 import React from 'react';
 
-class AddButton extends React.Component {
+interface Props extends React.AllHTMLAttributes<HTMLInputElement> {
+}
+
+class AddButton extends React.Component<Props> {
   render() {
     return <input
       className='ui-add-button' type='button' value='&#x271a;'
diff --git a/src/settings/components/ui/DeleteButton.tsx b/src/settings/components/ui/DeleteButton.tsx
index 75811cd..f0ef6c9 100644
--- a/src/settings/components/ui/DeleteButton.tsx
+++ b/src/settings/components/ui/DeleteButton.tsx
@@ -1,7 +1,10 @@
 import './DeleteButton.scss';
 import React from 'react';
 
-class DeleteButton extends React.Component {
+interface Props extends React.AllHTMLAttributes<HTMLInputElement> {
+}
+
+class DeleteButton extends React.Component<Props> {
   render() {
     return <input
       className='ui-delete-button' type='button' value='&#x2716;'
diff --git a/src/settings/components/ui/Input.tsx b/src/settings/components/ui/Input.tsx
index 13a246b..b7593b9 100644
--- a/src/settings/components/ui/Input.tsx
+++ b/src/settings/components/ui/Input.tsx
@@ -1,34 +1,57 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import './Input.scss';
 
-class Input extends React.Component {
+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;
+}
 
-  renderText(props) {
+class Input extends React.Component<Props> {
+  renderText(props: Props) {
     let inputClassName = props.error ? 'input-error' : '';
+    let pp = { ...props };
+    delete pp.onValueChange;
     return <div className='settings-ui-input'>
       <label htmlFor={props.id}>{ props.label }</label>
-      <input type='text' className={inputClassName} {...props} />
+      <input
+        type='text' className={inputClassName}
+        onChange={this.bindOnChange.bind(this)}
+        { ...pp } />
     </div>;
   }
 
-  renderRadio(props) {
+  renderRadio(props: Props) {
     let inputClassName = props.error ? 'input-error' : '';
+    let pp = { ...props };
+    delete pp.onValueChange;
     return <div className='settings-ui-input'>
       <label>
-        <input type='radio' className={inputClassName} {...props} />
+        <input
+          type='radio' className={inputClassName}
+          onChange={this.bindOnChange.bind(this)}
+          { ...pp } />
         { props.label }
       </label>
     </div>;
   }
 
-  renderTextArea(props) {
+  renderTextArea(props: Props) {
     let inputClassName = props.error ? 'input-error' : '';
+    let pp = { ...props };
+    delete pp.onValueChange;
     return <div className='settings-ui-input'>
       <label
         htmlFor={props.id}
       >{ props.label }</label>
-      <textarea className={inputClassName} {...props} />
+      <textarea
+        className={inputClassName}
+        onChange={this.bindOnChange.bind(this)}
+        { ...pp } />
       <p className='settings-ui-input-error'>{ this.props.error }</p>
     </div>;
   }
@@ -48,13 +71,12 @@ class Input extends React.Component {
     }
     return null;
   }
-}
 
-Input.propTypes = {
-  type: PropTypes.string,
-  error: PropTypes.string,
-  label: PropTypes.string,
-  value: PropTypes.string,
-};
+  bindOnChange(e: React.ChangeEvent<HTMLInputElement|HTMLTextAreaElement>) {
+    if (this.props.onValueChange) {
+      this.props.onValueChange(e.target.name, e.target.value);
+    }
+  }
+}
 
 export default Input;
-- 
cgit v1.2.3