@antv/s2-react
Version:
use S2 with react
77 lines • 3.8 kB
JavaScript
import { __rest } from "tslib";
import { buildDrillDownOptions, getTooltipOptions, handleDrillDown, } from '@antv/s2';
import { useLatest } from 'ahooks';
import { isEmpty, isObject } from 'lodash';
import React from 'react';
import { useSpreadSheetInstance } from '../../../context/SpreadSheetContext';
import { usePivotSheetUpdate } from '../../../hooks';
import { BaseSheet } from '../base-sheet';
export const PivotSheet = React.memo((props) => {
const { options: pivotOptions } = props, restProps = __rest(props, ["options"]);
const { dataCfg, partDrillDown } = restProps;
const s2 = useSpreadSheetInstance();
const [drillFields, setDrillFields] = React.useState([]);
const onDrillDownIconClick = useLatest(({ sheetInstance, cacheDrillFields, disabledFields, event }) => {
var _a;
const drillDownProps = Object.assign(Object.assign({}, partDrillDown === null || partDrillDown === void 0 ? void 0 : partDrillDown.drillConfig), { setDrillFields, drillFields: cacheDrillFields, disabledFields });
const content = (_a = partDrillDown === null || partDrillDown === void 0 ? void 0 : partDrillDown.render) === null || _a === void 0 ? void 0 : _a.call(partDrillDown, drillDownProps);
if (event && content) {
const { enable: showTooltip } = getTooltipOptions(sheetInstance, event);
if (!showTooltip) {
return;
}
sheetInstance.showTooltip({
position: {
x: event.clientX,
y: event.clientY,
},
content,
});
}
});
/** 基于 props.options 来构造新的 options 传递给 base-sheet */
const options = React.useMemo(() => buildDrillDownOptions(pivotOptions, partDrillDown, (params) => onDrillDownIconClick.current(params)), [pivotOptions, partDrillDown, onDrillDownIconClick]);
/**
* 清空下钻信息
* @param rowId 不传表示全部清空
*/
const clearDrillDownInfo = (rowId) => {
s2 === null || s2 === void 0 ? void 0 : s2.clearDrillDownData(rowId);
};
/**
* 加载或清除下钻数据
* 仅由 drillFields 驱动
*/
React.useEffect(() => {
var _a;
s2 === null || s2 === void 0 ? void 0 : s2.hideTooltip();
if (isEmpty(drillFields)) {
clearDrillDownInfo((_a = s2 === null || s2 === void 0 ? void 0 : s2.store.get('drillDownNode')) === null || _a === void 0 ? void 0 : _a.id);
}
else {
// 执行下钻
handleDrillDown({
rows: dataCfg.fields.rows,
drillFields,
fetchData: partDrillDown === null || partDrillDown === void 0 ? void 0 : partDrillDown.fetchData,
drillItemsNum: partDrillDown === null || partDrillDown === void 0 ? void 0 : partDrillDown.drillItemsNum,
spreadsheet: s2,
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [drillFields]);
React.useEffect(() => {
var _a;
if (!isObject(partDrillDown === null || partDrillDown === void 0 ? void 0 : partDrillDown.clearDrillDown)) {
return;
}
clearDrillDownInfo((_a = partDrillDown === null || partDrillDown === void 0 ? void 0 : partDrillDown.clearDrillDown) === null || _a === void 0 ? void 0 : _a.rowId);
}, [partDrillDown === null || partDrillDown === void 0 ? void 0 : partDrillDown.clearDrillDown]);
/**
* 控制交叉表 render
*/
const onUpdate = usePivotSheetUpdate(partDrillDown);
return React.createElement(BaseSheet, Object.assign({}, restProps, { options: options, onUpdate: onUpdate }));
});
PivotSheet.displayName = 'PivotSheet';
//# sourceMappingURL=index.js.map