@zohodesk/dot 1.0.0-temp-197.6 → 1.0.0-temp-187.1

package/README.md

@@ -2,6 +2,22 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.6.1
+
+- **Image (v0&v1)** 
+ - `onLoad`, `onError` prop supported.
+
+- **AttachmentViewer (v0&v1)** 
+  - Customization options added - `children` `thumbnail`, `dataId`, `customProps` and `customClass`.
+  - Added validation for `Open in newtab` and `zoom` menu option.
+  - image `alt` changed to dynamic name of image given by user instead of static `Preview` text;
+
+- **AttachmentImage (v0&v1)** 
+  - `checkImageValidity` `checkAudioUrlValidity` and `checkFileSourcesValidation` utils added.
+  - `className` changed to `customClass`, customClass contain `customImageClass` and `customChildrenClass`
+  -  `children`, `onLoad`, `onError` prop supported
+
+  
 # 1.6.0
 - **TextEditor (v0&v1)**
   - `isDisabled` prop added and default value is `false`.

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

@@ -534,6 +534,7 @@
 	--zdt_attachmentviewer_selected_box_shadow: rgba(0, 0, 0, 0.34);
 	--zdt_attachmentviewer_loader_border: hsla(223, 14.29%, calc(19.22% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_attachmentviewer_loader_border_top: hsla(0, 0.00%, calc(95.29% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_alt_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* separator */
 	--zdt_separator_default_text: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

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

@@ -534,6 +534,7 @@
 	--zdt_attachmentviewer_selected_box_shadow: rgba(0, 0, 0, 0.34);
 	--zdt_attachmentviewer_loader_border: hsla(223, 14.29%, calc(19.22% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_attachmentviewer_loader_border_top: hsla(0, 0.00%, calc(95.29% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_alt_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* separator */
 	--zdt_separator_default_text: hsla(0, 0.00%, calc(79.22% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

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

@@ -534,6 +534,7 @@
 	--zdt_attachmentviewer_selected_box_shadow: rgba(0, 0, 0, 0.34);
 	--zdt_attachmentviewer_loader_border: hsla(223, 14.29%, calc(19.22% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_attachmentviewer_loader_border_top: hsla(0, 0.00%, calc(95.29% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_attachmentviewer_alt_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* separator */
 	--zdt_separator_default_text: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/es/ActionButton/ActionButton.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import Popup from '@zohodesk/components/lib/Popup/Popup';
 import { Icon } from '@zohodesk/icons';
 import Button from '@zohodesk/components/lib/Button/Button';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import ResponsiveDropBox from '@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox';
 import CssProvider from '@zohodesk/components/lib/Provider/CssProvider';
-import style from './ActionButton.module.css';
+import style from "./ActionButton.module.css";
 import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
 export class ActionButton extends React.Component {
   constructor(props) {

package/es/ActionButton/__tests__/ActionButton.spec.js

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

package/es/AlphabeticList/AlphabeticList.js

@@ -1,11 +1,11 @@
 /*** Libraries ***/
 import React from 'react';
-import { AlphabeticList_defaultProps, AlphabeticListItem_defaultProps } from './props/defaultProps';
-import { AlphabeticList_propTypes, AlphabeticListItem_propTypes, AlphabeticCharacters, NumberList, AlphabeticCharactersWithHash } from './props/propTypes';
+import { AlphabeticList_defaultProps, AlphabeticListItem_defaultProps } from "./props/defaultProps";
+import { AlphabeticList_propTypes, AlphabeticListItem_propTypes, AlphabeticCharacters, NumberList, AlphabeticCharactersWithHash } from "./props/propTypes";
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 /*** CSS ***/
 
-import style from './AlphabeticList.module.css';
+import style from "./AlphabeticList.module.css";
 export default class AlphabeticList extends React.PureComponent {
   constructor(props) {
     super(props);

package/es/AlphabeticList/__tests__/AlphabeticList.spec.js

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

package/es/Attachment/Attachment.js

@@ -1,10 +1,10 @@
 import React 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 { Container, Box } from '@zohodesk/components/lib/Layout';
-import Link from '../Link/Link';
-import style from './Attachment.module.css';
+import Link from "../Link/Link";
+import style from "./Attachment.module.css";
 export default class Attachment extends React.Component {
   render() {
     let {

package/es/Attachment/__tests__/Attachment.spec.js

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

package/es/AttachmentViewer/AttachmentImage.js

@@ -2,76 +2,112 @@
 
 /** * Libraries ** */
 import React, { Component } from 'react';
-import { AttachmentImage_defaultProps } from './props/defaultProps';
-import { AttachmentImage_propTypes } from './props/propTypes';
-import Image from '../Image/Image';
+import { Container } from '@zohodesk/components/es/Layout';
+import { AttachmentImage_defaultProps } from "./props/defaultProps";
+import { AttachmentImage_propTypes } from "./props/propTypes";
+import { checkImageValidity } from "./utils";
+import Image from "../Image/Image";
 /** * CSS ** */
 
-import style from './AttachmentViewer.module.css';
+import style from "./AttachmentViewer.module.css";
 export default class AttachmentImage extends Component {
   constructor(props) {
     super(props);
-    this.imageEle = /*#__PURE__*/React.createRef();
     this.state = {
-      isLoading: true
+      isLoading: true,
+      isImageValid: false
     };
-    this.imgLoad = this.imgLoad.bind(this);
+    this.handleImageValidation = this.handleImageValidation.bind(this);
+    this.renderImage = this.renderImage.bind(this);
   }
 
-  componentDidMount() {
+  handleImageValidation() {
     const {
-      isImage
+      src
     } = this.props;
-
-    if (isImage) {
-      const image = this.imageEle.current;
-      image.addEventListener('load', this.imgLoad);
-    } else {
+    checkImageValidity(src).then(isValid => {
       this.setState({
-        isLoading: false
+        isLoading: false,
+        isImageValid: isValid
       });
-    }
+    });
   }
 
-  imgLoad() {
-    this.setState({
-      isLoading: false
+  renderImage() {
+    const {
+      src,
+      onClick,
+      alt,
+      id,
+      dataId,
+      isCover,
+      customClass,
+      onLoad,
+      onError
+    } = this.props;
+    const {
+      isImageValid
+    } = this.state;
+    const {
+      customImageClass = ''
+    } = customClass;
+    return /*#__PURE__*/React.createElement(Image, {
+      htmlId: id,
+      dataId: isImageValid ? dataId : `${dataId}_alt`,
+      src: src,
+      onClick: onClick,
+      className: customImageClass,
+      alt: alt,
+      isCover: isCover,
+      onLoad: onLoad,
+      onError: onError
     });
+  }
+
+  componentDidMount() {
+    this.handleImageValidation();
+  }
+
+  componentDidUpdate(prevProps) {
     const {
-      onLoad
+      src
     } = this.props;
-    onLoad && onLoad();
+
+    if (prevProps.src !== src) {
+      this.setState({
+        isLoading: true
+      });
+      this.handleImageValidation();
+    }
   }
 
   render() {
     const {
-      src,
-      onClick,
-      alt,
       dataId,
       id,
-      className,
-      isCover
+      customClass,
+      children
     } = this.props;
     const {
-      isLoading
+      isLoading,
+      isImageValid
     } = this.state;
+    const {
+      customChildrenClass = ''
+    } = customClass;
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading ? /*#__PURE__*/React.createElement("div", {
       className: `${style.spinLoad}`,
       "data-id": `${dataId}_loader`,
       "data-test-id": `${dataId}_loader`
     }, /*#__PURE__*/React.createElement("div", {
       className: style.loader
-    })) : null, /*#__PURE__*/React.createElement(Image, {
+    })) : isImageValid ? this.renderImage() : children ? /*#__PURE__*/React.createElement(Container, {
+      align: "both",
       htmlId: id,
-      eleRef: this.imageEle,
-      dataId: dataId,
-      src: src,
-      onClick: onClick,
-      className: `${isLoading ? style.hide : ''} ${className}`,
-      alt: alt,
-      isCover: isCover
-    }));
+      dataId: `${dataId}_custom`,
+      className: customChildrenClass
+    }, children) : this.renderImage() //alt ui
+    );
   }
 
 }

package/es/AttachmentViewer/AttachmentViewer.js

@@ -1,18 +1,20 @@
 import React, { Component } from 'react';
-import { AttachmentViewer_defaultProps } from './props/defaultProps';
-import { AttachmentViewer_propTypes } from './props/propTypes';
+import { AttachmentViewer_defaultProps } from "./props/defaultProps";
+import { AttachmentViewer_propTypes } from "./props/propTypes";
 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 { getUniqueId } from '@zohodesk/components/lib/Provider/IdProvider';
-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 { shallowDiff } from '../utils/General';
-import style from './AttachmentViewer.module.css';
+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 { shallowDiff } from "../utils/General";
+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);
@@ -25,7 +27,10 @@ export default class AttachmentViewer extends Component {
         index: this.props.previewObj.selectedIndex,
         data: this.props.previewObj ? this.props.previewObj.previewData : [],
         dataList: []
-      })
+      }),
+      canOpenInNewTab: false,
+      canZoom: false,
+      isPreviewAttachmentValid: false
     };
     this.togglePViewList = this.togglePViewList.bind(this);
     this.changeSelectedIndex = this.changeSelectedIndex.bind(this);
@@ -37,12 +42,20 @@ export default class AttachmentViewer extends Component {
     this.getNextId = getUniqueId(this);
     this.getUpdateDataList = this.getUpdateDataList.bind(this);
     this.zoomMaintain = this.zoomMaintain.bind(this);
+    this.handleMenuValidation = this.handleMenuValidation.bind(this);
+  }
+
+  componentDidMount() {
+    this.handleMenuValidation();
   }
 
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps, prevState) {
     let {
       previewObj
     } = this.props;
+    const {
+      selectedIndex
+    } = this.state;
     let indexChanged = previewObj.selectedIndex != prevProps.previewObj.selectedIndex;
 
     if (previewObj.previewData.length != prevProps.previewObj.previewData.length || indexChanged) {
@@ -63,6 +76,35 @@ export default class AttachmentViewer extends Component {
         });
       }
     }
+
+    if (prevState.selectedIndex != selectedIndex) {
+      this.handleMenuValidation();
+    }
+  }
+
+  handleMenuValidation() {
+    const {
+      data,
+      selectedIndex
+    } = this.state;
+    const selectedAttachment = data[selectedIndex] || {};
+    const selectedAttachmentViewUrl = selectedAttachment.viewUrl;
+    const selectedAttachmentDownloadUrl = selectedAttachment.downloadUrl;
+    const selectedAttachmentName = selectedAttachment.name;
+    checkFileSourcesValidation({
+      fileName: selectedAttachmentName,
+      viewURL: selectedAttachmentViewUrl
+    }).then(fileSourceValidation => {
+      const {
+        isViewURLValid,
+        canZoom
+      } = fileSourceValidation;
+      this.setState({
+        isPreviewAttachmentValid: isViewURLValid,
+        canZoom,
+        canOpenInNewTab: isViewURLValid
+      });
+    });
   }
 
   togglePViewList() {
@@ -76,13 +118,11 @@ export default class AttachmentViewer extends Component {
   zoomOut(ele) {
     this.setState({
       isZoomed: false
-    });
-    const img = document.getElementById(`img${ele}`);
-
-    if (img) {
-      img.classList.remove(style.zoomedImg);
-      img.classList.add(style.normalImg);
-    }
+    }); // const img = document.getElementById(`img${ele}`);
+    // if (img) {
+    //   img.classList.remove(style.zoomedImg);
+    //   img.classList.add(style.normalImg);
+    // }
   }
 
   zoomIn(event, ele) {
@@ -113,12 +153,11 @@ export default class AttachmentViewer extends Component {
         top: 0,
         left: 0
       };
-    }
+    } // if (img) {
+    //   img.classList.remove(style.normalImg);
+    //   img.classList.add(style.zoomedImg);
+    // }
 
-    if (img) {
-      img.classList.remove(style.normalImg);
-      img.classList.add(style.zoomedImg);
-    }
 
     if (moveToPosition) {
       imgContainer.scrollLeft = (event.pageX - imgContainerPosition.left - imgUnits.left) * imgRatio.width;
@@ -217,7 +256,9 @@ export default class AttachmentViewer extends Component {
     const {
       dataList,
       selectedIndex,
-      isZoomed
+      isZoomed,
+      canZoom,
+      isPreviewAttachmentValid
     } = this.state;
     const {
       maintainZoom,
@@ -252,7 +293,23 @@ export default class AttachmentViewer extends Component {
     return dataList.length && dataList.map(function () {
       let data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       let i = arguments.length > 1 ? arguments[1] : undefined;
-      const selectedImgUrl = data.viewUrl;
+      const {
+        viewUrl,
+        name,
+        children,
+        dataId = 'attachViewer',
+        customClass = {},
+        customProps = {}
+      } = data;
+      const {
+        audioProps = {},
+        imageProps = {}
+      } = customProps;
+      const {
+        customImageClass = '',
+        customChildrenClass = ''
+      } = customClass;
+      const retainZoom = canZoom && selectedIndex == i && maintainZoom;
       return /*#__PURE__*/React.createElement(Container, {
         className: style.imgBox,
         id: `imgBox${i}`,
@@ -263,27 +320,32 @@ export default class AttachmentViewer extends Component {
       }, /*#__PURE__*/React.createElement(Box, {
         className: style.imgRef,
         id: `imgPreviewRef${i}`
-      }, isAudioFile(data.name) ? selectedIndex == i ? /*#__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`
+        "data-test-id": `${dataId}_videoPreview`,
+        ...audioProps
       }, /*#__PURE__*/React.createElement("source", {
-        src: data.viewUrl,
-        type: `audio/${getExtensionFromFileName(data.name)}`
+        src: viewUrl,
+        type: `audio/${getExtensionFromFileName(name)}`
       })) : null : /*#__PURE__*/React.createElement(AttachmentImage, {
-        className: `${style.img} ${selectedIndex == i && maintainZoom ? isZoomed ? style.zoomedImg : style.normalImg : ''}`,
-        src: selectedImgUrl,
-        onClick: isZoomed ? _this.zoomOut.bind(_this, i) : e => {
-          _this.zoomIn(e, i, true);
+        customClass: {
+          customImageClass: `${style.img} ${style.altText}
+                    ${canZoom || retainZoom ? isZoomed ? `${style.zoomedImg} ${style.zoomOutCursor}` : `${style.normalImg} ${style.zoomInCursor}` : ''} ${customImageClass}`,
+          customChildrenClass
         },
-        alt: "Preview",
-        dataId: "attachViewer",
+        src: viewUrl,
+        onClick: isPreviewAttachmentValid ? isZoomed ? _this.zoomOut.bind(_this, i) : e => {
+          _this.zoomIn(e, i, true);
+        } : undefined,
+        alt: name,
+        dataId: dataId,
         id: `img${i}`,
-        isImage: true,
-        isCover: false
-      })));
+        isCover: false,
+        ...imageProps
+      }, children)));
     });
   }
 
@@ -292,7 +354,9 @@ export default class AttachmentViewer extends Component {
       isPViewListOpen,
       selectedIndex,
       data,
-      isZoomed
+      isZoomed,
+      canZoom,
+      canOpenInNewTab
     } = this.state;
     const {
       responsiveId,
@@ -354,7 +418,7 @@ export default class AttachmentViewer extends Component {
         align: uptoTablet ? 'bottom' : 'center',
         wrap: "wrap",
         isCover: false
-      }, isZoomed ? /*#__PURE__*/React.createElement("div", {
+      }, canZoom ? isZoomed ? /*#__PURE__*/React.createElement("div", {
         className: uptoTablet ? style.mobileMenu : style.menu,
         onClick: this.zoomOut.bind(this, selectedIndex),
         "data-id": "zoomOut",
@@ -382,7 +446,7 @@ export default class AttachmentViewer extends Component {
         a11y: {
           ariaLabel: i18nKeys.zoomInText
         }
-      })), /*#__PURE__*/React.createElement("div", {
+      })) : null, canOpenInNewTab ? /*#__PURE__*/React.createElement("div", {
         className: uptoTablet ? style.mobileMenu : style.menu
       }, /*#__PURE__*/React.createElement(Link, {
         href: selectedImgUrl,
@@ -398,7 +462,7 @@ export default class AttachmentViewer extends Component {
         a11y: {
           ariaLabel: i18nKeys.newTabText
         }
-      }))), needDownload ? /*#__PURE__*/React.createElement("div", {
+      }))) : null, needDownload ? /*#__PURE__*/React.createElement("div", {
         className: uptoTablet ? style.mobileMenu : style.menu
       }, /*#__PURE__*/React.createElement(Link, {
         href: downloadUrl,
@@ -504,24 +568,39 @@ export default class AttachmentViewer extends Component {
       }, data.map((item, index) => {
         const {
           name,
-          viewUrl
+          viewUrl,
+          children,
+          customClass = {},
+          dataId = 'AttachmentImage',
+          customProps = {}
         } = item;
-        const isAudio = isAudioFile(name);
+        let {
+          thumbnail
+        } = item;
+        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 : ''}  ${isAudio ? style.isAudio : ''}`,
+          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
         }, /*#__PURE__*/React.createElement(AttachmentImage, {
-          src: viewUrl,
+          src: thumbnail || viewUrl,
           size: "small",
           alt: name,
-          className: style.image,
-          isImage: !isAudio,
-          dataId: "AttachmentImage"
-        }));
+          customClass: {
+            customImageClass: `${style.image} ${style.altText} ${customImageClass}`,
+            customChildrenClass: `${style.crsrPointer} ${customChildrenClass}`
+          },
+          dataId: dataId,
+          ...customProps
+        }, children));
       }))))), totalLen !== 1 && /*#__PURE__*/React.createElement(IconButton, {
         dataId: "attachToggle",
         onClick: this.togglePViewList,

package/es/AttachmentViewer/AttachmentViewer.module.css

@@ -161,6 +161,7 @@
     border-color: var(--dot_mirror);
     border-radius: 3px;
     padding: var(--zd_size2) ;
+    cursor: pointer;
 }
 
 .imgItem:hover {
@@ -175,10 +176,15 @@
     margin-right: var(--zd_size12) ;
 }
 
-.image {
+.image, .crsrPointer {
     cursor: pointer;
 }
 
+.altText {
+    color: var(--zdt_attachmentviewer_title_text);
+    font-size: var(--zd_font_size13) ;
+}
+
 .selected, .selected:hover {
     border-color: var(--zdt_attachmentviewer_selected_border);
 }
@@ -273,19 +279,24 @@
 .img {
     transition: var(--zd_transition3) ease-in-out;
     margin: auto ;
+}
+
+.zoomInCursor {
     cursor: zoom-in;
 }
 
+.zoomOutCursor {
+    cursor: zoom-out;
+}
+
 .imgRef .normalImg {
     max-width: inherit ;
     max-height: inherit ;
-    cursor: zoom-in;
 }
 
 .imgRef .zoomedImg {
     max-width: initial ;
     max-height: initial ;
-    cursor: zoom-out;
 }
 
 .previewBox {
@@ -298,6 +309,7 @@
     composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
     height: var(--zd_size18) ;
     width: var(--zd_size18) ;
+    cursor: progress
 }
 
 .loader {