@synerise/ds-table 0.43.7 → 0.44.1
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 +42 -0
- package/README.md +53 -38
- package/dist/Cell/AvatarLabel/AvatarLabel.js +3 -2
- package/dist/Cell/AvatarLabel/AvatarLabel.styles.d.ts +3 -1
- package/dist/Cell/AvatarLabel/AvatarLabel.styles.js +3 -1
- package/dist/Cell/StatusLabel/StatusLabel.types.d.ts +1 -1
- package/dist/ColumnSortMenu/SortRenderer.d.ts +2 -1
- package/dist/ColumnSortMenu/columnWithSortButtons.d.ts +3 -3
- package/dist/ColumnSortMenu/columnWithSortButtons.js +7 -5
- package/dist/ColumnSortMenu/useSortState.js +2 -2
- package/dist/DefaultTable/DefaultTable.d.ts +1 -1
- package/dist/DefaultTable/DefaultTable.js +67 -97
- package/dist/GroupTable/GroupTableBody/GroupTableBody.js +9 -8
- package/dist/RowSelection/RowSelectionColumn.d.ts +4 -0
- package/dist/RowSelection/RowSelectionColumn.js +100 -0
- package/dist/RowSelection/RowSelectionColumn.types.d.ts +13 -0
- package/dist/{hooks/useRowStar.types.js → RowSelection/RowSelectionColumn.types.js} +0 -0
- package/dist/RowSelection/index.d.ts +1 -0
- package/dist/RowSelection/index.js +1 -0
- package/dist/Table.d.ts +1 -1
- package/dist/Table.types.d.ts +5 -2
- package/dist/TableHeader/TableSelection.js +33 -19
- package/dist/VirtualTable/VirtualTable.d.ts +1 -1
- package/dist/VirtualTable/VirtualTable.js +91 -131
- package/dist/VirtualTable/VirtualTable.styles.js +1 -1
- package/dist/VirtualTable/VirtualTableRow.d.ts +5 -4
- package/dist/VirtualTable/VirtualTableRow.js +62 -63
- package/dist/hooks/useRowKey/index.d.ts +1 -0
- package/dist/hooks/useRowKey/index.js +1 -0
- package/dist/hooks/useRowKey/useRowKey.d.ts +7 -0
- package/dist/hooks/useRowKey/useRowKey.js +13 -0
- package/dist/hooks/useRowStar/index.d.ts +2 -0
- package/dist/hooks/useRowStar/index.js +2 -0
- package/dist/hooks/useRowStar/useRowStar.d.ts +2 -0
- package/dist/hooks/{useRowStar.js → useRowStar/useRowStar.js} +11 -10
- package/dist/hooks/useRowStar/useRowStar.types.d.ts +21 -0
- package/dist/hooks/useRowStar/useRowStar.types.js +1 -0
- package/dist/utils/__specs__/getValueFromPath.spec.d.ts +1 -0
- package/dist/utils/getValueFromPath.d.ts +1 -0
- package/dist/utils/getValueFromPath.js +7 -0
- package/dist/utils/index.d.ts +3 -0
- package/dist/utils/index.js +3 -0
- package/package.json +21 -20
- package/dist/hooks/useRowStar.d.ts +0 -3
- package/dist/hooks/useRowStar.types.d.ts +0 -17
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,48 @@
|
|
|
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.44.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.44.0...@synerise/ds-table@0.44.1) (2022-03-24)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-table
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [0.44.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.43.8...@synerise/ds-table@0.44.0) (2022-03-24)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* **table:** fixes ts errors ([cbe64a4](https://github.com/synerise/synerise-design/commit/cbe64a40ed400f399dbf38198d4ef9c571f395c6))
|
|
20
|
+
* row selection for independent child selection ([a3e593f](https://github.com/synerise/synerise-design/commit/a3e593fdd2db22f122befcc840c9d1be1dba1778))
|
|
21
|
+
* **table:** fixes types ([9167846](https://github.com/synerise/synerise-design/commit/916784613c845937b3aff542f3ed6782cda420ee))
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
### Features
|
|
25
|
+
|
|
26
|
+
* **table:** adds independet selection of rows nad subrows ([80414e2](https://github.com/synerise/synerise-design/commit/80414e2e948f9c760adf4345a27704b0ffbcd25c))
|
|
27
|
+
* **table:** improve sorting for universal-list ([f189dae](https://github.com/synerise/synerise-design/commit/f189daedea1f401dd1fb6dfd52acf41fa59413f0))
|
|
28
|
+
* **table:** improvements for universal-list ([b1a1db1](https://github.com/synerise/synerise-design/commit/b1a1db11b72333f6b9bdd4468b73bc45b627cef0))
|
|
29
|
+
* **table:** improves selection and memoization of virtual rows ([5dfe104](https://github.com/synerise/synerise-design/commit/5dfe10474358c310e2d5b2ae7ea93d8f35fb72be))
|
|
30
|
+
* **table:** improves sorting, selection, and calculating columns width ([d762780](https://github.com/synerise/synerise-design/commit/d7627800cf99a02125dcecae596cbd21f4c21e83))
|
|
31
|
+
* **table:** updates documentation of table component ([fb545e1](https://github.com/synerise/synerise-design/commit/fb545e181849d83c4ecf348f65f426d458395519))
|
|
32
|
+
* **table:** updates row selections (move to separate component), fixes from CR ([6afa8da](https://github.com/synerise/synerise-design/commit/6afa8da9758433520dbfd304ad5170bfc7d33b5d))
|
|
33
|
+
* **table:** updates tests, stories ([94e98c2](https://github.com/synerise/synerise-design/commit/94e98c248b9f9c51e0ada0a32a2d9addf84f950a))
|
|
34
|
+
* **table:** uses ramda instead of lodash in getValueFromPath util ([146921e](https://github.com/synerise/synerise-design/commit/146921ecb29cc2ab72ad0ad8aa8c103e69135e88))
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
## [0.43.8](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.43.7...@synerise/ds-table@0.43.8) (2022-03-21)
|
|
41
|
+
|
|
42
|
+
**Note:** Version bump only for package @synerise/ds-table
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
|
|
6
48
|
## [0.43.7](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.43.6...@synerise/ds-table@0.43.7) (2022-03-14)
|
|
7
49
|
|
|
8
50
|
**Note:** Version bump only for package @synerise/ds-table
|
package/README.md
CHANGED
|
@@ -57,6 +57,8 @@ Table UI Component
|
|
|
57
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
58
|
| getPopupContainer | the render container of dropdowns in table | (triggerNode) => HTMLElement | `() => TableHtmlElement` |
|
|
59
59
|
| renderSelectionTitle | Function to render a custom title in table header when some items are selected | ({selection: RowSelection, filters:Filter[] }) => React.ReactNode | - |
|
|
60
|
+
| rowStar | Configuration of row starring | RowStar | - |
|
|
61
|
+
|
|
60
62
|
|
|
61
63
|
### VirtualTable
|
|
62
64
|
|
|
@@ -87,13 +89,25 @@ This type of table requires a specific type of dataSource which has to contain a
|
|
|
87
89
|
|
|
88
90
|
#### RowSelection
|
|
89
91
|
|
|
90
|
-
| Property
|
|
91
|
-
| ---------------
|
|
92
|
-
| fixed
|
|
93
|
-
| selectedRowKeys
|
|
94
|
-
| selections
|
|
95
|
-
| onChange
|
|
96
|
-
| limit
|
|
92
|
+
| Property | Description | Type | Default |
|
|
93
|
+
| --------------- | ------------------------------------------------ | --------------------------------------------------------------- | ------- |
|
|
94
|
+
| fixed | Whether to show selection column as fixed or not | boolean | - |
|
|
95
|
+
| selectedRowKeys | Array of selected row keys | React.ReactText | [] |
|
|
96
|
+
| selections | Selections options available in table title | SelectionItem[] | - |
|
|
97
|
+
| onChange | Callback executed when selection changes | (selectedRowKeys: React.ReactText[], selectedRows: T[]) => void | - |
|
|
98
|
+
| limit | Max length of selection rows array | number | - |
|
|
99
|
+
| independentSelectionExpandedRows | Allows to select parent and child rows independently | boolean | - |
|
|
100
|
+
|
|
101
|
+
#### RowStar
|
|
102
|
+
|
|
103
|
+
| Property | Description | Type | Default |
|
|
104
|
+
| --------------- | ------------------------------------------------ | --------------------------------------------------------------- | ------- |
|
|
105
|
+
| className | Classname of star component | string | - |
|
|
106
|
+
| starredRowKeys | Array of keys of starred rows | string[] | - |
|
|
107
|
+
| renderCell | Overrides render method | `ColumnType<T>['render']` | - |
|
|
108
|
+
| onClick | Callback called when user clicks on star component | (e: React.MouseEvent<HTMLElement, MouseEvent>) => void | - |
|
|
109
|
+
| onChange | Callback called when user change starred status of row | (starredRowKeys: string[], starredKey: string, isStarred: boolean) => void | - |
|
|
110
|
+
| disableForExpandedRows | Hides star components on child rows | boolean | - |
|
|
97
111
|
|
|
98
112
|
#### SelectionItem
|
|
99
113
|
|
|
@@ -150,37 +164,38 @@ Same as `onRow` `onHeaderRow` `onCell` `onHeaderCell`
|
|
|
150
164
|
|
|
151
165
|
One of the Table `columns` prop for describing the table's columns, Column has the same API.
|
|
152
166
|
|
|
153
|
-
| Property | Description | Type | Default | Version |
|
|
154
|
-
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- | ----------------------- | ----------- |
|
|
155
|
-
| align | specify which way that column is aligned | `left` / `right` / `center` | `left` | 3.3.2 |
|
|
156
|
-
| className | className of this column | string | - | |
|
|
157
|
-
| colSpan | Span of this column's title | number | | |
|
|
158
|
-
| dataIndex | Display field of the data record, could be set like `a.b.c`, `a[0].b.c[1]` | string | - | |
|
|
159
|
-
| defaultSortOrder | Default order of sorted values | `ascend` / `descend` | - | |
|
|
160
|
-
| filterDropdown | Customized filter overlay | ReactNode | - | |
|
|
161
|
-
| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - | |
|
|
162
|
-
| filtered | Whether the `dataSource` is filtered | boolean | `false` | |
|
|
163
|
-
| filteredValue | Controlled filtered value, filter icon will highlight | string / [] | - | |
|
|
164
|
-
| filterIcon | Customized filter icon | React.ReactNode / (filtered: boolean) => React.ReactNode | `false` | |
|
|
165
|
-
| filterMultiple | Whether multiple filters can be selected | boolean | `true` | |
|
|
166
|
-
| filters | Filter menu config | object / [] | - | |
|
|
167
|
-
| fixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean / string | `false` | |
|
|
168
|
-
| itemsMenu | Component with menu for selected items | React.ReactNode | - | |
|
|
169
|
-
| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - | |
|
|
170
|
-
| maxWidth | Maximal width of this column | string / number | - | |
|
|
171
|
-
| minWidth | Minimal of this column. If not provided, defaults to `width` property. | string / number | - | |
|
|
172
|
-
| render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | (
|
|
173
|
-
|
|
|
174
|
-
|
|
|
175
|
-
|
|
|
176
|
-
|
|
|
177
|
-
|
|
|
178
|
-
|
|
|
179
|
-
|
|
|
180
|
-
|
|
|
181
|
-
|
|
|
182
|
-
|
|
|
183
|
-
|
|
|
167
|
+
| Property | Description | Type | Default | Version |
|
|
168
|
+
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- | ----------------------- | ----------- |
|
|
169
|
+
| align | specify which way that column is aligned | `left` / `right` / `center` | `left` | 3.3.2 |
|
|
170
|
+
| className | className of this column | string | - | |
|
|
171
|
+
| colSpan | Span of this column's title | number | | |
|
|
172
|
+
| dataIndex | Display field of the data record, could be set like `a.b.c`, `a[0].b.c[1]` | string | - | |
|
|
173
|
+
| defaultSortOrder | Default order of sorted values | `ascend` / `descend` | - | |
|
|
174
|
+
| filterDropdown | Customized filter overlay | ReactNode | - | |
|
|
175
|
+
| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - | |
|
|
176
|
+
| filtered | Whether the `dataSource` is filtered | boolean | `false` | |
|
|
177
|
+
| filteredValue | Controlled filtered value, filter icon will highlight | string / [] | - | |
|
|
178
|
+
| filterIcon | Customized filter icon | React.ReactNode / (filtered: boolean) => React.ReactNode | `false` | |
|
|
179
|
+
| filterMultiple | Whether multiple filters can be selected | boolean | `true` | |
|
|
180
|
+
| filters | Filter menu config | object / [] | - | |
|
|
181
|
+
| fixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean / string | `false` | |
|
|
182
|
+
| itemsMenu | Component with menu for selected items | React.ReactNode | - | |
|
|
183
|
+
| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - | |
|
|
184
|
+
| maxWidth | Maximal width of this column | string / number | - | |
|
|
185
|
+
| minWidth | Minimal of this column. If not provided, defaults to `width` property. | string / number | - | |
|
|
186
|
+
| render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | (value, record, index) => React.ReactNode | - | |
|
|
187
|
+
| childRender | Renderer of the table cell in child row - available only on virtual tables. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | (value, record, index) => React.ReactNode | - | |
|
|
188
|
+
| search | Search input value | string | - | |
|
|
189
|
+
| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true`.<br />Use `object` for multi sorting:<br />`{ compare: (a, b) => a.math - b.math, <br />multiple: 2 }` | `function / boolean / object` | - | |
|
|
190
|
+
| sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean / string | - | |
|
|
191
|
+
| sortDirections | supported sort way, could be `'ascend'`, `'descend'` | Array | `['ascend', 'descend']` | 3.15.2 |
|
|
192
|
+
| sortRender | How to render sort buttons and options. Values: `'default'`, `'string'`, `(sortStateApi: SortStateAPI, column: DSColumnType<T>) => React.ReactElement` | `string / function / 'default'` | `'default'` | |
|
|
193
|
+
| title | Title of this column | React.ReactNode / ({ sortOrder, filters }) => React.ReactNode | - | |
|
|
194
|
+
| width | Width of this column | string / number | - | |
|
|
195
|
+
| onCell | Set props on per cell | (record, rowIndex: number) => object | - | |
|
|
196
|
+
| onFilter | Callback executed when the confirm filter button is clicked | () => void | - | |
|
|
197
|
+
| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | (visible: boolean) => void | - | |
|
|
198
|
+
| onHeaderCell | Set props on per header cell | (column) => object | - | |
|
|
184
199
|
|
|
185
200
|
### ColumnGroup
|
|
186
201
|
|
|
@@ -14,8 +14,9 @@ var AvatarLabel = function AvatarLabel(_ref) {
|
|
|
14
14
|
maxWidth = _ref.maxWidth,
|
|
15
15
|
avatarSize = _ref.avatarSize,
|
|
16
16
|
loader = _ref.loader;
|
|
17
|
-
return /*#__PURE__*/React.createElement(S.AvatarLabel,
|
|
18
|
-
onClick: avatarAction
|
|
17
|
+
return /*#__PURE__*/React.createElement(S.AvatarLabel, {
|
|
18
|
+
onClick: avatarAction
|
|
19
|
+
}, icon && /*#__PURE__*/React.createElement(S.Icon, null, icon), /*#__PURE__*/React.createElement(S.Avatar, {
|
|
19
20
|
clickable: Boolean(avatarAction)
|
|
20
21
|
}, avatar), /*#__PURE__*/React.createElement(S.Description, null, /*#__PURE__*/React.createElement(S.Title, {
|
|
21
22
|
ellipsis: Boolean(ellipsis),
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
export declare const AvatarLabel: import("styled-components").StyledComponent<"div", any, {
|
|
1
|
+
export declare const AvatarLabel: import("styled-components").StyledComponent<"div", any, {
|
|
2
|
+
onClick?: (() => void) | undefined;
|
|
3
|
+
}, never>;
|
|
2
4
|
export declare const Avatar: import("styled-components").StyledComponent<"div", any, {
|
|
3
5
|
clickable: boolean;
|
|
4
6
|
}, never>;
|
|
@@ -2,7 +2,9 @@ import styled, { css } from 'styled-components';
|
|
|
2
2
|
export var AvatarLabel = styled.div.withConfig({
|
|
3
3
|
displayName: "AvatarLabelstyles__AvatarLabel",
|
|
4
4
|
componentId: "sc-1485c9p-0"
|
|
5
|
-
})(["display:flex;align-items:center;justify-content:flex-start;"])
|
|
5
|
+
})(["display:inline-flex;align-items:center;justify-content:flex-start;cursor:", ";"], function (props) {
|
|
6
|
+
return props.onClick !== undefined ? 'pointer' : 'default';
|
|
7
|
+
});
|
|
6
8
|
export var Avatar = styled.div.withConfig({
|
|
7
9
|
displayName: "AvatarLabelstyles__Avatar",
|
|
8
10
|
componentId: "sc-1485c9p-1"
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { DSColumnType } from '../Table.types';
|
|
2
|
+
import { DSColumnType, OnSortFn } from '../Table.types';
|
|
3
3
|
import { SortStateAPI } from './useSortState';
|
|
4
4
|
interface SortRendererProps<T> {
|
|
5
5
|
sortStateApi: SortStateAPI;
|
|
6
6
|
column: DSColumnType<T>;
|
|
7
|
+
onSort?: OnSortFn;
|
|
7
8
|
}
|
|
8
9
|
export declare const CommonRenderer: <T extends unknown>({ column, sortStateApi, }: SortRendererProps<T>) => React.ReactElement;
|
|
9
10
|
export declare const StringRenderer: <T extends unknown>({ column, sortStateApi, }: SortRendererProps<T>) => React.ReactElement;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { DSColumnType } from '../Table.types';
|
|
1
|
+
import { DSColumnType, OnSortFn } from '../Table.types';
|
|
2
2
|
import { SortStateAPI } from './useSortState';
|
|
3
|
-
export declare const columnWithSortButtons: (sortStateApi: SortStateAPI) => <T extends unknown>(column: DSColumnType<T>) => DSColumnType<T>;
|
|
3
|
+
export declare const columnWithSortButtons: (sortStateApi: SortStateAPI, onSort?: OnSortFn | undefined) => <T extends unknown>(column: DSColumnType<T>) => DSColumnType<T>;
|
|
4
4
|
declare const _default: {
|
|
5
|
-
columnWithSortButtons: (sortStateApi: SortStateAPI) => <T extends unknown>(column: DSColumnType<T>) => DSColumnType<T>;
|
|
5
|
+
columnWithSortButtons: (sortStateApi: SortStateAPI, onSort?: OnSortFn | undefined) => <T extends unknown>(column: DSColumnType<T>) => DSColumnType<T>;
|
|
6
6
|
};
|
|
7
7
|
export default _default;
|
|
@@ -8,7 +8,7 @@ import * as React from 'react';
|
|
|
8
8
|
import { TitleWithSort } from './TitleWithSort';
|
|
9
9
|
import { CommonRenderer, StringRenderer } from './SortRenderer';
|
|
10
10
|
|
|
11
|
-
var getSortRenderer = function getSortRenderer(sortRender) {
|
|
11
|
+
var getSortRenderer = function getSortRenderer(sortRender, onSort) {
|
|
12
12
|
if (sortRender === void 0) {
|
|
13
13
|
sortRender = 'default';
|
|
14
14
|
}
|
|
@@ -22,7 +22,8 @@ var getSortRenderer = function getSortRenderer(sortRender) {
|
|
|
22
22
|
return function (sortStateApi, column) {
|
|
23
23
|
return /*#__PURE__*/React.createElement(StringRenderer, {
|
|
24
24
|
sortStateApi: sortStateApi,
|
|
25
|
-
column: column
|
|
25
|
+
column: column,
|
|
26
|
+
onSort: onSort
|
|
26
27
|
});
|
|
27
28
|
};
|
|
28
29
|
|
|
@@ -31,15 +32,16 @@ var getSortRenderer = function getSortRenderer(sortRender) {
|
|
|
31
32
|
return function (sortStateApi, column) {
|
|
32
33
|
return /*#__PURE__*/React.createElement(CommonRenderer, {
|
|
33
34
|
sortStateApi: sortStateApi,
|
|
34
|
-
column: column
|
|
35
|
+
column: column,
|
|
36
|
+
onSort: onSort
|
|
35
37
|
});
|
|
36
38
|
};
|
|
37
39
|
}
|
|
38
40
|
};
|
|
39
41
|
|
|
40
|
-
export var columnWithSortButtons = function columnWithSortButtons(sortStateApi) {
|
|
42
|
+
export var columnWithSortButtons = function columnWithSortButtons(sortStateApi, onSort) {
|
|
41
43
|
return function (column) {
|
|
42
|
-
var sortRenderer = getSortRenderer(column.sortRender);
|
|
44
|
+
var sortRenderer = getSortRenderer(column.sortRender, onSort);
|
|
43
45
|
return column.sorter ? _objectSpread({}, column, {
|
|
44
46
|
sortOrder: column.key ? sortStateApi.getColumnSortOrder(String(column.key)) : null,
|
|
45
47
|
onHeaderCell: function onHeaderCell() {
|
|
@@ -39,10 +39,10 @@ export var columnsToSortState = function columnsToSortState(columns) {
|
|
|
39
39
|
var _objectSpread2, _objectSpread3;
|
|
40
40
|
|
|
41
41
|
return typeof column.sorter === 'object' ? _objectSpread({}, state, (_objectSpread2 = {}, _objectSpread2[String(column.key)] = {
|
|
42
|
-
sortOrder: toSortOrder(column.defaultSortOrder),
|
|
42
|
+
sortOrder: toSortOrder(column.sortOrder) || toSortOrder(column.defaultSortOrder),
|
|
43
43
|
multiple: column.sorter.multiple || false
|
|
44
44
|
}, _objectSpread2)) : _objectSpread({}, state, (_objectSpread3 = {}, _objectSpread3[String(column.key)] = {
|
|
45
|
-
sortOrder: toSortOrder(column.defaultSortOrder),
|
|
45
|
+
sortOrder: toSortOrder(column.sortOrder) || toSortOrder(column.defaultSortOrder),
|
|
46
46
|
multiple: false
|
|
47
47
|
}, _objectSpread3));
|
|
48
48
|
}, {});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { DSTableProps, RowType } from '../Table.types';
|
|
3
|
-
declare function DefaultTable<T extends
|
|
3
|
+
declare function DefaultTable<T extends object & RowType<T>>(props: DSTableProps<T>): React.ReactElement;
|
|
4
4
|
export default DefaultTable;
|
|
@@ -1,28 +1,27 @@
|
|
|
1
1
|
var _excluded = ["children"];
|
|
2
2
|
|
|
3
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
4
|
+
|
|
5
|
+
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; }
|
|
6
|
+
|
|
3
7
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
4
8
|
|
|
5
9
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
6
10
|
|
|
7
11
|
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; }
|
|
8
12
|
|
|
9
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
10
|
-
|
|
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
|
-
|
|
13
13
|
import * as React from 'react';
|
|
14
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
|
-
import Button from '@synerise/ds-button';
|
|
19
|
-
import Tooltip from '@synerise/ds-tooltip';
|
|
20
18
|
import usePrevious from '@synerise/ds-utils/dist/usePrevious/usePrevious';
|
|
21
19
|
import { columnsToSortState, useSortState } from '../ColumnSortMenu/useSortState';
|
|
22
20
|
import { columnWithSortButtons } from '../ColumnSortMenu/columnWithSortButtons';
|
|
23
|
-
import
|
|
21
|
+
import { useRowKey } from '../hooks/useRowKey';
|
|
22
|
+
import { useRowStar } from '../hooks/useRowStar/useRowStar';
|
|
23
|
+
import { RowSelectionColumn } from '../RowSelection'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
24
24
|
|
|
25
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
26
25
|
function DefaultTable(props) {
|
|
27
26
|
var _selection$selections;
|
|
28
27
|
|
|
@@ -42,65 +41,19 @@ function DefaultTable(props) {
|
|
|
42
41
|
var _useRowStar = useRowStar((rowStar == null ? void 0 : rowStar.starredRowKeys) || []),
|
|
43
42
|
getRowStarColumn = _useRowStar.getRowStarColumn;
|
|
44
43
|
|
|
45
|
-
var
|
|
44
|
+
var _useRowKey = useRowKey(rowKey),
|
|
45
|
+
getRowKey = _useRowKey.getRowKey;
|
|
46
|
+
|
|
47
|
+
var starColumn = React.useMemo(function () {
|
|
48
|
+
return getRowStarColumn(_objectSpread({}, props, {
|
|
49
|
+
getRowKey: getRowKey
|
|
50
|
+
}));
|
|
51
|
+
}, [getRowKey, getRowStarColumn, props]);
|
|
46
52
|
React.useEffect(function () {
|
|
47
53
|
if (!isEqual(previousColumns, columns)) {
|
|
48
54
|
sortStateApi.updateColumnsData(columnsToSortState(columns));
|
|
49
55
|
}
|
|
50
56
|
}, [columns, previousColumns, sortStateApi]);
|
|
51
|
-
var getRowKey = React.useCallback(function (row) {
|
|
52
|
-
if (typeof rowKey === 'function') return rowKey(row);
|
|
53
|
-
if (typeof rowKey === 'string') return row[rowKey];
|
|
54
|
-
return undefined;
|
|
55
|
-
}, [rowKey]);
|
|
56
|
-
var toggleRowSelection = React.useCallback(function (checked, record) {
|
|
57
|
-
var key = getRowKey(record);
|
|
58
|
-
|
|
59
|
-
if (selection != null && selection.selectedRowKeys && selection.onChange && key !== undefined) {
|
|
60
|
-
var onChange = selection.onChange,
|
|
61
|
-
selectedRowKeys = selection.selectedRowKeys;
|
|
62
|
-
var selectedKeys = [].concat(selectedRowKeys);
|
|
63
|
-
var selectedRows = [];
|
|
64
|
-
|
|
65
|
-
if (record.children !== undefined && Array.isArray(record.children)) {
|
|
66
|
-
record.children.forEach(function (child) {
|
|
67
|
-
var childKey = getRowKey(child);
|
|
68
|
-
selectedKeys = checked && childKey ? [].concat(selectedKeys, [childKey]) : selectedKeys.filter(function (k) {
|
|
69
|
-
return k !== childKey;
|
|
70
|
-
});
|
|
71
|
-
});
|
|
72
|
-
} else {
|
|
73
|
-
selectedKeys = checked ? [].concat(selectedRowKeys, [key]) : selectedRowKeys.filter(function (k) {
|
|
74
|
-
return k !== key;
|
|
75
|
-
});
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
selectedKeys = Array.from(new Set(selectedKeys));
|
|
79
|
-
|
|
80
|
-
if (dataSource) {
|
|
81
|
-
dataSource.forEach(function (row) {
|
|
82
|
-
var dataRowKey = getRowKey(row); // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
83
|
-
// @ts-expect-error: FIXME: Property 'children' does not exist on type 'T'.ts(2339)
|
|
84
|
-
|
|
85
|
-
if (row.children !== undefined && Array.isArray(row.children)) {
|
|
86
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
87
|
-
// @ts-expect-error: FIXME: Property 'children' does not exist on type 'T'.ts(2339)
|
|
88
|
-
row.children.forEach(function (child) {
|
|
89
|
-
var childKey = getRowKey(child);
|
|
90
|
-
|
|
91
|
-
if (childKey && selectedKeys.indexOf(childKey) >= 0) {
|
|
92
|
-
selectedRows.push(child);
|
|
93
|
-
}
|
|
94
|
-
});
|
|
95
|
-
} else if (dataRowKey && selectedKeys.indexOf(dataRowKey) >= 0) {
|
|
96
|
-
selectedRows.push(row);
|
|
97
|
-
}
|
|
98
|
-
});
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
onChange(selectedKeys, selectedRows);
|
|
102
|
-
}
|
|
103
|
-
}, [selection, getRowKey, dataSource]);
|
|
104
57
|
var RenderRow = React.useCallback(function (row) {
|
|
105
58
|
var children = row.children,
|
|
106
59
|
rowProps = _objectWithoutPropertiesLoose(row, _excluded);
|
|
@@ -124,7 +77,7 @@ function DefaultTable(props) {
|
|
|
124
77
|
}, []);
|
|
125
78
|
var prependedColumns = compact([!!rowStar && starColumn]);
|
|
126
79
|
var decoratedColumns = columns == null ? void 0 : columns.map(function (column) {
|
|
127
|
-
return columnWithSortButtons(sortStateApi)(column);
|
|
80
|
+
return columnWithSortButtons(sortStateApi, onSort)(column);
|
|
128
81
|
});
|
|
129
82
|
var decoratedComponents = components && Object.entries(components).map(function (_ref) {
|
|
130
83
|
var key = _ref[0],
|
|
@@ -146,6 +99,50 @@ function DefaultTable(props) {
|
|
|
146
99
|
value = _ref2[1];
|
|
147
100
|
return _objectSpread({}, acc, (_objectSpread2 = {}, _objectSpread2[key] = value, _objectSpread2));
|
|
148
101
|
}, {});
|
|
102
|
+
var selectedRecords = React.useMemo(function () {
|
|
103
|
+
if (selection) {
|
|
104
|
+
var _ref3 = selection,
|
|
105
|
+
selectedRowKeys = _ref3.selectedRowKeys;
|
|
106
|
+
var selectedRows = [];
|
|
107
|
+
dataSource && dataSource.forEach(function (row) {
|
|
108
|
+
var key = getRowKey(row);
|
|
109
|
+
|
|
110
|
+
if (key && selectedRowKeys.indexOf(key) >= 0) {
|
|
111
|
+
selectedRows = [].concat(selectedRows, [row]);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
if (row.children !== undefined && Array.isArray(row.children)) {
|
|
115
|
+
row.children.forEach(function (child) {
|
|
116
|
+
var childKey = getRowKey(child);
|
|
117
|
+
|
|
118
|
+
if (childKey && selectedRowKeys.indexOf(childKey) >= 0) {
|
|
119
|
+
selectedRows = [].concat(selectedRows, [child]);
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
return selectedRows;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
return [];
|
|
128
|
+
}, [dataSource, getRowKey, selection]);
|
|
129
|
+
var renderRowSelection = React.useCallback(function (key, record) {
|
|
130
|
+
var _ref4 = selection,
|
|
131
|
+
selectedRowKeys = _ref4.selectedRowKeys,
|
|
132
|
+
limit = _ref4.limit,
|
|
133
|
+
independentSelectionExpandedRows = _ref4.independentSelectionExpandedRows,
|
|
134
|
+
onChange = _ref4.onChange;
|
|
135
|
+
return /*#__PURE__*/React.createElement(RowSelectionColumn, {
|
|
136
|
+
rowKey: rowKey,
|
|
137
|
+
record: record,
|
|
138
|
+
limit: limit,
|
|
139
|
+
selectedRowKeys: selectedRowKeys,
|
|
140
|
+
independentSelectionExpandedRows: independentSelectionExpandedRows,
|
|
141
|
+
onChange: onChange,
|
|
142
|
+
selectedRecords: selectedRecords,
|
|
143
|
+
tableLocale: locale
|
|
144
|
+
});
|
|
145
|
+
}, [locale, rowKey, selectedRecords, selection]);
|
|
149
146
|
return (
|
|
150
147
|
/*#__PURE__*/
|
|
151
148
|
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
@@ -164,49 +161,22 @@ function DefaultTable(props) {
|
|
|
164
161
|
type: "no-results",
|
|
165
162
|
noSearchResults: true
|
|
166
163
|
})
|
|
167
|
-
})
|
|
164
|
+
}) // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
165
|
+
// @ts-ignore
|
|
166
|
+
,
|
|
168
167
|
title: title,
|
|
169
168
|
showSorterTooltip: false,
|
|
170
169
|
components: _objectSpread({
|
|
171
170
|
body: {
|
|
172
171
|
row: RenderRow
|
|
173
172
|
}
|
|
174
|
-
}, decoratedComponents)
|
|
173
|
+
}, decoratedComponents) // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
174
|
+
// @ts-ignore
|
|
175
|
+
,
|
|
175
176
|
rowSelection: selection && _objectSpread({}, selection, {
|
|
176
177
|
selections: selection == null ? void 0 : (_selection$selections = selection.selections) == null ? void 0 : _selection$selections.filter(Boolean),
|
|
177
178
|
columnWidth: 64,
|
|
178
|
-
renderCell:
|
|
179
|
-
var _record$children, _record$children2;
|
|
180
|
-
|
|
181
|
-
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
182
|
-
// @ts-expect-error: FIXME: Property 'children' does not exist on type 'T'.ts(2339)
|
|
183
|
-
var hasChilds = record.children !== undefined && Array.isArray(record.children);
|
|
184
|
-
var allChildsChecked = hasChilds && // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
185
|
-
// @ts-expect-error: FIXME: Property 'children' does not exist on type 'T'.ts(2339)
|
|
186
|
-
((_record$children = record.children) == null ? void 0 : _record$children.filter(function (child) {
|
|
187
|
-
var childKey = getRowKey(child);
|
|
188
|
-
return childKey && (selection == null ? void 0 : selection.selectedRowKeys.indexOf(childKey)) < 0;
|
|
189
|
-
}).length) === 0 || false;
|
|
190
|
-
var checkedChilds = // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
191
|
-
// @ts-expect-error: FIXME: Property 'children' does not exist on type 'T'.ts(2339)
|
|
192
|
-
((_record$children2 = record.children) == null ? void 0 : _record$children2.filter(function (child) {
|
|
193
|
-
var childKey = getRowKey(child);
|
|
194
|
-
return childKey && (selection == null ? void 0 : selection.selectedRowKeys.indexOf(childKey)) >= 0;
|
|
195
|
-
})) || [];
|
|
196
|
-
var isIndeterminate = // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
197
|
-
// @ts-expect-error: FIXME: Property 'children' does not exist on type 'T'.ts(2339)
|
|
198
|
-
hasChilds && checkedChilds.length > 0 && checkedChilds.length < record.children.length;
|
|
199
|
-
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
200
|
-
title: locale == null ? void 0 : locale.selectRowTooltip
|
|
201
|
-
}, /*#__PURE__*/React.createElement(Button.Checkbox, {
|
|
202
|
-
checked: checked || allChildsChecked,
|
|
203
|
-
disabled: !checked && Boolean(selection.limit && selection.limit <= selection.selectedRowKeys.length),
|
|
204
|
-
indeterminate: isIndeterminate,
|
|
205
|
-
onChange: function onChange(isChecked) {
|
|
206
|
-
toggleRowSelection(isChecked, record);
|
|
207
|
-
}
|
|
208
|
-
}));
|
|
209
|
-
}
|
|
179
|
+
renderCell: renderRowSelection
|
|
210
180
|
})
|
|
211
181
|
}))
|
|
212
182
|
);
|
|
@@ -5,6 +5,7 @@ import Button from '@synerise/ds-button';
|
|
|
5
5
|
import Icon, { AddS } from '@synerise/ds-icon';
|
|
6
6
|
import { GROUP_BY } from '@synerise/ds-column-manager/dist/ColumnManagerGroupSettings/ColumnManagerGroupSettings.types';
|
|
7
7
|
import * as S from '../GroupTable.styles';
|
|
8
|
+
import { useRowKey } from '../../hooks/useRowKey';
|
|
8
9
|
|
|
9
10
|
function GroupTableBody(_ref) {
|
|
10
11
|
var group = _ref.group,
|
|
@@ -17,11 +18,10 @@ function GroupTableBody(_ref) {
|
|
|
17
18
|
addItem = _ref.addItem,
|
|
18
19
|
activeGroup = _ref.activeGroup,
|
|
19
20
|
hideGroupExpander = _ref.hideGroupExpander;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}, [rowKey]);
|
|
21
|
+
|
|
22
|
+
var _useRowKey = useRowKey(rowKey),
|
|
23
|
+
getRowKey = _useRowKey.getRowKey;
|
|
24
|
+
|
|
25
25
|
var allRowKeys = React.useMemo(function () {
|
|
26
26
|
return group.children.length ? group.children[0].props.record.rows.map(function (row) {
|
|
27
27
|
return getRowKey(row);
|
|
@@ -67,7 +67,8 @@ function GroupTableBody(_ref) {
|
|
|
67
67
|
});
|
|
68
68
|
|
|
69
69
|
selection.onChange(_selectedKeys, allItems.filter(function (item) {
|
|
70
|
-
|
|
70
|
+
var key = getRowKey(item);
|
|
71
|
+
return key && (_selectedKeys == null ? void 0 : _selectedKeys.indexOf(key)) < 0;
|
|
71
72
|
}));
|
|
72
73
|
}
|
|
73
74
|
}
|
|
@@ -92,9 +93,9 @@ function GroupTableBody(_ref) {
|
|
|
92
93
|
}, selection && /*#__PURE__*/React.createElement(S.SubRow, {
|
|
93
94
|
withBorderLeft: true
|
|
94
95
|
}, /*#__PURE__*/React.createElement(Checkbox, {
|
|
95
|
-
checked: selection.selectedRowKeys.indexOf(key) >= 0,
|
|
96
|
+
checked: key !== undefined && selection.selectedRowKeys.indexOf(key) >= 0,
|
|
96
97
|
onChange: function onChange(event) {
|
|
97
|
-
if (event.target.checked) {
|
|
98
|
+
if (event.target.checked && key !== undefined) {
|
|
98
99
|
selection.onChange([].concat(selection.selectedRowKeys, [key]), [].concat(allItems, [rowRecord]));
|
|
99
100
|
} else {
|
|
100
101
|
selection.onChange(selection == null ? void 0 : selection.selectedRowKeys.filter(function (item) {
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { RowSelectionProps } from './RowSelectionColumn.types';
|
|
3
|
+
import { RowType } from '../Table.types';
|
|
4
|
+
export declare function RowSelectionColumn<T extends object & RowType<T>>({ rowKey, record, limit, independentSelectionExpandedRows, selectedRowKeys, selectedRecords, tableLocale, onChange, }: RowSelectionProps<T>): React.ReactElement | null;
|