refactor: literal handles its typing

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

@@ -3,9 +3,6 @@ import {join} from 'path';
 import {
   PropTypes,
   React,
-  useEffect,
-  useRef,
-  useState,
 } from '@latus/react';
 import {useJsonPatcher} from '@persea/json';
 
@@ -19,43 +16,11 @@ const Invocation = ({
   op,
   path,
 }) => {
-  const literalTypeRef = useRef();
-  const [literalType, setLiteralType] = useState(false);
-  useEffect(() => {
-    literalTypeRef.current?.focus();
-  });
   const patch = useJsonPatcher();
   const argComponent = (arg, i) => {
     const argPath = join(path, 'args', i.toString());
     if ('undefined' === arg.type) {
-      const confirmLiteralType = () => {
+      return (
-        let value = null;
-        switch (literalType) {
-          case 'expressions':
-            value = {
-              type: 'expressions',
-              expressions: [],
-            };
-            break;
-          case 'number': value = 0; break;
-          case 'string': value = ''; break;
-          case 'array': value = []; break;
-          case 'object': value = {}; break;
-          case 'vector': value = [0, 0]; break;
-          default:
-        }
-        patch({
-          op: 'replace',
-          path: argPath,
-          value: {
-            type: 'literal',
-            value,
-          },
-        });
-        setLiteralType(false);
-      };
-      return false === literalType
-        ? (
         <Key
           childrenDescription={{
             '...': {label: '', type: 'undefined'},
@@ -66,9 +31,15 @@ const Invocation = ({
           key={path}
           onChange={(event, value) => {
             if ('[literal]' === value) {
-                setLiteralType('');
+              patch({
+                type: 'add',
+                path: argPath,
+                value: {
+                  type: 'literal',
+                },
+              });
+              return;
             }
-              else {
             patch({
               type: 'add',
               path: argPath,
@@ -82,27 +53,10 @@ const Invocation = ({
               },
             });
             onChange(false, value, join(argPath, 'ops/0/key'));
-              }
           }}
           path={argPath}
           value="..."
         />
-        )
-        : (
-          <input
-            type="text"
-            onBlur={confirmLiteralType}
-            onChange={({target: {value}}) => {
-              setLiteralType(value);
-            }}
-            onKeyPress={(event) => {
-              if ('Enter' === event.key) {
-                confirmLiteralType(event);
-              }
-            }}
-            ref={literalTypeRef}
-            value={literalType}
-          />
       );
     }
     const j = description.vararg ? Math.min(description?.args?.length - 1, i) : i;

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

@@ -1,7 +1,13 @@
 import {join} from 'path';
 
 import {Context} from '@avocado/behavior';
-import {PropTypes, React} from '@latus/react';
+import {
+  PropTypes,
+  React,
+  useEffect,
+  useRef,
+  useState,
+} from '@latus/react';
 import {
   Number,
   Vector,
@@ -23,9 +29,42 @@ const Literal = ({
   value,
   vararg,
 }) => {
+  const literalTypeRef = useRef();
+  const patch = useJsonPatcher();
+  const [literalType, setLiteralType] = useState(false);
+  useEffect(() => {
+    literalTypeRef.current?.focus();
+  });
+  const confirmLiteralType = () => {
+    if (literalType) {
+      let value = null;
+      switch (literalType) {
+        case 'expressions':
+          value = {
+            type: 'expressions',
+            expressions: [],
+          };
+          break;
+        case 'number': value = 0; break;
+        case 'string': value = ''; break;
+        case 'array': value = []; break;
+        case 'object': value = {}; break;
+        case 'vector': value = [0, 0]; break;
+        default:
+      }
+      patch({
+        op: 'replace',
+        path,
+        value: {
+          type: 'literal',
+          value,
+        },
+      });
+    }
+    setLiteralType(false);
+  };
   // eslint-disable-next-line react/destructuring-assignment
   const contextDescription = context.describe();
-  const patch = useJsonPatcher();
   const valueComponent = (path, type, {value}) => {
     switch (type) {
       case 'bool': {
@@ -97,14 +136,56 @@ const Literal = ({
       case 'null':
       case 'array':
         return null;
-      default:
+      default: {
-        return 'undefined' !== typeof value
+        const elements = [];
-          ? valueComponent(path, Context.inferTypeOf(value), {value})
+        if ('undefined' === type || 'any' === type) {
-          : null;
+          elements.push(
+            <select
+              key={join(path, 'equality')}
+              onChange={({target: {value}}) => {
+                if ('≟' === value) {
+                  setLiteralType('');
+                }
+              }}
+              value={false === literalType ? '=' : '≟'}
+            >
+              <option>=</option>
+              <option>≟</option>
+            </select>,
+          );
+        }
+        if ('undefined' !== typeof value) {
+          elements.push(
+            <div className="component" key={join(path, 'component')}>
+              {valueComponent(path, Context.inferTypeOf(value), {value})}
+            </div>,
+          );
+        }
+        return <>{elements}</>;
+      }
     }
   };
   return (
     <>
+      {
+        false !== literalType
+          ? (
+            <input
+              type="text"
+              onBlur={confirmLiteralType}
+              onChange={({target: {value}}) => {
+                setLiteralType(value);
+              }}
+              onKeyPress={(event) => {
+                if ('Enter' === event.key) {
+                  confirmLiteralType(event);
+                }
+              }}
+              ref={literalTypeRef}
+              value={literalType}
+            />
+          )
+          : (
             <Key
               childrenDescription={{
                 ...(
@@ -146,6 +227,8 @@ const Literal = ({
               path={path}
               value="[literal]"
             />
+          )
+      }
       <div className="literal">
         {
           options.length > 0

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

@@ -1,3 +1,5 @@
 .literal {
+  align-items: center;
+  display: flex;
   pointer-events: auto;
 }