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

* fix: 修复下钻组件展示错误操作 icon & 兼容低版本 menu 写法 * chore: 还原 * chore: 更新文档和单测 --------- Co-authored-by: Wenjun Xu <[email protected]>
antvis · Dec 4, 2024 · 7d171f0 · 7d171f0
1 parent 0b79f27
commit 7d171f0
Show file tree

Hide file tree

Showing 11 changed files with 156 additions and 31 deletions.
diff --git a/package.json b/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",

diff --git a/packages/s2-core/__tests__/unit/interaction/base-interaction/hover-spec.ts b/packages/s2-core/__tests__/unit/interaction/base-interaction/hover-spec.ts
@@ -36,11 +36,6 @@ describe('Interaction Hover Tests', () => {
       hideSummary: true,
       isTotals: undefined,
       onlyShowCellText: true,
-      operator: {
-        menu: {
-          items: [],
-        },
-      },
     },
   ];
 

diff --git a/packages/s2-core/src/interaction/base-interaction/hover.ts b/packages/s2-core/src/interaction/base-interaction/hover.ts
@@ -128,7 +128,6 @@ export class HoverEvent extends BaseEvent implements BaseEventImplement {
       hideSummary: true,
       onlyShowCellText: true,
       enableFormat: true,
-      operator: this.getTooltipOperator(event),
     };
     const data = this.getCellData(meta, options.onlyShowCellText);
 

diff --git a/...ct-components/__tests__/unit/components/drill-down/__snapshots__/drill-down-spec.tsx.snap b/...ct-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

diff --git a/packages/s2-react-components/__tests__/unit/components/drill-down/drill-down-spec.tsx b/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: [],
+    });
+  });
 });
diff --git a/packages/s2-react-components/src/components/drill-down/drill-down.tsx b/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>
     );
   },

diff --git a/packages/s2-react-components/src/components/drill-down/interface.ts b/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;
 }
diff --git a/packages/s2-react/src/components/tooltip/custom-tooltip.tsx b/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();

diff --git a/s2-site/docs/api/components/drill-down.zh.md b/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
 

diff --git a/s2-site/docs/common/development.zh.md b/s2-site/docs/common/development.zh.md
@@ -22,7 +22,7 @@ pnpm build
 pnpm core:start
 
 # 调试 s2-react 和 s2-core（推荐）
-pnpm core:build-esm # 首次运行需要先执行一次
+pnpm core:build-esm # 首次运行需要先执行一次（安装依赖后自动执行）
 pnpm react:playground
 
 # 调试 s2-react-components

diff --git a/s2-site/docs/manual/contribution.zh.md b/s2-site/docs/manual/contribution.zh.md
@@ -59,7 +59,11 @@ tag: Updated
 
 ### 调试功能
 
-根目录运行 `pnpm react:playground`（如果是首次运行，需要先执行一次 `pnpm core:build-esm`) 来运行 `S2`, 可用于调试 `@antv/s2` 和 `@antv/s2-react`, 提供了一些常用的图表场景和配置。
+:::info{title="提示"}
+安装依赖后，会自动构建 `@antv/s2`, 如果是首次运行，并且自动构建失败，提示找不到 `@antv/s2/esm` 之类的报错，手动执行一次 `pnpm core:build-esm` 即可。
+:::
+
+根目录运行 `pnpm react:playground` 来运行 `S2`, 可用于调试 `@antv/s2` 和 `@antv/s2-react`, 提供了一些常用的图表场景和配置。
 
 <img alt="preview" height="600" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*6t8RRbg5x_kAAAAAAAAAAAAADmJ7AQ/original" />