choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
349 lines (286 loc) • 11.2 kB
JavaScript
;
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