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.
128 lines
3.0 KiB
128 lines
3.0 KiB
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.default = exports.NoticeElement = exports.NoticeBox = void 0;
|
|
|
|
var _react = _interopRequireDefault(require("react"));
|
|
|
|
var _reactRedux = require("react-redux");
|
|
|
|
var _designSystem = require("@adminjs/design-system");
|
|
|
|
var _dropNotice = require("../../store/actions/drop-notice");
|
|
|
|
var _setNoticeProgress = require("../../store/actions/set-notice-progress");
|
|
|
|
var _allowOverride = _interopRequireDefault(require("../../hoc/allow-override"));
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
const TIME_TO_DISAPPEAR = 3;
|
|
|
|
class NoticeElement extends _react.default.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
const {
|
|
notice
|
|
} = props;
|
|
this.timer = null;
|
|
this.state = {
|
|
progress: notice.progress || 0
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
const {
|
|
drop,
|
|
notice,
|
|
notifyProgress
|
|
} = this.props;
|
|
this.timer = setInterval(() => {
|
|
this.setState(state => {
|
|
const progress = state.progress + 100 / TIME_TO_DISAPPEAR;
|
|
notifyProgress({
|
|
noticeId: notice.id,
|
|
progress
|
|
});
|
|
return {
|
|
progress
|
|
};
|
|
});
|
|
}, 1000);
|
|
setTimeout(() => {
|
|
if (this.timer) {
|
|
clearInterval(this.timer);
|
|
}
|
|
|
|
drop();
|
|
}, 1000 * (TIME_TO_DISAPPEAR + 1));
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
if (this.timer) {
|
|
clearInterval(this.timer);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
notice,
|
|
drop
|
|
} = this.props;
|
|
return /*#__PURE__*/_react.default.createElement(_designSystem.MessageBox, {
|
|
style: {
|
|
minWidth: '480px'
|
|
},
|
|
message: notice.message,
|
|
variant: notice.type === 'success' ? 'success' : 'danger',
|
|
onCloseClick: drop
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
exports.NoticeElement = NoticeElement;
|
|
|
|
const NoticeBox = props => {
|
|
const {
|
|
drop,
|
|
notices,
|
|
notifyProgress
|
|
} = props;
|
|
const notice = notices.length ? notices[notices.length - 1] : null;
|
|
|
|
if (notice) {
|
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
"data-testid": "notice-wrapper",
|
|
"data-css": "notice-wrapper"
|
|
}, /*#__PURE__*/_react.default.createElement(NoticeElement, {
|
|
key: notice.id,
|
|
notice: notice,
|
|
drop: () => drop(notice.id),
|
|
notifyProgress: notifyProgress
|
|
}));
|
|
}
|
|
|
|
return /*#__PURE__*/_react.default.createElement("div", null);
|
|
};
|
|
|
|
const mapStateToProps = state => ({
|
|
notices: state.notices
|
|
});
|
|
|
|
const mapDispatchToProps = dispatch => ({
|
|
drop: noticeId => dispatch((0, _dropNotice.dropNotice)(noticeId)),
|
|
notifyProgress: ({
|
|
noticeId,
|
|
progress
|
|
}) => dispatch((0, _setNoticeProgress.setNoticeProgress)({
|
|
noticeId,
|
|
progress
|
|
}))
|
|
});
|
|
|
|
const ConnectedNoticeBox = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(NoticeBox);
|
|
const OverridableConnectedNoticeBox = (0, _allowOverride.default)(ConnectedNoticeBox, 'NoticeBox');
|
|
exports.NoticeBox = exports.default = OverridableConnectedNoticeBox; |