Web:Common:Components:MediaViewer:Sub-Components:Viewer Refactoring and rename the Viewer components to ViewerWrapper

packages/common/components/MediaViewer/sub-components/Viewer/index.tsx

@@ -1,7 +0,0 @@
-import React from "react";
-
-function Viewer() {
-  return <div>index</div>;
-}
-
-export default Viewer;

packages/common/components/MediaViewer/sub-components/ViewerWrapper/ViewerWrapper.props.ts

@@ -1,18 +1,20 @@
-import { ContextMenuModel } from "../../types";
+import { ContextMenuModel, PlaylistType } from "../../types";
 
-interface ViewerProps {
+interface ViewerWrapperProps {
   userAccess: boolean;
   visible: boolean;
   title: string;
-  images: [{ src: string; alt: string }];
+  images: { src: string; alt: string }[];
   inactive: boolean;
-  playlist: number;
+  playlist: PlaylistType[];
   playlistPos: number;
+
   isFavorite: boolean;
   isImage: boolean;
   isAudio: boolean;
   isVideo: boolean;
   isPreviewFile: boolean;
+
   archiveRoom: boolean;
 
   errorTitle: string;
@@ -28,4 +30,4 @@ interface ViewerProps {
   contextModel: () => ContextMenuModel[];
 }
 
-export default ViewerProps;
+export default ViewerWrapperProps;

packages/common/components/MediaViewer/sub-components/ViewerWrapper/index.tsx

@@ -0,0 +1,120 @@
+import React, { useMemo, memo, useCallback } from "react";
+import equal from "fast-deep-equal/react";
+
+import { Viewer } from "@docspace/components/viewer";
+import { isSeparator } from "../../helpers";
+import { getCustomToolbar } from "../../helpers/getCustomToolbar";
+import { ContextMenuModel } from "../../types";
+
+import { StyledDropDown } from "../StyledDropDown";
+import { StyledDropDownItem } from "../StyledDropDownItem";
+import ViewerWrapperProps from "./ViewerWrapper.props";
+
+const DefaultSpeedZoom = 0.25;
+
+function ViewerWrapper(props: ViewerWrapperProps) {
+  const onClickContextItem = useCallback(
+    (item: ContextMenuModel) => {
+      if (isSeparator(item)) return;
+      item.onClick();
+      props.onClose();
+    },
+    [props.onClose]
+  );
+
+  const generateContextMenu = (
+    isOpen: boolean,
+    right: string,
+    bottom: string
+  ) => {
+    const model = props.contextModel();
+
+    return (
+      <StyledDropDown
+        open={isOpen}
+        isDefaultMode={false}
+        directionY="top"
+        directionX="right"
+        fixedDirection={true}
+        withBackdrop={false}
+        manualY={(bottom || "63") + "px"}
+        manualX={(right || "-31") + "px"}
+      >
+        {model.map((item) => {
+          if (item.disabled) return;
+          const isItemSeparator = isSeparator(item);
+
+          return (
+            <StyledDropDownItem
+              className={`${item.isSeparator ? "is-separator" : ""}`}
+              key={item.key}
+              label={isItemSeparator ? undefined : item.label}
+              icon={!isItemSeparator && item.icon ? item.icon : ""}
+              onClick={() => onClickContextItem(item)}
+            />
+          );
+        })}
+      </StyledDropDown>
+    );
+  };
+
+  const toolbars = useMemo(() => {
+    const {
+      onDeleteClick,
+      onDownloadClick,
+      playlist,
+      playlistPos,
+      userAccess,
+    } = props;
+
+    const customToolbar = getCustomToolbar(onDeleteClick, onDownloadClick);
+
+    const canShare = playlist[playlistPos].canShare;
+    const toolbars =
+      !canShare && userAccess
+        ? customToolbar.filter(
+            (x) => x.key !== "share" && x.key !== "share-separator"
+          )
+        : customToolbar.filter((x) => x.key !== "delete");
+
+    return toolbars;
+  }, [
+    props.onDeleteClick,
+    props.onDownloadClick,
+    props.playlist,
+    props.playlistPos,
+    props.userAccess,
+  ]);
+
+  return (
+    <Viewer
+      title={props.title}
+      images={props.images}
+      isAudio={props.isAudio}
+      isVideo={props.isVideo}
+      visible={props.visible}
+      isImage={props.isImage}
+      playlist={props.playlist}
+      inactive={props.inactive}
+      audioIcon={props.audioIcon}
+      zoomSpeed={DefaultSpeedZoom}
+      errorTitle={props.errorTitle}
+      headerIcon={props.headerIcon}
+      customToolbar={() => toolbars}
+      playlistPos={props.playlistPos}
+      archiveRoom={props.archiveRoom}
+      isPreviewFile={props.isPreviewFile}
+      onMaskClick={props.onClose}
+      onNextClick={props.onNextClick}
+      onPrevClick={props.onPrevClick}
+      contextModel={props.contextModel}
+      onDownloadClick={props.onDownloadClick}
+      generateContextMenu={generateContextMenu}
+      onSetSelectionFile={props.onSetSelectionFile}
+    />
+  );
+}
+
+export default memo(ViewerWrapper, (prevProps, nextProps) =>
+  equal(prevProps, nextProps)
+);