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
			| 
											3 years ago
										 | "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; |