From bc031ac7ae2369597ed77eb71e54052d6e08f8e4 Mon Sep 17 00:00:00 2001
From: andyfong <fangkun1991s@163.com>
Date: Tue, 17 Mar 2020 14:26:49 +0800
Subject: [PATCH] fix(Display): editor layer upload bg image & onChange old
 value error

---
 .../app/assets/json/slideSettings/rectangle.json  |  2 +-
 webapp/app/assets/json/slideSettings/slide.json   |  2 +-
 .../Display/components/Setting/Form/Form.tsx      | 15 ++++++---------
 .../Display/components/Setting/Form/Item.tsx      |  9 ++++-----
 .../Display/components/Setting/Form/util.ts       |  1 +
 5 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/webapp/app/assets/json/slideSettings/rectangle.json b/webapp/app/assets/json/slideSettings/rectangle.json
index 126e0f430..21fe0c73a 100644
--- 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
index 4921f1a3f..0fbcdbc47 100644
--- 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
index 38cbbcd9f..684702443 100644
--- 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
index e0d66bb5a..7f7ee44bb 100644
--- 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
index 815a0b113..c251a05a5 100644
--- 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'