feat: custom icon support fill null close #2654 (#2699)

Co-authored-by: Jiwen Bai <[email protected]>
antvis · May 7, 2024 · bdbd1b3 · bdbd1b3
1 parent 7647605
commit bdbd1b3
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 7 deletions.
diff --git a/packages/s2-core/__tests__/spreadsheet/header-action-icons-spec.ts b/packages/s2-core/__tests__/spreadsheet/header-action-icons-spec.ts
@@ -82,6 +82,35 @@ describe('HeaderActionIcons Tests', () => {
     });
   });
 
+  test('should custom icon origin fill', async () => {
+    s2.setOptions({
+      customSVGIcons: [
+        {
+          name: 'CustomIcon',
+          svg: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 48 48"><path fill="#90CAF9" d="M43 30V18c0-2.2-1.8-4-4-4H9c-2.2 0-4 1.8-4 4v12c0 2.2 1.8 4 4 4h30c2.2 0 4-1.8 4-4M9 18h30v12H9z"/><circle cx="38" cy="38" r="10" fill="#43A047"/><g fill="#fff"><path d="M32 36h12v4H32z"/><path d="M36 32h4v12h-4z"/></g></svg>`,
+        },
+      ],
+      headerActionIcons: [
+        {
+          icons: [
+            {
+              name: 'CustomIcon',
+              position: 'right',
+              fill: null,
+            },
+          ],
+          belongsCell: 'rowCell',
+        },
+      ],
+    });
+
+    await s2.render(false);
+
+    s2.facet.getRowCells().forEach((cell) => {
+      expect(get(cell.getActionIcons()[0], 'cfg.fill')).toEqual(undefined);
+    });
+  });
+
   test('should default hide icon', async () => {
     const innerDefaultHide = jest.fn(() => true);
     const defaultHide = jest.fn(() => false);

diff --git a/packages/s2-core/src/cell/header-cell.ts b/packages/s2-core/src/cell/header-cell.ts
@@ -203,7 +203,10 @@ export abstract class HeaderCell<
       width: icon?.size,
       height: icon?.size,
       // 优先级: 单个 icon 颜色配置 > 全部 icon 颜色配置 > 主题 icon 颜色配置 > 文本默认颜色
-      fill: options?.fill || icon?.fill || defaultTextFill,
+      fill:
+        options.fill === null
+          ? undefined
+          : options?.fill || icon?.fill || defaultTextFill,
       cursor: 'pointer',
     };
   }

diff --git a/packages/s2-core/src/common/icons/gui-icon.ts b/packages/s2-core/src/common/icons/gui-icon.ts
@@ -16,7 +16,7 @@ const ImageCache: Record<string, HTMLImageElement> = {};
 
 export interface GuiIconCfg extends Omit<ImageStyleProps, 'fill'> {
   readonly name: string;
-  readonly fill?: string;
+  readonly fill?: string | null;
 }
 
 /**
@@ -45,7 +45,7 @@ export class GuiIcon extends Group {
   public getImage(
     name: string,
     cacheKey: string,
-    fill?: string,
+    fill?: string | null,
   ): Promise<HTMLImageElement> {
     return new Promise<HTMLImageElement>((resolve, reject): void => {
       let svg = getIcon(name);
@@ -123,7 +123,7 @@ export class GuiIcon extends Group {
     this.setImageAttrs({ name, fill });
   }
 
-  public setImageAttrs(attrs: Partial<{ name: string; fill: string }>) {
+  public setImageAttrs(attrs: Partial<{ name: string; fill: string | null }>) {
     let { name, fill } = attrs;
     const { iconImageShape: image } = this;
 

diff --git a/packages/s2-core/src/common/interface/basic.ts b/packages/s2-core/src/common/interface/basic.ts
@@ -286,7 +286,7 @@ export interface HeaderIconHoverParams extends HeaderIconClickParams {
 }
 
 export interface HeaderActionIconOptions extends HeaderActionIconBaseOptions {
-  fill?: string;
+  fill?: string | null;
   name: string;
   x: number;
   y: number;
@@ -296,9 +296,9 @@ export interface HeaderActionIconOptions extends HeaderActionIconBaseOptions {
 export type HeaderActionNameOptions = HeaderActionIconBaseOptions & {
   /**
    * icon 颜色配置
-   * @description 优先级: 单个 icon > 主题 icon 配置 > 文本颜色
+   * @description 优先级: 单个 icon > 主题 icon 配置 > 文本颜色，null 则使用图标原有颜色
    */
-  fill?: string;
+  fill?: string | null;
 
   /**
    * icon 名称