-
Notifications
You must be signed in to change notification settings - Fork 3k
/
hiddenRows.js
468 lines (400 loc) · 12.3 KB
/
hiddenRows.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
import { BasePlugin } from '../base';
import { addClass } from '../../helpers/dom/element';
import { rangeEach } from '../../helpers/number';
import { arrayEach, arrayMap, arrayReduce } from '../../helpers/array';
import { isObject } from '../../helpers/object';
import { isUndefined } from '../../helpers/mixed';
import { SEPARATOR } from '../contextMenu/predefinedItems';
import Hooks from '../../pluginHooks';
import hideRowItem from './contextMenuItem/hideRow';
import showRowItem from './contextMenuItem/showRow';
import { HidingMap } from '../../translations';
import './hiddenRows.css';
Hooks.getSingleton().register('beforeHideRows');
Hooks.getSingleton().register('afterHideRows');
Hooks.getSingleton().register('beforeUnhideRows');
Hooks.getSingleton().register('afterUnhideRows');
export const PLUGIN_KEY = 'hiddenRows';
export const PLUGIN_PRIORITY = 320;
/**
* @plugin HiddenRows
* @class HiddenRows
*
* @description
* Plugin allows to hide certain rows. The hiding is achieved by rendering the rows with height set as 0px.
* The plugin not modifies the source data and do not participate in data transformation (the shape of data returned
* by `getData*` methods stays intact).
*
* Possible plugin settings:
* * `copyPasteEnabled` as `Boolean` (default `true`)
* * `rows` as `Array`
* * `indicators` as `Boolean` (default `false`).
*
* @example
*
* ```js
* const container = document.getElementById('example');
* const hot = new Handsontable(container, {
* data: getData(),
* hiddenRows: {
* copyPasteEnabled: true,
* indicators: true,
* rows: [1, 2, 5]
* }
* });
*
* // access to hiddenRows plugin instance
* const hiddenRowsPlugin = hot.getPlugin('hiddenRows');
*
* // show single row
* hiddenRowsPlugin.showRow(1);
*
* // show multiple rows
* hiddenRowsPlugin.showRow(1, 2, 9);
*
* // or as an array
* hiddenRowsPlugin.showRows([1, 2, 9]);
*
* // hide single row
* hiddenRowsPlugin.hideRow(1);
*
* // hide multiple rows
* hiddenRowsPlugin.hideRow(1, 2, 9);
*
* // or as an array
* hiddenRowsPlugin.hideRows([1, 2, 9]);
*
* // rerender the table to see all changes
* hot.render();
* ```
*/
export class HiddenRows extends BasePlugin {
static get PLUGIN_KEY() {
return PLUGIN_KEY;
}
static get PLUGIN_PRIORITY() {
return PLUGIN_PRIORITY;
}
/**
* Cached settings from Handsontable settings.
*
* @private
* @type {object}
*/
#settings = {};
/**
* Map of hidden rows by the plugin.
*
* @private
* @type {HidingMap|null}
*/
#hiddenRowsMap = null;
/**
* Checks if the plugin is enabled in the handsontable settings. This method is executed in {@link Hooks#beforeInit}
* hook and if it returns `true` than the {@link HiddenRows#enablePlugin} method is called.
*
* @returns {boolean}
*/
isEnabled() {
return !!this.hot.getSettings()[PLUGIN_KEY];
}
/**
* Enables the plugin functionality for this Handsontable instance.
*/
enablePlugin() {
if (this.enabled) {
return;
}
const pluginSettings = this.hot.getSettings()[PLUGIN_KEY];
if (isObject(pluginSettings)) {
this.#settings = pluginSettings;
if (isUndefined(pluginSettings.copyPasteEnabled)) {
pluginSettings.copyPasteEnabled = true;
}
}
this.#hiddenRowsMap = new HidingMap();
this.#hiddenRowsMap.addLocalHook('init', () => this.onMapInit());
this.hot.rowIndexMapper.registerMap(this.pluginName, this.#hiddenRowsMap);
this.addHook('afterContextMenuDefaultOptions', (...args) => this.onAfterContextMenuDefaultOptions(...args));
this.addHook('afterGetCellMeta', (row, col, cellProperties) => this.onAfterGetCellMeta(row, col, cellProperties));
this.addHook('modifyRowHeight', (height, row) => this.onModifyRowHeight(height, row));
this.addHook('afterGetRowHeader', (...args) => this.onAfterGetRowHeader(...args));
this.addHook('modifyCopyableRange', ranges => this.onModifyCopyableRange(ranges));
super.enablePlugin();
}
/**
* Updates the plugin state. This method is executed when {@link Core#updateSettings} is invoked.
*/
updatePlugin() {
this.disablePlugin();
this.enablePlugin();
super.updatePlugin();
}
/**
* Disables the plugin functionality for this Handsontable instance.
*/
disablePlugin() {
this.hot.rowIndexMapper.unregisterMap(this.pluginName);
this.#settings = {};
super.disablePlugin();
this.resetCellsMeta();
}
/**
* Shows the rows provided in the array.
*
* @param {number[]} rows Array of visual row indexes.
*/
showRows(rows) {
const currentHideConfig = this.getHiddenRows();
const isValidConfig = this.isValidConfig(rows);
let destinationHideConfig = currentHideConfig;
const hidingMapValues = this.#hiddenRowsMap.getValues().slice();
const isAnyRowShowed = rows.length > 0;
if (isValidConfig && isAnyRowShowed) {
const physicalRows = rows.map(visualRow => this.hot.toPhysicalRow(visualRow));
// Preparing new values for hiding map.
arrayEach(physicalRows, (physicalRow) => {
hidingMapValues[physicalRow] = false;
});
// Preparing new hiding config.
destinationHideConfig = arrayReduce(hidingMapValues, (hiddenIndexes, isHidden, physicalIndex) => {
if (isHidden) {
hiddenIndexes.push(this.hot.toVisualRow(physicalIndex));
}
return hiddenIndexes;
}, []);
}
const continueHiding = this.hot
.runHooks('beforeUnhideRows', currentHideConfig, destinationHideConfig, isValidConfig && isAnyRowShowed);
if (continueHiding === false) {
return;
}
if (isValidConfig && isAnyRowShowed) {
this.#hiddenRowsMap.setValues(hidingMapValues);
}
this.hot.runHooks('afterUnhideRows', currentHideConfig, destinationHideConfig, isValidConfig && isAnyRowShowed,
isValidConfig && destinationHideConfig.length < currentHideConfig.length);
}
/**
* Shows the row provided as row index (counting from 0).
*
* @param {...number} row Visual row index.
*/
showRow(...row) {
this.showRows(row);
}
/**
* Hides the rows provided in the array.
*
* @param {number[]} rows Array of visual row indexes.
*/
hideRows(rows) {
const currentHideConfig = this.getHiddenRows();
const isConfigValid = this.isValidConfig(rows);
let destinationHideConfig = currentHideConfig;
if (isConfigValid) {
destinationHideConfig = Array.from(new Set(currentHideConfig.concat(rows)));
}
const continueHiding = this.hot.runHooks('beforeHideRows', currentHideConfig, destinationHideConfig, isConfigValid);
if (continueHiding === false) {
return;
}
if (isConfigValid) {
this.hot.batchExecution(() => {
arrayEach(rows, (visualRow) => {
this.#hiddenRowsMap.setValueAtIndex(this.hot.toPhysicalRow(visualRow), true);
});
}, true);
}
this.hot.runHooks('afterHideRows', currentHideConfig, destinationHideConfig, isConfigValid,
isConfigValid && destinationHideConfig.length > currentHideConfig.length);
}
/**
* Hides the row provided as row index (counting from 0).
*
* @param {...number} row Visual row index.
*/
hideRow(...row) {
this.hideRows(row);
}
/**
* Returns an array of visual indexes of hidden rows.
*
* @returns {number[]}
*/
getHiddenRows() {
return arrayMap(this.#hiddenRowsMap.getHiddenIndexes(), (physicalRowIndex) => {
return this.hot.toVisualRow(physicalRowIndex);
});
}
/**
* Checks if the provided row is hidden.
*
* @param {number} row Visual row index.
* @returns {boolean}
*/
isHidden(row) {
return this.#hiddenRowsMap.getValueAtIndex(this.hot.toPhysicalRow(row)) || false;
}
/**
* Checks whether all of the provided row indexes are within the bounds of the table.
*
* @param {Array} hiddenRows List of hidden visual row indexes.
* @returns {boolean}
*/
isValidConfig(hiddenRows) {
const nrOfRows = this.hot.countRows();
if (Array.isArray(hiddenRows) && hiddenRows.length > 0) {
return hiddenRows.every(visualRow => Number.isInteger(visualRow) && visualRow >= 0 && visualRow < nrOfRows);
}
return false;
}
/**
* Resets all rendered cells meta.
*
* @private
*/
resetCellsMeta() {
arrayEach(this.hot.getCellsMeta(), (meta) => {
if (meta) {
meta.skipRowOnPaste = false;
}
});
}
/**
* Adds the additional row height for the hidden row indicators.
*
* @private
* @param {number|undefined} height Row height.
* @param {number} row Visual row index.
* @returns {number}
*/
onModifyRowHeight(height, row) {
// Hook is triggered internally only for the visible rows. Conditional will be handled for the API
// calls of the `getRowHeight` function on not visible indexes.
if (this.isHidden(row)) {
return 0;
}
return height;
}
/**
* Sets the copy-related cell meta.
*
* @private
* @param {number} row Visual row index.
* @param {number} column Visual column index.
* @param {object} cellProperties Object containing the cell properties.
*/
onAfterGetCellMeta(row, column, cellProperties) {
if (this.#settings.copyPasteEnabled === false && this.isHidden(row)) {
// Cell property handled by the `Autofill` and the `CopyPaste` plugins.
cellProperties.skipRowOnPaste = true;
}
if (this.isHidden(row - 1)) {
cellProperties.className = cellProperties.className || '';
if (cellProperties.className.indexOf('afterHiddenRow') === -1) {
cellProperties.className += ' afterHiddenRow';
}
} else if (cellProperties.className) {
const classArr = cellProperties.className.split(' ');
if (classArr.length > 0) {
const containAfterHiddenRow = classArr.indexOf('afterHiddenRow');
if (containAfterHiddenRow > -1) {
classArr.splice(containAfterHiddenRow, 1);
}
cellProperties.className = classArr.join(' ');
}
}
}
/**
* Modifies the copyable range, accordingly to the provided config.
*
* @private
* @param {Array} ranges An array of objects defining copyable cells.
* @returns {Array}
*/
onModifyCopyableRange(ranges) {
// Ranges shouldn't be modified when `copyPasteEnabled` option is set to `true` (by default).
if (this.#settings.copyPasteEnabled) {
return ranges;
}
const newRanges = [];
const pushRange = (startRow, endRow, startCol, endCol) => {
newRanges.push({ startRow, endRow, startCol, endCol });
};
arrayEach(ranges, (range) => {
let isHidden = true;
let rangeStart = 0;
rangeEach(range.startRow, range.endRow, (visualRow) => {
if (this.isHidden(visualRow)) {
if (!isHidden) {
pushRange(rangeStart, visualRow - 1, range.startCol, range.endCol);
}
isHidden = true;
} else {
if (isHidden) {
rangeStart = visualRow;
}
if (visualRow === range.endRow) {
pushRange(rangeStart, visualRow, range.startCol, range.endCol);
}
isHidden = false;
}
});
});
return newRanges;
}
/**
* Adds the needed classes to the headers.
*
* @private
* @param {number} row Visual row index.
* @param {HTMLElement} TH Header's TH element.
*/
onAfterGetRowHeader(row, TH) {
if (!this.#settings.indicators || row < 0) {
return;
}
const classList = [];
if (row >= 1 && this.isHidden(row - 1)) {
classList.push('afterHiddenRow');
}
if (row < this.hot.countRows() - 1 && this.isHidden(row + 1)) {
classList.push('beforeHiddenRow');
}
addClass(TH, classList);
}
/**
* Add Show-hide rows to context menu.
*
* @private
* @param {object} options An array of objects containing information about the pre-defined Context Menu items.
*/
onAfterContextMenuDefaultOptions(options) {
options.items.push(
{
name: SEPARATOR
},
hideRowItem(this),
showRowItem(this)
);
}
/**
* On map initialized hook callback.
*
* @private
*/
onMapInit() {
if (Array.isArray(this.#settings.rows)) {
this.hideRows(this.#settings.rows);
}
}
/**
* Destroys the plugin instance.
*/
destroy() {
this.#settings = null;
this.#hiddenRowsMap = null;
super.destroy();
}
}