fix(drill-down): values 配置为空时未显示下钻 icon (#1535)

* fix(drill-down): values 配置为空时未显示下钻 icon

* test: update

packages/s2-core/__tests__/unit/sheet-type/pivot-sheet-spec.ts

@@ -1077,6 +1077,33 @@ describe('PivotSheet Tests', () => {
       );
       // modify valueInCols config
       expect(sheet.dataCfg.fields.valueInCols).toBeFalsy();
+
+      sheet.destroy();
+    });
+
+    // https://github.com/antvis/S2/issues/1514
+    it('should not show default action icons if values is empty', () => {
+      const layoutDataCfg: S2DataConfig = customMerge(originalDataCfg, {
+        fields: {
+          values: [],
+          valueInCols: true,
+        },
+      } as S2DataConfig);
+
+      const sheet = new PivotSheet(getContainer(), layoutDataCfg, {
+        width: 400,
+        height: 200,
+        showDefaultHeaderActionIcon: true,
+        hierarchyType: 'tree',
+      });
+      sheet.render();
+
+      sheet.getRowLeafNodes().forEach((node) => {
+        const rowCell = node.belongsCell;
+        expect(get(rowCell, 'actionIcons')).toHaveLength(0);
+      });
+
+      sheet.destroy();
     });
   });
 });

packages/s2-core/src/cell/header-cell.ts

@@ -1,5 +1,14 @@
 import type { Event as CanvasEvent, IShape } from '@antv/g-canvas';
-import { find, first, forEach, get, includes, isEqual, map } from 'lodash';
+import {
+  find,
+  first,
+  forEach,
+  get,
+  includes,
+  isEmpty,
+  isEqual,
+  map,
+} from 'lodash';
 import { BaseCell } from '../cell/base-cell';
 import {
   CellTypes,
@@ -89,7 +98,10 @@ export abstract class HeaderCell extends BaseCell<Node> {
   }
 
   protected showSortIcon() {
-    if (this.spreadsheet.options.showDefaultHeaderActionIcon) {
+    const { options, dataCfg } = this.spreadsheet;
+    const isEmptyValues = isEmpty(dataCfg.fields.values);
+
+    if (options.showDefaultHeaderActionIcon && !isEmptyValues) {
       const { sortParam } = this.headerConfig;
       const query = this.meta.query;
       // sortParam的query，和type本身可能会 undefined
@@ -100,6 +112,7 @@ export abstract class HeaderCell extends BaseCell<Node> {
         sortParam?.type !== 'none'
       );
     }
+
     return false;
   }
 

packages/s2-react/__tests__/spreadsheet/drill-down-spec.tsx

@@ -1,15 +1,22 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
-import type { GuiIcon, Node, RowCell, S2Options, SpreadSheet } from '@antv/s2';
-import * as mockDataConfig from 'tests/data/simple-data.json';
+import {
+  customMerge,
+  GuiIcon,
+  Node,
+  RowCell,
+  S2Options,
+  SpreadSheet,
+} from '@antv/s2';
 import { get, noop } from 'lodash';
+import * as mockDataConfig from '../data/simple-data.json';
 import { type SheetComponentsProps, SheetComponent } from '../../src';
 import { getContainer } from '../util/helpers';
 
 const s2Options: S2Options = {
   width: 600,
-  height: 600,
+  height: 300,
   hierarchyType: 'tree',
 };
 
@@ -53,6 +60,7 @@ describe('Spread Sheet Drill Down Tests', () => {
   });
 
   afterEach(() => {
+    ReactDOM.unmountComponentAtNode(container);
     container?.remove();
   });
 
@@ -112,4 +120,62 @@ describe('Spread Sheet Drill Down Tests', () => {
       EXPECT_DRILL_ITEMS_NUM,
     );
   });
+
+  // https://github.com/antvis/S2/issues/1514
+  test('should render drill down icon and not show sort icon if value is empty', () => {
+    let s2: SpreadSheet;
+
+    act(() => {
+      ReactDOM.render(
+        <SheetComponent
+          options={s2Options}
+          dataCfg={customMerge(mockDataConfig, {
+            fields: {
+              values: [],
+            },
+          })}
+          getSpreadSheet={(instance) => {
+            s2 = instance;
+          }}
+          partDrillDown={partDrillDownParams}
+        />,
+        container,
+      );
+    });
+
+    const rowNodes = s2.getRowNodes().filter((node) => node.rowIndex >= 1);
+
+    rowNodes.forEach((node) => {
+      expect(get(node.belongsCell, 'actionIcons.0.cfg.name')).toEqual(
+        'DrillDownIcon',
+      );
+    });
+  });
+
+  test('should not render drill down icon is displayCondition return false', () => {
+    let s2: SpreadSheet;
+
+    act(() => {
+      ReactDOM.render(
+        <SheetComponent
+          options={s2Options}
+          dataCfg={mockDataConfig}
+          getSpreadSheet={(instance) => {
+            s2 = instance;
+          }}
+          partDrillDown={{
+            ...partDrillDownParams,
+            displayCondition: () => false,
+          }}
+        />,
+        container,
+      );
+    });
+
+    const rowNodes = s2.getRowNodes();
+
+    rowNodes.forEach((node) => {
+      expect(get(node.belongsCell, 'actionIcons')).toHaveLength(0);
+    });
+  });
 });

packages/s2-react/playground/index.tsx

@@ -164,13 +164,14 @@ function MainLayout() {
 
   //  ================== Callback ========================
   const updateOptions = (newOptions: Partial<S2Options<React.ReactNode>>) => {
-    setOptions(customMerge({}, options, newOptions));
+    setOptions(customMerge(options, newOptions));
   };
+
   const updateDataCfg = (newDataCfg: Partial<S2DataConfig>) => {
     const currentDataCfg =
       sheetType === 'pivot' ? pivotSheetDataCfg : tableSheetDataCfg;
 
-    setDataCfg(customMerge({}, currentDataCfg, newDataCfg));
+    setDataCfg(customMerge(currentDataCfg, newDataCfg));
   };
 
   const onAutoAdjustBoundaryChange = (value: TooltipAutoAdjustBoundary) => {

packages/s2-shared/src/utils/drill-down.ts

@@ -1,4 +1,4 @@
-import { i18n, S2Event } from '@antv/s2';
+import { S2Event } from '@antv/s2';
 import type {
   HeaderActionIconProps,
   PartDrillDownDataCache,
@@ -8,7 +8,7 @@ import type {
   PivotDataSet,
   SpreadSheet,
 } from '@antv/s2';
-import { clone, filter, get, isEmpty } from 'lodash';
+import { clone, filter, isEmpty } from 'lodash';
 import type { PartDrillDown, PartDrillDownInfo } from '../interface';
 
 export interface DrillDownParams {
@@ -97,15 +97,21 @@ export const handleActionIconClick = (params: ActionIconParams) => {
  * @param meta 节点
  * @returns
  */
-const defaultDisplayCondition = (meta: Node) => {
-  const iconLevel = get(meta, 'spreadsheet.dataCfg.fields.rows.length') - 1;
+const defaultPartDrillDownDisplayCondition = (meta: Node) => {
+  const s2 = meta.spreadsheet;
+  const { fields } = s2.dataCfg;
+  const iconLevel = fields.rows?.length - 1;
+
+  // 当 values 为空时, 会将 dataCfg.fields.valueInCols 强制置为 false, 导致下钻 icon 不显示
+  // 兼容初始 values 为空, 默认需要显示下钻 icon, 通过下钻动态改变 values 的场景  https://github.com/antvis/S2/issues/1514
+  const isValueInCols = !isEmpty(fields.values) ? s2.isValueInCols() : true;
 
   // 只有数值置于列头且为树状分层结构时才支持下钻
   return (
     iconLevel <= meta.level &&
-    meta.spreadsheet.options.hierarchyType === 'tree' &&
-    meta.spreadsheet.isValueInCols() &&
-    meta.label !== i18n('总计')
+    s2.isHierarchyTreeType() &&
+    isValueInCols &&
+    !meta.isGrandTotals
   );
 };
 
@@ -131,7 +137,7 @@ export const buildDrillDownOptions = (
       iconNames: ['DrillDownIcon'],
       defaultHide: true,
       displayCondition:
-        partDrillDown.displayCondition || defaultDisplayCondition,
+        partDrillDown.displayCondition || defaultPartDrillDownDisplayCondition,
       action: (actionIconProps: HeaderActionIconProps) => {
         const { iconName, meta, event } = actionIconProps;
         if (iconName === 'DrillDownIcon') {