@zohodesk/dot 1.7.18 → 1.7.19

package/README.md

@@ -2,6 +2,12 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+
+# 1.7.19
+
+- **AttachmentViewer**
+  - Added preview support for Videos and Documents (via iframe)
+
 # 1.7.18
 
 - Added UNSAFE_ prefix to deprecated lifecycle methods: componentWillMount, componentWillReceiveProps, and componentWillUpdate.

package/es/Attachment/Attachment.module.css

@@ -14,15 +14,15 @@
   height: 100% ;
   width: 100% ;
   position: absolute;
-  top:0 
+  top: 0 
 }
 
 [dir=ltr] .disableLayer {
-  left:0 
+  left: 0 
 }
 
 [dir=rtl] .disableLayer {
-  right:0 
+  right: 0 
 }
 
 .attachmentHover {
@@ -66,6 +66,10 @@
   height: var(--zd_size40) ;
 }
 
+.attachleft {
+  padding: var(--zd_size3) ;
+}
+
 [dir=ltr] .attachleft {
   border-right: 1px solid var(--zdt_attachment_default_border);
 }

package/es/AttachmentViewer/Attachment.js

@@ -1,4 +1,6 @@
-const UNASSIGNED = 'Unassigned';
+import { getBrowserWithVersion } from "../utils/General";
+import { SUPPORTED_FILE_EXTENSIONS } from "./utils"; // const UNASSIGNED = 'Unassigned';
+
 const BROWSER_SUPPORTED_FILES = ['pdf', 'text', 'txt', 'css', 'jpg', 'jpeg', 'gif', 'png', 'bmp', 'ico', 'sh', 'mp3', 'wav', 'ogg'];
 export function isAudioFile(fileName) {
   const extension = getExtensionFromFileName(fileName);
@@ -14,4 +16,107 @@ export function getExtensionFromFileName(fileName) {
 export function isBrowserSupportedFile(fileName) {
   const extension = getExtensionFromFileName(fileName);
   return BROWSER_SUPPORTED_FILES.indexOf(extension) !== -1;
+}
+export function getAttachmentIconDetails(fileName) {
+  const extension = (getExtensionFromFileName(fileName) || '').toLowerCase();
+
+  if (!extension) {
+    return 'ZD-GN-fileUnknown';
+  }
+
+  const {
+    image,
+    doc,
+    pdf,
+    html,
+    ppt,
+    zip,
+    word,
+    xml,
+    sheet,
+    audio,
+    video,
+    mail,
+    linux,
+    css,
+    exe,
+    event
+  } = SUPPORTED_FILE_EXTENSIONS;
+
+  if (image.includes(extension)) {
+    return 'ZD-EF-fileImage';
+  }
+
+  if (doc.includes(extension)) {
+    return 'ZD-GN-fileDoc';
+  }
+
+  if (pdf.includes(extension)) {
+    return 'ZD-EF-filePdf';
+  }
+
+  if (ppt.includes(extension)) {
+    return 'ZD-GN-filePpt';
+  }
+
+  if (zip.includes(extension)) {
+    return 'ZD-EF-fileZip';
+  }
+
+  if (word.includes(extension)) {
+    const OSName = (navigator.platform || '').toLowerCase();
+    return OSName.includes('mac') || OSName.includes('linux') ? 'ZD-EF-fileOffice' : 'ZD-EF-fileWord';
+  }
+
+  if (xml.includes(extension)) {
+    return 'ZD-EF-fileXml';
+  }
+
+  if (sheet.includes(extension)) {
+    return 'ZD-GN-fileSheet';
+  }
+
+  if (audio.includes(extension)) {
+    return 'ZD-EF-fileMp3';
+  }
+
+  if (video.includes(extension)) {
+    return 'ZD-EF-fileMp4';
+  }
+
+  if (mail.includes(extension)) {
+    return 'ZD-GN-fileMail';
+  }
+
+  if (linux.includes(extension)) {
+    return 'ZD-EF-linux';
+  }
+
+  if (css.includes(extension)) {
+    return 'ZD-EF-clrCss';
+  }
+
+  if (exe.includes(extension)) {
+    return 'ZD-EF-exe';
+  }
+
+  if (event.includes(extension)) {
+    return 'ZD-TK-event';
+  }
+
+  if (html.includes(extension)) {
+    const browser = (getBrowserWithVersion() || '').toLowerCase();
+
+    if (browser.includes('chrome') || browser.includes('safari')) {
+      return 'ZD-EF-fileXml';
+    }
+
+    if (browser.includes('ie') || browser.includes('edge')) {
+      return 'ZD-EF-explorer';
+    }
+
+    return 'ZD-EF-firebox';
+  }
+
+  return 'ZD-GN-fileUnknown';
 }

package/es/AttachmentViewer/AttachmentViewer.js

@@ -5,16 +5,17 @@ import { Container, Box } from '@zohodesk/components/lib/Layout';
 import { Icon } from '@zohodesk/icons';
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
 import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import Typography from '@zohodesk/components/lib/Typography/Typography';
 import { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
+import Button from '@zohodesk/components/es/Button/Button';
 import AttachmentImage from "./AttachmentImage";
 import Link from "../Link/Link";
 import IconButton from "../IconButton/IconButton";
 import FreezeLayer from "../FreezeLayer/FreezeLayer";
-import { isAudioFile, getExtensionFromFileName } from "./Attachment";
+import { getExtensionFromFileName, getAttachmentIconDetails } from "./Attachment";
 import { shallowDiff } from "../utils/General";
+import { checkFileSourcesValidation, FILE_EXTENSIONS } from "./utils";
 import style from "./AttachmentViewer.module.css";
-import { checkFileSourcesValidation } from "./utils";
-import audioThumbNail from "../../images/audio_thumbnail.png";
 export default class AttachmentViewer extends Component {
   constructor(props) {
     super(props);
@@ -43,6 +44,26 @@ export default class AttachmentViewer extends Component {
     this.getUpdateDataList = this.getUpdateDataList.bind(this);
     this.zoomMaintain = this.zoomMaintain.bind(this);
     this.handleMenuValidation = this.handleMenuValidation.bind(this);
+    this.getPreviewIconData = this.getPreviewIconData.bind(this);
+    this.renderIframe = this.renderIframe.bind(this);
+  }
+
+  isImageFileType(fileName) {
+    const extension = (getExtensionFromFileName(fileName) || '').toLowerCase();
+    if (!extension) return false;
+    return FILE_EXTENSIONS.image.map(ext => ext.toLowerCase()).includes(extension);
+  }
+
+  isVideoFileType(fileName) {
+    const extension = (getExtensionFromFileName(fileName) || '').toLowerCase();
+    if (!extension) return false;
+    return FILE_EXTENSIONS.video.map(ext => ext.toLowerCase()).includes(extension);
+  }
+
+  isAudioFileType(fileName) {
+    const extension = (getExtensionFromFileName(fileName) || '').toLowerCase();
+    if (!extension) return false;
+    return FILE_EXTENSIONS.audio.map(ext => ext.toLowerCase()).includes(extension);
   }
 
   componentDidMount() {
@@ -87,13 +108,19 @@ export default class AttachmentViewer extends Component {
       data,
       selectedIndex
     } = this.state;
+    const {
+      allowedPreviewExtensionsData
+    } = this.props;
     const selectedAttachment = data[selectedIndex] || {};
-    const selectedAttachmentViewUrl = selectedAttachment.viewUrl;
-    const selectedAttachmentDownloadUrl = selectedAttachment.downloadUrl;
+    const selectedAttachmentViewUrl = selectedAttachment.viewUrl; // const selectedAttachmentDownloadUrl = selectedAttachment.downloadUrl;
+
     const selectedAttachmentName = selectedAttachment.name;
+    const selectedAttachmentPreviewUrl = selectedAttachment.previewurl;
     checkFileSourcesValidation({
       fileName: selectedAttachmentName,
-      viewURL: selectedAttachmentViewUrl
+      viewURL: selectedAttachmentViewUrl,
+      previewUrl: selectedAttachmentPreviewUrl,
+      allowedPreviewExtensionsData
     }).then(fileSourceValidation => {
       const {
         isViewURLValid,
@@ -250,7 +277,37 @@ export default class AttachmentViewer extends Component {
     };
   }
 
-  imgPreviewView() {
+  getPreviewIconData(name, size, dataId) {
+    const fileUnknown = {
+      iconName: 'ZD-GN-fileUnknown',
+      iconSize: '40'
+    };
+    const fileIconName = getAttachmentIconDetails(name);
+    const fileDetails = name ? {
+      iconName: fileIconName,
+      iconSize: size
+    } : fileUnknown;
+    const {
+      iconName,
+      iconSize
+    } = fileDetails;
+    return /*#__PURE__*/React.createElement(Icon, {
+      iconClass: style.prevFooterIcon,
+      name: iconName,
+      size: iconSize,
+      "data-id": dataId
+    });
+  }
+
+  renderIframe(previewurl) {
+    return /*#__PURE__*/React.createElement("iframe", {
+      src: previewurl,
+      className: style.previewFrame,
+      ...this.props.customProps.iframeProps
+    });
+  }
+
+  imgPreviewView(downloadUrl) {
     var _this = this;
 
     const {
@@ -262,7 +319,9 @@ export default class AttachmentViewer extends Component {
     } = this.state;
     const {
       maintainZoom,
-      dataId
+      dataId,
+      i18nKeys,
+      renderUnSupportedElement
     } = this.props;
 
     const getImgStyle = i => {
@@ -299,17 +358,25 @@ export default class AttachmentViewer extends Component {
         children,
         dataId = 'attachViewer',
         customClass = {},
-        customProps = {}
+        customProps = {},
+        previewurl,
+        type
       } = data;
       const {
         audioProps = {},
-        imageProps = {}
+        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.",
+        downloadText = "Download"
+      } = i18nKeys;
       return /*#__PURE__*/React.createElement(Container, {
         className: style.imgBox,
         id: `imgBox${i}`,
@@ -320,32 +387,52 @@ export default class AttachmentViewer extends Component {
       }, /*#__PURE__*/React.createElement(Box, {
         className: style.imgRef,
         id: `imgPreviewRef${i}`
-      }, isAudioFile(name) ? selectedIndex == i ? /*#__PURE__*/React.createElement("video", {
-        autoPlay: true,
+      }, selectedIndex == i && /*#__PURE__*/React.createElement(React.Fragment, null, _this.isAudioFileType(name) ? /*#__PURE__*/React.createElement("audio", {
+        controls: true,
+        className: style.zoomIn,
+        "data-id": `${dataId}_audioPreview`,
+        "data-test-id": `${dataId}_audioPreview`,
+        ...audioProps
+      }, /*#__PURE__*/React.createElement("source", {
+        src: previewurl || viewUrl,
+        type: `audio/${extension}`
+      })) : _this.isVideoFileType(name) ? /*#__PURE__*/React.createElement("video", {
         controls: true,
         className: style.zoomIn,
         "data-id": `${dataId}_videoPreview`,
         "data-test-id": `${dataId}_videoPreview`,
-        ...audioProps
+        ...videoProps
       }, /*#__PURE__*/React.createElement("source", {
         src: viewUrl,
-        type: `audio/${getExtensionFromFileName(name)}`
-      })) : null : /*#__PURE__*/React.createElement(AttachmentImage, {
+        type: `video/${extension}`
+      })) : _this.isImageFileType(name) || children ? /*#__PURE__*/React.createElement(AttachmentImage, {
         customClass: {
-          customImageClass: `${style.img} ${style.altText}
-                    ${canZoom || retainZoom ? isZoomed ? `${style.zoomedImg} ${style.zoomOutCursor}` : `${style.normalImg} ${style.zoomInCursor}` : ''} ${customImageClass}`,
+          customImageClass: `${style.img} ${style.altText} ${canZoom || retainZoom ? isZoomed ? `${style.zoomedImg} ${style.zoomOutCursor}` : `${style.normalImg} ${style.zoomInCursor}` : ''} ${customImageClass}`,
           customChildrenClass
         },
         src: viewUrl,
-        onClick: isPreviewAttachmentValid ? isZoomed ? _this.zoomOut.bind(_this, i) : e => {
-          _this.zoomIn(e, i, true);
-        } : undefined,
+        onClick: isPreviewAttachmentValid ? isZoomed ? _this.zoomOut.bind(_this, i) : e => _this.zoomIn(e, i, true) : undefined,
         alt: name,
         dataId: dataId,
         id: `img${i}`,
         isCover: false,
         ...imageProps
-      }, children)));
+      }, children) : 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
+      }, _this.getPreviewIconData(name, '70')), /*#__PURE__*/React.createElement(Typography, {
+        $ui_size: "20",
+        $ui_weight: "semibold"
+      }, previewUnsupportedText), downloadUrl ? /*#__PURE__*/React.createElement(Link, {
+        href: downloadUrl,
+        className: style.downloadLink,
+        hasReload: true,
+        download: true
+      }, /*#__PURE__*/React.createElement(Button, {
+        palette: "primaryFilled",
+        text: downloadText
+      })) : null))));
     });
   }
 
@@ -371,7 +458,7 @@ export default class AttachmentViewer extends Component {
     } = customProps;
     const totalLen = data.length;
     const selectedAttachment = data[selectedIndex] || {};
-    const selectedImgUrl = selectedAttachment.viewUrl;
+    const selectedImgUrl = selectedAttachment.previewurl || selectedAttachment.viewUrl;
     const downloadUrl = selectedAttachment.downloadUrl;
     let authorHref;
     let authorName;
@@ -526,7 +613,7 @@ export default class AttachmentViewer extends Component {
         eleRef: this.setImgBoxRef,
         scroll: "both",
         flexible: true
-      }, this.imgPreviewView()), /*#__PURE__*/React.createElement(Box, {
+      }, this.imgPreviewView(downloadUrl)), /*#__PURE__*/React.createElement(Box, {
         className: `${style.arrowBox}  ${uptoTablet ? style.mbleArrowBox : style.nrmlArrowBox} ${totalLen === selectedIndex + 1 ? style.hidden : ''}`,
         onClick: this.changeSelectedIndex.bind(this, selectedIndex + 1),
         "data-title": i18nKeys.nextText,
@@ -582,20 +669,19 @@ export default class AttachmentViewer extends Component {
         let {
           thumbnail
         } = item;
+        const isImageFileType = this.isImageFileType(name) || thumbnail;
         const {
           customImageClass = '',
           customChildrenClass = ''
         } = customClass;
-        thumbnail = isAudioFile(name) ? thumbnail || audioThumbNail : thumbnail; //fallback thumbnail for audio
-
         return /*#__PURE__*/React.createElement(Box, {
-          className: `${style.imgItem} ${index === selectedIndex ? style.selected : ''}`,
+          className: `${style.imgItem} ${index === selectedIndex ? style.selected : ''} ${isImageFileType ? '' : style.previewIconDiv}`,
           key: index,
           onClick: this.changeSelectedIndex.bind(this, index),
           eleRef: el => this[`img_${index}`] = el,
           dataId: "attachPreviewList",
           "data-title": name
-        }, /*#__PURE__*/React.createElement(AttachmentImage, {
+        }, isImageFileType || children ? /*#__PURE__*/React.createElement(AttachmentImage, {
           src: thumbnail || viewUrl,
           size: "small",
           alt: name,
@@ -605,7 +691,7 @@ export default class AttachmentViewer extends Component {
           },
           dataId: dataId,
           ...customProps
-        }, children));
+        }, children) : this.getPreviewIconData(name, '40'));
       }))))), totalLen !== 1 && /*#__PURE__*/React.createElement(IconButton, {
         dataId: "attachToggle",
         onClick: this.togglePViewList,

package/es/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;
 }
@@ -230,14 +230,10 @@
     transform: rotateX(0deg);
 }
 
-.isAudio {
-    composes: audioImage from '../common/dot_common.module.css';
-    width: var(--zd_size100) ;
-    background-size: 100% 100%;
-}
-
-.isAudio .image {
-    opacity: 0;
+.previewFrame {
+    height: 100% ;
+    width: 100% ;
+    border: 0;
 }
 
 .video {
@@ -362,4 +358,31 @@
     background-color: var(--dot_mirror);
     border: 0;
     cursor: pointer;
+}
+
+.fileTypeImg {
+    margin-bottom: var(--zd_size30) ;
+}
+
+.previewNone {
+    color: var(--zdt_attachmentviewer_title_text);
+    max-width: 70% ;
+    text-align: center;
+    margin: auto ;
+}
+
+.downloadLink {
+    display: inline-block;
+    padding-top: var(--zd_size15) ;
+}
+
+.previewIconDiv {
+    width: var(--zd_size60) ;
+    composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.prevFooterIcon {
+    color: var(--zdt_attachmentviewer_title_text);
+    padding: var(--zd_size2) ;
+    margin: auto ;
 }

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

@@ -237,7 +237,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                 data-test-id="containerComponent"
               >
                 <div
-                  class="imgItem selected shrinkOff"
+                  class="imgItem selected  shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -254,7 +254,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  shrinkOff"
+                  class="imgItem   shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -271,7 +271,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  shrinkOff"
+                  class="imgItem   shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -288,7 +288,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  shrinkOff"
+                  class="imgItem   shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -305,7 +305,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  shrinkOff"
+                  class="imgItem   shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -322,7 +322,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  shrinkOff"
+                  class="imgItem   shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -339,21 +339,20 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                   </div>
                 </div>
                 <div
-                  class="imgItem  shrinkOff"
+                  class="imgItem  previewIconDiv shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
                   data-title="slack5.mp3"
                 >
-                  <div
-                    class="spinLoad"
-                    data-id="AttachmentImage_loader"
-                    data-test-id="AttachmentImage_loader"
-                  >
-                    <div
-                      class="loader"
-                    />
-                  </div>
+                  <i
+                    aria-hidden="true"
+                    class="zd_font_icons basic icon-fileMp3  prevFooterIcon  "
+                    data-id="fontIcon"
+                    data-selector-id="fontIcon"
+                    data-test-id="fontIcon"
+                    style="--zd-iconfont-size: var(--zd_font_size40);"
+                  />
                 </div>
               </div>
             </div>

package/es/AttachmentViewer/props/defaultProps.js

@@ -8,9 +8,9 @@ export const AttachmentImage_defaultProps = {
 export const AttachmentViewer_defaultProps = {
   responsiveId: "Helmet",
   needDownload: true,
-  i18nKeys: {},
   maintainZoom: false,
   isActive: false,
   dataId: 'AttachmentViewer',
+  i18nKeys: {},
   customProps: {}
 };

package/es/AttachmentViewer/props/propTypes.js

@@ -26,7 +26,8 @@ export const AttachmentViewer_propTypes = {
     downloadText: PropTypes.string,
     closeText: PropTypes.string,
     hideText: PropTypes.string,
-    showText: PropTypes.string
+    showText: PropTypes.string,
+    previewUnsupportedText: PropTypes.string
   }),
   needDownload: PropTypes.string,
   previewObj: PropTypes.object,
@@ -34,6 +35,13 @@ export const AttachmentViewer_propTypes = {
   maintainZoom: PropTypes.bool,
   isActive: PropTypes.bool,
   dataId: PropTypes.string,
+  allowedPreviewExtensionsData: PropTypes.shape({
+    audio: PropTypes.arrayOf(PropTypes.string),
+    video: PropTypes.arrayOf(PropTypes.string),
+    image: PropTypes.arrayOf(PropTypes.string),
+    document: PropTypes.arrayOf(PropTypes.string)
+  }),
+  renderUnSupportedElement: PropTypes.func,
   customProps: PropTypes.shape({
     avatarProps: PropTypes.exact(AvatarProps)
   })