Add partial blacklist form

src/settings/components/form/BlacklistForm.tsx

@@ -2,17 +2,17 @@ import './BlacklistForm.scss';
 import AddButton from '../ui/AddButton';
 import DeleteButton from '../ui/DeleteButton';
 import React from 'react';
-import { BlacklistJSON } from '../../../shared/settings/Blacklist';
+import Blacklist, { BlacklistItem } from '../../../shared/settings/Blacklist';
 
 interface Props {
-  value: BlacklistJSON;
-  onChange: (value: BlacklistJSON) => void;
+  value: Blacklist;
+  onChange: (value: Blacklist) => void;
   onBlur: () => void;
 }
 
 class BlacklistForm extends React.Component<Props> {
   public static defaultProps: Props = {
-    value: [],
+    value: new Blacklist([]),
     onChange: () => {},
     onBlur: () => {},
   };
@@ -20,24 +20,22 @@ class BlacklistForm extends React.Component<Props> {
   render() {
     return <div className='form-blacklist-form'>
       {
-        this.props.value
-          .map((item, index) => {
-            if (typeof item !== 'string') {
-              // TODO support partial blacklist;
-              return null;
-            }
-            return <div key={index} className='form-blacklist-form-row'>
-              <input data-index={index} type='text' name='url'
-                className='column-url' value={item}
-                onChange={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-              <DeleteButton data-index={index} name='delete'
-                onClick={this.bindValue.bind(this)}
-                onBlur={this.props.onBlur}
-              />
-            </div>;
-          })
+        this.props.value.items.map((item, index) => {
+          if (item.partial) {
+            return null;
+          }
+          return <div key={index} className='form-blacklist-form-row'>
+            <input data-index={index} type='text' name='url'
+              className='column-url' value={item.pattern}
+              onChange={this.bindValue.bind(this)}
+              onBlur={this.props.onBlur}
+            />
+            <DeleteButton data-index={index} name='delete'
+              onClick={this.bindValue.bind(this)}
+              onBlur={this.props.onBlur}
+            />
+          </div>;
+        })
       }
       <AddButton name='add' style={{ float: 'right' }}
         onClick={this.bindValue.bind(this)} />
@@ -47,17 +45,17 @@ class BlacklistForm extends React.Component<Props> {
   bindValue(e: any) {
     let name = e.target.name;
     let index = e.target.getAttribute('data-index');
-    let next = this.props.value.slice();
+    let items = this.props.value.items;
 
     if (name === 'url') {
-      next[index] = e.target.value;
+      items[index] = new BlacklistItem(e.target.value, false, []);
     } else if (name === 'add') {
-      next.push('');
+      items.push(new BlacklistItem('', false, []));
     } else if (name === 'delete') {
-      next.splice(index, 1);
+      items.splice(index, 1);
     }
 
-    this.props.onChange(next);
+    this.props.onChange(new Blacklist(items));
     if (name === 'delete') {
       this.props.onBlur();
     }

src/settings/components/form/PartialBlacklistForm.scss

@@ -0,0 +1,28 @@
+.form-partial-blacklist-form {
+  @mixin row-base {
+    display: flex;
+
+    .column-url {
+      flex: 5;
+      min-width: 0;
+    }
+    .column-keys {
+      flex: 1;
+      min-width: 0;
+    }
+    .column-delete {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+
+  &-header {
+    @include row-base;
+
+    font-weight: bold;
+  }
+
+  &-row {
+    @include row-base;
+  }
+}

src/settings/components/form/PartialBlacklistForm.tsx

@@ -0,0 +1,79 @@
+import './PartialBlacklistForm.scss';
+import AddButton from '../ui/AddButton';
+import DeleteButton from '../ui/DeleteButton';
+import React from 'react';
+import Blacklist, { BlacklistItem } from '../../../shared/settings/Blacklist';
+
+interface Props {
+  value: Blacklist;
+  onChange: (value: Blacklist) => void;
+  onBlur: () => void;
+}
+
+class PartialBlacklistForm extends React.Component<Props> {
+  public static defaultProps: Props = {
+    value: new Blacklist([]),
+    onChange: () => {},
+    onBlur: () => {},
+  };
+
+  render() {
+    return <div className='form-partial-blacklist-form'>
+      <div className='form-partial-blacklist-form-header'>
+        <div className='column-url'>URL</div>
+        <div className='column-keys'>Keys</div>
+      </div>
+      {
+        this.props.value.items.map((item, index) => {
+          if (!item.partial) {
+            return null;
+          }
+          return <div key={index} className='form-partial-blacklist-form-row'>
+            <input data-index={index} type='text' name='url'
+              className='column-url' value={item.pattern}
+              onChange={this.bindValue.bind(this)}
+              onBlur={this.props.onBlur}
+            />
+            <input data-index={index} type='text' name='keys'
+              className='column-keys' value={item.keys.join(',')}
+              onChange={this.bindValue.bind(this)}
+              onBlur={this.props.onBlur}
+            />
+            <DeleteButton data-index={index} name='delete'
+              onClick={this.bindValue.bind(this)}
+              onBlur={this.props.onBlur}
+            />
+          </div>;
+        })
+      }
+      <AddButton name='add' style={{ float: 'right' }}
+        onClick={this.bindValue.bind(this)} />
+    </div>;
+  }
+
+  bindValue(e: any) {
+    let name = e.target.name;
+    let index = e.target.getAttribute('data-index');
+    let items = this.props.value.items;
+
+    if (name === 'url') {
+      let current = items[index];
+      items[index] = new BlacklistItem(e.target.value, true, current.keys);
+    } else if (name === 'keys') {
+      let current = items[index];
+      items[index] = new BlacklistItem(
+        current.pattern, true, e.target.value.split(','));
+    } else if (name === 'add') {
+      items.push(new BlacklistItem('', true, []));
+    } else if (name === 'delete') {
+      items.splice(index, 1);
+    }
+
+    this.props.onChange(new Blacklist(items));
+    if (name === 'delete') {
+      this.props.onBlur();
+    }
+  }
+}
+
+export default PartialBlacklistForm;