From df10208ed5dfbc823eb1979272903d74f02a898c Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sat, 25 Nov 2017 14:59:03 +0900
Subject: blacklist form

---
 src/settings/components/form/blacklist-form.jsx  | 47 ++++++++++++++++++++++++
 src/settings/components/form/blacklist-form.scss |  9 +++++
 2 files changed, 56 insertions(+)
 create mode 100644 src/settings/components/form/blacklist-form.jsx
 create mode 100644 src/settings/components/form/blacklist-form.scss

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

diff --git a/src/settings/components/form/blacklist-form.jsx b/src/settings/components/form/blacklist-form.jsx
new file mode 100644
index 0000000..83b54da
--- /dev/null
+++ b/src/settings/components/form/blacklist-form.jsx
@@ -0,0 +1,47 @@
+import './blacklist-form.scss';
+import DeleteButton from '../ui/delete-button';
+import { h, Component } from 'preact';
+
+class BlacklistForm extends Component {
+
+  render() {
+    let value = this.props.value;
+    if (!value) {
+      value = [];
+    }
+
+    return <div className='form-blacklist-form'>
+      {
+        value.map((url, index) => {
+          return <div key={index} className='form-blacklist-form-row'>
+            <input data-index={index} type='text' name='url'
+              className='column-url' value={url}
+              onChange={this.bindValue.bind(this)} />
+            <DeleteButton data-index={index} name='delete'
+              onClick={this.bindValue.bind(this)} />
+          </div>;
+        })
+      }
+    </div>;
+  }
+
+  bindValue(e) {
+    if (!this.props.onChange) {
+      return;
+    }
+
+    let name = e.target.name;
+    let index = e.target.getAttribute('data-index');
+    let next = this.props.value.slice();
+
+    if (name === 'url') {
+      next[index] = e.target.value;
+    } else if (name === 'delete') {
+      next.splice(index, 1);
+    }
+
+    this.props.onChange(next);
+  }
+}
+
+export default BlacklistForm;
diff --git a/src/settings/components/form/blacklist-form.scss b/src/settings/components/form/blacklist-form.scss
new file mode 100644
index 0000000..a230d0d
--- /dev/null
+++ b/src/settings/components/form/blacklist-form.scss
@@ -0,0 +1,9 @@
+.form-blacklist-form {
+  &-row {
+    display: flex;
+
+    .column-url {
+      flex: 1;
+    }
+  }
+}
-- 
cgit v1.2.3