feat: condition++

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

@@ -2,6 +2,7 @@ import {join} from 'path';
 
 import {PropTypes, React} from '@latus/react';
 import {useJsonPatcher} from '@persea/json';
+import classnames from 'classnames';
 
 import Variant from './help/variant';
 
@@ -25,29 +26,81 @@ const Condition = ({context, path, value}) => {
       />
     );
   });
+  const operator = (
+    <select
+      key={join(path, 'operator')}
+      onChange={(event) => {
+        patch({
+          path: join(path, 'operator'),
+          value: event.target.value,
+        });
+      }}
+      value={value.operator}
+    >
+      <option value="is">is</option>
+      <option value="isnt">isnt</option>
+      <option value=">">&gt;</option>
+      <option value=">=">&gt;=</option>
+      <option value="<">&lt;</option>
+      <option value="<=">&lt;=</option>
+      <option value="or">or</option>
+      <option value="and">and</option>
+      <option value="contains">contains</option>
+    </select>
+  );
+  const renderables = [];
+  switch (value.operator) {
+    case 'or':
+    case 'and':
+      renderables.push(operator);
+      renderables.push(...operands.map((operand, i) => (
+        <div className="operand__wrapper">
+          {operand}
+          <button
+            className="condition__remove-operand"
+            onClick={() => {
+              patch({
+                op: 'remove',
+                path: join(path, 'operands', i.toString()),
+              });
+            }}
+            type="button"
+          >
+            x
+          </button>
+        </div>
+      )));
+      renderables.push(
+        <button
+          onClick={() => {
+            patch({
+              op: 'add',
+              path: join(path, 'operands/-'),
+              value: {
+                type: 'literal',
+                value: true,
+              },
+            });
+          }}
+          type="button"
+        >
+          Add operand
+        </button>,
+      );
+      break;
+    default:
+      renderables.push(operands.shift());
+      renderables.push(operator);
+      renderables.push(...operands);
+  }
   return (
-    <div className="condition">
-      {operands.shift()}
-      <select
-        onChange={(event) => {
-          patch({
-            path: join(path, 'operator'),
-            value: event.target.value,
-          });
-        }}
-        value={value.operator}
-      >
-        <option value="is">is</option>
-        <option value="isnt">isnt</option>
-        <option value=">">&gt;</option>
-        <option value=">=">&gt;=</option>
-        <option value="<">&lt;</option>
-        <option value="<=">&lt;=</option>
-        <option value="or">or</option>
-        <option value="and">and</option>
-        <option value="contains">contains</option>
-      </select>
-      {operands}
+    <div
+      className={classnames(
+        'condition',
+        {'condition--vertical': -1 !== ['and', 'or'].indexOf(value.operator)},
+      )}
+    >
+      {renderables}
     </div>
   );
 };

packages/entity/src/behavior-components/condition.scss

@@ -1,4 +1,49 @@
 .condition {
   align-items: center;
   display: flex;
+  &.condition--vertical {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+.condition--vertical {
+
+  > select {
+    margin-bottom: 1em;
+  }
+  > .expression,
+  > .key,
+  > .literal {
+    margin-left: 1em;
+  }
+  > .expression {
+    margin-bottom: 0.5em;
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.condition .condition--vertical {
+  padding-top: 0.5em;
+}
+
+.operand__wrapper {
+  align-items: center;
+  display: flex;
+  padding-left: 0.5em;
+  width: 100%;
+  &:nth-of-type(2n+1) {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+  > button {
+    background-color: transparent;
+    border: none;
+    font-size: 0.8em;
+    margin-left: auto;
+    margin-right: 0.5em;
+    padding: 1em;
+    pointer-events: auto;
+  }
 }