@synerise/ds-table 0.42.5 → 0.42.9
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.md +45 -0
- package/README.md +45 -44
- package/dist/Cell/StatusLabel/StatusLabel.js +3 -1
- package/dist/Cell/StatusLabel/StatusLabel.types.d.ts +2 -1
- package/dist/ColumnSortMenu/SortRenderer.js +12 -4
- package/dist/ColumnSortMenu/__spec__/groupedColumnsSort.spec.js +2 -1
- package/dist/ColumnSortMenu/useSortState.d.ts +4 -3
- package/dist/ColumnSortMenu/useSortState.js +48 -6
- package/dist/DefaultTable/DefaultTable.js +13 -4
- package/dist/GroupTable/GroupTable.js +3 -2
- package/dist/InfiniteScroll/InfiniteLoaderItem.js +4 -0
- package/dist/Table.types.d.ts +7 -0
- package/dist/VirtualTable/VirtualTable.js +1 -1
- package/package.json +19 -17
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,51 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.42.9](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.42.8...@synerise/ds-table@0.42.9) (2022-01-04)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-table
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.42.8](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.42.7...@synerise/ds-table@0.42.8) (2021-12-29)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* **table:** fixes sorting ([8042c70](https://github.com/synerise/synerise-design/commit/8042c70e131be15ad8cb30e771d0c5b695647b8d))
|
|
20
|
+
* **table:** fixes sorting, adds missing dependencies ([4d3a1d8](https://github.com/synerise/synerise-design/commit/4d3a1d802cfef12a8cd7e2647e33965c9cfb838d))
|
|
21
|
+
* **table:** fixes styles of sorting columns ([0d50c75](https://github.com/synerise/synerise-design/commit/0d50c75b06dd7b81f7820745a1a85b2690f6bce8))
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
## [0.42.7](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.42.6...@synerise/ds-table@0.42.7) (2021-12-22)
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
### Bug Fixes
|
|
31
|
+
|
|
32
|
+
* **table:** add customColor prop to badge status ([81a6c89](https://github.com/synerise/synerise-design/commit/81a6c89fc5d777ca6ec17c0d36267cd81eec9db3))
|
|
33
|
+
* **table:** update dependencies ([cb6ba1b](https://github.com/synerise/synerise-design/commit/cb6ba1bd84f1100b011d7f9565d1e0248137acbe))
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
## [0.42.6](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.42.5...@synerise/ds-table@0.42.6) (2021-12-20)
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
### Bug Fixes
|
|
43
|
+
|
|
44
|
+
* **table:** fixes first arg of onSelectionChange handler ([6321efc](https://github.com/synerise/synerise-design/commit/6321efc3e8a49e5184e274583791bb5ccb35e774))
|
|
45
|
+
* **table:** fixes returned data by on change selection function ([151e195](https://github.com/synerise/synerise-design/commit/151e195b8bb6d37f9fdede12aaa569b56ba97e82))
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
6
51
|
## [0.42.5](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.42.4...@synerise/ds-table@0.42.5) (2021-12-01)
|
|
7
52
|
|
|
8
53
|
|
package/README.md
CHANGED
|
@@ -13,50 +13,51 @@ Table UI Component
|
|
|
13
13
|
|
|
14
14
|
### Table
|
|
15
15
|
|
|
16
|
-
| Property | Description | Type
|
|
17
|
-
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -----------------------------------------------------------------------
|
|
18
|
-
| bordered | Whether to show all table borders | boolean
|
|
19
|
-
| childrenColumnName | The column contains children to display | string / []
|
|
20
|
-
| columns | Columns of table | [ColumnProps](https://git.io/vMMXC)\[]
|
|
21
|
-
| components | Override default table elements | [TableComponents](https://git.io/fANxz)
|
|
22
|
-
| dataSource | Data record array to be displayed | any / []
|
|
23
|
-
| defaultExpandAllRows | Expand all rows initially | boolean
|
|
24
|
-
| defaultExpandedRowKeys | Initial expanded row keys | string / []
|
|
25
|
-
| disableColumnNamesLineBreak | Disable line break when rendering column names | boolean
|
|
26
|
-
| expandedRowKeys | Current expanded row keys | string / []
|
|
27
|
-
| expandedRowRender | Expanded container render for each row | (record, index, indent, expanded) => React.ReactNode
|
|
28
|
-
| expandIcon | Customize row expand Icon. Ref [example](http://react-component.github.io/table/examples/expandIcon.html) | (props) => React.ReactNode
|
|
29
|
-
| expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean
|
|
30
|
-
| footer | Table footer renderer | (currentPageData) => React.ReactNode
|
|
31
|
-
| indentSize | Indent size in pixels of tree data | number
|
|
32
|
-
| loading | Loading status of table | boolean / object
|
|
33
|
-
| locale | i18n text including filter, sort, empty text, etc | object
|
|
34
|
-
| pagination | Config of pagination. You can ref table pagination [config](#pagination) or full [`pagination`](/components/pagination/) document, hide it by setting it to `false` | object
|
|
35
|
-
| rowClassName | Row's className | (record, index: number) => string
|
|
36
|
-
| rowKey | Row's unique key, could be a string or function that returns a string | string / (record) => string
|
|
37
|
-
| scroll | Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area, could be number, percent value, `true` and ['max-content'](https://developer.mozilla.org/en-US/docs/Web/CSS/width) | { x: number / true, y: number }
|
|
38
|
-
| showHeader | Whether to show table header | boolean
|
|
39
|
-
| size | Size of table | `default` / `middle` / `small`
|
|
40
|
-
| title | Table title renderer | string / React.ReactNode
|
|
41
|
-
| hideTitleBar | Wheter to hide table title bar | boolean
|
|
42
|
-
| headerWithBorderTop | Wheter to add line above table title bar | boolean
|
|
43
|
-
| itemsMenu | Components or text visible when any of table itams are selected, usually used for bulk actions | string / React.ReactNode
|
|
44
|
-
| search | Search query | string
|
|
45
|
-
| cellSize | Defines padding size of each row in table | `small` / `medium` / `default`
|
|
46
|
-
| roundedHeader | Wheter to round table header | boolean
|
|
47
|
-
| selection | Config of rows selection | RowSelection
|
|
48
|
-
| filters | Array of filters cofings, earch of them will be rendered in table title bar | Filter[]
|
|
49
|
-
| searchComponent | SearchComponent | React.ReactNode
|
|
50
|
-
| filterComponent | FilterItemComponent | React.ReactNode
|
|
51
|
-
| grouped | Whether to render table as GroupedTable of DefaultTable | boolean
|
|
52
|
-
| onChange | Callback executed when pagination, filters or sorter is changed | (pagination, filters, sorter, extra: { currentDataSource: [] }) => void
|
|
53
|
-
| onExpand | Callback executed when the row expand icon is clicked | (expanded, record) => void
|
|
54
|
-
| onExpandedRowsChange | Callback executed when the expanded rows change | (expandedRows) => void
|
|
55
|
-
| onHeaderRow | Set props on per header row | (column, index) => object
|
|
56
|
-
| onRow | Set props on per row | (record, index) => object
|
|
57
|
-
|
|
|
58
|
-
|
|
|
59
|
-
|
|
16
|
+
| Property | Description | Type | Default |
|
|
17
|
+
| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
|
|
18
|
+
| bordered | Whether to show all table borders | boolean | `false` |
|
|
19
|
+
| childrenColumnName | The column contains children to display | string / [] | children |
|
|
20
|
+
| columns | Columns of table | [ColumnProps](https://git.io/vMMXC)\[] | - |
|
|
21
|
+
| components | Override default table elements | [TableComponents](https://git.io/fANxz) | - |
|
|
22
|
+
| dataSource | Data record array to be displayed | any / [] | - |
|
|
23
|
+
| defaultExpandAllRows | Expand all rows initially | boolean | `false` |
|
|
24
|
+
| defaultExpandedRowKeys | Initial expanded row keys | string / [] | - |
|
|
25
|
+
| disableColumnNamesLineBreak | Disable line break when rendering column names | boolean | false |
|
|
26
|
+
| expandedRowKeys | Current expanded row keys | string / [] | - |
|
|
27
|
+
| expandedRowRender | Expanded container render for each row | (record, index, indent, expanded) => React.ReactNode | - |
|
|
28
|
+
| expandIcon | Customize row expand Icon. Ref [example](http://react-component.github.io/table/examples/expandIcon.html) | (props) => React.ReactNode | - |
|
|
29
|
+
| expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | `false` |
|
|
30
|
+
| footer | Table footer renderer | (currentPageData) => React.ReactNode | |
|
|
31
|
+
| indentSize | Indent size in pixels of tree data | number | 15 |
|
|
32
|
+
| loading | Loading status of table | boolean / object | `false` |
|
|
33
|
+
| locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok' <br /> filterReset: 'Reset' <br /> emptyText: 'No Data' <br /> |
|
|
34
|
+
| pagination | Config of pagination. You can ref table pagination [config](#pagination) or full [`pagination`](/components/pagination/) document, hide it by setting it to `false` | object | |
|
|
35
|
+
| rowClassName | Row's className | (record, index: number) => string | - |
|
|
36
|
+
| rowKey | Row's unique key, could be a string or function that returns a string | string / (record) => string | `key` |
|
|
37
|
+
| scroll | Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area, could be number, percent value, `true` and ['max-content'](https://developer.mozilla.org/en-US/docs/Web/CSS/width) | { x: number / true, y: number } | - |
|
|
38
|
+
| showHeader | Whether to show table header | boolean | `true` |
|
|
39
|
+
| size | Size of table | `default` / `middle` / `small` | `default` |
|
|
40
|
+
| title | Table title renderer | string / React.ReactNode | |
|
|
41
|
+
| hideTitleBar | Wheter to hide table title bar | boolean | - |
|
|
42
|
+
| headerWithBorderTop | Wheter to add line above table title bar | boolean | - |
|
|
43
|
+
| itemsMenu | Components or text visible when any of table itams are selected, usually used for bulk actions | string / React.ReactNode | - |
|
|
44
|
+
| search | Search query | string | - |
|
|
45
|
+
| cellSize | Defines padding size of each row in table | `small` / `medium` / `default` | `default` |
|
|
46
|
+
| roundedHeader | Wheter to round table header | boolean | `false` |
|
|
47
|
+
| selection | Config of rows selection | RowSelection | - |
|
|
48
|
+
| filters | Array of filters cofings, earch of them will be rendered in table title bar | Filter[] | - |
|
|
49
|
+
| searchComponent | SearchComponent | React.ReactNode | - |
|
|
50
|
+
| filterComponent | FilterItemComponent | React.ReactNode | - |
|
|
51
|
+
| grouped | Whether to render table as GroupedTable of DefaultTable | boolean | - |
|
|
52
|
+
| onChange | Callback executed when pagination, filters or sorter is changed | (pagination, filters, sorter, extra: { currentDataSource: [] }) => void | |
|
|
53
|
+
| onExpand | Callback executed when the row expand icon is clicked | (expanded, record) => void | |
|
|
54
|
+
| onExpandedRowsChange | Callback executed when the expanded rows change | (expandedRows) => void | |
|
|
55
|
+
| onHeaderRow | Set props on per header row | (column, index) => object | - |
|
|
56
|
+
| onRow | Set props on per row | (record, index) => object | - |
|
|
57
|
+
| onSort | Callback executed when sorter is changed | (sortedColumn: {columnKey: string; order: `descend` \ `ascend` \ null}, sortState: [key: string]: { sortOrder: `descend` \ `ascend` \ null; multiple: number \ false;}) => void | - |
|
|
58
|
+
| getPopupContainer | the render container of dropdowns in table | (triggerNode) => HTMLElement | `() => TableHtmlElement` |
|
|
59
|
+
| renderSelectionTitle | Function to render a custom title in table header when some items are selected | ({selection: RowSelection, filters:Filter[] }) => React.ReactNode | - |
|
|
60
|
+
|
|
60
61
|
### VirtualTable
|
|
61
62
|
|
|
62
63
|
| Property | Description | Type | Default |
|
|
@@ -4,8 +4,10 @@ import * as S from './StatusLabel.styles';
|
|
|
4
4
|
|
|
5
5
|
var StatusLabelCell = function StatusLabelCell(_ref) {
|
|
6
6
|
var status = _ref.status,
|
|
7
|
-
label = _ref.label
|
|
7
|
+
label = _ref.label,
|
|
8
|
+
customColor = _ref.customColor;
|
|
8
9
|
return /*#__PURE__*/React.createElement(S.StatusLabel, null, /*#__PURE__*/React.createElement(Badge, {
|
|
10
|
+
customColor: customColor,
|
|
9
11
|
status: status
|
|
10
12
|
}), /*#__PURE__*/React.createElement(S.Label, null, label));
|
|
11
13
|
};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { Status } from '@synerise/ds-badge/dist/Badge.types';
|
|
1
|
+
import { Color, Status } from '@synerise/ds-badge/dist/Badge.types';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
export declare type Props = {
|
|
4
4
|
status: Status;
|
|
5
5
|
label: string | React.ReactNode;
|
|
6
|
+
customColor: Color;
|
|
6
7
|
};
|
|
@@ -36,7 +36,9 @@ export var CommonRenderer = function CommonRenderer(_ref) {
|
|
|
36
36
|
style: {
|
|
37
37
|
width: 220
|
|
38
38
|
}
|
|
39
|
-
}, /*#__PURE__*/React.createElement(Menu
|
|
39
|
+
}, /*#__PURE__*/React.createElement(Menu // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
40
|
+
// @ts-ignore
|
|
41
|
+
, {
|
|
40
42
|
asDropdownMenu: true,
|
|
41
43
|
onClick: function onClick(_ref2) {
|
|
42
44
|
var key = _ref2.key;
|
|
@@ -62,7 +64,9 @@ export var CommonRenderer = function CommonRenderer(_ref) {
|
|
|
62
64
|
isActive: columnSortOrder === 'descend'
|
|
63
65
|
})
|
|
64
66
|
}, locale.columnSortDescend), !!columnSortOrder && /*#__PURE__*/React.createElement(Menu.Item, {
|
|
65
|
-
key: "null"
|
|
67
|
+
key: "null" // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
68
|
+
// @ts-ignore
|
|
69
|
+
,
|
|
66
70
|
type: "danger",
|
|
67
71
|
prefixel: /*#__PURE__*/React.createElement(Icon, {
|
|
68
72
|
component: /*#__PURE__*/React.createElement(Close2M, null)
|
|
@@ -103,7 +107,9 @@ export var StringRenderer = function StringRenderer(_ref3) {
|
|
|
103
107
|
style: {
|
|
104
108
|
width: 170
|
|
105
109
|
}
|
|
106
|
-
}, /*#__PURE__*/React.createElement(Menu
|
|
110
|
+
}, /*#__PURE__*/React.createElement(Menu // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
111
|
+
// @ts-ignore
|
|
112
|
+
, {
|
|
107
113
|
asDropdownMenu: true,
|
|
108
114
|
onClick: function onClick(_ref4) {
|
|
109
115
|
var key = _ref4.key;
|
|
@@ -129,7 +135,9 @@ export var StringRenderer = function StringRenderer(_ref3) {
|
|
|
129
135
|
isActive: columnSortOrder === 'descend'
|
|
130
136
|
})
|
|
131
137
|
}, locale.columnSortZa), !!columnSortOrder && /*#__PURE__*/React.createElement(Menu.Item, {
|
|
132
|
-
key: "null"
|
|
138
|
+
key: "null" // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
139
|
+
// @ts-ignore
|
|
140
|
+
,
|
|
133
141
|
type: "danger",
|
|
134
142
|
prefixel: /*#__PURE__*/React.createElement(Icon, {
|
|
135
143
|
component: /*#__PURE__*/React.createElement(Close2M, null)
|
|
@@ -46,7 +46,8 @@ var setupStateApi = function setupStateApi(sortState) {
|
|
|
46
46
|
getColumnSortOrder: jest.fn().mockImplementation(function (key) {
|
|
47
47
|
return sortState[key].sortOrder;
|
|
48
48
|
}),
|
|
49
|
-
setColumnSortOrder: jest.fn()
|
|
49
|
+
setColumnSortOrder: jest.fn(),
|
|
50
|
+
updateColumnsData: jest.fn()
|
|
50
51
|
};
|
|
51
52
|
};
|
|
52
53
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { DSColumnType } from '../Table.types';
|
|
1
|
+
import { DSColumnType, OnSortFn } from '../Table.types';
|
|
2
2
|
export declare type ColumnSortOrder = 'descend' | 'ascend' | null;
|
|
3
|
-
interface ColumnsSortState {
|
|
3
|
+
export interface ColumnsSortState {
|
|
4
4
|
[key: string]: {
|
|
5
5
|
sortOrder: ColumnSortOrder;
|
|
6
6
|
multiple: number | false;
|
|
@@ -10,8 +10,9 @@ export interface SortStateAPI {
|
|
|
10
10
|
columnsSortState: ColumnsSortState;
|
|
11
11
|
getColumnSortOrder: (key: string) => ColumnSortOrder;
|
|
12
12
|
setColumnSortOrder: (key: string, sort: ColumnSortOrder) => void;
|
|
13
|
+
updateColumnsData: (columns: ColumnsSortState) => void;
|
|
13
14
|
}
|
|
14
15
|
export declare const toSortOrder: (value: string | null | undefined) => ColumnSortOrder;
|
|
15
16
|
export declare const columnsToSortState: <T extends unknown>(columns?: DSColumnType<T>[]) => ColumnsSortState;
|
|
16
|
-
export declare const useSortState: (initialState
|
|
17
|
+
export declare const useSortState: (initialState: ColumnsSortState | undefined, onSort: OnSortFn | undefined) => SortStateAPI;
|
|
17
18
|
export default useSortState;
|
|
@@ -5,7 +5,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
5
5
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
6
|
|
|
7
7
|
import * as React from 'react';
|
|
8
|
-
import { groupBy } from 'lodash';
|
|
8
|
+
import { groupBy, merge } from 'lodash';
|
|
9
9
|
export var toSortOrder = function toSortOrder(value) {
|
|
10
10
|
if (value === 'descend' || value === 'ascend') {
|
|
11
11
|
return value;
|
|
@@ -52,6 +52,7 @@ var setSingleOrder = function setSingleOrder(state, action) {
|
|
|
52
52
|
var _objectSpread5;
|
|
53
53
|
|
|
54
54
|
var payload = action.payload;
|
|
55
|
+
var onSort = payload.onSort;
|
|
55
56
|
var clearedSortState = Object.entries(state).reduce(function (newState, _ref) {
|
|
56
57
|
var _objectSpread4;
|
|
57
58
|
|
|
@@ -61,15 +62,23 @@ var setSingleOrder = function setSingleOrder(state, action) {
|
|
|
61
62
|
sortOrder: null
|
|
62
63
|
}), _objectSpread4));
|
|
63
64
|
}, {});
|
|
64
|
-
|
|
65
|
+
|
|
66
|
+
var newState = _objectSpread({}, clearedSortState, (_objectSpread5 = {}, _objectSpread5[payload.key] = _objectSpread({}, state[payload.key], {
|
|
65
67
|
sortOrder: payload.sortOrder
|
|
66
68
|
}), _objectSpread5));
|
|
69
|
+
|
|
70
|
+
onSort && onSort({
|
|
71
|
+
columnKey: payload.key,
|
|
72
|
+
order: payload.sortOrder
|
|
73
|
+
}, newState);
|
|
74
|
+
return newState;
|
|
67
75
|
};
|
|
68
76
|
|
|
69
77
|
var setMultipleOrder = function setMultipleOrder(state, action) {
|
|
70
78
|
var _objectSpread8;
|
|
71
79
|
|
|
72
80
|
var payload = action.payload;
|
|
81
|
+
var onSort = payload.onSort;
|
|
73
82
|
var clearedSortState = Object.entries(state).reduce(function (newState, _ref2) {
|
|
74
83
|
var _objectSpread6, _objectSpread7;
|
|
75
84
|
|
|
@@ -79,9 +88,21 @@ var setMultipleOrder = function setMultipleOrder(state, action) {
|
|
|
79
88
|
sortOrder: null
|
|
80
89
|
}), _objectSpread6)) : _objectSpread({}, newState, (_objectSpread7 = {}, _objectSpread7[currKey] = state[currKey], _objectSpread7));
|
|
81
90
|
}, {});
|
|
82
|
-
|
|
91
|
+
|
|
92
|
+
var newState = _objectSpread({}, clearedSortState, (_objectSpread8 = {}, _objectSpread8[payload.key] = _objectSpread({}, state[payload.key], {
|
|
83
93
|
sortOrder: payload.sortOrder
|
|
84
94
|
}), _objectSpread8));
|
|
95
|
+
|
|
96
|
+
onSort && onSort({
|
|
97
|
+
columnKey: payload.key,
|
|
98
|
+
order: payload.sortOrder
|
|
99
|
+
}, newState);
|
|
100
|
+
return newState;
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
var updateColumns = function updateColumns(state, action) {
|
|
104
|
+
var payload = action.payload;
|
|
105
|
+
return merge(payload.columns, state);
|
|
85
106
|
};
|
|
86
107
|
|
|
87
108
|
var sortReducer = function sortReducer(state, action) {
|
|
@@ -89,17 +110,26 @@ var sortReducer = function sortReducer(state, action) {
|
|
|
89
110
|
|
|
90
111
|
switch (type) {
|
|
91
112
|
case 'setSingleOrder':
|
|
113
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
114
|
+
// @ts-ignore
|
|
92
115
|
return setSingleOrder(state, action);
|
|
93
116
|
|
|
94
117
|
case 'setMultipleOrder':
|
|
118
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
119
|
+
// @ts-ignore
|
|
95
120
|
return setMultipleOrder(state, action);
|
|
96
121
|
|
|
122
|
+
case 'updateColumns':
|
|
123
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
124
|
+
// @ts-ignore
|
|
125
|
+
return updateColumns(state, action);
|
|
126
|
+
|
|
97
127
|
default:
|
|
98
128
|
return state;
|
|
99
129
|
}
|
|
100
130
|
};
|
|
101
131
|
|
|
102
|
-
export var useSortState = function useSortState(initialState) {
|
|
132
|
+
export var useSortState = function useSortState(initialState, onSort) {
|
|
103
133
|
if (initialState === void 0) {
|
|
104
134
|
initialState = {};
|
|
105
135
|
}
|
|
@@ -114,6 +144,15 @@ export var useSortState = function useSortState(initialState) {
|
|
|
114
144
|
return (_columnsSortState$key = columnsSortState[key]) == null ? void 0 : _columnsSortState$key.sortOrder;
|
|
115
145
|
};
|
|
116
146
|
|
|
147
|
+
var updateColumnsData = function updateColumnsData(columns) {
|
|
148
|
+
dispatch({
|
|
149
|
+
type: 'updateColumns',
|
|
150
|
+
payload: {
|
|
151
|
+
columns: columns
|
|
152
|
+
}
|
|
153
|
+
});
|
|
154
|
+
};
|
|
155
|
+
|
|
117
156
|
var setColumnSortOrder = function setColumnSortOrder(key, sortOrder) {
|
|
118
157
|
var _columnsSortState$key2, _columnsSortState$key3, _columnsSortState$key4, _columnsSortState$key5;
|
|
119
158
|
|
|
@@ -122,7 +161,8 @@ export var useSortState = function useSortState(initialState) {
|
|
|
122
161
|
type: 'setSingleOrder',
|
|
123
162
|
payload: {
|
|
124
163
|
key: key,
|
|
125
|
-
sortOrder: sortOrder
|
|
164
|
+
sortOrder: sortOrder,
|
|
165
|
+
onSort: onSort
|
|
126
166
|
}
|
|
127
167
|
});
|
|
128
168
|
}
|
|
@@ -132,7 +172,8 @@ export var useSortState = function useSortState(initialState) {
|
|
|
132
172
|
type: 'setMultipleOrder',
|
|
133
173
|
payload: {
|
|
134
174
|
key: key,
|
|
135
|
-
sortOrder: sortOrder
|
|
175
|
+
sortOrder: sortOrder,
|
|
176
|
+
onSort: onSort
|
|
136
177
|
}
|
|
137
178
|
});
|
|
138
179
|
}
|
|
@@ -140,6 +181,7 @@ export var useSortState = function useSortState(initialState) {
|
|
|
140
181
|
|
|
141
182
|
return {
|
|
142
183
|
columnsSortState: columnsSortState,
|
|
184
|
+
updateColumnsData: updateColumnsData,
|
|
143
185
|
getColumnSortOrder: getColumnSortOrder,
|
|
144
186
|
setColumnSortOrder: setColumnSortOrder
|
|
145
187
|
};
|
|
@@ -11,12 +11,13 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
11
11
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
12
12
|
|
|
13
13
|
import * as React from 'react';
|
|
14
|
-
import { compact } from 'lodash';
|
|
14
|
+
import { compact, isEqual } from 'lodash';
|
|
15
15
|
import Table from 'antd/lib/table';
|
|
16
16
|
import { FormattedMessage } from 'react-intl';
|
|
17
17
|
import Result from '@synerise/ds-result';
|
|
18
18
|
import Button from '@synerise/ds-button';
|
|
19
19
|
import Tooltip from '@synerise/ds-tooltip';
|
|
20
|
+
import usePrevious from '@synerise/ds-utils/dist/usePrevious/usePrevious';
|
|
20
21
|
import { columnsToSortState, useSortState } from '../ColumnSortMenu/useSortState';
|
|
21
22
|
import { columnWithSortButtons } from '../ColumnSortMenu/columnWithSortButtons';
|
|
22
23
|
import useRowStar from '../hooks/useRowStar';
|
|
@@ -33,13 +34,20 @@ function DefaultTable(props) {
|
|
|
33
34
|
locale = props.locale,
|
|
34
35
|
expandable = props.expandable,
|
|
35
36
|
components = props.components,
|
|
36
|
-
columns = props.columns
|
|
37
|
-
|
|
37
|
+
columns = props.columns,
|
|
38
|
+
onSort = props.onSort;
|
|
39
|
+
var previousColumns = usePrevious(columns);
|
|
40
|
+
var sortStateApi = useSortState(columnsToSortState(columns), onSort);
|
|
38
41
|
|
|
39
42
|
var _useRowStar = useRowStar((rowStar == null ? void 0 : rowStar.starredRowKeys) || []),
|
|
40
43
|
getRowStarColumn = _useRowStar.getRowStarColumn;
|
|
41
44
|
|
|
42
45
|
var starColumn = getRowStarColumn(props);
|
|
46
|
+
React.useEffect(function () {
|
|
47
|
+
if (!isEqual(previousColumns, columns)) {
|
|
48
|
+
sortStateApi.updateColumnsData(columnsToSortState(columns));
|
|
49
|
+
}
|
|
50
|
+
}, [columns, previousColumns, sortStateApi]);
|
|
43
51
|
var getRowKey = React.useCallback(function (row) {
|
|
44
52
|
if (typeof rowKey === 'function') return rowKey(row);
|
|
45
53
|
if (typeof rowKey === 'string') return row[rowKey];
|
|
@@ -67,7 +75,7 @@ function DefaultTable(props) {
|
|
|
67
75
|
});
|
|
68
76
|
}
|
|
69
77
|
|
|
70
|
-
selectedKeys =
|
|
78
|
+
selectedKeys = Array.from(new Set(selectedKeys));
|
|
71
79
|
|
|
72
80
|
if (dataSource) {
|
|
73
81
|
dataSource.forEach(function (row) {
|
|
@@ -158,6 +166,7 @@ function DefaultTable(props) {
|
|
|
158
166
|
})
|
|
159
167
|
}),
|
|
160
168
|
title: title,
|
|
169
|
+
showSorterTooltip: false,
|
|
161
170
|
components: _objectSpread({
|
|
162
171
|
body: {
|
|
163
172
|
row: RenderRow
|
|
@@ -59,7 +59,8 @@ function GroupTable(props) {
|
|
|
59
59
|
roundedHeader = props.roundedHeader,
|
|
60
60
|
addItem = props.addItem,
|
|
61
61
|
hideGroupExpander = props.hideGroupExpander,
|
|
62
|
-
initialGroupsCollapsed = props.initialGroupsCollapsed
|
|
62
|
+
initialGroupsCollapsed = props.initialGroupsCollapsed,
|
|
63
|
+
onSort = props.onSort;
|
|
63
64
|
|
|
64
65
|
var _React$useState = React.useState(initialGroupsCollapsed || !dataSource ? [] : dataSource.map(function (group) {
|
|
65
66
|
return group.key;
|
|
@@ -67,7 +68,7 @@ function GroupTable(props) {
|
|
|
67
68
|
expandedGroups = _React$useState[0],
|
|
68
69
|
setExpandedGroups = _React$useState[1];
|
|
69
70
|
|
|
70
|
-
var sortStateApi = useSortState(columnsToSortState(columns));
|
|
71
|
+
var sortStateApi = useSortState(columnsToSortState(columns), onSort);
|
|
71
72
|
|
|
72
73
|
var _React$useState2 = React.useState(dataSource || []),
|
|
73
74
|
data = _React$useState2[0],
|
|
@@ -18,6 +18,8 @@ var LoadingItem = function LoadingItem() {
|
|
|
18
18
|
var NoMoreItem = function NoMoreItem() {
|
|
19
19
|
return /*#__PURE__*/React.createElement(TableLocaleContext.Consumer, null, function (tableLocale) {
|
|
20
20
|
return /*#__PURE__*/React.createElement(Alert.InlineAlert, {
|
|
21
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
22
|
+
// @ts-ignore
|
|
21
23
|
type: "info",
|
|
22
24
|
message: tableLocale.infiniteScrollNoMoreData
|
|
23
25
|
});
|
|
@@ -32,6 +34,8 @@ var ErrorItem = function ErrorItem(_ref) {
|
|
|
32
34
|
display: 'flex'
|
|
33
35
|
}
|
|
34
36
|
}, /*#__PURE__*/React.createElement(Alert.InlineAlert, {
|
|
37
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
38
|
+
// @ts-ignore
|
|
35
39
|
type: "alert",
|
|
36
40
|
message: tableLocale.infiniteScrollError
|
|
37
41
|
}), onRetryClick && /*#__PURE__*/React.createElement(Button, {
|
package/dist/Table.types.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ import DSTable from './Table';
|
|
|
5
5
|
import { GroupType } from './GroupTable/GroupTable.types';
|
|
6
6
|
import { RowStar } from './hooks/useRowStar.types';
|
|
7
7
|
import { SortRender } from './ColumnSortMenu/TitleWithSort';
|
|
8
|
+
import { ColumnSortOrder, ColumnsSortState } from './ColumnSortMenu/useSortState';
|
|
8
9
|
export declare type AntTableProps<T> = Omit<TableProps<T>, 'title' | 'subTitle' | 'onSearch' | 'itemsMenu' | 'search' | 'locale' | 'columns'>;
|
|
9
10
|
export declare type Selection = {
|
|
10
11
|
key: string;
|
|
@@ -80,6 +81,11 @@ declare type DSTableComponentsType<T> = AntTableComponentsType<T> & {
|
|
|
80
81
|
}) => void;
|
|
81
82
|
}, defaultTableProps?: DSTableProps<T>) => React.ReactNode;
|
|
82
83
|
};
|
|
84
|
+
export declare type SingleColumnSort = {
|
|
85
|
+
columnKey: string;
|
|
86
|
+
order: ColumnSortOrder;
|
|
87
|
+
};
|
|
88
|
+
export declare type OnSortFn = (singleColumnSort: SingleColumnSort, sortState: ColumnsSortState) => void;
|
|
83
89
|
export interface DSTableProps<T extends any & GroupType<T>> extends AntTableProps<T> {
|
|
84
90
|
title?: string | React.ReactNode;
|
|
85
91
|
hideTitleBar?: boolean;
|
|
@@ -104,5 +110,6 @@ export interface DSTableProps<T extends any & GroupType<T>> extends AntTableProp
|
|
|
104
110
|
renderSelectionTitle?: (selection?: RowSelection<T>, filters?: Filter[]) => React.ReactNode;
|
|
105
111
|
hideTitlePart?: boolean;
|
|
106
112
|
disableColumnNamesLineBreak?: boolean;
|
|
113
|
+
onSort?: OnSortFn;
|
|
107
114
|
}
|
|
108
115
|
export {};
|
|
@@ -204,7 +204,7 @@ function VirtualTable(props) {
|
|
|
204
204
|
});
|
|
205
205
|
}
|
|
206
206
|
|
|
207
|
-
selectedRows =
|
|
207
|
+
selectedRows = Array.from(new Set(selectedRows));
|
|
208
208
|
onChange && onChange(selectedRows.map(function (selected) {
|
|
209
209
|
return getRowKey(selected);
|
|
210
210
|
}), selectedRows);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-table",
|
|
3
|
-
"version": "0.42.
|
|
3
|
+
"version": "0.42.9",
|
|
4
4
|
"description": "Table UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "synerise/synerise-design",
|
|
@@ -32,23 +32,25 @@
|
|
|
32
32
|
],
|
|
33
33
|
"types": "dist/index.d.ts",
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@synerise/ds-alert": "^0.4.
|
|
36
|
-
"@synerise/ds-button": "^0.16.
|
|
37
|
-
"@synerise/ds-button-group": "^0.6.
|
|
38
|
-
"@synerise/ds-checkbox": "^0.11.
|
|
39
|
-
"@synerise/ds-column-manager": "^0.9.
|
|
40
|
-
"@synerise/ds-dropdown": "^0.17.
|
|
35
|
+
"@synerise/ds-alert": "^0.4.3",
|
|
36
|
+
"@synerise/ds-button": "^0.16.3",
|
|
37
|
+
"@synerise/ds-button-group": "^0.6.3",
|
|
38
|
+
"@synerise/ds-checkbox": "^0.11.5",
|
|
39
|
+
"@synerise/ds-column-manager": "^0.9.9",
|
|
40
|
+
"@synerise/ds-dropdown": "^0.17.6",
|
|
41
41
|
"@synerise/ds-flag": "^0.3.2",
|
|
42
42
|
"@synerise/ds-icon": "^0.46.2",
|
|
43
|
-
"@synerise/ds-input": "^0.18.
|
|
44
|
-
"@synerise/ds-
|
|
45
|
-
"@synerise/ds-
|
|
46
|
-
"@synerise/ds-
|
|
47
|
-
"@synerise/ds-search
|
|
48
|
-
"@synerise/ds-
|
|
49
|
-
"@synerise/ds-
|
|
50
|
-
"@synerise/ds-
|
|
51
|
-
"@synerise/ds-
|
|
43
|
+
"@synerise/ds-input": "^0.18.3",
|
|
44
|
+
"@synerise/ds-loader": "^0.2.5",
|
|
45
|
+
"@synerise/ds-menu": "^0.11.6",
|
|
46
|
+
"@synerise/ds-pagination": "^0.7.3",
|
|
47
|
+
"@synerise/ds-search": "^0.6.10",
|
|
48
|
+
"@synerise/ds-search-bar": "^0.5.4",
|
|
49
|
+
"@synerise/ds-select": "^0.14.4",
|
|
50
|
+
"@synerise/ds-skeleton": "^0.2.5",
|
|
51
|
+
"@synerise/ds-status": "^0.5.6",
|
|
52
|
+
"@synerise/ds-tags": "^0.6.6",
|
|
53
|
+
"@synerise/ds-tooltip": "^0.11.3",
|
|
52
54
|
"@synerise/ds-typography": "^0.12.2",
|
|
53
55
|
"@synerise/ds-utils": "^0.19.0",
|
|
54
56
|
"@types/react-window": "^1.8.2",
|
|
@@ -63,5 +65,5 @@
|
|
|
63
65
|
"antd": "^4",
|
|
64
66
|
"react": ">=16.9.0 < 17.0.0"
|
|
65
67
|
},
|
|
66
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "318a8d87f977c5d8f58c3cd06ccba4f243d7ee99"
|
|
67
69
|
}
|