Merge pull request #70 from browngraphicslab/kvp_delete

deleting keys is functional

1 files changed, 13 insertions, 1 deletions

diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index 111f85a05..7ed5ee272 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -1,5 +1,6 @@
 import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
 import "./KeyValueBox.scss";
+import "./KeyValuePair.scss";
 import React = require("react")
 import { FieldViewProps, FieldView } from './FieldView';
 import { Opt, Field } from '../../../fields/Field';
@@ -55,7 +56,18 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
         );
         return (
             <tr className={this.props.rowStyle}>
-                <td>{this.key.Name}</td>
+                {/* <button>X</button> */}
+                <td>
+                    <div className="container">
+                        <div>{this.key.Name}</div>
+                        <button className="delete" onClick={() => {
+                            let field = props.doc.Get(props.fieldKey);
+                            if (field && field instanceof Field) {
+                                props.doc.Set(props.fieldKey, undefined);
+                            }
+                        }}>X</button>
+                    </div>
+                </td>
                 <td><EditableView contents={contents} height={36} GetValue={() => {
                     let field = props.doc.Get(props.fieldKey);
                     if (field && field instanceof Field) {