@zohodesk/dot 1.0.0-temp-232 → 1.0.0-temp-230.4

package/es/AttachmentViewer/AttachmentViewer.js

@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import { AttachmentViewer_defaultProps } from "./props/defaultProps";
 import { AttachmentViewer_propTypes } from "./props/propTypes";
 import { Container, Box } from '@zohodesk/components/es/Layout';
-import { Icon } from '@zohodesk/icons';
+import Icon from '@zohodesk/icons/es/Icon';
 import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import Typography from '@zohodesk/components/es/Typography/Typography';
@@ -14,6 +14,8 @@ import AttachmentImage from "./AttachmentImage";
 import Link from "../Link/Link";
 import IconButton from "../IconButton/IconButton";
 import FreezeLayer from "../FreezeLayer/FreezeLayer";
+import { renderNode } from '@zohodesk/utils';
+import { DUMMY_OBJECT } from "../utils/General";
 import { getExtensionFromFileName, getAttachmentIconDetails } from "./Attachment";
 import { shallowDiff } from "../utils/General";
 import { checkFileSourcesValidation, FILE_EXTENSIONS } from "./utils";
@@ -48,6 +50,8 @@ export default class AttachmentViewer extends Component {
     this.handleMenuValidation = this.handleMenuValidation.bind(this);
     this.getPreviewIconData = this.getPreviewIconData.bind(this);
     this.renderIframe = this.renderIframe.bind(this);
+    this.getRenderImageFrameCustomClass = this.getRenderImageFrameCustomClass.bind(this);
+    this.renderImageFrame = this.renderImageFrame.bind(this);
   }
 
   isImageFileType(fileName) {
@@ -74,16 +78,19 @@ export default class AttachmentViewer extends Component {
 
   componentDidUpdate(prevProps, prevState) {
     let {
-      previewObj
+      previewObj,
+      onSelectedAttachmentChange
     } = this.props;
     const {
-      selectedIndex
+      selectedIndex,
+      data
     } = this.state;
     let indexChanged = previewObj.selectedIndex != prevProps.previewObj.selectedIndex;
+    const attachmentPreviewUrlChanged = previewObj.previewData.some((value, index) => value?.viewUrl !== prevState.data[index]?.viewUrl); // Triggers an update if any previewed attachment is edited by the Attachment Annotator.
 
-    if (previewObj.previewData.length != prevProps.previewObj.previewData.length || indexChanged) {
+    if (previewObj.previewData.length != prevProps.previewObj.previewData.length || indexChanged || attachmentPreviewUrlChanged) {
       let objChanged = previewObj.previewData.some((value, index) => {
-        return shallowDiff(value, prevProps.previewObj[index]);
+        return shallowDiff(value, prevProps.previewObj.previewData[index]);
       });
 
       if (objChanged || indexChanged) {
@@ -100,7 +107,11 @@ export default class AttachmentViewer extends Component {
       }
     }
 
-    if (prevState.selectedIndex != selectedIndex) {
+    if (prevState.selectedIndex != selectedIndex || attachmentPreviewUrlChanged) {
+      onSelectedAttachmentChange && onSelectedAttachmentChange({
+        data: data[selectedIndex] || DUMMY_OBJECT,
+        selectedIndex
+      });
       this.handleMenuValidation();
     }
   }
@@ -113,7 +124,7 @@ export default class AttachmentViewer extends Component {
     const {
       allowedPreviewExtensionsData
     } = this.props;
-    const selectedAttachment = data[selectedIndex] || {};
+    const selectedAttachment = data[selectedIndex] || DUMMY_OBJECT;
     const selectedAttachmentViewUrl = selectedAttachment.viewUrl; // const selectedAttachmentDownloadUrl = selectedAttachment.downloadUrl;
 
     const selectedAttachmentName = selectedAttachment.name;
@@ -154,7 +165,8 @@ export default class AttachmentViewer extends Component {
     // }
   }
 
-  zoomIn(event, ele, moveToPosition = false) {
+  zoomIn(event, ele) {
+    let moveToPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     this.setState({
       isZoomed: true
     });
@@ -200,11 +212,12 @@ export default class AttachmentViewer extends Component {
     isZoomed ? this.zoomIn({}, selectedIndex) : this.zoomOut(selectedIndex);
   }
 
-  getUpdateDataList({
-    index,
-    data,
-    dataList
-  }) {
+  getUpdateDataList(_ref) {
+    let {
+      index,
+      data,
+      dataList
+    } = _ref;
     data = data || this.state.data;
     dataList = dataList || this.state.dataList;
     const finalDataList = [...dataList];
@@ -266,9 +279,10 @@ export default class AttachmentViewer extends Component {
     this.props.hideAttachmentViewer();
   }
 
-  responsiveFunc({
-    mediaQueryOR
-  }) {
+  responsiveFunc(_ref2) {
+    let {
+      mediaQueryOR
+    } = _ref2;
     return {
       uptoTablet: mediaQueryOR([{
         maxWidth: 768
@@ -305,16 +319,82 @@ export default class AttachmentViewer extends Component {
     }, this.props.customProps.iframeProps));
   }
 
-  imgPreviewView(downloadUrl) {
+  getRenderImageFrameCustomClass() {
     const {
-      dataList,
       selectedIndex,
       isZoomed,
       canZoom,
+      data
+    } = this.state;
+    const {
+      maintainZoom
+    } = this.props;
+    const selectedData = data[selectedIndex] || DUMMY_OBJECT;
+    const {
+      customClass = DUMMY_OBJECT
+    } = selectedData;
+    const {
+      customImageClass = '',
+      customChildrenClass = ''
+    } = customClass;
+    const retainZoom = canZoom && maintainZoom;
+    return {
+      customImageClass: `${style.img} ${style.altText} ${canZoom || retainZoom ? isZoomed ? `${style.zoomedImg} ${style.zoomOutCursor}` : `${style.normalImg} ${style.zoomInCursor}` : ''} ${customImageClass}`,
+      customChildrenClass
+    };
+  }
+
+  renderImageFrame() {
+    const {
+      selectedIndex,
+      isZoomed,
       isPreviewAttachmentValid
     } = this.state;
     const {
-      maintainZoom,
+      renderCustomImagePreviewElement
+    } = this.props;
+    const data = this.state.data[selectedIndex] || DUMMY_OBJECT;
+    const {
+      viewUrl,
+      name,
+      children,
+      dataId = 'attachViewer',
+      customProps = DUMMY_OBJECT,
+      imageRef
+    } = data;
+    const {
+      imageProps = DUMMY_OBJECT
+    } = customProps;
+    const resolvedImageRef = imageRef;
+    const handleZoomOut = isPreviewAttachmentValid && isZoomed ? this.zoomOut.bind(this, selectedIndex) : undefined;
+    const handleZoomIn = isPreviewAttachmentValid && !isZoomed ? e => this.zoomIn(e, selectedIndex, true) : undefined;
+    const handleImageClick = isPreviewAttachmentValid ? isZoomed ? handleZoomOut : handleZoomIn : undefined;
+    const imageFrameCustomClass = this.getRenderImageFrameCustomClass();
+    const img = /*#__PURE__*/React.createElement(AttachmentImage, _extends({
+      customClass: imageFrameCustomClass,
+      src: viewUrl,
+      onClick: handleImageClick,
+      alt: name,
+      dataId: dataId,
+      id: `img${selectedIndex}`,
+      isCover: false,
+      imageRef: resolvedImageRef
+    }, imageProps), children);
+    return typeof renderCustomImagePreviewElement === 'function' ? renderCustomImagePreviewElement({
+      defaultView: img,
+      data,
+      index: selectedIndex
+    }) : img;
+  }
+
+  imgPreviewView(downloadUrl) {
+    var _this = this;
+
+    const {
+      dataList,
+      selectedIndex
+    } = this.state;
+    const {
       dataId,
       i18nKeys,
       renderUnSupportedElement
@@ -345,27 +425,22 @@ export default class AttachmentViewer extends Component {
       };
     };
 
-    return dataList.length && dataList.map((data = {}, i) => {
+    return dataList.length && dataList.map(function () {
+      let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      let i = arguments.length > 1 ? arguments[1] : undefined;
       const {
         viewUrl,
         name,
         children,
         dataId = 'attachViewer',
-        customClass = {},
         customProps = {},
         previewurl,
         type
       } = data;
       const {
         audioProps = {},
-        imageProps = {},
         videoProps = {}
       } = customProps;
-      const {
-        customImageClass = '',
-        customChildrenClass = ''
-      } = customClass;
-      const retainZoom = canZoom && selectedIndex == i && maintainZoom;
       const extension = getExtensionFromFileName(name);
       const {
         previewUnsupportedText = "Preview not available for the selected file type.",
@@ -381,7 +456,7 @@ export default class AttachmentViewer extends Component {
       }, /*#__PURE__*/React.createElement(Box, {
         className: style.imgRef,
         id: `imgPreviewRef${i}`
-      }, selectedIndex == i && /*#__PURE__*/React.createElement(React.Fragment, null, this.isAudioFileType(name) ? /*#__PURE__*/React.createElement("audio", _extends({
+      }, selectedIndex == i && /*#__PURE__*/React.createElement(React.Fragment, null, _this.isAudioFileType(name) ? /*#__PURE__*/React.createElement("audio", _extends({
         controls: true,
         className: style.zoomIn,
         "data-id": `${dataId}_audioPreview`,
@@ -389,7 +464,7 @@ export default class AttachmentViewer extends Component {
       }, audioProps), /*#__PURE__*/React.createElement("source", {
         src: previewurl || viewUrl,
         type: `audio/${extension}`
-      })) : this.isVideoFileType(name) ? /*#__PURE__*/React.createElement("video", _extends({
+      })) : _this.isVideoFileType(name) ? /*#__PURE__*/React.createElement("video", _extends({
         controls: true,
         className: style.zoomIn,
         "data-id": `${dataId}_videoPreview`,
@@ -397,29 +472,19 @@ export default class AttachmentViewer extends Component {
       }, videoProps), /*#__PURE__*/React.createElement("source", {
         src: viewUrl,
         type: `video/${extension}`
-      })) : this.isImageFileType(name) || children ? /*#__PURE__*/React.createElement(AttachmentImage, _extends({
-        customClass: {
-          customImageClass: `${style.img} ${style.altText} ${canZoom || retainZoom ? isZoomed ? `${style.zoomedImg} ${style.zoomOutCursor}` : `${style.normalImg} ${style.zoomInCursor}` : ''} ${customImageClass}`,
-          customChildrenClass
-        },
-        src: viewUrl,
-        onClick: isPreviewAttachmentValid ? isZoomed ? this.zoomOut.bind(this, i) : e => this.zoomIn(e, i, true) : undefined,
-        alt: name,
-        dataId: dataId,
-        id: `img${i}`,
-        isCover: false
-      }, imageProps), children) : type === "document" && previewurl != null ? this.renderIframe(previewurl) : typeof renderUnSupportedElement === 'function' ? renderUnSupportedElement(data) : /*#__PURE__*/React.createElement("div", {
+      })) : _this.isImageFileType(name) || children ? _this.renderImageFrame() : type === "document" && previewurl != null ? _this.renderIframe(previewurl) : typeof renderUnSupportedElement === 'function' ? renderUnSupportedElement(data) : /*#__PURE__*/React.createElement("div", {
         className: style.previewNone
       }, /*#__PURE__*/React.createElement("div", {
         className: style.fileTypeImg
-      }, this.getPreviewIconData(name, '70')), /*#__PURE__*/React.createElement(Typography, {
+      }, _this.getPreviewIconData(name, '70')), /*#__PURE__*/React.createElement(Typography, {
         $ui_size: "20",
         $ui_weight: "semibold"
       }, previewUnsupportedText), downloadUrl ? /*#__PURE__*/React.createElement(Link, {
         href: downloadUrl,
+        download: true,
+        downloadName: name,
         className: style.downloadLink,
-        hasReload: true,
-        download: true
+        hasReload: true
       }, /*#__PURE__*/React.createElement(Button, {
         palette: "primaryFilled",
         text: downloadText
@@ -442,7 +507,9 @@ export default class AttachmentViewer extends Component {
       i18nKeys,
       isActive,
       dataId,
-      customProps
+      customProps,
+      hasCount,
+      renderCustomIcons
     } = this.props;
     const {
       avatarProps = {}
@@ -470,228 +537,236 @@ export default class AttachmentViewer extends Component {
     }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       responsiveId: responsiveId,
       query: this.responsiveFunc
-    }, ({
-      uptoTablet
-    }) => /*#__PURE__*/React.createElement(Container, {
-      scroll: "none",
-      "data-scroll-palette": "dark"
-    }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      className: style.header,
-      align: "between",
-      tabindex: "0"
-    }, /*#__PURE__*/React.createElement(Box, {
-      shrink: true,
-      className: style.title,
-      "data-title": selectedAttachment.name,
-      dataId: "attachName",
-      id: ariaId
-    }, selectedAttachment.name), /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.count,
-      dataId: "attachCountContainer"
-    }, selectedIndex + 1, "/", totalLen), /*#__PURE__*/React.createElement(Box, {
-      className: uptoTablet ? style.mbleMenuBar : style.menuBar
-    }, /*#__PURE__*/React.createElement(Container, {
-      isInline: true,
-      alignBox: uptoTablet ? 'column-reverse' : 'row',
-      align: uptoTablet ? 'bottom' : 'center',
-      wrap: "wrap",
-      isCover: false
-    }, canZoom ? isZoomed ? /*#__PURE__*/React.createElement("div", {
-      className: uptoTablet ? style.mobileMenu : style.menu,
-      onClick: this.zoomOut.bind(this, selectedIndex),
-      "data-id": "zoomOut",
-      "data-test-id": "zoomOut",
-      "data-title": i18nKeys.zoomOutText
-    }, /*#__PURE__*/React.createElement(IconButton, {
-      iconName: "ZD-GN-zoomOut",
-      className: style.menuIcon,
-      iconSize: "16",
-      hoverType: "border",
-      a11y: {
-        ariaLabel: i18nKeys.zoomOutText
-      }
-    })) : /*#__PURE__*/React.createElement("div", {
-      className: uptoTablet ? style.mobileMenu : style.menu,
-      onClick: e => this.zoomIn(e, selectedIndex),
-      "data-id": "zoomIn",
-      "data-test-id": "zoomIn",
-      "data-title": i18nKeys.zoomInText
-    }, /*#__PURE__*/React.createElement(IconButton, {
-      iconName: "ZD-GN-zoomIn",
-      className: style.menuIcon,
-      iconSize: "16",
-      hoverType: "border",
-      a11y: {
-        ariaLabel: i18nKeys.zoomInText
-      }
-    })) : null, canOpenInNewTab ? /*#__PURE__*/React.createElement("div", {
-      className: uptoTablet ? style.mobileMenu : style.menu
-    }, /*#__PURE__*/React.createElement(Link, {
-      href: selectedImgUrl,
-      target: "_blank",
-      dataId: "newTabAttach",
-      title: i18nKeys.newTabText
-    }, /*#__PURE__*/React.createElement(IconButton, {
-      iconName: "ZD-GN-newLink",
-      className: style.menuIcon,
-      iconSize: "16",
-      hoverType: "border",
-      needButtonTag: false,
-      a11y: {
-        ariaLabel: i18nKeys.newTabText
-      }
-    }))) : null, needDownload ? /*#__PURE__*/React.createElement("div", {
-      className: uptoTablet ? style.mobileMenu : style.menu
-    }, /*#__PURE__*/React.createElement(Link, {
-      href: downloadUrl,
-      target: "_parent",
-      hasReload: true,
-      download: true,
-      title: i18nKeys.downloadText,
-      dataId: `${dataId}_downloadAttach`
-    }, /*#__PURE__*/React.createElement(IconButton, {
-      iconName: "ZD-GN-download",
-      className: style.menuIcon,
-      iconSize: "16",
-      hoverType: "border",
-      needButtonTag: false,
-      a11y: {
-        ariaLabel: i18nKeys.downloadText
-      }
-    }))) : null, /*#__PURE__*/React.createElement("div", {
-      className: uptoTablet ? style.mobileMenu : style.menu,
-      onClick: this.closeAttachmentViewer,
-      "data-id": "closeAttach",
-      "data-test-id": "closeAttach",
-      "data-title": i18nKeys.closeText
-    }, /*#__PURE__*/React.createElement(IconButton, {
-      iconName: "ZD-cross",
-      iconSize: "15",
-      hoverType: "border",
-      className: style.menuIcon,
-      a11y: {
-        ariaLabel: i18nKeys.closeText
-      },
-      title: i18nKeys.closeText
-    })))))), /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      role: "toolbar",
-      tabindex: "0"
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row"
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: `${style.arrowBox}  ${uptoTablet ? style.mbleArrowBox : style.nrmlArrowBox} ${selectedIndex === 0 ? style.hidden : ''}`,
-      onClick: this.changeSelectedIndex.bind(this, selectedIndex - 1),
-      "data-title": i18nKeys.previousText,
-      "data-title-position": "left"
-    }, /*#__PURE__*/React.createElement("button", {
-      className: style.btn,
-      "aria-label": i18nKeys.previousText
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-arrowLeft3",
-      iconClass: style.arrow,
-      dataId: "leftAttachNav",
-      isBold: true
-    }))), /*#__PURE__*/React.createElement(Box, {
-      className: style.previewBox,
-      tabindex: "0",
-      "aria-describedby": ariaId,
-      isShrink: false,
-      eleRef: this.setImgBoxRef,
-      scroll: "both",
-      flexible: true
-    }, this.imgPreviewView(downloadUrl)), /*#__PURE__*/React.createElement(Box, {
-      className: `${style.arrowBox}  ${uptoTablet ? style.mbleArrowBox : style.nrmlArrowBox} ${totalLen === selectedIndex + 1 ? style.hidden : ''}`,
-      onClick: this.changeSelectedIndex.bind(this, selectedIndex + 1),
-      "data-title": i18nKeys.nextText,
-      "data-title-position": "right"
-    }, /*#__PURE__*/React.createElement("button", {
-      className: style.btn,
-      "aria-label": i18nKeys.nextText
-    }, /*#__PURE__*/React.createElement(Icon, {
-      name: "ZD-arrowRight3",
-      iconClass: style.arrow,
-      dataId: "rightAttachNav",
-      isBold: true
-    }))))), /*#__PURE__*/React.createElement(Box, {
-      className: `${style.footer} ${isPViewListOpen && totalLen !== 1 ? style.footerHeight : style.footerHide} `,
-      dataId: `${dataId}_attachPreviewFooter`
-    }, /*#__PURE__*/React.createElement(Container, {
-      align: "vertical",
-      alignBox: "row",
-      className: style.footerHeight
-    }, author && /*#__PURE__*/React.createElement(Box, {
-      className: style.author,
-      dataId: `${dataId}_authorName`
-    }, /*#__PURE__*/React.createElement(Container, {
-      alignBox: "row",
-      align: "both"
-    }, /*#__PURE__*/React.createElement(Avatar, _extends({
-      name: authorName,
-      size: "xmedium",
-      src: authorHref,
-      palette: "info"
-    }, avatarProps)), /*#__PURE__*/React.createElement(Box, {
-      flexible: true,
-      className: style.authorName,
-      "data-title": authorName
-    }, authorName))), /*#__PURE__*/React.createElement(Box, {
-      flexible: true
-    }, /*#__PURE__*/React.createElement(Container, {
-      align: "vertical",
-      alignBox: "row",
-      scroll: "horizontal",
-      eleRef: el => this.imgListCont = el,
-      className: style.listContainer
-    }, data.map((item, index) => {
-      const {
-        name,
-        viewUrl,
-        children,
-        customClass = {},
-        dataId = 'AttachmentImage',
-        customProps = {}
-      } = item;
+    }, _ref3 => {
       let {
-        thumbnail
-      } = item;
-      const isImageFileType = this.isImageFileType(name) || thumbnail;
-      const {
-        customImageClass = '',
-        customChildrenClass = ''
-      } = customClass;
-      return /*#__PURE__*/React.createElement(Box, {
-        className: `${style.imgItem} ${index === selectedIndex ? style.selected : ''} ${isImageFileType ? '' : style.previewIconDiv}`,
-        key: index,
-        onClick: this.changeSelectedIndex.bind(this, index),
-        eleRef: el => this[`img_${index}`] = el,
-        dataId: "attachPreviewList",
-        "data-title": name
-      }, isImageFileType || children ? /*#__PURE__*/React.createElement(AttachmentImage, _extends({
-        src: thumbnail || viewUrl,
-        size: "small",
-        alt: name,
-        customClass: {
-          customImageClass: `${style.image} ${style.altText} ${customImageClass}`,
-          customChildrenClass: `${style.crsrPointer} ${customChildrenClass}`
+        uptoTablet
+      } = _ref3;
+      return /*#__PURE__*/React.createElement(Container, {
+        scroll: "none",
+        "data-scroll-palette": "dark"
+      }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
+        alignBox: "row",
+        className: style.header,
+        align: "between",
+        tabindex: "0"
+      }, /*#__PURE__*/React.createElement(Box, {
+        shrink: true,
+        className: style.title,
+        "data-title": selectedAttachment.name,
+        dataId: "attachName",
+        id: ariaId
+      }, selectedAttachment.name), hasCount && /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        className: style.count,
+        dataId: "attachCountContainer"
+      }, selectedIndex + 1, "/", totalLen), /*#__PURE__*/React.createElement(Box, {
+        className: uptoTablet ? style.mbleMenuBar : style.menuBar
+      }, /*#__PURE__*/React.createElement(Container, {
+        isInline: true,
+        alignBox: uptoTablet ? 'column-reverse' : 'row',
+        align: uptoTablet ? 'bottom' : 'center',
+        wrap: "wrap",
+        isCover: false
+      }, renderNode(renderCustomIcons, {
+        selectedAttachment,
+        selectedIndex,
+        totalLen
+      }), canZoom ? isZoomed ? /*#__PURE__*/React.createElement("div", {
+        className: uptoTablet ? style.mobileMenu : style.menu,
+        onClick: this.zoomOut.bind(this, selectedIndex),
+        "data-id": "zoomOut",
+        "data-test-id": "zoomOut",
+        "data-title": i18nKeys.zoomOutText
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        iconName: "ZD-GN-zoomOut",
+        className: style.menuIcon,
+        iconSize: "16",
+        hoverType: "border",
+        a11y: {
+          ariaLabel: i18nKeys.zoomOutText
+        }
+      })) : /*#__PURE__*/React.createElement("div", {
+        className: uptoTablet ? style.mobileMenu : style.menu,
+        onClick: e => this.zoomIn(e, selectedIndex),
+        "data-id": "zoomIn",
+        "data-test-id": "zoomIn",
+        "data-title": i18nKeys.zoomInText
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        iconName: "ZD-GN-zoomIn",
+        className: style.menuIcon,
+        iconSize: "16",
+        hoverType: "border",
+        a11y: {
+          ariaLabel: i18nKeys.zoomInText
+        }
+      })) : null, canOpenInNewTab ? /*#__PURE__*/React.createElement("div", {
+        className: uptoTablet ? style.mobileMenu : style.menu
+      }, /*#__PURE__*/React.createElement(Link, {
+        href: selectedImgUrl,
+        target: "_blank",
+        dataId: "newTabAttach",
+        title: i18nKeys.newTabText
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        iconName: "ZD-GN-newLink",
+        className: style.menuIcon,
+        iconSize: "16",
+        hoverType: "border",
+        needButtonTag: false,
+        a11y: {
+          ariaLabel: i18nKeys.newTabText
+        }
+      }))) : null, needDownload ? /*#__PURE__*/React.createElement("div", {
+        className: uptoTablet ? style.mobileMenu : style.menu
+      }, /*#__PURE__*/React.createElement(Link, {
+        href: downloadUrl,
+        downloadName: selectedAttachment.name,
+        target: "_parent",
+        hasReload: true,
+        download: true,
+        title: i18nKeys.downloadText,
+        dataId: `${dataId}_downloadAttach`
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        iconName: "ZD-GN-download",
+        className: style.menuIcon,
+        iconSize: "16",
+        hoverType: "border",
+        needButtonTag: false,
+        a11y: {
+          ariaLabel: i18nKeys.downloadText
+        }
+      }))) : null, /*#__PURE__*/React.createElement("div", {
+        className: uptoTablet ? style.mobileMenu : style.menu,
+        onClick: this.closeAttachmentViewer,
+        "data-id": "closeAttach",
+        "data-test-id": "closeAttach",
+        "data-title": i18nKeys.closeText
+      }, /*#__PURE__*/React.createElement(IconButton, {
+        iconName: "ZD-cross",
+        iconSize: "15",
+        hoverType: "border",
+        className: style.menuIcon,
+        a11y: {
+          ariaLabel: i18nKeys.closeText
+        },
+        title: i18nKeys.closeText
+      })))))), /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        role: "toolbar",
+        tabindex: "0"
+      }, /*#__PURE__*/React.createElement(Container, {
+        alignBox: "row"
+      }, /*#__PURE__*/React.createElement(Box, {
+        className: `${style.arrowBox}  ${uptoTablet ? style.mbleArrowBox : style.nrmlArrowBox} ${selectedIndex === 0 ? style.hidden : ''}`,
+        onClick: this.changeSelectedIndex.bind(this, selectedIndex - 1),
+        "data-title": i18nKeys.previousText,
+        "data-title-position": "left"
+      }, /*#__PURE__*/React.createElement("button", {
+        className: style.btn,
+        "aria-label": i18nKeys.previousText
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "ZD-arrowLeft3",
+        iconClass: style.arrow,
+        dataId: "leftAttachNav",
+        isBold: true
+      }))), /*#__PURE__*/React.createElement(Box, {
+        className: style.previewBox,
+        tabindex: "0",
+        "aria-describedby": ariaId,
+        isShrink: false,
+        eleRef: this.setImgBoxRef,
+        scroll: "both",
+        flexible: true
+      }, this.imgPreviewView(downloadUrl)), /*#__PURE__*/React.createElement(Box, {
+        className: `${style.arrowBox}  ${uptoTablet ? style.mbleArrowBox : style.nrmlArrowBox} ${totalLen === selectedIndex + 1 ? style.hidden : ''}`,
+        onClick: this.changeSelectedIndex.bind(this, selectedIndex + 1),
+        "data-title": i18nKeys.nextText,
+        "data-title-position": "right"
+      }, /*#__PURE__*/React.createElement("button", {
+        className: style.btn,
+        "aria-label": i18nKeys.nextText
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: "ZD-arrowRight3",
+        iconClass: style.arrow,
+        dataId: "rightAttachNav",
+        isBold: true
+      }))))), /*#__PURE__*/React.createElement(Box, {
+        className: `${style.footer} ${isPViewListOpen && totalLen !== 1 ? style.footerHeight : style.footerHide} `,
+        dataId: `${dataId}_attachPreviewFooter`
+      }, /*#__PURE__*/React.createElement(Container, {
+        align: "vertical",
+        alignBox: "row",
+        className: style.footerHeight
+      }, author && /*#__PURE__*/React.createElement(Box, {
+        className: style.author,
+        dataId: `${dataId}_authorName`
+      }, /*#__PURE__*/React.createElement(Container, {
+        alignBox: "row",
+        align: "both"
+      }, /*#__PURE__*/React.createElement(Avatar, _extends({
+        name: authorName,
+        size: "xmedium",
+        src: authorHref,
+        palette: "info"
+      }, avatarProps)), /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        className: style.authorName,
+        "data-title": authorName
+      }, authorName))), /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, /*#__PURE__*/React.createElement(Container, {
+        align: "vertical",
+        alignBox: "row",
+        scroll: "horizontal",
+        eleRef: el => this.imgListCont = el,
+        className: style.listContainer
+      }, data.map((item, index) => {
+        const {
+          name,
+          viewUrl,
+          children,
+          customClass = {},
+          dataId = 'AttachmentImage',
+          customProps = {}
+        } = item;
+        let {
+          thumbnail
+        } = item;
+        const isImageFileType = this.isImageFileType(name) || thumbnail;
+        const {
+          customImageClass = '',
+          customChildrenClass = ''
+        } = customClass;
+        return /*#__PURE__*/React.createElement(Box, {
+          className: `${style.imgItem} ${index === selectedIndex ? style.selected : ''} ${isImageFileType ? '' : style.previewIconDiv}`,
+          key: index,
+          onClick: this.changeSelectedIndex.bind(this, index),
+          eleRef: el => this[`img_${index}`] = el,
+          dataId: "attachPreviewList",
+          "data-title": name
+        }, isImageFileType || children ? /*#__PURE__*/React.createElement(AttachmentImage, _extends({
+          src: thumbnail || viewUrl,
+          size: "small",
+          alt: name,
+          customClass: {
+            customImageClass: `${style.image} ${style.altText} ${customImageClass}`,
+            customChildrenClass: `${style.crsrPointer} ${customChildrenClass}`
+          },
+          dataId: dataId
+        }, customProps), children) : this.getPreviewIconData(name, '40'));
+      }))))), totalLen !== 1 && /*#__PURE__*/React.createElement(IconButton, {
+        dataId: "attachToggle",
+        onClick: this.togglePViewList,
+        iconName: "ZD-GN-hideTab",
+        iconSize: "14",
+        hoverType: "border",
+        iconClass: `${style.thumpIcon} ${isPViewListOpen ? style.thumpIconActive : ''}`,
+        className: style.button,
+        a11y: {
+          ariaLabel: i18nKeys.hideText
         },
-        dataId: dataId
-      }, customProps), children) : this.getPreviewIconData(name, '40'));
-    }))))), totalLen !== 1 && /*#__PURE__*/React.createElement(IconButton, {
-      dataId: "attachToggle",
-      onClick: this.togglePViewList,
-      iconName: "ZD-GN-hideTab",
-      iconSize: "14",
-      hoverType: "border",
-      iconClass: `${style.thumpIcon} ${isPViewListOpen ? style.thumpIconActive : ''}`,
-      className: style.button,
-      a11y: {
-        ariaLabel: i18nKeys.hideText
-      },
-      title: isPViewListOpen ? i18nKeys.hideText : i18nKeys.showText
-    }))));
+        title: isPViewListOpen ? i18nKeys.hideText : i18nKeys.showText
+      }));
+    }));
   }
 
 }