fixes inline value label not updating (#136)

flydelabs · Aug 11, 2024 · 071114b · 071114b
1 parent e73774f
commit 071114b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 24 deletions.
diff --git a/stdlib/src/Values/CodeExpression.flyde.ts b/stdlib/src/Values/CodeExpression.flyde.ts
@@ -43,7 +43,7 @@ export const CodeExpression: MacroNode<CodeExpressionConfig> = {
   },
   defaultData: {
     value: "inputs.a + inputs.b",
-    label: '"inputs.a + inputs.b"',
+    label: "inputs.a + inputs.b",
   },
   editorConfig: {
     type: "custom",

diff --git a/stdlib/src/Values/CodeExpression.tsx b/stdlib/src/Values/CodeExpression.tsx
@@ -1,18 +1,17 @@
 import { FormGroup, InputGroup, TextArea } from "@blueprintjs/core";
 import type { InlineValueConfig } from "./InlineValue.flyde";
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import { getVariables } from "./getInlineVariables";
 import { MacroEditorComp } from "@flyde/core";
 
-const labelMaxLength = 20;
+const labelMaxLength = 50;
 
 function valToLabel(val: any): string {
   try {
-    const label = JSON.stringify(val);
-    if (label.length > labelMaxLength) {
-      return `${label.slice(0, labelMaxLength)}...`;
+    if (val.length > labelMaxLength) {
+      return `${val.slice(0, labelMaxLength)}...`;
     }
-    return label;
+    return val;
   } catch (e) {
     return `Value`;
   }
@@ -21,21 +20,24 @@ function valToLabel(val: any): string {
 const CodeExpressionEditor: MacroEditorComp<InlineValueConfig> =
   function CodeExpressionEditor(props) {
     const { value, onChange } = props;
+    const [isLabelCustom, setIsLabelCustom] = useState(false);
 
     const changeValue = useCallback(
       (_val) => {
-        const newLabel = valToLabel(_val);
-        const oldLabel = valToLabel(value.value);
-
-        const wasUsingDefaultLabel = value.label === oldLabel || !value.label;
-
-        const labelToUse = wasUsingDefaultLabel ? newLabel : value.label;
-
+        const labelToUse = isLabelCustom ? value.label : valToLabel(_val);
         onChange({ ...value, value: _val, label: labelToUse });
       },
       [value, onChange]
     );
 
+    const changeLabel = useCallback(
+      (newLabel) => {
+        setIsLabelCustom(newLabel ? true : false);
+        onChange({ ...value, label: newLabel });
+      },
+      [value, onChange]
+    );
+
     const vars = getVariables(value.value ?? "");
 
     return (
@@ -67,7 +69,7 @@ const CodeExpressionEditor: MacroEditorComp<InlineValueConfig> =
           <InputGroup
             type="text"
             value={value.label}
-            onChange={(e) => onChange({ ...value, label: e.target.value })}
+            onChange={(e) => changeLabel(e.target.value)}
             placeholder="Code Expression"
           />
         </FormGroup>

diff --git a/stdlib/src/Values/InlineValue.tsx b/stdlib/src/Values/InlineValue.tsx
@@ -6,7 +6,7 @@ import {
   TextArea,
 } from "@blueprintjs/core";
 import type { InlineValueConfig } from "./InlineValue.flyde";
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { MacroEditorComp } from "@flyde/core";
 
 const types: InlineValueConfig["type"][] = [
@@ -25,7 +25,7 @@ const defaultValuePerType = {
   expression: (currValue: any) => currValue,
 };
 
-const labelMaxLength = 20;
+const labelMaxLength = 50;
 
 function valToLabel(val: any): string {
   try {
@@ -42,6 +42,7 @@ function valToLabel(val: any): string {
 const InlineValueEditor: MacroEditorComp<InlineValueConfig> =
   function InlineValueEditor(props) {
     const { value, onChange } = props;
+    const [isLabelCustom, setIsLabelCustom] = useState(false);
 
     const changeType = useCallback(
       (type) => {
@@ -60,18 +61,21 @@ const InlineValueEditor: MacroEditorComp<InlineValueConfig> =
 
     const changeValue = useCallback(
       (_val) => {
-        const newLabel = valToLabel(_val);
-        const oldLabel = valToLabel(value.value);
-
-        const wasUsingDefaultLabel = value.label === oldLabel || !value.label;
-
-        const labelToUse = wasUsingDefaultLabel ? newLabel : value.label;
+        const labelToUse = isLabelCustom ? value.label : valToLabel(_val);
 
         onChange({ ...value, value: _val, label: labelToUse });
       },
       [value, onChange]
     );
 
+    const changeLabel = useCallback(
+      (newLabel) => {
+        setIsLabelCustom(newLabel ? true : false);
+        onChange({ ...value, label: newLabel });
+      },
+      [value, onChange]
+    );
+
     const editorPanel = useMemo(() => {
       switch (value.type) {
         case "string":
@@ -138,7 +142,7 @@ const InlineValueEditor: MacroEditorComp<InlineValueConfig> =
           <InputGroup
             type="text"
             value={value.label}
-            onChange={(e) => onChange({ ...value, label: e.target.value })}
+            onChange={(e) => changeLabel(e.target.value)}
           />
         </FormGroup>
       </div>