@fluentui/react-table 9.0.0-alpha.4 → 9.0.0-alpha.6
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/CHANGELOG.json +77 -5
- package/CHANGELOG.md +31 -6
- package/dist/index.d.ts +60 -47
- package/lib/hooks/index.js +2 -0
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/types.js.map +1 -1
- package/lib/hooks/useSelection.js +40 -13
- package/lib/hooks/useSelection.js.map +1 -1
- package/lib/hooks/useSort.js +38 -16
- package/lib/hooks/useSort.js.map +1 -1
- package/lib/hooks/useTable.js +22 -77
- package/lib/hooks/useTable.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/hooks/index.js +4 -0
- package/lib-commonjs/hooks/index.js.map +1 -1
- package/lib-commonjs/hooks/useSelection.js +45 -15
- package/lib-commonjs/hooks/useSelection.js.map +1 -1
- package/lib-commonjs/hooks/useSort.js +43 -18
- package/lib-commonjs/hooks/useSort.js.map +1 -1
- package/lib-commonjs/hooks/useTable.js +19 -76
- package/lib-commonjs/hooks/useTable.js.map +1 -1
- package/lib-commonjs/index.js +14 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,79 @@
|
|
|
2
2
|
"name": "@fluentui/react-table",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Thu, 13 Oct 2022 12:55:52 GMT",
|
|
6
|
+
"tag": "@fluentui/react-table_v9.0.0-alpha.6",
|
|
7
|
+
"version": "9.0.0-alpha.6",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-table",
|
|
13
|
+
"comment": "Bump @fluentui/react-avatar to v9.2.2",
|
|
14
|
+
"commit": "e563f3daaea9b7cc62f50bc15edd44edf5045107"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Thu, 13 Oct 2022 11:03:01 GMT",
|
|
21
|
+
"tag": "@fluentui/react-table_v9.0.0-alpha.5",
|
|
22
|
+
"version": "9.0.0-alpha.5",
|
|
23
|
+
"comments": {
|
|
24
|
+
"prerelease": [
|
|
25
|
+
{
|
|
26
|
+
"author": "olfedias@microsoft.com",
|
|
27
|
+
"package": "@fluentui/react-table",
|
|
28
|
+
"commit": "1a527d440e0497ef8046b3ce240492241e7a04ac",
|
|
29
|
+
"comment": "chore: Update Griffel to latest version"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"author": "lingfangao@hotmail.com",
|
|
33
|
+
"package": "@fluentui/react-table",
|
|
34
|
+
"commit": "33559052b672f787b021bd2fbc9826e88ce2a2de",
|
|
35
|
+
"comment": "BREAKING: refactor `useTable` to be composable"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"author": "beachball",
|
|
39
|
+
"package": "@fluentui/react-table",
|
|
40
|
+
"comment": "Bump @fluentui/react-aria to v9.2.2",
|
|
41
|
+
"commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui/react-table",
|
|
46
|
+
"comment": "Bump @fluentui/react-avatar to v9.2.1",
|
|
47
|
+
"commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-table",
|
|
52
|
+
"comment": "Bump @fluentui/react-checkbox to v9.0.8",
|
|
53
|
+
"commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
"author": "beachball",
|
|
57
|
+
"package": "@fluentui/react-table",
|
|
58
|
+
"comment": "Bump @fluentui/react-tabster to v9.1.3",
|
|
59
|
+
"commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-table",
|
|
64
|
+
"comment": "Bump @fluentui/react-utilities to v9.1.1",
|
|
65
|
+
"commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-table",
|
|
70
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.15",
|
|
71
|
+
"commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
|
|
72
|
+
}
|
|
73
|
+
]
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"date": "Mon, 03 Oct 2022 22:24:41 GMT",
|
|
6
78
|
"tag": "@fluentui/react-table_v9.0.0-alpha.4",
|
|
7
79
|
"version": "9.0.0-alpha.4",
|
|
8
80
|
"comments": {
|
|
@@ -23,25 +95,25 @@
|
|
|
23
95
|
"author": "beachball",
|
|
24
96
|
"package": "@fluentui/react-table",
|
|
25
97
|
"comment": "Bump @fluentui/react-aria to v9.2.1",
|
|
26
|
-
"commit": "
|
|
98
|
+
"commit": "67a8c98b8d53cd2fa14d668cf639b867b68ad18a"
|
|
27
99
|
},
|
|
28
100
|
{
|
|
29
101
|
"author": "beachball",
|
|
30
102
|
"package": "@fluentui/react-table",
|
|
31
103
|
"comment": "Bump @fluentui/react-avatar to v9.2.0",
|
|
32
|
-
"commit": "
|
|
104
|
+
"commit": "67a8c98b8d53cd2fa14d668cf639b867b68ad18a"
|
|
33
105
|
},
|
|
34
106
|
{
|
|
35
107
|
"author": "beachball",
|
|
36
108
|
"package": "@fluentui/react-table",
|
|
37
109
|
"comment": "Bump @fluentui/react-checkbox to v9.0.7",
|
|
38
|
-
"commit": "
|
|
110
|
+
"commit": "67a8c98b8d53cd2fa14d668cf639b867b68ad18a"
|
|
39
111
|
},
|
|
40
112
|
{
|
|
41
113
|
"author": "beachball",
|
|
42
114
|
"package": "@fluentui/react-table",
|
|
43
115
|
"comment": "Bump @fluentui/react-tabster to v9.1.2",
|
|
44
|
-
"commit": "
|
|
116
|
+
"commit": "67a8c98b8d53cd2fa14d668cf639b867b68ad18a"
|
|
45
117
|
}
|
|
46
118
|
],
|
|
47
119
|
"none": [
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,47 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-table
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 13 Oct 2022 12:55:52 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-alpha.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.6)
|
|
8
|
+
|
|
9
|
+
Thu, 13 Oct 2022 12:55:52 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-alpha.5..@fluentui/react-table_v9.0.0-alpha.6)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-avatar to v9.2.2 ([PR #25112](https://github.com/microsoft/fluentui/pull/25112) by beachball)
|
|
15
|
+
|
|
16
|
+
## [9.0.0-alpha.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.5)
|
|
17
|
+
|
|
18
|
+
Thu, 13 Oct 2022 11:03:01 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-alpha.4..@fluentui/react-table_v9.0.0-alpha.5)
|
|
20
|
+
|
|
21
|
+
### Changes
|
|
22
|
+
|
|
23
|
+
- chore: Update Griffel to latest version ([PR #25075](https://github.com/microsoft/fluentui/pull/25075) by olfedias@microsoft.com)
|
|
24
|
+
- BREAKING: refactor `useTable` to be composable ([PR #24947](https://github.com/microsoft/fluentui/pull/24947) by lingfangao@hotmail.com)
|
|
25
|
+
- Bump @fluentui/react-aria to v9.2.2 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
|
|
26
|
+
- Bump @fluentui/react-avatar to v9.2.1 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
|
|
27
|
+
- Bump @fluentui/react-checkbox to v9.0.8 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
|
|
28
|
+
- Bump @fluentui/react-tabster to v9.1.3 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
|
|
29
|
+
- Bump @fluentui/react-utilities to v9.1.1 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
|
|
30
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.15 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
|
|
31
|
+
|
|
7
32
|
## [9.0.0-alpha.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.4)
|
|
8
33
|
|
|
9
|
-
Mon, 03 Oct 2022 22:
|
|
34
|
+
Mon, 03 Oct 2022 22:24:41 GMT
|
|
10
35
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-table_v9.0.0-alpha.3..@fluentui/react-table_v9.0.0-alpha.4)
|
|
11
36
|
|
|
12
37
|
### Changes
|
|
13
38
|
|
|
14
39
|
- feat: `noNativeElements` renders a flex layout ([PR #24913](https://github.com/microsoft/fluentui/pull/24913) by lingfangao@hotmail.com)
|
|
15
40
|
- feat: Use AvatarContext to override avatar size ([PR #24807](https://github.com/microsoft/fluentui/pull/24807) by lingfangao@hotmail.com)
|
|
16
|
-
- Bump @fluentui/react-aria to v9.2.1 ([PR #
|
|
17
|
-
- Bump @fluentui/react-avatar to v9.2.0 ([PR #
|
|
18
|
-
- Bump @fluentui/react-checkbox to v9.0.7 ([PR #
|
|
19
|
-
- Bump @fluentui/react-tabster to v9.1.2 ([PR #
|
|
41
|
+
- Bump @fluentui/react-aria to v9.2.1 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
|
|
42
|
+
- Bump @fluentui/react-avatar to v9.2.0 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
|
|
43
|
+
- Bump @fluentui/react-checkbox to v9.0.7 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
|
|
44
|
+
- Bump @fluentui/react-tabster to v9.1.2 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
|
|
20
45
|
|
|
21
46
|
## [9.0.0-alpha.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-table_v9.0.0-alpha.3)
|
|
22
47
|
|
package/dist/index.d.ts
CHANGED
|
@@ -18,12 +18,25 @@ export declare interface ColumnDefinition<TItem> {
|
|
|
18
18
|
|
|
19
19
|
export declare type ColumnId = string | number;
|
|
20
20
|
|
|
21
|
-
declare
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
21
|
+
export declare interface HeadlessTableState<TItem> extends Pick<UseTableOptions<TItem>, 'items' | 'getRowId'> {
|
|
22
|
+
/**
|
|
23
|
+
* The row data for rendering
|
|
24
|
+
* @param rowEnhancer - Enhances the row with extra user data
|
|
25
|
+
*/
|
|
26
|
+
getRows: <TRowState extends RowState<TItem> = RowState<TItem>>(rowEnhancer?: RowEnhancer<TItem, TRowState>) => TRowState[];
|
|
27
|
+
/**
|
|
28
|
+
* State and actions to manage row selection
|
|
29
|
+
*/
|
|
30
|
+
selection: TableSelectionState;
|
|
31
|
+
/**
|
|
32
|
+
* State and actions to manage row sorting
|
|
33
|
+
*/
|
|
34
|
+
sort: TableSortState<TItem>;
|
|
35
|
+
/**
|
|
36
|
+
* Table columns
|
|
37
|
+
*/
|
|
38
|
+
columns: ColumnDefinition<TItem>[];
|
|
39
|
+
}
|
|
27
40
|
|
|
28
41
|
/**
|
|
29
42
|
* Render the final JSX of Table
|
|
@@ -70,10 +83,7 @@ export declare const renderTableRow_unstable: (state: TableRowState) => JSX.Elem
|
|
|
70
83
|
*/
|
|
71
84
|
export declare const renderTableSelectionCell_unstable: (state: TableSelectionCellState) => JSX.Element;
|
|
72
85
|
|
|
73
|
-
declare type RowEnhancer<TItem, TRowState extends RowState<TItem> = RowState<TItem>> = (row: RowState<TItem
|
|
74
|
-
selection: TableSelectionState;
|
|
75
|
-
sort: TableSortState;
|
|
76
|
-
}) => TRowState;
|
|
86
|
+
declare type RowEnhancer<TItem, TRowState extends RowState<TItem> = RowState<TItem>> = (row: RowState<TItem>) => TRowState;
|
|
77
87
|
|
|
78
88
|
export declare type RowId = string | number;
|
|
79
89
|
|
|
@@ -388,7 +398,7 @@ export declare interface TableSelectionState {
|
|
|
388
398
|
/**
|
|
389
399
|
* Collection of row ids corresponding to selected rows
|
|
390
400
|
*/
|
|
391
|
-
selectedRows: RowId
|
|
401
|
+
selectedRows: Set<RowId>;
|
|
392
402
|
/**
|
|
393
403
|
* Whether all rows are selected
|
|
394
404
|
*/
|
|
@@ -407,7 +417,7 @@ export declare type TableSlots = {
|
|
|
407
417
|
root: Slot<'table', 'div'>;
|
|
408
418
|
};
|
|
409
419
|
|
|
410
|
-
export declare interface TableSortState {
|
|
420
|
+
export declare interface TableSortState<TItem> {
|
|
411
421
|
/**
|
|
412
422
|
* Current sort direction
|
|
413
423
|
*/
|
|
@@ -429,6 +439,10 @@ export declare interface TableSortState {
|
|
|
429
439
|
* returns undefined if the column is not sorted
|
|
430
440
|
*/
|
|
431
441
|
getSortDirection: (columnId: ColumnId) => SortDirection | undefined;
|
|
442
|
+
/**
|
|
443
|
+
* Sorts rows and returns a **shallow** copy of original items
|
|
444
|
+
*/
|
|
445
|
+
sort: (rows: RowState<TItem>[]) => RowState<TItem>[];
|
|
432
446
|
}
|
|
433
447
|
|
|
434
448
|
/**
|
|
@@ -436,22 +450,47 @@ export declare interface TableSortState {
|
|
|
436
450
|
*/
|
|
437
451
|
export declare type TableState = ComponentState<TableSlots> & Pick<Required<TableProps>, 'size' | 'noNativeElements'> & TableContextValue;
|
|
438
452
|
|
|
439
|
-
declare
|
|
453
|
+
export declare type TableStatePlugin = <TItem>(tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>;
|
|
454
|
+
|
|
455
|
+
export declare function useSelection<TItem>(options: UseSelectionOptions): (tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>;
|
|
456
|
+
|
|
457
|
+
declare interface UseSelectionOptions {
|
|
440
458
|
/**
|
|
441
|
-
*
|
|
459
|
+
* Can be multi or single select
|
|
442
460
|
*/
|
|
443
|
-
|
|
461
|
+
selectionMode: SelectionMode_2;
|
|
444
462
|
/**
|
|
445
|
-
*
|
|
463
|
+
* Used in uncontrolled mode to set initial selected rows on mount
|
|
446
464
|
*/
|
|
447
|
-
|
|
465
|
+
defaultSelectedItems?: Set<RowId>;
|
|
448
466
|
/**
|
|
449
|
-
*
|
|
467
|
+
* Used to control row selection
|
|
468
|
+
*/
|
|
469
|
+
selectedItems?: Set<RowId>;
|
|
470
|
+
/**
|
|
471
|
+
* Called when selection changes
|
|
450
472
|
*/
|
|
451
|
-
|
|
473
|
+
onSelectionChange?: (selectedItems: Set<RowId>) => void;
|
|
452
474
|
}
|
|
453
475
|
|
|
454
|
-
export declare function
|
|
476
|
+
export declare function useSort<TItem>(options: UseSortOptions): (tableState: HeadlessTableState<TItem>) => HeadlessTableState<TItem>;
|
|
477
|
+
|
|
478
|
+
declare interface UseSortOptions {
|
|
479
|
+
/**
|
|
480
|
+
* Used to control sorting
|
|
481
|
+
*/
|
|
482
|
+
sortState?: SortState;
|
|
483
|
+
/**
|
|
484
|
+
* Used in uncontrolled mode to set initial sort column and direction on mount
|
|
485
|
+
*/
|
|
486
|
+
defaultSortState?: SortState;
|
|
487
|
+
/**
|
|
488
|
+
* Called when sort changes
|
|
489
|
+
*/
|
|
490
|
+
onSortChange?: (state: SortState) => void;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
export declare function useTable<TItem>(options: UseTableOptions<TItem>, plugins?: TableStatePlugin[]): HeadlessTableState<TItem>;
|
|
455
494
|
|
|
456
495
|
/**
|
|
457
496
|
* Create the state required to render Table.
|
|
@@ -562,36 +601,10 @@ export declare const useTableHeaderCellStyles_unstable: (state: TableHeaderCellS
|
|
|
562
601
|
*/
|
|
563
602
|
export declare const useTableHeaderStyles_unstable: (state: TableHeaderState) => TableHeaderState;
|
|
564
603
|
|
|
565
|
-
export declare interface UseTableOptions<TItem
|
|
604
|
+
export declare interface UseTableOptions<TItem> {
|
|
566
605
|
columns: ColumnDefinition<TItem>[];
|
|
567
606
|
items: TItem[];
|
|
568
|
-
selectionMode?: SelectionMode_2;
|
|
569
|
-
/**
|
|
570
|
-
* Used in uncontrolled mode to set initial selected rows on mount
|
|
571
|
-
*/
|
|
572
|
-
defaultSelectedRows?: Set<RowId>;
|
|
573
|
-
/**
|
|
574
|
-
* Used to control row selection
|
|
575
|
-
*/
|
|
576
|
-
selectedRows?: Set<RowId>;
|
|
577
|
-
/**
|
|
578
|
-
* Called when selection changes
|
|
579
|
-
*/
|
|
580
|
-
onSelectionChange?: OnSelectionChangeCallback;
|
|
581
|
-
/**
|
|
582
|
-
* Used to control sorting
|
|
583
|
-
*/
|
|
584
|
-
sortState?: SortState;
|
|
585
|
-
/**
|
|
586
|
-
* Used in uncontrolled mode to set initial sort column and direction on mount
|
|
587
|
-
*/
|
|
588
|
-
defaultSortState?: SortState;
|
|
589
|
-
/**
|
|
590
|
-
* Called when sort changes
|
|
591
|
-
*/
|
|
592
|
-
onSortChange?: OnSortChangeCallback;
|
|
593
607
|
getRowId?: (item: TItem) => RowId;
|
|
594
|
-
rowEnhancer?: RowEnhancer<TItem, TRowState>;
|
|
595
608
|
}
|
|
596
609
|
|
|
597
610
|
/**
|
package/lib/hooks/index.js
CHANGED
package/lib/hooks/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC","sourcesContent":["export * from './types';\nexport * from './useTable';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC","sourcesContent":["export * from './types';\nexport * from './useTable';\nexport * from './useSort';\nexport * from './useSelection';\n"]}
|
package/lib/hooks/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/types.ts"],"names":[],"mappings":"","sourcesContent":["import { SortDirection } from '../components/Table/Table.types';\n\nexport type RowId = string | number;\nexport type ColumnId = string | number;\nexport type
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["packages/react-components/react-table/src/hooks/types.ts"],"names":[],"mappings":"","sourcesContent":["import { SortDirection } from '../components/Table/Table.types';\n\nexport type RowId = string | number;\nexport type ColumnId = string | number;\nexport type SelectionMode = 'single' | 'multiselect';\n\nexport interface SortState {\n sortColumn: ColumnId | undefined;\n sortDirection: SortDirection;\n}\n\nexport interface ColumnDefinition<TItem> {\n columnId: ColumnId;\n compare?: (a: TItem, b: TItem) => number;\n}\n\nexport type RowEnhancer<TItem, TRowState extends RowState<TItem> = RowState<TItem>> = (\n row: RowState<TItem>,\n) => TRowState;\n\nexport interface TableSortState<TItem> {\n /**\n * Current sort direction\n */\n sortDirection: SortDirection;\n /**\n * Column id of the currently sorted column\n */\n sortColumn: ColumnId | undefined;\n /**\n * Set the sort direction for the specified column\n */\n setColumnSort: (columnId: ColumnId, sortDirection: SortDirection) => void;\n /**\n * Toggles the sort direction for specified column\n */\n toggleColumnSort: (columnId: ColumnId) => void;\n /**\n * Returns the sort direction if a column is sorted,\n * returns undefined if the column is not sorted\n */\n getSortDirection: (columnId: ColumnId) => SortDirection | undefined;\n\n /**\n * Sorts rows and returns a **shallow** copy of original items\n */\n sort: (rows: RowState<TItem>[]) => RowState<TItem>[];\n}\n\nexport interface TableSelectionState {\n /**\n * Clears all selected rows\n */\n clearRows: () => void;\n /**\n * Selects single row\n */\n selectRow: (rowId: RowId) => void;\n /**\n * De-selects single row\n */\n deselectRow: (rowId: RowId) => void;\n /**\n * Toggle selection of all rows\n */\n toggleAllRows: () => void;\n /**\n * Toggle selection of single row\n */\n toggleRow: (rowId: RowId) => void;\n /**\n * Collection of row ids corresponding to selected rows\n */\n selectedRows: Set<RowId>;\n /**\n * Whether all rows are selected\n */\n allRowsSelected: boolean;\n /**\n * Whether some rows are selected\n */\n someRowsSelected: boolean;\n\n /**\n * Checks if a given rowId is selected\n */\n isRowSelected: (rowId: RowId) => boolean;\n}\n\nexport interface RowState<TItem> {\n /**\n * User provided data\n */\n item: TItem;\n /**\n * The row id, defaults to index position in the collection\n */\n rowId: RowId;\n}\n\nexport interface TableState<TItem> extends Pick<UseTableOptions<TItem>, 'items' | 'getRowId'> {\n /**\n * The row data for rendering\n * @param rowEnhancer - Enhances the row with extra user data\n */\n getRows: <TRowState extends RowState<TItem> = RowState<TItem>>(\n rowEnhancer?: RowEnhancer<TItem, TRowState>,\n ) => TRowState[];\n /**\n * State and actions to manage row selection\n */\n selection: TableSelectionState;\n /**\n * State and actions to manage row sorting\n */\n sort: TableSortState<TItem>;\n /**\n * Table columns\n */\n columns: ColumnDefinition<TItem>[];\n}\n\nexport interface UseSortOptions {\n /**\n * Used to control sorting\n */\n sortState?: SortState;\n /**\n * Used in uncontrolled mode to set initial sort column and direction on mount\n */\n defaultSortState?: SortState;\n /**\n * Called when sort changes\n */\n onSortChange?: (state: SortState) => void;\n}\n\nexport interface UseSelectionOptions {\n /**\n * Can be multi or single select\n */\n selectionMode: SelectionMode;\n /**\n * Used in uncontrolled mode to set initial selected rows on mount\n */\n defaultSelectedItems?: Set<RowId>;\n /**\n * Used to control row selection\n */\n selectedItems?: Set<RowId>;\n /**\n * Called when selection changes\n */\n onSelectionChange?: (selectedItems: Set<RowId>) => void;\n}\n\nexport interface UseTableOptions<TItem> {\n columns: ColumnDefinition<TItem>[];\n items: TItem[];\n getRowId?: (item: TItem) => RowId;\n}\n\nexport type TableStatePlugin = <TItem>(tableState: TableState<TItem>) => TableState<TItem>;\n"]}
|
|
@@ -1,11 +1,32 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useControllableState, useEventCallback } from '@fluentui/react-utilities';
|
|
3
3
|
import { createSelectionManager } from './selectionManager';
|
|
4
|
+
|
|
5
|
+
const noop = () => undefined;
|
|
6
|
+
|
|
7
|
+
export const defaultTableSelectionState = {
|
|
8
|
+
allRowsSelected: false,
|
|
9
|
+
clearRows: noop,
|
|
10
|
+
deselectRow: noop,
|
|
11
|
+
isRowSelected: () => false,
|
|
12
|
+
selectRow: noop,
|
|
13
|
+
selectedRows: /*#__PURE__*/new Set(),
|
|
14
|
+
someRowsSelected: false,
|
|
15
|
+
toggleAllRows: noop,
|
|
16
|
+
toggleRow: noop
|
|
17
|
+
};
|
|
4
18
|
export function useSelection(options) {
|
|
19
|
+
// False positive, these plugin hooks are intended to be run on every render
|
|
20
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
21
|
+
return tableState => useSelectionState(tableState, options);
|
|
22
|
+
}
|
|
23
|
+
export function useSelectionState(tableState, options) {
|
|
5
24
|
const {
|
|
6
|
-
selectionMode,
|
|
7
25
|
items,
|
|
8
|
-
getRowId
|
|
26
|
+
getRowId
|
|
27
|
+
} = tableState;
|
|
28
|
+
const {
|
|
29
|
+
selectionMode,
|
|
9
30
|
defaultSelectedItems,
|
|
10
31
|
selectedItems,
|
|
11
32
|
onSelectionChange
|
|
@@ -24,7 +45,11 @@ export function useSelection(options) {
|
|
|
24
45
|
});
|
|
25
46
|
}, [onSelectionChange, selectionMode, setSelected]);
|
|
26
47
|
const toggleAllRows = useEventCallback(() => {
|
|
27
|
-
selectionManager.toggleAllItems(items.map((item, i) =>
|
|
48
|
+
selectionManager.toggleAllItems(items.map((item, i) => {
|
|
49
|
+
var _a;
|
|
50
|
+
|
|
51
|
+
return (_a = getRowId === null || getRowId === void 0 ? void 0 : getRowId(item)) !== null && _a !== void 0 ? _a : i;
|
|
52
|
+
}), selected);
|
|
28
53
|
});
|
|
29
54
|
const toggleRow = useEventCallback(rowId => selectionManager.toggleItem(rowId, selected));
|
|
30
55
|
const deselectRow = useEventCallback(rowId => selectionManager.deselectItem(rowId, selected));
|
|
@@ -32,16 +57,18 @@ export function useSelection(options) {
|
|
|
32
57
|
|
|
33
58
|
const isRowSelected = rowId => selectionManager.isSelected(rowId, selected);
|
|
34
59
|
|
|
35
|
-
return {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
60
|
+
return { ...tableState,
|
|
61
|
+
selection: {
|
|
62
|
+
someRowsSelected: selected.size > 0,
|
|
63
|
+
allRowsSelected: selectionMode === 'single' ? selected.size > 0 : selected.size === items.length,
|
|
64
|
+
selectedRows: selected,
|
|
65
|
+
toggleRow,
|
|
66
|
+
toggleAllRows,
|
|
67
|
+
clearRows: selectionManager.clearItems,
|
|
68
|
+
deselectRow,
|
|
69
|
+
selectRow,
|
|
70
|
+
isRowSelected
|
|
71
|
+
}
|
|
45
72
|
};
|
|
46
73
|
}
|
|
47
74
|
//# sourceMappingURL=useSelection.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/hooks/useSelection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,EAA+B,gBAA/B,QAAuD,2BAAvD;AACA,SAAS,sBAAT,QAAuC,oBAAvC;
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/hooks/useSelection.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,EAA+B,gBAA/B,QAAuD,2BAAvD;AACA,SAAS,sBAAT,QAAuC,oBAAvC;;AAGA,MAAM,IAAI,GAAG,MAAM,SAAnB;;AAEA,OAAO,MAAM,0BAA0B,GAAwB;EAC7D,eAAe,EAAE,KAD4C;EAE7D,SAAS,EAAE,IAFkD;EAG7D,WAAW,EAAE,IAHgD;EAI7D,aAAa,EAAE,MAAM,KAJwC;EAK7D,SAAS,EAAE,IALkD;EAM7D,YAAY,eAAE,IAAI,GAAJ,EAN+C;EAO7D,gBAAgB,EAAE,KAP2C;EAQ7D,aAAa,EAAE,IAR8C;EAS7D,SAAS,EAAE;AATkD,CAAxD;AAYP,OAAM,SAAU,YAAV,CAA8B,OAA9B,EAA0D;EAC9D;EACA;EACA,OAAQ,UAAD,IAAmC,iBAAiB,CAAC,UAAD,EAAa,OAAb,CAA3D;AACD;AAED,OAAM,SAAU,iBAAV,CACJ,UADI,EAEJ,OAFI,EAEwB;EAE5B,MAAM;IAAE,KAAF;IAAS;EAAT,IAAsB,UAA5B;EACA,MAAM;IAAE,aAAF;IAAiB,oBAAjB;IAAuC,aAAvC;IAAsD;EAAtD,IAA4E,OAAlF;EAEA,MAAM,CAAC,QAAD,EAAW,WAAX,IAA0B,oBAAoB,CAAC;IACnD,YAAY,EAAE,IAAI,GAAJ,EADqC;IAEnD,YAAY,EAAE,oBAFqC;IAGnD,KAAK,EAAE;EAH4C,CAAD,CAApD;EAMA,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IAC1C,OAAO,sBAAsB,CAAC,aAAD,EAAgB,gBAAgB,IAAG;MAC9D,WAAW,CAAC,MAAK;QACf,iBAAiB,KAAA,IAAjB,IAAA,iBAAiB,KAAA,KAAA,CAAjB,GAAiB,KAAA,CAAjB,GAAA,iBAAiB,CAAG,gBAAH,CAAjB;QACA,OAAO,gBAAP;MACD,CAHU,CAAX;IAID,CAL4B,CAA7B;EAMD,CAPwB,EAOtB,CAAC,iBAAD,EAAoB,aAApB,EAAmC,WAAnC,CAPsB,CAAzB;EASA,MAAM,aAAa,GAAyC,gBAAgB,CAAC,MAAK;IAChF,gBAAgB,CAAC,cAAjB,CACE,KAAK,CAAC,GAAN,CAAU,CAAC,IAAD,EAAO,CAAP,KAAY;MAAA,IAAA,EAAA;;MAAC,OAAA,CAAA,EAAA,GAAA,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,IAAH,CAAR,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,EAAhB,GAAoB,CAApB;IAAqB,CAA5C,CADF,EAEE,QAFF;EAID,CAL2E,CAA5E;EAOA,MAAM,SAAS,GAAqC,gBAAgB,CAAE,KAAD,IACnE,gBAAgB,CAAC,UAAjB,CAA4B,KAA5B,EAAmC,QAAnC,CADkE,CAApE;EAIA,MAAM,WAAW,GAAuC,gBAAgB,CAAE,KAAD,IACvE,gBAAgB,CAAC,YAAjB,CAA8B,KAA9B,EAAqC,QAArC,CADsE,CAAxE;EAIA,MAAM,SAAS,GAAqC,gBAAgB,CAAE,KAAD,IACnE,gBAAgB,CAAC,UAAjB,CAA4B,KAA5B,EAAmC,QAAnC,CADkE,CAApE;;EAIA,MAAM,aAAa,GAA0C,KAAD,IAC1D,gBAAgB,CAAC,UAAjB,CAA4B,KAA5B,EAAmC,QAAnC,CADF;;EAGA,OAAO,EACL,GAAG,UADE;IAEL,SAAS,EAAE;MACT,gBAAgB,EAAE,QAAQ,CAAC,IAAT,GAAgB,CADzB;MAET,eAAe,EAAE,aAAa,KAAK,QAAlB,GAA6B,QAAQ,CAAC,IAAT,GAAgB,CAA7C,GAAiD,QAAQ,CAAC,IAAT,KAAkB,KAAK,CAAC,MAFjF;MAGT,YAAY,EAAE,QAHL;MAIT,SAJS;MAKT,aALS;MAMT,SAAS,EAAE,gBAAgB,CAAC,UANnB;MAOT,WAPS;MAQT,SARS;MAST;IATS;EAFN,CAAP;AAcD","sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport { createSelectionManager } from './selectionManager';\nimport type { RowId, TableSelectionState, TableState, UseSelectionOptions } from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSelectionState: TableSelectionState = {\n allRowsSelected: false,\n clearRows: noop,\n deselectRow: noop,\n isRowSelected: () => false,\n selectRow: noop,\n selectedRows: new Set(),\n someRowsSelected: false,\n toggleAllRows: noop,\n toggleRow: noop,\n};\n\nexport function useSelection<TItem>(options: UseSelectionOptions) {\n // False positive, these plugin hooks are intended to be run on every render\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return (tableState: TableState<TItem>) => useSelectionState(tableState, options);\n}\n\nexport function useSelectionState<TItem>(\n tableState: TableState<TItem>,\n options: UseSelectionOptions,\n): TableState<TItem> {\n const { items, getRowId } = tableState;\n const { selectionMode, defaultSelectedItems, selectedItems, onSelectionChange } = options;\n\n const [selected, setSelected] = useControllableState({\n initialState: new Set<RowId>(),\n defaultState: defaultSelectedItems,\n state: selectedItems,\n });\n\n const selectionManager = React.useMemo(() => {\n return createSelectionManager(selectionMode, newSelectedItems => {\n setSelected(() => {\n onSelectionChange?.(newSelectedItems);\n return newSelectedItems;\n });\n });\n }, [onSelectionChange, selectionMode, setSelected]);\n\n const toggleAllRows: TableSelectionState['toggleAllRows'] = useEventCallback(() => {\n selectionManager.toggleAllItems(\n items.map((item, i) => getRowId?.(item) ?? i),\n selected,\n );\n });\n\n const toggleRow: TableSelectionState['toggleRow'] = useEventCallback((rowId: RowId) =>\n selectionManager.toggleItem(rowId, selected),\n );\n\n const deselectRow: TableSelectionState['deselectRow'] = useEventCallback((rowId: RowId) =>\n selectionManager.deselectItem(rowId, selected),\n );\n\n const selectRow: TableSelectionState['selectRow'] = useEventCallback((rowId: RowId) =>\n selectionManager.selectItem(rowId, selected),\n );\n\n const isRowSelected: TableSelectionState['isRowSelected'] = (rowId: RowId) =>\n selectionManager.isSelected(rowId, selected);\n\n return {\n ...tableState,\n selection: {\n someRowsSelected: selected.size > 0,\n allRowsSelected: selectionMode === 'single' ? selected.size > 0 : selected.size === items.length,\n selectedRows: selected,\n toggleRow,\n toggleAllRows,\n clearRows: selectionManager.clearItems,\n deselectRow,\n selectRow,\n isRowSelected,\n },\n };\n}\n"],"sourceRoot":"../src/"}
|
package/lib/hooks/useSort.js
CHANGED
|
@@ -1,7 +1,25 @@
|
|
|
1
1
|
import { useControllableState } from '@fluentui/react-utilities';
|
|
2
|
+
|
|
3
|
+
const noop = () => undefined;
|
|
4
|
+
|
|
5
|
+
export const defaultTableSortState = {
|
|
6
|
+
getSortDirection: () => 'ascending',
|
|
7
|
+
setColumnSort: noop,
|
|
8
|
+
sort: rows => [...rows],
|
|
9
|
+
sortColumn: undefined,
|
|
10
|
+
sortDirection: 'ascending',
|
|
11
|
+
toggleColumnSort: noop
|
|
12
|
+
};
|
|
2
13
|
export function useSort(options) {
|
|
14
|
+
// False positive, these plugin hooks are intended to be run on every render
|
|
15
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
16
|
+
return tableState => useSortState(tableState, options);
|
|
17
|
+
}
|
|
18
|
+
export function useSortState(tableState, options) {
|
|
19
|
+
const {
|
|
20
|
+
columns
|
|
21
|
+
} = tableState;
|
|
3
22
|
const {
|
|
4
|
-
columns,
|
|
5
23
|
sortState,
|
|
6
24
|
defaultSortState,
|
|
7
25
|
onSortChange
|
|
@@ -45,28 +63,32 @@ export function useSort(options) {
|
|
|
45
63
|
setSorted(newState);
|
|
46
64
|
};
|
|
47
65
|
|
|
48
|
-
const sort =
|
|
49
|
-
|
|
66
|
+
const sort = rows => {
|
|
67
|
+
return rows.slice().sort((a, b) => {
|
|
68
|
+
const sortColumnDef = columns.find(column => column.columnId === sortColumn);
|
|
50
69
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
70
|
+
if (!(sortColumnDef === null || sortColumnDef === void 0 ? void 0 : sortColumnDef.compare)) {
|
|
71
|
+
return 0;
|
|
72
|
+
}
|
|
54
73
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
74
|
+
const mod = sortDirection === 'ascending' ? 1 : -1;
|
|
75
|
+
return sortColumnDef.compare(a.item, b.item) * mod;
|
|
76
|
+
});
|
|
77
|
+
};
|
|
58
78
|
|
|
59
79
|
const getSortDirection = columnId => {
|
|
60
80
|
return sortColumn === columnId ? sortDirection : undefined;
|
|
61
81
|
};
|
|
62
82
|
|
|
63
|
-
return {
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
83
|
+
return { ...tableState,
|
|
84
|
+
sort: {
|
|
85
|
+
sort,
|
|
86
|
+
sortColumn,
|
|
87
|
+
sortDirection,
|
|
88
|
+
setColumnSort,
|
|
89
|
+
toggleColumnSort,
|
|
90
|
+
getSortDirection
|
|
91
|
+
}
|
|
70
92
|
};
|
|
71
93
|
}
|
|
72
94
|
//# sourceMappingURL=useSort.js.map
|
package/lib/hooks/useSort.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-table/src/hooks/useSort.ts"],"names":[],"mappings":"AAAA,SAAS,oBAAT,QAAqC,2BAArC;
|
|
1
|
+
{"version":3,"sources":["packages/react-components/react-table/src/hooks/useSort.ts"],"names":[],"mappings":"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","sourcesContent":["import { useControllableState } from '@fluentui/react-utilities';\nimport type { ColumnId, RowState, SortState, TableSortState, TableState, UseSortOptions } from './types';\n\nconst noop = () => undefined;\n\nexport const defaultTableSortState: TableSortState<unknown> = {\n getSortDirection: () => 'ascending',\n setColumnSort: noop,\n sort: (rows: RowState<unknown>[]) => [...rows],\n sortColumn: undefined,\n sortDirection: 'ascending',\n toggleColumnSort: noop,\n};\n\nexport function useSort<TItem>(options: UseSortOptions) {\n // False positive, these plugin hooks are intended to be run on every render\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return (tableState: TableState<TItem>) => useSortState(tableState, options);\n}\n\nexport function useSortState<TItem>(tableState: TableState<TItem>, options: UseSortOptions): TableState<TItem> {\n const { columns } = tableState;\n const { sortState, defaultSortState, onSortChange } = options;\n\n const [sorted, setSorted] = useControllableState<SortState>({\n initialState: {\n sortDirection: 'ascending' as const,\n sortColumn: undefined,\n },\n defaultState: defaultSortState,\n state: sortState,\n });\n\n const { sortColumn, sortDirection } = sorted;\n\n const toggleColumnSort = (columnId: ColumnId | undefined) => {\n setSorted(s => {\n const newState = { ...s, sortColumn: columnId };\n if (s.sortColumn === columnId) {\n newState.sortDirection = s.sortDirection === 'ascending' ? 'descending' : 'ascending';\n } else {\n newState.sortDirection = 'ascending';\n }\n\n onSortChange?.(newState);\n return newState;\n });\n };\n\n const setColumnSort: TableSortState<TItem>['setColumnSort'] = (nextSortColumn, nextSortDirection) => {\n const newState = { sortColumn: nextSortColumn, sortDirection: nextSortDirection };\n onSortChange?.(newState);\n setSorted(newState);\n };\n\n const sort = (rows: RowState<TItem>[]) => {\n return rows.slice().sort((a, b) => {\n const sortColumnDef = columns.find(column => column.columnId === sortColumn);\n if (!sortColumnDef?.compare) {\n return 0;\n }\n\n const mod = sortDirection === 'ascending' ? 1 : -1;\n return sortColumnDef.compare(a.item, b.item) * mod;\n });\n };\n\n const getSortDirection: TableSortState<TItem>['getSortDirection'] = (columnId: ColumnId) => {\n return sortColumn === columnId ? sortDirection : undefined;\n };\n\n return {\n ...tableState,\n sort: {\n sort,\n sortColumn,\n sortDirection,\n setColumnSort,\n toggleColumnSort,\n getSortDirection,\n },\n };\n}\n"],"sourceRoot":"../src/"}
|