From 7d171f037e7f52cc49ad02ddf56598aa477bf043 Mon Sep 17 00:00:00 2001 From: Jinke Li Date: Wed, 4 Dec 2024 14:21:03 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E4=B8=8B=E9=92=BB?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B1=95=E7=A4=BA=E9=94=99=E8=AF=AF=E6=93=8D?= =?UTF-8?q?=E4=BD=9C=20icon=20&=20=E5=85=BC=E5=AE=B9=E4=BD=8E=E7=89=88?= =?UTF-8?q?=E6=9C=AC=20menu=20=E5=86=99=E6=B3=95=20(#3011)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 修复下钻组件展示错误操作 icon & 兼容低版本 menu 写法 * chore: 还原 * chore: 更新文档和单测 --------- Co-authored-by: Wenjun Xu <906626481@qq.com> --- package.json | 1 + .../base-interaction/hover-spec.ts | 5 - .../src/interaction/base-interaction/hover.ts | 1 - .../__snapshots__/drill-down-spec.tsx.snap | 95 +++++++++++++++++++ .../components/drill-down/drill-down-spec.tsx | 33 +++++++ .../src/components/drill-down/drill-down.tsx | 19 ++-- .../src/components/drill-down/interface.ts | 2 + .../src/components/tooltip/custom-tooltip.tsx | 22 ++--- s2-site/docs/api/components/drill-down.zh.md | 1 + s2-site/docs/common/development.zh.md | 2 +- s2-site/docs/manual/contribution.zh.md | 6 +- 11 files changed, 156 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index 074e589c8b..6768367841 100644 --- 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 index 3f573fa2c4..c3bb8d2760 100644 --- 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 index 889c25ed3f..07c66584f1 100644 --- 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/packages/s2-react-components/__tests__/unit/components/drill-down/__snapshots__/drill-down-spec.tsx.snap b/packages/s2-react-components/__tests__/unit/components/drill-down/__snapshots__/drill-down-spec.tsx.snap index bd18855843..4741c578be 100644 --- a/packages/s2-react-components/__tests__/unit/components/drill-down/__snapshots__/drill-down-spec.tsx.snap +++ b/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`] = ` `; +exports[`DrillDown Component Tests should render custom menu 1`] = ` + +
+
+
+ 选择下钻维度 +
+ +
+ + + + + + + + + + + + + + + +
+ custom +
+
+
+`; + exports[`DrillDown Component Tests should render extra content 1`] = `
{ 1, ); }); + + test('should render custom menu', () => { + const renderMenu = jest.fn(() =>
custom
); + const { asFragment, container } = render( + , + ); + + 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 index b60d3a9ae3..c07fcdb842 100644 --- 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 = 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 = 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 = React.memo( }; }); + const menuProps: MenuProps = { + className: `${DRILL_DOWN_PRE_CLASS}-menu`, + selectedKeys: drillFields || [], + onSelect: handleSelect, + items: menuItems, + }; + return (
@@ -119,12 +127,7 @@ export const DrillDown: React.FC = React.memo( /> )} {extra} - + {renderMenu?.(menuProps) ?? }
); }, diff --git a/packages/s2-react-components/src/components/drill-down/interface.ts b/packages/s2-react-components/src/components/drill-down/interface.ts index 49c6b9cff2..0d0a4ac79c 100644 --- 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 { 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 index 5f3dc7f67a..12c6c7f605 100644 --- 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,8 +32,7 @@ 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); @@ -41,18 +40,11 @@ export class CustomTooltip extends BaseTooltip< const content = (showOptions?.content ?? contentFromOptions) as React.ReactNode; - const tooltipProps = customMerge( - { - 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 index 70dc4f8ca1..0d9c706cf6 100644 --- 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 index edb9d34e39..de69eff9c8 100644 --- 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 index 59d8ab9f22..cfa1fe4318 100644 --- 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`, 提供了一些常用的图表场景和配置。 preview