Merge pull request #3695 from illacloud/beta

fix: 🐛 like input value type error

Author: AruSeito

apps/builder/package.json

@@ -5,7 +5,7 @@
   "private": true,
   "author": "ILLA Cloud <[email protected]>",
   "license": "Apache-2.0",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "scripts": {
     "dev": "vite --strictPort --force",
     "build-cloud": "NODE_OPTIONS=--max-old-space-size=12288  vite build --mode cloud",

apps/builder/src/hooks/utils/fixComponentsUtils/likeInput.ts

@@ -7,7 +7,7 @@ export const fixedLikeInputComponentDefaultValue = (
     ...component,
     props: {
       ...component.props,
-      value: "",
+      value: undefined,
       defaultValue: component.props?.defaultValue || "",
     },
   }

apps/builder/src/widgetLibrary/InputWidget/widgetConfig.tsx

@@ -14,7 +14,7 @@ export const INPUT_WIDGET_CONFIG: WidgetConfig = {
   resizeDirection: RESIZE_DIRECTION.HORIZONTAL,
   version: 0,
   defaults: {
-    value: "",
+    value: undefined,
     defaultValue: "",
     label: "Label",
     labelAlign: "left",

apps/builder/src/widgetLibrary/JsonEditorWidget/jsonEditor.tsx

@@ -23,23 +23,33 @@ export const JsonEditorWidget: FC<JsonEditorWidgetProps> = (props) => {
   const cacheValue = useRef(value)
 
   const debounceUpdateOnChange = useRef(
-    debounce((value: unknown) => {
-      if (typeof value === "string") {
-        handleUpdateMultiExecutionResult([
-          {
-            displayName,
-            value: {
-              value: value,
+    debounce(
+      (
+        value: unknown,
+        triggerEventHandler: JsonEditorWidgetProps["triggerEventHandler"],
+      ) => {
+        if (typeof value === "string") {
+          handleUpdateMultiExecutionResult([
+            {
+              displayName,
+              value: {
+                value: value,
+              },
             },
-          },
-        ])
-      }
-    }, 180),
+          ])
+          triggerEventHandler("change")
+        }
+      },
+      180,
+    ),
   )
 
-  const updateOnChange = useCallback((value: unknown) => {
-    debounceUpdateOnChange.current(value)
-  }, [])
+  const updateOnChange = useCallback(
+    (value: unknown) => {
+      debounceUpdateOnChange.current(value, triggerEventHandler)
+    },
+    [triggerEventHandler],
+  )
 
   const handleOnFocus = useCallback(() => {
     triggerEventHandler("focus")
@@ -49,22 +59,34 @@ export const JsonEditorWidget: FC<JsonEditorWidgetProps> = (props) => {
     triggerEventHandler("blur")
   }, [triggerEventHandler])
 
-  const handleOnChange = useCallback(() => {
-    triggerEventHandler("change")
-  }, [triggerEventHandler])
-
   useEffect(() => {
     if (cacheDefaultValue.current !== defaultValue) {
       cacheDefaultValue.current = defaultValue
     }
-  }, [defaultValue, handleOnChange])
+  }, [defaultValue])
+
+  useEffect(() => {
+    if (
+      cacheDefaultValue.current === defaultValue &&
+      cacheValue.current !== cacheDefaultValue.current
+    ) {
+      handleUpdateMultiExecutionResult([
+        {
+          displayName,
+          value: {
+            value: defaultValue,
+          },
+        },
+      ])
+      cacheValue.current = defaultValue
+    }
+  }, [defaultValue, displayName, handleUpdateMultiExecutionResult])
 
   useEffect(() => {
     if (cacheValue.current !== value) {
-      handleOnChange()
       cacheValue.current = value
     }
-  }, [handleOnChange, value])
+  }, [value])
 
   useEffect(() => {
     updateComponentRuntimeProps({

apps/builder/src/widgetLibrary/JsonEditorWidget/widgetConfig.tsx

@@ -15,14 +15,7 @@ export const JSON_EDITOR_WIDGET_CONFIG: WidgetConfig = {
   defaults: {
     colorScheme: "grayBlue",
     hidden: false,
-    value: `[{
-  language: "en-US",
-  userConfig: { "0-16": "planA", "17-24": "planB", "25+": "planC" },
-},
-{
-  language: "ja-JP",
-  userConfig: { "0-16": "planD", "17-24": "planE", "25+": "planF" },
-}]`,
+    value: undefined,
     defaultValue: `[{
   language: "en-US",
   userConfig: { "0-16": "planA", "17-24": "planB", "25+": "planC" },

apps/builder/src/widgetLibrary/NumberInputWidget/numberInput.tsx

@@ -97,15 +97,20 @@ export const NumberInputWidget: FC<NumberInputWidgetProps> = (props) => {
   )
 
   useEffect(() => {
-    setNumberInputValue(defaultValue)
-    handleUpdateMultiExecutionResult([
-      {
-        displayName,
-        value: {
-          value: defaultValue || "",
+    if (
+      typeof defaultValue === "undefined" ||
+      typeof defaultValue === "number"
+    ) {
+      setNumberInputValue(defaultValue)
+      handleUpdateMultiExecutionResult([
+        {
+          displayName,
+          value: {
+            value: (defaultValue as unknown) === "" ? undefined : defaultValue,
+          },
         },
-      },
-    ])
+      ])
+    }
   }, [defaultValue, displayName, handleUpdateMultiExecutionResult])
 
   const debounceOnChange = useRef(
@@ -127,7 +132,7 @@ export const NumberInputWidget: FC<NumberInputWidgetProps> = (props) => {
             {
               displayName,
               value: {
-                value: value === undefined ? "" : value,
+                value: (value as unknown) === "" ? undefined : value,
                 validateMessage: message,
               },
             },
@@ -193,7 +198,7 @@ export const NumberInputWidget: FC<NumberInputWidgetProps> = (props) => {
         numberInputRef.current?.focus()
       },
       setValue: (value: number) => {
-        if (typeof value === "number") {
+        if (typeof value === "number" || typeof value === "undefined") {
           handleOnChange(value)
         }
       },

apps/builder/src/widgetLibrary/NumberInputWidget/widgetConfig.tsx

@@ -16,7 +16,7 @@ export const NUMBER_INPUT_WIDGET_CONFIG: WidgetConfig = {
   defaults: {
     label: "Label",
     defaultValue: "",
-    value: "",
+    value: undefined,
     labelAlign: "left",
     labelPosition: "left",
     labelWidth: "{{33}}",

apps/builder/src/widgetLibrary/SliderWidget/widgetConfig.tsx

@@ -14,7 +14,7 @@ export const SLIDER_WIDGET_CONFIG: WidgetConfig = {
   resizeDirection: RESIZE_DIRECTION.HORIZONTAL,
   version: 0,
   defaults: {
-    value: "{{2}}",
+    value: undefined,
     defaultValue: "{{2}}",
     min: "{{0}}",
     max: "{{10}}",

apps/builder/src/widgetLibrary/TextAreaWidget/widgetConfig.tsx

@@ -13,7 +13,7 @@ export const TEXTAREA_WIDGET_CONFIG: WidgetConfig = {
   h: 8,
   version: 0,
   defaults: {
-    value: "",
+    value: undefined,
     defaultValue: "",
     label: "Label",
     labelAlign: "left",