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

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

import React, { useState, useEffect } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes, MessageUI_propTypes, MessageNew_propTypes } from "./props/propTypes";
import { Icon } from '@zohodesk/icons';
import AutoClose from "../actions/AutoClose";
import style from "../../Message/Message.module.css";
export default function Message(props) {
  // constructor(props) {
  //   super(props);
  //   this.state = { hideMessage: false };
  // }
  // const [hideMessage,setHideMessage] = useState(false)
  let {
    showMessage,
    hideMessage,
    type
  } = props;
  useEffect(() => {
    if (type != 'alert') {
      setTimeout(() => {
        hideMessage();
      }, 3000);
    }
  }, [showMessage]);
  return /*#__PURE__*/React.createElement(MessageUI, { ...props
  });
}
Message.propTypes = propTypes;
Message.defaultProps = defaultProps;
export function MessageUI(props) {
  function onClose(e) {
    let {
      hideMessage,
      onClose
    } = props;
    hideMessage && hideMessage(e);
    onClose && onClose(e);
  }

  let {
    type,
    message,
    onClick,
    i18nKeys,
    dataSelectorId
  } = props;
  let {
    closeTitle = 'Close'
  } = i18nKeys;
  return /*#__PURE__*/React.createElement("div", {
    className: style.message,
    "data-id": `show_${type}_message`,
    "data-test-id": `show_${type}_message`,
    "data-selector-id": dataSelectorId
  }, /*#__PURE__*/React.createElement("div", {
    className: style.container
  }, /*#__PURE__*/React.createElement("div", {
    className: style[type]
  }, /*#__PURE__*/React.createElement("span", {
    className: style.tickIcn
  }, /*#__PURE__*/React.createElement(Icon, {
    name: type == 'alert' ? 'ZD-notifiExclamation' : type == 'info' ? 'ZD-info31' : 'ZD-check',
    isBold: true,
    size: "10"
  }))), /*#__PURE__*/React.createElement("span", {
    className: style.text,
    onClick: onClick,
    "data-id": "infoMessage",
    "data-test-id": "infoMessage",
    dangerouslySetInnerHTML: {
      __html: message
    }
  }), /*#__PURE__*/React.createElement("span", {
    className: style.close,
    "data-title": closeTitle,
    onClick: onClose,
    "data-id": `close_${type}_message`,
    "data-test-id": `close_${type}_message`
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "ZD-closee",
    isBold: true,
    size: "10"
  }))));
}
MessageUI.propTypes = MessageUI_propTypes;
export function MessageNew(props) {
  return /*#__PURE__*/React.createElement(AutoClose, { ...props,
    Element: MessageUI
  });
}
MessageNew.propTypes = MessageNew_propTypes;