feat: ✨ add custom header action icons (#331)

* chore: ♻️ rename the icon param from "type" to "row" * chore: ✏️ fix lint * feat: ✨ add drilldown action icon * feat: ✨ allow to register custom svg icons * feat: 🎨 set default sortIcons * fix: 🐛 tweak the position of custom header action icons * style: 💄 add fill for the action icon * chore: ✏️ fix lint * style: 💄 tweak the row header icon * chore: delete useless husky * chore: delete useless code * refactor: replace the display and customDisplayByLabelName by displayCondition of HeaderActionIcon * fix: fix the test * fix: solve the test * fix: sovle the test
antvis · Sep 23, 2021 · 4dcb1a2 · 4dcb1a2
1 parent 1ad4360
commit 4dcb1a2
Show file tree

Hide file tree

Showing 30 changed files with 530 additions and 321 deletions.
diff --git a/packages/s2-core/__tests__/spreadsheet/multiple-values-cell-spec.tsx b/packages/s2-core/__tests__/spreadsheet/multiple-values-cell-spec.tsx
@@ -4,19 +4,20 @@ import { cloneDeep, merge } from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
-import {
-  S2DataConfig,
-  S2Options,
-  SheetComponent,
-  SpreadSheet,
-  PivotSheet,
-} from '../../src';
 import {
   multipleDataWithBottom,
   multipleDataWithCombine,
   multipleDataWithNormal,
 } from '../data/multiple-values-cell-mock-data';
 import { getContainer } from '../util/helpers';
+import {
+  S2DataConfig,
+  S2Options,
+  SheetComponent,
+  SpreadSheet,
+  PivotSheet,
+  Node,
+} from '@/index';
 
 let sheet: SpreadSheet;
 const getSpreadSheet = (
@@ -116,15 +117,14 @@ const getOptions = (): S2Options => {
         },
       ],
     },
-    rowActionIcons: {
-      iconTypes: ['SortDown', 'SortUp'],
-      display: {
-        level: 0,
-        operator: '>=',
+    headerActionIcons: [
+      {
+        iconNames: ['SortDown', 'SortUp'],
+        belongsCell: 'colCell',
+        display: (meta: Node) => meta.level >= 0,
+        action() {},
       },
-      action(type, node) {},
-    },
-
+    ],
     selectedCellsSpotlight: true,
     hoverHighlight: true,
     tooltip: {

diff --git a/packages/s2-core/__tests__/spreadsheet/spread-sheet-spec.tsx b/packages/s2-core/__tests__/spreadsheet/spread-sheet-spec.tsx
@@ -6,7 +6,12 @@ import { getContainer } from '../util/helpers';
 import { SheetEntry, assembleDataCfg } from '../util/sheet-entry';
 // import * as tableData from '../data/mock-dataset.json';
 import { CustomTooltip } from './custom/custom-tooltip';
-import { S2Options, SheetType, ThemeName } from '@/index';
+import {
+  HeaderActionIconProps,
+  S2Options,
+  SheetType,
+  ThemeName,
+} from '@/index';
 
 const tableDataFields = {
   fields: {
@@ -24,9 +29,16 @@ function MainLayout() {
   const [hoverHighlight, setHoverHighlight] = React.useState(true);
   const [showSeriesNumber, setShowSeriesNumber] = React.useState(false);
   const [showPagination, setShowPagination] = React.useState(false);
-  const [showTooltip, setShowTooltip] = React.useState(true);
+  const [showDefaultActionIcons, setShowDefaultActionIcons] =
+    React.useState(true);
   const [themeName, setThemeName] = React.useState<ThemeName>('default');
 
+  const cornerTooltip = <div>cornerHeader</div>;
+
+  const rowTooltip = <div>rowHeader</div>;
+
+  const colTooltip = <div>colHeader</div>;
+
   const onToggleRender = () => {
     setRender(!render);
   };
@@ -40,7 +52,7 @@ function MainLayout() {
       current: 1,
     },
     tooltip: {
-      showTooltip: showTooltip,
+      showTooltip: true,
       renderTooltip: (spreadsheet) => {
         return new CustomTooltip(spreadsheet);
       },
@@ -51,6 +63,51 @@ function MainLayout() {
     showSeriesNumber: showSeriesNumber,
     selectedCellsSpotlight: spotLight,
     hoverHighlight: hoverHighlight,
+    customSVGIcons: !showDefaultActionIcons && [
+      {
+        name: 'Filter',
+        svg: 'https://gw.alipayobjects.com/zos/antfincdn/gu1Fsz3fw0/filter%26sort_filter.svg',
+      },
+      {
+        name: 'FilterAsc',
+        svg: 'https://gw.alipayobjects.com/zos/antfincdn/UxDm6TCYP3/filter%26sort_asc%2Bfilter.svg',
+      },
+    ],
+    headerActionIcons: !showDefaultActionIcons && [
+      {
+        iconNames: ['Filter'],
+        belongsCell: 'colCell',
+        action: (props: HeaderActionIconProps) => {
+          const { meta, event } = props;
+          meta.spreadsheet.tooltip.show({
+            position: { x: event.clientX, y: event.clientY },
+            element: colTooltip,
+          });
+        },
+      },
+      {
+        iconNames: ['FilterAsc'],
+        belongsCell: 'cornerCell',
+        action: (props: HeaderActionIconProps) => {
+          const { meta, event } = props;
+          meta.spreadsheet.tooltip.show({
+            position: { x: event.clientX, y: event.clientY },
+            element: cornerTooltip,
+          });
+        },
+      },
+      {
+        iconNames: ['SortDown', 'Filter'],
+        belongsCell: 'rowCell',
+        action: (props: HeaderActionIconProps) => {
+          const { meta, event } = props;
+          meta.spreadsheet.tooltip.show({
+            position: { x: event.clientX, y: event.clientY },
+            element: rowTooltip,
+          });
+        },
+      },
+    ],
   };
 
   const onSheetTypeChange = (checked) => {
@@ -116,10 +173,10 @@ function MainLayout() {
               />
 
               <Switch
-                checkedChildren="tooltip打开"
-                unCheckedChildren="tooltip关闭"
-                checked={showTooltip}
-                onChange={setShowTooltip}
+                checkedChildren="默认actionIcons"
+                unCheckedChildren="自定义actionIcons"
+                checked={showDefaultActionIcons}
+                onChange={setShowDefaultActionIcons}
               />
               <Switch
                 checkedChildren="透视表"

diff --git a/packages/s2-core/src/cell/base-cell.ts b/packages/s2-core/src/cell/base-cell.ts
@@ -14,7 +14,10 @@ import {
   TextTheme,
 } from '@/common/interface';
 import { SpreadSheet } from '@/sheet-type';
-import { getContentArea } from '@/utils/cell/cell';
+import {
+  getContentArea,
+  getTextAndFollowingIconPosition,
+} from '@/utils/cell/cell';
 import { renderLine, renderText, updateShapeAttr } from '@/utils/g-renders';
 import { isMobile } from '@/utils/is-mobile';
 import { getEllipsisText, measureTextWidth } from '@/utils/text';
@@ -65,6 +68,21 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
     this.meta = viewMeta;
   }
 
+  public getIconStyle() {
+    return this.theme[this.cellType].icon;
+  }
+
+  public getTextAndIconPosition() {
+    const textStyle = this.getTextStyle();
+    const iconCfg = this.getIconStyle();
+    return getTextAndFollowingIconPosition(
+      this.getContentArea(),
+      textStyle,
+      this.actualTextWidth,
+      iconCfg,
+    );
+  }
+
   /**
    * in case there are more params to be handled
    * @param options any type's rest params
@@ -119,6 +137,10 @@ export abstract class BaseCell<T extends SimpleBBox> extends Group {
     return getContentArea(this.getCellArea(), padding);
   }
 
+  protected getIconPosition() {
+    return this.getTextAndIconPosition().icon;
+  }
+
   protected drawTextShape() {
     const { formattedValue } = this.getFormattedFieldValue();
     const maxTextWidth = this.getMaxTextWidth();

diff --git a/packages/s2-core/src/cell/col-cell.ts b/packages/s2-core/src/cell/col-cell.ts
@@ -1,12 +1,10 @@
 import { Group, Point } from '@antv/g-canvas';
-import { get, isEqual } from 'lodash';
 import { HeaderCell } from './header-cell';
 import {
   CellTypes,
   KEY_GROUP_COL_RESIZE_AREA,
   HORIZONTAL_RESIZE_AREA_KEY_PRE,
 } from '@/common/constant';
-import { GuiIcon } from '@/common/icons';
 import {
   FormatResult,
   TextAlign,
@@ -135,56 +133,6 @@ export class ColCell extends HeaderCell {
     return { x: textX, y: textY };
   }
 
-  private showSortIcon() {
-    const { sortParam } = this.headerConfig;
-    const query = this.meta.query;
-    return (
-      isEqual(get(sortParam, 'query'), query) &&
-      get(sortParam, 'type') !== 'none'
-    );
-  }
-
-  private getActionIconsWidth() {
-    const { icon } = this.getStyle();
-    return this.showSortIcon() ? icon.size + icon.margin.left : 0;
-  }
-
-  protected getActionIconPosition(): Point {
-    const { textBaseline } = this.getTextStyle();
-    const { size } = this.getStyle().icon;
-    const { x, width } = this.getContentArea();
-
-    const iconX = x + width - size;
-    const iconY = getVerticalPosition(
-      this.getContentArea(),
-      textBaseline,
-      size,
-    );
-
-    return { x: iconX, y: iconY };
-  }
-
-  // 绘制排序icon
-  private drawActionIcons() {
-    const { icon } = this.getStyle();
-    if (this.showSortIcon()) {
-      const { sortParam } = this.headerConfig;
-      const position = this.getActionIconPosition();
-      const sortIcon = new GuiIcon({
-        type: get(sortParam, 'type', 'none'),
-        ...position,
-        width: icon.size,
-        height: icon.size,
-      });
-      // TODO：和row-cell统一icon之后需更改
-      sortIcon.on('click', (event) => {
-        this.handleGroupSort(event, this.meta);
-      });
-      this.add(sortIcon);
-      this.actionIcons.push(sortIcon);
-    }
-  }
-
   protected getColResizeAreaKey() {
     return this.meta.key;
   }

diff --git a/packages/s2-core/src/cell/corner-cell.ts b/packages/s2-core/src/cell/corner-cell.ts
@@ -1,5 +1,5 @@
 import { Group, IShape, Point, ShapeAttrs } from '@antv/g-canvas';
-import { isEmpty, isEqual } from 'lodash';
+import { isEmpty, isEqual, max } from 'lodash';
 import { HeaderCell } from './header-cell';
 import {
   CellTypes,
@@ -18,7 +18,7 @@ import {
   renderTreeIcon,
 } from '@/utils/g-renders';
 import { isIPhoneX } from '@/utils/is-mobile';
-import { getEllipsisText } from '@/utils/text';
+import { getEllipsisText, measureTextWidth } from '@/utils/text';
 
 export class CornerCell extends HeaderCell {
   protected headerConfig: CornerHeaderConfig;
@@ -35,10 +35,12 @@ export class CornerCell extends HeaderCell {
   public update() {}
 
   protected initCell() {
+    super.initCell();
     this.textShapes = [];
     this.drawBackgroundShape();
     this.drawTreeIcon();
     this.drawCellText();
+    this.drawActionIcons();
     this.drawBorderShape();
     this.drawResizeArea();
   }
@@ -110,6 +112,11 @@ export class CornerCell extends HeaderCell {
         ),
       );
     }
+
+    this.actualTextWidth = max([
+      measureTextWidth(firstLine, textStyle),
+      measureTextWidth(secondLine, textStyle),
+    ]);
   }
 
   /**
@@ -230,6 +237,20 @@ export class CornerCell extends HeaderCell {
     );
   }
 
+  protected getIconPosition(): Point {
+    const textCfg = this.textShapes?.[0]?.cfg.attrs;
+    const { textBaseline } = this.getTextStyle();
+    const { size, margin } = this.getStyle().icon;
+    const iconX = textCfg?.x + this.actualTextWidth + margin.left;
+    const iconY = getVerticalPosition(
+      this.getContentArea(),
+      textBaseline,
+      size,
+    );
+
+    return { x: iconX, y: iconY };
+  }
+
   private getTreeIconWidth() {
     const { size, margin } = this.getStyle().icon;
     return this.showTreeIcon() ? size + margin.right : 0;
@@ -250,7 +271,7 @@ export class CornerCell extends HeaderCell {
 
   protected getMaxTextWidth(): number {
     const { width } = this.getCellArea();
-    return width - this.getTreeIconWidth();
+    return width - this.getTreeIconWidth() - this.getActionIconsWidth();
   }
 
   protected getTextPosition(): Point {