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

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

import React 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.module.css";
export default class Message extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hideMessage: false
    };
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    let {
      showMessage,
      hideMessage
    } = this.props;

    if (showMessage !== nextProps.showMessage) {
      if (nextProps.type != 'alert') {
        setTimeout(() => {
          hideMessage();
        }, 3000);
      }
    }
  }

  componentDidMount() {
    let {
      type,
      hideMessage
    } = this.props;

    if (type != 'alert') {
      setTimeout(() => {
        hideMessage();
      }, 3000);
    }
  }

  render() {
    return /*#__PURE__*/React.createElement(MessageUI, { ...this.props
    });
  }

}
Message.propTypes = propTypes;
Message.defaultProps = defaultProps; // if (__DOCS__) {
//   Message.docs = {
//     componentGroup: 'Atom'
//   };
// }

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;