@antv/s2-react
Version:
use S2 with react
55 lines • 1.91 kB
JavaScript
import { __rest } from "tslib";
import { customMerge } from '@antv/s2';
import { ChartDataCell } from '@antv/s2/extends';
import React from 'react';
import { BaseSheet } from '../base-sheet';
export const ChartSheet = React.memo((props) => {
const { options: customOptions, themeCfg: customThemeCfg } = props, restProps = __rest(props, ["options", "themeCfg"]);
const s2Options = React.useMemo(() => {
const defaultOptions = {
style: {
rowCell: {
width: 100,
},
dataCell: {
width: 400,
height: 400,
},
},
tooltip: {
enable: true,
},
};
const options = {
dataCell: (viewMeta, spreadsheet) => new ChartDataCell(viewMeta, spreadsheet),
showDefaultHeaderActionIcon: false,
interaction: {
hoverFocus: false,
brushSelection: {
dataCell: false,
},
},
};
return customMerge(defaultOptions, customOptions, options);
}, [customOptions]);
const themeCfg = React.useMemo(() => {
const defaultTheme = {
dataCell: {
cell: {
interactionState: {
hoverFocus: {
borderOpacity: 0,
},
selected: {
borderOpacity: 0,
},
},
},
},
};
return customMerge(defaultTheme, customThemeCfg);
}, [customThemeCfg]);
return React.createElement(BaseSheet, Object.assign({}, restProps, { options: s2Options, themeCfg: themeCfg }));
});
ChartSheet.displayName = 'ChartSheet';
//# sourceMappingURL=index.js.map