@synerise/ds-table 0.55.2 → 0.56.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 +24 -0
- package/README.md +47 -46
- package/dist/ColumnSortMenu/SortRenderer.d.ts +3 -3
- package/dist/ColumnSortMenu/SortRenderer.js +112 -118
- package/dist/DefaultTable/DefaultTable.js +12 -8
- package/dist/InfiniteScroll/ErrorItem.js +17 -21
- package/dist/InfiniteScroll/ErrorItem.styles.d.ts +1 -0
- package/dist/InfiniteScroll/ErrorItem.styles.js +5 -0
- package/dist/InfiniteScroll/InfiniteLoaderItem.js +3 -5
- package/dist/InfiniteScroll/LoadingItem.js +5 -6
- package/dist/InfiniteScroll/NoMoreItem.js +5 -6
- package/dist/Table.types.d.ts +18 -17
- package/dist/VirtualTable/VirtualTable.d.ts +34 -4
- package/dist/VirtualTable/VirtualTable.js +11 -0
- package/dist/VirtualTable/VirtualTable.styles.d.ts +1 -0
- package/dist/VirtualTable/VirtualTable.styles.js +3 -1
- package/dist/VirtualTable/VirtualTable.types.d.ts +1 -0
- package/dist/utils/locale.d.ts +3 -2
- package/dist/utils/locale.js +6 -3
- package/package.json +17 -17
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,30 @@
|
|
|
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.56.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.56.0...@synerise/ds-table@0.56.1) (2024-08-06)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-table
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
# [0.56.0](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.55.2...@synerise/ds-table@0.56.0) (2024-07-31)
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
### Bug Fixes
|
|
18
|
+
|
|
19
|
+
* **table:** adjust scrollbar zindex when unstuck ([902da6f](https://github.com/synerise/synerise-design/commit/902da6f82402d6b959b3827493147b8ed407062f))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
### Features
|
|
23
|
+
|
|
24
|
+
* **table:** added custom empty state component prop ([4ce918a](https://github.com/synerise/synerise-design/commit/4ce918ad41d5ab33f4032c140c6880bd0ab0f886))
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
6
30
|
## [0.55.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.55.1...@synerise/ds-table@0.55.2) (2024-07-26)
|
|
7
31
|
|
|
8
32
|
**Note:** Version bump only for package @synerise/ds-table
|
package/README.md
CHANGED
|
@@ -13,52 +13,53 @@ Table UI Component
|
|
|
13
13
|
|
|
14
14
|
### Table
|
|
15
15
|
|
|
16
|
-
| Property | Description
|
|
17
|
-
|
|
18
|
-
| bordered | Whether to show all table borders
|
|
19
|
-
| childrenColumnName | The column contains children to display
|
|
20
|
-
| columns | Columns of table
|
|
21
|
-
| components | Override default table elements
|
|
22
|
-
| dataSource | Data record array to be displayed
|
|
23
|
-
| dataSourceFull
|
|
24
|
-
| defaultExpandAllRows | Expand all rows initially
|
|
25
|
-
| defaultExpandedRowKeys | Initial expanded row keys
|
|
26
|
-
| disableColumnNamesLineBreak | Disable line break when rendering column names
|
|
27
|
-
| expandedRowKeys | Current expanded row keys
|
|
28
|
-
| expandedRowRender | Expanded container render for each row
|
|
29
|
-
| expandIcon | Customize row expand Icon. Ref [example](http://react-component.github.io/table/examples/expandIcon.html)
|
|
30
|
-
| expandRowByClick | Whether to expand row by clicking anywhere in the whole row
|
|
31
|
-
| footer | Table footer renderer
|
|
32
|
-
| indentSize | Indent size in pixels of tree data
|
|
33
|
-
| loading | Loading status of table
|
|
34
|
-
| locale | i18n text including filter, sort, empty text, etc
|
|
35
|
-
| pagination | Config of pagination. You can ref table pagination [config](#pagination) or full [`pagination`](/components/pagination/) document, hide it by setting it to `false`
|
|
36
|
-
| rowClassName | Row's className
|
|
37
|
-
| rowKey | Row's unique key, could be a string or function that returns a string
|
|
38
|
-
| 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)
|
|
39
|
-
| showHeader | Whether to show table header
|
|
40
|
-
| size | Size of table
|
|
41
|
-
| title | Table title renderer
|
|
42
|
-
| hideTitleBar | Wheter to hide table title bar
|
|
43
|
-
| headerWithBorderTop | Wheter to add line above table title bar
|
|
44
|
-
| itemsMenu | Components or text visible when any of table itams are selected, usually used for bulk actions
|
|
45
|
-
| search | Search query
|
|
46
|
-
| cellSize | Defines padding size of each row in table
|
|
47
|
-
| roundedHeader | Wheter to round table header
|
|
48
|
-
| selection | Config of rows selection
|
|
49
|
-
| filters | Array of filters cofings, earch of them will be rendered in table title bar
|
|
50
|
-
| searchComponent | SearchComponent
|
|
51
|
-
| filterComponent | FilterItemComponent
|
|
52
|
-
|
|
|
53
|
-
|
|
|
54
|
-
|
|
|
55
|
-
|
|
|
56
|
-
|
|
|
57
|
-
|
|
|
58
|
-
|
|
|
59
|
-
|
|
|
60
|
-
|
|
|
61
|
-
|
|
|
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
|
+
| dataSourceFull | If `dataSource` prop is a subset of a larger array (via search component for example), but you want selection row to operate on the full data array (selection onChange handler will return keys that are not in the current subset but have been selected prior to searching) | same as `dataSource` | - |
|
|
24
|
+
| defaultExpandAllRows | Expand all rows initially | boolean | `false` |
|
|
25
|
+
| defaultExpandedRowKeys | Initial expanded row keys | string / [] | - |
|
|
26
|
+
| disableColumnNamesLineBreak | Disable line break when rendering column names | boolean | false |
|
|
27
|
+
| expandedRowKeys | Current expanded row keys | string / [] | - |
|
|
28
|
+
| expandedRowRender | Expanded container render for each row | (record, index, indent, expanded) => React.ReactNode | - |
|
|
29
|
+
| expandIcon | Customize row expand Icon. Ref [example](http://react-component.github.io/table/examples/expandIcon.html) | (props) => React.ReactNode | - |
|
|
30
|
+
| expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | `false` |
|
|
31
|
+
| footer | Table footer renderer | (currentPageData) => React.ReactNode | |
|
|
32
|
+
| indentSize | Indent size in pixels of tree data | number | 15 |
|
|
33
|
+
| loading | Loading status of table | boolean / object | `false` |
|
|
34
|
+
| locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok' <br /> filterReset: 'Reset' <br /> emptyText: 'No Data' <br /> |
|
|
35
|
+
| 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 | |
|
|
36
|
+
| rowClassName | Row's className | (record, index: number) => string | - |
|
|
37
|
+
| rowKey | Row's unique key, could be a string or function that returns a string | string / (record) => string | `key` |
|
|
38
|
+
| 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 } | - |
|
|
39
|
+
| showHeader | Whether to show table header | boolean | `true` |
|
|
40
|
+
| size | Size of table | `default` / `middle` / `small` | `default` |
|
|
41
|
+
| title | Table title renderer | string / React.ReactNode | |
|
|
42
|
+
| hideTitleBar | Wheter to hide table title bar | boolean | - |
|
|
43
|
+
| headerWithBorderTop | Wheter to add line above table title bar | boolean | - |
|
|
44
|
+
| itemsMenu | Components or text visible when any of table itams are selected, usually used for bulk actions | string / React.ReactNode | - |
|
|
45
|
+
| search | Search query | string | - |
|
|
46
|
+
| cellSize | Defines padding size of each row in table | `small` / `medium` / `default` | `default` |
|
|
47
|
+
| roundedHeader | Wheter to round table header | boolean | `false` |
|
|
48
|
+
| selection | Config of rows selection | RowSelection | - |
|
|
49
|
+
| filters | Array of filters cofings, earch of them will be rendered in table title bar | Filter[] | - |
|
|
50
|
+
| searchComponent | SearchComponent | React.ReactNode | - |
|
|
51
|
+
| filterComponent | FilterItemComponent | React.ReactNode | - |
|
|
52
|
+
| emptyDataComponent | component to render when data provided to table is empty. default component is @synerise/ds-result | React.ReactNode | - |
|
|
53
|
+
| grouped | Whether to render table as GroupedTable of DefaultTable | boolean | - |
|
|
54
|
+
| onChange | Callback executed when pagination, filters or sorter is changed | (pagination, filters, sorter, extra: { currentDataSource: [] }) => void | |
|
|
55
|
+
| onExpand | Callback executed when the row expand icon is clicked | (expanded, record) => void | |
|
|
56
|
+
| onExpandedRowsChange | Callback executed when the expanded rows change | (expandedRows) => void | |
|
|
57
|
+
| onHeaderRow | Set props on per header row | (column, index) => object | - |
|
|
58
|
+
| onRow | Set props on per row | (record, index) => object | - |
|
|
59
|
+
| 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 | - |
|
|
60
|
+
| getPopupContainer | the render container of dropdowns in table | (triggerNode) => HTMLElement | `() => TableHtmlElement` |
|
|
61
|
+
| renderSelectionTitle | Function to render a custom title in table header when some items are selected | ({selection: RowSelection, filters:Filter[] }) => React.ReactNode | - |
|
|
62
|
+
| rowStar | Configuration of row starring | RowStar | - |
|
|
62
63
|
|
|
63
64
|
|
|
64
65
|
### VirtualTable
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { DSColumnType, OnSortFn } from '../Table.types';
|
|
3
3
|
import { SortStateAPI } from './useSortState';
|
|
4
4
|
interface SortRendererProps<T> {
|
|
@@ -6,6 +6,6 @@ interface SortRendererProps<T> {
|
|
|
6
6
|
column: DSColumnType<T>;
|
|
7
7
|
onSort?: OnSortFn;
|
|
8
8
|
}
|
|
9
|
-
export declare const CommonRenderer: <T extends unknown>({ column, sortStateApi
|
|
10
|
-
export declare const StringRenderer: <T extends unknown>({ column, sortStateApi
|
|
9
|
+
export declare const CommonRenderer: <T extends unknown>({ column, sortStateApi }: SortRendererProps<T>) => React.JSX.Element;
|
|
10
|
+
export declare const StringRenderer: <T extends unknown>({ column, sortStateApi }: SortRendererProps<T>) => React.JSX.Element;
|
|
11
11
|
export {};
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
1
2
|
import { partial } from 'lodash';
|
|
2
|
-
import * as React from 'react';
|
|
3
3
|
import Dropdown from '@synerise/ds-dropdown';
|
|
4
4
|
import Icon, { Close2M, SortAscendingM, SortDescendingM, SortAzM, SortZaM } from '@synerise/ds-icon';
|
|
5
5
|
import Menu from '@synerise/ds-menu';
|
|
6
|
-
import {
|
|
6
|
+
import { useTableLocaleContext } from '../utils/locale';
|
|
7
7
|
import * as S from './SortRender.styles';
|
|
8
8
|
import { toSortOrder } from './useSortState';
|
|
9
9
|
import { CheckIcon, DefaultSortIcon, StringSortIcon } from './SortIcons';
|
|
10
10
|
|
|
11
|
-
var handleButtonClick = function handleButtonClick(
|
|
12
|
-
|
|
11
|
+
var handleButtonClick = function handleButtonClick(event) {
|
|
12
|
+
event.stopPropagation();
|
|
13
13
|
};
|
|
14
14
|
|
|
15
15
|
export var CommonRenderer = function CommonRenderer(_ref) {
|
|
@@ -21,65 +21,62 @@ export var CommonRenderer = function CommonRenderer(_ref) {
|
|
|
21
21
|
var columnSortOrder = column.key ? getColumnSortOrder(columnKey) : null;
|
|
22
22
|
var onSortOrderChange = partial(setColumnSortOrder, columnKey);
|
|
23
23
|
|
|
24
|
-
var
|
|
25
|
-
isDropdownVisible =
|
|
26
|
-
setIsDropdownVisible =
|
|
24
|
+
var _useState = useState(false),
|
|
25
|
+
isDropdownVisible = _useState[0],
|
|
26
|
+
setIsDropdownVisible = _useState[1];
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
28
|
+
var locale = useTableLocaleContext();
|
|
29
|
+
return /*#__PURE__*/React.createElement(Dropdown, {
|
|
30
|
+
onVisibleChange: function onVisibleChange(isVisible) {
|
|
31
|
+
if (isVisible !== isDropdownVisible) {
|
|
32
|
+
setIsDropdownVisible(isVisible);
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
overlay: /*#__PURE__*/React.createElement(Dropdown.Wrapper, {
|
|
36
|
+
style: {
|
|
37
|
+
width: 220
|
|
38
|
+
}
|
|
39
|
+
}, /*#__PURE__*/React.createElement(Menu, {
|
|
40
|
+
asDropdownMenu: true,
|
|
41
|
+
onClick: function onClick(_ref2) {
|
|
42
|
+
var key = _ref2.key;
|
|
43
|
+
onSortOrderChange(toSortOrder(String(key)));
|
|
34
44
|
},
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
, {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
component: /*#__PURE__*/React.createElement(Close2M, null)
|
|
71
|
-
})
|
|
72
|
-
}, locale.columnSortClear)))
|
|
73
|
-
}, /*#__PURE__*/React.createElement(S.ToggleButton, {
|
|
74
|
-
isVisible: isDropdownVisible,
|
|
75
|
-
type: "ghost",
|
|
76
|
-
mode: "single-icon",
|
|
77
|
-
className: "ds-sort-dropdown-button",
|
|
78
|
-
onClick: handleButtonClick
|
|
79
|
-
}, /*#__PURE__*/React.createElement(DefaultSortIcon, {
|
|
80
|
-
sortOrder: columnSortOrder
|
|
81
|
-
})));
|
|
82
|
-
});
|
|
45
|
+
style: {
|
|
46
|
+
width: 220
|
|
47
|
+
}
|
|
48
|
+
}, /*#__PURE__*/React.createElement(Menu.Item, {
|
|
49
|
+
key: "ascend",
|
|
50
|
+
prefixel: /*#__PURE__*/React.createElement(Icon, {
|
|
51
|
+
component: /*#__PURE__*/React.createElement(SortAscendingM, null)
|
|
52
|
+
}),
|
|
53
|
+
suffixel: /*#__PURE__*/React.createElement(CheckIcon, {
|
|
54
|
+
isActive: columnSortOrder === 'ascend'
|
|
55
|
+
})
|
|
56
|
+
}, locale.columnSortAscend), /*#__PURE__*/React.createElement(Menu.Item, {
|
|
57
|
+
key: "descend",
|
|
58
|
+
prefixel: /*#__PURE__*/React.createElement(Icon, {
|
|
59
|
+
component: /*#__PURE__*/React.createElement(SortDescendingM, null)
|
|
60
|
+
}),
|
|
61
|
+
suffixel: /*#__PURE__*/React.createElement(CheckIcon, {
|
|
62
|
+
isActive: columnSortOrder === 'descend'
|
|
63
|
+
})
|
|
64
|
+
}, locale.columnSortDescend), !!columnSortOrder && /*#__PURE__*/React.createElement(Menu.Item, {
|
|
65
|
+
key: "null",
|
|
66
|
+
type: "danger",
|
|
67
|
+
prefixel: /*#__PURE__*/React.createElement(Icon, {
|
|
68
|
+
component: /*#__PURE__*/React.createElement(Close2M, null)
|
|
69
|
+
})
|
|
70
|
+
}, locale.columnSortClear)))
|
|
71
|
+
}, /*#__PURE__*/React.createElement(S.ToggleButton, {
|
|
72
|
+
isVisible: isDropdownVisible,
|
|
73
|
+
type: "ghost",
|
|
74
|
+
mode: "single-icon",
|
|
75
|
+
className: "ds-sort-dropdown-button",
|
|
76
|
+
onClick: handleButtonClick
|
|
77
|
+
}, /*#__PURE__*/React.createElement(DefaultSortIcon, {
|
|
78
|
+
sortOrder: columnSortOrder
|
|
79
|
+
})));
|
|
83
80
|
};
|
|
84
81
|
export var StringRenderer = function StringRenderer(_ref3) {
|
|
85
82
|
var column = _ref3.column,
|
|
@@ -90,63 +87,60 @@ export var StringRenderer = function StringRenderer(_ref3) {
|
|
|
90
87
|
var columnSortOrder = column.key ? getColumnSortOrder(columnKey) : null;
|
|
91
88
|
var onSortOrderChange = partial(setColumnSortOrder, columnKey);
|
|
92
89
|
|
|
93
|
-
var
|
|
94
|
-
isDropdownVisible =
|
|
95
|
-
setIsDropdownVisible =
|
|
90
|
+
var _useState2 = useState(false),
|
|
91
|
+
isDropdownVisible = _useState2[0],
|
|
92
|
+
setIsDropdownVisible = _useState2[1];
|
|
96
93
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
94
|
+
var locale = useTableLocaleContext();
|
|
95
|
+
return /*#__PURE__*/React.createElement(Dropdown, {
|
|
96
|
+
onVisibleChange: function onVisibleChange(isVisible) {
|
|
97
|
+
if (isVisible !== isDropdownVisible) {
|
|
98
|
+
setIsDropdownVisible(isVisible);
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
overlay: /*#__PURE__*/React.createElement(Dropdown.Wrapper, {
|
|
102
|
+
style: {
|
|
103
|
+
width: 170
|
|
104
|
+
}
|
|
105
|
+
}, /*#__PURE__*/React.createElement(Menu, {
|
|
106
|
+
asDropdownMenu: true,
|
|
107
|
+
onClick: function onClick(_ref4) {
|
|
108
|
+
var key = _ref4.key;
|
|
109
|
+
onSortOrderChange(toSortOrder(String(key)));
|
|
103
110
|
},
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
, {
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
component: /*#__PURE__*/React.createElement(Close2M, null)
|
|
140
|
-
})
|
|
141
|
-
}, locale.columnSortClear)))
|
|
142
|
-
}, /*#__PURE__*/React.createElement(S.ToggleButton, {
|
|
143
|
-
isVisible: isDropdownVisible,
|
|
144
|
-
type: "ghost",
|
|
145
|
-
mode: "single-icon",
|
|
146
|
-
className: "ds-sort-dropdown-button",
|
|
147
|
-
onClick: handleButtonClick
|
|
148
|
-
}, /*#__PURE__*/React.createElement(StringSortIcon, {
|
|
149
|
-
sortOrder: columnSortOrder
|
|
150
|
-
})));
|
|
151
|
-
});
|
|
111
|
+
style: {
|
|
112
|
+
width: 170
|
|
113
|
+
}
|
|
114
|
+
}, /*#__PURE__*/React.createElement(Menu.Item, {
|
|
115
|
+
key: "ascend",
|
|
116
|
+
prefixel: /*#__PURE__*/React.createElement(Icon, {
|
|
117
|
+
component: /*#__PURE__*/React.createElement(SortAzM, null)
|
|
118
|
+
}),
|
|
119
|
+
suffixel: /*#__PURE__*/React.createElement(CheckIcon, {
|
|
120
|
+
isActive: columnSortOrder === 'ascend'
|
|
121
|
+
})
|
|
122
|
+
}, locale.columnSortAz), /*#__PURE__*/React.createElement(Menu.Item, {
|
|
123
|
+
key: "descend",
|
|
124
|
+
prefixel: /*#__PURE__*/React.createElement(Icon, {
|
|
125
|
+
component: /*#__PURE__*/React.createElement(SortZaM, null)
|
|
126
|
+
}),
|
|
127
|
+
suffixel: /*#__PURE__*/React.createElement(CheckIcon, {
|
|
128
|
+
isActive: columnSortOrder === 'descend'
|
|
129
|
+
})
|
|
130
|
+
}, locale.columnSortZa), !!columnSortOrder && /*#__PURE__*/React.createElement(Menu.Item, {
|
|
131
|
+
key: "null",
|
|
132
|
+
type: "danger",
|
|
133
|
+
prefixel: /*#__PURE__*/React.createElement(Icon, {
|
|
134
|
+
component: /*#__PURE__*/React.createElement(Close2M, null)
|
|
135
|
+
})
|
|
136
|
+
}, locale.columnSortClear)))
|
|
137
|
+
}, /*#__PURE__*/React.createElement(S.ToggleButton, {
|
|
138
|
+
isVisible: isDropdownVisible,
|
|
139
|
+
type: "ghost",
|
|
140
|
+
mode: "single-icon",
|
|
141
|
+
className: "ds-sort-dropdown-button",
|
|
142
|
+
onClick: handleButtonClick
|
|
143
|
+
}, /*#__PURE__*/React.createElement(StringSortIcon, {
|
|
144
|
+
sortOrder: columnSortOrder
|
|
145
|
+
})));
|
|
152
146
|
};
|
|
@@ -35,7 +35,8 @@ function DefaultTable(props) {
|
|
|
35
35
|
expandable = props.expandable,
|
|
36
36
|
components = props.components,
|
|
37
37
|
columns = props.columns,
|
|
38
|
-
onSort = props.onSort
|
|
38
|
+
onSort = props.onSort,
|
|
39
|
+
emptyDataComponent = props.emptyDataComponent;
|
|
39
40
|
var previousColumns = usePrevious(columns);
|
|
40
41
|
var sortStateApi = useSortState(columnsToSortState(columns), onSort);
|
|
41
42
|
|
|
@@ -52,6 +53,15 @@ function DefaultTable(props) {
|
|
|
52
53
|
getRowKey: getRowKey
|
|
53
54
|
}));
|
|
54
55
|
}, [getRowKey, getRowStarColumn, props]);
|
|
56
|
+
var emptyData = useMemo(function () {
|
|
57
|
+
return emptyDataComponent !== undefined ? emptyDataComponent : /*#__PURE__*/React.createElement(Result, {
|
|
58
|
+
description: (locale == null ? void 0 : locale.emptyText) || /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
59
|
+
id: "DS.TABLE.EMPTY_TEXT"
|
|
60
|
+
}),
|
|
61
|
+
type: "no-results",
|
|
62
|
+
noSearchResults: true
|
|
63
|
+
});
|
|
64
|
+
}, [emptyDataComponent, locale == null ? void 0 : locale.emptyText]);
|
|
55
65
|
useEffect(function () {
|
|
56
66
|
if (!isEqual(previousColumns, columns)) {
|
|
57
67
|
sortStateApi.updateColumnsData(columnsToSortState(columns));
|
|
@@ -159,13 +169,7 @@ function DefaultTable(props) {
|
|
|
159
169
|
expandIconColumnIndex: -1
|
|
160
170
|
}, expandable),
|
|
161
171
|
locale: _objectSpread({}, locale, {
|
|
162
|
-
emptyText:
|
|
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
|
|
168
|
-
})
|
|
172
|
+
emptyText: emptyData
|
|
169
173
|
}) // @ts-ignore
|
|
170
174
|
,
|
|
171
175
|
title: title,
|
|
@@ -2,27 +2,23 @@ import React from 'react';
|
|
|
2
2
|
import Alert from '@synerise/ds-alert';
|
|
3
3
|
import Button from '@synerise/ds-button';
|
|
4
4
|
import Icon, { RefreshM } from '@synerise/ds-icon';
|
|
5
|
-
import
|
|
5
|
+
import * as S from './ErrorItem.styles';
|
|
6
|
+
import { useTableLocaleContext } from '../utils/locale';
|
|
6
7
|
export var ErrorItem = function ErrorItem(_ref) {
|
|
7
8
|
var onRetryClick = _ref.onRetryClick;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
style: {
|
|
24
|
-
marginLeft: 8
|
|
25
|
-
}
|
|
26
|
-
}, tableLocale.infiniteScrollRetry));
|
|
27
|
-
});
|
|
9
|
+
var tableLocale = useTableLocaleContext();
|
|
10
|
+
return /*#__PURE__*/React.createElement(S.ErrorItemWrapper, null, /*#__PURE__*/React.createElement(Alert.InlineAlert, {
|
|
11
|
+
type: "alert",
|
|
12
|
+
message: tableLocale.infiniteScrollError
|
|
13
|
+
}), onRetryClick && /*#__PURE__*/React.createElement(Button, {
|
|
14
|
+
onClick: onRetryClick,
|
|
15
|
+
type: "ghost",
|
|
16
|
+
mode: "icon-label",
|
|
17
|
+
icon: /*#__PURE__*/React.createElement(Icon, {
|
|
18
|
+
component: /*#__PURE__*/React.createElement(RefreshM, null)
|
|
19
|
+
}),
|
|
20
|
+
style: {
|
|
21
|
+
marginLeft: 8
|
|
22
|
+
}
|
|
23
|
+
}, tableLocale.infiniteScrollRetry));
|
|
28
24
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const ErrorItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -13,13 +13,11 @@ var InfiniteLoaderItem = function InfiniteLoaderItem(_ref) {
|
|
|
13
13
|
hasError = infiniteScroll.hasError,
|
|
14
14
|
onRetryButtonClick = infiniteScroll.onRetryButtonClick,
|
|
15
15
|
render = infiniteScroll.render;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}; // @ts-expect-error TS7030: Not all code paths return a value
|
|
16
|
+
var handleRetryClick = onRetryButtonClick ? function () {
|
|
17
|
+
onRetryButtonClick(position);
|
|
18
|
+
} : undefined; // @ts-expect-error TS7030: Not all code paths return a value
|
|
20
19
|
// eslint-disable-next-line consistent-return
|
|
21
20
|
|
|
22
|
-
|
|
23
21
|
useEffect(function () {
|
|
24
22
|
if (!isLoading && hasMore) {
|
|
25
23
|
if ((!position || position === 'BOTTOM') && typeof onScrollEndReach === 'function') {
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { useTableLocaleContext } from '../utils/locale';
|
|
3
3
|
import { Loader } from './InfiniteLoaderItem.styles';
|
|
4
4
|
export var LoadingItem = function LoadingItem() {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
});
|
|
5
|
+
var tableLocale = useTableLocaleContext();
|
|
6
|
+
return /*#__PURE__*/React.createElement(Loader, {
|
|
7
|
+
size: "M",
|
|
8
|
+
label: tableLocale.infiniteScrollLoading
|
|
10
9
|
});
|
|
11
10
|
};
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import Alert from '@synerise/ds-alert';
|
|
3
|
-
import {
|
|
3
|
+
import { useTableLocaleContext } from '../utils/locale';
|
|
4
4
|
export var NoMoreItem = function NoMoreItem() {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
});
|
|
5
|
+
var tableLocale = useTableLocaleContext();
|
|
6
|
+
return /*#__PURE__*/React.createElement(Alert.InlineAlert, {
|
|
7
|
+
type: "info",
|
|
8
|
+
message: tableLocale.infiniteScrollNoMoreData
|
|
10
9
|
});
|
|
11
10
|
};
|
package/dist/Table.types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
+
import { ReactNode, ReactText, Ref } from 'react';
|
|
1
2
|
import { ColumnType, TableProps } from 'antd/lib/table';
|
|
2
|
-
import * as React from 'react';
|
|
3
3
|
import { TableLocale, TableRowSelection } from 'antd/lib/table/interface';
|
|
4
4
|
import DSTable from './Table';
|
|
5
5
|
import { GroupType } from './GroupTable/GroupTable.types';
|
|
@@ -15,9 +15,9 @@ export type Selection = {
|
|
|
15
15
|
export type SelectionItem = typeof DSTable.SELECTION_ALL | typeof DSTable.SELECTION_INVERT | Selection | null | undefined;
|
|
16
16
|
export type RowSelection<T> = Omit<TableRowSelection<T>, 'selections'> & {
|
|
17
17
|
fixed?: boolean;
|
|
18
|
-
selectedRowKeys:
|
|
18
|
+
selectedRowKeys: ReactText[];
|
|
19
19
|
selections?: SelectionItem[];
|
|
20
|
-
onChange: (selectedRowKeys:
|
|
20
|
+
onChange: (selectedRowKeys: ReactText[], selectedRows: T[]) => void;
|
|
21
21
|
limit?: number;
|
|
22
22
|
independentSelectionExpandedRows?: boolean;
|
|
23
23
|
checkRowSelectionStatus?: (record: T) => {
|
|
@@ -25,7 +25,7 @@ export type RowSelection<T> = Omit<TableRowSelection<T>, 'selections'> & {
|
|
|
25
25
|
unavailable?: boolean;
|
|
26
26
|
};
|
|
27
27
|
};
|
|
28
|
-
export
|
|
28
|
+
export type Filter = {
|
|
29
29
|
tooltips: {
|
|
30
30
|
default: string;
|
|
31
31
|
clear: string;
|
|
@@ -34,7 +34,7 @@ export interface Filter {
|
|
|
34
34
|
};
|
|
35
35
|
openedLabel: string;
|
|
36
36
|
key: string;
|
|
37
|
-
icon:
|
|
37
|
+
icon: ReactNode;
|
|
38
38
|
showList: () => void;
|
|
39
39
|
show: () => void;
|
|
40
40
|
handleClear: () => void;
|
|
@@ -42,7 +42,7 @@ export interface Filter {
|
|
|
42
42
|
name: string;
|
|
43
43
|
};
|
|
44
44
|
disabled?: boolean;
|
|
45
|
-
}
|
|
45
|
+
};
|
|
46
46
|
export type RowType<T> = {
|
|
47
47
|
key?: string | number;
|
|
48
48
|
children?: T[];
|
|
@@ -75,14 +75,14 @@ export type Locale = TableLocale & {
|
|
|
75
75
|
export type DSColumnType<T> = Omit<ColumnType<T>, 'fixed'> & {
|
|
76
76
|
fixed?: 'left' | 'right';
|
|
77
77
|
sortRender?: SortRender<T>;
|
|
78
|
-
childRender?: (value: unknown, row: T, index: number) =>
|
|
78
|
+
childRender?: (value: unknown, row: T, index: number) => ReactNode;
|
|
79
79
|
};
|
|
80
80
|
export type ScrollProxyType = {
|
|
81
81
|
scrollLeft: number;
|
|
82
82
|
};
|
|
83
83
|
export type CustomizeScrollBodyInfo = {
|
|
84
84
|
scrollbarSize: number;
|
|
85
|
-
ref:
|
|
85
|
+
ref: Ref<ScrollProxyType>;
|
|
86
86
|
onScroll: (info: {
|
|
87
87
|
currentTarget?: HTMLElement;
|
|
88
88
|
scrollLeft?: number;
|
|
@@ -90,27 +90,28 @@ export type CustomizeScrollBodyInfo = {
|
|
|
90
90
|
};
|
|
91
91
|
type AntTableComponentsType<T> = AntTableProps<T>['components'];
|
|
92
92
|
type DSTableComponentsType<T> = AntTableComponentsType<T> & {
|
|
93
|
-
body?: (data: T[], info: CustomizeScrollBodyInfo, defaultTableProps?: DSTableProps<T>) =>
|
|
93
|
+
body?: (data: T[], info: CustomizeScrollBodyInfo, defaultTableProps?: DSTableProps<T>) => ReactNode;
|
|
94
94
|
};
|
|
95
95
|
export type SingleColumnSort = {
|
|
96
96
|
columnKey: string;
|
|
97
97
|
order: ColumnSortOrder;
|
|
98
98
|
};
|
|
99
99
|
export type OnSortFn = (singleColumnSort: SingleColumnSort, sortState: ColumnsSortState) => void;
|
|
100
|
-
export
|
|
101
|
-
title?: string |
|
|
100
|
+
export type DSTableProps<T extends any & GroupType<T>> = AntTableProps<T> & {
|
|
101
|
+
title?: string | ReactNode;
|
|
102
102
|
hideTitleBar?: boolean;
|
|
103
103
|
headerWithBorderTop?: boolean;
|
|
104
|
-
itemsMenu?: string |
|
|
104
|
+
itemsMenu?: string | ReactNode;
|
|
105
105
|
search?: string;
|
|
106
106
|
cellSize?: string | 'medium' | 'small';
|
|
107
107
|
roundedHeader?: boolean;
|
|
108
108
|
selection?: RowSelection<T>;
|
|
109
109
|
rowStar?: RowStar<T>;
|
|
110
110
|
filters?: Filter[];
|
|
111
|
-
searchComponent?:
|
|
112
|
-
filterComponent?:
|
|
113
|
-
|
|
111
|
+
searchComponent?: ReactNode;
|
|
112
|
+
filterComponent?: ReactNode;
|
|
113
|
+
emptyDataComponent?: ReactNode;
|
|
114
|
+
headerButton?: ReactNode;
|
|
114
115
|
grouped?: boolean;
|
|
115
116
|
hideGroupExpander?: boolean;
|
|
116
117
|
initialGroupsCollapsed?: boolean;
|
|
@@ -118,11 +119,11 @@ export interface DSTableProps<T extends any & GroupType<T>> extends AntTableProp
|
|
|
118
119
|
columns?: DSColumnType<T>[];
|
|
119
120
|
locale?: Locale;
|
|
120
121
|
components?: AntTableComponentsType<T> | DSTableComponentsType<T>;
|
|
121
|
-
renderSelectionTitle?: (selection?: RowSelection<T>, filters?: Filter[]) =>
|
|
122
|
+
renderSelectionTitle?: (selection?: RowSelection<T>, filters?: Filter[]) => ReactNode;
|
|
122
123
|
hideTitlePart?: boolean;
|
|
123
124
|
disableColumnNamesLineBreak?: boolean;
|
|
124
125
|
onSort?: OnSortFn;
|
|
125
126
|
dataSourceFull?: T[];
|
|
126
127
|
dataSourceTotalCount?: number;
|
|
127
|
-
}
|
|
128
|
+
};
|
|
128
129
|
export {};
|
|
@@ -1,12 +1,41 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { Ref, ReactElement } from 'react';
|
|
3
3
|
import { FixedSizeList as List } from 'react-window';
|
|
4
|
-
import type {
|
|
5
|
-
import type { RowType, DSTableProps } from '../Table.types';
|
|
4
|
+
import type { RowType, DSTableProps, RowSelection, CustomizeScrollBodyInfo, DSColumnType } from '../Table.types';
|
|
6
5
|
import type { Props, VirtualTableRef } from './VirtualTable.types';
|
|
7
6
|
declare const _default: <T extends object & RowType<T> & {
|
|
8
7
|
expandedChild?: boolean | undefined;
|
|
9
|
-
}>(p:
|
|
8
|
+
}>(p: import("../Table.types").AntTableProps<T> & {
|
|
9
|
+
title?: React.ReactNode;
|
|
10
|
+
hideTitleBar?: boolean | undefined;
|
|
11
|
+
headerWithBorderTop?: boolean | undefined;
|
|
12
|
+
itemsMenu?: React.ReactNode;
|
|
13
|
+
search?: string | undefined;
|
|
14
|
+
cellSize?: string | undefined;
|
|
15
|
+
roundedHeader?: boolean | undefined;
|
|
16
|
+
selection?: RowSelection<T> | undefined;
|
|
17
|
+
rowStar?: import("../hooks/useRowStar").RowStar<T> | undefined;
|
|
18
|
+
filters?: import("../Table.types").Filter[] | undefined;
|
|
19
|
+
searchComponent?: React.ReactNode;
|
|
20
|
+
filterComponent?: React.ReactNode;
|
|
21
|
+
emptyDataComponent?: React.ReactNode;
|
|
22
|
+
headerButton?: React.ReactNode;
|
|
23
|
+
grouped?: boolean | undefined;
|
|
24
|
+
hideGroupExpander?: boolean | undefined;
|
|
25
|
+
initialGroupsCollapsed?: boolean | undefined;
|
|
26
|
+
hideColumnNames?: boolean | undefined;
|
|
27
|
+
columns?: DSColumnType<T>[] | undefined;
|
|
28
|
+
locale?: import("../Table.types").Locale | undefined;
|
|
29
|
+
components?: import("rc-table/lib/interface").TableComponents<T> | (import("rc-table/lib/interface").TableComponents<T> & {
|
|
30
|
+
body?: ((data: T[], info: CustomizeScrollBodyInfo, defaultTableProps?: DSTableProps<T> | undefined) => React.ReactNode) | undefined;
|
|
31
|
+
}) | undefined;
|
|
32
|
+
renderSelectionTitle?: ((selection?: RowSelection<T> | undefined, filters?: import("../Table.types").Filter[] | undefined) => React.ReactNode) | undefined;
|
|
33
|
+
hideTitlePart?: boolean | undefined;
|
|
34
|
+
disableColumnNamesLineBreak?: boolean | undefined;
|
|
35
|
+
onSort?: import("../Table.types").OnSortFn | undefined;
|
|
36
|
+
dataSourceFull?: T[] | undefined;
|
|
37
|
+
dataSourceTotalCount?: number | undefined;
|
|
38
|
+
} & {
|
|
10
39
|
cellHeight: number;
|
|
11
40
|
infiniteScroll?: import("../InfiniteScroll/InfiniteLoaderItem.types").InfiniteScrollProps | undefined;
|
|
12
41
|
initialWidth: number;
|
|
@@ -14,8 +43,9 @@ declare const _default: <T extends object & RowType<T> & {
|
|
|
14
43
|
x?: number | undefined;
|
|
15
44
|
y: number;
|
|
16
45
|
};
|
|
17
|
-
sticky?: ((boolean | TableSticky | undefined) & {
|
|
46
|
+
sticky?: ((boolean | import("rc-table/lib/interface").TableSticky | undefined) & {
|
|
18
47
|
scrollThreshold?: number | undefined;
|
|
48
|
+
getContainer: () => HTMLDivElement;
|
|
19
49
|
}) | undefined;
|
|
20
50
|
onListRefChange?: ((ref: React.RefObject<List<any>>) => void) | undefined;
|
|
21
51
|
onRowClick?: ((row: T) => void) | undefined;
|
|
@@ -15,6 +15,7 @@ import { FixedSizeList as List } from 'react-window';
|
|
|
15
15
|
import ResizeObserver from 'rc-resize-observer';
|
|
16
16
|
import { compact } from 'lodash';
|
|
17
17
|
import { useIntl } from 'react-intl';
|
|
18
|
+
import { useElementInView } from '@synerise/ds-utils';
|
|
18
19
|
import { infiniteLoaderItemHeight } from '../InfiniteScroll/constants';
|
|
19
20
|
import BackToTopButton from '../InfiniteScroll/BackToTopButton';
|
|
20
21
|
import OuterListElement from '../InfiniteScroll/OuterListElement';
|
|
@@ -560,6 +561,14 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
|
|
|
560
561
|
headerElement && setScrollWidth(headerElement.scrollWidth);
|
|
561
562
|
}
|
|
562
563
|
}, [tableWidth, mergedColumns.length, dataSource.length]);
|
|
564
|
+
|
|
565
|
+
var _useElementInView = useElementInView({
|
|
566
|
+
rootMargin: "0px 0px 12px 0px",
|
|
567
|
+
threshold: 0
|
|
568
|
+
}, containerRef),
|
|
569
|
+
isStuck = _useElementInView.isIntersecting,
|
|
570
|
+
elementRef = _useElementInView.elementRef;
|
|
571
|
+
|
|
563
572
|
return /*#__PURE__*/React.createElement(S.VirtualTableWrapper, {
|
|
564
573
|
isSticky: isSticky,
|
|
565
574
|
style: isSticky ? {} : relativeInlineStyle,
|
|
@@ -587,11 +596,13 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
|
|
|
587
596
|
}))), !!(infiniteScroll != null && infiniteScroll.showBackToTopButton) && /*#__PURE__*/React.createElement(BackToTopButton, {
|
|
588
597
|
onClick: scrollToTop
|
|
589
598
|
}, tableLocale.infiniteScrollBackToTop), isSticky && dataSource.length ? /*#__PURE__*/React.createElement(S.StickyScrollbar, {
|
|
599
|
+
isStuck: isStuck,
|
|
590
600
|
offset: offsetScroll || 0,
|
|
591
601
|
ref: horizontalScrollRef,
|
|
592
602
|
onScroll: handleStickyScrollbarScroll,
|
|
593
603
|
absolute: true
|
|
594
604
|
}, /*#__PURE__*/React.createElement(S.StickyScrollbarContent, {
|
|
605
|
+
ref: elementRef,
|
|
595
606
|
scrollWidth: scrollWidth
|
|
596
607
|
})) : null);
|
|
597
608
|
};
|
|
@@ -16,6 +16,7 @@ export declare const VirtualListWrapper: import("styled-components").StyledCompo
|
|
|
16
16
|
}, never>;
|
|
17
17
|
export declare const StickyScrollbar: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<(import("@synerise/ds-scrollbar").ScrollbarProps | import("@synerise/ds-scrollbar").VirtualScrollbarProps) & import("react").RefAttributes<HTMLElement>>, any, {
|
|
18
18
|
offset: number;
|
|
19
|
+
isStuck: boolean;
|
|
19
20
|
}, never>;
|
|
20
21
|
export declare const StickyScrollbarContent: import("styled-components").StyledComponent<"div", any, {
|
|
21
22
|
scrollWidth: number;
|
|
@@ -32,7 +32,9 @@ export var VirtualListWrapper = styled.div.withConfig({
|
|
|
32
32
|
export var StickyScrollbar = styled(Scrollbar).withConfig({
|
|
33
33
|
displayName: "VirtualTablestyles__StickyScrollbar",
|
|
34
34
|
componentId: "aehkhc-4"
|
|
35
|
-
})(["position:sticky;bottom:0;z-index:
|
|
35
|
+
})(["position:sticky;bottom:0;z-index:", ";transform:translate(5px,", ");"], function (props) {
|
|
36
|
+
return props.isStuck ? 2 : 0;
|
|
37
|
+
}, function (props) {
|
|
36
38
|
return numberToPixels(props.offset);
|
|
37
39
|
});
|
|
38
40
|
export var StickyScrollbarContent = styled.div.withConfig({
|
package/dist/utils/locale.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
import { IntlShape } from 'react-intl';
|
|
3
3
|
import { Locale } from '../Table.types';
|
|
4
4
|
export declare const getDefaultLocale: (intl: IntlShape) => Locale;
|
|
5
5
|
export declare const useTableLocale: (intl: IntlShape, locale?: Locale) => Locale;
|
|
6
|
-
export declare const TableLocaleContext:
|
|
6
|
+
export declare const TableLocaleContext: import("react").Context<Locale>;
|
|
7
|
+
export declare const useTableLocaleContext: () => Locale;
|
package/dist/utils/locale.js
CHANGED
|
@@ -4,7 +4,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
4
4
|
|
|
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
|
-
import
|
|
7
|
+
import { createContext, useContext, useMemo } from 'react';
|
|
8
8
|
export var getDefaultLocale = function getDefaultLocale(intl) {
|
|
9
9
|
return {
|
|
10
10
|
pagination: {
|
|
@@ -100,10 +100,13 @@ export var getDefaultLocale = function getDefaultLocale(intl) {
|
|
|
100
100
|
};
|
|
101
101
|
};
|
|
102
102
|
export var useTableLocale = function useTableLocale(intl, locale) {
|
|
103
|
-
return
|
|
103
|
+
return useMemo(function () {
|
|
104
104
|
return _objectSpread({}, getDefaultLocale(intl), {}, locale, {
|
|
105
105
|
pagination: _objectSpread({}, getDefaultLocale(intl).pagination, {}, locale == null ? void 0 : locale.pagination)
|
|
106
106
|
});
|
|
107
107
|
}, [intl, locale]);
|
|
108
108
|
};
|
|
109
|
-
export var TableLocaleContext =
|
|
109
|
+
export var TableLocaleContext = createContext({});
|
|
110
|
+
export var useTableLocaleContext = function useTableLocaleContext() {
|
|
111
|
+
return useContext(TableLocaleContext);
|
|
112
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-table",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.56.1",
|
|
4
4
|
"description": "Table UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "synerise/synerise-design",
|
|
@@ -33,31 +33,31 @@
|
|
|
33
33
|
],
|
|
34
34
|
"types": "dist/index.d.ts",
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@synerise/ds-alert": "^0.8.
|
|
37
|
-
"@synerise/ds-badge": "^0.8.
|
|
36
|
+
"@synerise/ds-alert": "^0.8.22",
|
|
37
|
+
"@synerise/ds-badge": "^0.8.3",
|
|
38
38
|
"@synerise/ds-button": "^0.21.4",
|
|
39
|
-
"@synerise/ds-button-group": "^0.7.
|
|
40
|
-
"@synerise/ds-checkbox": "^0.12.
|
|
41
|
-
"@synerise/ds-column-manager": "^0.11.
|
|
42
|
-
"@synerise/ds-data-format": "^0.5.
|
|
43
|
-
"@synerise/ds-dropdown": "^0.18.
|
|
39
|
+
"@synerise/ds-button-group": "^0.7.8",
|
|
40
|
+
"@synerise/ds-checkbox": "^0.12.4",
|
|
41
|
+
"@synerise/ds-column-manager": "^0.11.66",
|
|
42
|
+
"@synerise/ds-data-format": "^0.5.2",
|
|
43
|
+
"@synerise/ds-dropdown": "^0.18.8",
|
|
44
44
|
"@synerise/ds-flag": "^0.5.1",
|
|
45
45
|
"@synerise/ds-icon": "^0.64.1",
|
|
46
|
-
"@synerise/ds-input": "^0.23.
|
|
46
|
+
"@synerise/ds-input": "^0.23.5",
|
|
47
47
|
"@synerise/ds-loader": "^0.3.10",
|
|
48
|
-
"@synerise/ds-menu": "^0.19.
|
|
48
|
+
"@synerise/ds-menu": "^0.19.8",
|
|
49
49
|
"@synerise/ds-modal": "^0.17.35",
|
|
50
50
|
"@synerise/ds-pagination": "^0.7.56",
|
|
51
51
|
"@synerise/ds-result": "^0.6.61",
|
|
52
52
|
"@synerise/ds-scrollbar": "^0.11.4",
|
|
53
|
-
"@synerise/ds-search": "^0.9.
|
|
54
|
-
"@synerise/ds-select": "^0.16.
|
|
55
|
-
"@synerise/ds-skeleton": "^0.6.
|
|
56
|
-
"@synerise/ds-status": "^0.6.
|
|
57
|
-
"@synerise/ds-tags": "^0.
|
|
53
|
+
"@synerise/ds-search": "^0.9.4",
|
|
54
|
+
"@synerise/ds-select": "^0.16.10",
|
|
55
|
+
"@synerise/ds-skeleton": "^0.6.4",
|
|
56
|
+
"@synerise/ds-status": "^0.6.16",
|
|
57
|
+
"@synerise/ds-tags": "^0.10.1",
|
|
58
58
|
"@synerise/ds-tooltip": "^0.14.34",
|
|
59
59
|
"@synerise/ds-typography": "^0.15.1",
|
|
60
|
-
"@synerise/ds-utils": "^0.28.
|
|
60
|
+
"@synerise/ds-utils": "^0.28.2",
|
|
61
61
|
"@types/react-window": "^1.8.5",
|
|
62
62
|
"classnames": "2.3.2",
|
|
63
63
|
"copy-to-clipboard": "^3.3.1",
|
|
@@ -77,5 +77,5 @@
|
|
|
77
77
|
"react-dom": "^16.14.0",
|
|
78
78
|
"styled-components": "5.0.1"
|
|
79
79
|
},
|
|
80
|
-
"gitHead": "
|
|
80
|
+
"gitHead": "14a9cfb86e5d548d5511ed7cdb23088dcb8b9a2d"
|
|
81
81
|
}
|