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

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/es/Icon';
+import { Icon } from '@zohodesk/icons';
 import Avatar from '@zohodesk/components/es/Avatar/Avatar';
 import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
 import Typography from '@zohodesk/components/es/Typography/Typography';
@@ -47,35 +47,8 @@ export default class AttachmentViewer extends Component {
     this.zoomMaintain = this.zoomMaintain.bind(this);
     this.handleMenuValidation = this.handleMenuValidation.bind(this);
     this.getPreviewIconData = this.getPreviewIconData.bind(this);
-    this.renderIframe = this.renderIframe.bind(this); // this.updateItem = this.updateItem.bind(this);
-  } // updateItem(idOrIndex, changes) {
-  //   if (!changes || typeof changes !== 'object') {
-  //     return false;
-  //   }
-  //   const { data } = this.state;
-  //   const targetIdx = typeof idOrIndex === 'number'
-  //     ? idOrIndex
-  //     : data.findIndex((item) => item && item.id === idOrIndex);
-  //   if (targetIdx < 0 || targetIdx >= data.length) {
-  //     return false;
-  //   }
-  //   this.setState((prevState) => {
-  //     const nextData = prevState.data.slice();
-  //     nextData[targetIdx] = { ...nextData[targetIdx], ...changes };
-  //     let nextDataList = prevState.dataList;
-  //     if (targetIdx < prevState.dataList.length) {
-  //       nextDataList = prevState.dataList.slice();
-  //       nextDataList[targetIdx] = { ...nextDataList[targetIdx], ...changes };
-  //     }
-  //     return { data: nextData, dataList: nextDataList };
-  //   }, () => {
-  //     if (this.state.selectedIndex === targetIdx) {
-  //       this.handleMenuValidation();
-  //     }
-  //   });
-  //   return true;
-  // }
-
+    this.renderIframe = this.renderIframe.bind(this);
+  }
 
   isImageFileType(fileName) {
     const extension = (getExtensionFromFileName(fileName) || '').toLowerCase();
@@ -107,11 +80,10 @@ export default class AttachmentViewer extends Component {
       selectedIndex
     } = 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 || attachmentPreviewUrlChanged) {
+    if (previewObj.previewData.length != prevProps.previewObj.previewData.length || indexChanged) {
       let objChanged = previewObj.previewData.some((value, index) => {
-        return shallowDiff(value, prevProps.previewObj.previewData[index]);
+        return shallowDiff(value, prevProps.previewObj[index]);
       });
 
       if (objChanged || indexChanged) {
@@ -128,7 +100,7 @@ export default class AttachmentViewer extends Component {
       }
     }
 
-    if (prevState.selectedIndex != selectedIndex || attachmentPreviewUrlChanged) {
+    if (prevState.selectedIndex != selectedIndex) {
       this.handleMenuValidation();
     }
   }
@@ -182,8 +154,7 @@ export default class AttachmentViewer extends Component {
     // }
   }
 
-  zoomIn(event, ele) {
-    let moveToPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  zoomIn(event, ele, moveToPosition = false) {
     this.setState({
       isZoomed: true
     });
@@ -229,12 +200,11 @@ export default class AttachmentViewer extends Component {
     isZoomed ? this.zoomIn({}, selectedIndex) : this.zoomOut(selectedIndex);
   }
 
-  getUpdateDataList(_ref) {
-    let {
-      index,
-      data,
-      dataList
-    } = _ref;
+  getUpdateDataList({
+    index,
+    data,
+    dataList
+  }) {
     data = data || this.state.data;
     dataList = dataList || this.state.dataList;
     const finalDataList = [...dataList];
@@ -296,10 +266,9 @@ export default class AttachmentViewer extends Component {
     this.props.hideAttachmentViewer();
   }
 
-  responsiveFunc(_ref2) {
-    let {
-      mediaQueryOR
-    } = _ref2;
+  responsiveFunc({
+    mediaQueryOR
+  }) {
     return {
       uptoTablet: mediaQueryOR([{
         maxWidth: 768
@@ -336,79 +305,7 @@ export default class AttachmentViewer extends Component {
     }, this.props.customProps.iframeProps));
   }
 
-  getRenderImageFrameCustomClass(_ref3) {
-    let {
-      canZoom,
-      retainZoom,
-      isZoomed,
-      customImageClass,
-      customChildrenClass
-    } = _ref3;
-    return {
-      customImageClass: `${style.img} ${style.altText} ${canZoom || retainZoom ? isZoomed ? `${style.zoomedImg} ${style.zoomOutCursor}` : `${style.normalImg} ${style.zoomInCursor}` : ''} ${customImageClass}`,
-      customChildrenClass
-    };
-  }
-
-  renderImageFrame(data, i) {
-    const {
-      selectedIndex,
-      isZoomed,
-      canZoom,
-      isPreviewAttachmentValid
-    } = this.state;
-    const {
-      maintainZoom,
-      renderCustomImagePreviewElement
-    } = this.props;
-    const {
-      viewUrl,
-      name,
-      children,
-      dataId = 'attachViewer',
-      customClass = {},
-      customProps = {},
-      imageRef
-    } = data;
-    const {
-      imageProps = {}
-    } = customProps;
-    const {
-      customImageClass = '',
-      customChildrenClass = ''
-    } = customClass;
-    const resolvedImageRef = imageRef;
-    const retainZoom = canZoom && selectedIndex == i && maintainZoom;
-    const handleZoomOut = isPreviewAttachmentValid && isZoomed ? this.zoomOut.bind(this, i) : undefined;
-    const handleZoomIn = isPreviewAttachmentValid && !isZoomed ? e => this.zoomIn(e, i, true) : undefined;
-    const handleImageClick = isPreviewAttachmentValid ? isZoomed ? handleZoomOut : handleZoomIn : undefined;
-    const imageFrameCustomClass = this.getRenderImageFrameCustomClass({
-      canZoom,
-      retainZoom,
-      isZoomed,
-      customImageClass,
-      customChildrenClass
-    });
-    const img = /*#__PURE__*/React.createElement(AttachmentImage, _extends({}, imageProps, {
-      customClass: imageFrameCustomClass,
-      src: viewUrl,
-      onClick: handleImageClick,
-      alt: name,
-      dataId: dataId,
-      id: `img${i}`,
-      isCover: false,
-      imageRef: resolvedImageRef
-    }), children);
-    return typeof renderCustomImagePreviewElement === 'function' ? renderCustomImagePreviewElement({
-      defaultView: img,
-      data,
-      index: i
-    }) : img;
-  }
-
   imgPreviewView(downloadUrl) {
-    var _this = this;
-
     const {
       dataList,
       selectedIndex,
@@ -448,9 +345,7 @@ export default class AttachmentViewer extends Component {
       };
     };
 
-    return dataList.length && dataList.map(function () {
-      let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      let i = arguments.length > 1 ? arguments[1] : undefined;
+    return dataList.length && dataList.map((data = {}, i) => {
       const {
         viewUrl,
         name,
@@ -486,7 +381,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`,
@@ -494,7 +389,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`,
@@ -502,19 +397,29 @@ export default class AttachmentViewer extends Component {
       }, videoProps), /*#__PURE__*/React.createElement("source", {
         src: viewUrl,
         type: `video/${extension}`
-      })) : _this.isImageFileType(name) || children ? _this.renderImageFrame(data, i) : type === "document" && previewurl != null ? _this.renderIframe(previewurl) : typeof renderUnSupportedElement === 'function' ? renderUnSupportedElement(data) : /*#__PURE__*/React.createElement("div", {
+      })) : 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", {
         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
+        hasReload: true,
+        download: true
       }, /*#__PURE__*/React.createElement(Button, {
         palette: "primaryFilled",
         text: downloadText
@@ -537,9 +442,7 @@ export default class AttachmentViewer extends Component {
       i18nKeys,
       isActive,
       dataId,
-      customProps,
-      showCount,
-      renderCustomIcons
+      customProps
     } = this.props;
     const {
       avatarProps = {}
@@ -567,236 +470,228 @@ export default class AttachmentViewer extends Component {
     }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       responsiveId: responsiveId,
       query: this.responsiveFunc
-    }, _ref4 => {
+    }, ({
+      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;
       let {
-        uptoTablet
-      } = _ref4;
-      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), showCount && /*#__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
-      }, typeof renderCustomIcons === 'function' && 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
+        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}`
         },
-        title: isPViewListOpen ? i18nKeys.hideText : i18nKeys.showText
-      }));
-    }));
+        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
+    }))));
   }
 
 }