@antv/s2-react
Version:
use S2 with react
66 lines • 2.92 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CustomTooltip = void 0;
const tslib_1 = require("tslib");
/* eslint-disable import/order */
/* eslint-disable import/no-extraneous-dependencies */
// eslint-disable-next-line prettier/prettier
const s2_1 = require("@antv/s2");
const lodash_1 = require("lodash");
const react_1 = tslib_1.__importDefault(require("react"));
const reactRender_1 = require("../../utils/reactRender");
const index_1 = require("./index");
/**
* 自定义 Tooltip 组件, 兼容 React 18 参考如下
* @ref https://github.com/react-component/util/blob/677d3ac177d147572b65af63e67a7796a5104f4c/src/React/render.ts#L69-L106
*/
class CustomTooltip extends s2_1.BaseTooltip {
constructor(spreadsheet) {
super(spreadsheet);
}
isMobileDevice() {
var _a;
return (0, s2_1.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 = (0, s2_1.customMerge)({
options: {
operator: {
menu: (0, lodash_1.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_1.default.createElement(index_1.TooltipComponent, Object.assign({}, tooltipProps, { content: content })));
(0, reactRender_1.reactRender)(TooltipContent, this.container);
}
hide() {
super.hide();
if (this.container && this.isMobileDevice()) {
this.renderContent();
}
}
destroy() {
this.unmount();
super.destroy();
}
forceClearContent() {
(0, reactRender_1.forceClearContent)(this.container);
}
unmount() {
(0, reactRender_1.reactUnmount)(this.container);
}
}
exports.CustomTooltip = CustomTooltip;
//# sourceMappingURL=custom-tooltip.js.map