es-grid-template 1.9.63 → 1.9.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/ali-table/Grid.js +5 -2
- package/es/ali-table/InternalTable.js +499 -49
- package/es/ali-table/base-table/calculations.js +1 -1
- package/es/ali-table/base-table/cell/EditCell.js +14 -6
- package/es/ali-table/base-table/renderFilter.js +1 -1
- package/es/ali-table/interfaces.d.ts +2 -2
- package/es/ali-table/pipeline/features/columnCustom.d.ts +4 -2
- package/es/ali-table/pipeline/features/columnCustom.js +112 -48
- package/es/ali-table/utils/constants.d.ts +1 -0
- package/es/ali-table/utils/constants.js +1 -0
- package/es/ali-table/utils/convertColumnsChoose.d.ts +2 -2
- package/es/ali-table/utils/convertColumnsChoose.js +1 -2
- package/es/ali-table/utils/utility.d.ts +15 -1
- package/es/ali-table/utils/utility.js +399 -1
- package/es/grid-component/type.d.ts +2 -2
- package/es/group-component/hook/utils.d.ts +3 -3
- package/es/table-component/TableContainerEdit.js +148 -98
- package/es/table-component/body/EditableCell.js +9 -5
- package/es/table-component/body/TableBodyCellEdit.js +14 -8
- package/es/table-component/header/renderFilter.js +1 -1
- package/es/table-component/hook/utils.d.ts +1 -1
- package/es/table-component/hook/utils.js +2 -6
- package/es/table-component/useContext.d.ts +1 -1
- package/lib/ali-table/Grid.js +5 -2
- package/lib/ali-table/InternalTable.js +490 -45
- package/lib/ali-table/base-table/calculations.js +1 -1
- package/lib/ali-table/base-table/cell/EditCell.js +14 -6
- package/lib/ali-table/base-table/renderFilter.js +1 -1
- package/lib/ali-table/interfaces.d.ts +2 -2
- package/lib/ali-table/pipeline/features/columnCustom.d.ts +4 -2
- package/lib/ali-table/pipeline/features/columnCustom.js +106 -46
- package/lib/ali-table/utils/constants.d.ts +1 -0
- package/lib/ali-table/utils/constants.js +2 -1
- package/lib/ali-table/utils/convertColumnsChoose.d.ts +2 -2
- package/lib/ali-table/utils/convertColumnsChoose.js +1 -2
- package/lib/ali-table/utils/utility.d.ts +15 -1
- package/lib/ali-table/utils/utility.js +410 -2
- package/lib/grid-component/type.d.ts +2 -2
- package/lib/table-component/TableContainerEdit.js +148 -98
- package/lib/table-component/body/EditableCell.js +9 -5
- package/lib/table-component/body/TableBodyCellEdit.js +11 -7
- package/lib/table-component/header/renderFilter.js +1 -1
- package/lib/table-component/hook/utils.d.ts +1 -1
- package/lib/table-component/hook/utils.js +2 -6
- package/lib/table-component/useContext.d.ts +1 -1
- package/package.json +1 -1
|
@@ -294,4 +294,402 @@ export const addRowIdArray = inputArray => {
|
|
|
294
294
|
}
|
|
295
295
|
}
|
|
296
296
|
return result;
|
|
297
|
-
};
|
|
297
|
+
};
|
|
298
|
+
export const unFlattenData = data => {
|
|
299
|
+
if (!data || data.length === 0) return [];
|
|
300
|
+
const idToNodeMap = new Map();
|
|
301
|
+
for (let index = 0; index < data.length; index += 1) {
|
|
302
|
+
const item = data[index];
|
|
303
|
+
idToNodeMap.set(item.rowId, {
|
|
304
|
+
...item
|
|
305
|
+
});
|
|
306
|
+
}
|
|
307
|
+
const tree = [];
|
|
308
|
+
for (let index = 0; index < data.length; index += 1) {
|
|
309
|
+
const item = data[index];
|
|
310
|
+
const currentNode = idToNodeMap.get(item.rowId);
|
|
311
|
+
if (!currentNode || !item.parentId) {
|
|
312
|
+
if (currentNode) tree.push(currentNode);
|
|
313
|
+
continue;
|
|
314
|
+
}
|
|
315
|
+
const parentNode = idToNodeMap.get(item.parentId);
|
|
316
|
+
if (parentNode) {
|
|
317
|
+
const parentWithChildren = parentNode;
|
|
318
|
+
const children = parentWithChildren.children ?? (parentWithChildren.children = []);
|
|
319
|
+
children.push(currentNode);
|
|
320
|
+
} else {
|
|
321
|
+
tree.push(currentNode);
|
|
322
|
+
}
|
|
323
|
+
}
|
|
324
|
+
return tree;
|
|
325
|
+
};
|
|
326
|
+
export const flattenArray = arr => {
|
|
327
|
+
if (!arr) {
|
|
328
|
+
return [];
|
|
329
|
+
}
|
|
330
|
+
const result = [];
|
|
331
|
+
const pending = [...arr].reverse();
|
|
332
|
+
while (pending.length > 0) {
|
|
333
|
+
const item = pending.pop();
|
|
334
|
+
if (!item) continue;
|
|
335
|
+
const {
|
|
336
|
+
children,
|
|
337
|
+
...rest
|
|
338
|
+
} = item;
|
|
339
|
+
result.push(rest);
|
|
340
|
+
if (Array.isArray(children)) {
|
|
341
|
+
for (let index = children.length - 1; index >= 0; index -= 1) {
|
|
342
|
+
pending.push(children[index]);
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
}
|
|
346
|
+
return result;
|
|
347
|
+
};
|
|
348
|
+
export function updateOrInsert1(dataArray, dataFilter) {
|
|
349
|
+
const nodesByRowId = new Map();
|
|
350
|
+
let head;
|
|
351
|
+
let tail;
|
|
352
|
+
for (const item of dataArray) {
|
|
353
|
+
const node = {
|
|
354
|
+
item,
|
|
355
|
+
next: undefined
|
|
356
|
+
};
|
|
357
|
+
if (!head) head = node;
|
|
358
|
+
if (tail) tail.next = node;
|
|
359
|
+
tail = node;
|
|
360
|
+
|
|
361
|
+
// Preserve findIndex semantics when duplicate rowId values exist.
|
|
362
|
+
if (!nodesByRowId.has(item.rowId)) {
|
|
363
|
+
nodesByRowId.set(item.rowId, node);
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
for (let index = 0; index < dataFilter.length; index += 1) {
|
|
367
|
+
const filterItem = dataFilter[index];
|
|
368
|
+
const existingNode = nodesByRowId.get(filterItem.rowId);
|
|
369
|
+
if (existingNode) {
|
|
370
|
+
existingNode.item = {
|
|
371
|
+
...existingNode.item,
|
|
372
|
+
...filterItem
|
|
373
|
+
};
|
|
374
|
+
continue;
|
|
375
|
+
}
|
|
376
|
+
const node = {
|
|
377
|
+
item: filterItem,
|
|
378
|
+
next: undefined
|
|
379
|
+
};
|
|
380
|
+
nodesByRowId.set(filterItem.rowId, node);
|
|
381
|
+
const previousItem = dataFilter[index - 1];
|
|
382
|
+
const previousNode = previousItem ? nodesByRowId.get(previousItem.rowId) : undefined;
|
|
383
|
+
if (previousNode) {
|
|
384
|
+
node.next = previousNode.next;
|
|
385
|
+
previousNode.next = node;
|
|
386
|
+
if (tail === previousNode) tail = node;
|
|
387
|
+
} else {
|
|
388
|
+
if (tail) tail.next = node;else head = node;
|
|
389
|
+
tail = node;
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
const result = [];
|
|
393
|
+
let current = head;
|
|
394
|
+
while (current) {
|
|
395
|
+
result.push(current.item);
|
|
396
|
+
current = current.next;
|
|
397
|
+
}
|
|
398
|
+
return result;
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
// export const addRowIdArray = (inputArray: any[]) => {
|
|
402
|
+
// if (!inputArray || inputArray.length === 0) return []
|
|
403
|
+
|
|
404
|
+
// const result = new Array<any>(inputArray.length)
|
|
405
|
+
// const pending: { source: any, target: any[], index: number, parentId?: any }[] = []
|
|
406
|
+
|
|
407
|
+
// for (let index = inputArray.length - 1; index >= 0; index -= 1) {
|
|
408
|
+
// pending.push({ source: inputArray[index], target: result, index })
|
|
409
|
+
// }
|
|
410
|
+
|
|
411
|
+
// while (pending.length > 0) {
|
|
412
|
+
// const { source, target, index, parentId } = pending.pop() as {
|
|
413
|
+
// source: any
|
|
414
|
+
// target: any[]
|
|
415
|
+
// index: number
|
|
416
|
+
// parentId?: any
|
|
417
|
+
// }
|
|
418
|
+
|
|
419
|
+
// const rowId = source.id ?? source.rowId ?? newGuid()
|
|
420
|
+
// const node = {
|
|
421
|
+
// ...source,
|
|
422
|
+
// rowId,
|
|
423
|
+
// ...(parentId !== undefined && source.parentId == null ? { parentId } : {})
|
|
424
|
+
// }
|
|
425
|
+
// target[index] = node
|
|
426
|
+
|
|
427
|
+
// if (Array.isArray(source.children) && source.children.length > 0) {
|
|
428
|
+
// const children = new Array<any>(source.children.length)
|
|
429
|
+
// node.children = children
|
|
430
|
+
|
|
431
|
+
// for (let childIndex = source.children.length - 1; childIndex >= 0; childIndex -= 1) {
|
|
432
|
+
// pending.push({
|
|
433
|
+
// source: source.children[childIndex],
|
|
434
|
+
// target: children,
|
|
435
|
+
// index: childIndex,
|
|
436
|
+
// parentId: rowId
|
|
437
|
+
// })
|
|
438
|
+
// }
|
|
439
|
+
// }
|
|
440
|
+
// }
|
|
441
|
+
|
|
442
|
+
// return result
|
|
443
|
+
// }
|
|
444
|
+
|
|
445
|
+
export function updateOrInsert3(dataArray, dataFilter) {
|
|
446
|
+
const dataLength = dataArray.length;
|
|
447
|
+
const filterLength = dataFilter.length;
|
|
448
|
+
|
|
449
|
+
// rowId -> index trong data
|
|
450
|
+
const indexByRowId = new Map();
|
|
451
|
+
|
|
452
|
+
// next[index] = index tiếp theo
|
|
453
|
+
// -1 = không có next
|
|
454
|
+
const next = new Int32Array(dataLength + filterLength);
|
|
455
|
+
next.fill(-1);
|
|
456
|
+
|
|
457
|
+
// Data hiện tại
|
|
458
|
+
const items = new Array(dataLength + filterLength);
|
|
459
|
+
let head = dataLength > 0 ? 0 : -1;
|
|
460
|
+
let tail = dataLength - 1;
|
|
461
|
+
for (let i = 0; i < dataLength; i++) {
|
|
462
|
+
const item = dataArray[i];
|
|
463
|
+
items[i] = item;
|
|
464
|
+
|
|
465
|
+
// Preserve findIndex semantics:
|
|
466
|
+
// duplicate rowId -> giữ item đầu tiên
|
|
467
|
+
if (!indexByRowId.has(item.rowId)) {
|
|
468
|
+
indexByRowId.set(item.rowId, i);
|
|
469
|
+
}
|
|
470
|
+
if (i > 0) {
|
|
471
|
+
next[i - 1] = i;
|
|
472
|
+
}
|
|
473
|
+
}
|
|
474
|
+
let size = dataLength;
|
|
475
|
+
for (let i = 0; i < filterLength; i++) {
|
|
476
|
+
const filterItem = dataFilter[i];
|
|
477
|
+
const rowId = filterItem.rowId;
|
|
478
|
+
const existingIndex = indexByRowId.get(rowId);
|
|
479
|
+
|
|
480
|
+
// =========================
|
|
481
|
+
// UPDATE
|
|
482
|
+
// =========================
|
|
483
|
+
if (existingIndex !== undefined) {
|
|
484
|
+
const existingItem = items[existingIndex];
|
|
485
|
+
|
|
486
|
+
// Nếu chấp nhận mutate object -> nhanh nhất
|
|
487
|
+
Object.assign(existingItem, filterItem);
|
|
488
|
+
continue;
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
// =========================
|
|
492
|
+
// INSERT
|
|
493
|
+
// =========================
|
|
494
|
+
const newIndex = size++;
|
|
495
|
+
items[newIndex] = filterItem;
|
|
496
|
+
next[newIndex] = -1;
|
|
497
|
+
indexByRowId.set(rowId, newIndex);
|
|
498
|
+
|
|
499
|
+
// previous item trong dataFilter
|
|
500
|
+
const previousItem = dataFilter[i - 1];
|
|
501
|
+
if (previousItem) {
|
|
502
|
+
const previousIndex = indexByRowId.get(previousItem.rowId);
|
|
503
|
+
if (previousIndex !== undefined) {
|
|
504
|
+
next[newIndex] = next[previousIndex];
|
|
505
|
+
next[previousIndex] = newIndex;
|
|
506
|
+
if (tail === previousIndex) {
|
|
507
|
+
tail = newIndex;
|
|
508
|
+
}
|
|
509
|
+
continue;
|
|
510
|
+
}
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
// Không có previous -> append cuối
|
|
514
|
+
if (tail !== -1) {
|
|
515
|
+
next[tail] = newIndex;
|
|
516
|
+
} else {
|
|
517
|
+
head = newIndex;
|
|
518
|
+
}
|
|
519
|
+
tail = newIndex;
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
// =========================
|
|
523
|
+
// BUILD RESULT
|
|
524
|
+
// =========================
|
|
525
|
+
const result = new Array(size);
|
|
526
|
+
let current = head;
|
|
527
|
+
let resultIndex = 0;
|
|
528
|
+
while (current !== -1) {
|
|
529
|
+
result[resultIndex++] = items[current];
|
|
530
|
+
current = next[current];
|
|
531
|
+
}
|
|
532
|
+
return result;
|
|
533
|
+
}
|
|
534
|
+
export function updateOrInsert(dataArray, dataFilter) {
|
|
535
|
+
const dataLength = dataArray.length;
|
|
536
|
+
const filterLength = dataFilter.length;
|
|
537
|
+
if (filterLength === 0) {
|
|
538
|
+
return dataArray;
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
// =========================================================
|
|
542
|
+
// Fast lookup bằng Map
|
|
543
|
+
// =========================================================
|
|
544
|
+
|
|
545
|
+
const indexByRowId = new Map();
|
|
546
|
+
for (let i = 0; i < dataLength; i++) {
|
|
547
|
+
const rowId = dataArray[i].rowId;
|
|
548
|
+
if (!indexByRowId.has(rowId)) {
|
|
549
|
+
indexByRowId.set(rowId, i);
|
|
550
|
+
}
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
// =========================================================
|
|
554
|
+
// Xác định update + insert
|
|
555
|
+
// =========================================================
|
|
556
|
+
|
|
557
|
+
const inserted = new Map();
|
|
558
|
+
for (let i = 0; i < filterLength; i++) {
|
|
559
|
+
const item = dataFilter[i];
|
|
560
|
+
const rowId = item.rowId;
|
|
561
|
+
const index = indexByRowId.get(rowId);
|
|
562
|
+
if (index !== undefined) {
|
|
563
|
+
// UPDATE trực tiếp
|
|
564
|
+
Object.assign(dataArray[index], item);
|
|
565
|
+
} else {
|
|
566
|
+
inserted.set(rowId, item);
|
|
567
|
+
}
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
// Không insert
|
|
571
|
+
if (inserted.size === 0) {
|
|
572
|
+
return dataArray;
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
// =========================================================
|
|
576
|
+
// Build insertion map
|
|
577
|
+
// =========================================================
|
|
578
|
+
|
|
579
|
+
const insertAfter = new Map();
|
|
580
|
+
let pending = [];
|
|
581
|
+
for (let i = 0; i < filterLength; i++) {
|
|
582
|
+
const item = dataFilter[i];
|
|
583
|
+
const rowId = item.rowId;
|
|
584
|
+
if (!inserted.has(rowId)) {
|
|
585
|
+
pending = [];
|
|
586
|
+
continue;
|
|
587
|
+
}
|
|
588
|
+
pending.push(item);
|
|
589
|
+
const previous = i > 0 ? dataFilter[i - 1] : undefined;
|
|
590
|
+
if (previous) {
|
|
591
|
+
const previousId = previous.rowId;
|
|
592
|
+
let list = insertAfter.get(previousId);
|
|
593
|
+
if (!list) {
|
|
594
|
+
list = [];
|
|
595
|
+
insertAfter.set(previousId, list);
|
|
596
|
+
}
|
|
597
|
+
list.push(item);
|
|
598
|
+
pending = [];
|
|
599
|
+
}
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
// =========================================================
|
|
603
|
+
// Build result 1 lần
|
|
604
|
+
// =========================================================
|
|
605
|
+
|
|
606
|
+
const result = new Array(dataLength + inserted.size);
|
|
607
|
+
let resultIndex = 0;
|
|
608
|
+
for (let i = 0; i < dataLength; i++) {
|
|
609
|
+
const item = dataArray[i];
|
|
610
|
+
result[resultIndex++] = item;
|
|
611
|
+
const rows = insertAfter.get(item.rowId);
|
|
612
|
+
if (rows) {
|
|
613
|
+
for (let j = 0; j < rows.length; j++) {
|
|
614
|
+
result[resultIndex++] = rows[j];
|
|
615
|
+
}
|
|
616
|
+
}
|
|
617
|
+
}
|
|
618
|
+
return result;
|
|
619
|
+
}
|
|
620
|
+
export function filterVisibleColumns(columns) {
|
|
621
|
+
let changed = false;
|
|
622
|
+
const result = [];
|
|
623
|
+
for (const column of columns) {
|
|
624
|
+
if (column.visible === false) {
|
|
625
|
+
changed = true;
|
|
626
|
+
continue;
|
|
627
|
+
}
|
|
628
|
+
if (column.children?.length) {
|
|
629
|
+
const children = filterVisibleColumns(column.children);
|
|
630
|
+
if (children !== column.children) {
|
|
631
|
+
changed = true;
|
|
632
|
+
result.push({
|
|
633
|
+
...column,
|
|
634
|
+
children
|
|
635
|
+
});
|
|
636
|
+
} else {
|
|
637
|
+
result.push(column);
|
|
638
|
+
}
|
|
639
|
+
} else {
|
|
640
|
+
result.push(column);
|
|
641
|
+
}
|
|
642
|
+
}
|
|
643
|
+
return changed ? result : columns;
|
|
644
|
+
}
|
|
645
|
+
|
|
646
|
+
// Sorting function
|
|
647
|
+
export const sortByType = (arr, rowDnd) => {
|
|
648
|
+
const colDnd = {
|
|
649
|
+
field: 'drag-handle',
|
|
650
|
+
width: 50,
|
|
651
|
+
fixed: 'left',
|
|
652
|
+
headerText: '',
|
|
653
|
+
allowFiltering: false,
|
|
654
|
+
allowResizing: false,
|
|
655
|
+
allowSortering: false
|
|
656
|
+
};
|
|
657
|
+
const cols = rowDnd?.enabled ? [{
|
|
658
|
+
...colDnd
|
|
659
|
+
}, ...arr] : [...arr];
|
|
660
|
+
|
|
661
|
+
// const visibleColumns = filterVisibleColumns(cols)
|
|
662
|
+
|
|
663
|
+
if (cols) {
|
|
664
|
+
return cols.sort((a, b) => {
|
|
665
|
+
if ((a.fixed ?? a.fixedType) === 'left' && (b.fixed ?? b.fixedType) !== 'left') {
|
|
666
|
+
return -1;
|
|
667
|
+
} else if ((a.fixed ?? a.fixedType) !== 'left' && (b.fixed ?? b.fixedType) === 'left') {
|
|
668
|
+
return 1;
|
|
669
|
+
} else if ((a.fixed ?? a.fixedType) === 'right' && (b.fixed ?? b.fixedType) !== 'right') {
|
|
670
|
+
return 1;
|
|
671
|
+
} else if ((a.fixed ?? a.fixedType) !== 'right' && (b.fixed ?? b.fixedType) === 'right') {
|
|
672
|
+
return -1;
|
|
673
|
+
}
|
|
674
|
+
return 0;
|
|
675
|
+
});
|
|
676
|
+
} else {
|
|
677
|
+
return [];
|
|
678
|
+
}
|
|
679
|
+
};
|
|
680
|
+
export function getVisibleColumnFields(columns) {
|
|
681
|
+
const result = [];
|
|
682
|
+
const traverse = items => {
|
|
683
|
+
for (const column of items) {
|
|
684
|
+
if (column?.visible === false) continue;
|
|
685
|
+
if (column.field) {
|
|
686
|
+
result.push(column.field);
|
|
687
|
+
}
|
|
688
|
+
if (column.children && column.children?.length) {
|
|
689
|
+
traverse(column.children);
|
|
690
|
+
}
|
|
691
|
+
}
|
|
692
|
+
};
|
|
693
|
+
traverse(columns);
|
|
694
|
+
return result;
|
|
695
|
+
}
|
|
@@ -825,8 +825,8 @@ export type RangeState = {
|
|
|
825
825
|
endRowIndex: number | undefined;
|
|
826
826
|
startColIndex: number | undefined;
|
|
827
827
|
endColIndex: number | undefined;
|
|
828
|
-
rowIds
|
|
829
|
-
colIds
|
|
828
|
+
rowIds?: string[];
|
|
829
|
+
colIds?: string[];
|
|
830
830
|
type?: any;
|
|
831
831
|
};
|
|
832
832
|
export type Sorter = {
|
|
@@ -196,10 +196,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
|
|
|
196
196
|
value: any;
|
|
197
197
|
rowData: RecordType;
|
|
198
198
|
}) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
|
|
199
|
-
onCellStyles?: Omit<CSSProperties, "
|
|
200
|
-
onCellHeaderStyles?: Omit<CSSProperties, "
|
|
199
|
+
onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
|
|
200
|
+
onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
|
|
201
201
|
onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
|
|
202
|
-
onCellFooterStyles?: Omit<CSSProperties, "
|
|
202
|
+
onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "left" | "right" | "position" | "display">);
|
|
203
203
|
getValue?: (row: any, rowIndex: number) => any;
|
|
204
204
|
getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
|
|
205
205
|
headerCellProps?: import("./../../grid-component/type").CellProps;
|