@zohodesk/dot 1.5.5 → 1.6.1

package/lib/utils/editorUtils.js

@@ -15,8 +15,8 @@ exports.isImageFormat = isImageFormat;
 exports.loadResource = loadResource;
 exports.triggerKeyup = triggerKeyup;
 exports.validateEditorContentOnInsertHtml = validateEditorContentOnInsertHtml;
-var ATTACHMENT_FILE_NAME_SIZE_LIMIT = 200; // editorUtils
 
+// editorUtils
 function editorContentValidate(editorObj) {
   var content = editorObj && editorObj.getContent && editorObj.getContent() || '';
 
@@ -67,13 +67,14 @@ function encodeForHtml(str) {
 } // attachment
 
 
-function isFileNameSizeInvalid(fileName) {
-  return fileName.length > ATTACHMENT_FILE_NAME_SIZE_LIMIT;
+function isFileNameSizeInvalid(fileName, fileNameMaxCharacters) {
+  return fileName.length > fileNameMaxCharacters;
 }
 
-function isImageFormat(fileName) {
+function isImageFormat(fileName, allowedFileExtensions) {
   var extension = getExtensionFromFileName(fileName);
-  return /jpeg|jpg|png|gif|bmp|ico/i.test(extension);
+  var isValidExtension = allowedFileExtensions.includes(extension);
+  return isValidExtension;
 }
 
 function getExtensionFromFileName(fileName) {

package/lib/v1/AttachmentViewer/AttachmentImage.js

@@ -9,10 +9,16 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _hooks = require("@zohodesk/hooks");
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
 var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _utils = require("../../AttachmentViewer/utils");
+
 var _Image = _interopRequireDefault(require("../Image/Image"));
 
 var _AttachmentViewerModule = _interopRequireDefault(require("../../AttachmentViewer/AttachmentViewer.module.css"));
@@ -36,51 +42,73 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var AttachmentImage = function AttachmentImage(props) {
-  var isImage = props.isImage,
-      onLoad = props.onLoad,
+  var onLoad = props.onLoad,
+      onError = props.onError,
       src = props.src,
       onClick = props.onClick,
       alt = props.alt,
       dataId = props.dataId,
       id = props.id,
-      className = props.className,
-      isCover = props.isCover;
-  var imageEle = (0, _react.useRef)();
+      customClass = props.customClass,
+      isCover = props.isCover,
+      children = props.children;
+  var _customClass$customIm = customClass.customImageClass,
+      customImageClass = _customClass$customIm === void 0 ? '' : _customClass$customIm,
+      _customClass$customCh = customClass.customChildrenClass,
+      customChildrenClass = _customClass$customCh === void 0 ? '' : _customClass$customCh;
 
   var _useState = (0, _react.useState)(true),
       _useState2 = _slicedToArray(_useState, 2),
       isLoading = _useState2[0],
       setLoading = _useState2[1];
 
-  var imgLoad = function imgLoad() {
-    setLoading(false);
-    onLoad && onLoad();
-  };
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isImageValid = _useState4[0],
+      setImageValidity = _useState4[1];
 
-  (0, _react.useEffect)(function () {
-    if (isImage) {
-      var image = imageEle.current;
-      image.addEventListener('load', imgLoad);
-    } else {
+  function handleImageValidation() {
+    (0, _utils.checkImageValidity)(src).then(function (isValid) {
+      setImageValidity(isValid);
       setLoading(false);
-    }
+    });
+  }
+
+  (0, _react.useEffect)(function () {
+    handleImageValidation();
   }, []);
+  (0, _hooks.useEffectCallOnlyAfterState)(function () {
+    setLoading(true);
+    handleImageValidation();
+  }, [src]);
+
+  function renderImage() {
+    return /*#__PURE__*/_react["default"].createElement(_Image["default"], {
+      htmlId: id,
+      dataId: isImageValid ? dataId : "".concat(dataId, "_alt"),
+      src: src,
+      onClick: onClick,
+      className: customImageClass,
+      alt: alt,
+      isCover: isCover,
+      onLoad: onLoad,
+      onError: onError
+    });
+  }
+
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLoading ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(_AttachmentViewerModule["default"].spinLoad),
     "data-id": "".concat(dataId, "_loader"),
     "data-test-id": "".concat(dataId, "_loader")
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: _AttachmentViewerModule["default"].loader
-  })) : null, /*#__PURE__*/_react["default"].createElement(_Image["default"], {
+  })) : isImageValid ? renderImage() : children ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "both",
     htmlId: id,
-    eleRef: imageEle,
-    dataId: dataId,
-    src: src,
-    onClick: onClick,
-    className: "".concat(isLoading ? _AttachmentViewerModule["default"].hide : '', " ").concat(className),
-    alt: alt,
-    isCover: isCover
-  }));
+    dataId: "".concat(dataId, "_custom"),
+    className: customChildrenClass
+  }, children) : renderImage() //alt ui
+  );
 };
 
 AttachmentImage.propTypes = _propTypes.AttachmentImage_propTypes;

package/lib/v1/AttachmentViewer/AttachmentViewer.js

@@ -33,6 +33,10 @@ var _FreezeLayer = _interopRequireDefault(require("../FreezeLayer/FreezeLayer"))
 
 var _Attachment = require("../../AttachmentViewer/Attachment");
 
+var _utils = require("../../AttachmentViewer/utils");
+
+var _audio_thumbnail = _interopRequireDefault(require("../../../images/audio_thumbnail.png"));
+
 var _General = require("../../utils/General");
 
 var _AttachmentViewerModule = _interopRequireDefault(require("../../AttachmentViewer/AttachmentViewer.module.css"));
@@ -43,6 +47,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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/v1/AttachmentViewer/props/propTypes.js

@@ -11,14 +11,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var AttachmentImage_propTypes = {
   alt: _propTypes["default"].string,
-  className: _propTypes["default"].string,
+  customClass: _propTypes["default"].shape({
+    customImageClass: _propTypes["default"].string,
+    customChildrenClass: _propTypes["default"].string
+  }),
   dataId: _propTypes["default"].string,
   id: _propTypes["default"].string,
   isCover: _propTypes["default"].bool,
-  isImage: _propTypes["default"].bool,
   onClick: _propTypes["default"].func,
   onLoad: _propTypes["default"].func,
-  src: _propTypes["default"].string
+  onError: _propTypes["default"].func,
+  src: _propTypes["default"].string,
+  children: _propTypes["default"].node
 };
 exports.AttachmentImage_propTypes = AttachmentImage_propTypes;
 var AttachmentViewer_propTypes = {

package/lib/v1/Image/Image.js

@@ -25,7 +25,9 @@ function Image(props) {
       dataId = props.dataId,
       htmlId = props.htmlId,
       eleRef = props.eleRef,
-      original = props.original;
+      original = props.original,
+      onLoad = props.onLoad,
+      onError = props.onError;
   return /*#__PURE__*/_react["default"].createElement("img", {
     src: src,
     alt: alt,
@@ -36,7 +38,9 @@ function Image(props) {
     onClick: onClick,
     id: htmlId,
     ref: eleRef,
-    "data-original": original
+    "data-original": original,
+    onLoad: onLoad,
+    onError: onError
   });
 }
 

package/lib/v1/Image/props/propTypes.js

@@ -19,6 +19,8 @@ var propTypes = {
   onClick: _propTypes["default"].func,
   original: _propTypes["default"].string,
   src: _propTypes["default"].string.isRequired,
-  title: _propTypes["default"].string
+  title: _propTypes["default"].string,
+  onLoad: _propTypes["default"].func,
+  onError: _propTypes["default"].func
 };
 exports.propTypes = propTypes;