@zohodesk/dot 1.0.0-temp-200.6 → 1.0.0-temp-210

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,10 +66,6 @@
   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,29 +1,8 @@
-import { getBrowserWithVersion } from "../utils/General";
 const UNASSIGNED = 'Unassigned';
 const BROWSER_SUPPORTED_FILES = ['pdf', 'text', 'txt', 'css', 'jpg', 'jpeg', 'gif', 'png', 'bmp', 'ico', 'sh', 'mp3', 'wav', 'ogg'];
-export function isAudioFile(extension) {
-  return /mp3|wav|ogg|oga|m4a|weba|opus|m4b|webma|aac/i.test(extension);
-}
-export function isVideoFile(extension) {
-  return /mp4|webm|ogg/i.test(extension);
-}
-export function isPdfFile(extension) {
-  return /pdf/i.test(extension);
-}
-export function isDocsFile(extension) {
-  return /docx|doc|docm|rtf|odt|dot|dotm|dotx|pages/i.test(extension);
-}
-export function isSheetFile(extension) {
-  return /xlsx|numbers/i.test(extension);
-}
-export function isPresentationFile(extension) {
-  return /pptx|ppt|pps|ppsx|key/i.test(extension);
-}
-export function isEmailFile(extension) {
-  return /eml|msg/i.test(extension);
-}
-export function isImageFile(extension) {
-  return /jpeg|jpg|png|gif|bmp|ico/i.test(extension);
+export function isAudioFile(fileName) {
+  const extension = getExtensionFromFileName(fileName);
+  return /mp3|wav|ogg/i.test(extension);
 }
 export function getExtensionFromFileName(fileName) {
   if (fileName && fileName.indexOf(".") !== -1) {
@@ -35,188 +14,4 @@ export function getExtensionFromFileName(fileName) {
 export function isBrowserSupportedFile(fileName) {
   const extension = getExtensionFromFileName(fileName);
   return BROWSER_SUPPORTED_FILES.indexOf(extension) !== -1;
-}
-export function getAttachmentIconDetails(fileName, size) {
-  const extension = getExtensionFromFileName(fileName);
-  const browserName = getBrowserWithVersion().toLowerCase() || '';
-  const 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 'svg':
-    case 'heic':
-    case 'webp':
-      return {
-        iconName: 'ZD-EF-fileImage',
-        iconSize: size
-      };
-
-    case 'txt':
-      return {
-        iconName: 'ZD-GN-fileDoc',
-        iconSize: size
-      };
-
-    case 'pdf':
-      return {
-        iconName: 'ZD-EF-filePdf',
-        iconSize: size
-      };
-
-    case 'html':
-    case 'htm':
-    case 'xhtml':
-      if (browserName.indexOf('chrome') !== -1 || browserName.indexOf('safari') !== -1) {
-        return {
-          iconName: 'ZD-EF-fileXml',
-          iconSize: size
-        };
-      } else if (browserName.indexOf('ie') !== -1 || browserName.indexOf('edge') !== -1) {
-        return {
-          iconName: 'ZD-EF-explorer',
-          iconSize: size
-        };
-      }
-
-      return {
-        iconName: 'ZD-EF-firebox',
-        iconSize: size
-      };
-
-    case 'ppt':
-    case 'pps':
-    case 'odp':
-    case 'sxi':
-    case 'pptx':
-    case 'ppsx':
-    case 'pot':
-    case 'potx':
-    case 'key':
-      return {
-        iconName: 'ZD-GN-filePpt',
-        iconSize: size
-      };
-
-    case 'rar':
-    case 'jar':
-    case 'zip':
-      return {
-        iconName: 'ZD-EF-fileZip',
-        iconSize: size
-      };
-
-    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
-        };
-      }
-
-      return {
-        iconName: 'ZD-EF-fileWord',
-        iconSize: size
-      };
-
-    case 'xml':
-      return {
-        iconName: 'ZD-EF-fileXml',
-        iconSize: size
-      };
-
-    case 'xls':
-    case 'xlsx':
-    case 'xlsm':
-    case 'xlsb':
-    case 'sxc':
-    case 'ods':
-    case 'csv':
-    case 'tsv':
-    case 'numbers':
-      return {
-        iconName: 'ZD-GN-fileSheet',
-        iconSize: size
-      };
-
-    case 'ics':
-      return {
-        iconName: 'ZD-TK-event',
-        iconSize: size
-      };
-
-    case 'exe':
-      return {
-        iconName: 'ZD-EF-exe',
-        iconSize: size
-      };
-
-    case 'sh':
-    case 'bin':
-      return {
-        iconName: 'ZD-EF-linux',
-        iconSize: size
-      };
-
-    case 'css':
-      return {
-        iconName: 'ZD-EF-clrCss',
-        iconSize: size
-      };
-
-    case 'mp3':
-    case 'wav':
-    case 'wma':
-    case 'aac':
-    case 'm4r':
-    case 'ogg':
-    case 'opus':
-      return {
-        iconName: 'ZD-EF-fileMp3',
-        iconSize: size
-      };
-
-    case 'mp4':
-    case 'mkv':
-    case 'mov':
-    case 'mpeg':
-    case 'flv':
-    case 'wmv':
-    case 'avi':
-    case 'webm':
-    case 'ogv':
-      return {
-        iconName: 'ZD-EF-fileMp4',
-        iconSize: size
-      };
-
-    case 'eml':
-    case 'msg':
-      return {
-        iconName: 'ZD-GN-fileMail',
-        iconSize: size
-      };
-
-    default:
-      return {
-        iconName: 'ZD-GN-fileUnknown',
-        iconSize: size
-      };
-  }
 }

package/es/AttachmentViewer/AttachmentViewer.js

@@ -5,17 +5,16 @@ 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, isVideoFile, isPdfFile, isDocsFile, isSheetFile, isPresentationFile, isEmailFile, isImageFile, getAttachmentIconDetails } from "./Attachment";
+import { isAudioFile, getExtensionFromFileName } from "./Attachment";
 import { shallowDiff } from "../utils/General";
-import { checkFileSourcesValidation, getFrameOrigin } 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);
@@ -44,8 +43,6 @@ 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);
   }
 
   componentDidMount() {
@@ -94,11 +91,9 @@ export default class AttachmentViewer extends Component {
     const selectedAttachmentViewUrl = selectedAttachment.viewUrl;
     const selectedAttachmentDownloadUrl = selectedAttachment.downloadUrl;
     const selectedAttachmentName = selectedAttachment.name;
-    const selectedAttachmentPreviewUrl = selectedAttachment.previewurl;
     checkFileSourcesValidation({
       fileName: selectedAttachmentName,
-      viewURL: selectedAttachmentViewUrl,
-      previewUrl: selectedAttachmentPreviewUrl
+      viewURL: selectedAttachmentViewUrl
     }).then(fileSourceValidation => {
       const {
         isViewURLValid,
@@ -255,33 +250,6 @@ export default class AttachmentViewer extends Component {
     };
   }
 
-  getPreviewIconData(name, size, dataId) {
-    // const fileDetails = getAttachmentIconDetails(name, size);
-    const fileUnknown = {
-      iconName: 'ZD-GN-fileUnknown',
-      iconSize: '40'
-    };
-    const fileDetails = name ? getAttachmentIconDetails(name, size) : fileUnknown;
-    const {
-      iconName,
-      iconSize
-    } = fileDetails;
-    return /*#__PURE__*/React.createElement(Icon, {
-      iconClass: style.prevFooterIcon,
-      name: iconName,
-      size: iconSize,
-      "data-id": dataId
-    });
-  }
-
-  renderIframe(iframeSrc) {
-    return /*#__PURE__*/React.createElement("iframe", {
-      src: iframeSrc,
-      className: style.previewFrame,
-      ...this.props.customProps.iframeProps
-    });
-  }
-
   imgPreviewView() {
     var _this = this;
 
@@ -294,9 +262,7 @@ export default class AttachmentViewer extends Component {
     } = this.state;
     const {
       maintainZoom,
-      dataId,
-      i18nKeys,
-      renderUnSupportedElement
+      dataId
     } = this.props;
 
     const getImgStyle = i => {
@@ -333,24 +299,17 @@ export default class AttachmentViewer extends Component {
         children,
         dataId = 'attachViewer',
         customClass = {},
-        customProps = {},
-        previewurl,
-        type
+        customProps = {}
       } = data;
       const {
         audioProps = {},
-        imageProps = {},
-        videoProps = {},
-        iframeProps = {}
+        imageProps = {}
       } = customProps;
       const {
         customImageClass = '',
         customChildrenClass = ''
       } = customClass;
       const retainZoom = canZoom && selectedIndex == i && maintainZoom;
-      const frameOrigin = getFrameOrigin();
-      const iframeSrc = `${previewurl}&frameorigin=${frameOrigin}`;
-      const extension = getExtensionFromFileName(name);
       return /*#__PURE__*/React.createElement(Container, {
         className: style.imgBox,
         id: `imgBox${i}`,
@@ -361,50 +320,32 @@ export default class AttachmentViewer extends Component {
       }, /*#__PURE__*/React.createElement(Box, {
         className: style.imgRef,
         id: `imgPreviewRef${i}`
-      }, selectedIndex == i && /*#__PURE__*/React.createElement(React.Fragment, null, isAudioFile(extension) ? /*#__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,
-        type: `audio/${extension}`
-      })) : isVideoFile(extension) ? /*#__PURE__*/React.createElement("video", {
+      }, isAudioFile(name) ? selectedIndex == i ? /*#__PURE__*/React.createElement("video", {
+        autoPlay: true,
         controls: true,
         className: style.zoomIn,
         "data-id": `${dataId}_videoPreview`,
         "data-test-id": `${dataId}_videoPreview`,
-        ...videoProps
+        ...audioProps
       }, /*#__PURE__*/React.createElement("source", {
         src: viewUrl,
-        type: `video/${extension}`
-      })) : isImageFile(extension) ? /*#__PURE__*/React.createElement(AttachmentImage, {
+        type: `audio/${getExtensionFromFileName(name)}`
+      })) : null : /*#__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) : type === "document" && previewurl != null ? _this.renderIframe(iframeSrc) : 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"
-      }, i18nKeys.previewUnsupportedText), /*#__PURE__*/React.createElement(Link, {
-        href: data.href,
-        className: style.downloadLink
-      }, /*#__PURE__*/React.createElement(Button, {
-        palette: "primaryFilled",
-        text: i18nKeys.downloadText
-      }))))));
+      }, children)));
     });
   }
 
@@ -430,7 +371,7 @@ export default class AttachmentViewer extends Component {
     } = customProps;
     const totalLen = data.length;
     const selectedAttachment = data[selectedIndex] || {};
-    const selectedImgUrl = selectedAttachment.previewurl || selectedAttachment.viewUrl;
+    const selectedImgUrl = selectedAttachment.viewUrl;
     const downloadUrl = selectedAttachment.downloadUrl;
     let authorHref;
     let authorName;
@@ -645,14 +586,16 @@ export default class AttachmentViewer extends Component {
           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 : ''} ${isImageFile(name) || thumbnail ? '' : style.previewIconDiv}`,
+          className: `${style.imgItem} ${index === selectedIndex ? style.selected : ''}`,
           key: index,
           onClick: this.changeSelectedIndex.bind(this, index),
           eleRef: el => this[`img_${index}`] = el,
           dataId: "attachPreviewList",
           "data-title": name
-        }, isImageFile(name) || thumbnail ? /*#__PURE__*/React.createElement(AttachmentImage, {
+        }, /*#__PURE__*/React.createElement(AttachmentImage, {
           src: thumbnail || viewUrl,
           size: "small",
           alt: name,
@@ -662,7 +605,7 @@ export default class AttachmentViewer extends Component {
           },
           dataId: dataId,
           ...customProps
-        }, children) : this.getPreviewIconData(name, '40'));
+        }, children));
       }))))), 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.6;
+    line-height: 1.6364;
     border-radius: 50%;
     cursor: pointer;
 }
@@ -230,10 +230,14 @@
     transform: rotateX(0deg);
 }
 
-.previewFrame {
-    height: 100% ;
-    width: 100% ;
-    border: 0;
+.isAudio {
+    composes: audioImage from '../common/dot_common.module.css';
+    width: var(--zd_size100) ;
+    background-size: 100% 100%;
+}
+
+.isAudio .image {
+    opacity: 0;
 }
 
 .video {
@@ -358,54 +362,4 @@
     background-color: var(--dot_mirror);
     border: 0;
     cursor: pointer;
-}
-
-.fileTypeImg {
-    margin-bottom: var(--zd_size30) ;
-}
-
-.previewNone {
-    color: var(--zdt_attachmentviewer_title_text);
-    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,
-.prevIcon {
-    color: var(--zdt_attachmentviewer_title_text);
-}
-
-.prevFooterIcon, .prevIcon {
-    padding: var(--zd_size2) ;
-    margin: auto ;
-}
-
-.prevFooterIcon::before, .prevIcon::before {
-    background-color: var(--dot_mirror);
-}
-
-[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/es/AttachmentViewer/props/propTypes.js

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

package/es/AttachmentViewer/utils.js

@@ -1,4 +1,4 @@
-import { isAudioFile, isDocsFile, isEmailFile, isPdfFile, isPresentationFile, isSheetFile, isVideoFile } from "./Attachment";
+import { isAudioFile } from "./Attachment";
 export class Zoom {
   constructor() {
     const matrix = [1, 0, 0, 1, 0, 0]; // current view transform
@@ -120,16 +120,6 @@ export function checkImageValidity(src) {
     };
   });
 }
-export function checkVideoUrlValidity(url) {
-  return new Promise(resolve => {
-    const video = document.createElement('video');
-    video.src = url;
-
-    video.oncanplaythrough = () => resolve(true);
-
-    video.onerror = () => resolve(false);
-  });
-}
 export function checkAudioUrlValidity(url) {
   return new Promise(resolve => {
     const audio = new Audio(url);
@@ -144,20 +134,11 @@ export function checkAudioUrlValidity(url) {
   });
 }
 ;
-export function isValidDocument(url) {
-  if (!url) {
-    return false;
-  }
-
-  return true;
-}
 export function checkFileSourcesValidation(_ref) {
   let {
     fileName,
-    viewURL,
-    previewUrl
+    viewURL
   } = _ref;
-  const documentTypes = isDocsFile(fileName) || isSheetFile(fileName) || isPresentationFile(fileName) || isPdfFile(fileName) || isEmailFile(fileName);
 
   if (isAudioFile(fileName)) {
     const audioValidityPromise = checkAudioUrlValidity(viewURL);
@@ -165,18 +146,6 @@ export function checkFileSourcesValidation(_ref) {
       isViewURLValid: isURLValid,
       canZoom: false
     }));
-  } else if (isVideoFile(fileName)) {
-    const videoValidityPromise = checkVideoUrlValidity(viewURL);
-    return videoValidityPromise.then(isURLValid => ({
-      isViewURLValid: isURLValid,
-      canZoom: false
-    }));
-  } else if (documentTypes && isValidDocument(previewUrl)) {
-    const isValid = isValidDocument(previewUrl);
-    return Promise.resolve({
-      isViewURLValid: isValid,
-      canZoom: false
-    });
   } else {
     const imageValidityPromise = checkImageValidity(viewURL);
     return imageValidityPromise.then(isURLValid => ({
@@ -184,7 +153,4 @@ export function checkFileSourcesValidation(_ref) {
       canZoom: isURLValid
     }));
   }
-}
-export function getFrameOrigin() {
-  return new URL(window.location.href).origin;
 }

package/es/Drawer/Drawer.js

@@ -233,7 +233,8 @@ export default class Drawer extends React.Component {
       subDrawerActive,
       customClass,
       needAutoZindex,
-      innerPortalName
+      innerPortalName,
+      onEnterComplete
     } = this.props;
     let zindexNumber = isActive ? this.getNextIndex() : '';
     return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
@@ -252,7 +253,8 @@ export default class Drawer extends React.Component {
         palette: palette,
         forwardRef: forwardRef,
         customClass: customClass,
-        needAutoZindex: needAutoZindex
+        needAutoZindex: needAutoZindex,
+        onEnterComplete: onEnterComplete
       }, /*#__PURE__*/React.createElement(Box, {
         flexible: true
       }, /*#__PURE__*/React.createElement(Container, {

package/es/Drawer/props/defaultProps.js

@@ -20,5 +20,6 @@ export const Drawer_defaultProps = {
   onBodyClick: () => {},
   needFocusScope: false,
   customProps: {},
-  a11y: {}
+  a11y: {},
+  onEnterComplete: {}
 };

package/es/Drawer/props/propTypes.js

@@ -50,5 +50,6 @@ export const Drawer_propTypes = {
   needFocusScope: PropTypes.bool,
   customProps: PropTypes.object,
   innerPortalName: PropTypes.string,
-  a11y: PropTypes.object
+  a11y: PropTypes.object,
+  onEnterComplete: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
 };