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

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

"use strict";

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

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

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

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

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

var _ZindexProvider = require("@zohodesk/components/es/Provider/ZindexProvider");

var _AutoClose = _interopRequireDefault(require("../../../actions/AutoClose"));

var _Button = _interopRequireDefault(require("@zohodesk/components/es/v1/Button/Button"));

var _FormAction = _interopRequireDefault(require("../../../FormAction/FormAction"));

var _DesktopNotificationHeader = _interopRequireDefault(require("../DesktopNotificationHeader/DesktopNotificationHeader"));

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

var _DesktopNotificationModule = _interopRequireDefault(require("../../../version2/notification/DesktopNotification/DesktopNotification.module.css"));

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

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var buttonPaletteObject = {
  success: {
    buttonPalette: 'successFilled'
  },
  error: {
    buttonPalette: 'dangerFilled'
  },
  danger: {
    buttonPalette: 'dangerFilled'
  },
  warning: {
    buttonPalette: 'dangerFilled'
  },
  info: {
    buttonPalette: 'primaryFilled'
  },
  notification: {
    buttonPalette: 'primaryFilled'
  }
};

function DesktopNotificationUI(props) {
  var _props$type = props.type,
      type = _props$type === void 0 ? '' : _props$type,
      submitText = props.submitText,
      cancelText = props.cancelText,
      submitType = props.submitType,
      isMore = props.isMore,
      message = props.message,
      isAnimate = props.isAnimate,
      getBottomContainer = props.getBottomContainer,
      getSubmitContainer = props.getSubmitContainer,
      onSubmit = props.onSubmit,
      onCancel = props.onCancel,
      dataId = props.dataId,
      dataSelectorId = props.dataSelectorId,
      isClose = props.isClose,
      needAutoZindex = props.needAutoZindex,
      title = props.title,
      subTitle = props.subTitle,
      needIcon = props.needIcon,
      info = props.info,
      secondaryInfo = props.secondaryInfo,
      titleVariant = props.titleVariant,
      getSectionContainer = props.getSectionContainer,
      isShrinkView = props.isShrinkView,
      size = props.size,
      onClose = props.onClose,
      needClose = props.needClose,
      renderAlertIcon = props.renderAlertIcon,
      _props$customClass = props.customClass,
      customClass = _props$customClass === void 0 ? {} : _props$customClass,
      _props$i18nKeys = props.i18nKeys,
      i18nKeys = _props$i18nKeys === void 0 ? {} : _props$i18nKeys,
      customProps = props.customProps,
      responsiveId = props.responsiveId;
  var _i18nKeys$closeTitle = i18nKeys.closeTitle,
      closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
  var containerClass = customClass.containerClass;

  var _ref = buttonPaletteObject[type] || {},
      _ref$buttonPalette = _ref.buttonPalette,
      buttonPalette = _ref$buttonPalette === void 0 ? 'dangerFilled' : _ref$buttonPalette;

  var _customProps$ExtraPro = customProps.ExtraProps,
      ExtraProps = _customProps$ExtraPro === void 0 ? {} : _customProps$ExtraPro;

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

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

  var animateClass = isClose ? _DesktopNotificationModule["default"].rightanimate : _DesktopNotificationModule["default"].leftanimate;
  var animateRemoveClass = isClose ? _DesktopNotificationModule["default"].rightanimate : _DesktopNotificationModule["default"].leftnoanimate;
  var getNextIndex = (0, _ZindexProvider.useZIndex)();
  var Zindex = isAnimate ? getNextIndex() : null;
  var uiVariantOne = title && (info || secondaryInfo);
  var uiVariantTwo = title && !(info || secondaryInfo) && !getSectionContainer;

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

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: _DesktopNotificationModule["default"].parentElement,
    style: needAutoZindex && isAnimate ? {
      zIndex: "".concat(Zindex)
    } : {},
    "data-selector-id": dataSelectorId
  }, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
    query: responsiveFunc,
    responsiveId: responsiveId
  }, function (_ref3) {
    var uptoTablet = _ref3.uptoTablet;
    return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
      className: "".concat(_DesktopNotificationModule["default"].container, " ").concat(isAnimate ? animateClass : animateRemoveClass, "\n             ").concat(isShrinkView ? _DesktopNotificationModule["default"].globalNotify : '', " ").concat(containerClass, "\n             ").concat(uptoTablet ? _DesktopNotificationModule["default"].tapWidth : _DesktopNotificationModule["default"]["".concat(size)]),
      isCover: false,
      dataId: dataId,
      isInline: uiVariantTwo
    }, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_DesktopNotificationHeader["default"], {
      type: type,
      title: title,
      variant: titleVariant,
      needIcon: needIcon,
      onClose: onClose,
      closeTitle: closeTitle,
      renderAlertIcon: renderAlertIcon,
      dataId: "".concat(dataId, "_close"),
      needClose: needClose
    })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
      alignBox: "column"
    }, uiVariantOne && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
      flexible: true
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(_DesktopNotificationModule["default"].section, " ").concat(_DesktopNotificationModule["default"].infoText)
    }, subTitle && /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(_DesktopNotificationModule["default"].subTitle, " ").concat(info || secondaryInfo ? _DesktopNotificationModule["default"].subTitleMargin : '')
    }, subTitle), info && /*#__PURE__*/_react["default"].createElement("div", null, info), secondaryInfo && /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(info ? _DesktopNotificationModule["default"].secondaryInfo : '')
    }, secondaryInfo))), getSectionContainer && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
      flexible: true
    }, getSectionContainer()), submitText || cancelText ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement("div", {
      className: _DesktopNotificationModule["default"].footer
    }, isMore ? /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(_DesktopNotificationModule["default"].message)
    }, message) : null, /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
      size: "small",
      paddingLeftSize: "xmedium"
    }, submitText ? /*#__PURE__*/_react["default"].createElement("div", {
      onClick: onClickSubmit,
      "data-id": "".concat(dataId, "_submitButton"),
      "data-test-id": "".concat(dataId, "_submitButton")
    }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
      align: "vertical",
      alignBox: "row"
    }, getSubmitContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
      flexible: true
    }, getSubmitContainer()) : /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
      flexible: true
    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
      text: submitText,
      palette: submitType ? submitType : buttonPalette
    })))) : null, cancelText ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
      text: cancelText,
      palette: "secondary",
      dataId: "".concat(dataId, "_cancelButton"),
      onClick: onClickCancel
    })) : null))) : null)), getBottomContainer ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getBottomContainer()) : null);
  }));
}

DesktopNotificationUI.propTypes = _propTypes.DesktopNotificationUI_propTypes;
DesktopNotificationUI.propTypes = _defaultProps["default"];

function DesktopNotification(props) {
  return /*#__PURE__*/_react["default"].createElement(_AutoClose["default"], _extends({}, props, {
    Element: DesktopNotificationUI
  }));
}

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