| 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121 |
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
3×
3×
3×
3×
1×
1×
1×
1×
1×
3×
1×
1×
1×
1×
6×
1×
6×
6×
6×
6×
1×
1×
1×
3×
3×
1×
3×
3×
| /* 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_redux_1 = require('react-redux');
var WidgetConfig = require('./widgetConfig');
var widgets_1 = require('./widgets');
var react_1 = require("react");
var dashboard_1 = require('../dashboard');
var widgetIFrame_ui_tsx_1 = require('./widgetIFrame.ui.tsx');
/**
* The Dragable Frame of a Widget.
* Contains generic UI controls, shared by all Widgets
*/
var WidgetFrame = function (props) {
var widgetState = props.widget;
var widgetPlugin = props.widgetPlugin;
// If the plugin is not in the registry, we assume it's currently loading
var pluginLoaded = dashboard_1.default.getInstance().widgetPluginRegistry.hasPlugin(widgetState.type);
return (React.createElement("div", {className: "lob-shadow--raised slds-card", style: { margin: 0, overflow: "hidden", backgroundColor: "#fff" }, key: widgetState.id, _grid: { x: widgetState.col, y: widgetState.row, w: widgetState.width, h: widgetState.height }},
React.createElement("div", {className: "slds-grid slds-wrap slds-has-dividers--bottom", style: { height: "100%" }},
React.createElement("div", {className: "slds-size--1-of-1 slds-item" + (props.isReadOnly ? "" : " drag"), style: { padding: 8 }},
props.isReadOnly ? null :
React.createElement("div", {className: "slds-float--right"},
React.createElement(ConfigWidgetButton, {widgetState: widgetState, description: "settings", visible: (props.widgetPlugin && props.widgetPlugin.typeInfo.settings ? true : false), icon: "settings"}),
React.createElement(DeleteWidgetButton, {widgetState: widgetState, description: "remove", icon: "remove", iconType: "action"})),
React.createElement("div", {className: "" + (props.isReadOnly ? "" : " drag")}, widgetState.settings.name || "\u00a0")),
React.createElement("div", {className: "slds-size--1-of-1 slds-is-relative", style: { height: widgetState.availableHeightPx, padding: 0, border: "red dashed 0px" }}, pluginLoaded ? React.createElement(widgetIFrame_ui_tsx_1.default, {widgetState: widgetState, widgetPluginState: widgetPlugin})
: React.createElement(LoadingWidget, {widget: widgetState})))
));
};
exports.widgetPropType = react_1.PropTypes.shape({
id: react_1.PropTypes.string.isRequired,
col: react_1.PropTypes.number.isRequired,
row: react_1.PropTypes.number.isRequired,
width: react_1.PropTypes.number.isRequired,
height: react_1.PropTypes.number.isRequired,
settings: react_1.PropTypes.shape({
name: react_1.PropTypes.string.isRequired
}).isRequired
});
WidgetFrame.propTypes = {
widget: exports.widgetPropType.isRequired,
widgetPlugin: react_1.PropTypes.shape({
id: react_1.PropTypes.string.isRequired,
typeInfo: react_1.PropTypes.shape({
type: react_1.PropTypes.string.isRequired,
name: react_1.PropTypes.string.isRequired,
settings: react_1.PropTypes.array
})
}).isRequired,
isReadOnly: react_1.PropTypes.bool.isRequired
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = WidgetFrame;
var LoadingWidget = function (props) {
return React.createElement("div", {className: "slds-is-relative", style: { height: "100%", padding: "10px" }},
"Loading ",
props.widget.type,
" Widget ...",
React.createElement("div", {className: "slds-spinner_container"},
React.createElement("div", {className: "slds-spinner slds-spinner--medium", role: "alert"},
React.createElement("span", {className: "slds-assistive-text"}, "Loading"),
React.createElement("div", {className: "slds-spinner__dot-a"}),
React.createElement("div", {className: "slds-spinner__dot-b"}))
));
};
LoadingWidget.propTypes = {
widget: exports.widgetPropType.isRequired
};
var WidgetButton = (function (_super) {
__extends(WidgetButton, _super);
function WidgetButton() {
_super.apply(this, arguments);
}
WidgetButton.prototype.render = function () {
var _this = this;
var iconType = this.props.iconType || "utility";
var data = this.props.widgetState;
return React.createElement("button", {className: "slds-button slds-button--icon no-drag" + (this.props.visible !== false ? "" : " slds-hide")},
React.createElement("svg", {"aria-hidden": "true", className: "slds-button__icon slds-button__icon--small", onClick: function () { return _this.props.onClick(data); }},
React.createElement("use", {xlinkHref: "assets/icons/" + iconType + "-sprite/svg/symbols.svg#" + this.props.icon})
),
React.createElement("span", {className: "slds-assistive-text"}, this.props.description));
};
return WidgetButton;
}(React.Component));
WidgetButton.propTypes = {
widgetState: exports.widgetPropType.isRequired,
icon: react_1.PropTypes.string.isRequired,
description: react_1.PropTypes.string,
iconType: react_1.PropTypes.string,
visible: react_1.PropTypes.bool,
onClick: react_1.PropTypes.func.isRequired
};
var DeleteWidgetButton = react_redux_1.connect(function (state) {
return {};
}, function (dispatch) {
return {
onClick: function (widgetState) {
dispatch(widgets_1.deleteWidget(widgetState.id));
}
};
})(WidgetButton);
var ConfigWidgetButton = react_redux_1.connect(function (state) {
return {};
}, function (dispatch) {
return {
onClick: function (widgetState) {
dispatch(WidgetConfig.openWidgetConfigDialog(widgetState.id));
}
};
})(WidgetButton);
|