@zohodesk/dot 1.0.0-temp-212 → 1.0.0-temp-200.7

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,80 @@ 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 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
+  });
 }

package/es/ChannelIcon/ChannelIcon.js

@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
 import Avatar from '@zohodesk/components/lib/Avatar/Avatar';
-import AvatarIcon from '../avatar/AvatarIcon/AvatarIcon';
-import { getChannelMappingObj } from '../utils/ChannelIconMapping';
-import style from './ChannelIcon.module.css';
+import AvatarIcon from "../avatar/AvatarIcon/AvatarIcon";
+import { getChannelMappingObj } from "../utils/ChannelIconMapping";
+import style from "./ChannelIcon.module.css";
 export default class ChannelIcon extends Component {
   constructor(props) {
     super(props);

package/es/ChannelIcon/__tests__/ChannelIcon.spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import ChannelIcon from '../ChannelIcon';
+import ChannelIcon from "../ChannelIcon";
 describe('ChannelIcon', () => {
   test('rendering the defult props', () => {
     const {

package/es/ChannelIcon/props/propTypes.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import { propTypes as AvatarProps } from '@zohodesk/components/es/Avatar/props/propTypes';
-import { propTypes as AvatarIconProps } from '../../avatar/AvatarIcon/props/propTypes';
+import { propTypes as AvatarIconProps } from "../../avatar/AvatarIcon/props/propTypes";
 import { IconProps as IconPropTypes } from '@zohodesk/icons/es/Icon/props/propTypes';
 export const propTypes = {
   action: PropTypes.string,

package/es/DotProvider/DotProvider.js

@@ -1,6 +1,6 @@
 import React, { useRef, useCallback, forwardRef } from "react";
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import useDotProvider from "./hooks/useDotProvider";
 const DotProvider = /*#__PURE__*/forwardRef((props, ref) => {
   const {

package/es/DotProvider/__tests__/DotProvider.spec.js

@@ -1,6 +1,13 @@
 import React from 'react';
-import { render, waitFor } from '@testing-library/react';
-import DotProvider from '../DotProvider'; // snapshot test cases
+import { render, waitFor, cleanup } from '@testing-library/react';
+import { setGlobalId } from '@zohodesk/components/es/Provider/IdProvider';
+import DotProvider from "../DotProvider";
+beforeEach(() => {
+  setGlobalId(0);
+});
+afterEach(() => {
+  cleanup();
+}); // snapshot test cases
 
 describe('DotProvider Snapshot', () => {
   const THEME_APPEARANCE = ['light', 'dark', 'pureDark'];
@@ -12,7 +19,12 @@ describe('DotProvider Snapshot', () => {
       asFragment
     } = render( /*#__PURE__*/React.createElement(DotProvider, null, "This is a DotProvider component")); // wait for the data attributes and styles to be applied
 
-    await waitFor(() => {}); // take the snapshot after the attributes and styles are applied
+    await waitFor(() => {
+      const el = document.body.querySelector('[data-mode]');
+      expect(el?.getAttribute('data-mode')).toBe('light');
+      const el2 = document.body.querySelector('[data-theme]');
+      expect(el2?.getAttribute('data-theme')).toBe('blue');
+    }); // take the snapshot after the attributes and styles are applied
 
     expect(asFragment()).toMatchSnapshot();
   });
@@ -62,30 +74,44 @@ describe('DotProvider Snapshot', () => {
     await waitFor(() => {});
     expect(asFragment()).toMatchSnapshot();
   });
-  THEME_APPEARANCE.map(appearance => {
-    test.each(THEME_COLOR)(`rendering the theme-appearance of ${appearance} along with theme-color of %s`, async theme => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/React.createElement(DotProvider, {
-        themeAppearance: appearance,
-        themeColor: theme
-      }));
-      await waitFor(() => {});
-      expect(asFragment()).toMatchSnapshot();
+  THEME_APPEARANCE.forEach(appearance => {
+    describe(`Theme appearance: ${appearance}`, () => {
+      test.each(THEME_COLOR)(`should render with themeAppearance = ${appearance} and themeColor = %s `, async theme => {
+        const {
+          asFragment
+        } = render( /*#__PURE__*/React.createElement(DotProvider, {
+          themeAppearance: appearance,
+          themeColor: theme
+        }));
+        await waitFor(() => {
+          const el = document.body.querySelector('[data-mode]');
+          expect(el?.getAttribute('data-mode')).toBe(appearance);
+          const el2 = document.body.querySelector('[data-theme]');
+          expect(el2?.getAttribute('data-theme')).toBe(theme);
+        });
+        expect(asFragment()).toMatchSnapshot();
+      });
     });
   });
-  THEME_APPEARANCE.map(appearance => {
-    test.each(THEME_COLOR)(`rendering the custom themeAppearanceAttr and themeColorAttr props with theme-appearance of ${appearance} along with theme-color of %s`, async theme => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/React.createElement(DotProvider, {
-        themeAppearance: appearance,
-        themeColor: theme,
-        themeAppearanceAttr: "data-desk-mode",
-        themeColorAttr: "data-desk-theme"
-      }));
-      await waitFor(() => {});
-      expect(asFragment()).toMatchSnapshot();
+  THEME_APPEARANCE.forEach(appearance => {
+    describe(`Theme appearance: ${appearance}`, () => {
+      test.each(THEME_COLOR)(`should render with themeAppearance = ${appearance} and themeColor = %s with custom attributes`, async theme => {
+        const {
+          asFragment
+        } = render( /*#__PURE__*/React.createElement(DotProvider, {
+          themeAppearance: appearance,
+          themeColor: theme,
+          themeAppearanceAttr: "data-desk-mode",
+          themeColorAttr: "data-desk-theme"
+        }));
+        await waitFor(() => {
+          const el = document.body.querySelector('[data-desk-mode]');
+          expect(el?.getAttribute('data-desk-mode')).toBe(appearance);
+          const el2 = document.body.querySelector('[data-desk-theme]');
+          expect(el2?.getAttribute('data-desk-theme')).toBe(theme);
+        });
+        expect(asFragment()).toMatchSnapshot();
+      });
     });
   });
   test.each(BASE_ZOOM_UNIT)(`rendering the baseZoomUnit props of %s`, async zoom => {