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

package/README.md

@@ -5,13 +5,16 @@ In this Library, we Provide Some Basic Components to Build Your Application
 # 1.9.13
 
 - **AttachmentViewer**
-  - Added support for updating existing attachment list items.
+  - Added support for `onSelectedAttachmentChange` and `renderCustomImagePreviewElement`.
   - Increased header bar height.
-  - Added support for `showCount`, `renderCustomIcons`, annotation URL re-rendering, and `downloadName`.
+  - Added support for `hasCount`, `renderCustomIcons`, annotation URL re-rendering, and `downloadName`.
 
 - **Link**
   - Added `downloadName` prop for custom file download names.
 
+- **AttachmentImage**
+  - Added `imageRef` prop to pass a ref to the `Image` component.
+
 # 1.9.12
 
 - DUMMY_ARRAY import path issue fixed in DotProvider DefaultProps

package/es/AttachmentViewer/AttachmentViewer.js

@@ -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";
@@ -47,35 +49,10 @@ 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);
+    this.getRenderImageFrameCustomClass = this.getRenderImageFrameCustomClass.bind(this);
+    this.renderImageFrame = this.renderImageFrame.bind(this);
+  }
 
   isImageFileType(fileName) {
     const extension = (getExtensionFromFileName(fileName) || '').toLowerCase();
@@ -101,10 +78,12 @@ 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.
@@ -129,6 +108,10 @@ export default class AttachmentViewer extends Component {
     }
 
     if (prevState.selectedIndex != selectedIndex || attachmentPreviewUrlChanged) {
+      onSelectedAttachmentChange && onSelectedAttachmentChange({
+        data: data[selectedIndex] || DUMMY_OBJECT,
+        selectedIndex
+      });
       this.handleMenuValidation();
     }
   }
@@ -141,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;
@@ -336,73 +319,71 @@ export default class AttachmentViewer extends Component {
     }, this.props.customProps.iframeProps));
   }
 
-  getRenderImageFrameCustomClass(_ref3) {
-    let {
-      canZoom,
-      retainZoom,
+  getRenderImageFrameCustomClass() {
+    const {
+      selectedIndex,
       isZoomed,
-      customImageClass,
-      customChildrenClass
-    } = _ref3;
+      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(data, i) {
+  renderImageFrame() {
     const {
       selectedIndex,
       isZoomed,
-      canZoom,
       isPreviewAttachmentValid
     } = this.state;
     const {
-      maintainZoom,
       renderCustomImagePreviewElement
     } = this.props;
+    const data = this.state.data[selectedIndex] || DUMMY_OBJECT;
     const {
       viewUrl,
       name,
       children,
       dataId = 'attachViewer',
-      customClass = {},
-      customProps = {},
+      customProps = DUMMY_OBJECT,
       imageRef
     } = data;
     const {
-      imageProps = {}
+      imageProps = DUMMY_OBJECT
     } = 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 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({
-      canZoom,
-      retainZoom,
-      isZoomed,
-      customImageClass,
-      customChildrenClass
-    });
-    const img = /*#__PURE__*/React.createElement(AttachmentImage, _extends({}, imageProps, {
+    const imageFrameCustomClass = this.getRenderImageFrameCustomClass();
+    const img = /*#__PURE__*/React.createElement(AttachmentImage, _extends({
       customClass: imageFrameCustomClass,
       src: viewUrl,
       onClick: handleImageClick,
       alt: name,
       dataId: dataId,
-      id: `img${i}`,
+      id: `img${selectedIndex}`,
       isCover: false,
       imageRef: resolvedImageRef
-    }), children);
+    }, imageProps), children);
     return typeof renderCustomImagePreviewElement === 'function' ? renderCustomImagePreviewElement({
       defaultView: img,
       data,
-      index: i
+      index: selectedIndex
     }) : img;
   }
 
@@ -411,13 +392,9 @@ export default class AttachmentViewer extends Component {
 
     const {
       dataList,
-      selectedIndex,
-      isZoomed,
-      canZoom,
-      isPreviewAttachmentValid
+      selectedIndex
     } = this.state;
     const {
-      maintainZoom,
       dataId,
       i18nKeys,
       renderUnSupportedElement
@@ -456,21 +433,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.",
@@ -502,7 +472,7 @@ 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 ? _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
@@ -538,7 +508,7 @@ export default class AttachmentViewer extends Component {
       isActive,
       dataId,
       customProps,
-      showCount,
+      hasCount,
       renderCustomIcons
     } = this.props;
     const {
@@ -567,10 +537,10 @@ export default class AttachmentViewer extends Component {
     }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       responsiveId: responsiveId,
       query: this.responsiveFunc
-    }, _ref4 => {
+    }, _ref3 => {
       let {
         uptoTablet
-      } = _ref4;
+      } = _ref3;
       return /*#__PURE__*/React.createElement(Container, {
         scroll: "none",
         "data-scroll-palette": "dark"
@@ -585,7 +555,7 @@ export default class AttachmentViewer extends Component {
         "data-title": selectedAttachment.name,
         dataId: "attachName",
         id: ariaId
-      }, selectedAttachment.name), showCount && /*#__PURE__*/React.createElement(Box, {
+      }, selectedAttachment.name), hasCount && /*#__PURE__*/React.createElement(Box, {
         flexible: true,
         className: style.count,
         dataId: "attachCountContainer"
@@ -597,7 +567,7 @@ export default class AttachmentViewer extends Component {
         align: uptoTablet ? 'bottom' : 'center',
         wrap: "wrap",
         isCover: false
-      }, typeof renderCustomIcons === 'function' && renderCustomIcons({
+      }, renderNode(renderCustomIcons, {
         selectedAttachment,
         selectedIndex,
         totalLen

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();
+  });
 });