@zohodesk/dot 1.0.0-temp-187.5 → 1.0.0-temp-202

package/es/services/components/Attachment/AttachmentViewerWrapper.js

@@ -0,0 +1,114 @@
+import React, { useRef, useEffect } from 'react';
+import propTypes from './props/propTypes';
+import defaultProps from './props/defaultProps';
+import AttachmentViewer from '@zohodesk/dot/es/AttachmentViewer/AttachmentViewer';
+import { constructAttachmentUrl, getViewURL } from '../../helpers/utils';
+
+function AttachmentViewerWrapper(props) {
+  const {
+    isActive,
+    needDownload,
+    previewObj,
+    orgId,
+    hideAttachmentViewer,
+    i18nKeys
+  } = props;
+  let {
+    previewData = [],
+    selectedIndex
+  } = previewObj || {};
+  const {
+    nextText = 'Next',
+    previousText = 'Previous',
+    zoomOutText = 'Zoom Out',
+    zoomInText = 'Zoom In',
+    newTabText = 'Open in new tab',
+    downloadText = 'Download',
+    closeText = 'Close',
+    hideText = 'Hide',
+    showText = 'Show'
+  } = i18nKeys;
+  const viewerRef = useRef();
+
+  function addListener() {
+    window.addEventListener('keyup', handleKeyUp);
+  }
+
+  function removeListener() {
+    window.removeEventListener('keyup', handleKeyUp);
+  }
+
+  useEffect(() => {
+    if (isActive) {
+      addListener();
+    } else {
+      removeListener();
+    }
+
+    return () => {
+      removeListener();
+    };
+  }, [isActive]);
+
+  function handleKeyUp(e) {
+    if (e.keyCode === 27) {
+      viewerRef.current && viewerRef.current.closeAttachmentViewer();
+    } else if (e.keyCode === 37) {
+      if (viewerRef.current) {
+        const {
+          selectedIndex
+        } = viewerRef.current.state;
+
+        if (selectedIndex !== 0) {
+          viewerRef.current && viewerRef.current.changeSelectedIndex(selectedIndex - 1);
+        }
+      }
+    } else if (e.keyCode === 39) {
+      if (viewerRef.current) {
+        const {
+          selectedIndex
+        } = viewerRef.current.state;
+        const totalLen = previewObj.previewData.length;
+
+        if (selectedIndex !== totalLen - 1) {
+          viewerRef.current && viewerRef.current.changeSelectedIndex(selectedIndex + 1);
+        }
+      }
+    }
+  }
+
+  const data = previewData.length ? previewData.map(item => {
+    item = item.viewUrl ? item : Object.assign({}, item, {
+      viewUrl: getViewURL(item, orgId)
+    });
+    item = Object.assign({}, item, {
+      downloadUrl: constructAttachmentUrl(item.href, orgId)
+    });
+    return item;
+  }) : null;
+  return isActive ? /*#__PURE__*/React.createElement(AttachmentViewer, {
+    needDownload: needDownload,
+    ref: viewerRef,
+    isActive: isActive,
+    hideAttachmentViewer: hideAttachmentViewer,
+    previewObj: {
+      previewData: data,
+      selectedIndex: selectedIndex
+    },
+    i18nKeys: {
+      nextText: nextText,
+      previousText: previousText,
+      zoomOutText: zoomOutText,
+      zoomInText: zoomInText,
+      newTabText: newTabText,
+      downloadText: downloadText,
+      closeText: closeText,
+      hideText: hideText,
+      showText: showText
+    }
+  }) : null;
+}
+
+AttachmentViewerWrapper.propTypes = propTypes;
+AttachmentViewerWrapper.defaultProps = defaultProps;
+export default AttachmentViewerWrapper;

package/es/services/components/Attachment/props/defaultProps.js

@@ -0,0 +1,4 @@
+export default {
+  previewObj: {},
+  i18nKeys: {}
+};

package/es/services/components/Attachment/props/propTypes.js

@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+export default {
+  isActive: PropTypes.bool,
+  needDownload: PropTypes.bool,
+  previewObj: PropTypes.object,
+  orgId: PropTypes.string,
+  hideAttachmentViewer: PropTypes.func,
+  i18nKeys: PropTypes.object
+};

package/es/services/components/ToastNotification/ToastNotification.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import propTypes from './props/propTypes';
+import ToastNotificationWrapper from './ToastNotificationWrapper';
+import { Modal } from '@zohodesk/components';
+import { DeferComponent } from '@zohodesk/perf-components';
+
+const ToastNotification = props => {
+  const {
+    messagesArray,
+    hideMessageAll,
+    hideMessage,
+    notificationTooltipInfo,
+    notificationI18nKeys,
+    a11y_isErrorNotificationAutoClose,
+    a11y_isSuccessNotificationAutoClose,
+    a11y_errorNotificationAutoCloseTime,
+    a11y_successNotifcationAutoCloseTime,
+    a11y_notificationView,
+    headerTitle,
+    showAllText,
+    showLessText,
+    clearAllText
+  } = props;
+  return /*#__PURE__*/React.createElement(DeferComponent, null, /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement(ToastNotificationWrapper, {
+    hideMessageAll: hideMessageAll,
+    hideMessage: hideMessage,
+    messagesArray: messagesArray,
+    notificationTooltipInfo: notificationTooltipInfo,
+    notificationI18nKeys: notificationI18nKeys,
+    a11y_isErrorNotificationAutoClose: a11y_isErrorNotificationAutoClose,
+    a11y_isSuccessNotificationAutoClose: a11y_isSuccessNotificationAutoClose,
+    a11y_errorNotificationAutoCloseTime: a11y_errorNotificationAutoCloseTime,
+    a11y_successNotifcationAutoCloseTime: a11y_successNotifcationAutoCloseTime,
+    a11y_notificationView: a11y_notificationView,
+    headerTitle: headerTitle,
+    showAllText: showAllText,
+    showLessText: showLessText,
+    clearAllText: clearAllText
+  })));
+};
+
+ToastNotification.propTypes = propTypes;
+export default ToastNotification;

package/es/services/components/ToastNotification/ToastNotificationWrapper.js

@@ -0,0 +1,156 @@
+import React, { useEffect, useRef, useState } from 'react';
+import propTypes from './props/propTypes';
+import defaultProps from './props/defaultProps';
+import Animation from '@zohodesk/components/es/Animation/Animation';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Icon } from '@zohodesk/icons';
+import { Button } from '@zohodesk/components';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import { animationStyle } from '@zohodesk/components/es/Animation/utils'; // import GlobalNotification, { GlobalNotificationNew } from '@zohodesk/dot/es/version2/GlobalNotification/GlobalNotification';
+
+import GlobalNotification from '../../../version2/GlobalNotification/GlobalNotification';
+import style from './ToastNotificationWrapper.module.css';
+
+function ToastNotificationWrapper(props) {
+  const {
+    notificationI18nKeys,
+    messagesArray,
+    hideMessage,
+    hideMessageAll,
+    notificationTooltipInfo,
+    a11y_isErrorNotificationAutoClose,
+    a11y_isSuccessNotificationAutoClose,
+    a11y_errorNotificationAutoCloseTime,
+    a11y_successNotifcationAutoCloseTime,
+    a11y_notificationView,
+    headerTitle,
+    showAllText,
+    showLessText,
+    clearAllText
+  } = props;
+  const [notificationView, setnotificationView] = useState(a11y_notificationView);
+  const [needHeader, setNeedHeader] = useState(false);
+  const notificationWholeParent = useRef();
+  const notificationCount = messagesArray.length;
+  const isStackView = notificationView === 'stack';
+  const isListView = notificationView === 'list';
+  const isCollapseExpandEnabled = a11y_isSuccessNotificationAutoClose && a11y_isErrorNotificationAutoClose && isStackView && notificationCount > 1;
+  const errorTypes = ['danger', 'error', 'warning', 'alert'];
+  let notificationWholeParentAnimationStyle = '';
+
+  function toggleNotificationView() {
+    if (notificationView === 'stack') {
+      setnotificationView('list');
+    } else {
+      notificationWholeParentAnimationStyle = style.expanadToCollapseAnimation;
+      const element = notificationWholeParent.current;
+
+      if (element) {
+        element.addEventListener('animationend', removeAnimationClass);
+        element.addEventListener('webkitAnimationEnd', removeAnimationClass);
+        element.addEventListener('mozAnimationEnd', removeAnimationClass);
+      }
+
+      setnotificationView('stack');
+    }
+  }
+
+  function handleNotificationHide(id) {
+    hideMessage(id);
+  }
+
+  function handleNotificationClearAll() {
+    setNeedHeader(false);
+    hideMessageAll();
+  }
+
+  function removeAnimationClass() {
+    notificationWholeParent.current.classList.remove(notificationWholeParentAnimationStyle);
+  }
+
+  useEffect(() => {
+    if (messagesArray.length > 1) {
+      setNeedHeader(true);
+    }
+
+    return () => {
+      const element = notificationWholeParent.current;
+
+      if (element) {
+        element.removeEventListener('animationend', removeAnimationClass);
+        element.removeEventListener('webkitAnimationEnd', removeAnimationClass);
+        element.removeEventListener('mozAnimationEnd', removeAnimationClass);
+      }
+    };
+  }, [messagesArray]);
+  const isHeaderActive = (!a11y_isSuccessNotificationAutoClose || !a11y_isErrorNotificationAutoClose || isListView) && needHeader;
+  const needShowButton = notificationCount > 1 && (!a11y_isSuccessNotificationAutoClose || !a11y_isErrorNotificationAutoClose);
+  return /*#__PURE__*/React.createElement(Container, {
+    align: 'vertical',
+    className: style.wrapper
+  }, /*#__PURE__*/React.createElement(Animation, {
+    name: "slideDown",
+    isActive: isHeaderActive
+  }, /*#__PURE__*/React.createElement(Container, {
+    isCover: false,
+    align: 'vertical',
+    alignBox: 'row',
+    className: style.header
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    className: style.count
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.countText
+  }, headerTitle), /*#__PURE__*/React.createElement("div", null, "(", notificationCount.toString().padStart(2, '0'), ")")), needShowButton ? /*#__PURE__*/React.createElement(Box, {
+    className: style.showAllButton,
+    onClick: toggleNotificationView
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.showAllButtonText
+  }, isStackView ? showAllText : showLessText), /*#__PURE__*/React.createElement(Icon, {
+    name: isStackView ? 'ZD-arrowDownSingle' : 'ZD-arrowupSingle',
+    size: "10"
+  })) : null, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleNotificationClearAll,
+    customClass: {
+      customButton: style.clearButton
+    },
+    palette: 'secondary',
+    size: 'small',
+    text: clearAllText
+  })))), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, {
+    eleRef: notificationWholeParent,
+    alignBox: 'column-reverse',
+    isCover: false,
+    onClick: isCollapseExpandEnabled ? toggleNotificationView : null,
+    className: `${style.parent}  ${isListView ? style.expanded : `${style.collapse}`} ${notificationWholeParentAnimationStyle}`
+  }, messagesArray && messagesArray.length > 0 && messagesArray.map((notificationItem, index) => {
+    const {
+      data,
+      id
+    } = notificationItem;
+    const needAutoClose = errorTypes.includes(data.type) ? a11y_isErrorNotificationAutoClose : a11y_isSuccessNotificationAutoClose;
+    const autoCloseTime = Number(errorTypes.includes(data.type) ? a11y_errorNotificationAutoCloseTime : a11y_successNotifcationAutoCloseTime) * 1000; // const modifiedMessage = data.message ? HTMLPurifier.sanitize(data.message) : '';
+
+    const notificationGropupDetails = { ...data,
+      i18nKeys: notificationI18nKeys
+    };
+    return /*#__PURE__*/React.createElement(CSSTransition, {
+      key: id,
+      classNames: animationStyle['slideDown'],
+      timeout: 300
+    }, /*#__PURE__*/React.createElement(GlobalNotification, { ...notificationGropupDetails,
+      id: id,
+      shadowCount: notificationCount,
+      hideMessage: handleNotificationHide,
+      needShadow: isStackView,
+      needAutoClose: needAutoClose,
+      hideTime: autoCloseTime
+    }));
+  })), isCollapseExpandEnabled ? /*#__PURE__*/React.createElement("div", {
+    className: style.notificationToolTip
+  }, notificationTooltipInfo) : null));
+}
+
+ToastNotificationWrapper.propTypes = propTypes;
+ToastNotificationWrapper.defaultProps = defaultProps;
+export default ToastNotificationWrapper;

package/es/services/components/ToastNotification/ToastNotificationWrapper.module.css

@@ -0,0 +1,193 @@
+.wrapper {
+    position: absolute;
+    top: 0 ;
+    overflow-y: auto;
+    pointer-events: none;
+    z-index: 1000;
+    scrollbar-width: none;
+}
+
+.wrapper::-webkit-scrollbar {
+    display: none;
+}
+
+
+.header {
+    height: var(--zd_size29) ;
+    width: var(--zd_size420) ;
+    z-index: 3;
+    flex-shrink: 0;
+    position: sticky;
+    top: 0 ;
+    gap: var(--zd_size5) ;
+    pointer-events: auto;
+    background-color: var(--zdt_globalnotification_wrapper_bg);
+    padding: 0 var(--zd_size20) ;
+    box-shadow: 0px 1px 4px 0px var(--zdt_globalNotification_header_shadow);
+    margin-bottom: var(--zd_size2) ;
+    border-top: 1px solid var(--zdt_globalNotification_header_barder);
+}
+
+.showAllButton {
+    color: var(--zdt_globalnotification_wrappar_showall_text);
+    font-size: var(--zd_font_size12) ;
+    transition: background-color var(--zd_transition2);
+    cursor: pointer;
+    padding: var(--zd_size4) var(--zd_size8) ;
+    border-radius: 4px;
+}
+
+.showAllButton:hover {
+    background-color: var(--zdt_globalnotification_wrappar_showall_bg);
+}
+
+[dir=ltr] .showAllButtonText {
+    margin-right: var(--zd_size5) ;
+}
+
+[dir=rtl] .showAllButtonText {
+    margin-left: var(--zd_size5) ;
+}
+
+.clearButton {
+    color: var(--zdt_globalnotification_wrappar_header_text);
+}
+
+.count {
+    composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
+    font-family: var(--zd_semibold);
+    font-size: var(--zd_font_size12) ;
+    color: var(--zdt_globalnotification_wrappar_header_text);
+}
+
+.countText {
+    composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+[dir=ltr] .countText {
+    margin-right: var(--zd_size5) ;
+}
+
+[dir=rtl] .countText {
+    margin-left: var(--zd_size5) ;
+}
+
+.parent {
+    z-index: 2;
+    position: relative;
+    gap: var(--zd_size4) ;
+    align-items: center;
+    width: 100% ;
+}
+
+/* .settingsIcon {
+    color: gray;
+    display: none;
+  }
+  .settingsIcon:hover{
+    color: initial;
+  } */
+
+.notificationToolTip {
+    display: none;
+    position: relative;
+    white-space: initial;
+    top: var(--zd_size70) ;
+    color: var(--zdt_tooltip_default_text);
+    font-size: var(--zd_font_size13) ;
+    line-height: 1.5;
+    font-family: var(--zd_semibold);
+    word-break: break-word;
+    max-width: var(--zd_size420) ;
+    min-height: var(--zd_size24) ;
+    overflow: hidden;
+    z-index: 9999999;
+    pointer-events: none;
+    composes: fadeIn modeForward from '~@zohodesk/components/lib/common/animation.module.css';
+    background-color: var(--zdt_tooltip_default_bg);
+    padding: var(--zd_size3) var(--zd_size13) ;
+    box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
+    border-radius: 4px;
+}
+
+[dir=ltr] .notificationToolTip {
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
+    animation-duration: var(--zd_transition7);
+}
+
+[dir=rtl] .notificationToolTip {
+    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
+    animation-duration: var(--zd_transition7);
+}
+
+
+.expanded {
+    composes: flyDown modeForward from '~@zohodesk/components/lib/common/animation.module.css';
+}
+
+
+[dir=ltr] .expanded {
+    animation-duration: var(--zd_transition3);
+}
+
+
+[dir=rtl] .expanded {
+    animation-duration: var(--zd_transition3);
+}
+
+.collapse {
+    composes: flyUp modeForward from '~@zohodesk/components/lib/common/animation.module.css';
+}
+
+[dir=ltr] .collapse {
+    animation-duration: var(--zd_transition3);
+}
+
+[dir=rtl] .collapse {
+    animation-duration: var(--zd_transition3);
+}
+
+@keyframes positionCollapseChange {
+    0% {
+        position: relative;
+    }
+
+    100% {
+        position: absolute;
+    }
+}
+
+[dir=ltr] .expanadToCollapseAnimation.collapse>div {
+    animation: positionCollapseChange 0.3s forwards;
+}
+
+[dir=rtl] .expanadToCollapseAnimation.collapse>div {
+    animation: positionCollapseChange 0.3s forwards;
+}
+
+.collapse>div {
+    position: absolute;
+    white-space: nowrap;
+    word-wrap: normal;
+    text-overflow: ellipsis;
+}
+
+.expanded>div {
+    position: relative;
+}
+
+.collapse>div:not(:nth-last-child(-n+2)) {
+    display: none;
+}
+
+.collapse>div:nth-last-child(-n+2) {
+    display: block;
+}
+
+.collapse>div:last-child {
+    white-space: initial;
+}
+
+.parent:hover+.notificationToolTip {
+    display: block;
+}

package/es/services/components/ToastNotification/props/defaultProps.js

@@ -0,0 +1,12 @@
+export default {
+  messagesArray: [],
+  a11y_isErrorNotificationAutoClose: false,
+  a11y_isSuccessNotificationAutoClose: true,
+  a11y_errorNotificationAutoCloseTime: '10',
+  a11y_successNotifcationAutoCloseTime: '3',
+  a11y_notificationView: 'stack',
+  headerTitle: 'Info Message',
+  showAllText: 'Show all',
+  showLessText: 'Show less',
+  clearAllText: 'Clear All'
+};

package/es/services/components/ToastNotification/props/propTypes.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types';
+export default {
+  notificationI18nKeys: PropTypes.object,
+  messagesArray: PropTypes.array,
+  hideMessage: PropTypes.func,
+  hideMessageAll: PropTypes.func,
+  notificationTooltipInfo: PropTypes.string,
+  a11y_notificationView: PropTypes.string,
+  a11y_isSuccessNotificationAutoClose: PropTypes.bool,
+  a11y_successNotifcationAutoCloseTime: PropTypes.string,
+  a11y_isErrorNotificationAutoClose: PropTypes.bool,
+  a11y_errorNotificationAutoCloseTime: PropTypes.string,
+  headerTitle: PropTypes.string,
+  showAllText: PropTypes.string,
+  showLessText: PropTypes.string,
+  clearAllText: PropTypes.string
+};

package/es/services/context/AttachmentViewerContext.js

@@ -0,0 +1,29 @@
+import React, { createContext, useState, useCallback } from 'react';
+import AttachmentViewer from '../components/Attachment/AttachmentViewer';
+import { ContextOptimizer } from '@zohodesk/components/es/utils/ContextOptimizer';
+export const AttachmentViewerContext = /*#__PURE__*/createContext();
+export const AttachmentViewerProvider = _ref => {
+  let {
+    children
+  } = _ref;
+  const [attachments, setAttachment] = useState([]);
+  const showAttachmentViewer = useCallback(attachment => {
+    setAttachment(attachment);
+  }, []);
+  const hideAttachmentViewer = useCallback(() => {
+    setAttachment([]);
+  }, []);
+  const contextValue = useCallback(() => ({
+    attachments,
+    showAttachmentViewer,
+    hideAttachmentViewer
+  }), [attachments]);
+  return /*#__PURE__*/React.createElement(AttachmentViewerContext.Provider, {
+    value: contextValue
+  }, children, /*#__PURE__*/React.createElement(AttachmentViewer, {
+    attachments: attachments,
+    hideAttachmentViewer: hideAttachmentViewer
+  }));
+};
+export const AttachmentViewerConsumer = AttachmentViewerContext.Consumer;
+export default AttachmentViewerContext;

package/es/services/context/ToastNotificationContext.js

@@ -0,0 +1,43 @@
+import React, { createContext, useState, useRef, useCallback } from 'react';
+import ToastNotification from '../components/ToastNotification';
+import { ContextOptimizer } from '@zohodesk/components/es/utils/ContextOptimizer';
+export const ToastNotificationContext = /*#__PURE__*/createContext();
+export const ToastNotificationProvider = _ref => {
+  let {
+    children
+  } = _ref;
+  const [toastMessages, setToastMessages] = useState([]);
+  const toastIdCounter = useRef(0);
+  const showToastNotification = useCallback(message => {
+    const id = `toast${toastIdCounter.current++}`;
+    const toastMessage = {
+      id,
+      data: message
+    };
+    setToastMessages(prevMessages => [...prevMessages, toastMessage]);
+  }, []);
+  const hideToastNotification = useCallback(id => {
+    setToastMessages(prevMessages => prevMessages.filter(message => message.id !== id));
+  }, []);
+  const clearToastNotifications = useCallback(() => {
+    setToastMessages([]);
+  }, []);
+  const contextValue = useMemo(() => ({
+    toastMessages,
+    showToastNotification,
+    hideToastNotification,
+    clearToastNotifications
+  }), [toastMessages]);
+
+  const contextValues = data => data;
+
+  return /*#__PURE__*/React.createElement(ToastNotificationContext.Provider, {
+    value: contextValue
+  }, children, /*#__PURE__*/React.createElement(ToastNotification, {
+    toastMessages: toastMessages,
+    hideToastNotification: hideToastNotification,
+    clearToastNotifications: clearToastNotifications
+  }));
+};
+export const ToastNotificationConsumer = ToastNotificationContext.Consumer;
+export default ToastNotificationContext;

package/es/services/helpers/getAttributeValues.js

@@ -0,0 +1,19 @@
+export default function getAttributeValues(_ref) {
+  let {
+    element,
+    attributes
+  } = _ref;
+  const values = {};
+
+  for (let attr of attributes) {
+    const value = element.getAttribute(attr);
+    const key = attr.replace('data-', '');
+
+    if (value) {
+      values[key] = value;
+    }
+  }
+
+  return values;
+}
+;