stable delete and edit separated, preserving undefined

Author: mac-s-g

example/example.js

@@ -14,7 +14,8 @@ ReactDom.render(
         <JsonViewer
         src={getExampleJson1()}
         collapseStringsAfterLength={12}
-        onEdit={(edit)=>{console.log(edit)}} />
+        onEdit={(e)=>{console.log(e)}}
+        onDelete={(e)=>{console.log(e)}} />
 
         <br />
 
@@ -23,7 +24,8 @@ ReactDom.render(
         src={getExampleJson1()}
         theme='railscasts'
         collapseStringsAfterLength={15}
-        onEdit={(e)=>{console.log(e)}} />
+        onEdit={(e)=>{console.log(e)}}
+        onDelete={(e)=>{console.log(e)}} />
 
         <br />
 

package.json

@@ -22,6 +22,7 @@
     "chai": "^3.5.0",
     "clipboard": "^1.6.1",
     "coveralls": "^2.13.1",
+    "deepcopy": "^0.6.3",
     "enzyme": "^2.8.2",
     "flux": "^3.1.2",
     "html-webpack-plugin": "2.28.0",

src/js/components/VariableEditor.js

@@ -38,7 +38,7 @@ class VariableEditor extends React.Component {
     render() {
         const {
             variable, singleIndent, type, theme,
-            namespace, indentWidth, onEdit
+            namespace, indentWidth, onEdit, onDelete
         } = this.props;
         const {hover, editMode} = this.state;
 
@@ -74,13 +74,8 @@ class VariableEditor extends React.Component {
             <div {...Theme(theme, 'variable-value')}>
                 {this.getValue(variable, this.props, editMode)}
             </div>
-            {onEdit
-                ? <span>
-                    {this.getEditIcon(hover)}
-                    {this.getRemoveIcon(hover)}
-                </span>
-                : null
-            }
+            {onEdit !== false ? this.getEditIcon(hover) : null}
+            {onDelete !== false ? this.getRemoveIcon(hover) : null}
         </div>
         );
 
@@ -139,7 +134,6 @@ class VariableEditor extends React.Component {
             class="click-to-remove-icon"
             {...Theme(theme, 'removeVarIcon', hover)}
             onClick={() => {
-                this.state.hover = false;
                 dispatcher.dispatch({
                     name: 'VARIABLE_REMOVED',
                     rjvId: rjvId,
@@ -150,7 +144,6 @@ class VariableEditor extends React.Component {
                         variable_removed: true
                     },
                 });
-                this.setState(this.state);
             }}
             />
         </div>
@@ -218,8 +211,8 @@ class VariableEditor extends React.Component {
                 const new_value = (
                     isNaN(editValue) || !editValue.trim() ? editValue : parseFloat(editValue)
                 );
-                this.state.editMode = false;
                 this.state.hover = false;
+                this.state.editMode = false;
                 dispatcher.dispatch({
                     name: 'VARIABLE_UPDATED',
                     rjvId: rjvId,
@@ -231,6 +224,7 @@ class VariableEditor extends React.Component {
                         variable_removed: false
                     },
                 });
+                this.setState(this.state);
             }}
             />
             </div>

src/js/components/VariableMeta.js

@@ -135,7 +135,7 @@ export default class extends React.Component {
         if (namespace.length == 1) {return}
 
         return (
-        <div
+        <span
         class="click-to-remove"
         style={{verticalAlign: 'top'}}>
             <Remove
@@ -152,15 +152,14 @@ export default class extends React.Component {
                         variable_removed: true
                     },
                 });
-                this.setState(this.state);
             }}
             />
-        </div>
+        </span>
         );
     }
 
     render = () => {
-        const {theme, onEdit} = this.props;
+        const {theme, onEdit, onDelete} = this.props;
         return (
         <div {...Theme(theme, 'object-meta-data')}
         class='object-meta-data'
@@ -172,13 +171,8 @@ export default class extends React.Component {
             {/* copy to clipboard icon */}
             {this.getCopyComponent()}
             {/* copy add/remove icons */}
-            {onEdit !== false
-                ? <span style={{display: 'inline-block'}}>
-                    {this.getAddAttribute()}
-                    {this.getRemoveObject()}
-                </span>
-                : null
-            }
+            {onEdit !== false ? this.getAddAttribute() : null}
+            {onDelete !== false ? this.getRemoveObject() : null}
         </div>
         );
     }

src/js/index.js

@@ -3,6 +3,8 @@ import JsonViewer from './components/JsonViewer';
 import {toType, isTheme} from './helpers/util';
 import ObjectAttributes from './stores/ObjectAttributes';
 
+import deepcopy from 'deepcopy';
+
 //global theme
 import style from './themes/getStyle';
 
@@ -31,7 +33,8 @@ export default class extends React.Component {
         enableClipboard: true,
         displayObjectSize: true,
         displayDataTypes: true,
-        onEdit: false
+        onEdit: false,
+        onDelete: false
     }
 
     componentWillMount() {
@@ -117,25 +120,35 @@ export default class extends React.Component {
         } = ObjectAttributes.get(
             this.rjvId, 'action', 'variable-update'
         );
-        let {src, onEdit} = this.state;
+        let {onEdit} = this.state;
+        let src;
         namespace.shift();
 
-        for (const idx of namespace) {
-            src = src[idx];
-        }
-        if (variable_removed) {
-            if (toType(src) == 'array') {
-                src.splice(name, 1);
+        const getUpdatedSrc = () => {
+            //deepy copy src
+            let updated_src = deepcopy(this.state.src);
+            let walk = updated_src;
+            for (const idx of namespace) {
+                walk = walk[idx];
+            }
+            if (variable_removed) {
+                if (toType(walk) == 'array') {
+                    walk.splice(name, 1);
+                } else {
+                    delete walk[name];
+                }
             } else {
-                delete src[name];
+                walk[name] = new_value;
             }
-        } else {
-            src[name] = new_value;
+
+            return updated_src;
         }
-        this.setState(this.state);
+
+        src = getUpdatedSrc();
 
         const on_edit_payload = {
-            updated_src: this.state.src,
+            existing_src: this.state.src,
+            updated_src: src,
             name: name,
             namespace: namespace,
             existing_value: existing_value,
@@ -144,7 +157,9 @@ export default class extends React.Component {
             on_edit_payload['new_value'] = new_value;
         }
 
-        onEdit(on_edit_payload);
-
+        if (onEdit(on_edit_payload) !== false) {
+            this.state.src = src;
+            this.setState(this.state);
+        }
     }
 }