zarm-web/lib/notification/NotificationInstance.js

基于 React 的桌面端UI库

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

var _reactDom = _interopRequireDefault(require("react-dom"));

var _Notification = _interopRequireDefault(require("./Notification"));

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

function _extends() { _extends = Object.assign || 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 NOTIFICATION_GAP = 12;
var notificationInstances = [];
var now = Date.now();
var seed = 0;

function getNotificationKey() {
  var key = "notification-".concat(now, "-").concat(seed += 1);
  return key;
}

function NotificationInstance(props, theme) {
  var className = props.isMessage ? '.za-message' : '.za-notification';
  var div = document.createElement('div');
  document.body.appendChild(div);

  if (typeof props === 'string' || _react.default.isValidElement(props)) {
    props = {
      message: props
    };
  }

  if (theme) {
    props.theme = theme;
  }

  var _props = props,
      key = _props.key;
  var instances = document.querySelectorAll(className);
  var lastInstance = instances[instances.length - 1];
  props.top = (lastInstance ? parseInt(lastInstance.style.top, 10) + lastInstance.offsetHeight : 0) + NOTIFICATION_GAP;

  function willUnMount(lastHeight, lastTop) {
    setTimeout(function () {
      _reactDom.default.unmountComponentAtNode(div);

      document.body.removeChild(div);
    });
    var instancesDom = document.querySelectorAll(className);
    Array.from(instancesDom).forEach(function (instance) {
      var instanceTop = parseInt(instance.style.top, 10);

      if (instanceTop > lastTop) {
        instance.style.top = "".concat(instanceTop - lastHeight - NOTIFICATION_GAP, "px");
      }
    });
  }

  function ref(instance) {
    if (instance) {
      instance.key = instance.key || key || getNotificationKey();
      notificationInstances.push(instance);
    }
  }

  _reactDom.default.render(_react.default.createElement(_Notification.default, _extends({}, props, {
    willUnMount: willUnMount,
    ref: ref
  })), div);
}

var api = {
  open: function open(props) {
    NotificationInstance(props);
  },
  remove: function remove(key) {
    notificationInstances.forEach(function (instance) {
      if (instance.key === key) {
        instance.onClose();
      }
    });
  }
};
['primary', 'danger', 'success', 'warning', 'loading'].forEach(function (theme) {
  api[theme] = function () {
    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    NotificationInstance(options, theme);
  };
});
var _default = api;
exports.default = _default;