@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
138 lines (137 loc) • 7 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { computed } from 'mobx';
import { observer } from 'mobx-react';
import errorBoundary from '../../../hocs/errorBoundary';
import bind from '../../../utils/bind';
import { defaultSettings } from '../constants';
import ResponsiveGridLayout from './ResponsiveGridLayout';
import EmptyState from './EmptyState';
import HandlerIcon from './HandlerIcon';
import * as style from './style.mless';
var Panel = /** @class */ (function (_super) {
__extends(Panel, _super);
function Panel() {
return _super !== null && _super.apply(this, arguments) || this;
}
Object.defineProperty(Panel.prototype, "children", {
get: function () {
var _a = this.props, _b = _a.layouts, layouts = _b === void 0 ? [] : _b, borderRadius = _a.borderRadius;
var isEditing = this.context.baseDashboardStore.isEditing;
var res = [];
React.Children.forEach(this.props.children, function (child) {
var _a;
if (React.isValidElement(child) && child.key) {
var layout = layouts.find(function (l) { return l.i === child.key; });
if (layout) {
var isDraggable = isEditing && layout.isDraggable;
var isResizable = isEditing && layout.isResizable;
var itemCls = classnames(style.item, 'pandora-webapp-base-grid-layout-item', (_a = {
'non-draggable': !isDraggable
},
_a[style.resizable] = isResizable,
_a[style.touch] = !isDraggable,
_a));
res.push(React.createElement("div", { key: child.key, className: itemCls, style: { borderRadius: borderRadius } },
child,
React.createElement(HandlerIcon, { className: style.icon })));
}
}
});
return res;
},
enumerable: false,
configurable: true
});
Panel.prototype.handleLayoutsChange = function (newLayouts) {
var _a = this.props, _b = _a.layouts, layouts = _b === void 0 ? [] : _b, onLayoutsChange = _a.onLayoutsChange;
if (!onLayoutsChange) {
return;
}
var res = newLayouts.map(function (newLayout) {
var oldLayout = layouts.find(function (c) { return c.i === newLayout.i; });
// newLayout中没有isDraggable & isResizable，所以使用oldLayout进行assign操作
return __assign(__assign({}, oldLayout), newLayout);
});
onLayoutsChange(res);
};
Panel.prototype.handleOnDragStart = function (_layout, _oldItem, _newItem, _placeholder, _e, _node, newPosition) {
// 处理当开启缩放时，点击点计算异常的bug
var screenScaleY = this.context
.baseDashboardStore.screenScaleY;
if (screenScaleY) {
newPosition.top = newPosition.top / screenScaleY;
}
};
Panel.prototype.render = function () {
var _a = this.props, className = _a.className, empty = _a.empty, _b = _a.rowHeight, rowHeight = _b === void 0 ? defaultSettings.layoutRowHeight : _b, _c = _a.cols, cols = _c === void 0 ? defaultSettings.layoutCols : _c, _d = _a.margin, margin = _d === void 0 ? defaultSettings.layoutMargin : _d, layouts = _a.layouts;
var _f = this.context.baseDashboardStore, isEditing = _f.isEditing, theme = _f.theme;
var rootCls = classnames(style.root, 'pandora-webapp-base-grid-layout', className);
if (React.Children.count(this.children) === 0) {
return empty || React.createElement(EmptyState, null);
}
return (React.createElement(ResponsiveGridLayout, { isEditing: isEditing, theme: theme, className: rootCls, rowHeight: rowHeight, cols: cols, useCSSTransforms: false, layouts: layouts || [], margin: margin, onDragStart: this.handleOnDragStart, onLayoutChange: this.handleLayoutsChange, draggableHandle: "." + style.item, autoRelayout: isEditing, draggableCancel: ".non-draggable" }, this.children));
};
Panel.defaultSettings = defaultSettings;
Panel.EmptyState = EmptyState;
Panel.contextTypes = {
baseDashboardStore: PropTypes.object
};
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], Panel.prototype, "children", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Array]),
__metadata("design:returntype", void 0)
], Panel.prototype, "handleLayoutsChange", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object, Object, Object, Object, Object, Object, Object]),
__metadata("design:returntype", void 0)
], Panel.prototype, "handleOnDragStart", null);
Panel = __decorate([
observer
], Panel);
return Panel;
}(React.Component));
export { Panel };
export default errorBoundary(Panel);