@zohodesk/dot 1.6.0 → 1.6.1

package/es/v1/AttachmentViewer/AttachmentViewer.js

@@ -11,6 +11,8 @@ import Link from '../Link/Link';
 import IconButton from '../IconButton/IconButton';
 import FreezeLayer from '../FreezeLayer/FreezeLayer';
 import { isAudioFile, getExtensionFromFileName } from '../../AttachmentViewer/Attachment';
+import { checkFileSourcesValidation } from '../../AttachmentViewer/utils';
+import audioThumbNail from '../../../images/audio_thumbnail.png';
 import { shallowDiff } from '../../utils/General';
 import style from '../../AttachmentViewer/AttachmentViewer.module.css';
 export default class AttachmentViewer extends Component {
@@ -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/v1/AttachmentViewer/props/propTypes.js

@@ -1,14 +1,18 @@
 import PropTypes from 'prop-types';
 export const AttachmentImage_propTypes = {
   alt: PropTypes.string,
-  className: PropTypes.string,
+  customClass: PropTypes.shape({
+    customImageClass: PropTypes.string,
+    customChildrenClass: PropTypes.string
+  }),
   dataId: PropTypes.string,
   id: PropTypes.string,
   isCover: PropTypes.bool,
-  isImage: PropTypes.bool,
   onClick: PropTypes.func,
   onLoad: PropTypes.func,
-  src: PropTypes.string
+  onError: PropTypes.func,
+  src: PropTypes.string,
+  children: PropTypes.node
 };
 export const AttachmentViewer_propTypes = {
   hideAttachmentViewer: PropTypes.func,

package/es/v1/Image/Image.js

@@ -13,7 +13,9 @@ export default function Image(props) {
     dataId,
     htmlId,
     eleRef,
-    original
+    original,
+    onLoad,
+    onError
   } = props;
   return /*#__PURE__*/React.createElement("img", {
     src: src,
@@ -25,7 +27,9 @@ export default function Image(props) {
     onClick: onClick,
     id: htmlId,
     ref: eleRef,
-    "data-original": original
+    "data-original": original,
+    onLoad: onLoad,
+    onError: onError
   });
 }
 Image.propTypes = propTypes;

package/es/v1/Image/props/propTypes.js

@@ -9,5 +9,7 @@ export const propTypes = {
   onClick: PropTypes.func,
   original: PropTypes.string,
   src: PropTypes.string.isRequired,
-  title: PropTypes.string
+  title: PropTypes.string,
+  onLoad: PropTypes.func,
+  onError: PropTypes.func
 };

package/lib/AttachmentViewer/AttachmentImage.js

@@ -9,10 +9,14 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _Layout = require("@zohodesk/components/es/Layout");
+
 var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _utils = require("./utils");
+
 var _Image = _interopRequireDefault(require("../Image/Image"));
 
 var _AttachmentViewerModule = _interopRequireDefault(require("./AttachmentViewer.module.css"));
@@ -54,65 +58,99 @@ var AttachmentImage = /*#__PURE__*/function (_Component) {
     _classCallCheck(this, AttachmentImage);
 
     _this = _super.call(this, props);
-    _this.imageEle = /*#__PURE__*/_react["default"].createRef();
     _this.state = {
-      isLoading: true
+      isLoading: true,
+      isImageValid: false
     };
-    _this.imgLoad = _this.imgLoad.bind(_assertThisInitialized(_this));
+    _this.handleImageValidation = _this.handleImageValidation.bind(_assertThisInitialized(_this));
+    _this.renderImage = _this.renderImage.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(AttachmentImage, [{
+    key: "handleImageValidation",
+    value: function handleImageValidation() {
+      var _this2 = this;
+
+      var src = this.props.src;
+      (0, _utils.checkImageValidity)(src).then(function (isValid) {
+        _this2.setState({
+          isLoading: false,
+          isImageValid: isValid
+        });
+      });
+    }
+  }, {
+    key: "renderImage",
+    value: function renderImage() {
+      var _this$props = this.props,
+          src = _this$props.src,
+          onClick = _this$props.onClick,
+          alt = _this$props.alt,
+          id = _this$props.id,
+          dataId = _this$props.dataId,
+          isCover = _this$props.isCover,
+          customClass = _this$props.customClass,
+          onLoad = _this$props.onLoad,
+          onError = _this$props.onError;
+      var isImageValid = this.state.isImageValid;
+      var _customClass$customIm = customClass.customImageClass,
+          customImageClass = _customClass$customIm === void 0 ? '' : _customClass$customIm;
+      return /*#__PURE__*/_react["default"].createElement(_Image["default"], {
+        htmlId: id,
+        dataId: isImageValid ? dataId : "".concat(dataId, "_alt"),
+        src: src,
+        onClick: onClick,
+        className: customImageClass,
+        alt: alt,
+        isCover: isCover,
+        onLoad: onLoad,
+        onError: onError
+      });
+    }
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var isImage = this.props.isImage;
+      this.handleImageValidation();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var src = this.props.src;
 
-      if (isImage) {
-        var image = this.imageEle.current;
-        image.addEventListener('load', this.imgLoad);
-      } else {
+      if (prevProps.src !== src) {
         this.setState({
-          isLoading: false
+          isLoading: true
         });
+        this.handleImageValidation();
       }
     }
-  }, {
-    key: "imgLoad",
-    value: function imgLoad() {
-      this.setState({
-        isLoading: false
-      });
-      var onLoad = this.props.onLoad;
-      onLoad && onLoad();
-    }
   }, {
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-          src = _this$props.src,
-          onClick = _this$props.onClick,
-          alt = _this$props.alt,
-          dataId = _this$props.dataId,
-          id = _this$props.id,
-          className = _this$props.className,
-          isCover = _this$props.isCover;
-      var isLoading = this.state.isLoading;
+      var _this$props2 = this.props,
+          dataId = _this$props2.dataId,
+          id = _this$props2.id,
+          customClass = _this$props2.customClass,
+          children = _this$props2.children;
+      var _this$state = this.state,
+          isLoading = _this$state.isLoading,
+          isImageValid = _this$state.isImageValid;
+      var _customClass$customCh = customClass.customChildrenClass,
+          customChildrenClass = _customClass$customCh === void 0 ? '' : _customClass$customCh;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLoading ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_AttachmentViewerModule["default"].spinLoad),
         "data-id": "".concat(dataId, "_loader"),
         "data-test-id": "".concat(dataId, "_loader")
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: _AttachmentViewerModule["default"].loader
-      })) : null, /*#__PURE__*/_react["default"].createElement(_Image["default"], {
+      })) : isImageValid ? this.renderImage() : children ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        align: "both",
         htmlId: id,
-        eleRef: this.imageEle,
-        dataId: dataId,
-        src: src,
-        onClick: onClick,
-        className: "".concat(isLoading ? _AttachmentViewerModule["default"].hide : '', " ").concat(className),
-        alt: alt,
-        isCover: isCover
-      }));
+        dataId: "".concat(dataId, "_custom"),
+        className: customChildrenClass
+      }, children) : this.renderImage() //alt ui
+      );
     }
   }]);