@antv/s2-react
Version:
use S2 with react
80 lines • 4.07 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PivotSheet = void 0;
const tslib_1 = require("tslib");
const s2_1 = require("@antv/s2");
const ahooks_1 = require("ahooks");
const lodash_1 = require("lodash");
const react_1 = tslib_1.__importDefault(require("react"));
const SpreadSheetContext_1 = require("../../../context/SpreadSheetContext");
const hooks_1 = require("../../../hooks");
const base_sheet_1 = require("../base-sheet");
exports.PivotSheet = react_1.default.memo((props) => {
const { options: pivotOptions } = props, restProps = tslib_1.__rest(props, ["options"]);
const { dataCfg, partDrillDown } = restProps;
const s2 = (0, SpreadSheetContext_1.useSpreadSheetInstance)();
const [drillFields, setDrillFields] = react_1.default.useState([]);
const onDrillDownIconClick = (0, ahooks_1.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 } = (0, s2_1.getTooltipOptions)(sheetInstance, event);
if (!showTooltip) {
return;
}
sheetInstance.showTooltip({
position: {
x: event.clientX,
y: event.clientY,
},
content,
});
}
});
/** 基于 props.options 来构造新的 options 传递给 base-sheet */
const options = react_1.default.useMemo(() => (0, s2_1.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_1.default.useEffect(() => {
var _a;
s2 === null || s2 === void 0 ? void 0 : s2.hideTooltip();
if ((0, lodash_1.isEmpty)(drillFields)) {
clearDrillDownInfo((_a = s2 === null || s2 === void 0 ? void 0 : s2.store.get('drillDownNode')) === null || _a === void 0 ? void 0 : _a.id);
}
else {
// 执行下钻
(0, s2_1.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_1.default.useEffect(() => {
var _a;
if (!(0, lodash_1.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 = (0, hooks_1.usePivotSheetUpdate)(partDrillDown);
return react_1.default.createElement(base_sheet_1.BaseSheet, Object.assign({}, restProps, { options: options, onUpdate: onUpdate }));
});
exports.PivotSheet.displayName = 'PivotSheet';
//# sourceMappingURL=index.js.map