@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
163 lines (162 loc) • 8.54 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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
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 __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Panel = void 0;
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("prop-types"));
var classnames_1 = __importDefault(require("classnames"));
var mobx_1 = require("mobx");
var mobx_react_1 = require("mobx-react");
var errorBoundary_1 = __importDefault(require("../../../hocs/errorBoundary"));
var bind_1 = __importDefault(require("../../../utils/bind"));
var constants_1 = require("../constants");
var ResponsiveGridLayout_1 = __importDefault(require("./ResponsiveGridLayout"));
var EmptyState_1 = __importDefault(require("./EmptyState"));
var HandlerIcon_1 = __importDefault(require("./HandlerIcon"));
var style = __importStar(require("./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_1.default.Children.forEach(this.props.children, function (child) {
var _a;
if (react_1.default.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_1.default(style.item, 'pandora-webapp-base-grid-layout-item', (_a = {
'non-draggable': !isDraggable
},
_a[style.resizable] = isResizable,
_a[style.touch] = !isDraggable,
_a));
res.push(react_1.default.createElement("div", { key: child.key, className: itemCls, style: { borderRadius: borderRadius } },
child,
react_1.default.createElement(HandlerIcon_1.default, { 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 ? constants_1.defaultSettings.layoutRowHeight : _b, _c = _a.cols, cols = _c === void 0 ? constants_1.defaultSettings.layoutCols : _c, _d = _a.margin, margin = _d === void 0 ? constants_1.defaultSettings.layoutMargin : _d, layouts = _a.layouts;
var _f = this.context.baseDashboardStore, isEditing = _f.isEditing, theme = _f.theme;
var rootCls = classnames_1.default(style.root, 'pandora-webapp-base-grid-layout', className);
if (react_1.default.Children.count(this.children) === 0) {
return empty || react_1.default.createElement(EmptyState_1.default, null);
}
return (react_1.default.createElement(ResponsiveGridLayout_1.default, { 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 = constants_1.defaultSettings;
Panel.EmptyState = EmptyState_1.default;
Panel.contextTypes = {
baseDashboardStore: prop_types_1.default.object
};
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], Panel.prototype, "children", null);
__decorate([
bind_1.default,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Array]),
__metadata("design:returntype", void 0)
], Panel.prototype, "handleLayoutsChange", null);
__decorate([
bind_1.default,
__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([
mobx_react_1.observer
], Panel);
return Panel;
}(react_1.default.Component));
exports.Panel = Panel;
exports.default = errorBoundary_1.default(Panel);