@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 { TOASTER_ANIMATION_DURATION, TYPE_ICONS } from "./toaster.config";
import { EActionButtonType, EComponentSize, EIconName } from "../../types";
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: 'cd9ff6736c553e28a70700964051e30d4d1b22c5' }, h("div", { key: 'cf0c9b49869e64b549923a52c45b469deb2da4bd', 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: '78b69adbf78aa6f19183c740df29f5e3b701224d', class: "toaster-icon" }, h("kv-icon", { key: 'cfd60da0d019bc9683526e5dc9e325787ce3187b', name: this.iconType.icon })), h("div", { key: '928e6c2faf53b6b5cd06dbba77d0266a12c1e290', class: "message-content" }, h("span", { key: 'f277cba1b27a2f72456af1bf0aea79c47c6af11a', class: "main-message" }, this.header), !isEmpty(this.description) && h("span", { key: '9f3d1974028c8cfc214eae8f93e64eb8da072e93', class: "secondary-message" }, this.description)), h("slot", { key: '8f7fc72a8d91426f4ac0aa349c853d1a19882809' }), this.closable && (h("kv-action-button-text", { key: '18a6d42850abe4c901f96c3029abee8ca2f30877', text: "", size: EComponentSize.Small, type: EActionButtonType.Text, icon: EIconName.Close, 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"
}];
}
}