feat: expression terminator

packages/entity/src/behavior-components/expression.jsx

@@ -21,29 +21,55 @@ const Expression = ({
   let walk = context;
   // eslint-disable-next-line react/destructuring-assignment
   let description = context.constructor.descriptionFor(walk);
-  do {
   const onChange = (event, value, localPath) => {
     const relative = localPath.slice(path.length + 1);
     const j = parseInt(relative.split('/')[1], 10);
-      if (j < ops.length - 1) {
     const patches = [
       {path: localPath, value},
     ];
-        for (let i = j + 1; i < ops.length; ++i) {
-          patches.push({op: 'remove', path: join(path, 'ops', i.toString())});
+    if (j < ops.length - 1) {
+      for (let k = j + 1; k < ops.length; ++k) {
+        patches.push({op: 'remove', path: join(path, 'ops', k.toString())});
       }
+    }
+    else if (j === ops.length) {
+      patches.unshift({
+        op: 'add',
+        path: join(path, 'ops', j.toString()),
+        value: {
+          type: 'key',
+        },
+      });
+    }
+    if ('.' !== patches[0].value) {
+      // eslint-disable-next-line babel/no-unused-expressions
       patch(patches);
-        return;
     }
-      patch({path: localPath, value});
+    else {
+      const parts = patches[0].path.split('/');
+      parts.pop();
+      patch({
+        op: 'remove',
+        path: parts.join('/'),
+      });
+    }
   };
+  do {
     const op = ops[i];
     const opKey = JSON.stringify(op);
     const opPath = join(path, 'ops', Ops.length.toString());
     if (isKey(op)) {
+      const isLast = i === ops.length - 1 ? true : isInvocation(ops[i + 1]);
       Ops.push(
         <Key
-          description={description}
+          childrenDescription={{
+            ...(
+              isLast
+                ? {'.': {label: '', type: description.type}}
+                : {}
+            ),
+            ...description.children,
+          }}
           key={opKey}
           onChange={onChange}
           op={op}
@@ -72,11 +98,31 @@ const Expression = ({
         walk = walk[op.key];
       }
       description = {
-        ...description.children[op.key],
         ...context.constructor.descriptionFor(walk),
+        ...description.children[op.key],
       };
     }
   } while (i++ < ops.length - 1);
+  if (description.children) {
+    const op = {
+      type: 'key',
+      key: '.',
+    };
+    const opKey = JSON.stringify(op);
+    const opPath = join(path, 'ops', Ops.length.toString());
+    Ops.push(
+      <Key
+        childrenDescription={{
+          '.': {label: '', type: description.type},
+          ...description.children,
+        }}
+        key={opKey}
+        onChange={onChange}
+        op={op}
+        path={opPath}
+      />,
+    );
+  }
   return (
     <div
       className={classnames(

packages/entity/src/behavior-components/expression/key.jsx

@@ -3,12 +3,12 @@ import {join} from 'path';
 import {PropTypes, React} from '@latus/react';
 
 const Key = ({
-  description,
+  childrenDescription,
   onChange,
   op,
   path,
 }) => {
-  const options = Object.entries(description.children)
+  const options = Object.entries(childrenDescription)
     .map(([key]) => (
       <option key={key} value={key}>{key}</option>
     ));
@@ -27,9 +27,7 @@ const Key = ({
 };
 
 Key.propTypes = {
-  description: PropTypes.shape({
-    children: PropTypes.shape({}),
-  }).isRequired,
+  childrenDescription: PropTypes.shape({}).isRequired,
   onChange: PropTypes.func.isRequired,
   op: PropTypes.shape({
     key: PropTypes.string,