@synerise/ds-table 0.53.2 → 0.55.0
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 +33 -0
- package/README.md +9 -0
- package/dist/Cell/Star/StarCell.d.ts +1 -1
- package/dist/DefaultTable/DefaultTable.d.ts +2 -2
- package/dist/DefaultTable/DefaultTable.js +55 -50
- package/dist/InfiniteScroll/ErrorItem.d.ts +6 -0
- package/dist/InfiniteScroll/ErrorItem.js +28 -0
- package/dist/InfiniteScroll/InfiniteLoaderItem.d.ts +2 -2
- package/dist/InfiniteScroll/InfiniteLoaderItem.js +22 -54
- package/dist/InfiniteScroll/LoadingItem.d.ts +2 -0
- package/dist/InfiniteScroll/LoadingItem.js +11 -0
- package/dist/InfiniteScroll/NoMoreItem.d.ts +2 -0
- package/dist/InfiniteScroll/NoMoreItem.js +11 -0
- package/dist/RowSelection/RowSelectionColumn.d.ts +2 -2
- package/dist/RowSelection/RowSelectionColumn.js +41 -33
- package/dist/RowSelection/RowSelectionColumn.types.d.ts +4 -2
- package/dist/Table.js +6 -3
- package/dist/Table.types.d.ts +4 -0
- package/dist/TableHeader/TableHeader.js +7 -4
- package/dist/TableHeader/TableHeader.types.d.ts +1 -0
- package/dist/TableHeader/TableSelection.d.ts +3 -3
- package/dist/TableHeader/TableSelection.js +69 -47
- package/dist/TableHeader/TableSelection.types.d.ts +1 -0
- package/dist/VirtualTable/VirtualTable.js +45 -32
- package/dist/utils/getChildrenColumnName.d.ts +1 -0
- package/dist/utils/getChildrenColumnName.js +4 -0
- package/dist/utils/getRecordSelectionStatus.d.ts +8 -0
- package/dist/utils/getRecordSelectionStatus.js +10 -0
- package/dist/utils/index.d.ts +4 -0
- package/dist/utils/index.js +5 -1
- package/dist/utils/isRecordSelectable.d.ts +5 -0
- package/dist/utils/isRecordSelectable.js +12 -0
- package/package.json +29 -31
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,39 @@
|
|
|
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.55.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.54.0...@synerise/ds-table@0.55.0) (2024-07-05)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* fixed missing dependencies ([f718fb7](https://github.com/synerise/synerise-design/commit/f718fb7e954a19857ea4b6bbd417e3fe290fd2dc))
|
|
12
|
+
* **table:** fix remount virtual rows ([284e4ef](https://github.com/synerise/synerise-design/commit/284e4ef46188362b5e23c2fb2c1d18544f3c9680))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
* **table:** added prop to exclude selection for rows ([2607c00](https://github.com/synerise/synerise-design/commit/2607c0048fa7abddfc249d7fc4eeb2b9142ae5c1))
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
# [0.54.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.53.2...@synerise/ds-table@0.54.0) (2024-07-02)
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
### Bug Fixes
|
|
27
|
+
|
|
28
|
+
* **table:** infinite loader - trigger loading without scrolling ([4559290](https://github.com/synerise/synerise-design/commit/455929012ab463980f0dd5de7230636a0ee058b6))
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
### Features
|
|
32
|
+
|
|
33
|
+
* **table:** add custom name for children column ([e5b2089](https://github.com/synerise/synerise-design/commit/e5b2089e011a28eccfdc56843c268fc861677a07))
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
6
39
|
## [0.53.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.53.1...@synerise/ds-table@0.53.2) (2024-06-27)
|
|
7
40
|
|
|
8
41
|
|
package/README.md
CHANGED
|
@@ -98,6 +98,15 @@ This type of table requires a specific type of dataSource which has to contain a
|
|
|
98
98
|
| onChange | Callback executed when selection changes | (selectedRowKeys: React.ReactText[], selectedRows: T[]) => void | - |
|
|
99
99
|
| limit | Max length of selection rows array | number | - |
|
|
100
100
|
| independentSelectionExpandedRows | Allows to select parent and child rows independently | boolean | - |
|
|
101
|
+
| checkRowSelectionStatus | Validator function record selection status | (record: T) => SelectionStatus | - |
|
|
102
|
+
|
|
103
|
+
#### SelectionStatus
|
|
104
|
+
|
|
105
|
+
| Property | Description | Type | Default |
|
|
106
|
+
| --------------- | ------------------------------------------------ | --------------------------------------------------------------- | ------- |
|
|
107
|
+
| unavailable | Skips rendering checkbox if true | boolean | - |
|
|
108
|
+
| disabled | Renders checkbox in disabled state | boolean | - |
|
|
109
|
+
|
|
101
110
|
|
|
102
111
|
#### RowStar
|
|
103
112
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
declare const _default: React.ForwardRefExoticComponent<{
|
|
3
|
-
children: ((string | number | boolean | {} | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.
|
|
3
|
+
children: ((string | number | boolean | {} | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | React.ReactNode[]) & (boolean | React.ReactChild | React.ReactFragment | React.ReactPortal)) | null | undefined;
|
|
4
4
|
onClick?: (() => void) | undefined;
|
|
5
5
|
active?: boolean | undefined;
|
|
6
6
|
starTooltip?: React.ReactNode;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { DSTableProps, RowType } from '../Table.types';
|
|
3
|
-
declare function DefaultTable<T extends object & RowType<T>>(props: DSTableProps<T>): React.
|
|
3
|
+
declare function DefaultTable<T extends object & RowType<T>>(props: DSTableProps<T>): React.JSX.Element;
|
|
4
4
|
export default DefaultTable;
|
|
@@ -10,17 +10,18 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
10
10
|
|
|
11
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; }
|
|
12
12
|
|
|
13
|
-
import
|
|
13
|
+
import React, { useCallback, useEffect, useMemo } 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 usePrevious from '@synerise/ds-utils
|
|
18
|
+
import { usePrevious } from '@synerise/ds-utils';
|
|
19
19
|
import { columnsToSortState, useSortState } from '../ColumnSortMenu/useSortState';
|
|
20
20
|
import { columnWithSortButtons } from '../ColumnSortMenu/columnWithSortButtons';
|
|
21
21
|
import { useRowKey } from '../hooks/useRowKey';
|
|
22
22
|
import { useRowStar } from '../hooks/useRowStar/useRowStar';
|
|
23
|
-
import { RowSelectionColumn } from '../RowSelection';
|
|
23
|
+
import { RowSelectionColumn } from '../RowSelection';
|
|
24
|
+
import { getChildrenColumnName, isRecordSelectable } from '../utils';
|
|
24
25
|
|
|
25
26
|
function DefaultTable(props) {
|
|
26
27
|
var _selection$selections;
|
|
@@ -41,20 +42,22 @@ function DefaultTable(props) {
|
|
|
41
42
|
var _useRowStar = useRowStar((rowStar == null ? void 0 : rowStar.starredRowKeys) || []),
|
|
42
43
|
getRowStarColumn = _useRowStar.getRowStarColumn;
|
|
43
44
|
|
|
45
|
+
var childrenColumnName = getChildrenColumnName(expandable == null ? void 0 : expandable.childrenColumnName);
|
|
46
|
+
|
|
44
47
|
var _useRowKey = useRowKey(rowKey),
|
|
45
48
|
getRowKey = _useRowKey.getRowKey;
|
|
46
49
|
|
|
47
|
-
var starColumn =
|
|
50
|
+
var starColumn = useMemo(function () {
|
|
48
51
|
return getRowStarColumn(_objectSpread({}, props, {
|
|
49
52
|
getRowKey: getRowKey
|
|
50
53
|
}));
|
|
51
54
|
}, [getRowKey, getRowStarColumn, props]);
|
|
52
|
-
|
|
55
|
+
useEffect(function () {
|
|
53
56
|
if (!isEqual(previousColumns, columns)) {
|
|
54
57
|
sortStateApi.updateColumnsData(columnsToSortState(columns));
|
|
55
58
|
}
|
|
56
59
|
}, [columns, previousColumns, sortStateApi]);
|
|
57
|
-
var RenderRow =
|
|
60
|
+
var RenderRow = useCallback(function (row) {
|
|
58
61
|
var children = row.children,
|
|
59
62
|
rowProps = _objectWithoutPropertiesLoose(row, _excluded);
|
|
60
63
|
|
|
@@ -99,23 +102,26 @@ function DefaultTable(props) {
|
|
|
99
102
|
value = _ref2[1];
|
|
100
103
|
return _objectSpread({}, acc, (_objectSpread2 = {}, _objectSpread2[key] = value, _objectSpread2));
|
|
101
104
|
}, {});
|
|
102
|
-
var selectedRecords =
|
|
105
|
+
var selectedRecords = useMemo(function () {
|
|
103
106
|
if (selection) {
|
|
104
107
|
var _ref4 = selection,
|
|
105
|
-
selectedRowKeys = _ref4.selectedRowKeys
|
|
108
|
+
selectedRowKeys = _ref4.selectedRowKeys,
|
|
109
|
+
checkRowSelectionStatus = _ref4.checkRowSelectionStatus;
|
|
106
110
|
var selectedRows = [];
|
|
107
111
|
dataSource && dataSource.forEach(function (row) {
|
|
108
112
|
var key = getRowKey(row);
|
|
109
113
|
|
|
110
|
-
if (key && selectedRowKeys.indexOf(key) >= 0) {
|
|
114
|
+
if (key && selectedRowKeys.indexOf(key) >= 0 && isRecordSelectable(row, checkRowSelectionStatus)) {
|
|
111
115
|
selectedRows = [].concat(selectedRows, [row]);
|
|
112
116
|
}
|
|
113
117
|
|
|
114
|
-
|
|
115
|
-
|
|
118
|
+
var rowChildren = row[childrenColumnName];
|
|
119
|
+
|
|
120
|
+
if (rowChildren !== undefined && Array.isArray(rowChildren)) {
|
|
121
|
+
rowChildren.forEach(function (child) {
|
|
116
122
|
var childKey = getRowKey(child);
|
|
117
123
|
|
|
118
|
-
if (childKey && selectedRowKeys.indexOf(childKey) >= 0) {
|
|
124
|
+
if (childKey && selectedRowKeys.indexOf(childKey) >= 0 && isRecordSelectable(child, checkRowSelectionStatus)) {
|
|
119
125
|
selectedRows = [].concat(selectedRows, [child]);
|
|
120
126
|
}
|
|
121
127
|
});
|
|
@@ -125,13 +131,14 @@ function DefaultTable(props) {
|
|
|
125
131
|
}
|
|
126
132
|
|
|
127
133
|
return [];
|
|
128
|
-
}, [dataSource, getRowKey, selection]);
|
|
129
|
-
var renderRowSelection =
|
|
134
|
+
}, [childrenColumnName, dataSource, getRowKey, selection]);
|
|
135
|
+
var renderRowSelection = useCallback(function (key, record) {
|
|
130
136
|
var _ref5 = selection,
|
|
131
137
|
selectedRowKeys = _ref5.selectedRowKeys,
|
|
132
138
|
limit = _ref5.limit,
|
|
133
139
|
independentSelectionExpandedRows = _ref5.independentSelectionExpandedRows,
|
|
134
|
-
onChange = _ref5.onChange
|
|
140
|
+
onChange = _ref5.onChange,
|
|
141
|
+
checkRowSelectionStatus = _ref5.checkRowSelectionStatus;
|
|
135
142
|
return /*#__PURE__*/React.createElement(RowSelectionColumn, {
|
|
136
143
|
rowKey: rowKey,
|
|
137
144
|
record: record,
|
|
@@ -140,43 +147,41 @@ function DefaultTable(props) {
|
|
|
140
147
|
independentSelectionExpandedRows: independentSelectionExpandedRows,
|
|
141
148
|
onChange: onChange,
|
|
142
149
|
selectedRecords: selectedRecords,
|
|
143
|
-
tableLocale: locale
|
|
150
|
+
tableLocale: locale,
|
|
151
|
+
checkRowSelectionStatus: checkRowSelectionStatus,
|
|
152
|
+
childrenColumnName: childrenColumnName
|
|
144
153
|
});
|
|
145
|
-
}, [locale, rowKey, selectedRecords, selection]);
|
|
146
|
-
return (
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
}),
|
|
160
|
-
type: "no-results",
|
|
161
|
-
noSearchResults: true
|
|
162
|
-
})
|
|
163
|
-
}) // @ts-ignore
|
|
164
|
-
,
|
|
165
|
-
title: title,
|
|
166
|
-
showSorterTooltip: false,
|
|
167
|
-
components: _objectSpread({
|
|
168
|
-
body: {
|
|
169
|
-
row: RenderRow
|
|
170
|
-
}
|
|
171
|
-
}, decoratedComponents) // @ts-ignore
|
|
172
|
-
,
|
|
173
|
-
rowSelection: selection && _objectSpread({}, selection, {
|
|
174
|
-
selections: selection == null || (_selection$selections = selection.selections) == null ? void 0 : _selection$selections.filter(Boolean),
|
|
175
|
-
columnWidth: 64,
|
|
176
|
-
renderCell: renderRowSelection
|
|
154
|
+
}, [locale, rowKey, selectedRecords, selection, childrenColumnName]);
|
|
155
|
+
return /*#__PURE__*/React.createElement(Table, _extends({}, props, {
|
|
156
|
+
"data-popup-container": true,
|
|
157
|
+
columns: [].concat(prependedColumns, decoratedColumns),
|
|
158
|
+
expandable: _objectSpread({
|
|
159
|
+
expandIconColumnIndex: -1
|
|
160
|
+
}, expandable),
|
|
161
|
+
locale: _objectSpread({}, locale, {
|
|
162
|
+
emptyText: /*#__PURE__*/React.createElement(Result, {
|
|
163
|
+
description: (locale == null ? void 0 : locale.emptyText) || /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
164
|
+
id: "DS.TABLE.EMPTY_TEXT"
|
|
165
|
+
}),
|
|
166
|
+
type: "no-results",
|
|
167
|
+
noSearchResults: true
|
|
177
168
|
})
|
|
178
|
-
})
|
|
179
|
-
|
|
169
|
+
}) // @ts-ignore
|
|
170
|
+
,
|
|
171
|
+
title: title,
|
|
172
|
+
showSorterTooltip: false,
|
|
173
|
+
components: _objectSpread({
|
|
174
|
+
body: {
|
|
175
|
+
row: RenderRow
|
|
176
|
+
}
|
|
177
|
+
}, decoratedComponents) // @ts-ignore
|
|
178
|
+
,
|
|
179
|
+
rowSelection: selection && _objectSpread({}, selection, {
|
|
180
|
+
selections: selection == null || (_selection$selections = selection.selections) == null ? void 0 : _selection$selections.filter(Boolean),
|
|
181
|
+
columnWidth: 64,
|
|
182
|
+
renderCell: renderRowSelection
|
|
183
|
+
})
|
|
184
|
+
}));
|
|
180
185
|
}
|
|
181
186
|
|
|
182
187
|
export default DefaultTable;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Alert from '@synerise/ds-alert';
|
|
3
|
+
import Button from '@synerise/ds-button';
|
|
4
|
+
import Icon, { RefreshM } from '@synerise/ds-icon';
|
|
5
|
+
import { TableLocaleContext } from '../utils/locale';
|
|
6
|
+
export var ErrorItem = function ErrorItem(_ref) {
|
|
7
|
+
var onRetryClick = _ref.onRetryClick;
|
|
8
|
+
return /*#__PURE__*/React.createElement(TableLocaleContext.Consumer, null, function (tableLocale) {
|
|
9
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
10
|
+
style: {
|
|
11
|
+
display: 'flex'
|
|
12
|
+
}
|
|
13
|
+
}, /*#__PURE__*/React.createElement(Alert.InlineAlert, {
|
|
14
|
+
type: "alert",
|
|
15
|
+
message: tableLocale.infiniteScrollError
|
|
16
|
+
}), onRetryClick && /*#__PURE__*/React.createElement(Button, {
|
|
17
|
+
onClick: onRetryClick,
|
|
18
|
+
type: "ghost",
|
|
19
|
+
mode: "icon-label",
|
|
20
|
+
icon: /*#__PURE__*/React.createElement(Icon, {
|
|
21
|
+
component: /*#__PURE__*/React.createElement(RefreshM, null)
|
|
22
|
+
}),
|
|
23
|
+
style: {
|
|
24
|
+
marginLeft: 8
|
|
25
|
+
}
|
|
26
|
+
}, tableLocale.infiniteScrollRetry));
|
|
27
|
+
});
|
|
28
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { LoaderItemProps } from './InfiniteLoaderItem.types';
|
|
3
|
-
declare const InfiniteLoaderItem: ({ infiniteScroll, position }: LoaderItemProps) => React.
|
|
3
|
+
declare const InfiniteLoaderItem: ({ infiniteScroll, position }: LoaderItemProps) => React.JSX.Element;
|
|
4
4
|
export default InfiniteLoaderItem;
|
|
@@ -1,67 +1,35 @@
|
|
|
1
|
-
import
|
|
2
|
-
import Alert from '@synerise/ds-alert';
|
|
3
|
-
import Button from '@synerise/ds-button';
|
|
4
|
-
import Icon, { RefreshM } from '@synerise/ds-icon';
|
|
5
|
-
import { TableLocaleContext } from '../utils/locale';
|
|
6
|
-
import { Loader } from './InfiniteLoaderItem.styles';
|
|
1
|
+
import React, { useEffect } from 'react';
|
|
7
2
|
import { infiniteScrollPropsToState } from './utils';
|
|
3
|
+
import { ErrorItem } from './ErrorItem';
|
|
4
|
+
import { LoadingItem } from './LoadingItem';
|
|
5
|
+
import { NoMoreItem } from './NoMoreItem';
|
|
8
6
|
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
size: "M",
|
|
13
|
-
label: tableLocale.infiniteScrollLoading
|
|
14
|
-
});
|
|
15
|
-
});
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
var NoMoreItem = function NoMoreItem() {
|
|
19
|
-
return /*#__PURE__*/React.createElement(TableLocaleContext.Consumer, null, function (tableLocale) {
|
|
20
|
-
return /*#__PURE__*/React.createElement(Alert.InlineAlert, {
|
|
21
|
-
// @ts-ignore
|
|
22
|
-
type: "info",
|
|
23
|
-
message: tableLocale.infiniteScrollNoMoreData
|
|
24
|
-
});
|
|
25
|
-
});
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
var ErrorItem = function ErrorItem(_ref) {
|
|
29
|
-
var onRetryClick = _ref.onRetryClick;
|
|
30
|
-
return /*#__PURE__*/React.createElement(TableLocaleContext.Consumer, null, function (tableLocale) {
|
|
31
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
32
|
-
style: {
|
|
33
|
-
display: 'flex'
|
|
34
|
-
}
|
|
35
|
-
}, /*#__PURE__*/React.createElement(Alert.InlineAlert, {
|
|
36
|
-
// @ts-ignore
|
|
37
|
-
type: "alert",
|
|
38
|
-
message: tableLocale.infiniteScrollError
|
|
39
|
-
}), onRetryClick && /*#__PURE__*/React.createElement(Button, {
|
|
40
|
-
onClick: onRetryClick,
|
|
41
|
-
type: "ghost",
|
|
42
|
-
mode: "icon-label",
|
|
43
|
-
icon: /*#__PURE__*/React.createElement(Icon, {
|
|
44
|
-
component: /*#__PURE__*/React.createElement(RefreshM, null)
|
|
45
|
-
}),
|
|
46
|
-
style: {
|
|
47
|
-
marginLeft: 8
|
|
48
|
-
}
|
|
49
|
-
}, tableLocale.infiniteScrollRetry));
|
|
50
|
-
});
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
var InfiniteLoaderItem = function InfiniteLoaderItem(_ref2) {
|
|
54
|
-
var infiniteScroll = _ref2.infiniteScroll,
|
|
55
|
-
position = _ref2.position;
|
|
7
|
+
var InfiniteLoaderItem = function InfiniteLoaderItem(_ref) {
|
|
8
|
+
var infiniteScroll = _ref.infiniteScroll,
|
|
9
|
+
position = _ref.position;
|
|
56
10
|
var hasMore = infiniteScroll.hasMore,
|
|
57
11
|
isLoading = infiniteScroll.isLoading,
|
|
12
|
+
onScrollEndReach = infiniteScroll.onScrollEndReach,
|
|
58
13
|
hasError = infiniteScroll.hasError,
|
|
59
14
|
onRetryButtonClick = infiniteScroll.onRetryButtonClick,
|
|
60
15
|
render = infiniteScroll.render;
|
|
61
16
|
|
|
62
17
|
var handleRetryClick = function handleRetryClick() {
|
|
63
18
|
onRetryButtonClick && onRetryButtonClick(position);
|
|
64
|
-
};
|
|
19
|
+
}; // @ts-expect-error TS7030: Not all code paths return a value
|
|
20
|
+
// eslint-disable-next-line consistent-return
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
useEffect(function () {
|
|
24
|
+
if (!isLoading && hasMore) {
|
|
25
|
+
if ((!position || position === 'BOTTOM') && typeof onScrollEndReach === 'function') {
|
|
26
|
+
var timeout = setTimeout(onScrollEndReach, 0);
|
|
27
|
+
return function () {
|
|
28
|
+
clearTimeout(timeout);
|
|
29
|
+
};
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}, [hasMore, isLoading, onScrollEndReach, position]);
|
|
65
33
|
|
|
66
34
|
if (typeof render === 'function') {
|
|
67
35
|
return render(infiniteScrollPropsToState(infiniteScroll));
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TableLocaleContext } from '../utils/locale';
|
|
3
|
+
import { Loader } from './InfiniteLoaderItem.styles';
|
|
4
|
+
export var LoadingItem = function LoadingItem() {
|
|
5
|
+
return /*#__PURE__*/React.createElement(TableLocaleContext.Consumer, null, function (tableLocale) {
|
|
6
|
+
return /*#__PURE__*/React.createElement(Loader, {
|
|
7
|
+
size: "M",
|
|
8
|
+
label: tableLocale.infiniteScrollLoading
|
|
9
|
+
});
|
|
10
|
+
});
|
|
11
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Alert from '@synerise/ds-alert';
|
|
3
|
+
import { TableLocaleContext } from '../utils/locale';
|
|
4
|
+
export var NoMoreItem = function NoMoreItem() {
|
|
5
|
+
return /*#__PURE__*/React.createElement(TableLocaleContext.Consumer, null, function (tableLocale) {
|
|
6
|
+
return /*#__PURE__*/React.createElement(Alert.InlineAlert, {
|
|
7
|
+
type: "info",
|
|
8
|
+
message: tableLocale.infiniteScrollNoMoreData
|
|
9
|
+
});
|
|
10
|
+
});
|
|
11
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { RowSelectionProps } from './RowSelectionColumn.types';
|
|
3
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.
|
|
4
|
+
export declare function RowSelectionColumn<T extends object & RowType<T>>({ rowKey, record, limit, independentSelectionExpandedRows, selectedRowKeys, selectedRecords, tableLocale, onChange, checkRowSelectionStatus, childrenColumnName, }: RowSelectionProps<T>): React.JSX.Element | null;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React, { useCallback, useMemo } from 'react';
|
|
2
2
|
import Tooltip from '@synerise/ds-tooltip';
|
|
3
3
|
import Button from '@synerise/ds-button';
|
|
4
4
|
import { useRowKey } from '../hooks/useRowKey';
|
|
5
|
-
|
|
5
|
+
import { getRecordSelectionStatus, isRecordSelectable } from '../utils';
|
|
6
6
|
export function RowSelectionColumn(_ref) {
|
|
7
7
|
var rowKey = _ref.rowKey,
|
|
8
8
|
record = _ref.record,
|
|
@@ -11,55 +11,58 @@ export function RowSelectionColumn(_ref) {
|
|
|
11
11
|
selectedRowKeys = _ref.selectedRowKeys,
|
|
12
12
|
selectedRecords = _ref.selectedRecords,
|
|
13
13
|
tableLocale = _ref.tableLocale,
|
|
14
|
-
onChange = _ref.onChange
|
|
14
|
+
onChange = _ref.onChange,
|
|
15
|
+
checkRowSelectionStatus = _ref.checkRowSelectionStatus,
|
|
16
|
+
childrenColumnName = _ref.childrenColumnName;
|
|
15
17
|
|
|
16
18
|
var _useRowKey = useRowKey(rowKey),
|
|
17
19
|
getRowKey = _useRowKey.getRowKey;
|
|
18
20
|
|
|
19
21
|
var recordKey = getRowKey(record);
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
var rowChildren = record[childrenColumnName];
|
|
23
|
+
var isSelectable = useCallback(function (item) {
|
|
24
|
+
return isRecordSelectable(item, checkRowSelectionStatus);
|
|
25
|
+
}, [checkRowSelectionStatus]);
|
|
26
|
+
var checkedChildren = useMemo(function () {
|
|
27
|
+
return (rowChildren == null ? void 0 : rowChildren.filter(function (child) {
|
|
24
28
|
var childKey = getRowKey(child);
|
|
25
|
-
return childKey && selectedRowKeys.indexOf(childKey) >= 0;
|
|
29
|
+
return childKey && selectedRowKeys.indexOf(childKey) >= 0 && isSelectable(child);
|
|
26
30
|
})) || [];
|
|
27
|
-
}, [getRowKey,
|
|
28
|
-
var allChildrenSelected =
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
return !!((_record$children2 = record.children) != null && _record$children2.every(function (child) {
|
|
31
|
+
}, [isSelectable, getRowKey, rowChildren, selectedRowKeys]);
|
|
32
|
+
var allChildrenSelected = useMemo(function () {
|
|
33
|
+
return !!(rowChildren != null && rowChildren.filter(isSelectable).every(function (child) {
|
|
32
34
|
var childKey = getRowKey(child);
|
|
33
35
|
return childKey && selectedRowKeys.indexOf(childKey) >= 0;
|
|
34
36
|
}));
|
|
35
|
-
}, [getRowKey,
|
|
36
|
-
var isIndeterminate =
|
|
37
|
-
if (Array.isArray(
|
|
38
|
-
var
|
|
39
|
-
|
|
40
|
-
return checkedChildren.length > 0 && checkedChildren.length < (((_record$children3 = record.children) == null ? void 0 : _record$children3.length) || 0);
|
|
37
|
+
}, [getRowKey, isSelectable, rowChildren, selectedRowKeys]);
|
|
38
|
+
var isIndeterminate = useMemo(function () {
|
|
39
|
+
if (Array.isArray(rowChildren) && !independentSelectionExpandedRows) {
|
|
40
|
+
var clickableChildren = rowChildren == null ? void 0 : rowChildren.filter(isSelectable);
|
|
41
|
+
return checkedChildren.length > 0 && checkedChildren.length < (clickableChildren.length || 0);
|
|
41
42
|
}
|
|
42
43
|
|
|
43
44
|
return false;
|
|
44
|
-
}, [checkedChildren.length, independentSelectionExpandedRows,
|
|
45
|
-
var isChecked =
|
|
46
|
-
if (Array.isArray(
|
|
45
|
+
}, [checkedChildren.length, independentSelectionExpandedRows, isSelectable, rowChildren]);
|
|
46
|
+
var isChecked = useMemo(function () {
|
|
47
|
+
if (Array.isArray(rowChildren) && !independentSelectionExpandedRows) {
|
|
47
48
|
return isChecked || allChildrenSelected;
|
|
48
49
|
}
|
|
49
50
|
|
|
50
51
|
return recordKey !== undefined && selectedRowKeys && selectedRowKeys.indexOf(recordKey) >= 0;
|
|
51
|
-
}, [allChildrenSelected, independentSelectionExpandedRows,
|
|
52
|
-
var handleSelectionChange =
|
|
52
|
+
}, [allChildrenSelected, independentSelectionExpandedRows, rowChildren, recordKey, selectedRowKeys]);
|
|
53
|
+
var handleSelectionChange = useCallback(function (isCheckedNext, changedRecord) {
|
|
53
54
|
var selectedRows = selectedRecords;
|
|
55
|
+
var changedRecordChildren = changedRecord[childrenColumnName];
|
|
54
56
|
|
|
55
57
|
if (isCheckedNext) {
|
|
56
|
-
if (Array.isArray(
|
|
57
|
-
|
|
58
|
+
if (Array.isArray(changedRecordChildren) && !independentSelectionExpandedRows) {
|
|
59
|
+
var clickableChildren = changedRecordChildren.filter(isSelectable);
|
|
60
|
+
selectedRows = [].concat(selectedRows, clickableChildren);
|
|
58
61
|
} else {
|
|
59
62
|
selectedRows = [].concat(selectedRows, [changedRecord]);
|
|
60
63
|
}
|
|
61
|
-
} else if (Array.isArray(
|
|
62
|
-
var childrenKeys =
|
|
64
|
+
} else if (Array.isArray(changedRecordChildren) && !independentSelectionExpandedRows) {
|
|
65
|
+
var childrenKeys = changedRecordChildren.filter(isSelectable).map(function (child) {
|
|
63
66
|
return getRowKey(child);
|
|
64
67
|
});
|
|
65
68
|
selectedRows = selectedRows.filter(function (child) {
|
|
@@ -81,18 +84,23 @@ export function RowSelectionColumn(_ref) {
|
|
|
81
84
|
|
|
82
85
|
return acc;
|
|
83
86
|
}, []), selectedRows);
|
|
84
|
-
}, [getRowKey, independentSelectionExpandedRows, onChange, recordKey, selectedRecords]);
|
|
85
|
-
|
|
87
|
+
}, [getRowKey, independentSelectionExpandedRows, isSelectable, onChange, recordKey, selectedRecords, childrenColumnName]);
|
|
88
|
+
|
|
89
|
+
var _getRecordSelectionSt = getRecordSelectionStatus(checkRowSelectionStatus, record),
|
|
90
|
+
unavailable = _getRecordSelectionSt.unavailable,
|
|
91
|
+
disabled = _getRecordSelectionSt.disabled;
|
|
92
|
+
|
|
93
|
+
return recordKey !== undefined && !unavailable ? /*#__PURE__*/React.createElement(Tooltip, {
|
|
86
94
|
title: tableLocale == null ? void 0 : tableLocale.selectRowTooltip,
|
|
87
95
|
mouseLeaveDelay: 0
|
|
88
96
|
}, /*#__PURE__*/React.createElement(Button.Checkbox, {
|
|
89
97
|
key: "checkbox-" + recordKey,
|
|
90
98
|
"data-testid": "ds-table-selection-button",
|
|
91
99
|
checked: isChecked,
|
|
92
|
-
disabled: !isChecked && Boolean(limit !== undefined && limit <= selectedRowKeys.length),
|
|
100
|
+
disabled: !isChecked && Boolean(limit !== undefined && limit <= selectedRowKeys.length) || disabled,
|
|
93
101
|
indeterminate: isIndeterminate,
|
|
94
|
-
onClick: function onClick(
|
|
95
|
-
|
|
102
|
+
onClick: function onClick(event) {
|
|
103
|
+
event.stopPropagation();
|
|
96
104
|
},
|
|
97
105
|
onChange: function onChange(isCheckedNext) {
|
|
98
106
|
return handleSelectionChange(isCheckedNext, record);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { TableProps } from 'rc-table/lib/Table';
|
|
3
|
-
import { DSTableProps } from '../Table.types';
|
|
3
|
+
import { DSTableProps, RowSelection } from '../Table.types';
|
|
4
4
|
export type RowSelectionProps<T> = {
|
|
5
5
|
rowKey: TableProps<T>['rowKey'];
|
|
6
6
|
independentSelectionExpandedRows?: boolean;
|
|
@@ -9,5 +9,7 @@ export type RowSelectionProps<T> = {
|
|
|
9
9
|
limit?: number;
|
|
10
10
|
record: T;
|
|
11
11
|
tableLocale: DSTableProps<T>['locale'];
|
|
12
|
-
onChange:
|
|
12
|
+
onChange: RowSelection<T>['onChange'];
|
|
13
|
+
checkRowSelectionStatus?: RowSelection<T>['checkRowSelectionStatus'];
|
|
14
|
+
childrenColumnName: string;
|
|
13
15
|
};
|
package/dist/Table.js
CHANGED
|
@@ -19,6 +19,7 @@ import TableHeader from './TableHeader/TableHeader';
|
|
|
19
19
|
import DefaultTable from './DefaultTable/DefaultTable';
|
|
20
20
|
import GroupTable from './GroupTable/GroupTable';
|
|
21
21
|
import { useTableLocale, TableLocaleContext } from './utils/locale';
|
|
22
|
+
import { getChildrenColumnName } from './utils/getChildrenColumnName';
|
|
22
23
|
export var SELECTION_ALL = 'SELECTION_ALL';
|
|
23
24
|
export var SELECTION_INVERT = 'SELECTION_INVERT';
|
|
24
25
|
var ITEM_RENDER_TYPE = {
|
|
@@ -50,7 +51,8 @@ function DSTable(props) {
|
|
|
50
51
|
hideColumnNames = props.hideColumnNames,
|
|
51
52
|
renderSelectionTitle = props.renderSelectionTitle,
|
|
52
53
|
hideTitlePart = props.hideTitlePart,
|
|
53
|
-
disableColumnNamesLineBreak = props.disableColumnNamesLineBreak
|
|
54
|
+
disableColumnNamesLineBreak = props.disableColumnNamesLineBreak,
|
|
55
|
+
expandable = props.expandable;
|
|
54
56
|
var tableLocale = useTableLocale(intl, locale);
|
|
55
57
|
|
|
56
58
|
var _useDataFormat = useDataFormat(),
|
|
@@ -83,9 +85,10 @@ function DSTable(props) {
|
|
|
83
85
|
rowKey: rowKey,
|
|
84
86
|
locale: tableLocale,
|
|
85
87
|
renderSelectionTitle: renderSelectionTitle,
|
|
86
|
-
hideTitlePart: hideTitlePart
|
|
88
|
+
hideTitlePart: hideTitlePart,
|
|
89
|
+
childrenColumnName: getChildrenColumnName(expandable == null ? void 0 : expandable.childrenColumnName)
|
|
87
90
|
});
|
|
88
|
-
}, [selection, grouped, dataSource, dataSourceTotalCount, hideTitleBar, headerWithBorderTop, title, filters, itemsMenu, dataSourceFull, searchComponent, filterComponent, headerButton, rowKey, tableLocale, renderSelectionTitle, hideTitlePart]);
|
|
91
|
+
}, [selection, grouped, dataSource, dataSourceTotalCount, hideTitleBar, headerWithBorderTop, title, filters, itemsMenu, dataSourceFull, searchComponent, filterComponent, headerButton, rowKey, tableLocale, renderSelectionTitle, hideTitlePart, expandable == null ? void 0 : expandable.childrenColumnName]);
|
|
89
92
|
var footerPagination = React.useMemo(function () {
|
|
90
93
|
return _objectSpread({
|
|
91
94
|
showTotal: function showTotal(total, range) {
|
package/dist/Table.types.d.ts
CHANGED
|
@@ -20,6 +20,10 @@ export type RowSelection<T> = Omit<TableRowSelection<T>, 'selections'> & {
|
|
|
20
20
|
onChange: (selectedRowKeys: React.ReactText[], selectedRows: T[]) => void;
|
|
21
21
|
limit?: number;
|
|
22
22
|
independentSelectionExpandedRows?: boolean;
|
|
23
|
+
checkRowSelectionStatus?: (record: T) => {
|
|
24
|
+
disabled?: boolean;
|
|
25
|
+
unavailable?: boolean;
|
|
26
|
+
};
|
|
23
27
|
};
|
|
24
28
|
export interface Filter {
|
|
25
29
|
tooltips: {
|