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

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

import React, { Component } from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import { Container, Box } from '@zohodesk/components/lib/Layout';
import AlertClose from "../../AlertClose/AlertClose";
import AlertIcons from "../../alertIcons/AlertIcons";
import { ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
import Typography from '@zohodesk/components/es/Typography/Typography';
import style from "./DesktopNotificationHeader.module.css";
export default class DesktopNotificationHeader extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    let {
      onClose,
      closeTitle,
      dataId,
      variant,
      type = '',
      needIcon,
      title,
      needClose,
      responsiveId
    } = this.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
      }, /*#__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: "1.2",
        $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'
//   };
// }