S2 icon indicating copy to clipboard operation
S2 copied to clipboard

🐛🙏列头配置对齐方式导致自定义icon定位有问题

Open pppppppppppp12 opened this issue 2 years ago • 1 comments

🏷 Version

Package Version
@antv/s2 1.21.1
@antv/s2-react 1.19.0

Sheet Type

  • [ ] PivotSheet
  • [ ] TableSheet
  • [ ] GridAnalysisSheet
  • [ ] StrategySheet
  • [x] SheetComponent

🖋 Description

image

列头字段对齐方式设置为“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 avatar Jul 06 '22 09:07 pppppppppppp12

你好 @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.

github-actions[bot] avatar Jul 08 '22 07:07 github-actions[bot]

问题已修复:https://s2.antv.antgroup.com/examples/custom/custom-icon/#custom-header-action-icon

wjgogogo avatar Apr 25 '23 06:04 wjgogogo