Skip to content

Commit cb36d70

Browse files
lijinke666lijinke666
committed
fix(interaction): 修复默认隐藏列的配置更新为空数组时, 未触发表格更新
1 parent daaf989 commit cb36d70

File tree

15 files changed

+146
-55
lines changed

15 files changed

+146
-55
lines changed

‎.github/ISSUE_TEMPLATE/ask-for-question.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ title: '🤔'
55
labels: ❔question
66
---
77

8-
98
### 🖋 Description
109

1110
### 😊 Expected Behavior

‎.github/ISSUE_TEMPLATE/bug-report.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,33 @@ title: '🐛'
77
### 🏷 Version
88

99
<!-- Required! -->
10+
<!-- eg. `1.16.0` 🙅🏻‍♀️🚫 `latest`, `1.x` -->
1011

1112
| Package | Version |
1213
| -------------- | --------- |
1314
| @antv/s2 | - |
1415
| @antv/s2-react | - |
1516

17+
### Sheet Type
18+
19+
- [ ] PivotSheet
20+
- [ ] TableSheet
21+
- [ ] GridAnalysisSheet
22+
- [ ] StrategySheet
23+
1624
### 🖋 Description
1725

1826
<!-- Required! -->
1927

2028
### ⌨️ Code Snapshots
2129

30+
<!-- Required! -->
2231
<!-- eg. `s2Options` and `s2DataCfg`, or `<SheetComponent {...} />` -->
2332

2433
### 🔗 Reproduce Link
2534

35+
<!-- eg. use S2 code sandbox template https://codesandbox.io/s/29zle -->
36+
2637
### 🤔 Steps to Reproduce
2738

2839
<!-- Required! -->

‎packages/s2-core/__tests__/spreadsheet/hidden-columns-spec.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,38 @@ describe('SpreadSheet Hidden Columns Tests', () => {
236236
);
237237
});
238238

239+
test('should not rerender after hidden empty column fields if disable force render', () => {
240+
const defaultHiddenColumnsDetail = [null];
241+
pivotSheet.store.set('hiddenColumnsDetail', defaultHiddenColumnsDetail);
242+
243+
const renderSpy = jest
244+
.spyOn(pivotSheet, 'render')
245+
.mockImplementationOnce(() => {});
246+
247+
pivotSheet.interaction.hideColumns([], false);
248+
249+
const hiddenColumnsDetail = pivotSheet.store.get('hiddenColumnsDetail');
250+
251+
expect(renderSpy).not.toHaveBeenCalled();
252+
expect(hiddenColumnsDetail).toEqual(defaultHiddenColumnsDetail);
253+
});
254+
255+
test('should rerender after hidden empty column fields if enable force render', () => {
256+
const defaultHiddenColumnsDetail = [null];
257+
pivotSheet.store.set('hiddenColumnsDetail', defaultHiddenColumnsDetail);
258+
259+
const renderSpy = jest
260+
.spyOn(pivotSheet, 'render')
261+
.mockImplementationOnce(() => {});
262+
263+
pivotSheet.interaction.hideColumns([], true);
264+
265+
const hiddenColumnsDetail = pivotSheet.store.get('hiddenColumnsDetail');
266+
267+
expect(renderSpy).toHaveBeenCalledTimes(1);
268+
expect(hiddenColumnsDetail).toEqual([]);
269+
});
270+
239271
test('should default hidden columns by interaction hiddenColumnFields config', () => {
240272
const hiddenColumns = [typePriceColumnId];
241273
const sheet = new PivotSheet(getContainer(), pivotDataCfg, {
@@ -245,6 +277,7 @@ describe('SpreadSheet Hidden Columns Tests', () => {
245277
},
246278
});
247279
sheet.render();
280+
248281
const hiddenColumnsDetail = sheet.store.get('hiddenColumnsDetail', []);
249282
const [priceDetail] = hiddenColumnsDetail;
250283
expect(sheet.options.interaction.hiddenColumnFields).toEqual(

‎packages/s2-core/__tests__/unit/utils/hide-columns-spec.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,21 @@ describe('hide-columns test', () => {
202202
expect(mockSpreadSheetInstance.render).not.toHaveBeenCalled();
203203
});
204204

205+
test('should clear hidden columns detail and options if hidden column fields isEmpty and enable force update', () => {
206+
mockSpreadSheetInstance.store.set('hiddenColumnsDetail', [null]);
207+
208+
hideColumns(mockSpreadSheetInstance, [], true);
209+
210+
expect(mockSpreadSheetInstance.render).toHaveReturnedTimes(1);
211+
expect(mockSpreadSheetInstance.interaction.reset).toHaveBeenCalledTimes(1);
212+
expect(mockSpreadSheetInstance.store.get('hiddenColumnsDetail')).toEqual(
213+
[],
214+
);
215+
expect(
216+
mockSpreadSheetInstance.options.interaction.hiddenColumnFields,
217+
).toEqual([]);
218+
});
219+
205220
test('should hidden columns correct', () => {
206221
hideColumns(mockSpreadSheetInstance, ['3']);
207222

@@ -320,6 +335,21 @@ describe('hide-columns test', () => {
320335
expect(mockSpreadSheetInstance.render).not.toHaveBeenCalled();
321336
});
322337

338+
test('should clear hidden group columns detail and options if hidden column fields isEmpty and enable force update', () => {
339+
mockSpreadSheetInstance.store.set('hiddenColumnsDetail', [null]);
340+
341+
hideColumnsByThunkGroup(mockSpreadSheetInstance, [], true);
342+
343+
expect(mockSpreadSheetInstance.render).toHaveReturnedTimes(1);
344+
expect(mockSpreadSheetInstance.interaction.reset).toHaveBeenCalledTimes(1);
345+
expect(mockSpreadSheetInstance.store.get('hiddenColumnsDetail')).toEqual(
346+
[],
347+
);
348+
expect(
349+
mockSpreadSheetInstance.options.interaction.hiddenColumnFields,
350+
).toEqual([]);
351+
});
352+
323353
describe('Valid Display Sibling Node Tests', () => {
324354
const nextNode = {
325355
id: 'next',

‎packages/s2-core/src/interaction/base-interaction/click/row-column-click.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,6 @@ export class RowColumnClick extends BaseEvent implements BaseEventImplement {
201201
});
202202
this.spreadsheet.store.set('hiddenColumnsDetail', hiddenColumnsDetail);
203203
this.spreadsheet.interaction.reset();
204-
this.spreadsheet.render(false);
204+
this.spreadsheet.render(false, false, false);
205205
}
206206
}

‎packages/s2-core/src/interaction/root.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -343,8 +343,8 @@ export class RootInteraction {
343343
unmergeCell(this.spreadsheet, removedCells);
344344
};
345345

346-
public hideColumns(hiddenColumnFields: string[] = []) {
347-
hideColumnsByThunkGroup(this.spreadsheet, hiddenColumnFields, true);
346+
public hideColumns(hiddenColumnFields: string[] = [], forceRender = true) {
347+
hideColumnsByThunkGroup(this.spreadsheet, hiddenColumnFields, forceRender);
348348
}
349349

350350
private getDefaultInteractions() {

‎packages/s2-core/src/sheet-type/spread-sheet.ts‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {
88
isEmpty,
99
isFunction,
1010
isString,
11-
once,
1211
} from 'lodash';
1312
import { hideColumnsByThunkGroup } from '@/utils/hide-columns';
1413
import { BaseCell } from '@/cell';
@@ -336,7 +335,11 @@ export abstract class SpreadSheet extends EE {
336335
this.registerIcons();
337336
}
338337

339-
public render(reloadData = true, reBuildDataSet = false) {
338+
public render(
339+
reloadData = true,
340+
reBuildDataSet = false,
341+
reBuildHiddenColumnsDetail = true,
342+
) {
340343
this.emit(S2Event.LAYOUT_BEFORE_RENDER);
341344
if (reBuildDataSet) {
342345
this.dataSet = this.getDataSet(this.options);
@@ -346,7 +349,9 @@ export abstract class SpreadSheet extends EE {
346349
this.dataSet.setDataCfg(this.dataCfg);
347350
}
348351
this.buildFacet();
349-
this.initHiddenColumnsDetail();
352+
if (reBuildHiddenColumnsDetail) {
353+
this.initHiddenColumnsDetail();
354+
}
350355
this.emit(S2Event.LAYOUT_AFTER_RENDER);
351356
}
352357

@@ -599,13 +604,15 @@ export abstract class SpreadSheet extends EE {
599604
}
600605

601606
// 初次渲染时, 如果配置了隐藏列, 则生成一次相关配置信息
602-
private initHiddenColumnsDetail = once(() => {
607+
private initHiddenColumnsDetail = () => {
603608
const { hiddenColumnFields } = this.options.interaction;
604-
if (isEmpty(hiddenColumnFields)) {
609+
const lastHiddenColumnsDetail = this.store.get('hiddenColumnsDetail');
610+
// 隐藏列为空, 并且没有操作的情况下, 不需要再往下走
611+
if (isEmpty(hiddenColumnFields) && isEmpty(lastHiddenColumnsDetail)) {
605612
return;
606613
}
607614
hideColumnsByThunkGroup(this, hiddenColumnFields, true);
608-
});
615+
};
609616

610617
private clearCanvasEvent() {
611618
const canvasEvents = this.getEvents();

‎packages/s2-core/src/utils/hide-columns.ts‎

Lines changed: 29 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,25 @@ export const hideColumns = (
105105
selectedColumnFields: string[] = [],
106106
forceRender = false,
107107
) => {
108+
const renderByHiddenColumns = (
109+
hiddenColumnFields: string[] = [],
110+
hiddenColumnsDetail: HiddenColumnsInfo[] = [],
111+
) => {
112+
spreadsheet.setOptions({
113+
interaction: {
114+
hiddenColumnFields,
115+
},
116+
});
117+
spreadsheet.interaction.reset();
118+
spreadsheet.store.set('hiddenColumnsDetail', hiddenColumnsDetail);
119+
spreadsheet.render(false, false, false);
120+
};
121+
122+
if (isEmpty(selectedColumnFields) && forceRender) {
123+
renderByHiddenColumns();
124+
return;
125+
}
126+
108127
const lastHiddenColumnDetail = spreadsheet.store.get(
109128
'hiddenColumnsDetail',
110129
[],
@@ -120,11 +139,6 @@ export const hideColumns = (
120139
...selectedColumnFields,
121140
...lastHiddenColumnFields,
122141
]);
123-
spreadsheet.setOptions({
124-
interaction: {
125-
hiddenColumnFields,
126-
},
127-
});
128142

129143
const displaySiblingNode = getHiddenColumnDisplaySiblingNode(
130144
spreadsheet,
@@ -146,9 +160,8 @@ export const hideColumns = (
146160
currentHiddenColumnsInfo,
147161
hiddenColumnsDetail,
148162
);
149-
spreadsheet.store.set('hiddenColumnsDetail', hiddenColumnsDetail);
150-
spreadsheet.interaction.reset();
151-
spreadsheet.render(false);
163+
164+
renderByHiddenColumns(hiddenColumnFields, hiddenColumnsDetail);
152165
};
153166

154167
/**
@@ -168,12 +181,20 @@ export const getColumns = (spreadsheet: SpreadSheet) => {
168181
/**
169182
* @name 根据分组隐藏指定列
170183
* @description 根据配置的隐藏列自动分组, 批量隐藏
184+
* @param spreadsheet
185+
* @param hiddenColumnFields 隐藏的列头字段
186+
* @param forceRender 隐藏的列头字段为空时, 是否强制更新
171187
*/
172188
export const hideColumnsByThunkGroup = (
173189
spreadsheet: SpreadSheet,
174190
hiddenColumnFields: string[] = [],
175191
forceRender = false,
176192
) => {
193+
// 隐藏列为空时, 有可能是隐藏后又展开 ( [] => ['A'] => []), 所以需要更新一次, 将渲染的展开icon, 隐藏列信息等清空
194+
if (isEmpty(hiddenColumnFields) && forceRender) {
195+
hideColumns(spreadsheet, hiddenColumnFields, true);
196+
}
197+
177198
const columns = getColumns(spreadsheet);
178199
const hiddenColumnsGroup = getHiddenColumnsThunkGroup(
179200
columns,

‎packages/s2-react/playground/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@ import {
3131
DataType,
3232
generatePalette,
3333
getPalette,
34-
InterceptType,
3534
} from '@antv/s2';
3635
import corePkg from '@antv/s2/package.json';
3736
import { debounce, forEach, random } from 'lodash';
37+
import { useUpdateEffect } from 'ahooks';
3838
import { customTreeFields } from '../__tests__/data/custom-tree-fields';
3939
import { dataCustomTrees } from '../__tests__/data/data-custom-trees';
4040
import { mockGridAnalysisDataCfg } from '../__tests__/data/grid-analysis-data';
@@ -253,7 +253,7 @@ function MainLayout() {
253253
});
254254
}, [sheetType]);
255255

256-
React.useEffect(() => {
256+
useUpdateEffect(() => {
257257
switch (sheetType) {
258258
case 'table':
259259
setDataCfg(tableSheetDataCfg);

‎packages/s2-react/src/components/sheets/base-sheet/index.tsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,6 @@ export const BaseSheet = React.forwardRef(
3030
}
3131
}, [ref, s2Ref]);
3232

33-
// 默认隐藏列
34-
React.useEffect(() => {
35-
s2Ref.current?.interaction.hideColumns(
36-
options.interaction?.hiddenColumnFields,
37-
);
38-
}, [options.interaction?.hiddenColumnFields, s2Ref]);
39-
4033
return (
4134
<React.StrictMode>
4235
<Spin spinning={loading} wrapperClassName={`${S2_PREFIX_CLS}-spin`}>

0 commit comments

Comments
 (0)