From 586bcf8d6e400025a6a9ce2e1a3f6d9bbb019e30 Mon Sep 17 00:00:00 2001 From: lijinke666 Date: Wed, 4 Dec 2024 11:01:27 +0800 Subject: [PATCH 1/3] =?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?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 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 + packages/s2-react/playground/config.tsx | 45 +-------- .../src/components/tooltip/custom-tooltip.tsx | 22 ++--- s2-site/docs/api/components/drill-down.zh.md | 1 + 8 files changed, 152 insertions(+), 66 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-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/playground/config.tsx b/packages/s2-react/playground/config.tsx index 7503c06ee2..3a63562e31 100644 --- a/packages/s2-react/playground/config.tsx +++ b/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: , - 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: { 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 From e854c4149bbedc2f32c7f9664d2b807728616e50 Mon Sep 17 00:00:00 2001 From: lijinke666 Date: Wed, 4 Dec 2024 11:13:17 +0800 Subject: [PATCH 2/3] =?UTF-8?q?chore:=20=E8=BF=98=E5=8E=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/interaction/base-interaction/hover.ts | 1 - packages/s2-react/playground/config.tsx | 45 ++++++++++++++++++- 2 files changed, 43 insertions(+), 3 deletions(-) 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/playground/config.tsx b/packages/s2-react/playground/config.tsx index 3a63562e31..7503c06ee2 100644 --- a/packages/s2-react/playground/config.tsx +++ b/packages/s2-react/playground/config.tsx @@ -1,5 +1,6 @@ /* eslint-disable max-classes-per-file */ /* eslint-disable no-console */ +import { PlusCircleFilled } from '@ant-design/icons'; import { DataCell, EMPTY_PLACEHOLDER, @@ -279,12 +280,52 @@ 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: , + 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) => { - return cell instanceof DataCell; + // 叶子节点才显示 + const meta = cell.getMeta(); + + return meta.isLeaf; }, onClick: (info, cell) => { console.log('操作4点击:', info, cell); @@ -299,7 +340,7 @@ export const s2Options: SheetComponentOptions = { debug: true, width: 800, height: 600, - hierarchyType: 'tree', + hierarchyType: 'grid', placeholder: { cell: EMPTY_PLACEHOLDER, empty: { From caba4be9f55cec7ff00cece13d9e4ae8d18f876e Mon Sep 17 00:00:00 2001 From: lijinke666 Date: Wed, 4 Dec 2024 11:21:21 +0800 Subject: [PATCH 3/3] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E5=92=8C=E5=8D=95=E6=B5=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../unit/interaction/base-interaction/hover-spec.ts | 5 ----- s2-site/docs/common/development.zh.md | 2 +- s2-site/docs/manual/contribution.zh.md | 6 +++++- 3 files changed, 6 insertions(+), 7 deletions(-) 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/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