dareway-rui
Version:
341 lines (306 loc) • 16.7 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 _propTypes = _interopRequireDefault(require('prop-types'));
var _reactRedux = require('react-redux');
var _ruiIcon = _interopRequireDefault(require('rui-icon'));
var _button = require('../button');
var _VMPathContext = _interopRequireDefault(require('./../vmPath/VMPathContext'));
require('./Res.css');
var _uuid = _interopRequireDefault(require('../../util/uuid'));
var _antd = require('antd');
var _dec, _class, _class2, _temp;
var Res = /////////////////////////////////////////////////////////////////////////////
// FrameWork
//
((_dec = (0, _reactRedux.connect)()),
_dec(
(_class = ((_temp = _class2 =
/*#__PURE__*/
(function(_React$Component) {
(0, _inherits2.default)(Res, _React$Component);
function Res(props) {
var _this;
(0, _classCallCheck2.default)(this, Res);
_this = (0, _possibleConstructorReturn2.default)(
this,
(0, _getPrototypeOf2.default)(Res).call(this, props)
);
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'componentDidMount',
function() {
window.addEventListener('resize', _this.calResSize);
_this.calResSize();
}
);
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'handleResize',
function() {
if (_this.handleResizeTimeout != null) {
clearTimeout(_this.handleResizeTimeout);
}
_this.handleResizeTimeout = setTimeout(function() {
_this.calResSize();
}, 500);
}
);
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'calResSize',
function() {
var _this$props = _this.props,
width = _this$props.width,
height = _this$props.height; //计算res的偏移的宽度、高度
var resLeft = 0,
resTop = 0;
if (document.body.clientWidth > width + 40) {
resLeft = (document.body.clientWidth - width) / 2;
} else {
width = document.body.clientWidth - 40;
resLeft = 20;
}
if (document.body.clientHeight > height + 40) {
resTop = (document.body.clientHeight - height) / 2;
} else {
height = document.body.clientHeight - 40;
resTop = 20;
}
if (width < 0) {
width = document.body.clientWidth - 40;
resLeft = 20;
}
if (height < 0) {
height = document.body.clientHeight - 40;
resTop = 20;
}
var resContentDOM = document.getElementById(_this.resContentId);
resContentDOM.style.width = width + 'px';
resContentDOM.style.height = height + 'px';
resContentDOM.style.left = resLeft + 'px';
resContentDOM.style.top = resTop + 'px';
var resBodyDOM = document.getElementById(_this.resBodyId);
resBodyDOM.style.width = width + 'px';
resBodyDOM.style.height = height - 55 + 'px';
}
);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'closeRes', function() {
var laneID = _this.props.laneID;
_this.props.dispatch({
type: '__draco__lane__/closeRESAction',
payload: {
laneID: laneID
}
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'showVMPath', function(
event
) {
if (RUI_DEBUG_MODE) {
_this.props.dispatch({
type: '__draco__lane__/showVMPath',
payload: _this.props.vmPath
});
event.preventDefault();
}
});
_this.state = {
error: null,
errorInfo: null,
width: null,
height: null,
resLeft: null,
resTop: null
};
_this.resId = 'resId_' + (0, _uuid.default)();
_this.resContentId = _this.resId + '_resContentId';
_this.resBodyId = _this.resId + '_resBdoyId';
_this.handleResizeTimeout = null;
_this.tbtnsContainerRef = _react.default.createRef();
return _this;
}
(0, _createClass2.default)(Res, [
{
key: 'componentDidCatch',
value: function componentDidCatch(error, errorInfo) {
this.setState({
error: error,
errorInfo: errorInfo
});
} /////////////////////////////////////////////////////////////////
// Resize 相关接口
//
},
{
key: 'componentWillUnmount',
value: function componentWillUnmount() {
window.removeEventListener('resize', this.calResSize);
}
},
{
key: 'render',
value: function render() {
if (this.state.errorInfo) {
// Error path
return _react.default.createElement(
_antd.Modal,
{
title: '异常',
width: 800,
visible: true,
footer: null,
onCancel: this.closeRes
},
_react.default.createElement(
'div',
null,
_react.default.createElement('h2', null, 'Exception'),
this.state.error &&
this.state.error.message &&
_react.default.createElement('h2', null, this.state.error.message),
_react.default.createElement(
'details',
{
style: {
whiteSpace: 'pre-wrap'
}
},
this.state.error && this.state.error.toString(),
_react.default.createElement('br', null),
this.state.errorInfo.componentStack
)
)
);
}
var _this$props2 = this.props,
Content = _this$props2.component,
laneID = _this$props2.laneID,
params = _this$props2.params,
title = _this$props2.title,
isCloseable = _this$props2.isCloseable,
width = _this$props2.width,
height = _this$props2.height;
width = width == -1 ? document.body.clientWidth - 40 : width;
height = height == -1 ? document.body.clientHeight - 40 : height;
return _react.default.createElement(
'div',
{
role: 'res',
id: this.resId
},
_react.default.createElement('div', {
className: 'dw-res-mask'
}),
_react.default.createElement(
'div',
{
className: 'dw-res',
tabIndex: -1,
role: 'dialog'
},
_react.default.createElement(
'div',
{
className: 'dw-res-content',
id: this.resContentId,
style: {
width: ''.concat(width, 'px'),
height: ''.concat(height, 'px')
}
},
isCloseable &&
_react.default.createElement(
'button',
{
className: 'dw-res-close',
onClick: this.closeRes
},
_react.default.createElement(
'span',
{
className: 'dw-res-close-x'
},
_react.default.createElement(_ruiIcon.default, {
type: 'close'
})
)
),
_react.default.createElement(
'div',
{
className: 'dw-res-header',
onContextMenu: this.showVMPath
},
_react.default.createElement(
'div',
{
className: 'dw-res-title'
},
title
),
_react.default.createElement('div', {
className: 'dw-beacon-picButtons',
ref: this.tbtnsContainerRef
})
),
_react.default.createElement(
'div',
{
className: 'dw-res-body',
id: this.resBodyId,
style: {
padding: 0,
display: 'flex'
}
},
_react.default.createElement(
_button.TitleButtonsContainerContext.Provider,
{
value: {
tbtnsContainerRef: this.tbtnsContainerRef
}
},
_react.default.createElement(
_VMPathContext.default.Provider,
{
value: this.props.vmPath
},
_react.default.createElement(Content, {
__RUI__VIEW__PRIVATE__PROPS__: {
laneID: laneID,
__user__custom__params__: params
}
})
)
)
)
)
)
);
}
}
]);
return Res;
})(_react.default.Component)),
(0, _defineProperty2.default)(_class2, 'propTypes', {
title: _propTypes.default.string,
width: _propTypes.default.number,
height: _propTypes.default.number,
params: _propTypes.default.object
}),
_temp))
) || _class);
exports.default = Res;
//@ sourceMappingURL=Res.js.map