@zohodesk/dot 1.6.0 → 1.6.2

package/lib/AttachmentViewer/AttachmentViewer.js

@@ -37,12 +37,18 @@ var _General = require("../utils/General");
 
 var _AttachmentViewerModule = _interopRequireDefault(require("./AttachmentViewer.module.css"));
 
+var _utils = require("./utils");
+
+var _audio_thumbnail = _interopRequireDefault(require("../../images/audio_thumbnail.png"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -95,7 +101,10 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         index: _this.props.previewObj.selectedIndex,
         data: _this.props.previewObj ? _this.props.previewObj.previewData : [],
         dataList: []
-      })
+      }),
+      canOpenInNewTab: false,
+      canZoom: false,
+      isPreviewAttachmentValid: false
     };
     _this.togglePViewList = _this.togglePViewList.bind(_assertThisInitialized(_this));
     _this.changeSelectedIndex = _this.changeSelectedIndex.bind(_assertThisInitialized(_this));
@@ -107,13 +116,20 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
     _this.getNextId = (0, _IdProvider.getUniqueId)(_assertThisInitialized(_this));
     _this.getUpdateDataList = _this.getUpdateDataList.bind(_assertThisInitialized(_this));
     _this.zoomMaintain = _this.zoomMaintain.bind(_assertThisInitialized(_this));
+    _this.handleMenuValidation = _this.handleMenuValidation.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(AttachmentViewer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.handleMenuValidation();
+    }
+  }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
+    value: function componentDidUpdate(prevProps, prevState) {
       var previewObj = this.props.previewObj;
+      var selectedIndex = this.state.selectedIndex;
       var indexChanged = previewObj.selectedIndex != prevProps.previewObj.selectedIndex;
 
       if (previewObj.previewData.length != prevProps.previewObj.previewData.length || indexChanged) {
@@ -134,18 +150,48 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           });
         }
       }
+
+      if (prevState.selectedIndex != selectedIndex) {
+        this.handleMenuValidation();
+      }
+    }
+  }, {
+    key: "handleMenuValidation",
+    value: function handleMenuValidation() {
+      var _this2 = this;
+
+      var _this$state = this.state,
+          data = _this$state.data,
+          selectedIndex = _this$state.selectedIndex;
+      var selectedAttachment = data[selectedIndex] || {};
+      var selectedAttachmentViewUrl = selectedAttachment.viewUrl;
+      var selectedAttachmentDownloadUrl = selectedAttachment.downloadUrl;
+      var selectedAttachmentName = selectedAttachment.name;
+      (0, _utils.checkFileSourcesValidation)({
+        fileName: selectedAttachmentName,
+        viewURL: selectedAttachmentViewUrl
+      }).then(function (fileSourceValidation) {
+        var isViewURLValid = fileSourceValidation.isViewURLValid,
+            canZoom = fileSourceValidation.canZoom;
+
+        _this2.setState({
+          isPreviewAttachmentValid: isViewURLValid,
+          canZoom: canZoom,
+          canOpenInNewTab: isViewURLValid
+        });
+      });
     }
   }, {
     key: "togglePViewList",
     value: function togglePViewList() {
-      var _this2 = this;
+      var _this3 = this;
 
       this.setState(function (prevState) {
         return {
           isPViewListOpen: !prevState.isPViewListOpen
         };
       }, function () {
-        _this2.focusSelectedImg(_this2.state.selectedIndex);
+        _this3.focusSelectedImg(_this3.state.selectedIndex);
       });
     }
   }, {
@@ -153,13 +199,11 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
     value: function zoomOut(ele) {
       this.setState({
         isZoomed: false
-      });
-      var img = document.getElementById("img".concat(ele));
-
-      if (img) {
-        img.classList.remove(_AttachmentViewerModule["default"].zoomedImg);
-        img.classList.add(_AttachmentViewerModule["default"].normalImg);
-      }
+      }); // const img = document.getElementById(`img${ele}`);
+      // if (img) {
+      //   img.classList.remove(style.zoomedImg);
+      //   img.classList.add(style.normalImg);
+      // }
     }
   }, {
     key: "zoomIn",
@@ -191,12 +235,11 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           top: 0,
           left: 0
         };
-      }
+      } // if (img) {
+      //   img.classList.remove(style.normalImg);
+      //   img.classList.add(style.zoomedImg);
+      // }
 
-      if (img) {
-        img.classList.remove(_AttachmentViewerModule["default"].normalImg);
-        img.classList.add(_AttachmentViewerModule["default"].zoomedImg);
-      }
 
       if (moveToPosition) {
         imgContainer.scrollLeft = (event.pageX - imgContainerPosition.left - imgUnits.left) * imgRatio.width;
@@ -242,11 +285,11 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
   }, {
     key: "changeSelectedIndex",
     value: function changeSelectedIndex(index) {
-      var _this3 = this;
+      var _this4 = this;
 
-      var _this$state = this.state,
-          data = _this$state.data,
-          selectedIndex = _this$state.selectedIndex;
+      var _this$state2 = this.state,
+          data = _this$state2.data,
+          selectedIndex = _this$state2.selectedIndex;
       var maintainZoom = this.props.maintainZoom;
       maintainZoom ? this.zoomMaintain(index) : this.zoomOut(selectedIndex);
 
@@ -257,7 +300,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
       this.setState({
         selectedIndex: index
       }, function () {
-        _this3.focusSelectedImg(index);
+        _this4.focusSelectedImg(index);
       });
     }
   }, {
@@ -292,12 +335,14 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
   }, {
     key: "imgPreviewView",
     value: function imgPreviewView() {
-      var _this4 = this;
+      var _this5 = this;
 
-      var _this$state2 = this.state,
-          dataList = _this$state2.dataList,
-          selectedIndex = _this$state2.selectedIndex,
-          isZoomed = _this$state2.isZoomed;
+      var _this$state3 = this.state,
+          dataList = _this$state3.dataList,
+          selectedIndex = _this$state3.selectedIndex,
+          isZoomed = _this$state3.isZoomed,
+          canZoom = _this$state3.canZoom,
+          isPreviewAttachmentValid = _this$state3.isPreviewAttachmentValid;
       var _this$props = this.props,
           maintainZoom = _this$props.maintainZoom,
           dataId = _this$props.dataId;
@@ -330,7 +375,24 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
       return dataList.length && dataList.map(function () {
         var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         var i = arguments.length > 1 ? arguments[1] : undefined;
-        var selectedImgUrl = data.viewUrl;
+        var viewUrl = data.viewUrl,
+            name = data.name,
+            children = data.children,
+            _data$dataId = data.dataId,
+            dataId = _data$dataId === void 0 ? 'attachViewer' : _data$dataId,
+            _data$customClass = data.customClass,
+            customClass = _data$customClass === void 0 ? {} : _data$customClass,
+            _data$customProps = data.customProps,
+            customProps = _data$customProps === void 0 ? {} : _data$customProps;
+        var _customProps$audioPro = customProps.audioProps,
+            audioProps = _customProps$audioPro === void 0 ? {} : _customProps$audioPro,
+            _customProps$imagePro = customProps.imageProps,
+            imageProps = _customProps$imagePro === void 0 ? {} : _customProps$imagePro;
+        var _customClass$customIm = customClass.customImageClass,
+            customImageClass = _customClass$customIm === void 0 ? '' : _customClass$customIm,
+            _customClass$customCh = customClass.customChildrenClass,
+            customChildrenClass = _customClass$customCh === void 0 ? '' : _customClass$customCh;
+        var retainZoom = canZoom && selectedIndex == i && maintainZoom;
         return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           className: _AttachmentViewerModule["default"].imgBox,
           id: "imgBox".concat(i),
@@ -341,39 +403,43 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: _AttachmentViewerModule["default"].imgRef,
           id: "imgPreviewRef".concat(i)
-        }, (0, _Attachment.isAudioFile)(data.name) ? selectedIndex == i ? /*#__PURE__*/_react["default"].createElement("video", {
+        }, (0, _Attachment.isAudioFile)(name) ? selectedIndex == i ? /*#__PURE__*/_react["default"].createElement("video", _extends({
           autoPlay: true,
           controls: true,
           className: _AttachmentViewerModule["default"].zoomIn,
           "data-id": "".concat(dataId, "_videoPreview"),
           "data-test-id": "".concat(dataId, "_videoPreview")
-        }, /*#__PURE__*/_react["default"].createElement("source", {
-          src: data.viewUrl,
-          type: "audio/".concat((0, _Attachment.getExtensionFromFileName)(data.name))
-        })) : null : /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], {
-          className: "".concat(_AttachmentViewerModule["default"].img, " ").concat(selectedIndex == i && maintainZoom ? isZoomed ? _AttachmentViewerModule["default"].zoomedImg : _AttachmentViewerModule["default"].normalImg : ''),
-          src: selectedImgUrl,
-          onClick: isZoomed ? _this4.zoomOut.bind(_this4, i) : function (e) {
-            _this4.zoomIn(e, i, true);
+        }, audioProps), /*#__PURE__*/_react["default"].createElement("source", {
+          src: viewUrl,
+          type: "audio/".concat((0, _Attachment.getExtensionFromFileName)(name))
+        })) : null : /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({
+          customClass: {
+            customImageClass: "".concat(_AttachmentViewerModule["default"].img, " ").concat(_AttachmentViewerModule["default"].altText, "\n                    ").concat(canZoom || retainZoom ? isZoomed ? "".concat(_AttachmentViewerModule["default"].zoomedImg, " ").concat(_AttachmentViewerModule["default"].zoomOutCursor) : "".concat(_AttachmentViewerModule["default"].normalImg, " ").concat(_AttachmentViewerModule["default"].zoomInCursor) : '', " ").concat(customImageClass),
+            customChildrenClass: customChildrenClass
           },
-          alt: "Preview",
-          dataId: "attachViewer",
+          src: viewUrl,
+          onClick: isPreviewAttachmentValid ? isZoomed ? _this5.zoomOut.bind(_this5, i) : function (e) {
+            _this5.zoomIn(e, i, true);
+          } : undefined,
+          alt: name,
+          dataId: dataId,
           id: "img".concat(i),
-          isImage: true,
           isCover: false
-        })));
+        }, imageProps), children)));
       });
     }
   }, {
     key: "render",
     value: function render() {
-      var _this5 = this;
-
-      var _this$state3 = this.state,
-          isPViewListOpen = _this$state3.isPViewListOpen,
-          selectedIndex = _this$state3.selectedIndex,
-          data = _this$state3.data,
-          isZoomed = _this$state3.isZoomed;
+      var _this6 = this;
+
+      var _this$state4 = this.state,
+          isPViewListOpen = _this$state4.isPViewListOpen,
+          selectedIndex = _this$state4.selectedIndex,
+          data = _this$state4.data,
+          isZoomed = _this$state4.isZoomed,
+          canZoom = _this$state4.canZoom,
+          canOpenInNewTab = _this$state4.canOpenInNewTab;
       var _this$props2 = this.props,
           responsiveId = _this$props2.responsiveId,
           needDownload = _this$props2.needDownload,
@@ -431,9 +497,9 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           align: uptoTablet ? 'bottom' : 'center',
           wrap: "wrap",
           isCover: false
-        }, isZoomed ? /*#__PURE__*/_react["default"].createElement("div", {
+        }, canZoom ? isZoomed ? /*#__PURE__*/_react["default"].createElement("div", {
           className: uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu,
-          onClick: _this5.zoomOut.bind(_this5, selectedIndex),
+          onClick: _this6.zoomOut.bind(_this6, selectedIndex),
           "data-id": "zoomOut",
           "data-test-id": "zoomOut",
           "data-title": i18nKeys.zoomOutText
@@ -448,7 +514,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         })) : /*#__PURE__*/_react["default"].createElement("div", {
           className: uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu,
           onClick: function onClick(e) {
-            return _this5.zoomIn(e, selectedIndex);
+            return _this6.zoomIn(e, selectedIndex);
           },
           "data-id": "zoomIn",
           "data-test-id": "zoomIn",
@@ -461,7 +527,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           a11y: {
             ariaLabel: i18nKeys.zoomInText
           }
-        })), /*#__PURE__*/_react["default"].createElement("div", {
+        })) : null, canOpenInNewTab ? /*#__PURE__*/_react["default"].createElement("div", {
           className: uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu
         }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
           href: selectedImgUrl,
@@ -477,7 +543,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           a11y: {
             ariaLabel: i18nKeys.newTabText
           }
-        }))), needDownload ? /*#__PURE__*/_react["default"].createElement("div", {
+        }))) : null, needDownload ? /*#__PURE__*/_react["default"].createElement("div", {
           className: uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu
         }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
           href: downloadUrl,
@@ -497,7 +563,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           }
         }))) : null, /*#__PURE__*/_react["default"].createElement("div", {
           className: uptoTablet ? _AttachmentViewerModule["default"].mobileMenu : _AttachmentViewerModule["default"].menu,
-          onClick: _this5.closeAttachmentViewer,
+          onClick: _this6.closeAttachmentViewer,
           "data-id": "closeAttach",
           "data-test-id": "closeAttach",
           "data-title": i18nKeys.closeText
@@ -518,7 +584,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           alignBox: "row"
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: "".concat(_AttachmentViewerModule["default"].arrowBox, "  ").concat(uptoTablet ? _AttachmentViewerModule["default"].mbleArrowBox : _AttachmentViewerModule["default"].nrmlArrowBox, " ").concat(selectedIndex === 0 ? _AttachmentViewerModule["default"].hidden : ''),
-          onClick: _this5.changeSelectedIndex.bind(_this5, selectedIndex - 1),
+          onClick: _this6.changeSelectedIndex.bind(_this6, selectedIndex - 1),
           "data-title": i18nKeys.previousText,
           "data-title-position": "left"
         }, /*#__PURE__*/_react["default"].createElement("button", {
@@ -534,12 +600,12 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           tabindex: "0",
           "aria-describedby": ariaId,
           isShrink: false,
-          eleRef: _this5.setImgBoxRef,
+          eleRef: _this6.setImgBoxRef,
           scroll: "both",
           flexible: true
-        }, _this5.imgPreviewView()), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        }, _this6.imgPreviewView()), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           className: "".concat(_AttachmentViewerModule["default"].arrowBox, "  ").concat(uptoTablet ? _AttachmentViewerModule["default"].mbleArrowBox : _AttachmentViewerModule["default"].nrmlArrowBox, " ").concat(totalLen === selectedIndex + 1 ? _AttachmentViewerModule["default"].hidden : ''),
-          onClick: _this5.changeSelectedIndex.bind(_this5, selectedIndex + 1),
+          onClick: _this6.changeSelectedIndex.bind(_this6, selectedIndex + 1),
           "data-title": i18nKeys.nextText,
           "data-title-position": "right"
         }, /*#__PURE__*/_react["default"].createElement("button", {
@@ -579,33 +645,48 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           alignBox: "row",
           scroll: "horizontal",
           eleRef: function eleRef(el) {
-            return _this5.imgListCont = el;
+            return _this6.imgListCont = el;
           },
           className: _AttachmentViewerModule["default"].listContainer
         }, data.map(function (item, index) {
           var name = item.name,
-              viewUrl = item.viewUrl;
-          var isAudio = (0, _Attachment.isAudioFile)(name);
+              viewUrl = item.viewUrl,
+              children = item.children,
+              _item$customClass = item.customClass,
+              customClass = _item$customClass === void 0 ? {} : _item$customClass,
+              _item$dataId = item.dataId,
+              dataId = _item$dataId === void 0 ? 'AttachmentImage' : _item$dataId,
+              _item$customProps = item.customProps,
+              customProps = _item$customProps === void 0 ? {} : _item$customProps;
+          var thumbnail = item.thumbnail;
+          var _customClass$customIm2 = customClass.customImageClass,
+              customImageClass = _customClass$customIm2 === void 0 ? '' : _customClass$customIm2,
+              _customClass$customCh2 = customClass.customChildrenClass,
+              customChildrenClass = _customClass$customCh2 === void 0 ? '' : _customClass$customCh2;
+          thumbnail = (0, _Attachment.isAudioFile)(name) ? thumbnail || _audio_thumbnail["default"] : thumbnail; //fallback thumbnail for audio
+
           return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-            className: "".concat(_AttachmentViewerModule["default"].imgItem, " ").concat(index === selectedIndex ? _AttachmentViewerModule["default"].selected : '', "  ").concat(isAudio ? _AttachmentViewerModule["default"].isAudio : ''),
+            className: "".concat(_AttachmentViewerModule["default"].imgItem, " ").concat(index === selectedIndex ? _AttachmentViewerModule["default"].selected : ''),
             key: index,
-            onClick: _this5.changeSelectedIndex.bind(_this5, index),
+            onClick: _this6.changeSelectedIndex.bind(_this6, index),
             eleRef: function eleRef(el) {
-              return _this5["img_".concat(index)] = el;
+              return _this6["img_".concat(index)] = el;
             },
             dataId: "attachPreviewList",
             "data-title": name
-          }, /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], {
-            src: viewUrl,
+          }, /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({
+            src: thumbnail || viewUrl,
             size: "small",
             alt: name,
-            className: _AttachmentViewerModule["default"].image,
-            isImage: !isAudio,
-            dataId: "AttachmentImage"
-          }));
+            customClass: {
+              customImageClass: "".concat(_AttachmentViewerModule["default"].image, " ").concat(_AttachmentViewerModule["default"].altText, " ").concat(customImageClass),
+              customChildrenClass: "".concat(_AttachmentViewerModule["default"].crsrPointer, " ").concat(customChildrenClass)
+            },
+            dataId: dataId
+          }, customProps), children));
         }))))), totalLen !== 1 && /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           dataId: "attachToggle",
-          onClick: _this5.togglePViewList,
+          onClick: _this6.togglePViewList,
           iconName: "ZD-GN-hideTab",
           iconSize: "14",
           hoverType: "border",

package/lib/AttachmentViewer/AttachmentViewer.module.css

@@ -161,6 +161,7 @@
     border-color: var(--dot_mirror);
     border-radius: 3px;
     padding: var(--zd_size2) ;
+    cursor: pointer;
 }
 
 .imgItem:hover {
@@ -175,10 +176,15 @@
     margin-right: var(--zd_size12) ;
 }
 
-.image {
+.image, .crsrPointer {
     cursor: pointer;
 }
 
+.altText {
+    color: var(--zdt_attachmentviewer_title_text);
+    font-size: var(--zd_font_size13) ;
+}
+
 .selected, .selected:hover {
     border-color: var(--zdt_attachmentviewer_selected_border);
 }
@@ -273,19 +279,24 @@
 .img {
     transition: var(--zd_transition3) ease-in-out;
     margin: auto ;
+}
+
+.zoomInCursor {
     cursor: zoom-in;
 }
 
+.zoomOutCursor {
+    cursor: zoom-out;
+}
+
 .imgRef .normalImg {
     max-width: inherit ;
     max-height: inherit ;
-    cursor: zoom-in;
 }
 
 .imgRef .zoomedImg {
     max-width: initial ;
     max-height: initial ;
-    cursor: zoom-out;
 }
 
 .previewBox {
@@ -298,6 +309,7 @@
     composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
     height: var(--zd_size18) ;
     width: var(--zd_size18) ;
+    cursor: progress
 }
 
 .loader {

package/lib/AttachmentViewer/__tests__/AttachmentImage.spec.js

@@ -6,11 +6,17 @@ var _react2 = require("@testing-library/react");
 
 var _AttachmentImage = _interopRequireDefault(require("../AttachmentImage"));
 
+var _Avatar = _interopRequireDefault(require("@zohodesk/components/es/Avatar/Avatar"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('AttachmentImage', function () {
   test('rendering the defult props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], {
+      customClass: {
+        customImageClass: 'customImageClass',
+        customChildrenClass: 'customChildrenClass'
+      },
       previewObj: {
         previewData: [{
           id: '1',
@@ -18,49 +24,94 @@ describe('AttachmentImage', function () {
           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'
+          downloadUrl: 'https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG',
+          children: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+            name: "User Image"
+          })
         }, {
           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'
+          downloadUrl: 'https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg',
+          children: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+            name: "User Image"
+          })
         }, {
           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'
+          downloadUrl: 'https://wallpapercave.com/wp/wp3913900.jpg',
+          children: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+            name: "User Image"
+          })
         }, {
           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'
+          href: '',
+          viewUrl: '',
+          downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
+          thumbnail: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg' // children: <Avatar name='User Image' />
+
         }, {
           id: '5',
+          name: 'slack3.jpg',
+          size: '100412',
+          href: '',
+          viewUrl: '',
+          downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
+          children: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+            name: "User Image"
+          })
+        }, {
+          id: '6',
           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'
+          downloadUrl: 'https://wallpapercave.com/wp/wp3913900.jpg',
+          children: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+            name: "User Image"
+          })
         }, {
-          id: '6',
+          id: '7',
           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'
+          downloadUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg',
+          children: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+            name: "User Image"
+          })
         }, {
-          id: '6',
+          id: '8',
           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'
+          href: 'https://samplelib.com/lib/preview/mp3/sample-3s.mp3',
+          viewUrl: 'https://samplelib.com/lib/preview/mp3/sample-3s.mp3',
+          downloadUrl: 'https://samplelib.com/lib/preview/mp3/sample-3s.mp3',
+          thumbnail: 'https://images.sftcdn.net/images/t_app-icon-m/p/7c80bdc6-a206-40b2-91fd-951c244f3672/3180901960/mp3-tag-editor-edit-music-tags-cover-art-changer-icon.png',
+          children: 'MP3'
+        }, {
+          id: '9',
+          name: 'slack5.mp3',
+          size: '100412',
+          href: 'https://samplelib.com/lib/preview/mp3/sample-3s.mp3',
+          viewUrl: 'https://samplelib.com/lib/preview/mp3/sample-3s.mp3',
+          downloadUrl: 'https://samplelib.com/lib/preview/mp3/sample-3s.mp3',
+          children: 'MP3'
+        }, {
+          id: '10',
+          children: 'custom Text'
+        }, {
+          id: '11',
+          children: /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
+            name: "custom children"
+          })
         }],
         selectedIndex: 0
       }

package/lib/AttachmentViewer/__tests__/__snapshots__/AttachmentImage.spec.js.snap

@@ -2,10 +2,14 @@
 
 exports[`AttachmentImage rendering the defult props 1`] = `
 <DocumentFragment>
-  <img
-    class="  undefined imgMaxFullSize "
-    data-id="AttachmentImage"
-    data-test-id="AttachmentImage"
-  />
+  <div
+    class="spinLoad"
+    data-id="AttachmentImage_loader"
+    data-test-id="AttachmentImage_loader"
+  >
+    <div
+      class="loader"
+    />
+  </div>
 </DocumentFragment>
 `;