fix: 修复下钻组件展示错误操作 icon & 兼容低版本 menu 写法

package.json

@@ -24,6 +24,7 @@
   "files": [],
   "scripts": {
     "preinstall": "npx only-allow pnpm",
+    "postinstall": "pnpm core:build-esm",
     "bootstrap": "pnpm install",
     "bootstrap:ci": "pnpm bootstrap --frozen-lockfile",
     "prepare": "husky install",

packages/s2-react-components/__tests__/unit/components/drill-down/__snapshots__/drill-down-spec.tsx.snap

@@ -547,6 +547,101 @@ exports[`DrillDown Component Tests should render custom dataset 1`] = `
 </DocumentFragment>
 `;
 
+exports[`DrillDown Component Tests should render custom menu 1`] = `
+<DocumentFragment>
+  <div
+    class="antv-s2-drill-down"
+  >
+    <header
+      class="antv-s2-drill-down-header"
+    >
+      <div
+        class="antv-s2-drill-down-header-title"
+      >
+        选择下钻维度
+      </div>
+      <button
+        class="ant-btn css-dev-only-do-not-override-3rel02 ant-btn-link"
+        disabled=""
+        type="button"
+      >
+        <span>
+          恢复默认
+        </span>
+      </button>
+    </header>
+    <span
+      class="ant-input-affix-wrapper css-dev-only-do-not-override-3rel02 ant-input-outlined antv-s2-drill-down-search"
+    >
+      <span
+        class="ant-input-prefix"
+      >
+        <span
+          aria-label="search"
+          class="anticon anticon-search"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="search"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
+            />
+          </svg>
+        </span>
+      </span>
+      <input
+        class="ant-input css-dev-only-do-not-override-3rel02"
+        placeholder="搜索字段"
+        type="text"
+        value=""
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        <span
+          class="ant-input-clear-icon ant-input-clear-icon-hidden"
+          role="button"
+          tabindex="-1"
+        >
+          <span
+            aria-label="close-circle"
+            class="anticon anticon-close-circle"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="close-circle"
+              fill="currentColor"
+              fill-rule="evenodd"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"
+              />
+            </svg>
+          </span>
+        </span>
+      </span>
+    </span>
+    <div
+      class="custom-menu"
+    >
+      custom
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`DrillDown Component Tests should render extra content 1`] = `
 <DocumentFragment>
   <div

packages/s2-react-components/__tests__/unit/components/drill-down/drill-down-spec.tsx

@@ -71,4 +71,37 @@ describe('DrillDown Component Tests', () => {
       1,
     );
   });
+
+  test('should render custom menu', () => {
+    const renderMenu = jest.fn(() => <div className="custom-menu">custom</div>);
+    const { asFragment, container } = render(
+      <DrillDown
+        dataSet={[
+          {
+            name: '性别',
+            value: 'sex',
+            type: 'text',
+          },
+        ]}
+        renderMenu={renderMenu}
+      />,
+    );
+
+    expect(asFragment()).toMatchSnapshot();
+    expect(container.querySelector('.custom-menu')).toBeDefined();
+    expect(renderMenu).toHaveBeenCalledWith({
+      className: 'antv-s2-drill-down-menu',
+      items: [
+        {
+          className: 'antv-s2-drill-down-menu-item',
+          disabled: false,
+          icon: expect.anything(),
+          key: 'sex',
+          label: '性别',
+        },
+      ],
+      onSelect: expect.any(Function),
+      selectedKeys: [],
+    });
+  });
 });

packages/s2-react-components/src/components/drill-down/drill-down.tsx

@@ -17,11 +17,12 @@ export const DrillDown: React.FC<DrillDownProps> = React.memo(
     clearText = i18n('恢复默认'),
     searchText = i18n('搜索字段'),
     extra,
-    drillFields,
+    drillFields = [],
     dataSet = [],
     disabledFields,
     getDrillFields,
     setDrillFields,
+    renderMenu,
     ...restProps
   }) => {
     const DRILL_DOWN_ICON_MAP = {
@@ -82,7 +83,7 @@ export const DrillDown: React.FC<DrillDownProps> = React.memo(
       setOptions(getOptions());
     }, [disabledFields]);
 
-    const menusItems: MenuProps['items'] = options.map((option) => {
+    const menuItems: MenuProps['items'] = options.map((option) => {
       return {
         key: option.value,
         label: option.name,
@@ -92,6 +93,13 @@ export const DrillDown: React.FC<DrillDownProps> = React.memo(
       };
     });
 
+    const menuProps: MenuProps = {
+      className: `${DRILL_DOWN_PRE_CLASS}-menu`,
+      selectedKeys: drillFields || [],
+      onSelect: handleSelect,
+      items: menuItems,
+    };
+
     return (
       <div className={cx(DRILL_DOWN_PRE_CLASS, className)} {...restProps}>
         <header className={`${DRILL_DOWN_PRE_CLASS}-header`}>
@@ -119,12 +127,7 @@ export const DrillDown: React.FC<DrillDownProps> = React.memo(
           />
         )}
         {extra}
-        <Menu
-          className={`${DRILL_DOWN_PRE_CLASS}-menu`}
-          selectedKeys={drillFields}
-          onSelect={handleSelect}
-          items={menusItems}
-        />
+        {renderMenu?.(menuProps) ?? <Menu {...menuProps} />}
       </div>
     );
   },

packages/s2-react-components/src/components/drill-down/interface.ts

@@ -2,6 +2,7 @@ import type {
   BaseDrillDownComponentProps,
   BaseDrillDownDataSet,
 } from '@antv/s2';
+import type { MenuProps } from 'antd';
 
 export interface DrillDownDataSet extends BaseDrillDownDataSet {
   icon?: React.ReactNode;
@@ -10,4 +11,5 @@ export interface DrillDownDataSet extends BaseDrillDownDataSet {
 export interface DrillDownProps
   extends BaseDrillDownComponentProps<DrillDownDataSet, React.ReactNode> {
   extra?: React.ReactNode;
+  renderMenu?: (props: MenuProps) => React.ReactNode;
 }

packages/s2-react/playground/config.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable max-classes-per-file */
 /* eslint-disable no-console */
-import { PlusCircleFilled } from '@ant-design/icons';
 import {
   DataCell,
   EMPTY_PLACEHOLDER,
@@ -280,52 +279,12 @@ export const S2TooltipOptions: SheetComponentOptions['tooltip'] = {
         console.log('菜单项点击: ', info, cell);
       },
       items: [
-        {
-          key: 'custom-a',
-          label: '操作1',
-          icon: 'Trend',
-          onClick: (info, cell) => {
-            console.log('操作1点击:', info, cell);
-          },
-          children: [
-            {
-              key: 'custom-a-a',
-              label: '操作 1-1',
-              icon: <PlusCircleFilled />,
-              onClick: (info, cell) => {
-                console.log('操作1-1点击:', info, cell);
-              },
-            },
-          ],
-        },
-        {
-          key: 'custom-b',
-          label: '操作2',
-          icon: 'EyeOutlined',
-          onClick: (info, cell) => {
-            console.log('操作2点击:', info, cell);
-          },
-        },
-        {
-          key: 'custom-c',
-          label: '操作3',
-          icon: 'EyeOutlined',
-          visible: (cell) => {
-            return cell instanceof DataCell;
-          },
-          onClick: (info, cell) => {
-            console.log('操作3点击:', info, cell);
-          },
-        },
         {
           key: 'custom-d',
           label: '操作4',
           icon: 'EyeOutlined',
           visible: (cell) => {
-            // 叶子节点才显示
-            const meta = cell.getMeta();
-
-            return meta.isLeaf;
+            return cell instanceof DataCell;
           },
           onClick: (info, cell) => {
             console.log('操作4点击:', info, cell);
@@ -340,7 +299,7 @@ export const s2Options: SheetComponentOptions = {
   debug: true,
   width: 800,
   height: 600,
-  hierarchyType: 'grid',
+  hierarchyType: 'tree',
   placeholder: {
     cell: EMPTY_PLACEHOLDER,
     empty: {

packages/s2-react/src/components/tooltip/custom-tooltip.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable import/order */
 /* eslint-disable import/no-extraneous-dependencies */
 // eslint-disable-next-line prettier/prettier
-import { BaseTooltip, customMerge, isMobile, SpreadSheet } from '@antv/s2';
+import { BaseTooltip, isMobile, SpreadSheet } from '@antv/s2';
 import React from 'react';
 import {
   forceClearContent,
@@ -32,27 +32,19 @@ export class CustomTooltip extends BaseTooltip<
 
   renderContent() {
     // 配置级 s2.options.tooltip.content = ''
-    const { content: contentFromOptions, operation } =
-      this.spreadsheet.options.tooltip!;
+    const { content: contentFromOptions } = this.spreadsheet.options.tooltip!;
     // 方法级 s2.showTooltip({ content: '' })
     const showOptions = this.options;
     const cell = this.spreadsheet.getCell(showOptions?.event?.target);
     // 优先级: 方法级 > 配置级, 兼容 content 为空字符串的场景
     const content = (showOptions?.content ??
       contentFromOptions) as React.ReactNode;
 
-    const tooltipProps = customMerge<TooltipRenderProps>(
-      {
-        options: {
-          operator: operation,
-        },
-      },
-      {
-        ...showOptions,
-        cell,
-        content,
-      },
-    );
+    const tooltipProps: TooltipRenderProps = {
+      ...showOptions,
+      cell,
+      content,
+    };
 
     if (showOptions?.options?.forceRender) {
       this.forceClearContent();

s2-site/docs/api/components/drill-down.zh.md

@@ -108,6 +108,7 @@ const s2Options = {
 | setDrillFields | 内部设置当前下钻维度的回调                         | `Function` |  |  |  |
 | extra | 自定义插入的节点，插入在搜索框和下钻菜单中间 | `ReactNode` |  |  | 仅 `React` 组件支持此属性 |
 | drillFields | 允许下钻的维度      | `string[]` |  |  | 仅 `React` 组件支持此属性  |
+| renderMenu | 自定义下钻组件      | `(props: MenuProps) => ReactNode` |  |  | 仅 `React` 组件支持此属性  |
 
 ##### DataSet