@zohodesk/dot 1.0.0-temp-206.2 → 1.0.0-temp-200.4

package/lib/AttachmentViewer/AttachmentViewer.js

@@ -35,11 +35,9 @@ var _Attachment = require("./Attachment");
 
 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"));
+var _AttachmentViewerModule = _interopRequireDefault(require("./AttachmentViewer.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -81,6 +79,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
+// import audioThumbNail from '../../images/audio_thumbnail.png'
 var AttachmentViewer = /*#__PURE__*/function (_Component) {
   _inherits(AttachmentViewer, _Component);
 
@@ -116,6 +115,7 @@ 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.getAttachmentIconDetails = _this.getAttachmentIconDetails.bind(_assertThisInitialized(_this));
     _this.handleMenuValidation = _this.handleMenuValidation.bind(_assertThisInitialized(_this));
     return _this;
   }
@@ -181,6 +181,184 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         });
       });
     }
+  }, {
+    key: "getAttachmentIconDetails",
+    value: function getAttachmentIconDetails(fileName, size) {
+      var extension = (0, _Attachment.getExtensionFromFileName)(fileName);
+      var browserName = (0, _utils.getBrowserWithVersion)().toLowerCase() || '';
+      var OSName = navigator.platform.toLowerCase() || '';
+
+      switch (extension) {
+        case 'jpeg':
+        case 'jpg':
+        case 'png':
+        case 'apng':
+        case 'gif':
+        case 'bmp':
+        case 'tiff':
+        case 'tif':
+        case 'ico':
+        case 'webp':
+          return {
+            iconName: 'ZD-EF-fileImage',
+            iconSize: size || '30'
+          };
+
+        case 'txt':
+          return {
+            iconName: 'ZD-GN-fileDoc',
+            iconSize: size || '30'
+          };
+
+        case 'pdf':
+          return {
+            iconName: 'ZD-EF-filePdf',
+            iconSize: size || '30'
+          };
+
+        case 'html':
+        case 'htm':
+        case 'xhtml':
+          if (browserName.indexOf('chrome') !== -1 || browserName.indexOf('safari') !== -1) {
+            return {
+              iconName: 'ZD-EF-fileXml',
+              iconSize: size || '30'
+            };
+          } else if (browserName.indexOf('ie') !== -1 || browserName.indexOf('edge') !== -1) {
+            return {
+              iconName: 'ZD-EF-explorer',
+              iconSize: size || '30'
+            };
+          }
+
+          return {
+            iconName: 'ZD-EF-firebox',
+            iconSize: size || '30'
+          };
+
+        case 'ppt':
+        case 'pps':
+        case 'odp':
+        case 'sxi':
+        case 'pptx':
+        case 'ppsx':
+        case 'key':
+          return {
+            iconName: 'ZD-GN-filePpt',
+            iconSize: size || '40'
+          };
+
+        case 'rar':
+        case 'jar':
+        case 'zip':
+          return {
+            iconName: 'ZD-EF-fileZip',
+            iconSize: size || '30'
+          };
+
+        case 'doc':
+        case 'docx':
+        case 'sxw':
+        case 'odt':
+        case 'docm':
+        case 'dot':
+        case 'dotm':
+        case 'dotx':
+        case 'rtf':
+        case 'pages':
+          if (OSName.indexOf('mac') !== -1 || OSName.indexOf('linux') !== -1) {
+            return {
+              iconName: 'ZD-EF-fileOffice',
+              iconSize: size || '30'
+            };
+          }
+
+          return {
+            iconName: 'ZD-EF-fileWord',
+            iconSize: size || '30'
+          };
+
+        case 'xml':
+          return {
+            iconName: 'ZD-EF-fileXml',
+            iconSize: size || '30'
+          };
+
+        case 'xls':
+        case 'xlsx':
+        case 'sxc':
+        case 'ods':
+        case 'csv':
+        case 'tsv':
+        case 'numbers':
+          return {
+            iconName: 'ZD-GN-fileSheet',
+            iconSize: size || '30'
+          };
+
+        case 'ics':
+          return {
+            iconName: 'ZD-TK-event',
+            iconSize: size || '30'
+          };
+
+        case 'exe':
+          return {
+            iconName: 'ZD-EF-exe',
+            iconSize: size || '30'
+          };
+
+        case 'sh':
+        case 'bin':
+          return {
+            iconName: 'ZD-EF-linux',
+            iconSize: size || '30'
+          };
+
+        case 'css':
+          return {
+            iconName: 'ZD-EF-clrCss',
+            iconSize: size || '30'
+          };
+
+        case 'mp3':
+        case 'wav':
+        case 'wma':
+        case 'aac':
+        case 'm4r':
+        case 'ogg':
+          return {
+            iconName: 'ZD-EF-fileMp3',
+            iconSize: size || '30'
+          };
+
+        case 'mp4':
+        case 'mkv':
+        case 'mov':
+        case 'mpeg':
+        case 'flv':
+        case 'avi':
+        case 'webm':
+        case 'oga':
+          return {
+            iconName: 'ZD-EF-fileMp4',
+            iconSize: size || '30'
+          };
+
+        case 'eml':
+        case 'msg':
+          return {
+            iconName: 'ZD-GN-fileMail',
+            iconSize: size || '40'
+          };
+
+        default:
+          return {
+            iconName: 'ZD-GN-fileUnknown',
+            iconSize: size || '40'
+          };
+      }
+    }
   }, {
     key: "togglePViewList",
     value: function togglePViewList() {
@@ -393,6 +571,29 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
             _customClass$customCh = customClass.customChildrenClass,
             customChildrenClass = _customClass$customCh === void 0 ? '' : _customClass$customCh;
         var retainZoom = canZoom && selectedIndex == i && maintainZoom;
+        var previewurl = data.previewurl;
+        var getFrameOrigin = new URL(window.location.href).origin;
+        var frameOrigin = "&frameorigin=".concat(getFrameOrigin);
+        var iframeSrc = "".concat(previewurl).concat(frameOrigin);
+
+        var PreviewFileIcon = function PreviewFileIcon(_ref3) {
+          var data = _ref3.data;
+          var fileUnknown = {
+            iconName: 'ZD-GN-fileUnknown',
+            iconSize: '50'
+          }; // console.log("....data PreviewFileIcon",data)
+
+          var fileDetails = data ? _this5.getAttachmentIconDetails(data, '50') : fileUnknown;
+          var iconName = fileDetails.iconName,
+              iconSize = fileDetails.iconSize;
+          return /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+            iconClass: _AttachmentViewerModule["default"].prevIcon,
+            name: iconName,
+            size: iconSize
+          });
+        };
+
+        console.log("...previewUrl", previewurl, "...data", data);
         return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           className: _AttachmentViewerModule["default"].imgBox,
           id: "imgBox".concat(i),
@@ -410,11 +611,24 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           "data-id": "".concat(dataId, "_videoPreview"),
           "data-test-id": "".concat(dataId, "_videoPreview")
         }, audioProps), /*#__PURE__*/_react["default"].createElement("source", {
-          src: viewUrl,
+          src: previewurl,
           type: "audio/".concat((0, _Attachment.getExtensionFromFileName)(name))
-        })) : null : /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({
+        })) : null : (0, _Attachment.isVideoFile)(data.name) ? selectedIndex == i ? /*#__PURE__*/_react["default"].createElement("video", {
+          autoPlay: true,
+          controls: true,
+          className: _AttachmentViewerModule["default"].zoomIn
+        }, /*#__PURE__*/_react["default"].createElement("source", {
+          src: previewurl,
+          type: "video/".concat((0, _Attachment.getExtensionFromFileName)(data.name))
+        })) : null : (0, _Attachment.isDocsFile)(data.name) || (0, _Attachment.isSheetFile)(data.name) || (0, _Attachment.isShowFile)(data.name) ? selectedIndex == i ? (console.log("...previewurl", previewurl), /*#__PURE__*/_react["default"].createElement("iframe", {
+          src: iframeSrc,
+          className: _AttachmentViewerModule["default"].previewFrame
+        })) : null : (0, _Attachment.isPdfFile)(data.name) || (0, _Attachment.isEmailFile)(data.name) ? selectedIndex == i ? /*#__PURE__*/_react["default"].createElement("iframe", {
+          src: iframeSrc,
+          className: _AttachmentViewerModule["default"].previewFrame
+        }) : null : (0, _Attachment.isImageFile)(data.name) ? /*#__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),
+            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
           },
           src: viewUrl,
@@ -425,7 +639,20 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           dataId: dataId,
           id: "img".concat(i),
           isCover: false
-        }, imageProps), children)));
+        }, imageProps), children) : /*#__PURE__*/_react["default"].createElement("div", {
+          className: _AttachmentViewerModule["default"].previewNone
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: _AttachmentViewerModule["default"].fileTypeImg
+        }, /*#__PURE__*/_react["default"].createElement(PreviewFileIcon, {
+          data: data.name,
+          getAttachmentIconDetails: _this5.getAttachmentIconDetails
+        })), "Preview not available for the selected file type.", /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+          href: data.href,
+          className: _AttachmentViewerModule["default"].downloadLink,
+          onClick: function onClick() {
+            return (0, _Attachment.openNewTab)(data.href);
+          }
+        }, "Download"))));
       });
     }
   }, {
@@ -453,8 +680,8 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
       var authorHref;
       var authorName;
 
-      var _ref3 = data[selectedIndex] ? data[selectedIndex] : {},
-          author = _ref3.author;
+      var _ref4 = data[selectedIndex] ? data[selectedIndex] : {},
+          author = _ref4.author;
 
       if (author) {
         authorHref = author.href;
@@ -469,8 +696,8 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         responsiveId: responsiveId,
         query: this.responsiveFunc
-      }, function (_ref4) {
-        var uptoTablet = _ref4.uptoTablet;
+      }, function (_ref5) {
+        var uptoTablet = _ref5.uptoTablet;
         return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           scroll: "none",
           "data-scroll-palette": "dark"
@@ -662,11 +889,27 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           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
+              customChildrenClass = _customClass$customCh2 === void 0 ? '' : _customClass$customCh2; // thumbnail= isAudioFile(name) ? thumbnail || audioThumbNail : thumbnail //fallback thumbnail for audio
+
+          var PreviewFileIcon = function PreviewFileIcon(_ref6) {
+            var data = _ref6.data;
+            var fileUnknown = {
+              iconName: 'ZD-GN-fileUnknown',
+              iconSize: '40'
+            }; // console.log("....data PreviewFileIcon render",data)
+
+            var fileDetails = data ? _this6.getAttachmentIconDetails(data) : fileUnknown;
+            var iconName = fileDetails.iconName,
+                iconSize = fileDetails.iconSize;
+            return /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+              iconClass: _AttachmentViewerModule["default"].prevFooterIcon,
+              name: iconName,
+              size: iconSize
+            });
+          };
 
           return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-            className: "".concat(_AttachmentViewerModule["default"].imgItem, " ").concat(index === selectedIndex ? _AttachmentViewerModule["default"].selected : ''),
+            className: "".concat(_AttachmentViewerModule["default"].imgItem, " ").concat(index === selectedIndex ? _AttachmentViewerModule["default"].selected : '', " ").concat((0, _Attachment.isImageFile)(name) || thumbnail ? '' : _AttachmentViewerModule["default"].previewIconDiv),
             key: index,
             onClick: _this6.changeSelectedIndex.bind(_this6, index),
             eleRef: function eleRef(el) {
@@ -674,7 +917,7 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
             },
             dataId: "attachPreviewList",
             "data-title": name
-          }, /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({
+          }, (0, _Attachment.isImageFile)(name) || thumbnail ? /*#__PURE__*/_react["default"].createElement(_AttachmentImage["default"], _extends({
             src: thumbnail || viewUrl,
             size: "small",
             alt: name,
@@ -683,7 +926,10 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
               customChildrenClass: "".concat(_AttachmentViewerModule["default"].crsrPointer, " ").concat(customChildrenClass)
             },
             dataId: dataId
-          }, customProps), children));
+          }, customProps), children) : /*#__PURE__*/_react["default"].createElement(PreviewFileIcon, {
+            data: name,
+            getAttachmentIconDetails: _this6.getAttachmentIconDetails
+          }));
         }))))), totalLen !== 1 && /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           dataId: "attachToggle",
           onClick: _this6.togglePViewList,

package/lib/AttachmentViewer/AttachmentViewer.module.css

@@ -79,7 +79,7 @@
     font-size: var(--zd_font_size22) ;
     height: var(--zd_size38) ;
     width: var(--zd_size38) ;
-    line-height: 1.6364;
+    line-height: 1.6;
     border-radius: 50%;
     cursor: pointer;
 }
@@ -154,6 +154,7 @@
 .imgItem {
     height: var(--zd_size60) ;
     min-width: var(--zd_size40) ;
+    /* css:theme-validation:ignore */
     position: relative;
     transition: border var(--zd_transition3);
     border-width: 2px;
@@ -168,6 +169,10 @@
     border-color: var(--zdt_attachmentviewer_hover_border);
 }
 
+.imgItem+.imgItem {
+    /* margin-left: 6px; */
+}
+
 [dir=ltr] .imgItem+.imgItem {
     margin-left: var(--zd_size12) ;
 }
@@ -230,16 +235,71 @@
     transform: rotateX(0deg);
 }
 
-.isAudio {
-    composes: audioImage from '../common/dot_common.module.css';
-    width: var(--zd_size100) ;
+.isAudio,
+.isVideo,
+.isPdf,
+.isMail,
+.isWriter,
+.isSheet,
+.isShow,
+.otherFile {
+    width: var(--zd_size60) ;
+}
+
+.isAudio, .isVideo, .isPdf, .isMail, .isWriter, .isSheet, .isShow, .otherFile {
     background-size: 100% 100%;
 }
 
-.isAudio .image {
+/* .isAudio {
+    composes: audioImage from '../common/dot_common.module.css';
+}
+
+.isVideo {
+    composes: videoImage from '../common/dot_common.module.css';
+}
+
+.isPdf {
+    composes: pdfImage from '../common/dot_common.module.css';
+}
+
+.isWriter {
+    composes: writerImage from '../common/dot_common.module.css';
+}
+
+.isSheet {
+    composes: sheetImage from '../common/dot_common.module.css';
+}
+
+.isShow {
+    composes: showImage from '../common/dot_common.module.css';
+}
+
+
+.isMail {
+    composes: mailImage from '../common/dot_common.module.css';
+}
+
+.otherFile {
+    composes: otherImage from '../common/dot_common.module.css';
+} */
+
+.isAudio .image,
+.isVideo .image,
+.isPdf .image,
+.isWriter .image,
+.isSheet .image,
+.isShow .image,
+.isMail .image,
+.otherFile .image {
     opacity: 0;
 }
 
+.previewFrame {
+    height: 100% ;
+    width: 100% ;
+    border: 0;
+}
+
 .video {
     position: absolute;
     top: 0 ;
@@ -357,9 +417,69 @@
 }
 
 .btn {
+    /* css:theme-validation:ignore */
     height: 100% ;
     width: 100% ;
     background-color: var(--dot_mirror);
     border: 0;
     cursor: pointer;
+}
+
+.fileTypeImg {
+    margin: 0 auto var(--zd_size20) ;
+}
+
+.previewNone {
+    /* css:theme-validation:ignore */
+    color: #fff;
+    text-align: center;
+    margin: auto ;
+}
+
+.downloadLink {
+    /* css:theme-validation:ignore */
+    color: #0a73eb;
+    display: inline-block;
+    padding-top: var(--zd_size10) ;
+}
+
+.previewIconDiv {
+    width: var(--zd_size60) ;
+    composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.prevFooterIcon,
+.prevIcon {
+    /* css:theme-validation:ignore */
+    color: #fff;
+}
+
+.prevFooterIcon, .prevIcon {
+    padding: var(--zd_size2) ;
+    margin: auto ;
+}
+
+.prevFooterIcon::before,
+.prevIcon::before {
+    /* css:theme-validation:ignore */
+}
+
+.prevFooterIcon::before, .prevIcon::before {
+    background-color: transparent;
+}
+
+[dir=ltr] .prevIcon::before {
+    border-radius: 10px 30px 10px 10px;
+}
+
+[dir=rtl] .prevIcon::before {
+    border-radius: 30px 10px 10px 10px;
+}
+
+[dir=ltr] .prevFooterIcon::before {
+    border-radius: 5px 17px 5px 5px
+}
+
+[dir=rtl] .prevFooterIcon::before {
+    border-radius: 17px 5px 5px 5px
 }

package/lib/AttachmentViewer/utils.js

@@ -7,6 +7,7 @@ exports.ZoomEvent = exports.Zoom = void 0;
 exports.checkAudioUrlValidity = checkAudioUrlValidity;
 exports.checkFileSourcesValidation = checkFileSourcesValidation;
 exports.checkImageValidity = checkImageValidity;
+exports.getBrowserWithVersion = getBrowserWithVersion;
 
 var _Attachment = require("./Attachment");
 
@@ -190,4 +191,27 @@ function checkFileSourcesValidation(_ref) {
       };
     });
   }
+}
+
+function getBrowserWithVersion() {
+  var ua = navigator.userAgent;
+  var tem;
+  var M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*([\d\.]+)/i) || [];
+
+  if (ua.toLowerCase().indexOf('edge') !== -1) {
+    return ua.substring(ua.toLowerCase().indexOf('edge'));
+  }
+
+  if (/trident/i.test(M[1])) {
+    tem = /\brv[ :]+(\d+(\.\d+)?)/g.exec(ua) || [];
+    return "IE ".concat(tem[1] || '');
+  }
+
+  M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
+
+  if ((tem = ua.match(/version\/([\.\d]+)/i)) !== null) {
+    M[2] = tem[1];
+  }
+
+  return M.join(' ');
 }

package/lib/DotProvider/utils/themeAppearanceAssetsConfig.js

@@ -35,17 +35,17 @@ var themeAppearanceImports = {
   },
   Lib_LightMode_Dot: function Lib_LightMode_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('./../../../assets/Appearance/light/mode/Dot_LightMode.module.css'));
+      return _interopRequireWildcard(require("./../../../assets/Appearance/light/mode/Dot_LightMode.module.css"));
     });
   },
   Lib_DarkMode_Dot: function Lib_DarkMode_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('./../../../assets/Appearance/dark/mode/Dot_DarkMode.module.css'));
+      return _interopRequireWildcard(require("./../../../assets/Appearance/dark/mode/Dot_DarkMode.module.css"));
     });
   },
   Lib_PureDarkMode_Dot: function Lib_PureDarkMode_Dot() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('./../../../assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css'));
+      return _interopRequireWildcard(require("./../../../assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css"));
     });
   },
   Lib_LightMode_SVG: function Lib_LightMode_SVG() {