Add partial blacklist form

1 files changed, 25 insertions, 27 deletions

diff --git a/src/settings/components/form/BlacklistForm.tsx b/src/settings/components/form/BlacklistForm.tsx
index f352e41..4e96cbf 100644
--- a/src/settings/components/form/BlacklistForm.tsx
+++ b/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();
     }