@zohodesk/dot 1.0.0-temp-213 → 1.0.0-temp-214

package/README.md

@@ -2,9 +2,17 @@
 
 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.
+- **Lookup** - Added container width and containerClass support.
+- **RadioField** - Fixed spacing between label and field
 
 # 1.7.17
 

package/assets/Appearance/dark/mode/Dot_DarkMode.module.css

@@ -221,7 +221,7 @@
 	--zdt_gridstencils_default_border: hsla(218, 23.08%, calc(22.94% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_gridstencils_after_bg: hsla(217, 23.23%, calc(19.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_gridstencils_listbar_bg: hsla(217, 23.23%, calc(19.41% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_gridstencils_listbar_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0, #414961 20%, #414961 40%, #383f55 100%);
+	--zdt_gridstencils_listbar_gradient_bg: linear-gradient(to left, #383f55 0, #414961 20%, #414961 40%, #383f55 100%);
 	
 	/* icons */
 	--zdt_icons_default: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/mode/Dot_LightMode.module.css

@@ -221,7 +221,7 @@
 	--zdt_gridstencils_default_border: hsla(0, 0.00%, calc(94.51% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_gridstencils_after_bg: hsla(0, 0.00%, calc(92.16% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_gridstencils_listbar_bg: hsla(210, 12.50%, calc(96.86% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_gridstencils_listbar_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, var(--zd_smoke78) 0, #edeef1 20%, var(--zd_smoke78) 40%, var(--zd_smoke78) 100%);
+	--zdt_gridstencils_listbar_gradient_bg: linear-gradient(to left, var(--zd_smoke78) 0, #edeef1 20%, var(--zd_smoke78) 40%, var(--zd_smoke78) 100%);
 	
 	/* icons */
 	--zdt_icons_default: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css

@@ -221,7 +221,7 @@
 	--zdt_gridstencils_default_border: hsla(0, 2.33%, calc(8.43% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_gridstencils_after_bg: hsla(0, 0.00%, calc(16.86% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_gridstencils_listbar_bg: hsla(0, 0.00%, calc(16.86% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_gridstencils_listbar_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0, #262626 20%, #262626 40%, #212121 100%);
+	--zdt_gridstencils_listbar_gradient_bg: linear-gradient(to left, #212121 0, #262626 20%, #262626 40%, #212121 100%);
 	
 	/* icons */
 	--zdt_icons_default: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

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/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)
   })

package/es/AttachmentViewer/utils.js

@@ -1,4 +1,4 @@
-import { isAudioFile } from "./Attachment";
+import { getExtensionFromFileName } 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,23 +144,98 @@ export function checkAudioUrlValidity(url) {
   });
 }
 ;
+export function isValidDocument(url) {
+  if (!url) {
+    return false;
+  }
+
+  return true;
+}
+export const FILE_EXTENSIONS = {
+  audio: ['mp3', 'wav', 'wma', 'aac', 'm4r', 'm4a', 'flac', 'aiff', 'alac', 'ogg', 'opus', 'amr', 'mid', 'midi'],
+  video: ['mp4', 'mkv', 'mov', 'mpeg', 'mpg', 'flv', 'wmv', 'avi', 'webm', 'ogv', 'm4v', '3gp', '3g2'],
+  document: ['doc', 'docx', 'docm', 'dot', 'dotx', 'dotm', 'odt', 'rtf', 'txt', 'md', 'pages', 'xls', 'xlsx', 'xlsm', 'xlsb', 'csv', 'tsv', 'ods', 'sxc', 'numbers', 'ppt', 'pptx', 'pps', 'ppsx', 'pot', 'potx', 'odp', 'sxi', 'key', 'pdf', 'xml', 'json', 'yaml', 'yml', 'log', 'eml', 'msg'],
+  image: ['jpeg', 'jpg', 'png', 'apng', 'gif', 'bmp', 'dib', 'tiff', 'tif', 'ico', 'svg', 'webp', 'heic', 'heif', 'jfif', 'pjpeg', 'pjp', 'avif']
+};
+export const SUPPORTED_FILE_EXTENSIONS = {
+  image: ['jpeg', 'jpg', 'png', 'apng', 'gif', 'bmp', 'tiff', 'tif', 'ico', 'svg', 'heic', 'webp'],
+  doc: ['txt'],
+  pdf: ['pdf'],
+  html: ['html', 'htm', 'xhtml'],
+  ppt: ['ppt', 'pps', 'odp', 'sxi', 'pptx', 'ppsx', 'pot', 'potx', 'key'],
+  zip: ['rar', 'jar', 'zip'],
+  word: ['doc', 'docx', 'sxw', 'odt', 'docm', 'dot', 'dotm', 'dotx', 'rtf', 'pages'],
+  xml: ['xml'],
+  sheet: ['xls', 'xlsx', 'xlsm', 'xlsb', 'sxc', 'ods', 'csv', 'tsv', 'numbers'],
+  audio: ['mp3', 'wav', 'wma', 'aac', 'm4r', 'ogg', 'opus'],
+  video: ['mp4', 'mkv', 'mov', 'mpeg', 'flv', 'wmv', 'avi', 'webm', 'ogv'],
+  mail: ['eml', 'msg'],
+  linux: ['sh', 'bin'],
+  css: ['css'],
+  exe: ['exe'],
+  event: ['ics']
+};
 export function checkFileSourcesValidation(_ref) {
   let {
     fileName,
-    viewURL
+    viewURL,
+    previewUrl,
+    allowedPreviewExtensionsData
   } = _ref;
+  const extension = (getExtensionFromFileName(fileName) || '').toLowerCase();
 
-  if (isAudioFile(fileName)) {
-    const audioValidityPromise = checkAudioUrlValidity(viewURL);
-    return audioValidityPromise.then(isURLValid => ({
-      isViewURLValid: isURLValid,
+  if (!extension) {
+    return Promise.resolve({
+      isViewURLValid: false,
       canZoom: false
-    }));
-  } else {
-    const imageValidityPromise = checkImageValidity(viewURL);
-    return imageValidityPromise.then(isURLValid => ({
-      isViewURLValid: isURLValid,
-      canZoom: isURLValid
-    }));
+    });
+  }
+
+  const extensionSource = allowedPreviewExtensionsData || FILE_EXTENSIONS;
+
+  const fileExtensionValidation = type => {
+    const list = extensionSource[type];
+    if (!Array.isArray(list)) return false;
+    return list.map(e => e.toLowerCase()).includes(extension);
+  };
+
+  if (fileExtensionValidation('audio')) {
+    return checkAudioUrlValidity(viewURL).then(isURLValid => {
+      return {
+        isViewURLValid: isURLValid,
+        canZoom: false
+      };
+    });
   }
+
+  if (fileExtensionValidation('video')) {
+    return checkVideoUrlValidity(viewURL).then(isURLValid => {
+      return {
+        isViewURLValid: isURLValid,
+        canZoom: false
+      };
+    });
+  }
+
+  if (fileExtensionValidation('document')) {
+    const isValid = isValidDocument(previewUrl, fileName);
+    return Promise.resolve({
+      isViewURLValid: isValid,
+      canZoom: false
+    });
+  }
+
+  if (fileExtensionValidation('image')) {
+    return checkImageValidity(viewURL).then(isURLValid => {
+      return {
+        isViewURLValid: isURLValid,
+        canZoom: isURLValid
+      };
+    });
+  }
+
+  return Promise.resolve({
+    isViewURLValid: false,
+    canZoom: false
+  });
 }