You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
294 lines
9.1 KiB
294 lines
9.1 KiB
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
|
|
import * as React from 'react';
|
|
import { Component } from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import classNames from 'classnames';
|
|
import { CSSMotionList } from 'rc-motion';
|
|
import Notice from './Notice';
|
|
import _useNotification from './useNotification';
|
|
var seed = 0;
|
|
var now = Date.now();
|
|
|
|
function getUuid() {
|
|
var id = seed;
|
|
seed += 1;
|
|
return "rcNotification_".concat(now, "_").concat(id);
|
|
}
|
|
|
|
var Notification = /*#__PURE__*/function (_Component) {
|
|
_inherits(Notification, _Component);
|
|
|
|
var _super = _createSuper(Notification);
|
|
|
|
function Notification() {
|
|
var _this;
|
|
|
|
_classCallCheck(this, Notification);
|
|
|
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
|
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
_this.state = {
|
|
notices: []
|
|
};
|
|
_this.hookRefs = new Map();
|
|
|
|
_this.add = function (originNotice, holderCallback) {
|
|
var key = originNotice.key || getUuid();
|
|
|
|
var notice = _objectSpread(_objectSpread({}, originNotice), {}, {
|
|
key: key
|
|
});
|
|
|
|
var maxCount = _this.props.maxCount;
|
|
|
|
_this.setState(function (previousState) {
|
|
var notices = previousState.notices;
|
|
var noticeIndex = notices.map(function (v) {
|
|
return v.notice.key;
|
|
}).indexOf(key);
|
|
var updatedNotices = notices.concat();
|
|
|
|
if (noticeIndex !== -1) {
|
|
updatedNotices.splice(noticeIndex, 1, {
|
|
notice: notice,
|
|
holderCallback: holderCallback
|
|
});
|
|
} else {
|
|
if (maxCount && notices.length >= maxCount) {
|
|
// XXX, use key of first item to update new added (let React to move exsiting
|
|
// instead of remove and mount). Same key was used before for both a) external
|
|
// manual control and b) internal react 'key' prop , which is not that good.
|
|
// eslint-disable-next-line no-param-reassign
|
|
// zombieJ: Not know why use `updateKey`. This makes Notice infinite loop in jest.
|
|
// Change to `updateMark` for compare instead.
|
|
// https://github.com/react-component/notification/commit/32299e6be396f94040bfa82517eea940db947ece
|
|
notice.key = updatedNotices[0].notice.key;
|
|
notice.updateMark = getUuid(); // zombieJ: That's why. User may close by key directly.
|
|
// We need record this but not re-render to avoid upper issue
|
|
// https://github.com/react-component/notification/issues/129
|
|
|
|
notice.userPassKey = key;
|
|
updatedNotices.shift();
|
|
}
|
|
|
|
updatedNotices.push({
|
|
notice: notice,
|
|
holderCallback: holderCallback
|
|
});
|
|
}
|
|
|
|
return {
|
|
notices: updatedNotices
|
|
};
|
|
});
|
|
};
|
|
|
|
_this.remove = function (removeKey) {
|
|
_this.setState(function (_ref) {
|
|
var notices = _ref.notices;
|
|
return {
|
|
notices: notices.filter(function (_ref2) {
|
|
var _ref2$notice = _ref2.notice,
|
|
key = _ref2$notice.key,
|
|
userPassKey = _ref2$notice.userPassKey;
|
|
var mergedKey = userPassKey || key;
|
|
return mergedKey !== removeKey;
|
|
})
|
|
};
|
|
});
|
|
};
|
|
|
|
_this.noticePropsMap = {};
|
|
return _this;
|
|
}
|
|
|
|
_createClass(Notification, [{
|
|
key: "getTransitionName",
|
|
value: function getTransitionName() {
|
|
var _this$props = this.props,
|
|
prefixCls = _this$props.prefixCls,
|
|
animation = _this$props.animation;
|
|
var transitionName = this.props.transitionName;
|
|
|
|
if (!transitionName && animation) {
|
|
transitionName = "".concat(prefixCls, "-").concat(animation);
|
|
}
|
|
|
|
return transitionName;
|
|
}
|
|
}, {
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var notices = this.state.notices;
|
|
var _this$props2 = this.props,
|
|
prefixCls = _this$props2.prefixCls,
|
|
className = _this$props2.className,
|
|
closeIcon = _this$props2.closeIcon,
|
|
style = _this$props2.style;
|
|
var noticeKeys = [];
|
|
notices.forEach(function (_ref3, index) {
|
|
var notice = _ref3.notice,
|
|
holderCallback = _ref3.holderCallback;
|
|
var updateMark = index === notices.length - 1 ? notice.updateMark : undefined;
|
|
var key = notice.key,
|
|
userPassKey = notice.userPassKey;
|
|
|
|
var noticeProps = _objectSpread(_objectSpread(_objectSpread({
|
|
prefixCls: prefixCls,
|
|
closeIcon: closeIcon
|
|
}, notice), notice.props), {}, {
|
|
key: key,
|
|
noticeKey: userPassKey || key,
|
|
updateMark: updateMark,
|
|
onClose: function onClose(noticeKey) {
|
|
var _notice$onClose;
|
|
|
|
_this2.remove(noticeKey);
|
|
|
|
(_notice$onClose = notice.onClose) === null || _notice$onClose === void 0 ? void 0 : _notice$onClose.call(notice);
|
|
},
|
|
onClick: notice.onClick,
|
|
children: notice.content
|
|
}); // Give to motion
|
|
|
|
|
|
noticeKeys.push(key);
|
|
_this2.noticePropsMap[key] = {
|
|
props: noticeProps,
|
|
holderCallback: holderCallback
|
|
};
|
|
});
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
className: classNames(prefixCls, className),
|
|
style: style
|
|
}, /*#__PURE__*/React.createElement(CSSMotionList, {
|
|
keys: noticeKeys,
|
|
motionName: this.getTransitionName(),
|
|
onVisibleChanged: function onVisibleChanged(changedVisible, _ref4) {
|
|
var key = _ref4.key;
|
|
|
|
if (!changedVisible) {
|
|
delete _this2.noticePropsMap[key];
|
|
}
|
|
}
|
|
}, function (_ref5) {
|
|
var key = _ref5.key,
|
|
motionClassName = _ref5.className,
|
|
motionStyle = _ref5.style,
|
|
visible = _ref5.visible;
|
|
var _this2$noticePropsMap = _this2.noticePropsMap[key],
|
|
noticeProps = _this2$noticePropsMap.props,
|
|
holderCallback = _this2$noticePropsMap.holderCallback;
|
|
|
|
if (holderCallback) {
|
|
return /*#__PURE__*/React.createElement("div", {
|
|
key: key,
|
|
className: classNames(motionClassName, "".concat(prefixCls, "-hook-holder")),
|
|
style: _objectSpread({}, motionStyle),
|
|
ref: function ref(div) {
|
|
if (typeof key === 'undefined') {
|
|
return;
|
|
}
|
|
|
|
if (div) {
|
|
_this2.hookRefs.set(key, div);
|
|
|
|
holderCallback(div, noticeProps);
|
|
} else {
|
|
_this2.hookRefs.delete(key);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
return /*#__PURE__*/React.createElement(Notice, _extends({}, noticeProps, {
|
|
className: classNames(motionClassName, noticeProps === null || noticeProps === void 0 ? void 0 : noticeProps.className),
|
|
style: _objectSpread(_objectSpread({}, motionStyle), noticeProps === null || noticeProps === void 0 ? void 0 : noticeProps.style),
|
|
visible: visible
|
|
}));
|
|
}));
|
|
}
|
|
}]);
|
|
|
|
return Notification;
|
|
}(Component);
|
|
|
|
Notification.newInstance = void 0;
|
|
Notification.defaultProps = {
|
|
prefixCls: 'rc-notification',
|
|
animation: 'fade',
|
|
style: {
|
|
top: 65,
|
|
left: '50%'
|
|
}
|
|
};
|
|
|
|
Notification.newInstance = function newNotificationInstance(properties, callback) {
|
|
var _ref6 = properties || {},
|
|
getContainer = _ref6.getContainer,
|
|
props = _objectWithoutProperties(_ref6, ["getContainer"]);
|
|
|
|
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);
|
|
},
|
|
component: notification,
|
|
destroy: function destroy() {
|
|
ReactDOM.unmountComponentAtNode(div);
|
|
|
|
if (div.parentNode) {
|
|
div.parentNode.removeChild(div);
|
|
}
|
|
},
|
|
// Hooks
|
|
useNotification: function useNotification() {
|
|
return _useNotification(notification);
|
|
}
|
|
});
|
|
} // Only used for test case usage
|
|
|
|
|
|
if (process.env.NODE_ENV === 'test' && properties.TEST_RENDER) {
|
|
properties.TEST_RENDER( /*#__PURE__*/React.createElement(Notification, _extends({}, props, {
|
|
ref: ref
|
|
})));
|
|
return;
|
|
}
|
|
|
|
ReactDOM.render( /*#__PURE__*/React.createElement(Notification, _extends({}, props, {
|
|
ref: ref
|
|
})), div);
|
|
};
|
|
|
|
export default Notification; |