@antv/s2
Version:
effective spreadsheet render core lib
134 lines • 4.7 kB
JavaScript
import { isNil } from 'lodash';
import { TOOLTIP_CONTAINER_CLS } from '../../common/constant/tooltip';
import { getAutoAdjustPosition, setTooltipContainerStyle, } from '../../utils/tooltip';
import './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() {}
}
*/
export 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 } = 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,
};
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;
}
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 (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;
}
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');
setTooltipContainerStyle(container, {
style: tooltip === null || tooltip === void 0 ? void 0 : tooltip.style,
className: [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;
}
}
//# sourceMappingURL=index.js.map