dareway-rui
Version:
257 lines (229 loc) • 10.2 kB
JavaScript
'use strict';
var _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');
Object.defineProperty(exports, '__esModule', {
value: true
});
exports.default = void 0;
var _classCallCheck2 = _interopRequireDefault(require('@babel/runtime/helpers/classCallCheck'));
var _createClass2 = _interopRequireDefault(require('@babel/runtime/helpers/createClass'));
var _possibleConstructorReturn2 = _interopRequireDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
var _getPrototypeOf2 = _interopRequireDefault(require('@babel/runtime/helpers/getPrototypeOf'));
var _assertThisInitialized2 = _interopRequireDefault(require('@babel/runtime/helpers/assertThisInitialized'));
var _inherits2 = _interopRequireDefault(require('@babel/runtime/helpers/inherits'));
var _defineProperty2 = _interopRequireDefault(require('@babel/runtime/helpers/defineProperty'));
var _react = _interopRequireDefault(require('react'));
var _reactDom = _interopRequireDefault(require('react-dom'));
var _classnames = _interopRequireDefault(require('classnames'));
var _ruiIcon = _interopRequireDefault(require('rui-icon'));
require('./style.css');
var MSG_BOX_DURATION = 3 * 1000;
try {
if (RUI_MSGBOX_DURATION && !isNaN(RUI_MSGBOX_DURATION)) {
MSG_BOX_DURATION = RUI_MSGBOX_DURATION;
}
} catch (e) {}
var MSG_BOX_TYPE_INFO = 1;
var MSG_BOX_TYPE_WARNING = 2;
var MSG_BOX_TYPE_ERROR = 3;
/**
* 基础组件
*/
var MsgBoxBoard =
/*#__PURE__*/
(function(_React$Component) {
(0, _inherits2.default)(MsgBoxBoard, _React$Component);
function MsgBoxBoard(props) {
var _this;
(0, _classCallCheck2.default)(this, MsgBoxBoard);
_this = (0, _possibleConstructorReturn2.default)(
this,
(0, _getPrototypeOf2.default)(MsgBoxBoard).call(this, props)
);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'show', function(msg, detail) {
_this.setState({
type: MSG_BOX_TYPE_INFO,
hidden: false,
msg: msg,
detail: detail,
showDetail: false
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'warn', function(msg, detail) {
_this.setState({
type: MSG_BOX_TYPE_WARNING,
hidden: false,
msg: msg,
detail: detail,
showDetail: false
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'error', function(msg, detail) {
_this.setState({
type: MSG_BOX_TYPE_ERROR,
hidden: false,
msg: msg,
detail: detail,
showDetail: false
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'hide', function() {
_this.setState({
hidden: true
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'toggleShowDetail', function() {
_this.setState({
showDetail: !_this.state.showDetail
});
});
_this.timer = null;
_this.state = {
type: MSG_BOX_TYPE_INFO,
hidden: true,
msg: null,
detail: null,
showDetail: false
};
return _this;
}
(0, _createClass2.default)(MsgBoxBoard, [
{
key: 'componentDidUpdate',
value: function componentDidUpdate() {
var _this2 = this;
if (!this.state.hidden) {
if (this.state.detail && this.state.showDetail) {
// 有 detail 并且展示了 detail，清空 timer
if (this.timer) {
window.clearTimeout(this.timer);
this.timer = null;
}
} else {
window.clearTimeout(this.timer);
this.timer = window.setTimeout(function() {
_this2.hide();
}, MSG_BOX_DURATION);
}
} else {
// 隐藏状态，清空timer
if (this.timer) {
window.clearTimeout(this.timer);
this.timer = null;
}
}
}
},
{
key: 'render',
value: function render() {
var _this$state = this.state,
detail = _this$state.detail,
showDetail = _this$state.showDetail,
hidden = _this$state.hidden;
var clsNames = (0, _classnames.default)({
'rui-msgbox': true,
'rui-msgbox-hidden': hidden
});
return _react.default.createElement(
'div',
{
className: clsNames
},
_react.default.createElement(
'div',
{
className: 'rui-msgbox-content'
},
this.state.type == MSG_BOX_TYPE_INFO
? _react.default.createElement(
'div',
{
className: 'rui-msgbox-icon rui-msgbox-info'
},
_react.default.createElement(_ruiIcon.default, {
type: 'check-circle'
})
)
: this.state.type == MSG_BOX_TYPE_WARNING
? _react.default.createElement(
'div',
{
className: 'rui-msgbox-icon rui-msgbox-warning'
},
_react.default.createElement(_ruiIcon.default, {
type: 'info-circle'
})
)
: _react.default.createElement(
'div',
{
className: 'rui-msgbox-icon rui-msgbox-error'
},
_react.default.createElement(_ruiIcon.default, {
type: 'close-circle'
})
),
_react.default.createElement(
'div',
{
className: 'rui-msgbox-message'
},
this.state.msg
),
detail &&
_react.default.createElement(
'div',
{
className: 'rui-msgbox-showdetail',
onClick: this.toggleShowDetail
},
'\u70B9\u51FB\u67E5\u770B\u8BE6\u60C5>>'
),
detail &&
showDetail &&
_react.default.createElement(
'div',
{
className: 'rui-msgbox-detail'
},
this.state.detail
)
),
_react.default.createElement(
'div',
{
className: 'rui-msgbox-close',
onClick: this.hide
},
_react.default.createElement(_ruiIcon.default, {
type: 'close'
})
)
);
}
}
]);
return MsgBoxBoard;
})(_react.default.Component);
(0, _defineProperty2.default)(MsgBoxBoard, 'newInstance', function() {
var div = document.createElement('div');
document.body.appendChild(div);
return _reactDom.default.render(_react.default.createElement(MsgBoxBoard, null), div);
});
var msgboxBoardInst = MsgBoxBoard.newInstance();
function show(msg, detail) {
msgboxBoardInst.show(msg, detail);
}
function warn(msg, detail) {
msgboxBoardInst.warn(msg, detail);
}
function error(msg, detail) {
msgboxBoardInst.error(msg, detail);
}
var _default = {
show: show,
warn: warn,
error: error
};
exports.default = _default;
//@ sourceMappingURL=index.js.map