From 5c5842d66a74f58a294b732c66694f96ceed2c08 Mon Sep 17 00:00:00 2001 From: lijinke666 Date: Wed, 8 May 2024 15:50:17 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=AF=BC=E5=87=BA=20C?= =?UTF-8?q?SV=20=E6=97=B6=E5=88=86=E9=9A=94=E7=AC=A6=E9=94=99=E8=AF=AF?= =?UTF-8?q?=E5=AF=BC=E8=87=B4=E7=9A=84=E5=B1=95=E7=A4=BA=E6=A0=BC=E5=BC=8F?= =?UTF-8?q?=E9=94=99=E8=AF=AF=20close=20#2701?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit BREAKING CHANGE: Export 组件 和 asyncGetAllPlainData, copyToClipboard 的是否异步导出参数统一为 async --- .../s2-core/__tests__/bugs/issue-446-spec.ts | 6 ++-- .../s2-core/__tests__/bugs/issue-565-spec.ts | 4 +-- .../__snapshots__/export-pivot-spec.ts.snap | 24 +++++++-------- .../__snapshots__/export-table-spec.ts.snap | 4 +-- .../unit/utils/export/export-pivot-spec.ts | 11 +++---- .../unit/utils/export/export-table-spec.ts | 20 ++++++++----- packages/s2-core/__tests__/util/helpers.ts | 3 +- packages/s2-core/src/common/constant/copy.ts | 6 ++-- .../s2-core/src/common/interface/export.ts | 29 ++++++++++++++++--- .../utils/export/copy/base-data-cell-copy.ts | 4 +-- .../s2-core/src/utils/export/copy/common.ts | 14 +++++---- .../utils/export/copy/pivot-data-cell-copy.ts | 7 +++-- .../src/utils/export/copy/table-copy.ts | 13 +++------ packages/s2-core/src/utils/export/utils.ts | 6 ++-- .../sheets/strategy-sheet/index-spec.tsx | 13 +++++---- packages/s2-react/playground/config.tsx | 4 +-- .../s2-react/src/components/export/index.tsx | 18 +++++++----- s2-site/docs/api/components/export.en.md | 2 +- s2-site/docs/api/components/export.zh.md | 2 +- s2-site/docs/common/copy-export.en.md | 2 +- s2-site/docs/common/copy-export.zh.md | 20 ++++++++----- s2-site/docs/manual/migration-v2.zh.md | 20 ++++++++++++- 22 files changed, 145 insertions(+), 87 deletions(-) diff --git a/packages/s2-core/__tests__/bugs/issue-446-spec.ts b/packages/s2-core/__tests__/bugs/issue-446-spec.ts index f168ed5553..459fb24ddc 100644 --- a/packages/s2-core/__tests__/bugs/issue-446-spec.ts +++ b/packages/s2-core/__tests__/bugs/issue-446-spec.ts @@ -6,7 +6,7 @@ */ import { getContainer } from '../util/helpers'; import * as mockDataConfig from '../data/data-issue-446.json'; -import type { S2Options } from '../../src'; +import { TAB_SEPARATOR, type S2Options } from '../../src'; import { TableSheet } from '@/sheet-type'; import { asyncGetAllPlainData } from '@/utils'; @@ -25,7 +25,7 @@ describe('export', () => { await s2.render(); const data = await asyncGetAllPlainData({ sheetInstance: s2, - split: '\t', + split: TAB_SEPARATOR, formatOptions: true, }); @@ -50,7 +50,7 @@ describe('export', () => { await s2.render(); const data = await asyncGetAllPlainData({ sheetInstance: s2, - split: '\t', + split: TAB_SEPARATOR, }); expect(data.split('\n').length).toEqual(3); diff --git a/packages/s2-core/__tests__/bugs/issue-565-spec.ts b/packages/s2-core/__tests__/bugs/issue-565-spec.ts index 3c1f2da1a2..d38bf67c43 100644 --- a/packages/s2-core/__tests__/bugs/issue-565-spec.ts +++ b/packages/s2-core/__tests__/bugs/issue-565-spec.ts @@ -6,7 +6,7 @@ */ import * as mockDataConfig from 'tests/data/data-issue-565.json'; import { getContainer } from 'tests/util/helpers'; -import type { S2Options } from '../../src'; +import { TAB_SEPARATOR, type S2Options } from '../../src'; import { PivotSheet } from '@/sheet-type'; import { asyncGetAllPlainData } from '@/utils'; @@ -24,7 +24,7 @@ describe('Export data in pivot tree mode', () => { const data = await asyncGetAllPlainData({ sheetInstance: s2, - split: '\t', + split: TAB_SEPARATOR, }); const rows = data.split('\n'); diff --git a/packages/s2-core/__tests__/unit/utils/export/__snapshots__/export-pivot-spec.ts.snap b/packages/s2-core/__tests__/unit/utils/export/__snapshots__/export-pivot-spec.ts.snap index 9e7c0174e3..f1dc98546e 100644 --- a/packages/s2-core/__tests__/unit/utils/export/__snapshots__/export-pivot-spec.ts.snap +++ b/packages/s2-core/__tests__/unit/utils/export/__snapshots__/export-pivot-spec.ts.snap @@ -44,8 +44,8 @@ province city number number number number exports[`PivotSheet Export Test should export correct data in grid mode with totals in col 1`] = ` " 类别 家具 家具 家具 办公用品 办公用品 办公用品 总计 - 子类别 桌子 沙发 小计 笔 纸张 小计 -省份 城市 数量 数量 数量 数量 + 子类别 桌子 沙发 小计 笔 纸张 小计 +省份 城市 数量 数量 数量 数量 浙江省 杭州市 7789 5343 13132 945 1343 2288 15420 浙江省 绍兴市 2367 632 2999 1304 1354 2658 5657 浙江省 宁波市 3877 7234 11111 1145 1523 2668 13779 @@ -61,7 +61,7 @@ exports[`PivotSheet Export Test should export correct data in grid mode with tot exports[`PivotSheet Export Test should export correct data in grid mode with totals in row 1`] = ` " 类别 家具 家具 家具 办公用品 办公用品 办公用品 总计 - 子类别 桌子 沙发 小计 笔 纸张 小计 + 子类别 桌子 沙发 小计 笔 纸张 小计 浙江省 杭州市 数量 7789 5343 13132 945 1343 2288 15420 浙江省 绍兴市 数量 2367 632 2999 1304 1354 2658 5657 浙江省 宁波市 数量 3877 7234 11111 1145 1523 2668 13779 @@ -148,11 +148,11 @@ exports[`PivotSheet Export Test should export correct data when data is incomple " province 浙江省 浙江省 浙江省 浙江省 四川省 四川省 四川省 四川省 city 杭州市 绍兴市 宁波市 舟山市 成都市 绵阳市 南充市 乐山市 type sub_type number number number number number number number number -家具 +家具 家具 桌子 2367 3877 4342 1723 1822 1943 2330 家具 沙发 632 7234 834 2451 2244 2333 2445 -办公用品 -办公用品 笔 +办公用品 +办公用品 笔 办公用品 纸张 1354 1523 1634 4004 3077 3551 352" `; @@ -214,9 +214,9 @@ province city 数值 数值 数值 数值 exports[`PivotSheet Export Test should export correct data with formatter for custom column headers 1`] = ` " 自定义节点 a-1 自定义节点 a-1 自定义节点 a-1 自定义节点 a-1 自定义节点 a-2 - 自定义节点 a-2 自定义节点 a-1-1 自定义节点 a-1-1 自定义节点 a-1-2 -type sub_type 指标1 指标2 -家具 桌子 13 2 + 自定义节点 a-2 自定义节点 a-1-1 自定义节点 a-1-1 自定义节点 a-1-2 +type sub_type 指标1 指标2 +家具 桌子 13 2 家具 椅子 11 8 " `; @@ -225,11 +225,11 @@ exports[`PivotSheet Export Test should export correct data with formatter for cu 自定义节点 a-1 自定义节点 a-1-1 指标1 桌子 椅子 自定义节点 a-1 自定义节点 a-1-1 指标1 13 11 自定义节点 a-1 自定义节点 a-1-1 指标2 2 8 -自定义节点 a-1 自定义节点 a-1-2 +自定义节点 a-1 自定义节点 a-1-2 自定义节点 a-2 " `; -exports[`PivotSheet Export Test should export correctly data for single row data by { isAsyncExport: false } 1`] = ` +exports[`PivotSheet Export Test should export correctly data for single row data by { async: false } 1`] = ` Array [ " type 笔 笔", "province city price cost", @@ -237,7 +237,7 @@ Array [ ] `; -exports[`PivotSheet Export Test should export correctly data for single row data by { isAsyncExport: true } 1`] = ` +exports[`PivotSheet Export Test should export correctly data for single row data by { async: true } 1`] = ` Array [ " type 笔 笔", "province city price cost", diff --git a/packages/s2-core/__tests__/unit/utils/export/__snapshots__/export-table-spec.ts.snap b/packages/s2-core/__tests__/unit/utils/export/__snapshots__/export-table-spec.ts.snap index 481d0ef543..a8ac12216d 100644 --- a/packages/s2-core/__tests__/unit/utils/export/__snapshots__/export-table-spec.ts.snap +++ b/packages/s2-core/__tests__/unit/utils/export/__snapshots__/export-table-spec.ts.snap @@ -278,14 +278,14 @@ exports[`TableSheet Export Test should export correct data with totals 1`] = ` 浙江省-province 家具-type 沙发 5343" `; -exports[`TableSheet Export Test should export correctly data for single row data by { isAsyncExport: false } 1`] = ` +exports[`TableSheet Export Test should export correctly data for single row data by { async: false } 1`] = ` Array [ "province city type price cost", "浙江 杭州 笔 1 ", ] `; -exports[`TableSheet Export Test should export correctly data for single row data by { isAsyncExport: true } 1`] = ` +exports[`TableSheet Export Test should export correctly data for single row data by { async: true } 1`] = ` Array [ "province city type price cost", "浙江 杭州 笔 1 ", diff --git a/packages/s2-core/__tests__/unit/utils/export/export-pivot-spec.ts b/packages/s2-core/__tests__/unit/utils/export/export-pivot-spec.ts index 440795bae6..f1e9eae22f 100644 --- a/packages/s2-core/__tests__/unit/utils/export/export-pivot-spec.ts +++ b/packages/s2-core/__tests__/unit/utils/export/export-pivot-spec.ts @@ -10,6 +10,7 @@ import { } from '../../../data/custom-grid-simple-fields'; import { CustomGridData } from '../../../data/data-custom-grid'; import { expectMatchSnapshot } from '../../../util/helpers'; +import { CSV_SEPARATOR, TAB_SEPARATOR } from '../../../../src/common/constant'; import { CopyMIMEType } from '@/common/interface/export'; describe('PivotSheet Export Test', () => { @@ -51,7 +52,7 @@ describe('PivotSheet Export Test', () => { sheetInstance: s2, split: NewTab, formatOptions: true, - isAsyncExport: true, + async: true, }); expect(asyncData).toMatchSnapshot(); @@ -84,7 +85,7 @@ describe('PivotSheet Export Test', () => { sheetInstance: s2, split: NewTab, formatOptions: true, - isAsyncExport: true, + async: true, }); expect(asyncData).toMatchSnapshot(); @@ -356,7 +357,7 @@ describe('PivotSheet Export Test', () => { it('should export correct data When the split separator is configured', async () => { const data = await asyncGetAllPlainData({ sheetInstance: pivotSheet, - split: ',', + split: CSV_SEPARATOR, formatOptions: { formatHeader: true, }, @@ -392,7 +393,7 @@ describe('PivotSheet Export Test', () => { }); // https://github.com/antvis/S2/issues/2681 - it.each([{ isAsyncExport: false }, { isAsyncExport: true }])( + it.each([{ async: false }, { async: true }])( 'should export correctly data for single row data by %o', async (options) => { const sheet = createPivotSheet({ width: 600, height: 400 }); @@ -404,7 +405,7 @@ describe('PivotSheet Export Test', () => { await sheet.render(); const data = await asyncGetAllPlainData({ sheetInstance: sheet, - split: '\t', + split: TAB_SEPARATOR, ...options, }); diff --git a/packages/s2-core/__tests__/unit/utils/export/export-table-spec.ts b/packages/s2-core/__tests__/unit/utils/export/export-table-spec.ts index 186fd3475c..79219313da 100644 --- a/packages/s2-core/__tests__/unit/utils/export/export-table-spec.ts +++ b/packages/s2-core/__tests__/unit/utils/export/export-table-spec.ts @@ -7,7 +7,13 @@ import { expectMatchSnapshot, getContainer, } from '../../../util/helpers'; -import { FormatOptions, S2DataConfig, S2Options } from '../../../../src'; +import { + CSV_SEPARATOR, + FormatOptions, + S2DataConfig, + S2Options, + TAB_SEPARATOR, +} from '../../../../src'; import { customColSimpleColumns } from '../../../data/custom-table-col-fields'; import { NewLine, NewTab } from '@/common'; import { CopyMIMEType } from '@/common/interface/export'; @@ -132,7 +138,7 @@ describe('TableSheet Export Test', () => { formatOptions: { formatHeader: true, }, - isAsyncExport: true, + async: true, }); testCase(asyncData); @@ -257,7 +263,7 @@ describe('TableSheet Export Test', () => { await tableSheet.render(); const data = await asyncGetAllPlainData({ sheetInstance: tableSheet, - split: ',', + split: CSV_SEPARATOR, formatOptions: true, }); // 只取前10行数据 @@ -307,7 +313,7 @@ describe('TableSheet Export Test', () => { await tableSheet.render(); const data = await asyncGetAllPlainData({ sheetInstance: tableSheet, - split: ',', + split: CSV_SEPARATOR, formatOptions: { formatHeader: true, }, @@ -352,7 +358,7 @@ describe('TableSheet Export Test', () => { await tableSheet.render(); const data = await asyncGetAllPlainData({ sheetInstance: tableSheet, - split: ',', + split: CSV_SEPARATOR, formatOptions: { formatHeader: true, }, @@ -362,7 +368,7 @@ describe('TableSheet Export Test', () => { }); // https://github.com/antvis/S2/issues/2681 - it.each([{ isAsyncExport: false }, { isAsyncExport: true }])( + it.each([{ async: false }, { async: true }])( 'should export correctly data for single row data by %o', async (options) => { const tableSheet = createTableSheet({ width: 600, height: 400 }); @@ -377,7 +383,7 @@ describe('TableSheet Export Test', () => { await tableSheet.render(); const data = await asyncGetAllPlainData({ sheetInstance: tableSheet, - split: '\t', + split: TAB_SEPARATOR, ...options, }); diff --git a/packages/s2-core/__tests__/util/helpers.ts b/packages/s2-core/__tests__/util/helpers.ts index 3f00039271..7e266de276 100644 --- a/packages/s2-core/__tests__/util/helpers.ts +++ b/packages/s2-core/__tests__/util/helpers.ts @@ -22,6 +22,7 @@ import { EventController, FormatOptions, asyncGetAllPlainData, + TAB_SEPARATOR, } from '../../src'; import { assembleOptions, assembleDataCfg } from '.'; @@ -379,7 +380,7 @@ export const expectMatchSnapshot = async ( await s2.render(); const data = await asyncGetAllPlainData({ sheetInstance: s2, - split: '\t', + split: TAB_SEPARATOR, formatOptions, }); diff --git a/packages/s2-core/src/common/constant/copy.ts b/packages/s2-core/src/common/constant/copy.ts index d3818f24a8..479eb44440 100644 --- a/packages/s2-core/src/common/constant/copy.ts +++ b/packages/s2-core/src/common/constant/copy.ts @@ -4,9 +4,11 @@ export enum CopyType { ROW, } -export const NewLine = '\r\n'; +export const LINE_SEPARATOR = '\r\n'; -export const NewTab = '\t'; +export const TAB_SEPARATOR = '\t'; + +export const CSV_SEPARATOR = ','; // 每次异步渲染数据的阈值 export const AsyncRenderThreshold = 5000; diff --git a/packages/s2-core/src/common/interface/export.ts b/packages/s2-core/src/common/interface/export.ts index 4bda53072d..2cb14793ab 100644 --- a/packages/s2-core/src/common/interface/export.ts +++ b/packages/s2-core/src/common/interface/export.ts @@ -50,7 +50,7 @@ export interface CopyOrExportConfig { formatOptions?: FormatOptions; separator?: string; customTransformer?: (transformer: Transformer) => Partial; - isAsyncExport?: boolean; + async?: boolean; } export interface CopyAndExportUnifyConfig { @@ -59,16 +59,37 @@ export interface CopyAndExportUnifyConfig { formatData: boolean; selectedCells: CellMeta[]; transformers: Transformer; - isAsyncExport: boolean; + async: boolean; } export interface CopyAllDataParams { + /** + * 表格实例 + */ sheetInstance: SpreadSheet; + + /** + * 数据分割符 + * @example "\t" + */ split?: string; + + /** + * 格式化配置 + * @example { formatHeader: true, formatData: true } + */ formatOptions?: FormatOptions; + + /** + * 导出时支持自定义 (transformer) 数据导出格式化方法 + * @see https://s2.antv.antgroup.com/manual/advanced/interaction/copy + */ customTransformer?: (transformer: Transformer) => Partial; - /** 是否开启异步导出 */ - isAsyncExport?: boolean; + + /** + * 是否开启异步复制/导出 + */ + async?: boolean; } export interface SheetCopyConstructorParams { diff --git a/packages/s2-core/src/utils/export/copy/base-data-cell-copy.ts b/packages/s2-core/src/utils/export/copy/base-data-cell-copy.ts index bccfc3777b..1f26f4db69 100644 --- a/packages/s2-core/src/utils/export/copy/base-data-cell-copy.ts +++ b/packages/s2-core/src/utils/export/copy/base-data-cell-copy.ts @@ -1,4 +1,4 @@ -import { NewTab, type DataItem } from '../../../common'; +import { TAB_SEPARATOR, type DataItem } from '../../../common'; import type { CopyableHTML, CopyablePlain, @@ -51,7 +51,7 @@ export abstract class BaseDataCellCopy { protected matrixTransformer( dataMatrix: string[][], - separator = NewTab, + separator = TAB_SEPARATOR, ): [CopyablePlain, CopyableHTML] { return [ this.matrixPlainTextTransformer(dataMatrix, separator), diff --git a/packages/s2-core/src/utils/export/copy/common.ts b/packages/s2-core/src/utils/export/copy/common.ts index 07920b0bbc..5ac9d81560 100644 --- a/packages/s2-core/src/utils/export/copy/common.ts +++ b/packages/s2-core/src/utils/export/copy/common.ts @@ -1,7 +1,7 @@ import { escape, map, max } from 'lodash'; import type { Node } from '../../../facet/layout/node'; import type { DataItem } from '../../../common'; -import { NewLine, NewTab, ROOT_NODE_ID } from '../../../common'; +import { LINE_SEPARATOR, TAB_SEPARATOR, ROOT_NODE_ID } from '../../../common'; import { type CopyableHTML, type CopyablePlain, @@ -18,11 +18,13 @@ import type { BaseDataSet } from './../../../data-set/base-data-set'; // 把 string[][] 矩阵转换成 CopyablePlain export const matrixPlainTextTransformer = ( dataMatrix: DataItem[][], - separator = NewTab, + separator = TAB_SEPARATOR, ): CopyablePlain => { return { type: CopyMIMEType.PLAIN, - content: map(dataMatrix, (line) => line.join(separator)).join(NewLine), + content: map(dataMatrix, (line) => line.join(separator)).join( + LINE_SEPARATOR, + ), }; }; @@ -183,10 +185,10 @@ export function unifyConfig({ }, config: { formatOptions = false, - separator = NewTab, + separator = TAB_SEPARATOR, selectedCells = [], customTransformer, - isAsyncExport = false, + async = false, }, isExport, }: SheetCopyConstructorParams): CopyAndExportUnifyConfig { @@ -207,7 +209,7 @@ export function unifyConfig({ transformers, formatData, formatHeader, - isAsyncExport, + async, }; } diff --git a/packages/s2-core/src/utils/export/copy/pivot-data-cell-copy.ts b/packages/s2-core/src/utils/export/copy/pivot-data-cell-copy.ts index 7a7f6b5954..33179bb360 100644 --- a/packages/s2-core/src/utils/export/copy/pivot-data-cell-copy.ts +++ b/packages/s2-core/src/utils/export/copy/pivot-data-cell-copy.ts @@ -400,7 +400,7 @@ export class PivotDataCellCopy extends BaseDataCellCopy { let dataMatrix: string[][] = []; // 把两类导出都封装成异步的，保证导出类型的一致 - if (this.config.isAsyncExport) { + if (this.config.async) { dataMatrix = (await this.getDataMatrixByHeaderNodeRIC()) as string[][]; } else { dataMatrix = (await Promise.resolve( @@ -466,7 +466,8 @@ export const processSelectedAllPivot = ( export const asyncProcessSelectedAllPivot = ( params: CopyAllDataParams, ): Promise => { - const { sheetInstance, split, formatOptions, customTransformer } = params; + const { sheetInstance, split, formatOptions, customTransformer, async } = + params; const pivotDataCellCopy = new PivotDataCellCopy({ spreadsheet: sheetInstance, isExport: true, @@ -474,7 +475,7 @@ export const asyncProcessSelectedAllPivot = ( separator: split, formatOptions, customTransformer, - isAsyncExport: true, + async: async ?? true, }, }); diff --git a/packages/s2-core/src/utils/export/copy/table-copy.ts b/packages/s2-core/src/utils/export/copy/table-copy.ts index b374025b6e..e421c19089 100644 --- a/packages/s2-core/src/utils/export/copy/table-copy.ts +++ b/packages/s2-core/src/utils/export/copy/table-copy.ts @@ -228,7 +228,7 @@ class TableDataCellCopy extends BaseDataCellCopy { } async asyncProcessSelectedTable(allSelected = false): Promise { - const matrix = this.config.isAsyncExport + const matrix = this.config.async ? await this.getDataMatrixRIC() : await Promise.resolve(this.getDataMatrix()); @@ -269,13 +269,8 @@ export const processSelectedTableByHeader = ( export const asyncProcessSelectedAllTable = ( params: CopyAllDataParams, ): Promise => { - const { - sheetInstance, - split, - formatOptions, - customTransformer, - isAsyncExport, - } = params; + const { sheetInstance, split, formatOptions, customTransformer, async } = + params; const tableDataCellCopy = new TableDataCellCopy({ spreadsheet: sheetInstance, config: { @@ -283,7 +278,7 @@ export const asyncProcessSelectedAllTable = ( separator: split, formatOptions, customTransformer, - isAsyncExport: true ?? isAsyncExport, + async: async ?? true, }, isExport: true, }); diff --git a/packages/s2-core/src/utils/export/utils.ts b/packages/s2-core/src/utils/export/utils.ts index 4525ffb91c..1b84c13d3e 100644 --- a/packages/s2-core/src/utils/export/utils.ts +++ b/packages/s2-core/src/utils/export/utils.ts @@ -67,11 +67,11 @@ export const copyToClipboardByClipboard = (data: Copyable): Promise => /** * @name 复制数据 * @param data 数据源 - * @param sync 同步复制 + * @param async 异步复制 */ export const copyToClipboard = ( data: Copyable | string, - sync = false, + async = true, ): Promise => { let copyableItem: Copyable; @@ -84,7 +84,7 @@ export const copyToClipboard = ( copyableItem = data; } - if (!navigator.clipboard || !window.ClipboardItem || sync) { + if (!navigator.clipboard || !window.ClipboardItem || !async) { return copyToClipboardByExecCommand(copyableItem); } diff --git a/packages/s2-react/__tests__/unit/components/sheets/strategy-sheet/index-spec.tsx b/packages/s2-react/__tests__/unit/components/sheets/strategy-sheet/index-spec.tsx index fbe291cd0d..abfcc57966 100644 --- a/packages/s2-react/__tests__/unit/components/sheets/strategy-sheet/index-spec.tsx +++ b/packages/s2-react/__tests__/unit/components/sheets/strategy-sheet/index-spec.tsx @@ -7,6 +7,7 @@ import { SpreadSheet, customMerge, getCellMeta, + TAB_SEPARATOR, type GEvent, type S2DataConfig, } from '@antv/s2'; @@ -303,7 +304,7 @@ describe(' Tests', () => { await waitFor(() => { const result = strategyCopy({ sheetInstance: s2, - split: '\t', + split: TAB_SEPARATOR, formatOptions: true, }); @@ -330,7 +331,7 @@ describe(' Tests', () => { const result = strategyCopy({ sheetInstance: s2, - split: '\t', + split: TAB_SEPARATOR, formatOptions: true, }); @@ -346,7 +347,7 @@ describe(' Tests', () => { const result = strategyCopy({ sheetInstance: s2, - split: '\t', + split: TAB_SEPARATOR, formatOptions: true, }); @@ -364,7 +365,7 @@ describe(' Tests', () => { */ const result = strategyCopy({ sheetInstance: s2, - split: '\t', + split: TAB_SEPARATOR, formatOptions: true, }); @@ -393,7 +394,7 @@ describe(' Tests', () => { */ const result = strategyCopy({ sheetInstance: s2, - split: '\t', + split: TAB_SEPARATOR, formatOptions: true, }); @@ -410,7 +411,7 @@ describe(' Tests', () => { await waitFor(() => { const result = strategyCopy({ sheetInstance: s2, - split: '\t', + split: TAB_SEPARATOR, formatOptions: true, }); const rows = result.split('\n'); diff --git a/packages/s2-react/playground/config.tsx b/packages/s2-react/playground/config.tsx index f9f4c3401d..c87f7ec4ee 100644 --- a/packages/s2-react/playground/config.tsx +++ b/packages/s2-react/playground/config.tsx @@ -315,9 +315,9 @@ export const s2Options: SheetComponentOptions = { debug: true, width: 800, height: 600, - hierarchyType: 'tree', + hierarchyType: 'grid', seriesNumber: { - enable: true, + enable: false, }, transformCanvasConfig() { return { diff --git a/packages/s2-react/src/components/export/index.tsx b/packages/s2-react/src/components/export/index.tsx index 62305e2173..c6a9322d84 100644 --- a/packages/s2-react/src/components/export/index.tsx +++ b/packages/s2-react/src/components/export/index.tsx @@ -1,5 +1,5 @@ import { - NewTab, + TAB_SEPARATOR, S2_PREFIX_CLS, SpreadSheet, asyncGetAllPlainData, @@ -7,6 +7,7 @@ import { download, i18n, type CopyAllDataParams, + CSV_SEPARATOR, } from '@antv/s2'; import { Button, Dropdown, message, type DropDownProps } from 'antd'; import cx from 'classnames'; @@ -24,7 +25,7 @@ export interface ExportBaseProps { successText?: string; errorText?: string; fileName?: string; - syncCopy?: boolean; + async?: boolean; // ref: https://ant.design/components/dropdown-cn/#API dropdown?: DropDownProps; customCopyMethod?: (params: CopyAllDataParams) => Promise | string; @@ -38,7 +39,7 @@ export const Export: React.FC = React.memo((props) => { const { className, icon, - syncCopy = false, + async = true, copyOriginalText = i18n('复制原始数据'), copyFormatText = i18n('复制格式化数据'), downloadOriginalText = i18n('下载原始数据'), @@ -61,14 +62,15 @@ export const Export: React.FC = React.memo((props) => { const copyData = async (isFormat: boolean) => { const params: CopyAllDataParams = { sheetInstance: sheet, - split: NewTab, + split: TAB_SEPARATOR, formatOptions: isFormat, + async, }; const data = await (customCopyMethod?.(params) || asyncGetAllPlainData(params)); - copyToClipboard(data, syncCopy) + copyToClipboard(data, async) .then(() => { messageApi.success(successText); }) @@ -82,8 +84,10 @@ export const Export: React.FC = React.memo((props) => { const downloadData = async (isFormat: boolean) => { const data = await asyncGetAllPlainData({ sheetInstance: sheet, - split: NewTab, + // 导出的是 csv 格式, 复制时需要以逗号分割 https://github.com/antvis/S2/issues/2701 + split: CSV_SEPARATOR, formatOptions: isFormat, + async, }); try { @@ -145,6 +149,6 @@ export const Export: React.FC = React.memo((props) => { Export.displayName = 'Export'; Export.defaultProps = { - syncCopy: false, + async: true, fileName: 'sheet', }; diff --git a/s2-site/docs/api/components/export.en.md b/s2-site/docs/api/components/export.en.md index 197b477ee6..fee942fb8e 100644 --- a/s2-site/docs/api/components/export.en.md +++ b/s2-site/docs/api/components/export.en.md @@ -28,7 +28,7 @@ tag: Updated | successText | Successful operation copy | `string` | | | | errorText | Operation failure copy | `string` | | | | fileName | Customize the download file name | `string` | `sheet` | | -| syncCopy | Copy data synchronously (default is asynchronous) | `boolean` | `false` | | +| async | Copy data asynchronously (default is asynchronous) | `boolean` | `false` | | | drop down | Dropdown menu configuration, transparently passed to the `Dropdown` component of `antd` | [DropdownProps](https://ant.design/components/dropdown-cn/#API) | | | diff --git a/s2-site/docs/api/components/export.zh.md b/s2-site/docs/api/components/export.zh.md index 64c672de96..484c555e95 100644 --- a/s2-site/docs/api/components/export.zh.md +++ b/s2-site/docs/api/components/export.zh.md @@ -28,7 +28,7 @@ tag: Updated | successText | 操作成功文案 | `string` | | | | errorText | 操作失败文案 | `string` | | | | fileName | 自定义下载文件名 (csv) | `string` | `sheet` | | -| syncCopy | 同步复制数据 （默认异步） | `boolean` | `false` | | +| async | 异步复制/导出数据 （默认异步） | `boolean` | `true` | | | dropdown | 下拉菜单配置，透传给 `antd` 的 `Dropdown` 组件 | [DropdownProps](https://ant.design/components/dropdown-cn/#API) | | | | customCopyMethod | 自定义导出组件内部复制处理逻辑 | (params: [CopyAllDataParams](#copyalldataparams)) => `Promise \| string` | | | diff --git a/s2-site/docs/common/copy-export.en.md b/s2-site/docs/common/copy-export.en.md index e6843fafc9..7190d8c8c7 100644 --- a/s2-site/docs/common/copy-export.en.md +++ b/s2-site/docs/common/copy-export.en.md @@ -40,7 +40,7 @@ download(data, 'filename') | parameter | illustrate | type | Defaults | required | | --------- | ------------------------------------------------------------ | --------- | -------- | -------- | | data | data source | `string` | | ✓ | -| sync | Whether to copy data synchronously (default is asynchronous) | `boolean` | `false` | | +| async | Whether to copy data asynchronously (default is asynchronous) | `boolean` | `true` | | ### download diff --git a/s2-site/docs/common/copy-export.zh.md b/s2-site/docs/common/copy-export.zh.md index 37702a4ab2..a1518d588b 100644 --- a/s2-site/docs/common/copy-export.zh.md +++ b/s2-site/docs/common/copy-export.zh.md @@ -21,6 +21,9 @@ const data = await asyncGetAllPlainData({ // formatHeader: true, // formatData: true // }, + + // 同步复制 + // async: false }); // 同步复制：copyToClipboard(data, false) @@ -140,16 +143,19 @@ import { asyncGetAllPlainData, download } from '@antv/s2' // 拿到复制数据 const data = await asyncGetAllPlainData({ sheetInstance: s2, - split: '\t', + split: ',', formatOptions: true, // formatOptions: { // formatHeader: true, // formatData: true // }, + + // 同步导出 + // async: false }); // 导出数据 (csv) -download(data, 'filename') +download(data, 'filename') // filename.csv ``` #### 2. 复制数据到剪贴板 @@ -207,17 +213,17 @@ const data = await asyncGetAllPlainData({ | 参数 | 说明 | 类型 | 默认值 | 必选 | | ------------|-----------------|---------------|---------------| --- | | sheetInstance | s2 实例 | [SpreadSheet](/docs/api/basic-class/spreadsheet) | | ✓ | -| split | 分隔符 | `string` | | ✓ | -| formatOptions | 是否使用 [S2DataConfig.Meta](/api/general/s2-data-config#meta) 进行格式化，可以分别对数据单元格和行列头进行格式化，传 `boolean` 会同时对单元格和行列头生效。 | `boolean \| { formatHeader?: boolean, formatData?: boolean }`| `false` | | +| split | 分隔符 | `string` | | ✓ | +| formatOptions | 是否使用 [S2DataConfig.Meta](/api/general/s2-data-config#meta) 进行格式化，可以分别对数据单元格和行列头进行格式化，传 `boolean` 会同时对单元格和行列头生效。 | `boolean \| { formatHeader?: boolean, formatData?: boolean }`| `true` | | | customTransformer | 导出时支持自定义 (transformer) 数据导出格式化方法 | (transformer: `Transformer`) => [`Partial`](#transformer) | | | -| isAsyncExport | 是否异步导出 | boolean | false | | +| async | 是否异步复制/导出 | boolean | `true` | | ##### copyToClipboard | 参数 | 说明 | 类型 | 默认值 | 必选 | | --- | --- | ------- | ----- | --- | | data | 数据源 | `string` | | ✓ | -| sync | 是否同步复制数据 （默认异步） | `boolean` | `false` | | +| async | 是否异步复制数据（默认异步） | `boolean` | `true` | | ##### download @@ -254,7 +260,7 @@ interface CopyAllDataParams { split?: string; formatOptions?: FormatOptions; customTransformer?: (transformer: Transformer) => Partial; - isAsyncExport?: boolean; + async?: boolean; } ``` diff --git a/s2-site/docs/manual/migration-v2.zh.md b/s2-site/docs/manual/migration-v2.zh.md index 367b25f03a..72c5a251e5 100644 --- a/s2-site/docs/manual/migration-v2.zh.md +++ b/s2-site/docs/manual/migration-v2.zh.md @@ -212,10 +212,19 @@ const s2Options = { + sheetInstance: s2, + split: '\t', + formatOptions: false, ++ async: true, }); ``` -3. 复制默认开启。 +3. `copyToClipboard` 第二个参数含义 从 `sync` 变更为 `async`. + +```diff +- const data = copyToClipboard(data: string, sync: boolean) ++ const data = copyToClipboard(data: string, async: boolean) +``` + +4. 复制默认开启。 +5. 复制导出默认异步。 具体请查看 [复制与导出](/manual/advanced/interaction/copy) 相关文档。 @@ -668,6 +677,15 @@ const header = { 具体请查看 [表头](/manual/advanced/analysis/header) 相关文档。 +#### 导出组件配置调整 + +`syncCopy` 变更为 `async` + +```diff +- ++ +``` + #### Tooltip 菜单项配置调整 菜单项调整到 `menu` 下，和 Ant Design [Menu 组件 API](https://ant-design.antgroup.com/components/menu-cn#api) 保持一致，同时支持透传 props.