Merge pull request #452 from xieliuduo/dev-24.1

refactor: board and widget image setter
running-elephant · Dec 24, 2021 · ee83732 · ee83732
2 parents 354c34e + 0306d7d
commit ee83732
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 138 deletions.
diff --git a/frontend/src/app/pages/DashBoardPage/components/WidgetCore/MediaWidget/ImageWidget/index.tsx b/frontend/src/app/pages/DashBoardPage/components/WidgetCore/MediaWidget/ImageWidget/index.tsx
@@ -15,27 +15,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { Empty } from 'antd';
+import { BoardActionContext } from 'app/pages/DashBoardPage/contexts/BoardActionContext';
+import { WidgetContext } from 'app/pages/DashBoardPage/contexts/WidgetContext';
+import { WidgetInfoContext } from 'app/pages/DashBoardPage/contexts/WidgetInfoContext';
 import useClientRect from 'app/pages/DashBoardPage/hooks/useClientRect';
-import {
-  MediaWidgetContent,
-  Widget,
-  WidgetInfo,
-} from 'app/pages/DashBoardPage/pages/Board/slice/types';
-import { convertImageUrl } from 'app/pages/DashBoardPage/utils';
-import React, { useMemo } from 'react';
+import { MediaWidgetContent } from 'app/pages/DashBoardPage/pages/Board/slice/types';
+import { UploadDragger } from 'app/pages/DashBoardPage/pages/BoardEditor/components/SlideSetting/SettingItem/BasicSet/ImageUpload';
+import produce from 'immer';
+import React, { useCallback, useContext, useMemo } from 'react';
 import styled from 'styled-components/macro';
 
-export interface ImageWidgetProps {
-  widgetConfig: Widget;
-  widgetInfo: WidgetInfo;
-}
 const widgetSize: React.CSSProperties = {
   width: '100%',
   height: '100%',
 };
-const ImageWidget: React.FC<ImageWidgetProps> = ({ widgetConfig }) => {
-  const { imageConfig } = widgetConfig.config.content as MediaWidgetContent;
-
+const ImageWidget: React.FC<{}> = () => {
+  const widget = useContext(WidgetContext);
+  const { editing } = useContext(WidgetInfoContext);
+  const { widgetUpdate } = useContext(BoardActionContext);
+  const { imageConfig } = widget.config.content as MediaWidgetContent;
+  const widgetBgImage = widget.config.background.image;
   const [rect, refDom] = useClientRect<HTMLDivElement>(32);
 
   const widthBigger = useMemo(() => {
@@ -53,21 +53,37 @@ const ImageWidget: React.FC<ImageWidgetProps> = ({ widgetConfig }) => {
           height: 'auto',
         };
   }, [widthBigger]);
+  const onChange = useCallback(
+    value => {
+      const nextWidget = produce(widget, draft => {
+        draft.config.background.image = value;
+      });
+      widgetUpdate(nextWidget);
+    },
+    [widget, widgetUpdate],
+  );
   const imageSize = useMemo(() => {
     return imageConfig?.type === 'IMAGE_RATIO' ? imageRatioCss : widgetSize;
   }, [imageRatioCss, imageConfig?.type]);
-
-  return (
-    <Wrap ref={refDom}>
-      {imageConfig?.src && (
-        <img style={imageSize} src={convertImageUrl(imageConfig?.src)} alt="" />
-      )}
-    </Wrap>
-  );
+  const renderImage = useMemo(() => {
+    return editing ? (
+      <UploadDragger value={widgetBgImage} onChange={onChange} />
+    ) : widgetBgImage ? null : (
+      <Empty description="" />
+    );
+  }, [editing, onChange, widgetBgImage]);
+  return <Wrap ref={refDom}>{renderImage}</Wrap>;
 };
 export default ImageWidget;
 
 const Wrap = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
+
+  .ant-upload-list {
+    display: none;
+  }
 `;
diff --git a/frontend/src/app/pages/DashBoardPage/components/WidgetCore/MediaWidget/index.tsx b/frontend/src/app/pages/DashBoardPage/components/WidgetCore/MediaWidget/index.tsx
@@ -33,7 +33,7 @@ export const MediaWidget: React.FC<{}> = memo(() => {
     case 'richText':
       return <RichTextWidget widgetConfig={widget} widgetInfo={widgetInfo} />;
     case 'image':
-      return <ImageWidget widgetConfig={widget} widgetInfo={widgetInfo} />;
+      return <ImageWidget />;
     case 'video':
       return <VideoWidget />;
     case 'iframe':

diff --git a/...nd/src/app/pages/DashBoardPage/pages/BoardEditor/components/SlideSetting/BoardSetting.tsx b/...nd/src/app/pages/DashBoardPage/pages/BoardEditor/components/SlideSetting/BoardSetting.tsx
@@ -48,7 +48,7 @@ export const BoardSetting: FC = memo(() => {
   useEffect(() => {
     cacheValue.current = {
       backgroundColor: config.background.color,
-      backgroundImage: [config.background.image],
+      backgroundImage: config.background.image,
       scaleMode: config.scaleMode,
       boardWidth: config.width,
       boardHeight: config.height,
@@ -57,17 +57,18 @@ export const BoardSetting: FC = memo(() => {
       paddingW: config.containerPadding[0],
       paddingH: config.containerPadding[1],
       rowHeight: config.rowHeight,
-      initialQuery: config.initialQuery=== false ? false : true, // TODO migration 如果initialQuery的值为undefined默认为true 兼容旧的仪表盘没有initialQuery参数的问题 
+      initialQuery: config.initialQuery === false ? false : true, // TODO migration 如果initialQuery的值为undefined默认为true 兼容旧的仪表盘没有initialQuery参数的问题
     };
     form.setFieldsValue({ ...cacheValue.current });
   }, [config, form]);
 
   const onUpdate = useCallback(
     (newValues, config: DashboardConfig) => {
       const value = { ...cacheValue.current, ...newValues };
+
       const nextConf = produce(config, draft => {
         draft.background.color = getRGBAColor(value.backgroundColor);
-        draft.background.image = value.backgroundImage[0];
+        draft.background.image = value.backgroundImage;
         draft.scaleMode = value.scaleMode;
         draft.width = value.boardWidth;
         draft.height = value.boardHeight;
@@ -76,16 +77,13 @@ export const BoardSetting: FC = memo(() => {
         draft.containerPadding[0] = value.paddingW;
         draft.containerPadding[1] = value.paddingH;
         draft.rowHeight = value.rowHeight;
-        draft.initialQuery= value.initialQuery;
+        draft.initialQuery = value.initialQuery;
       });
       dispatch(editBoardStackActions.updateBoardConfig(nextConf));
     },
     [dispatch],
   );
-  const onForceUpdate = useCallback(() => {
-    const values = form.getFieldsValue();
-    onUpdate(values, config);
-  }, [config, form, onUpdate]);
+
   const throttledUpdate = useRef(
     throttle((allValue, config) => onUpdate(allValue, config), 1000),
   );
@@ -140,11 +138,7 @@ export const BoardSetting: FC = memo(() => {
           )}
           <Panel header="背景设计" key="background" forceRender>
             <Group>
-              <BackgroundSet
-                onForceUpdate={onForceUpdate}
-                background={config.background}
-                form={form}
-              />
+              <BackgroundSet background={config.background} />
             </Group>
           </Panel>
           <Panel header="查询配置" key="initialQuery" forceRender>

diff --git a/...ges/DashBoardPage/pages/BoardEditor/components/SlideSetting/SettingItem/BackgroundSet.tsx b/...ges/DashBoardPage/pages/BoardEditor/components/SlideSetting/SettingItem/BackgroundSet.tsx
@@ -15,26 +15,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Form, FormInstance } from 'antd';
+import { Form } from 'antd';
 import { BackgroundConfig } from 'app/pages/DashBoardPage/pages/Board/slice/types';
 import React, { FC, memo } from 'react';
 import ColorSet from './BasicSet/ColorSet';
-import ImageUpload from './BasicSet/ImageUpload';
+import { ImageUpload } from './BasicSet/ImageUpload';
 export const BackgroundSet: FC<{
-  form: FormInstance;
-  onForceUpdate: () => void;
   background: BackgroundConfig;
-}> = memo(({ form, background, onForceUpdate }) => {
+}> = memo(({ background }) => {
   return (
     <>
       <Form.Item label="背景颜色">
         <ColorSet filedName={'backgroundColor'} filedValue={background.color} />
       </Form.Item>
       <ImageUpload
-        form={form}
-        onForceUpdate={onForceUpdate}
         filedName={'backgroundImage'}
-        filedValue={background.image as string}
+        value={background.image as string}
       />
     </>
   );

diff --git a/...hBoardPage/pages/BoardEditor/components/SlideSetting/SettingItem/BasicSet/ImageUpload.tsx b/...hBoardPage/pages/BoardEditor/components/SlideSetting/SettingItem/BasicSet/ImageUpload.tsx
@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 import { DeleteOutlined } from '@ant-design/icons';
-import { Form, FormInstance, Upload } from 'antd';
+import { Form, Upload } from 'antd';
 import { BoardContext } from 'app/pages/DashBoardPage/contexts/BoardContext';
 import { convertImageUrl } from 'app/pages/DashBoardPage/utils';
 import React, { useCallback, useContext } from 'react';
@@ -25,106 +25,74 @@ import styled from 'styled-components/macro';
 import { uploadBoardImage } from '../../../../slice/thunk';
 
 export interface ImageUploadProps {
-  form: FormInstance;
   filedName: string;
-  onForceUpdate: () => void;
-  filedValue: string;
+
+  value: string;
 }
-const ImageUpload: React.FC<ImageUploadProps> = ({
-  form,
+export const ImageUpload: React.FC<ImageUploadProps> = ({
   filedName,
-  filedValue,
-  onForceUpdate,
+  value,
 }) => {
+  return (
+    <Wrapper>
+      <Form.Item name={filedName} label="背景图片" preserve>
+        <UploadDragger value={value} />
+      </Form.Item>
+    </Wrapper>
+  );
+};
+export const UploadDragger: React.FC<{
+  value: string;
+  onChange?: any;
+}> = ({ value, onChange }) => {
   const dispatch = useDispatch();
   const { boardId } = useContext(BoardContext);
-  const onChange = useCallback(
-    value => {
-      form.setFieldsValue({
-        [filedName]: [value],
-      });
-      onForceUpdate();
-    },
-    [filedName, form, onForceUpdate],
-  );
 
   const beforeUpload = useCallback(
     async info => {
-      // const reader = new FileReader();
-      // reader.readAsDataURL(info);
-      // reader.onload = () => {
-      //   const urlIndex = `${STORAGE_IMAGE_KEY_PREFIX}${info.name || info.uid}`;
-      //   if (reader.result) {
-      //     localStorage.setItem(urlIndex, reader.result as string);
-      //     onChange(urlIndex);
-      //   }
-      // };
       const formData = new FormData();
       formData.append('file', info);
-      dispatch(
+      await dispatch(
         uploadBoardImage({ boardId, formData: formData, resolve: onChange }),
       );
       return false;
     },
     [boardId, dispatch, onChange],
   );
+  const getImageError = useCallback(() => {
+    onChange('');
+  }, [onChange]);
   const delImageUrl = useCallback(
     e => {
       e.stopPropagation();
       onChange('');
     },
     [onChange],
   );
-  const normFile = (e: any) => {
-    if (Array.isArray(e)) {
-      return e;
-    }
-    return e && e.fileList;
-  };
-  const getImageError = useCallback(() => {
-    onChange('');
-  }, [onChange]);
   return (
-    <Wrapper>
-      <Form.Item
-        name={filedName}
-        label="背景图片"
-        valuePropName="fileList"
-        getValueFromEvent={normFile}
-        preserve
-      >
-        <Upload.Dragger
-          name={'upload-image'}
-          className="imageUpload"
-          beforeUpload={beforeUpload}
-          multiple={false}
-        >
-          {filedValue ? (
-            <div className="image-box">
-              <img
-                className="image"
-                src={convertImageUrl(filedValue)}
-                alt=""
-                onError={getImageError}
-              />
-              <DeleteOutlined className="del-button" onClick={delImageUrl} />
-            </div>
-          ) : (
-            <Placeholder>点击上传</Placeholder>
-          )}
-        </Upload.Dragger>
-      </Form.Item>
-    </Wrapper>
+    <StyleUpload
+      name={'upload-image'}
+      className="imageUpload"
+      beforeUpload={beforeUpload}
+      multiple={false}
+    >
+      {value ? (
+        <div className="image-box">
+          <img
+            className="image"
+            src={convertImageUrl(value)}
+            alt=""
+            onError={getImageError}
+          />
+          <DeleteOutlined className="del-button" onClick={delImageUrl} />
+        </div>
+      ) : (
+        <Placeholder>点击上传</Placeholder>
+      )}
+    </StyleUpload>
   );
 };
-
-export default ImageUpload;
-
-const Wrapper = styled.div`
-  .ant-upload-list {
-    display: none;
-  }
-
+const StyleUpload = styled(Upload.Dragger)`
   .imageUpload {
     display: block;
   }
@@ -155,6 +123,11 @@ const Wrapper = styled.div`
     height: auto;
   }
 `;
+const Wrapper = styled.div`
+  .ant-upload-list {
+    display: none;
+  }
+`;
 
 const Placeholder = styled.p`
   color: ${p => p.theme.textColorLight};

diff --git a/...app/pages/DashBoardPage/pages/BoardEditor/components/SlideSetting/SettingItem/NameSet.tsx b/...app/pages/DashBoardPage/pages/BoardEditor/components/SlideSetting/SettingItem/NameSet.tsx
@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Checkbox, Form, FormInstance, Input } from 'antd';
+import { Checkbox, Form, Input } from 'antd';
 import BasicFont from 'app/components/FormGenerator/Basic/BasicFont';
 import { WIDGET_TITLE_ALIGN_OPTIONS } from 'app/pages/DashBoardPage/constants';
 import { WidgetNameConfig } from 'app/pages/DashBoardPage/pages/Board/slice/types';
@@ -33,9 +33,7 @@ const FONT_DATA = {
 
 export const NameSet: FC<{
   config: WidgetNameConfig;
-  form: FormInstance;
-  onForceUpdate: () => void;
-}> = memo(({ config, onForceUpdate, form }) => {
+}> = memo(({ config }) => {
   const fontData = useMemo(() => {
     const data = {
       ...FONT_DATA,