@zohodesk/dot 1.9.2 → 1.9.3

package/es/v1/AttachmentViewer/AttachmentViewer.js

@@ -1,626 +0,0 @@
-import React, { Component } from 'react';
-import { AttachmentViewer_defaultProps } from "./props/defaultProps";
-import { AttachmentViewer_propTypes } from "./props/propTypes";
-import { Container, Box } from '@zohodesk/components/es/v1/Layout';
-import { Icon } from '@zohodesk/icons';
-import Avatar from '@zohodesk/components/es/v1/Avatar/Avatar';
-import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
-import { getUniqueId } from '@zohodesk/components/es/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 "../../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 {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isPViewListOpen: !!(this.props.previewObj && this.props.previewObj.previewData),
-      selectedIndex: this.props.previewObj.selectedIndex,
-      isZoomed: false,
-      data: this.props.previewObj ? this.props.previewObj.previewData : [],
-      dataList: this.getUpdateDataList({
-        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);
-    this.closeAttachmentViewer = this.closeAttachmentViewer.bind(this);
-    this.responsiveFunc = this.responsiveFunc.bind(this);
-    this.zoomIn = this.zoomIn.bind(this);
-    this.zoomOut = this.zoomOut.bind(this);
-    this.imgPreviewView = this.imgPreviewView.bind(this);
-    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, 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) {
-      let objChanged = previewObj.previewData.some((value, index) => {
-        return shallowDiff(value, prevProps.previewObj[index]);
-      });
-
-      if (objChanged || indexChanged) {
-        this.setState({
-          selectedIndex: previewObj.selectedIndex,
-          data: previewObj ? previewObj.previewData : [],
-          dataList: this.getUpdateDataList({
-            index: previewObj.selectedIndex,
-            data: previewObj ? previewObj.previewData : [],
-            dataList: []
-          }),
-          isPViewListOpen: !!(this.props.previewObj && this.props.previewObj.previewData)
-        });
-      }
-    }
-
-    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() {
-    this.setState(prevState => ({
-      isPViewListOpen: !prevState.isPViewListOpen
-    }), () => {
-      this.focusSelectedImg(this.state.selectedIndex);
-    });
-  }
-
-  zoomOut(ele) {
-    this.setState({
-      isZoomed: false
-    }); // const img = document.getElementById(`img${ele}`);
-    // if (img) {
-    //   img.classList.remove(style.zoomedImg);
-    //   img.classList.add(style.normalImg);
-    // }
-  }
-
-  zoomIn(event, ele) {
-    let moveToPosition = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-    this.setState({
-      isZoomed: true
-    });
-    const img = document.getElementById(`img${ele}`);
-    const ratio = 95;
-    let imgContainer, imgUnits, imgSize, imgRatio, imgContainerUnits, imgContainerPosition;
-
-    if (moveToPosition) {
-      imgContainer = document.getElementById(`imgBox${ele}`);
-      imgUnits = img.getBoundingClientRect();
-      imgSize = {
-        height: img.naturalHeight,
-        width: img.naturalWidth
-      };
-      imgRatio = {
-        height: Math.floor(imgSize.height / imgUnits.height / 100 * ratio),
-        width: Math.floor(imgSize.width / imgUnits.width / 100 * ratio)
-      };
-      imgContainerUnits = imgContainer.getBoundingClientRect();
-      imgContainerPosition = imgContainer ? {
-        top: imgContainerUnits.top,
-        left: imgContainerUnits.left
-      } : {
-        top: 0,
-        left: 0
-      };
-    } // if (img) {
-    //   img.classList.remove(style.normalImg);
-    //   img.classList.add(style.zoomedImg);
-    // }
-
-
-    if (moveToPosition) {
-      imgContainer.scrollLeft = (event.pageX - imgContainerPosition.left - imgUnits.left) * imgRatio.width;
-      imgContainer.scrollTop = (event.pageY - imgContainerPosition.top - imgUnits.top) * imgRatio.height;
-    }
-  }
-
-  zoomMaintain(selectedIndex) {
-    let {
-      isZoomed
-    } = this.state;
-    isZoomed ? this.zoomIn({}, selectedIndex) : this.zoomOut(selectedIndex);
-  }
-
-  getUpdateDataList(_ref) {
-    let {
-      index,
-      data,
-      dataList
-    } = _ref;
-    data = data || this.state.data;
-    dataList = dataList || this.state.dataList;
-    const finalDataList = [...dataList];
-
-    if (index >= finalDataList.length) {
-      for (let i = dataList.length; i <= index; i++) {
-        finalDataList.push(data.slice(i)[0]);
-      }
-    } else if (index + 1 === finalDataList.length && index + 1 < data.length) {
-      finalDataList.push(data.slice(index + 1)[0]);
-    }
-
-    return finalDataList;
-  }
-
-  updateDataList(index) {
-    this.setState({
-      dataList: this.getUpdateDataList({
-        index
-      })
-    });
-  }
-
-  changeSelectedIndex(index) {
-    const {
-      data,
-      selectedIndex
-    } = this.state;
-    const {
-      maintainZoom
-    } = this.props;
-    maintainZoom ? this.zoomMaintain(index) : this.zoomOut(selectedIndex);
-
-    if (index <= data.length - 1) {
-      this.updateDataList(index);
-    }
-
-    this.setState({
-      selectedIndex: index
-    }, () => {
-      this.focusSelectedImg(index);
-    });
-  }
-
-  focusSelectedImg(index) {
-    const ele = this[`img_${index}`];
-
-    if (ele) {
-      const cont = this.imgListCont;
-      cont.scrollLeft = ele.offsetLeft;
-    }
-  }
-
-  closeAttachmentViewer() {
-    this.setState({
-      isPViewListOpen: false,
-      isZoomed: false
-    });
-    this.props.hideAttachmentViewer();
-  }
-
-  responsiveFunc(_ref2) {
-    let {
-      mediaQueryOR
-    } = _ref2;
-    return {
-      uptoTablet: mediaQueryOR([{
-        maxWidth: 768
-      }])
-    };
-  }
-
-  imgPreviewView() {
-    var _this = this;
-
-    const {
-      dataList,
-      selectedIndex,
-      isZoomed,
-      canZoom,
-      isPreviewAttachmentValid
-    } = this.state;
-    const {
-      maintainZoom,
-      dataId
-    } = this.props;
-
-    const getImgStyle = i => {
-      let position;
-
-      if (selectedIndex < i) {
-        position = (i - selectedIndex) * 100;
-        return {
-          transform: `translateX(${parseInt(position)}%)`,
-          opacity: '0'
-        };
-      }
-
-      if (i === selectedIndex) {
-        return {
-          transform: 'translateX(0%)',
-          opacity: '1'
-        };
-      }
-
-      position = (selectedIndex - i) * 100 * -1;
-      return {
-        transform: `translateX(${parseInt(position)}%)`,
-        opacity: '0'
-      };
-    };
-
-    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 {
-        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}`,
-        key: i,
-        alignBox: "row",
-        align: "both",
-        style: getImgStyle(i)
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: style.imgRef,
-        id: `imgPreviewRef${i}`
-      }, isAudioFile(name) ? selectedIndex == i ? /*#__PURE__*/React.createElement("video", {
-        autoPlay: true,
-        controls: true,
-        className: style.zoomIn,
-        "data-id": `${dataId}_videoPreview`,
-        "data-test-id": `${dataId}_videoPreview`,
-        ...audioProps
-      }, /*#__PURE__*/React.createElement("source", {
-        src: viewUrl,
-        type: `audio/${getExtensionFromFileName(name)}`
-      })) : null : /*#__PURE__*/React.createElement(AttachmentImage, {
-        customClass: {
-          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,
-        alt: name,
-        dataId: dataId,
-        id: `img${i}`,
-        isCover: false,
-        ...imageProps
-      }, children)));
-    });
-  }
-
-  render() {
-    const {
-      isPViewListOpen,
-      selectedIndex,
-      data,
-      isZoomed,
-      canZoom,
-      canOpenInNewTab
-    } = this.state;
-    const {
-      responsiveId,
-      needDownload,
-      i18nKeys,
-      isActive,
-      dataId
-    } = this.props;
-    const totalLen = data.length;
-    const selectedAttachment = data[selectedIndex] || {};
-    const selectedImgUrl = selectedAttachment.viewUrl;
-    const downloadUrl = selectedAttachment.downloadUrl;
-    let authorHref;
-    let authorName;
-    const {
-      author
-    } = data[selectedIndex] ? data[selectedIndex] : {};
-
-    if (author) {
-      authorHref = author.href;
-      authorName = author.name;
-    }
-
-    const ariaId = this.getNextId();
-    return /*#__PURE__*/React.createElement(FreezeLayer, {
-      isActive: isActive && totalLen >= 1,
-      palette: "dark",
-      animationName: "expand"
-    }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      responsiveId: responsiveId,
-      query: this.responsiveFunc
-    }, _ref3 => {
-      let {
-        uptoTablet
-      } = _ref3;
-      return /*#__PURE__*/React.createElement(Container, {
-        scroll: "none",
-        "data-scroll-palette": "dark"
-      }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Container, {
-        alignBox: "row",
-        className: style.header,
-        align: "between",
-        tabindex: "0"
-      }, /*#__PURE__*/React.createElement(Box, {
-        shrink: true,
-        className: style.title,
-        "data-title": selectedAttachment.name,
-        dataId: "attachName",
-        id: ariaId
-      }, selectedAttachment.name), /*#__PURE__*/React.createElement(Box, {
-        flexible: true,
-        className: style.count,
-        dataId: "attachCountContainer"
-      }, selectedIndex + 1, "/", totalLen), /*#__PURE__*/React.createElement(Box, {
-        className: uptoTablet ? style.mbleMenuBar : style.menuBar
-      }, /*#__PURE__*/React.createElement(Container, {
-        isInline: true,
-        alignBox: uptoTablet ? 'column-reverse' : 'row',
-        align: uptoTablet ? 'bottom' : 'center',
-        wrap: "wrap",
-        isCover: false
-      }, canZoom ? isZoomed ? /*#__PURE__*/React.createElement("div", {
-        className: uptoTablet ? style.mobileMenu : style.menu,
-        onClick: this.zoomOut.bind(this, selectedIndex),
-        "data-id": "zoomOut",
-        "data-test-id": "zoomOut",
-        "data-title": i18nKeys.zoomOutText
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        iconName: "ZD-GN-zoomOut",
-        className: style.menuIcon,
-        iconSize: "16",
-        hoverType: "border",
-        a11y: {
-          ariaLabel: i18nKeys.zoomOutText
-        }
-      })) : /*#__PURE__*/React.createElement("div", {
-        className: uptoTablet ? style.mobileMenu : style.menu,
-        onClick: e => this.zoomIn(e, selectedIndex),
-        "data-id": "zoomIn",
-        "data-test-id": "zoomIn",
-        "data-title": i18nKeys.zoomInText
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        iconName: "ZD-GN-zoomIn",
-        className: style.menuIcon,
-        iconSize: "16",
-        hoverType: "border",
-        a11y: {
-          ariaLabel: i18nKeys.zoomInText
-        }
-      })) : null, canOpenInNewTab ? /*#__PURE__*/React.createElement("div", {
-        className: uptoTablet ? style.mobileMenu : style.menu
-      }, /*#__PURE__*/React.createElement(Link, {
-        href: selectedImgUrl,
-        target: "_blank",
-        dataId: "newTabAttach",
-        title: i18nKeys.newTabText
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        iconName: "ZD-GN-newLink",
-        className: style.menuIcon,
-        iconSize: "16",
-        hoverType: "border",
-        needButtonTag: false,
-        a11y: {
-          ariaLabel: i18nKeys.newTabText
-        }
-      }))) : null, needDownload ? /*#__PURE__*/React.createElement("div", {
-        className: uptoTablet ? style.mobileMenu : style.menu
-      }, /*#__PURE__*/React.createElement(Link, {
-        href: downloadUrl,
-        target: "_parent",
-        hasReload: true,
-        download: true,
-        title: i18nKeys.downloadText,
-        dataId: `${dataId}_downloadAttach`
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        iconName: "ZD-GN-download",
-        className: style.menuIcon,
-        iconSize: "16",
-        hoverType: "border",
-        needButtonTag: false,
-        a11y: {
-          ariaLabel: i18nKeys.downloadText
-        }
-      }))) : null, /*#__PURE__*/React.createElement("div", {
-        className: uptoTablet ? style.mobileMenu : style.menu,
-        onClick: this.closeAttachmentViewer,
-        "data-id": "closeAttach",
-        "data-test-id": "closeAttach",
-        "data-title": i18nKeys.closeText
-      }, /*#__PURE__*/React.createElement(IconButton, {
-        iconName: "ZD-cross",
-        iconSize: "15",
-        hoverType: "border",
-        className: style.menuIcon,
-        a11y: {
-          ariaLabel: i18nKeys.closeText
-        },
-        title: i18nKeys.closeText
-      })))))), /*#__PURE__*/React.createElement(Box, {
-        flexible: true,
-        role: "toolbar",
-        tabindex: "0"
-      }, /*#__PURE__*/React.createElement(Container, {
-        alignBox: "row"
-      }, /*#__PURE__*/React.createElement(Box, {
-        className: `${style.arrowBox}  ${uptoTablet ? style.mbleArrowBox : style.nrmlArrowBox} ${selectedIndex === 0 ? style.hidden : ''}`,
-        onClick: this.changeSelectedIndex.bind(this, selectedIndex - 1),
-        "data-title": i18nKeys.previousText,
-        "data-title-position": "left"
-      }, /*#__PURE__*/React.createElement("button", {
-        className: style.btn,
-        "aria-label": i18nKeys.previousText
-      }, /*#__PURE__*/React.createElement(Icon, {
-        name: "ZD-arrowLeft3",
-        iconClass: style.arrow,
-        dataId: "leftAttachNav",
-        isBold: true
-      }))), /*#__PURE__*/React.createElement(Box, {
-        className: style.previewBox,
-        tabindex: "0",
-        "aria-describedby": ariaId,
-        isShrink: false,
-        eleRef: this.setImgBoxRef,
-        scroll: "both",
-        flexible: true
-      }, this.imgPreviewView()), /*#__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,
-        "data-title-position": "right"
-      }, /*#__PURE__*/React.createElement("button", {
-        className: style.btn,
-        "aria-label": i18nKeys.nextText
-      }, /*#__PURE__*/React.createElement(Icon, {
-        name: "ZD-arrowRight3",
-        iconClass: style.arrow,
-        dataId: "rightAttachNav",
-        isBold: true
-      }))))), /*#__PURE__*/React.createElement(Box, {
-        className: `${style.footer} ${isPViewListOpen && totalLen !== 1 ? style.footerHeight : style.footerHide} `,
-        dataId: `${dataId}_attachPreviewFooter`
-      }, /*#__PURE__*/React.createElement(Container, {
-        align: "vertical",
-        alignBox: "row",
-        className: style.footerHeight
-      }, author && /*#__PURE__*/React.createElement(Box, {
-        className: style.author,
-        dataId: `${dataId}_authorName`
-      }, /*#__PURE__*/React.createElement(Container, {
-        alignBox: "row",
-        align: "both"
-      }, /*#__PURE__*/React.createElement(Avatar, {
-        name: authorName,
-        size: "xmedium",
-        src: authorHref,
-        palette: "info"
-      }), /*#__PURE__*/React.createElement(Box, {
-        flexible: true,
-        className: style.authorName,
-        "data-title": authorName
-      }, authorName))), /*#__PURE__*/React.createElement(Box, {
-        flexible: true
-      }, /*#__PURE__*/React.createElement(Container, {
-        align: "vertical",
-        alignBox: "row",
-        scroll: "horizontal",
-        eleRef: el => this.imgListCont = el,
-        className: style.listContainer
-      }, data.map((item, index) => {
-        const {
-          name,
-          viewUrl,
-          children,
-          customClass = {},
-          dataId = 'AttachmentImage',
-          customProps = {}
-        } = item;
-        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 : ''}`,
-          key: index,
-          onClick: this.changeSelectedIndex.bind(this, index),
-          eleRef: el => this[`img_${index}`] = el,
-          dataId: "attachPreviewList",
-          "data-title": name
-        }, /*#__PURE__*/React.createElement(AttachmentImage, {
-          src: thumbnail || viewUrl,
-          size: "small",
-          alt: name,
-          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,
-        iconName: "ZD-GN-hideTab",
-        iconSize: "14",
-        hoverType: "border",
-        iconClass: `${style.thumpIcon} ${isPViewListOpen ? style.thumpIconActive : ''}`,
-        className: style.button,
-        a11y: {
-          ariaLabel: i18nKeys.hideText
-        },
-        title: isPViewListOpen ? i18nKeys.hideText : i18nKeys.showText
-      }));
-    }));
-  }
-
-}
-AttachmentViewer.propTypes = AttachmentViewer_propTypes;
-AttachmentViewer.defaultProps = AttachmentViewer_defaultProps; // if (__DOCS__) {
-//   AttachmentViewer.docs = {
-//     componentGroup: "Molecule"
-//   };
-// }

package/es/v1/AttachmentViewer/props/defaultProps.js

@@ -1,11 +0,0 @@
-export const AttachmentImage_defaultProps = {
-  dataId: 'AttachmentImage'
-};
-export const AttachmentViewer_defaultProps = {
-  responsiveId: "Helmet",
-  needDownload: true,
-  i18nKeys: {},
-  maintainZoom: false,
-  isActive: false,
-  dataId: 'AttachmentViewer'
-};

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

@@ -1,36 +0,0 @@
-import PropTypes from 'prop-types';
-export const AttachmentImage_propTypes = {
-  alt: PropTypes.string,
-  customClass: PropTypes.shape({
-    customImageClass: PropTypes.string,
-    customChildrenClass: PropTypes.string
-  }),
-  dataId: PropTypes.string,
-  id: PropTypes.string,
-  isCover: PropTypes.bool,
-  onClick: PropTypes.func,
-  onLoad: PropTypes.func,
-  onError: PropTypes.func,
-  src: PropTypes.string,
-  children: PropTypes.node
-};
-export const AttachmentViewer_propTypes = {
-  hideAttachmentViewer: PropTypes.func,
-  i18nKeys: PropTypes.shape({
-    nextText: PropTypes.string,
-    previousText: PropTypes.string,
-    zoomOutText: PropTypes.string,
-    zoomInText: PropTypes.string,
-    newTabText: PropTypes.string,
-    downloadText: PropTypes.string,
-    closeText: PropTypes.string,
-    hideText: PropTypes.string,
-    showText: PropTypes.string
-  }),
-  needDownload: PropTypes.string,
-  previewObj: PropTypes.object,
-  responsiveId: PropTypes.string,
-  maintainZoom: PropTypes.bool,
-  isActive: PropTypes.bool,
-  dataId: PropTypes.string
-};