@kelvininc/ui-components
Version:
Kelvin UI Components
306 lines (305 loc) • 11.3 kB
JavaScript
import { Host, h } from "@stencil/core";
import { isEmpty } from "lodash-es";
import { CLOSE_ICON } from "./toaster.types";
import { TOASTER_ANIMATION_DURATION, TYPE_ICONS } from "./toaster.config";
export class KvToaster {
constructor() {
/** @inheritdoc */
this.closable = true;
/** Fade in animation state */
this.fadeInActive = false;
/** Fade out animation state */
this.fadeOutActive = false;
/** Icon of the toaster */
this.iconType = TYPE_ICONS[this.type];
this.clearTTL = () => {
window.clearTimeout(this.timeoutID);
};
this.emitAfterClose = () => {
this.fadeInActive = false;
this.fadeOutActive = true;
window.setTimeout(this.afterClose.emit.bind(this), TOASTER_ANIMATION_DURATION);
};
this.emitAfterOpen = () => {
this.fadeOutActive = false;
this.fadeInActive = true;
window.setTimeout(this.afterOpen.emit.bind(this), TOASTER_ANIMATION_DURATION);
};
this.createTTL = () => {
if (this.ttl > 0) {
this.timeoutID = window.setTimeout(() => {
this.ttlExpired.emit();
this.closeToaster();
}, this.ttl);
}
};
this.closeToaster = () => {
this.clearTTL();
this.emitAfterClose();
};
this.onCloseClick = (event) => {
this.closeToaster();
this.clickCloseButton.emit(event);
};
}
/** Case the type changes, the toaster updates the icon displayed */
updateIconType(value) {
this.iconType = TYPE_ICONS[value];
}
/** Case the ttl changes, the toaster should clear the current setTimeout */
handleTimeout() {
this.clearTTL();
this.createTTL();
}
componentWillLoad() {
this.createTTL();
this.emitAfterOpen();
}
disconnectedCallback() {
this.clearTTL();
}
render() {
return (h(Host, { key: '84256fbd5bdf7cc78dbd5a9a1438fcb80c77a924' }, h("div", { key: 'c526b7cbcbc13e80d52328dc89bf3d560656e1d7', class: {
'toaster-container': true,
'animate-fade-in': this.fadeInActive,
'animate-fade-out': this.fadeOutActive,
[`toaster-container--large`]: !isEmpty(this.description),
[`toaster-type--${this.type}`]: true
} }, h("div", { key: '3327e4ad8cc1540f8614dcc6288b5967230b8abb', class: "toaster-icon" }, h("kv-icon", { key: 'e2d7a4c8b4f3911af5abff5db73f90d4c93e7a09', name: this.iconType.icon })), h("div", { key: '3f5289ce8d6cbcf08571fcea705e52f48d7df151', class: "message-content" }, h("span", { key: 'fed4812db3b95f428ac9250cc66c6f946bdf78cd', class: "main-message" }, this.header), !isEmpty(this.description) && h("span", { key: 'd459148dfab8aa03d11009e195b33a255169d740', class: "secondary-message" }, this.description)), h("slot", { key: '717927dc32a767eca2c510139a557239bfc1cd4a' }), this.closable && (h("div", { key: '9e8b93d411e9d1a395208579e42b43bef2cd05be', class: "toaster-close-icon" }, h("kv-icon", { key: '605f8c2812fa897adc2862bf21bbe4a59b05acce', name: CLOSE_ICON.icon, customClass: "icon-16", onClick: this.onCloseClick }))))));
}
static get is() { return "kv-toaster"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["toaster.scss"]
};
}
static get styleUrls() {
return {
"$": ["toaster.css"]
};
}
static get properties() {
return {
"header": {
"type": "string",
"attribute": "header",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) Main message to display"
},
"getter": false,
"setter": false,
"reflect": true
},
"description": {
"type": "string",
"attribute": "description",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Secondary message to display"
},
"getter": false,
"setter": false,
"reflect": true
},
"type": {
"type": "string",
"attribute": "type",
"mutable": false,
"complexType": {
"original": "EToasterType",
"resolved": "EToasterType.Error | EToasterType.Info | EToasterType.Success | EToasterType.Warning",
"references": {
"EToasterType": {
"location": "import",
"path": "./toaster.types",
"id": "src/components/toaster/toaster.types.ts::EToasterType"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(required) Type of toaster"
},
"getter": false,
"setter": false,
"reflect": true
},
"ttl": {
"type": "number",
"attribute": "ttl",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) Time to live of the toaster"
},
"getter": false,
"setter": false,
"reflect": true
},
"closable": {
"type": "boolean",
"attribute": "closable",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "(optional) If true the toaster has a close button"
},
"getter": false,
"setter": false,
"reflect": true,
"defaultValue": "true"
}
};
}
static get states() {
return {
"timeoutID": {},
"fadeInActive": {},
"fadeOutActive": {},
"iconType": {}
};
}
static get events() {
return [{
"method": "clickCloseButton",
"name": "clickCloseButton",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when close button is clicked"
},
"complexType": {
"original": "MouseEvent",
"resolved": "MouseEvent",
"references": {
"MouseEvent": {
"location": "global",
"id": "global::MouseEvent"
}
}
}
}, {
"method": "ttlExpired",
"name": "ttlExpired",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emitted when ttl is defined and expires"
},
"complexType": {
"original": "CloseEvent",
"resolved": "CloseEvent",
"references": {
"CloseEvent": {
"location": "global",
"id": "global::CloseEvent"
}
}
}
}, {
"method": "afterOpen",
"name": "afterOpen",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emiited after the toaster has opened"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}, {
"method": "afterClose",
"name": "afterClose",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "inheritdoc",
"text": undefined
}],
"text": "Emiited after the toaster has closed"
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}];
}
static get watchers() {
return [{
"propName": "type",
"methodName": "updateIconType"
}, {
"propName": "ttl",
"methodName": "handleTimeout"
}];
}
}