feat: Condition component

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

@@ -0,0 +1,76 @@
+import {join} from 'path';
+
+import {PropTypes, React} from '@latus/react';
+import {useJsonPatcher} from '@persea/json';
+
+import Variant from './help/variant';
+
+const Condition = ({context, path, value}) => {
+  const patch = useJsonPatcher();
+  const operands = value.operands.map((operand, i) => {
+    const operandKey = join(path, 'operands', i.toString());
+    return (
+      <Variant
+        context={context}
+        key={operandKey}
+        onChange={(event, value, localPath) => {
+          patch({
+            path: localPath,
+            value,
+          });
+        }}
+        path={operandKey}
+        type="any"
+        value={operand}
+      />
+    );
+  });
+  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>
+  );
+};
+
+Condition.defaultProps = {};
+
+Condition.displayName = 'Condition';
+
+Condition.propTypes = {
+  context: PropTypes.shape({
+    constructor: PropTypes.shape({
+      descriptionFor: PropTypes.func,
+    }),
+    describeChildren: PropTypes.func,
+    get: PropTypes.func,
+  }).isRequired,
+  path: PropTypes.string.isRequired,
+  value: PropTypes.shape({
+    operator: PropTypes.string,
+    operands: PropTypes.arrayOf(
+      PropTypes.any,
+    ),
+  }).isRequired,
+};
+
+export default Condition;

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

@@ -0,0 +1,4 @@
+.condition {
+  align-items: center;
+  display: flex;
+}