fix: render-setter expression value bug (#133)

* Create sync.yml * Update sync.yml * fix: render-setter expression value bug * ci: remove sync.yml
NetEase · Apr 16, 2024 · 27166ec · 27166ec
1 parent 1a8d15c
commit 27166ec
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/apps/playground/src/helpers/mock-files.ts b/apps/playground/src/helpers/mock-files.ts
@@ -173,7 +173,7 @@ class App extends React.Component {
             <FormilyFormItem name="select1" component="Select" label="表单项" />
           </FormilyForm>
         </Section>
-        <Section title="原生 DOM" tid="section3">
+        <Section title="原生 DOM" tid="section4">
           <div
             style={{
               border: "1px solid #ccc",

diff --git a/packages/designer/src/setters/render-setter.tsx b/packages/designer/src/setters/render-setter.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { ActionSelect, InputCode } from '@music163/tango-ui';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
 import { Box } from 'coral-system';
+import { value2expressionCode } from '@music163/tango-core';
 
 interface IRenderOption {
   label: string;
@@ -26,10 +27,11 @@ export function RenderSetter({
   options = [],
   fallbackOption,
 }: FormItemComponentProps & RenderSetterProps) {
-  const [inputValue, setInputValue] = useState(value);
-
+  const [inputValue, setInputValue] = useState(() => {
+    return value2expressionCode(value);
+  });
   useEffect(() => {
-    setInputValue(value);
+    setInputValue(value2expressionCode(value));
   }, [value]);
 
   const optionsMap = useMemo(() => {
@@ -53,9 +55,9 @@ export function RenderSetter({
   return (
     <Box>
       <ActionSelect text={text} options={options} onSelect={onSelect} />
-      {value && (
+      {inputValue && (
         <InputCode
-          value={value}
+          value={inputValue}
           onChange={(val) => setInputValue(val)}
           onBlur={() => onChange(inputValue)}
         />