@zohodesk/dot 1.0.0-temp-232.1 → 1.0.0-temp-233.2

package/es/AttachmentViewer/AttachmentViewer.js

@@ -14,9 +14,12 @@ 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";
+import { cn } from "@dot-system/css-utility";
 import style from "./AttachmentViewer.module.css";
 export default class AttachmentViewer extends Component {
   constructor(props) {
@@ -46,8 +49,11 @@ export default class AttachmentViewer extends Component {
     this.getUpdateDataList = this.getUpdateDataList.bind(this);
     this.zoomMaintain = this.zoomMaintain.bind(this);
     this.handleMenuValidation = this.handleMenuValidation.bind(this);
+    this.notifySelectedAttachmentChange = this.notifySelectedAttachmentChange.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) {
@@ -68,8 +74,23 @@ export default class AttachmentViewer extends Component {
     return FILE_EXTENSIONS.audio.map(ext => ext.toLowerCase()).includes(extension);
   }
 
+  notifySelectedAttachmentChange() {
+    const {
+      onSelectedAttachmentChange
+    } = this.props;
+    const {
+      selectedIndex,
+      data
+    } = this.state;
+    onSelectedAttachmentChange && onSelectedAttachmentChange({
+      data: data[selectedIndex] || DUMMY_OBJECT,
+      index: selectedIndex
+    });
+  }
+
   componentDidMount() {
     this.handleMenuValidation();
+    this.notifySelectedAttachmentChange();
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -77,13 +98,15 @@ export default class AttachmentViewer extends Component {
       previewObj
     } = 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 +123,8 @@ export default class AttachmentViewer extends Component {
       }
     }
 
-    if (prevState.selectedIndex != selectedIndex) {
+    if (prevState.selectedIndex != selectedIndex || attachmentPreviewUrlChanged) {
+      this.notifySelectedAttachmentChange();
       this.handleMenuValidation();
     }
   }
@@ -113,7 +137,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;
@@ -301,20 +325,84 @@ export default class AttachmentViewer extends Component {
   renderIframe(previewurl) {
     return /*#__PURE__*/React.createElement("iframe", _extends({
       src: previewurl,
-      className: style.previewFrame
+      className: cn(style.previewFrame)
     }, 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) {
+    const {
+      dataList,
+      selectedIndex
+    } = this.state;
+    const {
       dataId,
       i18nKeys,
       renderUnSupportedElement
@@ -351,21 +439,14 @@ export default class AttachmentViewer extends Component {
         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.",
@@ -383,7 +464,7 @@ export default class AttachmentViewer extends Component {
         id: `imgPreviewRef${i}`
       }, selectedIndex == i && /*#__PURE__*/React.createElement(React.Fragment, null, this.isAudioFileType(name) ? /*#__PURE__*/React.createElement("audio", _extends({
         controls: true,
-        className: style.zoomIn,
+        className: cn(style.zoomIn),
         "data-id": `${dataId}_audioPreview`,
         "data-test-id": `${dataId}_audioPreview`
       }, audioProps), /*#__PURE__*/React.createElement("source", {
@@ -391,35 +472,25 @@ export default class AttachmentViewer extends Component {
         type: `audio/${extension}`
       })) : this.isVideoFileType(name) ? /*#__PURE__*/React.createElement("video", _extends({
         controls: true,
-        className: style.zoomIn,
+        className: cn(style.zoomIn),
         "data-id": `${dataId}_videoPreview`,
         "data-test-id": `${dataId}_videoPreview`
       }, 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", {
-        className: style.previewNone
+      })) : this.isImageFileType(name) || children ? this.renderImageFrame() : type === "document" && previewurl != null ? this.renderIframe(previewurl) : typeof renderUnSupportedElement === 'function' ? renderUnSupportedElement(data) : /*#__PURE__*/React.createElement("div", {
+        className: cn(style.previewNone)
       }, /*#__PURE__*/React.createElement("div", {
-        className: style.fileTypeImg
+        className: cn(style.fileTypeImg)
       }, 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 +513,9 @@ export default class AttachmentViewer extends Component {
       i18nKeys,
       isActive,
       dataId,
-      customProps
+      customProps,
+      hasCount,
+      renderCustomIcons
     } = this.props;
     const {
       avatarProps = {}
@@ -486,7 +559,7 @@ export default class AttachmentViewer extends Component {
       "data-title": selectedAttachment.name,
       dataId: "attachName",
       id: ariaId
-    }, selectedAttachment.name), /*#__PURE__*/React.createElement(Box, {
+    }, selectedAttachment.name), hasCount && /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.count,
       dataId: "attachCountContainer"
@@ -498,8 +571,12 @@ export default class AttachmentViewer extends Component {
       align: uptoTablet ? 'bottom' : 'center',
       wrap: "wrap",
       isCover: false
-    }, canZoom ? isZoomed ? /*#__PURE__*/React.createElement("div", {
-      className: uptoTablet ? style.mobileMenu : style.menu,
+    }, renderNode(renderCustomIcons, {
+      selectedAttachment,
+      selectedIndex,
+      totalLen
+    }), canZoom ? isZoomed ? /*#__PURE__*/React.createElement("div", {
+      className: cn(uptoTablet ? style.mobileMenu : style.menu),
       onClick: this.zoomOut.bind(this, selectedIndex),
       "data-id": "zoomOut",
       "data-test-id": "zoomOut",
@@ -513,7 +590,7 @@ export default class AttachmentViewer extends Component {
         ariaLabel: i18nKeys.zoomOutText
       }
     })) : /*#__PURE__*/React.createElement("div", {
-      className: uptoTablet ? style.mobileMenu : style.menu,
+      className: cn(uptoTablet ? style.mobileMenu : style.menu),
       onClick: e => this.zoomIn(e, selectedIndex),
       "data-id": "zoomIn",
       "data-test-id": "zoomIn",
@@ -527,7 +604,7 @@ export default class AttachmentViewer extends Component {
         ariaLabel: i18nKeys.zoomInText
       }
     })) : null, canOpenInNewTab ? /*#__PURE__*/React.createElement("div", {
-      className: uptoTablet ? style.mobileMenu : style.menu
+      className: cn(uptoTablet ? style.mobileMenu : style.menu)
     }, /*#__PURE__*/React.createElement(Link, {
       href: selectedImgUrl,
       target: "_blank",
@@ -543,9 +620,10 @@ export default class AttachmentViewer extends Component {
         ariaLabel: i18nKeys.newTabText
       }
     }))) : null, needDownload ? /*#__PURE__*/React.createElement("div", {
-      className: uptoTablet ? style.mobileMenu : style.menu
+      className: cn(uptoTablet ? style.mobileMenu : style.menu)
     }, /*#__PURE__*/React.createElement(Link, {
       href: downloadUrl,
+      downloadName: selectedAttachment.name,
       target: "_parent",
       hasReload: true,
       download: true,
@@ -561,7 +639,7 @@ export default class AttachmentViewer extends Component {
         ariaLabel: i18nKeys.downloadText
       }
     }))) : null, /*#__PURE__*/React.createElement("div", {
-      className: uptoTablet ? style.mobileMenu : style.menu,
+      className: cn(uptoTablet ? style.mobileMenu : style.menu),
       onClick: this.closeAttachmentViewer,
       "data-id": "closeAttach",
       "data-test-id": "closeAttach",
@@ -587,7 +665,7 @@ export default class AttachmentViewer extends Component {
       "data-title": i18nKeys.previousText,
       "data-title-position": "left"
     }, /*#__PURE__*/React.createElement("button", {
-      className: style.btn,
+      className: cn(style.btn),
       "aria-label": i18nKeys.previousText
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-arrowLeft3",
@@ -608,7 +686,7 @@ export default class AttachmentViewer extends Component {
       "data-title": i18nKeys.nextText,
       "data-title-position": "right"
     }, /*#__PURE__*/React.createElement("button", {
-      className: style.btn,
+      className: cn(style.btn),
       "aria-label": i18nKeys.nextText
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-arrowRight3",

package/es/AttachmentViewer/AttachmentViewer.module.css

@@ -1,8 +1,8 @@
 .header {
-    height: var(--zd_size40) ;
+    height: var(--zd_size48) ;
     position: relative;
     z-index: 1;
-    padding-block:0 ;
+    padding-block: 0 ;
     padding-inline: var(--zd_size15) ;
     composes: alignVertical from '~@zohodesk/components/es/common/common.module.css';
     background-color: var(--zdt_attachmentviewer_header_bg);
@@ -10,20 +10,13 @@
 }
 
 .title {
+    padding-inline-end: var(--zd_size15) ;
     max-width: 50% ;
     composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
 
-[dir=ltr] .title {
-    padding-right: var(--zd_size15) ;
-}
-
-[dir=rtl] .title {
-    padding-left: var(--zd_size15) ;
-}
-
 .count {
-    padding-block:0 ;
+    padding-block: 0 ;
     padding-inline: var(--zd_size10) ;
     position: absolute;
     composes: xMiddle from '~@zohodesk/components/es/common/common.module.css';
@@ -80,7 +73,7 @@
 
 .preview {
     margin-block: var(--zd_size20) ;
-    margin-inline:0 ;
+    margin-inline: 0 ;
     composes: posrel from '~@zohodesk/components/es/common/common.module.css';
     text-align: center;
 }
@@ -136,7 +129,7 @@
 }
 
 .listContainer {
-    padding-block:0 ;
+    padding-block: 0 ;
     padding-inline: var(--zd_size18) ;
 }
 
@@ -324,7 +317,7 @@
 }
 
 .authorName {
-    margin-block:0 ;
+    margin-block: 0 ;
     margin-inline: var(--zd_size10) ;
     font-size: var(--zd_font_size15) ;
     color: var(--zdt_attachmentviewer_title_text);
@@ -364,4 +357,4 @@
     color: var(--zdt_attachmentviewer_title_text);
     padding: var(--zd_size2) ;
     margin: auto ;
-}
+}

package/es/AttachmentViewer/__tests__/AttachmentViewer.spec.js

@@ -8,62 +8,63 @@ beforeEach(() => {
 afterEach(() => {
   cleanup();
 });
+const mockData = [{
+  id: '1',
+  name: 'slack0.jpg',
+  size: '100412',
+  href: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG',
+  viewUrl: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG',
+  downloadUrl: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG'
+}, {
+  id: '2',
+  name: 'slack1.jpg',
+  size: '100412',
+  href: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
+  viewUrl: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
+  downloadUrl: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg'
+}, {
+  id: '3',
+  name: 'slack2.jpg',
+  size: '100412',
+  href: 'https://wallpapercave.com/wp/wp3913900.jpg',
+  viewUrl: 'https://wallpapercave.com/wp/wp3913900.jpg',
+  downloadUrl: 'https://wallpapercave.com/wp/wp3913900.jpg'
+}, {
+  id: '4',
+  name: 'slack3.jpg',
+  size: '100412',
+  href: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
+  viewUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
+  downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg'
+}, {
+  id: '5',
+  name: 'slack4.jpg',
+  size: '100412',
+  href: 'https://wallpapercave.com/wp/wp3913900.jpg',
+  viewUrl: 'https://wallpapercave.com/wp/wp3913900.jpg',
+  downloadUrl: 'https://wallpapercave.com/wp/wp3913900.jpg'
+}, {
+  id: '6',
+  name: 'slack5.jpg',
+  size: '100412',
+  href: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
+  viewUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
+  downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg'
+}, {
+  id: '6',
+  name: 'slack5.mp3',
+  size: '100412',
+  href: 'https://www.w3schools.com/html/horse.mp3',
+  viewUrl: 'https://www.w3schools.com/html/horse.mp3',
+  downloadUrl: 'https://www.w3schools.com/html/horse.mp3'
+}];
 describe('AttachmentViewer', () => {
   test('rendering the defult props', () => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(AttachmentViewer, {
       previewObj: {
-        previewData: [{
-          id: '1',
-          name: 'slack0.jpg',
-          size: '100412',
-          href: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG',
-          viewUrl: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG',
-          downloadUrl: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG'
-        }, {
-          id: '2',
-          name: 'slack1.jpg',
-          size: '100412',
-          href: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
-          viewUrl: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
-          downloadUrl: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg'
-        }, {
-          id: '3',
-          name: 'slack2.jpg',
-          size: '100412',
-          href: 'https://wallpapercave.com/wp/wp3913900.jpg',
-          viewUrl: 'https://wallpapercave.com/wp/wp3913900.jpg',
-          downloadUrl: 'https://wallpapercave.com/wp/wp3913900.jpg'
-        }, {
-          id: '4',
-          name: 'slack3.jpg',
-          size: '100412',
-          href: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
-          viewUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
-          downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg'
-        }, {
-          id: '5',
-          name: 'slack4.jpg',
-          size: '100412',
-          href: 'https://wallpapercave.com/wp/wp3913900.jpg',
-          viewUrl: 'https://wallpapercave.com/wp/wp3913900.jpg',
-          downloadUrl: 'https://wallpapercave.com/wp/wp3913900.jpg'
-        }, {
-          id: '6',
-          name: 'slack5.jpg',
-          size: '100412',
-          href: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
-          viewUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
-          downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg'
-        }, {
-          id: '6',
-          name: 'slack5.mp3',
-          size: '100412',
-          href: 'https://www.w3schools.com/html/horse.mp3',
-          viewUrl: 'https://www.w3schools.com/html/horse.mp3',
-          downloadUrl: 'https://www.w3schools.com/html/horse.mp3'
-        }],
+        previewData: mockData,
         selectedIndex: 0
       }
     }));
@@ -75,59 +76,62 @@ describe('AttachmentViewer', () => {
     } = render( /*#__PURE__*/React.createElement(AttachmentViewer, {
       isActive: true,
       previewObj: {
-        previewData: [{
-          id: '1',
-          name: 'slack0.jpg',
-          size: '100412',
-          href: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG',
-          viewUrl: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG',
-          downloadUrl: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG'
-        }, {
-          id: '2',
-          name: 'slack1.jpg',
-          size: '100412',
-          href: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
-          viewUrl: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
-          downloadUrl: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg'
-        }, {
-          id: '3',
-          name: 'slack2.jpg',
-          size: '100412',
-          href: 'https://wallpapercave.com/wp/wp3913900.jpg',
-          viewUrl: 'https://wallpapercave.com/wp/wp3913900.jpg',
-          downloadUrl: 'https://wallpapercave.com/wp/wp3913900.jpg'
-        }, {
-          id: '4',
-          name: 'slack3.jpg',
-          size: '100412',
-          href: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
-          viewUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
-          downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg'
-        }, {
-          id: '5',
-          name: 'slack4.jpg',
-          size: '100412',
-          href: 'https://wallpapercave.com/wp/wp3913900.jpg',
-          viewUrl: 'https://wallpapercave.com/wp/wp3913900.jpg',
-          downloadUrl: 'https://wallpapercave.com/wp/wp3913900.jpg'
-        }, {
-          id: '6',
-          name: 'slack5.jpg',
-          size: '100412',
-          href: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
-          viewUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
-          downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg'
-        }, {
-          id: '6',
-          name: 'slack5.mp3',
-          size: '100412',
-          href: 'https://www.w3schools.com/html/horse.mp3',
-          viewUrl: 'https://www.w3schools.com/html/horse.mp3',
-          downloadUrl: 'https://www.w3schools.com/html/horse.mp3'
-        }],
+        previewData: mockData,
         selectedIndex: 0
       }
     }));
     expect(asFragment()).toMatchSnapshot();
   });
+  test('rendering with renderCustomIcons', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AttachmentViewer, {
+      isActive: true,
+      previewObj: {
+        previewData: mockData,
+        selectedIndex: 0
+      },
+      renderCustomIcons: props => {
+        const {
+          selectedAttachment,
+          selectedIndex,
+          totalLen
+        } = props;
+        return /*#__PURE__*/React.createElement("div", {
+          "data-id": "customIcons"
+        }, /*#__PURE__*/React.createElement("span", {
+          "data-id": "customIcons_name"
+        }, selectedAttachment.name), /*#__PURE__*/React.createElement("span", {
+          "data-id": "customIcons_index"
+        }, selectedIndex + 1, "/", totalLen));
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering with renderCustomImagePreviewElement', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AttachmentViewer, {
+      isActive: true,
+      previewObj: {
+        previewData: mockData,
+        selectedIndex: 0
+      },
+      renderCustomImagePreviewElement: props => {
+        const {
+          defaultView,
+          data,
+          index: selectedIndex
+        } = props;
+        return /*#__PURE__*/React.createElement("div", {
+          "data-id": "customImagePreview"
+        }, /*#__PURE__*/React.createElement("span", {
+          "data-id": "customImagePreview_name"
+        }, data.name), /*#__PURE__*/React.createElement("span", {
+          "data-id": "customImagePreview_index"
+        }, selectedIndex + 1, "/", data.length));
+      }
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });