refactor: edit imageWdget #190

running-elephant · Dec 24, 2021 · 0306d7d · 0306d7d
1 parent 13b63d9
commit 0306d7d
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 28 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/...hBoardPage/pages/BoardEditor/components/SlideSetting/SettingItem/BasicSet/ImageUpload.tsx b/...hBoardPage/pages/BoardEditor/components/SlideSetting/SettingItem/BasicSet/ImageUpload.tsx
@@ -93,10 +93,6 @@ export const UploadDragger: React.FC<{
   );
 };
 const StyleUpload = styled(Upload.Dragger)`
-  .ant-upload-list {
-    display: none;
-  }
-
   .imageUpload {
     display: block;
   }
@@ -127,7 +123,11 @@ const StyleUpload = styled(Upload.Dragger)`
     height: auto;
   }
 `;
-const Wrapper = styled.div``;
+const Wrapper = styled.div`
+  .ant-upload-list {
+    display: none;
+  }
+`;
 
 const Placeholder = styled.p`
   color: ${p => p.theme.textColorLight};