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

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

import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes, UI_propTypes, new_propTypes } from "./props/propTypes";
import AutoClose from "../../actions/AutoClose";
import AlertIcons from "../alertIcons/AlertIcons";
import AlertClose from "../AlertClose/AlertClose";
import style from "./GlobalNotification.module.css";
import { Container, Box } from '@zohodesk/components/lib/Layout';
import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
export default class GlobalNotification extends React.Component {
  constructor(props) {
    super(props);
    this.hideMessageTimer = null;
    this.state = {
      shadowClose: true
    };
    this.onClose = this.onClose.bind(this);
  }

  componentDidMount() {
    let {
      hideMessage,
      hideTime,
      id,
      needAutoClose
    } = this.props;

    if (needAutoClose) {
      this.hideMessageTimer = setTimeout(() => {
        hideMessage(id);
      }, hideTime);
    }
  }

  componentWillUnmount() {
    if (this.hideMessageTimer) {
      clearTimeout(this.hideMessageTimer);
    }
  }

  onClose(e) {
    const {
      onClose,
      hideMessage,
      id
    } = this.props;
    this.setState({
      shadowClose: false
    });
    hideMessage && hideMessage(id);
    onClose && onClose(e);
  }

  render() {
    let {
      type,
      message,
      hideMessage,
      onClick,
      i18nKeys = {},
      customProps,
      dataSelectorId,
      id,
      needShadow,
      shadowCount,
      eleRef
    } = this.props;
    let {
      shadowClose
    } = this.state;
    let {
      closeTitle = 'Close'
    } = i18nKeys;
    return /*#__PURE__*/React.createElement(GlobalNotificationUI, {
      type: type,
      message: message,
      hideMessage: hideMessage,
      onClick: onClick,
      closeTitle: closeTitle,
      customProps: customProps,
      dataSelectorId: dataSelectorId,
      id: id,
      shadowCount: shadowCount,
      onClose: this.onClose,
      needShadow: shadowClose && needShadow,
      eleRef: eleRef
    });
  }

}
GlobalNotification.propTypes = propTypes;
GlobalNotification.defaultProps = defaultProps; // if (__DOCS__) {
//   GlobalNotification.docs = {
//     componentGroup: 'GlobalNotification',
//     folderName: 'Alert'
//   };
// }

export function GlobalNotificationUI(props) {
  function onClose(e) {
    let {
      onClose
    } = props;
    cancelBubblingEffect(e);
    onClose && onClose(e);
  }

  let {
    type = '',
    message,
    onClick,
    closeTitle = '',
    customProps = {},
    dataSelectorId,
    shadowCount,
    needShadow,
    eleRef
  } = props;
  let {
    ExtraProps = {}
  } = customProps;
  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: onClose,
    type: type
  }))));
}
GlobalNotificationUI.propTypes = UI_propTypes;
export function GlobalNotificationNew(props) {
  return /*#__PURE__*/React.createElement(AutoClose, { ...props,
    Element: GlobalNotificationUI
  });
}
GlobalNotificationNew.propTypes = new_propTypes;