@antv/s2-react
Version:
use S2 with react
61 lines • 2.66 kB
JavaScript
/* eslint-disable import/order */
/* eslint-disable import/no-extraneous-dependencies */
// eslint-disable-next-line prettier/prettier
import { BaseTooltip, customMerge, isMobile } from '@antv/s2';
import { omit } from 'lodash';
import React from 'react';
import { forceClearContent, reactRender, reactUnmount, } from '../../utils/reactRender';
import { TooltipComponent } from './index';
/**
* 自定义 Tooltip 组件, 兼容 React 18 参考如下
* @ref https://github.com/react-component/util/blob/677d3ac177d147572b65af63e67a7796a5104f4c/src/React/render.ts#L69-L106
*/
export class CustomTooltip extends BaseTooltip {
constructor(spreadsheet) {
super(spreadsheet);
}
isMobileDevice() {
var _a;
return isMobile((_a = this.spreadsheet.options) === null || _a === void 0 ? void 0 : _a.device);
}
renderContent() {
var _a, _b, _c;
// 配置级 s2.options.tooltip.content = ''
const { content: contentFromOptions, operation } = this.spreadsheet.options.tooltip;
// 方法级 s2.showTooltip({ content: '' })
const showOptions = this.options;
const cell = this.spreadsheet.getCell((_a = showOptions === null || showOptions === void 0 ? void 0 : showOptions.event) === null || _a === void 0 ? void 0 : _a.target);
// 优先级: 方法级 > 配置级, 兼容 content 为空字符串的场景
const content = ((_b = showOptions === null || showOptions === void 0 ? void 0 : showOptions.content) !== null && _b !== void 0 ? _b : contentFromOptions);
const tooltipProps = customMerge({
options: {
operator: {
menu: omit(operation === null || operation === void 0 ? void 0 : operation.menu, 'items'),
},
},
}, Object.assign(Object.assign({}, showOptions), { cell,
content }));
if ((_c = showOptions === null || showOptions === void 0 ? void 0 : showOptions.options) === null || _c === void 0 ? void 0 : _c.forceRender) {
this.forceClearContent();
}
const TooltipContent = (React.createElement(TooltipComponent, Object.assign({}, tooltipProps, { content: content })));
reactRender(TooltipContent, this.container);
}
hide() {
super.hide();
if (this.container && this.isMobileDevice()) {
this.renderContent();
}
}
destroy() {
this.unmount();
super.destroy();
}
forceClearContent() {
forceClearContent(this.container);
}
unmount() {
reactUnmount(this.container);
}
}
//# sourceMappingURL=custom-tooltip.js.map