"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];

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

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var _shared = require("choerodon-ui/shared");

var _noop = _interopRequireDefault(require("lodash/noop"));

var _debounce = _interopRequireDefault(require("lodash/debounce"));

var _scrollIntoViewIfNeeded = _interopRequireDefault(require("scroll-into-view-if-needed"));

var _animate = _interopRequireDefault(require("../animate"));

var _Notice = _interopRequireDefault(require("./Notice"));

var _locale = require("./locale");

var _EventManager = _interopRequireDefault(require("../_util/EventManager"));

var _css = require("../rc-components/util/Dom/css");

var _excluded = ["getContainer"];

function newNotificationInstance(properties, callback) {
  var _ref = properties || {},
      getContainer = _ref.getContainer,
      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);

  var div = document.createElement('div');

  if (getContainer) {
    var root = getContainer();
    root.appendChild(div);
  } else {
    document.body.appendChild(div);
  }

  var called = false;

  function ref(notification) {
    if (called) {
      return;
    }

    called = true;
    callback({
      notice: function notice(noticeProps) {
        notification.add(noticeProps);
      },
      removeNotice: function removeNotice(key) {
        notification.remove(key);
      },
      destroy: function destroy() {
        (0, _reactDom.unmountComponentAtNode)(div);
        var parentNode = div.parentNode;

        if (parentNode) {
          parentNode.removeChild(div);
        }
      }
    });
  }

  (0, _reactDom.render)( /*#__PURE__*/_react["default"].createElement(Notification, (0, _extends2["default"])({}, props, {
    ref: ref
  })), div);
}

var Notification = /*#__PURE__*/function (_PureComponent) {
  (0, _inherits2["default"])(Notification, _PureComponent);

  var _super = (0, _createSuper2["default"])(Notification);

  function Notification() {
    var _this;

    (0, _classCallCheck2["default"])(this, Notification);
    _this = _super.apply(this, arguments);
    _this.scrollRef = null;
    _this.state = {
      notices: [],
      scrollHeight: 'auto',
      totalHeight: 0,
      offset: 0
    };

    _this.onAnimateEnd = function () {
      var notices = _this.state.notices;
      var foldCount = _this.props.foldCount;

      if (foldCount) {
        var _assertThisInitialize = (0, _assertThisInitialized2["default"])(_this),
            scrollRef = _assertThisInitialize.scrollRef;

        if (scrollRef) {
          var childSpan = scrollRef.firstChild;
          if (!childSpan) return;
          var childNodes = childSpan.childNodes;
          var lastNode = childNodes[childNodes.length - 1];

          if (childNodes.length > foldCount && notices.length > foldCount) {
            var totalHeight = 0;

            for (var i = 0; i < childNodes.length; i += 1) {
              var element = childNodes[i];
              totalHeight += element.offsetHeight + (0, _css.getStyle)(element, 'margin-bottom');
            }

            var scrollHeight = totalHeight / childNodes.length * (foldCount + 0.5);

            _this.setState({
              scrollHeight: scrollHeight,
              totalHeight: totalHeight
            }, function () {
              if (!_this.isRemove) {
                (0, _scrollIntoViewIfNeeded["default"])(lastNode, {
                  block: 'center',
                  behavior: 'smooth',
                  scrollMode: 'if-needed',
                  boundary: scrollRef
                });
              }
            });
          } else {
            _this.setState({
              scrollHeight: 'auto'
            });
          }
        }
      }
    };

    _this.clearNotices = function () {
      _this.setState({
        notices: []
      });
    };

    _this.handleNoticeClose = function (eventKey) {
      var notices = _this.state.notices;
      var notice = notices.find(function (_ref2) {
        var key = _ref2.key;
        return key === eventKey;
      });

      _this.remove(eventKey);

      if (notice) {
        var _notice$onClose = notice.onClose,
            onClose = _notice$onClose === void 0 ? _noop["default"] : _notice$onClose;
        onClose(eventKey);
      }
    };

    _this.saveScrollRef = function (dom) {
      _this.scrollRef = dom;

      if (dom) {
        var debouncedResize = (0, _debounce["default"])(function (e) {
          _this.setState({
            offset: e.target.scrollTop
          });
        }, 200);
        _this.scrollEvent = new _EventManager["default"](dom).addEventListener('scroll', debouncedResize);
      } else {
        _this.dispose();
      }
    };

    return _this;
  }

  (0, _createClass2["default"])(Notification, [{
    key: "dispose",
    value: function dispose() {
      var scrollEvent = this.scrollEvent;

      if (scrollEvent) {
        scrollEvent.clear();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.dispose();
    }
  }, {
    key: "getTransitionName",
    value: function getTransitionName() {
      var _this$props = this.props,
          transitionName = _this$props.transitionName,
          animation = _this$props.animation,
          prefixCls = _this$props.prefixCls;

      if (!transitionName && animation) {
        return "".concat(prefixCls, "-").concat(animation);
      }

      return transitionName;
    }
  }, {
    key: "add",
    value: function add(notice) {
      var _this2 = this;

      if (!notice.key) {
        notice.key = _shared.NotificationManager.getUuid();
      }

      var key = notice.key;
      var maxCount = this.props.maxCount;
      this.setState(function (previousState) {
        var notices = previousState.notices;

        if (!notices.filter(function (v) {
          return v.key === key;
        }).length) {
          if (maxCount && notices && notices.length > 0 && notices.length >= maxCount) {
            notices.shift();
          }

          _this2.isRemove = false;
          return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, previousState), {}, {
            notices: notices.concat(notice)
          });
        }
      });
    }
  }, {
    key: "remove",
    value: function remove(key) {
      var _this3 = this;

      this.setState(function (previousState) {
        _this3.isRemove = true;
        var notices = previousState.notices.filter(function (notice) {
          return notice.key !== key;
        });
        return {
          notices: notices
        };
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this4 = this,
          _ref3;

      var _this$state = this.state,
          notices = _this$state.notices,
          scrollHeight = _this$state.scrollHeight,
          offset = _this$state.offset,
          totalHeight = _this$state.totalHeight;
      var _this$props2 = this.props,
          contentClassName = _this$props2.contentClassName,
          prefixCls = _this$props2.prefixCls,
          closeIcon = _this$props2.closeIcon,
          className = _this$props2.className,
          style = _this$props2.style,
          foldCount = _this$props2.foldCount;
      var noticeNodes = notices.map(function (notice) {
        return /*#__PURE__*/_react["default"].createElement(_Notice["default"], (0, _extends2["default"])({
          prefixCls: prefixCls,
          contentClassName: contentClassName
        }, notice, {
          onClose: _this4.handleNoticeClose,
          closeIcon: closeIcon,
          key: notice.key,
          eventKey: notice.key,
          foldable: !!foldCount,
          offset: offset,
          scrollHeight: scrollHeight,
          totalHeight: totalHeight
        }));
      });
      var cls = (0, _classnames["default"])("".concat(prefixCls), className, [(_ref3 = {}, (0, _defineProperty2["default"])(_ref3, "".concat(prefixCls, "-before-shadow"), !!foldCount && notices.length > foldCount && offset > 0), (0, _defineProperty2["default"])(_ref3, "".concat(prefixCls, "-after-shadow"), foldCount && notices.length > foldCount && totalHeight - (typeof scrollHeight === 'number' ? scrollHeight : 0) - offset > 15), _ref3)]);
      var scrollCls = (0, _classnames["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-scroll"), !!foldCount && scrollHeight !== 'auto'));
      var runtimeLocale = (0, _locale.getNoticeLocale)();
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: cls,
        style: style
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: scrollCls,
        style: foldCount ? {
          height: scrollHeight
        } : undefined,
        ref: foldCount ? this.saveScrollRef : undefined
      }, /*#__PURE__*/_react["default"].createElement(_animate["default"], {
        onEnd: this.onAnimateEnd,
        transitionName: this.getTransitionName()
      }, noticeNodes)), foldCount && notices.length > foldCount && /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-alert")
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-alert-message")
      }, "".concat(runtimeLocale.total, " ").concat(notices.length, " ").concat(runtimeLocale.message)), /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-alert-close"),
        onClick: this.clearNotices
      }, "".concat(runtimeLocale.closeAll))));
    }
  }]);
  return Notification;
}(_react.PureComponent);

exports["default"] = Notification;
Notification.defaultProps = {
  prefixCls: 'c7n-notification',
  animation: 'fade',
  style: {
    top: 65,
    left: '50%'
  }
};
Notification.newInstance = newNotificationInstance;
//# sourceMappingURL=Notification.js.map
