@zohodesk/dot/es/v1/notification/DesktopNotificationHeader/DesktopNotificationHeader.js

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

import React from 'react';
import defaultProps from "./props/defaultProps";
import propTypes from "./props/propTypes";
import { Container, Box } from '@zohodesk/components/es/v1/Layout';
import AlertClose from "../../alert/AlertClose/AlertClose";
import AlertIcons from "../../alert/alertIcons/AlertIcons";
import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
import Typography from '@zohodesk/components/es/v1/Typography/Typography';
import style from "../../../version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css";
export default function DesktopNotificationHeader(props) {
  let {
    onClose,
    closeTitle,
    dataId,
    variant,
    type = '',
    needIcon,
    title,
    renderAlertIcon,
    needClose,
    responsiveId
  } = props;

  function responsiveFunc(_ref) {
    let {
      mediaQueryOR
    } = _ref;
    return {
      uptoTablet: mediaQueryOR([{
        maxWidth: 760
      }])
    };
  }

  return /*#__PURE__*/React.createElement(Container, {
    align: "vertical",
    alignBox: "row",
    className: `${style.container} ${style[variant + '_header']} ${style[type]}`,
    isCover: false,
    wrap: "wrap"
  }, /*#__PURE__*/React.createElement(ResponsiveReceiver, {
    query: responsiveFunc,
    responsiveId: responsiveId
  }, _ref2 => {
    let {
      uptoTablet
    } = _ref2;
    return /*#__PURE__*/React.createElement(React.Fragment, null, needIcon ? /*#__PURE__*/React.createElement("div", {
      className: style.iconContainer
    }, renderAlertIcon ? renderAlertIcon() : /*#__PURE__*/React.createElement(AlertIcons, {
      type: type
    })) : null, /*#__PURE__*/React.createElement(Box, {
      flexible: true
    }, /*#__PURE__*/React.createElement(Container, {
      alignBox: "row",
      align: "center"
    }, variant === 'primary' ? /*#__PURE__*/React.createElement(Box, {
      shrink: true
    }, /*#__PURE__*/React.createElement(Typography, {
      $i18n_dataTitle: title,
      $ui_className: style.title,
      $ui_tagName: "h1",
      $ui_size: uptoTablet ? '16' : '18',
      $ui_lineHeight: "20",
      $ui_weight: "bold",
      $flag_reset: true,
      $ui_wordBreak: "breakWord"
    }, title)) : /*#__PURE__*/React.createElement(Box, {
      className: `${style.infoText}`
    }, /*#__PURE__*/React.createElement(Typography, {
      $i18n_dataTitle: title,
      $ui_className: style.title,
      $ui_size: "14",
      $ui_wordBreak: "breakWord"
    }, title)))), needClose ? /*#__PURE__*/React.createElement(Box, {
      className: style.close
    }, /*#__PURE__*/React.createElement(AlertClose, {
      onClose: onClose,
      dataTitle: closeTitle,
      dataId: dataId,
      type: "light"
    })) : null);
  }));
}
DesktopNotificationHeader.propTypes = propTypes;
DesktopNotificationHeader.defaultProps = defaultProps; // if (__DOCS__) {
//   DesktopNotificationHeader.docs = {
//     componentGroup: 'DesktopNotificationHeader',
//     folderName: 'Alert'
//   };
// }