Merge pull request #1571 from AndyFong/hotfix/r-display-editor-form

fix(Display): editor layer upload bg image & onChange old value error
edp963 · Mar 17, 2020 · 4d7428f · 4d7428f
2 parents d4aa487 + bc031ac
commit 4d7428f
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 16 deletions.
diff --git a/webapp/app/assets/json/slideSettings/rectangle.json b/webapp/app/assets/json/slideSettings/rectangle.json
@@ -44,7 +44,7 @@
       "name": "backgroundImage",
       "title": "背景图片",
       "component": "upload",
-      "action": "slide/widget/{id}/bgImage",
+      "action": "slide/widget/{layerId}/bgImage",
       "accept": "image/*",
       "autoUpdate": true,
       "labelCol": 12,

diff --git a/webapp/app/assets/json/slideSettings/slide.json b/webapp/app/assets/json/slideSettings/slide.json
@@ -28,7 +28,7 @@
       "name": "backgroundImage",
       "title": "背景图片",
       "component": "upload",
-      "action": "slide/{id}/upload/bgImage",
+      "action": "slide/{slideId}/upload/bgImage",
       "accept": "image/*",
       "autoUpdate": true,
       "labelCol": 12,

diff --git a/webapp/app/containers/Display/components/Setting/Form/Form.tsx b/webapp/app/containers/Display/components/Setting/Form/Form.tsx
@@ -42,13 +42,13 @@ interface ISettingFormProps extends FormComponentProps {
 }
 
 const SettingForm: React.FC<ISettingFormProps> = (props, ref) => {
-  const { form, setting, slideId } = props
+  const { form, setting, slideId, layerId } = props
 
   useImperativeHandle(ref, () => form)
 
   return (
     <Form className="display-setting-form" labelAlign="left">
-      <SlideSettingContext.Provider value={{ form, slideId, size: 'small' }}>
+      <SlideSettingContext.Provider value={{ form, slideId, layerId, size: 'small' }}>
         {setting.params.map((param) => (
           <ItemGroup key={param.name} param={param} />
         ))}
@@ -58,7 +58,6 @@ const SettingForm: React.FC<ISettingFormProps> = (props, ref) => {
 }
 
 let cachedValues = {}
-let debouncedChange = null
 
 export default Form.create<ISettingFormProps>({
   onValuesChange: (props, changedValues) => {
@@ -67,12 +66,10 @@ export default Form.create<ISettingFormProps>({
     }
     cachedValues = { ...cachedValues, ...changedValues }
     const { onChange, layerId } = props
-    if (!debouncedChange) {
-      debouncedChange = debounce((layerId) => {
-        onChange({ ...cachedValues }, layerId)
-        cachedValues = {}
-      }, 1000)
-    }
+    const debouncedChange = debounce((layerId) => {
+      onChange({ ...cachedValues }, layerId)
+      cachedValues = {}
+    }, 1000)
     debouncedChange(layerId)
   }
 })(forwardRef(SettingForm))
diff --git a/webapp/app/containers/Display/components/Setting/Form/Item.tsx b/webapp/app/containers/Display/components/Setting/Form/Item.tsx
@@ -52,7 +52,7 @@ interface IItemProps {
 
 const Item: React.FC<IItemProps> = (props) => {
   const { item } = props
-  const { form, size, slideId } = useContext(SlideSettingContext)
+  const { form, size, slideId, layerId } = useContext(SlideSettingContext)
   let visible = true
   const { relatedItems } = item
   if (Array.isArray(relatedItems)) {
@@ -131,10 +131,9 @@ const Item: React.FC<IItemProps> = (props) => {
       )
       break
     case 'upload':
-      const action = `${api.display}/${item.action}`.replace(
-        /({id})/,
-        slideId.toString()
-      )
+      const action = `${api.display}/${item.action}`
+        .replace(/({slideId})/, slideId ? `${slideId}` : '')
+        .replace(/({layerId})/, layerId ? `${layerId}` : '')
       const img = form.getFieldValue(item.name)
       control = (
         <Upload name={item.name} action={action}>

diff --git a/webapp/app/containers/Display/components/Setting/Form/util.ts b/webapp/app/containers/Display/components/Setting/Form/util.ts
@@ -25,6 +25,7 @@ export const SlideSettingContext = React.createContext<{
   form: WrappedFormUtils
   size: 'large' | 'small' | 'default'
   slideId?: number
+  layerId?: number
 }>({
   form: null,
   size: 'small'