@zohodesk/dot/es/v1/GlobalNotification/GlobalNotification.js

In this Library, we Provide Some Basic Components to Build Your Application

import React, { useEffect } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes, UI_propTypes, new_propTypes } from "./props/propTypes";
import AutoClose from "../../actions/AutoClose";
import AlertIcons from "../alert/alertIcons/AlertIcons";
import AlertClose from "../alert/AlertClose/AlertClose";
import { Container, Box } from '@zohodesk/components/es/v1/Layout';
import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
import style from "../../version2/GlobalNotification/GlobalNotification.module.css";
export default function GlobalNotification(props) {
  let {
    type,
    message,
    hideMessage,
    hideTime,
    onClick,
    onClose,
    needAutoClose,
    i18nKeys = {},
    customProps,
    dataSelectorId,
    id,
    needShadow,
    shadowCount,
    eleRef
  } = props;
  const hideMessageTimer = useRef(null);
  const [shadowClose, setShadowClose] = useState(true);
  useEffect(() => {
    if (needAutoClose) {
      hideMessageTimer.current = setTimeout(() => {
        hideMessage(id);
      }, hideTime);
    }

    return () => {
      if (hideMessageTimer.current) {
        clearTimeout(hideMessageTimer.current);
      }
    };
  }, []);
  let {
    closeTitle = 'Close'
  } = i18nKeys;

  function onCloseLocal(e) {
    setShadowClose(false);
    hideMessage && hideMessage(id);
    onClose && onClose(e);
  }

  return /*#__PURE__*/React.createElement(GlobalNotificationUI, {
    type: type,
    message: message,
    hideMessage: hideMessage,
    onClick: onClick,
    closeTitle: closeTitle,
    customProps: customProps,
    dataSelectorId: dataSelectorId,
    id: id,
    shadowCount: shadowCount,
    onClose: onCloseLocal,
    needShadow: shadowClose && needShadow,
    eleRef: eleRef
  });
}
GlobalNotification.propTypes = propTypes;
GlobalNotification.defaultProps = defaultProps; // if (__DOCS__) {
//   GlobalNotification.docs = {
//     componentGroup: 'GlobalNotification',
//     folderName: 'Alert'
//   };
// }

export function GlobalNotificationUI(props) {
  let {
    type = '',
    message,
    onClick,
    closeTitle = '',
    customProps = {},
    dataSelectorId,
    shadowCount,
    needShadow,
    eleRef,
    onClose
  } = props;
  let {
    ExtraProps = {}
  } = customProps;

  function onCloseLocal(e) {
    cancelBubblingEffect(e);
    onClose && onClose(e);
  }

  return /*#__PURE__*/React.createElement("div", {
    ref: eleRef,
    className: ` ${style.message} 
        ${needShadow && shadowCount >= 2 ? shadowCount > 2 ? `${style.stackShadowTwo} ${style.stackShadowOne}` : style.stackShadowOne : ''}
        ${type ? style[type] : ''}
      `,
    "data-id": `show_${type}_message`,
    "data-test-id": `show_${type}_message`,
    tabIndex: 0,
    "data-selector-id": dataSelectorId,
    ...ExtraProps
  }, /*#__PURE__*/React.createElement(Container, {
    className: `${style.container}`,
    alignBox: "row",
    isCover: false,
    align: "vertical",
    isInline: true
  }, /*#__PURE__*/React.createElement(Box, {
    className: style.icon
  }, /*#__PURE__*/React.createElement(AlertIcons, {
    type: type,
    variant: "secondary"
  })), /*#__PURE__*/React.createElement(Box, {
    flexible: true
  }, /*#__PURE__*/React.createElement("div", {
    className: style.text,
    onClick: onClick,
    "data-id": "infoMessage",
    "data-test-id": "infoMessage",
    dangerouslySetInnerHTML: {
      __html: message
    }
  })), /*#__PURE__*/React.createElement(Box, {
    className: style.close
  }, /*#__PURE__*/React.createElement(AlertClose, {
    dataId: `close_${type}_message`,
    dataTitle: closeTitle,
    onClose: onCloseLocal,
    type: type
  }))));
}
GlobalNotificationUI.propTypes = UI_propTypes;
export function GlobalNotificationNew(props) {
  return /*#__PURE__*/React.createElement(AutoClose, { ...props,
    Element: GlobalNotificationUI
  });
}
GlobalNotificationNew.propTypes = new_propTypes;