dareway-rui
Version:
388 lines (349 loc) • 18.3 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 _propTypes = _interopRequireDefault(require('prop-types'));
var _react = _interopRequireDefault(require('react'));
var _reactRedux = require('react-redux');
var _ruiIcon = _interopRequireDefault(require('rui-icon'));
var _uuid = _interopRequireDefault(require('../../util/uuid'));
var _BeaconContext = _interopRequireDefault(require('./BeaconContext'));
var _button = require('../button');
var _antd = require('antd');
require('./Beacon.css');
var _VMPathContext = _interopRequireDefault(require('../vmPath/VMPathContext'));
var _dec, _class, _class2, _temp;
var Beacon = ((_dec = (0, _reactRedux.connect)()),
_dec(
(_class = ((_temp = _class2 =
/*#__PURE__*/
(function(_React$Component) {
(0, _inherits2.default)(Beacon, _React$Component);
function Beacon(props) {
var _this;
(0, _classCallCheck2.default)(this, Beacon);
_this = (0, _possibleConstructorReturn2.default)(
this,
(0, _getPrototypeOf2.default)(Beacon).call(this, props)
);
(0, _defineProperty2.default)(
(0, _assertThisInitialized2.default)(_this),
'componentDidMount',
function() {
if (_this.props.isMainBeacon) {
return;
}
window.addEventListener('resize', _this.calSize);
_this.calSize();
}
);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'calSize', function() {
var _this$props = _this.props,
width = _this$props.width,
height = _this$props.height; //计算res的偏移的宽度、高度
var beaconLeft = 0,
beaconTop = 0;
if (document.body.clientWidth > width + 40) {
beaconLeft = (document.body.clientWidth - width) / 2;
} else {
width = document.body.clientWidth - 40;
beaconLeft = 20;
}
if (document.body.clientHeight > height + 40) {
beaconTop = (document.body.clientHeight - height) / 2;
} else {
height = document.body.clientHeight - 40;
beaconTop = 20;
}
if (width < 0) {
width = document.body.clientWidth - 40;
beaconLeft = 20;
}
if (height < 0) {
height = document.body.clientHeight - 40;
beaconTop = 20;
}
var beaconContentDOM = document.getElementById(_this.beaconContentId);
beaconContentDOM.style.width = width + 'px';
beaconContentDOM.style.height = height + 'px';
beaconContentDOM.style.left = beaconLeft + 'px';
beaconContentDOM.style.top = beaconTop + 'px';
var beaconBodyDOM = document.getElementById(_this.beaconBodyId);
beaconBodyDOM.style.width = width + 'px';
beaconBodyDOM.style.height = height - 55 + 'px';
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'closeBeacon', function() {
var _this$props2 = _this.props,
laneID = _this$props2.laneID,
beaconID = _this$props2.beaconID;
_this.props.dispatch({
type: '__draco__lane__/closeBeaconAction',
payload: {
laneID: laneID,
id: beaconID
}
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), 'showVMPath', function(
event
) {
if (RUI_DEBUG_MODE) {
var laneID = _this.props.laneID;
_this.props.dispatch({
type: '__draco__lane__/showVMPath',
payload: {
laneID: laneID,
vmPath: _this.props.vmPath
}
});
event.preventDefault();
}
});
_this.state = {
error: null,
errorInfo: null,
width: null,
height: null,
beaconLeft: null,
beaconTop: null,
titleButtonsGroupArray: []
};
_this.beaconId = 'beaconId_' + (0, _uuid.default)();
_this.beaconContentId = _this.beaconId + '_beconContentId';
_this.beaconBodyId = _this.beaconId + '_beconBdoyId';
_this.tbtnsContainerRef = _react.default.createRef();
return _this;
}
(0, _createClass2.default)(Beacon, [
{
key: 'componentDidCatch',
value: function componentDidCatch(error, errorInfo) {
this.setState({
error: error,
errorInfo: errorInfo
});
}
},
{
key: 'componentWillUnmount',
value: function componentWillUnmount() {
if (this.props.isMainBeacon) {
return;
}
window.removeEventListener('resize', this.calSize);
}
},
{
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.closeBeacon
},
_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
)
)
);
} //mainBeacon的UI不同
if (this.props.isMainBeacon) {
var _this$props3 = this.props,
_Content = _this$props3.component,
_laneID = _this$props3.laneID,
_beaconID = _this$props3.beaconID,
_params = _this$props3.params;
return _react.default.createElement(
'div',
{
name: 'mainBeacon',
style: {
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column'
}
},
_react.default.createElement(
_BeaconContext.default.Provider,
{
value: {
__context__beaconID: _beaconID,
__context__laneID: _laneID
}
},
_react.default.createElement(_Content, {
__RUI__VIEW__PRIVATE__PROPS__: {
beaconID: _beaconID,
laneID: _laneID,
__user__custom__params__: _params
}
})
)
);
}
var _this$props4 = this.props,
beaconID = _this$props4.beaconID,
laneID = _this$props4.laneID,
params = _this$props4.params,
Content = _this$props4.component,
title = _this$props4.title,
isCloseable = _this$props4.isCloseable,
width = _this$props4.width,
height = _this$props4.height,
vmPath = _this$props4.vmPath;
width = width == -1 ? document.body.clientWidth - 40 : width;
height = height == -1 ? document.body.clientHeight - 40 : height;
return _react.default.createElement(
'div',
{
role: 'beacon',
id: this.beaconId
},
_react.default.createElement(
_BeaconContext.default.Provider,
{
value: {
__context__beaconID: beaconID,
__context__laneID: laneID
}
},
_react.default.createElement(
'div',
{
className: 'dw-beacon',
tabIndex: -1,
role: 'dialog'
},
_react.default.createElement(
'div',
{
className: 'dw-beacon-content',
id: this.beaconContentId,
style: {
width: ''.concat(width, 'px'),
height: ''.concat(height, 'px')
}
},
isCloseable &&
_react.default.createElement(
'button',
{
className: 'dw-beacon-close',
onClick: this.closeBeacon
},
_react.default.createElement(
'span',
{
className: 'dw-beacon-close-x'
},
_react.default.createElement(_ruiIcon.default, {
type: 'close'
})
)
),
_react.default.createElement(
'div',
{
className: 'dw-beacon-header',
onContextMenu: this.showVMPath
},
_react.default.createElement(
'div',
{
className: 'dw-beacon-title'
},
title
),
_react.default.createElement('div', {
className: 'dw-beacon-picButtons',
ref: this.tbtnsContainerRef
})
),
_react.default.createElement(
'div',
{
className: 'dw-beacon-body',
id: this.beaconBodyId,
style: {
padding: 0,
display: 'flex'
}
},
_react.default.createElement(
_button.TitleButtonsContainerContext.Provider,
{
value: {
tbtnsContainerRef: this.tbtnsContainerRef
}
},
_react.default.createElement(
_VMPathContext.default.Provider,
{
value: vmPath
},
_react.default.createElement(Content, {
__RUI__VIEW__PRIVATE__PROPS__: {
beaconID: beaconID,
laneID: laneID,
__user__custom__params__: params
}
})
)
)
)
)
)
)
);
}
}
]);
return Beacon;
})(_react.default.Component)),
(0, _defineProperty2.default)(_class2, 'defaultProps', {
isMainBeacon: false,
width: 1024,
height: 600
}),
(0, _defineProperty2.default)(_class2, 'propTypes', {
isMainBeacon: _propTypes.default.bool,
beaconID: _propTypes.default.string.isRequired,
laneID: _propTypes.default.string.isRequired,
width: _propTypes.default.number,
height: _propTypes.default.number
}),
_temp))
) || _class);
exports.default = Beacon;
//@ sourceMappingURL=Beacon.js.map