| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80 |
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
3×
3×
3×
1×
1×
1×
1×
1×
1×
1×
| /* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var React = require("react");
var react_1 = require("react");
var react_redux_1 = require("react-redux");
var _ = require("lodash");
var Widgets = require("./widgets");
var widgetFrame_ui_1 = require("./widgetFrame.ui");
var widthProvider_ui_1 = require("./widthProvider.ui");
var react_grid_layout_1 = require("react-grid-layout");
var ResponsiveGrid = widthProvider_ui_1.default(react_grid_layout_1.Responsive);
var breakpoints = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 };
var cols = { lg: 12, md: 12, sm: 12, xs: 6, xxs: 3 };
var WidgetGrid = (function (_super) {
__extends(WidgetGrid, _super);
function WidgetGrid() {
_super.apply(this, arguments);
}
WidgetGrid.prototype.onLayoutChange = function (layout) {
if (this.props.onLayoutChange) {
this.props.onLayoutChange(layout);
}
};
WidgetGrid.prototype.render = function () {
var props = this.props;
var widgetStates = this.props.widgets;
// TODO: Remove unknown widget from state
var widgets = widgetStates.map(function (widgetState) {
var widgetPlugin = props.widgetPlugins[widgetState.type];
/*
if (!widgetPlugin) {
// TODO: Render widget with error message - currently a loading indicator is displayed and the setting button is hidden
console.warn("No WidgetPluginFactory for type '" + widgetState.type + "'! Skipping rendering.");
return null;
} */
// WidgetFrame must be loaded as function, else the grid is not working properly.
return widgetFrame_ui_1.default({ widget: widgetState, widgetPlugin: widgetPlugin, isReadOnly: props.isReadOnly });
}).filter(function (frame) { return frame !== null; });
/* //Does NOT work that way:
let widgets = widgetData.map((data) => <WidgetFrame {...data}
key={data.id}
_grid={{x: data.col, y: data.row, w: data.width, h: data.height}}
/>);*/
return (React.createElement(ResponsiveGrid, {className: "column", rowHeight: Widgets.ROW_HEIGHT, breakpoints: breakpoints, cols: cols, draggableCancel: ".no-drag", draggableHandle: ".drag", onLayoutChange: this.onLayoutChange.bind(this), isDraggable: !props.isReadOnly, isResizable: !props.isReadOnly}, widgets));
};
return WidgetGrid;
}(react_1.Component));
WidgetGrid.propTypes = {
widgets: react_1.PropTypes.array.isRequired,
datasources: react_1.PropTypes.object.isRequired,
widgetPlugins: react_1.PropTypes.object.isRequired,
onLayoutChange: react_1.PropTypes.func,
deleteWidget: react_1.PropTypes.func,
isReadOnly: react_1.PropTypes.bool.isRequired
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = react_redux_1.connect(function (state) {
return {
widgets: _.valuesIn(state.widgets) || [],
datasources: state.datasources || {},
widgetPlugins: state.widgetPlugins || {},
isReadOnly: state.global.isReadOnly
};
}, function (dispatch) {
return {
onLayoutChange: function (layout) {
dispatch(Widgets.updateLayout(layout));
},
deleteWidget: function (id) { return dispatch(Widgets.deleteWidget(id)); }
};
})(WidgetGrid);
|