@antv/s2
Version:
effective spreadsheet render core lib
138 lines • 4.89 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BaseTooltip = void 0;
const lodash_1 = require("lodash");
const tooltip_1 = require("../../common/constant/tooltip");
const tooltip_2 = require("../../utils/tooltip");
require("./index.css");
/**
* Tooltip 基类
* @see https://s2.antv.antgroup.com/manual/basic/tooltip#%E8%87%AA%E5%AE%9A%E4%B9%89
* @example
* import CustomTooltip extends BaseTooltip {
renderContent() {}
show() {}
hide() {}
destroy() {}
}
*/
class BaseTooltip {
constructor(spreadsheet) {
this.visible = false;
this.position = { x: 0, y: 0 };
this.spreadsheet = spreadsheet;
}
show(options) {
var _a, _b, _c;
const { position, content, event } = options;
const { autoAdjustBoundary, adjustPosition } = this.spreadsheet.options.tooltip || {};
this.visible = true;
this.options = options;
const container = this.getContainer();
this.renderContent(content);
const { x, y } = (0, tooltip_2.getAutoAdjustPosition)({
spreadsheet: this.spreadsheet,
position,
tooltipContainer: container,
autoAdjustBoundary,
});
this.position = (_a = adjustPosition === null || adjustPosition === void 0 ? void 0 : adjustPosition({ position: { x, y }, event: event })) !== null && _a !== void 0 ? _a : {
x,
y,
};
(0, tooltip_2.setTooltipContainerStyle)(container, {
style: {
left: `${(_b = this.position) === null || _b === void 0 ? void 0 : _b.x}px`,
top: `${(_c = this.position) === null || _c === void 0 ? void 0 : _c.y}px`,
pointerEvents: 'all',
},
visible: true,
dark: this.spreadsheet.getThemeName() === 'dark',
});
}
hide() {
this.visible = false;
if (!this.container) {
return;
}
(0, tooltip_2.setTooltipContainerStyle)(this.container, {
style: {
pointerEvents: 'none',
},
visible: false,
});
this.resetPosition();
}
destroy() {
var _a, _b;
this.visible = false;
if (!this.container) {
return;
}
this.resetPosition();
(_b = (_a = this.container).remove) === null || _b === void 0 ? void 0 : _b.call(_a);
this.container = null;
}
renderContent(content) {
var _a, _b, _c, _d;
if (!this.container) {
return;
}
this.clearContent();
const { content: contentFromOptions } = this.spreadsheet.options.tooltip || {};
const displayContent = content !== null && content !== void 0 ? content : contentFromOptions;
// 兼容 displayContent = '' 空字符串的场景
if ((0, lodash_1.isNil)(displayContent)) {
return;
}
if (typeof displayContent === 'string') {
this.container.innerHTML = displayContent;
(_b = (_a = this.options).onMounted) === null || _b === void 0 ? void 0 : _b.call(_a);
return;
}
if (displayContent instanceof Element) {
this.container.appendChild(displayContent);
(_d = (_c = this.options).onMounted) === null || _d === void 0 ? void 0 : _d.call(_c);
}
}
clearContent() {
if (!this.container) {
return;
}
this.container.innerHTML = '';
}
disablePointerEvent() {
if (!this.container) {
return;
}
if (this.container.style.pointerEvents === 'none') {
return;
}
(0, tooltip_2.setTooltipContainerStyle)(this.container, {
style: {
pointerEvents: 'none',
},
});
}
resetPosition() {
this.position = { x: 0, y: 0 };
}
getContainer() {
var _a;
if (!this.container) {
const { tooltip } = this.spreadsheet.options;
const rootContainer = ((_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.getContainer) === null || _a === void 0 ? void 0 : _a.call(tooltip)) || document.body;
const container = document.createElement('div');
(0, tooltip_2.setTooltipContainerStyle)(container, {
style: tooltip === null || tooltip === void 0 ? void 0 : tooltip.style,
className: [tooltip_1.TOOLTIP_CONTAINER_CLS].concat(tooltip === null || tooltip === void 0 ? void 0 : tooltip.className),
});
rootContainer.appendChild(container);
this.container = container;
return this.container;
}
return this.container;
}
}
exports.BaseTooltip = BaseTooltip;
//# sourceMappingURL=index.js.map