@codeperate/cdp-ui-library
Version:
Codeperate UI Library
147 lines (146 loc) • 4.59 kB
JavaScript
import { createPopper } from '@popperjs/core';
import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
import { deepAssign } from '../../../utils/deep-assign';
export class CdpTooltip {
constructor() {
this.defaultConfig = {
showEvents: ['mouseenter', 'focus'],
hideEvents: ['mouseleave', 'blur'],
classList: {
tooltip: 'bg-gray-600 text-white rounded w-max px-2 py-1 z-10 block',
arrow: 'bg-gray-600 transform-gpu rotate-45 w-2 h-2',
},
option: {
strategy: 'fixed',
placement: 'bottom',
},
};
this._config = {};
this.props = { display: false };
}
componentWillLoad() {
this._config = deepAssign(this.config, this.defaultConfig);
this.show = this.show.bind(this);
this.hide = this.hide.bind(this);
this.createProxy();
}
componentDidLoad() {
const { showEvents, hideEvents } = this._config;
if (showEvents)
showEvents.forEach(event => {
this.rootEl.addEventListener(event, this.show);
});
if (hideEvents)
hideEvents.forEach(event => {
this.rootEl.addEventListener(event, this.hide);
});
if (this.props.display) {
this.popperInstance = createPopper(this.rootEl, this.tooltipEl, this._config.option);
}
}
componentDidRender() {
if (this.popperInstance)
this.popperInstance.update();
}
async show() {
this._props.display = true;
//this.popperInstance = createPopper(this.rootEl, this.tooltipEl, this._config.option);
}
async hide() {
this._props.display = false;
}
disconnectedCallback() {
const { showEvents, hideEvents } = this._config;
if (showEvents)
showEvents.forEach(event => {
this.rootEl.removeEventListener(event, this.show);
});
if (hideEvents)
hideEvents.forEach(event => {
this.rootEl.removeEventListener(event, this.hide);
});
}
configChangeHandler() {
//this.createProxy();
if (this.props.display)
this.popperInstance = createPopper(this.rootEl, this.tooltipEl, this._config.option);
else if (this.props.display)
this.popperInstance ? this.popperInstance.destroy() : (this.popperInstance = null);
}
createProxy() {
var _a;
const set = (target, prop, value, receiver) => {
this.props = Object.assign(Object.assign({}, target), { [prop]: value });
return Reflect.set(target, prop, value, receiver);
};
this._props = new Proxy(this.props, (_a = this._config.proxyHandler) !== null && _a !== void 0 ? _a : { set });
}
render() {
const { classList, arrow } = this._config;
const tooltipClass = classList.tooltip + (this.props.display ? '' : ' !hidden');
return (h(Host, { class: "relative" },
h("slot", null),
h("div", { ref: el => (this.tooltipEl = el), class: tooltipClass },
h("slot", { name: "tooltip" }),
arrow ? (h("div", { id: "arrow", "data-popper-arrow": true },
h("div", { class: classList.arrow }))) : null)));
}
static get is() { return "cdp-tooltip"; }
static get originalStyleUrls() { return {
"$": ["cdp-tooltip.css"]
}; }
static get styleUrls() { return {
"$": ["cdp-tooltip.css"]
}; }
static get properties() { return {
"config": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "CdpTooltipConfig",
"resolved": "CdpTooltipConfig",
"references": {
"CdpTooltipConfig": {
"location": "import",
"path": "./cdp-tooltip.interface"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
}
},
"props": {
"type": "unknown",
"mutable": true,
"complexType": {
"original": "CdpTooltipProps",
"resolved": "CdpTooltipProps",
"references": {
"CdpTooltipProps": {
"location": "import",
"path": "./cdp-tooltip.interface"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"defaultValue": "{ display: false }"
}
}; }
static get states() { return {
"_config": {}
}; }
static get elementRef() { return "rootEl"; }
static get watchers() { return [{
"propName": "props",
"methodName": "configChangeHandler"
}]; }
}