@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
154 lines (153 loc) • 7.18 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { h, Host } from "@stencil/core";
import { translate } from "../../i18n";
import { createUniqueId } from "../../utils/dev.utils";
import { KolButtonTag } from "../../core/component-names";
import { KolToastItemFc } from "../../functional-components";
import { Log } from "../../schema";
const TRANSITION_TIMEOUT = 300;
export class KolToastContainer {
constructor() {
this.state = {
_toastStates: [],
};
this.translateToastCloseAll = translate('kol-toast-close-all');
this.knownRenderFunctions = new Set();
}
componentWillLoad() {
Log.warn('kol-toast-container is deprecated and will be removed in the next major version. Use kol-alert for inline notifications or kol-dialog for interactive messages instead. See https://github.com/public-ui/kolibri/issues/8372');
}
async enqueue(toast) {
const newToastState = {
toast: Object.assign(Object.assign({}, toast), { variant: 'card' }),
status: 'adding',
id: createUniqueId('toast'),
};
this.state = Object.assign(Object.assign({}, this.state), { _toastStates: [newToastState, ...this.state._toastStates] });
setTimeout(() => {
this.state = Object.assign(Object.assign({}, this.state), { _toastStates: this.state._toastStates.map((localToastState) => localToastState.id === newToastState.id && localToastState.status !== 'removing'
? Object.assign(Object.assign({}, localToastState), { status: 'settled' }) : localToastState) });
}, TRANSITION_TIMEOUT);
return () => {
this.handleClose(newToastState);
};
}
handleClose(toastState) {
this.state = Object.assign(Object.assign({}, this.state), { _toastStates: this.state._toastStates.map((localToastState) => {
if (localToastState.id === toastState.id) {
localToastState.status = 'removing';
}
return localToastState;
}) });
setTimeout(() => {
var _a, _b;
this.state = Object.assign(Object.assign({}, this.state), { _toastStates: this.state._toastStates.filter((localToastState) => localToastState.id !== toastState.id) });
(_b = (_a = toastState.toast).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
}, TRANSITION_TIMEOUT);
}
async closeAll(immediate = false) {
if (immediate) {
this.state = Object.assign(Object.assign({}, this.state), { _toastStates: [] });
}
else {
const toastsToClose = [...this.state._toastStates];
this.state = Object.assign(Object.assign({}, this.state), { _toastStates: toastsToClose.map((localToastState) => (Object.assign(Object.assign({}, localToastState), { status: 'removing' }))) });
setTimeout(() => {
this.state = Object.assign(Object.assign({}, this.state), { _toastStates: this.state._toastStates.filter((toastState) => toastsToClose.every((toastToClose) => toastToClose.id !== toastState.id)) });
toastsToClose.forEach((toastState) => {
var _a, _b;
(_b = (_a = toastState.toast).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
});
}, TRANSITION_TIMEOUT);
}
}
handleToastRef(toastState, element) {
if (element && typeof toastState.toast.render === 'function' && !this.knownRenderFunctions.has(toastState.toast.render)) {
this.knownRenderFunctions.add(toastState.toast.render);
toastState.toast.render(element, { close: () => this.handleClose(toastState) });
}
}
render() {
return (h(Host, { key: 'bf4e8c23f46f75032d98b4d4137ea7f8aaae7132', class: "kol-toast-container" }, this.state._toastStates.length > 1 && (h(KolButtonTag, { key: 'a974fa8455d5a29fc062384fd5731ff7fdb31390', _label: this.translateToastCloseAll, class: "kol-toast-container__button-close-all", _on: {
onClick: () => {
void this.closeAll();
},
} })), this.state._toastStates.map((toastState) => (h(KolToastItemFc, { key: toastState.id, onClose: () => this.handleClose(toastState), ref: (element) => this.handleToastRef(toastState, element), toast: toastState.toast, status: toastState.status })))));
}
static get is() { return "kol-toast-container"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"default": ["./style.scss"]
};
}
static get styleUrls() {
return {
"default": ["style.css"]
};
}
static get states() {
return {
"state": {}
};
}
static get methods() {
return {
"enqueue": {
"complexType": {
"signature": "(toast: Toast) => Promise<() => void>",
"parameters": [{
"name": "toast",
"type": "{ description?: string | undefined; render?: ToastRenderFunction | undefined; label: string; type: \"default\" | \"info\" | \"success\" | \"warning\" | \"error\"; variant?: \"card\" | undefined; onClose?: (() => void) | undefined; }",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
},
"Toast": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::Toast"
},
"ToastState": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::ToastState"
}
},
"return": "Promise<() => void>"
},
"docs": {
"text": "Adds a toast to the queue.",
"tags": []
}
},
"closeAll": {
"complexType": {
"signature": "(immediate?: boolean) => Promise<void>",
"parameters": [{
"name": "immediate",
"type": "boolean",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Closes all toasts.",
"tags": []
}
}
};
}
}
//# sourceMappingURL=shadow.js.map