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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = DesktopNotificationHeader;

var _react = _interopRequireDefault(require("react"));

var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));

var _propTypes = _interopRequireDefault(require("./props/propTypes"));

var _Layout = require("@zohodesk/components/es/v1/Layout");

var _AlertClose = _interopRequireDefault(require("../../alert/AlertClose/AlertClose"));

var _AlertIcons = _interopRequireDefault(require("../../alert/alertIcons/AlertIcons"));

var _CustomResponsive = require("@zohodesk/components/es/Responsive/CustomResponsive");

var _Typography = _interopRequireDefault(require("@zohodesk/components/es/v1/Typography/Typography"));

var _DesktopNotificationHeaderModule = _interopRequireDefault(require("../../../version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function DesktopNotificationHeader(props) {
  var onClose = props.onClose,
      closeTitle = props.closeTitle,
      dataId = props.dataId,
      variant = props.variant,
      _props$type = props.type,
      type = _props$type === void 0 ? '' : _props$type,
      needIcon = props.needIcon,
      title = props.title,
      renderAlertIcon = props.renderAlertIcon,
      needClose = props.needClose,
      responsiveId = props.responsiveId;

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

  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
    align: "vertical",
    alignBox: "row",
    className: "".concat(_DesktopNotificationHeaderModule["default"].container, " ").concat(_DesktopNotificationHeaderModule["default"][variant + '_header'], " ").concat(_DesktopNotificationHeaderModule["default"][type]),
    isCover: false,
    wrap: "wrap"
  }, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
    query: responsiveFunc,
    responsiveId: responsiveId
  }, function (_ref2) {
    var uptoTablet = _ref2.uptoTablet;
    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, needIcon ? /*#__PURE__*/_react["default"].createElement("div", {
      className: _DesktopNotificationHeaderModule["default"].iconContainer
    }, renderAlertIcon ? renderAlertIcon() : /*#__PURE__*/_react["default"].createElement(_AlertIcons["default"], {
      type: type
    })) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
      flexible: true
    }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
      alignBox: "row",
      align: "center"
    }, variant === 'primary' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
      shrink: true
    }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
      $i18n_dataTitle: title,
      $ui_className: _DesktopNotificationHeaderModule["default"].title,
      $ui_tagName: "h1",
      $ui_size: uptoTablet ? '16' : '18',
      $ui_lineHeight: "20",
      $ui_weight: "bold",
      $flag_reset: true,
      $ui_wordBreak: "breakWord"
    }, title)) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
      className: "".concat(_DesktopNotificationHeaderModule["default"].infoText)
    }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
      $i18n_dataTitle: title,
      $ui_className: _DesktopNotificationHeaderModule["default"].title,
      $ui_size: "14",
      $ui_wordBreak: "breakWord"
    }, title)))), needClose ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
      className: _DesktopNotificationHeaderModule["default"].close
    }, /*#__PURE__*/_react["default"].createElement(_AlertClose["default"], {
      onClose: onClose,
      dataTitle: closeTitle,
      dataId: dataId,
      type: "light"
    })) : null);
  }));
}

DesktopNotificationHeader.propTypes = _propTypes["default"];
DesktopNotificationHeader.defaultProps = _defaultProps["default"]; // if (__DOCS__) {
//   DesktopNotificationHeader.docs = {
//     componentGroup: 'DesktopNotificationHeader',
//     folderName: 'Alert'
//   };
// }