@zohodesk/dot/es/ToastMessage/ToastMessage.js

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

import React, { useState } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes"; //components

import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
import { Icon } from '@zohodesk/icons';
import { Container, Box } from '@zohodesk/components/es/Layout';
import { useZIndex } from '@zohodesk/components/es/Provider/ZindexProvider';
import { useUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
import AutoClose from "../actions/AutoClose";
import a11yStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css'; //style

import style from "./ToastMessage.module.css";

function ToastMessageUI(props) {
  let [messageState, setMessageState] = useState(props.messageState);
  let {
    type,
    subject,
    info,
    submitText,
    cancelText,
    iconName,
    iconSize,
    submitType,
    isIconMid,
    needClose,
    iconPalette,
    isMore,
    message,
    isAnimate,
    getLeftContainer,
    getInnerBottomContainer,
    getBottomContainer,
    getSubmitContainer,
    onSubmit,
    onCancel,
    dataId,
    dataSelectorId,
    isClose,
    onClose,
    needAutoZindex,
    a11y
  } = props;

  function onClickSubmit(e) {
    onSubmit && onSubmit();
    onClose && onClose();
  }

  function onClickCancel(e) {
    onCancel && onCancel();
    onClose && onClose();
  }

  function changeMessageState(e) {
    cancelBubblingEffect(e);
    setMessageState(!messageState);
  }

  let animateClass = isClose ? style.rightanimate : style.leftanimate;
  let animateRemoveClass = isClose ? style.rightanimate : style.leftnoanimate;
  let channelIcon = /*#__PURE__*/React.createElement(Icon, {
    iconClass: style[iconPalette],
    name: iconName,
    size: iconSize
  });
  let getNextIndex = useZIndex();
  let Zindex = isAnimate ? getNextIndex() : null,
      getNextId = useUniqueId(),
      titleId = getNextId(),
      infoId = getNextId();
  let {
    role = 'alert',
    ariaLive = 'assertive',
    ariaAtomic = true,
    ariaDescribedby = infoId,
    ariaLabelledby = titleId
  } = a11y;
  return /*#__PURE__*/React.createElement(Container, {
    className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass} ${style[`alert${type}`] ? style[`alert${type}`] : ''}`,
    isCover: false,
    dataId: dataId,
    style: needAutoZindex && isAnimate ? {
      zIndex: `${Zindex}`
    } : {},
    role: role,
    "aria-live": ariaLive,
    "aria-atomic": ariaAtomic,
    "aria-describedby": ariaDescribedby,
    "aria-labelledby": ariaLabelledby,
    dataSelectorId: dataSelectorId
  }, type !== 'custom' ? /*#__PURE__*/React.createElement(Box, {
    className: style.alertifychild,
    flexible: true
  }, /*#__PURE__*/React.createElement(Container, {
    alignBox: "row",
    className: style.alertifybanner
  }, /*#__PURE__*/React.createElement(Box, {
    className: style.alertleft,
    flexible: true
  }, /*#__PURE__*/React.createElement(Container, {
    align: isIconMid ? 'vertical' : '',
    alignBox: "row"
  }, type != 'success' && !getLeftContainer ? /*#__PURE__*/React.createElement(Box, {
    className: `${style.alertico}`
  }, /*#__PURE__*/React.createElement("span", null, channelIcon)) : getLeftContainer ? /*#__PURE__*/React.createElement(Box, {
    className: `${style.alertico}`
  }, getLeftContainer()) : null, /*#__PURE__*/React.createElement(Box, {
    flexible: true
  }, /*#__PURE__*/React.createElement(Container, {
    align: "vertical",
    alignBox: "row",
    isCover: false
  }, type == 'success' ? /*#__PURE__*/React.createElement(Box, {
    className: style.alertTitleLeft
  }, channelIcon) : null, /*#__PURE__*/React.createElement(Box, {
    className: style.alertTitle,
    flexible: true,
    "data-title": subject,
    id: titleId
  }, subject)), info ? /*#__PURE__*/React.createElement("p", {
    className: style.alertMessage,
    "data-title": info,
    id: infoId
  }, info) : null, getInnerBottomContainer ? /*#__PURE__*/React.createElement("div", null, getInnerBottomContainer()) : null), type == 'information' && needClose ? /*#__PURE__*/React.createElement(Box, {
    className: `${a11yStyle.buttonReset} ${style.closeIconPrimary}`,
    onClick: onClose,
    dataId: `${dataId}_close`,
    tagName: "button"
  }, /*#__PURE__*/React.createElement(Icon, {
    isBold: true,
    name: "ZD-close",
    size: "18"
  })) : null)), type != 'information' ? /*#__PURE__*/React.createElement(Box, {
    className: style.alertright
  }, /*#__PURE__*/React.createElement(Container, {
    className: style.alerttab
  }, needClose ? /*#__PURE__*/React.createElement("button", {
    className: `${a11yStyle.buttonReset} ${style.closeIcon}`,
    onClick: onClose,
    "data-id": `${dataId}_closeRight`,
    "data-test-id": `${dataId}_closeRight`
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "ZD-close",
    size: "18"
  })) : null, submitText ? /*#__PURE__*/React.createElement(Box, {
    className: `${getSubmitContainer ? style.sumbitBorder : cancelText ? style.notSolo : style.mainbutton} ${getSubmitContainer ? '' : style[submitType]} `,
    flexible: true,
    onClick: onClickSubmit,
    dataId: `${dataId}_submitButton`
  }, /*#__PURE__*/React.createElement(Container, {
    align: "vertical",
    alignBox: "row"
  }, getSubmitContainer ? /*#__PURE__*/React.createElement(Box, {
    flexible: true
  }, getSubmitContainer()) : /*#__PURE__*/React.createElement(Box, {
    className: `${a11yStyle.buttonReset} ${style.buttonText}`,
    flexible: true,
    tagName: "button"
  }, submitText))) : null, cancelText ? /*#__PURE__*/React.createElement(Box, {
    className: `${style.cancelButton}`,
    flexible: true,
    onClick: onClose,
    dataId: `${dataId}_cancelButton`
  }, /*#__PURE__*/React.createElement(Container, {
    align: "vertical",
    alignBox: "row"
  }, /*#__PURE__*/React.createElement(Box, {
    className: `${a11yStyle.buttonReset} ${style.buttonText}`,
    flexible: true,
    onClick: onClickCancel,
    dataId: `${dataId}_cancelButtonInner`,
    tagName: "button"
  }, cancelText), isMore ? /*#__PURE__*/React.createElement(Box, {
    className: `${a11yStyle.buttonReset} ${style.dropdown}`,
    onClick: changeMessageState,
    dataId: `${dataId}_moreIcon`,
    tagName: "button",
    "aria-expanded": messageState ? true : false,
    "aria-haspopup": true
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "ZD-down",
    size: "7"
  })) : null)) : null)) : null)) : null, isMore ? /*#__PURE__*/React.createElement(Box, {
    className: `${style.message} ${messageState ? '' : style.messageOff}`,
    tagName: "p"
  }, message) : null, getBottomContainer ? /*#__PURE__*/React.createElement(Box, null, getBottomContainer()) : null);
}

export default function ToastMessage(props) {
  return /*#__PURE__*/React.createElement(AutoClose, { ...props,
    Element: ToastMessageUI
  });
}
ToastMessage.propTypes = propTypes;
ToastMessage.defaultProps = defaultProps; // if (__DOCS__) {
//   ToastMessage.docs = {
//     componentGroup: 'Atom'
//   };
// }