S2
S2 copied to clipboard
🐛🙏列头配置对齐方式导致自定义icon定位有问题
🏷 Version
Package | Version |
---|---|
@antv/s2 | 1.21.1 |
@antv/s2-react | 1.19.0 |
Sheet Type
- [ ] PivotSheet
- [ ] TableSheet
- [ ] GridAnalysisSheet
- [ ] StrategySheet
- [x] SheetComponent
🖋 Description
列头字段对齐方式设置为“left”或”right“,自定义icon被文字遮挡 (center是正常的)
⌨️ Code Snapshots
以下代码可以复现问题:
import React from 'react';
import ReactDOM from 'react-dom';
import { SheetComponent } from '@antv/s2-react';
import '@antv/s2-react/dist/style.min.css';
const CornerTooltip = <div>CornerTooltip</div>;
const RowTooltip = <div>RowTooltip</div>;
const ColTooltip = <div>ColTooltip</div>;
fetch(
'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
)
.then((res) => res.json())
.then((dataCfg) => {
const s2Options = {
width: 600,
height: 480,
customSVGIcons: [
{
name: 'Filter',
svg: 'https://gw.alipayobjects.com/zos/antfincdn/gu1Fsz3fw0/filter%26sort_filter.svg',
},
],
showDefaultHeaderActionIcon: false,
headerActionIcons: [
{
iconNames: ['Filter'],
belongsCell: 'colCell',
action: (props) => {
const { meta, event } = props;
meta.spreadsheet.tooltip.show({
position: { x: event.clientX, y: event.clientY },
content: ColTooltip,
});
},
},
],
style: {
colCfg: {
hideMeasureColumn: true,
},
},
};
const themeCfg = {
colCell: {
bolderText: { textAlign: 'left' },
}
}
ReactDOM.render(
<SheetComponent dataCfg={dataCfg} options={s2Options} themeCfg={{theme: themeCfg}} />,
document.getElementById('container'),
);
});
🔗 Reproduce Link
🤔 Steps to Reproduce
😊 Expected Behavior
colCell的bolderText配置成 { textAlign: 'left' }, 列头对齐方式为左 / 右,自定义icon定位正常
😅 Current Behavior
目前自定义icon会跟文字重叠,定位有问题
💻 System information
你好 @pppppppppppp12,很抱歉给你带来了不好的体验, 我们会尽快排查问题并修复, 请关注后续发布日志.
Hello, @pppppppppppp12, We are so sorry for the bad experience. We will troubleshoot and fix the problem as soon as possible. Please pay attention to the follow-up change logs.
问题已修复:https://s2.antv.antgroup.com/examples/custom/custom-icon/#custom-header-action-icon