@larva.io/webcomponents
Version:
Fentrica SmartUnits WebComponents package
364 lines (363 loc) • 12.7 kB
JavaScript
/*!
* (C) Fentrica http://fentrica.com - Seee LICENSE.md
*/
import { Host, h } from "@stencil/core";
import { createColorClasses, getAppRoot } from "../../../utils/theme";
import { enterAnimationTop } from "./animations/enter";
import { leaveAnimationTop } from "./animations/leave";
import { config } from "../../../global/config";
export class Notify {
constructor() {
this.config = config;
this.show = false;
this.pivotY = 0;
this.timer = 0;
/**
* Auto-hide timeout, will not auto-hide
*/
this.autoHide = 4000;
}
// @ts-ignore
onStart(detail) {
this.pivotY = detail.currentY;
}
// @ts-ignore
onMove(detail) {
const deltaY = (detail.currentY - this.pivotY) < -10;
if (deltaY) {
this.dismiss();
}
}
// @ts-ignore
onEnd(detail) {
}
async componentDidLoad() {
this.gesture = (await import('../../../utils/gesture')).createGesture({
el: this.el,
gestureName: 'dismiss',
gesturePriority: 100,
direction: 'y',
threshold: 0,
onStart: ev => (this.onStart(ev)),
onMove: ev => this.onMove(ev),
onEnd: ev => this.onEnd(ev),
});
this.gesture.enable(true);
}
handleNodeClick() {
this.dismiss();
}
async present() {
this.willPresent.emit();
this.show = true;
const el = this.el.shadowRoot || this.el;
const animation = await import('../../../utils/animation').then(mod => mod.create(enterAnimationTop, el));
if (!this.config.getBoolean('animated', true)) {
animation.duration(0);
}
await animation.playAsync();
await animation.destroy();
this.didPresent.emit();
if (this.autoHide && this.autoHide > 0) {
this.timer = window.setTimeout(() => {
this.dismiss();
}, this.autoHide);
}
}
async dismiss() {
this.willDismiss.emit();
clearTimeout(this.timer);
if (this.show) {
const el = this.el.shadowRoot || this.el;
const animation = await import('../../../utils/animation').then(mod => mod.create(leaveAnimationTop, el));
if (!this.config.getBoolean('animated', true)) {
animation.duration(0);
}
await animation.playAsync();
await animation.destroy();
this.show = false;
this.didDismiss.emit();
}
}
/**
* Creates an animation instance
*/
async create(message, color, autoHide) {
await this.dismiss();
this.color = color || 'success';
this.message = message || '';
if (autoHide !== undefined) {
this.autoHide = autoHide;
}
const doc = this.el.ownerDocument;
getAppRoot(doc).appendChild(this.el);
this.present();
if (this.el.componentOnReady) {
await this.el.componentOnReady();
}
}
render() {
return (h(Host, { key: 'd77a084f422d8ff1d25ac036921c0ebfe9cfd9a5', class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'lar-notify': true }), style: {
'zIndex': String(20000 + (this.overlayIndex || 0)),
'display': (this.show ? 'block' : 'none')
} }, h("div", { key: '86fee994a8a16a3b683b87b151ce4de96fefd408', onClick: this.handleNodeClick.bind(this), class: "lar-notify-wrapper" }, h("span", { key: '596bc6b45d8fbfe37edefb813abadacc082978a8' }, this.message), h("slot", { key: '8d876fc03d968ae909f4bf3d08d06e97e13407ce' }))));
}
static get is() { return "lar-notify"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["notify.scss"]
};
}
static get styleUrls() {
return {
"$": ["notify.css"]
};
}
static get properties() {
return {
"color": {
"type": "string",
"mutable": true,
"complexType": {
"original": "Color",
"resolved": "string",
"references": {
"Color": {
"location": "import",
"path": "../../../interface",
"id": "src/interface.d.ts::Color"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The icon color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "color"
},
"message": {
"type": "any",
"mutable": true,
"complexType": {
"original": "string | HTMLElement | HTMLLarTranslateElement",
"resolved": "any",
"references": {
"HTMLElement": {
"location": "global",
"id": "global::HTMLElement"
},
"HTMLLarTranslateElement": {
"location": "global",
"id": "global::HTMLLarTranslateElement"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Message"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "message"
},
"overlayIndex": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Modal z-index"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "overlay-index"
},
"autoHide": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Auto-hide timeout, will not auto-hide"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "auto-hide",
"defaultValue": "4000"
}
};
}
static get states() {
return {
"show": {}
};
}
static get events() {
return [{
"method": "willPresent",
"name": "larnotifywillpresent",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted before the notify has presented."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "didPresent",
"name": "larnotifydidpresent",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted after the modal has presented."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "willDismiss",
"name": "larnotifywilldismiss",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted before the modal has dismissed."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}, {
"method": "didDismiss",
"name": "larnotifydiddismiss",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted after the modal has dismissed."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get methods() {
return {
"present": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"dismiss": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "",
"tags": []
}
},
"create": {
"complexType": {
"signature": "(message?: (string | HTMLElement | HTMLLarTranslateElement), color?: Color, autoHide?: number) => Promise<void>",
"parameters": [{
"name": "message",
"type": "any",
"docs": ""
}, {
"name": "color",
"type": "string",
"docs": ""
}, {
"name": "autoHide",
"type": "number",
"docs": ""
}],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
},
"HTMLElement": {
"location": "global",
"id": "global::HTMLElement"
},
"HTMLLarTranslateElement": {
"location": "global",
"id": "global::HTMLLarTranslateElement"
},
"Color": {
"location": "import",
"path": "../../../interface",
"id": "src/interface.d.ts::Color"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Creates an animation instance",
"tags": []
}
}
};
}
static get elementRef() { return "el"; }
}
//# sourceMappingURL=notify.js.map