fix: Image widget error show blank when initialized

scottsut · scottsut · commit 0eb1c392ec32 · 2023-09-27T22:24:23.000+08:00
diff --git a/frontend/public/images/example.png b/frontend/public/images/example.png
diff --git a/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/HiddenUploader.tsx b/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/HiddenUploader.tsx
@@ -0,0 +1,71 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Upload } from 'antd';
+import { uploadBoardImage } from 'app/pages/DashBoardPage/pages/BoardEditor/slice/thunk';
+import {
+  forwardRef,
+  useCallback,
+  useContext,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import { useDispatch } from 'react-redux';
+import { BoardContext } from '../../BoardProvider/BoardProvider';
+
+interface HiddenUploaderProps {
+  onChange: (url: string) => void;
+}
+
+export const HiddenUploader = forwardRef(
+  ({ onChange }: HiddenUploaderProps, ref) => {
+    const dispatch = useDispatch();
+    const uploadRef = useRef<any>();
+    const { boardId } = useContext(BoardContext);
+
+    useImperativeHandle(ref, () => uploadRef.current?.upload.uploader);
+
+    const beforeUpload = useCallback(
+      async info => {
+        const formData = new FormData();
+        formData.append('file', info);
+        dispatch(
+          uploadBoardImage({
+            boardId,
+            fileName: info.name,
+            formData: formData,
+            resolve: onChange,
+          }),
+        );
+        return false;
+      },
+      [boardId, dispatch, onChange],
+    );
+
+    return (
+      <Upload
+        accept=".jpg,.jpeg,.png,.gif,.svg"
+        beforeUpload={beforeUpload}
+        multiple={false}
+        showUploadList={false}
+        style={{ display: 'none' }}
+        ref={uploadRef}
+      />
+    );
+  },
+);
diff --git a/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/ImageWidget.tsx b/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/ImageWidget.tsx
@@ -15,9 +15,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { Space } from 'antd';
 import { WidgetContext } from 'app/pages/DashBoardPage/components/WidgetProvider/WidgetProvider';
-import { memo, useContext } from 'react';
+import {
+  editBoardStackActions,
+  editWidgetInfoActions,
+} from 'app/pages/DashBoardPage/pages/BoardEditor/slice';
+import { memo, useCallback, useContext, useEffect, useRef } from 'react';
+import { useDispatch } from 'react-redux';
+import styled from 'styled-components/macro';
 import { BoardContext } from '../../BoardProvider/BoardProvider';
 import { FlexStyle, ZIndexStyle } from '../../WidgetComponents/constants';
 import { EditMask } from '../../WidgetComponents/EditMask';
@@ -30,38 +37,99 @@ import {
   getWidgetBaseStyle,
   getWidgetTitle,
 } from '../../WidgetManager/utils/utils';
+import { WidgetInfoContext } from '../../WidgetProvider/WidgetInfoProvider';
+import { HiddenUploader } from './HiddenUploader';
 import { ImageWidgetCore } from './ImageWidgetCore';
+import { Picture } from './Picture';
 
 export const ImageWidget: React.FC<{ hideTitle: boolean }> = memo(
   ({ hideTitle }) => {
+    const dispatch = useDispatch();
     const widget = useContext(WidgetContext);
+    const widgetInfo = useContext(WidgetInfoContext);
     const { editing } = useContext(BoardContext);
     const title = getWidgetTitle(widget.config.customConfig.props);
     title.title = widget.config.name;
     const { background, border, padding } = getWidgetBaseStyle(
       widget.config.customConfig.props,
     );
+    const showBackground =
+      !background.image && background.color === 'transparent';
+    const uploaderRef = useRef<any>();
+
+    useEffect(() => {
+      if (widgetInfo.editing) {
+        uploaderRef.current?.onClick();
+      }
+    }, [widgetInfo.editing]);
+
+    const uploaderChange = useCallback(
+      (url: string) => {
+        dispatch(
+          editBoardStackActions.updateWidgetStyleConfigByPath({
+            ancestors: [0, 0],
+            configItem: {
+              key: 'background',
+              comType: 'background',
+              label: 'background.background',
+              value: { ...background, image: url },
+            },
+            wid: widget.id,
+          }),
+        );
+        dispatch(editWidgetInfoActions.closeWidgetEditing(widget.id));
+      },
+      [dispatch, widget.id, background],
+    );
+
     return (
-      <WidgetWrapper background={background} border={border} padding={padding}>
-        <div style={ZIndexStyle}>
-          {!hideTitle && <WidgetTitle title={title} />}
+      <>
+        <WidgetWrapper
+          background={background}
+          border={border}
+          padding={padding}
+        >
+          <div style={ZIndexStyle}>
+            {!hideTitle && <WidgetTitle title={title} />}
 
-          <div style={FlexStyle}>
-            <ImageWidgetCore />
+            <div style={FlexStyle}>
+              <ImageWidgetCore />
+            </div>
           </div>
-        </div>
-        {editing && <EditMask />}
-        <StyledWidgetToolBar>
-          <Space size={0}>
-            <LockIconFn
-              boardEditing={editing}
-              wid={widget.id}
-              lock={widget.config?.lock}
-            />
-            <WidgetDropdownList widget={widget} />
-          </Space>
-        </StyledWidgetToolBar>
-      </WidgetWrapper>
+          {editing && <EditMask />}
+          <StyledWidgetToolBar>
+            <Space size={0}>
+              <LockIconFn
+                boardEditing={editing}
+                wid={widget.id}
+                lock={widget.config?.lock}
+              />
+              <WidgetDropdownList widget={widget} />
+            </Space>
+          </StyledWidgetToolBar>
+        </WidgetWrapper>
+        {editing && (
+          <HiddenUploader onChange={uploaderChange} ref={uploaderRef} />
+        )}
+        {editing && showBackground && (
+          <ImageWidgetBackground>
+            <Picture />
+          </ImageWidgetBackground>
+        )}
+      </>
     );
   },
 );
+
+const ImageWidgetBackground = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
diff --git a/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/Picture.tsx b/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/Picture.tsx
@@ -0,0 +1,51 @@
+/**
+ * Datart
+ *
+ * Copyright 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import useI18NPrefix from 'app/hooks/useI18NPrefix';
+import styled from 'styled-components/macro';
+
+export function Picture() {
+  const t = useI18NPrefix(`viz.board.setting`);
+
+  return (
+    <Svg
+      viewBox="0 0 1029 1128"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M944.148 94.925H235.336c-46.853 0-84.972 38.118-84.972 84.971v39.87H93.46c-46.064 0-83.537 37.473-83.537 83.538v508.81c0 46.065 37.473 83.538 83.537 83.538h696.07c46.064 0 83.538-37.473 83.538-83.538v-41.298h71.08c46.854 0 84.972-38.113 84.972-84.972V179.896c0-46.858-38.113-84.971-84.972-84.971zM61.61 651.372V303.299c0-17.562 14.29-31.847 31.851-31.847h696.07A31.887 31.887 0 0 1 821.38 303.3v479.098L631.43 619.577 477.932 711.68 255.493 457.482 61.61 651.372zM789.53 843.96H93.46a31.887 31.887 0 0 1-31.85-31.85v-87.65l191.365-191.375 214.508 245.15 158.602-95.15L807.29 838.39a31.135 31.135 0 0 1-17.761 5.57z m154.62-124.84h-71.081V303.298c0-46.065-37.474-83.538-83.538-83.538H202.056v-39.87c0-18.35 14.93-33.28 33.28-33.28h708.812c18.35 0 33.28 14.93 33.28 33.28v505.943a33.321 33.321 0 0 1-33.28 33.285zM644.361 552.34c57.278 0 103.87-46.597 103.87-103.869 0-57.277-46.597-103.87-103.87-103.87s-103.87 46.598-103.87 103.87c-0.004 57.272 46.593 103.87 103.87 103.87z m0-156.047c28.77 0 52.178 23.409 52.178 52.178s-23.408 52.178-52.178 52.178-52.178-23.409-52.178-52.178 23.404-52.178 52.178-52.178z"></path>
+      <text x="500" y="1096" textAnchor="middle">
+        {t('dbClickToUpload')}
+      </text>
+    </Svg>
+  );
+}
+
+const Svg = styled.svg`
+  width: 60%;
+  height: 60%;
+
+  path {
+    fill: ${p => p.theme.borderColorEmphasis};
+  }
+
+  text {
+    font-size: 120px;
+    fill: ${p => p.theme.borderColorBase};
+  }
+`;
diff --git a/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/imageConfig.ts b/frontend/src/app/pages/DashBoardPage/components/Widgets/ImageWidget/imageConfig.ts
@@ -96,15 +96,6 @@ export const widgetToolkit: ImageToolkit = {
       { ...initPaddingTpl() },
       { ...initBorderTpl() },
     ];
-    widget.config.customConfig.props?.forEach(ele => {
-      if (ele.key === 'backgroundGroup') {
-        ele.rows?.forEach(row => {
-          if (row.key === 'background') {
-            row.value.image = '/images/example.png';
-          }
-        });
-      }
-    });
 
     return widget;
   },
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/SlideSetting/SettingItem/BasicSet/ImageUpload.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/SlideSetting/SettingItem/BasicSet/ImageUpload.tsx
@@ -63,6 +63,7 @@ export const UploadDragger: React.FC<{
   return (
     <StyleUpload
       name={'upload-image'}
+      accept=".jpg,.jpeg,.png,.gif,.svg"
       className="datart-ant-upload"
       beforeUpload={beforeUpload}
       multiple={false}
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/slice/index.ts b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/slice/index.ts
@@ -195,7 +195,6 @@ const widgetInfoRecordSlice = createSlice({
     closeWidgetEditing(state, action: PayloadAction<string>) {
       const id = action.payload;
       if (id) {
-        state[id].selected = false;
         state[id].editing = false;
       } else {
         for (let key of Object.keys(state)) {
diff --git a/frontend/src/locales/en/translation.json b/frontend/src/locales/en/translation.json
@@ -999,6 +999,7 @@
         "color": "Color",
         "image": "Image",
         "uploadTip": "Click to Upload",
+        "dbClickToUpload": "Double Click To Upload",
         "padding": "Padding",
         "paddingTop": "Padding Top",
         "paddingRight": "Padding Right",
diff --git a/frontend/src/locales/zh/translation.json b/frontend/src/locales/zh/translation.json
@@ -997,6 +997,7 @@
         "color": "颜色",
         "image": "图片",
         "uploadTip": "点击上传",
+        "dbClickToUpload": "双击上传图片",
         "padding": "内边距",
         "paddingTop": "上边距",
         "paddingRight": "右边距",
