pdbe-molstar
Version:
Molstar implementation for PDBe
34 lines (33 loc) • 2.82 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.WithLoadingOverlay = WithLoadingOverlay;
const jsx_runtime_1 = require("react/jsx-runtime");
const base_1 = require("molstar/lib/mol-plugin-ui/base");
const plugin_custom_state_1 = require("../plugin-custom-state");
/** Return a React component with MainContent, overlayed by OverlayContent when `PluginCustomState(this.plugin).events?.isBusy` last emitted value is true. */
function WithLoadingOverlay(MainContent, OverlayContent = PDBeLoadingOverlayBox) {
return class _WithLoadingOverlay extends base_1.PurePluginUIComponent {
constructor() {
super(...arguments);
this.state = { showOverlay: false };
}
componentDidMount() {
var _a, _b;
(_a = super.componentDidMount) === null || _a === void 0 ? void 0 : _a.call(this);
const busyEvent = (_b = (0, plugin_custom_state_1.PluginCustomState)(this.plugin).events) === null || _b === void 0 ? void 0 : _b.isBusy;
if (busyEvent) {
this.subscribe(busyEvent, busy => {
var _a;
this.setState({ showOverlay: busy && !!((_a = (0, plugin_custom_state_1.PluginCustomState)(this.plugin).initParams) === null || _a === void 0 ? void 0 : _a.loadingOverlay) });
});
}
}
render() {
return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MainContent, {}), this.state.showOverlay && (0, jsx_runtime_1.jsx)("div", { className: 'pdbemolstar-overlay', children: (0, jsx_runtime_1.jsx)(OverlayContent, {}) })] });
}
};
}
/** Overlay component with animated PDBe logo */
function PDBeLoadingOverlayBox() {
return (0, jsx_runtime_1.jsx)("div", { className: 'pdbemolstar-overlay-box', children: (0, jsx_runtime_1.jsxs)("svg", { className: 'pdbe-animated-logo', viewBox: '0 0 300 300', children: [(0, jsx_runtime_1.jsx)("path", { className: 'path-bg', fill: 'transparent', stroke: '#E13D3D', strokeWidth: '30', d: 'M 150 200 L 150 100 A 50 50 0 1 0 100 150 L 200 150 A 50 50 0 1 0 150 100 L 150 200 A 50 50 0 1 0 200 150 L 100 150 A 50 50 0 1 0 150 200 ' }), (0, jsx_runtime_1.jsx)("path", { className: 'path-cross', fill: 'transparent', stroke: '#72B260', strokeWidth: '30', d: 'M 150 100 L 150 200 M 100 150 L 200 150' }), (0, jsx_runtime_1.jsx)("path", { className: 'path-fg', fill: 'transparent', stroke: '#72B260', strokeWidth: '30', d: 'M 100 150 A 50 50 0 1 1 150 100 L 150 170 L 150 100 L 150 170 L 150 100 L 150 100 A 50 50 0 1 1 200 150 L 130 150 L 200 150 L 130 150 L 200 150 L 200 150 A 50 50 0 1 1 150 200 L 150 130 L 150 200 L 150 130 L 150 200 L 150 200 A 50 50 0 1 1 100 150 L 170 150 L 100 150 L 170 150 L 100 150' })] }) });
}