@zohodesk/dot 1.0.0-temp-187.14 → 1.0.0-temp-200.5

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,8 +1,29 @@
+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(fileName) {
-  const extension = getExtensionFromFileName(fileName);
-  return /mp3|wav|ogg/i.test(extension);
+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 getExtensionFromFileName(fileName) {
   if (fileName && fileName.indexOf(".") !== -1) {
@@ -14,4 +35,188 @@ 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,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 { isAudioFile, getExtensionFromFileName, isVideoFile, isPdfFile, isDocsFile, isSheetFile, isPresentationFile, isEmailFile, isImageFile, getAttachmentIconDetails } 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);
@@ -43,6 +44,8 @@ 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() {
@@ -91,9 +94,11 @@ 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
+      viewURL: selectedAttachmentViewUrl,
+      previewUrl: selectedAttachmentPreviewUrl
     }).then(fileSourceValidation => {
       const {
         isViewURLValid,
@@ -250,6 +255,33 @@ 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;
 
@@ -262,7 +294,9 @@ export default class AttachmentViewer extends Component {
     } = this.state;
     const {
       maintainZoom,
-      dataId
+      dataId,
+      i18nKeys,
+      renderUnSupportedElement
     } = this.props;
 
     const getImgStyle = i => {
@@ -299,17 +333,24 @@ export default class AttachmentViewer extends Component {
         children,
         dataId = 'attachViewer',
         customClass = {},
-        customProps = {}
+        customProps = {},
+        previewurl,
+        type
       } = data;
       const {
         audioProps = {},
-        imageProps = {}
+        imageProps = {},
+        videoProps = {},
+        iframeProps = {}
       } = 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}`,
@@ -320,32 +361,50 @@ 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, 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", {
         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}`
+      })) : isImageFile(extension) ? /*#__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(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
+      }))))));
     });
   }
 
@@ -371,7 +430,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;
@@ -586,16 +645,14 @@ 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 : ''}`,
+          className: `${style.imgItem} ${index === selectedIndex ? style.selected : ''} ${isImageFile(name) || thumbnail ? '' : 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, {
+        }, isImageFile(name) || thumbnail ? /*#__PURE__*/React.createElement(AttachmentImage, {
           src: thumbnail || viewUrl,
           size: "small",
           alt: name,
@@ -605,7 +662,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,54 @@
     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,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,7 @@ 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 } from "./Attachment";
+import { isAudioFile, isDocsFile, isEmailFile, isPdfFile, isPresentationFile, isSheetFile, isVideoFile } from "./Attachment";
 export class Zoom {
   constructor() {
     const matrix = [1, 0, 0, 1, 0, 0]; // current view transform
@@ -120,6 +120,16 @@ 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);
@@ -134,11 +144,20 @@ export function checkAudioUrlValidity(url) {
   });
 }
 ;
+export function isValidDocument(url) {
+  if (!url) {
+    return false;
+  }
+
+  return true;
+}
 export function checkFileSourcesValidation(_ref) {
   let {
     fileName,
-    viewURL
+    viewURL,
+    previewUrl
   } = _ref;
+  const documentTypes = isDocsFile(fileName) || isSheetFile(fileName) || isPresentationFile(fileName) || isPdfFile(fileName) || isEmailFile(fileName);
 
   if (isAudioFile(fileName)) {
     const audioValidityPromise = checkAudioUrlValidity(viewURL);
@@ -146,6 +165,18 @@ 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 => ({
@@ -153,4 +184,7 @@ export function checkFileSourcesValidation(_ref) {
       canZoom: isURLValid
     }));
   }
+}
+export function getFrameOrigin() {
+  return new URL(window.location.href).origin;
 }

package/es/Onboarding/Onboarding.js

@@ -28,7 +28,7 @@ import useOnboarding from "./hooks/useOnboarding";
 import { DUMMY_OBJECT } from "../utils/General";
 /** style **/
 
-import defaultStyle from "./css/CardOnboarding.module.css";
+import defaultStyle from "./css/Onboarding.module.css";
 
 const Onboarding = _ref => {
   let {

package/es/VideoLookup/VideoLookup.js

@@ -11,7 +11,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 /**** Styles ****/
 
-import defaultStyle from "./css/VideoLookupStyles.module.css";
+import defaultStyle from "./css/VideoLookup.module.css";
 export default function VideoLookup(props) {
   const {
     isOpened,

package/es/form/fields/Fields.module.css

@@ -218,7 +218,3 @@ position: relative;
 [dir=rtl] .rightPlaceholder{
   left:var(--zd_size15) 
 }
-
-.lineClampPickListItem{
-  --line-clamp: var(--picklist-field-line-clamp,3);
-}

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -165,8 +165,7 @@ export default class TagsMultiSelect extends React.Component {
     const {
       TextBoxIconProps = {},
       TagWrapperProps = {},
-      TagProps = {},
-      ListItemProps = {}
+      TagProps = {}
     } = customProps;
     const isEditable = !isReadOnly;
     return /*#__PURE__*/React.createElement("div", {
@@ -301,8 +300,7 @@ export default class TagsMultiSelect extends React.Component {
           getRef: this.getSelectedItemRef,
           isDisabled: listDisabled,
           customProps: listItemProps,
-          customClass: listItemClass,
-          ...ListItemProps
+          customClass: listItemClass
         }, isNew ? /*#__PURE__*/React.createElement(Container, {
           alignBox: "row",
           align: "vertical"

package/es/form/fields/TagsMultiSelect/props/propTypes.js

@@ -52,8 +52,7 @@ export const propTypes = {
   customProps: PropTypes.shape({
     TextBoxIconProps: PropTypes.object,
     TagWrapperProps: PropTypes.object,
-    TagProps: PropTypes.object,
-    ListItemProps: PropTypes.object
+    TagProps: PropTypes.object
   }),
   isFocus: PropTypes.bool
 };