@tolokoban/ui
Version:
React components with theme
152 lines • 14 kB
JavaScript
import { __awaiter } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import JSON5 from "json5";
import React from "react";
import IconGear from "../view/icons/IconGear.js";
import { ViewDialog } from "../view/Dialog/index.js";
import { ViewPanel } from "../view/Panel/index.js";
import { ViewSpinner } from "../view/Spinner/index.js";
import { GenericEvent } from "../util/event.js";
import styles from "./manager.module.css";
// eslint-disable-next-line @typescript-eslint/no-empty-function
const EMPTY_FUNCTION = () => { };
export default class ModalManager {
constructor() {
this.eventModalsChange = new GenericEvent();
this.modals = [];
this.counter = 1;
}
useModals() {
const [modals, setModals] = React.useState([...this.modals]);
React.useEffect(() => {
const update = () => setModals([...this.modals]);
this.eventModalsChange.addListener(update);
return () => this.eventModalsChange.removeListener(update);
}, []);
return modals;
}
hide(modal) {
console.log("[Modal] hide:", modal);
if (!modal) {
const last = this.modals.pop();
if (!last)
return;
last.status = "closing";
}
else {
modal.status = "closing";
this.modals = this.modals.filter((m) => m !== modal);
}
this.fire();
}
show(params) {
const modal = Object.assign({ align: "", padding: "1em", transitionDuration: 300, autoClosable: true, background: "var(--theme-color-neutral-1-5)", onClose: EMPTY_FUNCTION, status: "new", name: `Modal#${this.counter++}` }, params);
console.log("[Modal] show:", modal);
this.modals.push(modal);
this.fire();
return () => {
this.hide(modal);
};
}
wait(content, promise, params) {
return __awaiter(this, void 0, void 0, function* () {
return new Promise((resolve, reject) => {
const hide = this.show(Object.assign(Object.assign({}, params), { content: (_jsx("div", { className: styles.wait, children: _jsx(ViewSpinner, { children: content }) })) }));
promise
.then((arg) => {
hide();
window.setTimeout(() => resolve(arg));
})
.catch((ex) => {
hide();
window.setTimeout(() => reject(ex));
});
});
});
}
progress(promise, params) {
return __awaiter(this, void 0, void 0, function* () {
const event = new GenericEvent();
const hide = this.show(Object.assign(Object.assign({}, params), { content: (_jsx("div", { className: styles.wait, children: _jsx(ProgressBody, { event: event }) })) }));
try {
return yield promise((body) => event.dispatch(body));
}
finally {
hide();
}
});
}
error(content, params) {
return __awaiter(this, void 0, void 0, function* () {
return new Promise((resolve) => {
const hide = this.show(Object.assign(Object.assign({}, params), { onClose: resolve, content: (_jsx(ViewDialog, { buttonValidate: {
onClick() {
hide();
resolve();
},
}, children: _jsx("div", { className: styles.error, children: renderHumanFriendlyErrorContent(content) }) })) }));
});
});
}
confirm(params) {
return __awaiter(this, void 0, void 0, function* () {
return new Promise((resolve) => {
var _a, _b;
const hide = this.show(Object.assign(Object.assign({}, params), { onClose() {
resolve(false);
}, content: (_jsx(ViewPanel, { shadow: 9, color: "neutral-3", children: _jsx(ViewDialog, { buttonCancel: {
onClick() {
hide();
resolve(false);
},
children: (_a = params.labelCancel) !== null && _a !== void 0 ? _a : "Cancel",
}, buttonValidate: {
onClick() {
hide();
resolve(true);
},
color: params.accent === true
? "tertiary-5"
: "secondary-5",
children: (_b = params.labelOK) !== null && _b !== void 0 ? _b : (typeof params.content === "string"
? params.content
: "OK"),
}, title: params.title, children: params.content }) })) }));
});
});
}
info(content, params) {
return new Promise((resolve) => {
const hide = this.show(Object.assign(Object.assign({}, params), { onClose: resolve, content: (_jsx(ViewDialog, { buttonValidate: {
variant: "text",
color: "primary-5",
onClick() {
hide();
resolve();
},
}, children: _jsx(ViewPanel, { padding: "L", children: content }) })) }));
});
}
fire() {
console.log("Modals:", this.modals.map((m) => m.name));
this.eventModalsChange.dispatch();
}
}
export function renderHumanFriendlyErrorContent(content) {
if (typeof content === "string")
return _jsx("div", { children: content });
if (content instanceof Error)
return (_jsxs("div", { children: [_jsx("b", { children: content.name }), _jsx("br", {}), content.message] }));
if (typeof content === "object" && React.isValidElement(content))
return content;
return _jsx("pre", { children: JSON5.stringify(content, null, " ") });
}
function ProgressBody({ event }) {
const [body, setBody] = React.useState(_jsxs(_Fragment, { children: [_jsx(IconGear, { animate: true }), _jsx("div", { children: "Please wait..." })] }));
React.useEffect(() => {
event.addListener(setBody);
return () => event.removeListener(setBody);
}, [event]);
return body;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWFuYWdlci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9tb2RhbC9tYW5hZ2VyLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQTtBQUN6QixPQUFPLEtBQUssTUFBTSxPQUFPLENBQUE7QUFHekIsT0FBTyxRQUFRLE1BQU0sd0JBQXdCLENBQUE7QUFDN0MsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGdCQUFnQixDQUFBO0FBQzNDLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUE7QUFDekMsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLGlCQUFpQixDQUFBO0FBUTdDLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUE7QUFFNUMsT0FBTyxNQUFNLE1BQU0sc0JBQXNCLENBQUE7QUFFekMsZ0VBQWdFO0FBQ2hFLE1BQU0sY0FBYyxHQUFHLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQTtBQUUvQixNQUFNLENBQUMsT0FBTyxPQUFPLFlBQVk7SUFBakM7UUFDcUIsc0JBQWlCLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQTtRQUMvQyxXQUFNLEdBQVksRUFBRSxDQUFBO1FBQ3BCLFlBQU8sR0FBRyxDQUFDLENBQUE7SUFtTXZCLENBQUM7SUFqTUcsU0FBUztRQUNMLE1BQU0sQ0FBQyxNQUFNLEVBQUUsU0FBUyxDQUFDLEdBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUE7UUFDNUQsS0FBSyxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUU7WUFDakIsTUFBTSxNQUFNLEdBQUcsR0FBRyxFQUFFLENBQUMsU0FBUyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQTtZQUNoRCxJQUFJLENBQUMsaUJBQWlCLENBQUMsV0FBVyxDQUFDLE1BQU0sQ0FBQyxDQUFBO1lBQzFD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