@qoretechnologies/reqore 0.34.12 → 0.35.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.
Files changed (117) hide show
  1. package/__tests__/collection.test.tsx +2 -2
  2. package/__tests__/helpers/table.test.tsx +47 -0
  3. package/__tests__/pagination.test.tsx +35 -4
  4. package/__tests__/table.test.tsx +158 -123
  5. package/dist/components/Button/index.d.ts +2 -0
  6. package/dist/components/Button/index.d.ts.map +1 -1
  7. package/dist/components/Button/index.js +7 -4
  8. package/dist/components/Button/index.js.map +1 -1
  9. package/dist/components/Collection/index.d.ts +2 -1
  10. package/dist/components/Collection/index.d.ts.map +1 -1
  11. package/dist/components/Collection/index.js +5 -11
  12. package/dist/components/Collection/index.js.map +1 -1
  13. package/dist/components/ControlGroup/index.d.ts.map +1 -1
  14. package/dist/components/ControlGroup/index.js +4 -3
  15. package/dist/components/ControlGroup/index.js.map +1 -1
  16. package/dist/components/Dropdown/index.d.ts +4 -1
  17. package/dist/components/Dropdown/index.d.ts.map +1 -1
  18. package/dist/components/Dropdown/index.js +2 -2
  19. package/dist/components/Dropdown/index.js.map +1 -1
  20. package/dist/components/Dropdown/list.d.ts +4 -1
  21. package/dist/components/Dropdown/list.d.ts.map +1 -1
  22. package/dist/components/Dropdown/list.js +10 -5
  23. package/dist/components/Dropdown/list.js.map +1 -1
  24. package/dist/components/Input/index.js +4 -4
  25. package/dist/components/Input/index.js.map +1 -1
  26. package/dist/components/Paging/index.d.ts +4 -1
  27. package/dist/components/Paging/index.d.ts.map +1 -1
  28. package/dist/components/Paging/index.js +8 -6
  29. package/dist/components/Paging/index.js.map +1 -1
  30. package/dist/components/Panel/index.d.ts +4 -1
  31. package/dist/components/Panel/index.d.ts.map +1 -1
  32. package/dist/components/Panel/index.js.map +1 -1
  33. package/dist/components/Table/cell.d.ts +12 -0
  34. package/dist/components/Table/cell.d.ts.map +1 -0
  35. package/dist/components/Table/cell.js +89 -0
  36. package/dist/components/Table/cell.js.map +1 -0
  37. package/dist/components/Table/header.d.ts +15 -2
  38. package/dist/components/Table/header.d.ts.map +1 -1
  39. package/dist/components/Table/header.js +31 -14
  40. package/dist/components/Table/header.js.map +1 -1
  41. package/dist/components/Table/headerCell.d.ts +8 -6
  42. package/dist/components/Table/headerCell.d.ts.map +1 -1
  43. package/dist/components/Table/headerCell.js +60 -51
  44. package/dist/components/Table/headerCell.js.map +1 -1
  45. package/dist/components/Table/helpers.d.ts +39 -1
  46. package/dist/components/Table/helpers.d.ts.map +1 -1
  47. package/dist/components/Table/helpers.js +145 -1
  48. package/dist/components/Table/helpers.js.map +1 -1
  49. package/dist/components/Table/index.d.ts +39 -25
  50. package/dist/components/Table/index.d.ts.map +1 -1
  51. package/dist/components/Table/index.js +139 -52
  52. package/dist/components/Table/index.js.map +1 -1
  53. package/dist/components/Table/row.d.ts +9 -4
  54. package/dist/components/Table/row.d.ts.map +1 -1
  55. package/dist/components/Table/row.js +30 -54
  56. package/dist/components/Table/row.js.map +1 -1
  57. package/dist/hooks/useQueryWithDelay.d.ts +8 -0
  58. package/dist/hooks/useQueryWithDelay.d.ts.map +1 -0
  59. package/dist/hooks/useQueryWithDelay.js +25 -0
  60. package/dist/hooks/useQueryWithDelay.js.map +1 -0
  61. package/dist/index.d.ts +3 -0
  62. package/dist/index.d.ts.map +1 -1
  63. package/dist/index.js +7 -1
  64. package/dist/index.js.map +1 -1
  65. package/package.json +1 -1
  66. package/src/components/Button/index.tsx +6 -1
  67. package/src/components/Collection/index.tsx +9 -15
  68. package/src/components/ControlGroup/index.tsx +10 -5
  69. package/src/components/Dropdown/index.tsx +9 -0
  70. package/src/components/Dropdown/list.tsx +18 -6
  71. package/src/components/Input/index.tsx +3 -3
  72. package/src/components/Paging/index.tsx +35 -13
  73. package/src/components/Panel/index.tsx +3 -1
  74. package/src/components/Table/cell.tsx +117 -0
  75. package/src/components/Table/header.tsx +102 -45
  76. package/src/components/Table/headerCell.tsx +123 -80
  77. package/src/components/Table/helpers.ts +206 -1
  78. package/src/components/Table/index.tsx +288 -90
  79. package/src/components/Table/row.tsx +47 -125
  80. package/src/hooks/useQueryWithDelay.ts +30 -0
  81. package/src/index.tsx +3 -0
  82. package/src/mock/tableData.ts +40 -20
  83. package/src/stories/Breadcrumbs/Breadcrumbs.stories.tsx +1 -1
  84. package/src/stories/Button/Button.stories.tsx +1 -1
  85. package/src/stories/Checkbox/Checkbox.stories.tsx +1 -1
  86. package/src/stories/Collection/Collection.stories.tsx +19 -1
  87. package/src/stories/Columns/Columns.stories.tsx +1 -1
  88. package/src/stories/Comment/Comment.stories.tsx +1 -1
  89. package/src/stories/ControlGroup/ControlGroup.stories.tsx +1 -1
  90. package/src/stories/Drawer/Drawer.stories.tsx +5 -5
  91. package/src/stories/Dropdown/Dropdown.stories.tsx +11 -1
  92. package/src/stories/Header/Header.stories.tsx +1 -1
  93. package/src/stories/Icon/Icon.stories.tsx +1 -1
  94. package/src/stories/Input/Input.stories.tsx +1 -1
  95. package/src/stories/Menu/Menu.stories.tsx +1 -1
  96. package/src/stories/Message/Message.stories.tsx +1 -1
  97. package/src/stories/Modal/Modal.stories.tsx +1 -1
  98. package/src/stories/MultiSelect/MultiSelect.stories.tsx +1 -1
  99. package/src/stories/Navbar/Navbar.stories.tsx +1 -1
  100. package/src/stories/Notifications/Interactive.stories.tsx +1 -1
  101. package/src/stories/Notifications/Notification.stories.tsx +1 -1
  102. package/src/stories/Notifications/Notifications.stories.tsx +1 -1
  103. package/src/stories/Paging/Paging.stories.tsx +6 -2
  104. package/src/stories/Panel/Panel.stories.tsx +5 -5
  105. package/src/stories/Paragraph/Paragraph.stories.tsx +1 -1
  106. package/src/stories/Popover/Popover.stories.tsx +2 -2
  107. package/src/stories/RadioGroup/RadioGroup.stories.tsx +1 -1
  108. package/src/stories/Sidebar/Sidebar.stories.tsx +2 -2
  109. package/src/stories/Spacer/Spacer.stories.tsx +1 -1
  110. package/src/stories/Spinner/Spinner.stories.tsx +1 -1
  111. package/src/stories/Table/Table.stories.tsx +277 -78
  112. package/src/stories/Tabs/Tabs.stories.tsx +1 -1
  113. package/src/stories/Tag/Tag.stories.tsx +1 -1
  114. package/src/stories/TextArea/TextArea.stories.tsx +2 -2
  115. package/src/stories/Tree/Tree.stories.tsx +2 -2
  116. package/src/stories/utils/args.ts +1 -1
  117. package/tests.json +1 -1
@@ -200,7 +200,7 @@ test('<Collection /> has infinite paging', () => {
200
200
  );
201
201
 
202
202
  expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(1);
203
- expect(document.querySelectorAll('.reqore-button').length).toBe(2);
203
+ expect(document.querySelectorAll('.reqore-button').length).toBe(3);
204
204
  expect(screen.getAllByText('90')).toBeTruthy();
205
205
 
206
206
  expect(document.querySelectorAll('.reqore-collection-item').length).toBe(10);
@@ -231,7 +231,7 @@ test('<Collection /> has custom paging', () => {
231
231
  );
232
232
 
233
233
  expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(1);
234
- expect(document.querySelectorAll('.reqore-button').length).toBe(2);
234
+ expect(document.querySelectorAll('.reqore-button').length).toBe(3);
235
235
  expect(document.querySelectorAll('.reqore-collection-item').length).toBe(50);
236
236
  expect(screen.getAllByText('Scroll to load more')).toBeTruthy();
237
237
  expect(screen.getAllByText('50')).toBeTruthy();
@@ -0,0 +1,47 @@
1
+ import {
2
+ getColumnsCount,
3
+ getOnlyShownColumns,
4
+ hasHiddenColumns,
5
+ updateColumnData,
6
+ } from '../../src/components/Table/helpers';
7
+ import { testColumns } from '../../src/mock/tableData';
8
+
9
+ test('Updates top level column width', () => {
10
+ const columns = [...testColumns];
11
+
12
+ expect(columns[0].width).toBe(50);
13
+
14
+ const newColumns = updateColumnData(columns, 'id', 'resizedWidth', 100);
15
+
16
+ expect(newColumns[0].width).toBe(50);
17
+ expect(newColumns[0].resizedWidth).toBe(100);
18
+ });
19
+
20
+ test('Updates group level column width', () => {
21
+ const columns = [...testColumns];
22
+
23
+ expect(columns[1].header!.columns![0].width).toBe(150);
24
+
25
+ const newColumns = updateColumnData(columns, 'firstName', 'resizedWidth', 250);
26
+
27
+ expect(newColumns[1].header!.columns![0].width).toBe(150);
28
+ expect(newColumns[1].header!.columns![0].resizedWidth).toBe(250);
29
+ });
30
+
31
+ test('Filters out hidden columns', () => {
32
+ const columns = [...testColumns];
33
+
34
+ expect(getColumnsCount(columns)).toBe(8);
35
+
36
+ columns[1].header!.columns![0].show = false;
37
+ columns[1].header!.columns![1].show = false;
38
+ columns[3].show = false;
39
+ columns[4].header!.columns![1].show = false;
40
+
41
+ const newColumns = getOnlyShownColumns(columns);
42
+
43
+ expect(getColumnsCount(newColumns)).toBe(4);
44
+ expect(hasHiddenColumns(columns)).toBe(true);
45
+ expect(hasHiddenColumns(newColumns)).toBe(false);
46
+ expect(newColumns[1].dataId).toBe('address');
47
+ });
@@ -256,14 +256,17 @@ test('Renders <Pagination /> as a list', () => {
256
256
  expect(document.querySelectorAll('.reqore-button').length).toBe(105);
257
257
  });
258
258
 
259
- test('Renders <Pagination /> with load more button', () => {
259
+ test('Renders <Pagination /> with load more button and no load all button', () => {
260
260
  jest.useFakeTimers();
261
261
 
262
262
  render(
263
263
  <ReqoreUIProvider>
264
264
  <ReqoreLayoutContent>
265
265
  <ReqoreContent>
266
- <Component pagingOptions={{ infinite: true }} />
266
+ <Component
267
+ pagingOptions={{ infinite: true }}
268
+ componentOptions={{ showLoadAllButton: false }}
269
+ />
267
270
  </ReqoreContent>
268
271
  </ReqoreLayoutContent>
269
272
  </ReqoreUIProvider>
@@ -284,6 +287,34 @@ test('Renders <Pagination /> with load more button', () => {
284
287
  expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(1);
285
288
  });
286
289
 
290
+ test('Renders <Pagination /> with load all button', () => {
291
+ jest.useFakeTimers();
292
+
293
+ render(
294
+ <ReqoreUIProvider>
295
+ <ReqoreLayoutContent>
296
+ <ReqoreContent>
297
+ <Component pagingOptions={{ infinite: true }} />
298
+ </ReqoreContent>
299
+ </ReqoreLayoutContent>
300
+ </ReqoreUIProvider>
301
+ );
302
+
303
+ mockAllIsIntersecting(true);
304
+
305
+ expect(document.querySelectorAll('.reqore-button').length).toBe(2);
306
+ // 12 because of the badge on the buttons
307
+ expect(document.querySelectorAll('.reqore-tag').length).toBe(12);
308
+
309
+ fireEvent.click(document.querySelectorAll('.reqore-button')[1]!);
310
+
311
+ jest.advanceTimersByTime(1);
312
+ // 21 because of the badge on the button
313
+ expect(document.querySelectorAll('.reqore-tag').length).toBe(1000);
314
+ // Pagination should still be there
315
+ expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(0);
316
+ });
317
+
287
318
  test('Renders <Pagination /> with load more button and auto load', () => {
288
319
  render(
289
320
  <ReqoreUIProvider>
@@ -298,9 +329,9 @@ test('Renders <Pagination /> with load more button and auto load', () => {
298
329
  </ReqoreUIProvider>
299
330
  );
300
331
 
301
- expect(document.querySelectorAll('.reqore-button').length).toBe(1);
332
+ expect(document.querySelectorAll('.reqore-button').length).toBe(2);
302
333
  // 11 because of the badge on the button
303
- expect(document.querySelectorAll('.reqore-tag').length).toBe(501);
334
+ expect(document.querySelectorAll('.reqore-tag').length).toBe(502);
304
335
 
305
336
  mockAllIsIntersecting(true);
306
337
 
@@ -1,7 +1,7 @@
1
1
  import { fireEvent, render } from '@testing-library/react';
2
2
  import React from 'react';
3
3
  import { ReqoreLayoutContent, ReqoreTable, ReqoreUIProvider } from '../src';
4
- import { IReqoreTableColumn, IReqoreTableSort } from '../src/components/Table';
4
+ import { IReqoreTableProps } from '../src/components/Table';
5
5
  import tableData from '../src/mock/tableData';
6
6
 
7
7
  test('Renders basic <Table /> properly', () => {
@@ -13,39 +13,44 @@ test('Renders basic <Table /> properly', () => {
13
13
  </ReqoreUIProvider>
14
14
  );
15
15
 
16
- expect(document.querySelectorAll('.reqore-table-header-cell').length).toBe(8);
16
+ expect(document.querySelectorAll('.reqore-table-column-group-header').length).toBe(2);
17
+ expect(document.querySelectorAll('.reqore-table-header-cell').length).toBe(10);
17
18
  expect(document.querySelectorAll('.reqore-table-row').length).toBe(10);
18
19
  });
19
20
 
20
21
  test('Renders <Table /> with grouped columns properly', () => {
21
- const data = {
22
+ const data: IReqoreTableProps = {
22
23
  ...tableData,
23
24
  columns: [
24
25
  {
25
26
  dataId: 'id',
26
- header: 'ID',
27
+ header: {
28
+ label: 'ID',
29
+ },
27
30
  width: 50,
28
31
  align: 'center',
29
32
  },
30
33
  {
31
- header: 'Name',
34
+ header: {
35
+ label: 'Name',
36
+ columns: [
37
+ { dataId: 'firstName', header: { label: 'First Name' }, width: 150, grow: 2 },
38
+ { dataId: 'lastName', header: { label: 'Last Name' }, width: 150, grow: 1 },
39
+ ],
40
+ },
32
41
  dataId: 'name',
33
42
  grow: 3,
34
- columns: [
35
- { dataId: 'firstName', header: 'First Name', width: 150, grow: 2 },
36
- { dataId: 'lastName', header: 'Last Name', width: 150, grow: 1 },
37
- ],
38
43
  },
39
- { dataId: 'address', header: 'Address', width: 300, grow: 2 },
44
+ { dataId: 'address', header: { label: 'Address' }, width: 300, grow: 2 },
40
45
  {
41
46
  dataId: 'age',
42
- header: 'Really long age header',
47
+ header: { label: 'Really long age header' },
43
48
  width: 50,
44
49
  align: 'center',
45
50
  },
46
- { dataId: 'occupation', header: 'Ocuppation', width: 200 },
47
- { dataId: 'group', header: 'Group', width: 150 },
48
- ] as IReqoreTableColumn[],
51
+ { dataId: 'occupation', header: { label: 'Ocuppation' }, width: 200 },
52
+ { dataId: 'group', header: { label: 'Group' }, width: 150 },
53
+ ],
49
54
  };
50
55
 
51
56
  render(
@@ -57,39 +62,43 @@ test('Renders <Table /> with grouped columns properly', () => {
57
62
  );
58
63
 
59
64
  expect(document.querySelectorAll('.reqore-table-column-group').length).toBe(1);
60
- expect(document.querySelectorAll('.reqore-table-header-cell').length).toBe(7);
65
+ expect(document.querySelectorAll('.reqore-table-header-cell').length).toBe(8);
61
66
  });
62
67
 
63
68
  test('Renders <Table /> with custom content', () => {
64
- const data = {
69
+ const data: IReqoreTableProps = {
65
70
  ...tableData,
66
71
  columns: [
67
72
  {
68
73
  dataId: 'id',
69
- header: 'ID',
74
+ header: { label: 'ID' },
70
75
  width: 50,
71
76
  align: 'center',
72
- content: ({ id }) => <span>ID {id}</span>,
77
+ cell: {
78
+ content: ({ id }) => <span>ID {id}</span>,
79
+ },
73
80
  },
74
81
  {
75
- header: 'Name',
82
+ header: {
83
+ label: 'Name',
84
+ columns: [
85
+ { dataId: 'firstName', header: { label: 'First Name' }, width: 150, grow: 2 },
86
+ { dataId: 'lastName', header: { label: 'Last Name' }, width: 150, grow: 1 },
87
+ ],
88
+ },
76
89
  dataId: 'name',
77
90
  grow: 3,
78
- columns: [
79
- { dataId: 'firstName', header: 'First Name', width: 150, grow: 2 },
80
- { dataId: 'lastName', header: 'Last Name', width: 150, grow: 1 },
81
- ],
82
91
  },
83
- { dataId: 'address', header: 'Address', width: 300, grow: 2 },
92
+ { dataId: 'address', header: { label: 'Address' }, width: 300, grow: 2 },
84
93
  {
85
94
  dataId: 'age',
86
- header: 'Really long age header',
95
+ header: { label: 'Really long age header' },
87
96
  width: 50,
88
97
  align: 'center',
89
98
  },
90
- { dataId: 'occupation', header: 'Ocuppation', width: 200 },
91
- { dataId: 'group', header: 'Group', width: 150 },
92
- ] as IReqoreTableColumn[],
99
+ { dataId: 'occupation', header: { label: 'Ocuppation' }, width: 200 },
100
+ { dataId: 'group', header: { label: 'Group' }, width: 150 },
101
+ ],
93
102
  };
94
103
 
95
104
  render(
@@ -101,54 +110,68 @@ test('Renders <Table /> with custom content', () => {
101
110
  );
102
111
 
103
112
  const firstRow = document.querySelector('.reqore-table-row');
104
- const idCell = firstRow.querySelector('.reqore-table-cell');
113
+ const idCell = firstRow!.querySelector('.reqore-table-cell');
105
114
 
106
- expect(idCell.textContent).toBe('ID 1');
115
+ expect(idCell!.textContent).toBe('ID 1');
107
116
  });
108
117
 
109
118
  test('Renders <Table /> with predefined content', () => {
110
- const data = {
119
+ const data: IReqoreTableProps = {
111
120
  ...tableData,
112
121
  columns: [
113
122
  {
114
123
  dataId: 'id',
115
- header: 'ID',
124
+ header: { label: 'ID' },
116
125
  width: 50,
117
126
  align: 'center',
118
- content: 'tag:info',
127
+ cell: {
128
+ content: 'tag:info',
129
+ },
119
130
  },
120
131
  {
121
- header: 'Name',
132
+ header: {
133
+ label: 'Name',
134
+ columns: [
135
+ {
136
+ dataId: 'firstName',
137
+ header: { label: 'First Name' },
138
+ width: 150,
139
+ grow: 2,
140
+ cell: {
141
+ content: 'tag:#000000',
142
+ },
143
+ },
144
+ {
145
+ dataId: 'lastName',
146
+ header: { label: 'Last Name' },
147
+ width: 150,
148
+ grow: 1,
149
+ cell: {
150
+ content: 'title:success',
151
+ },
152
+ },
153
+ ],
154
+ },
122
155
  dataId: 'name',
123
156
  grow: 3,
124
- columns: [
125
- {
126
- dataId: 'firstName',
127
- header: 'First Name',
128
- width: 150,
129
- grow: 2,
130
- content: 'tag:#000000',
131
- },
132
- {
133
- dataId: 'lastName',
134
- header: 'Last Name',
135
- width: 150,
136
- grow: 1,
137
- content: 'title:success',
138
- },
139
- ],
140
157
  },
141
- { dataId: 'address', header: 'Address', width: 300, grow: 2, content: 'text:warning' },
158
+ {
159
+ dataId: 'address',
160
+ header: { label: 'Address' },
161
+ width: 300,
162
+ grow: 2,
163
+ cell: { content: 'text:warning' },
164
+ },
142
165
  {
143
166
  dataId: 'age',
144
- header: 'Really long age header',
167
+ header: { label: 'Really long age header' },
145
168
  width: 50,
146
169
  align: 'center',
147
170
  },
148
- { dataId: 'occupation', header: 'Ocuppation', width: 200 },
149
- { dataId: 'group', header: 'Group', width: 150 },
150
- { dataId: 'date', header: 'Date', content: 'time-ago' },
151
- ] as IReqoreTableColumn[],
171
+ { dataId: 'occupation', header: { label: 'Ocuppation' }, width: 200 },
172
+ { dataId: 'group', header: { label: 'Group' }, width: 150 },
173
+ { dataId: 'date', header: { label: 'Date' }, cell: { content: 'time-ago' } },
174
+ ],
152
175
  };
153
176
 
154
177
  render(
@@ -161,11 +184,11 @@ test('Renders <Table /> with predefined content', () => {
161
184
 
162
185
  const firstRow = document.querySelector('.reqore-table-row');
163
186
 
164
- const idCell = firstRow.querySelectorAll('.reqore-table-cell')[0];
165
- const firstNameCell = firstRow.querySelectorAll('.reqore-table-cell')[1];
166
- const lastNameCell = firstRow.querySelectorAll('.reqore-table-cell')[2];
167
- const addressCell = firstRow.querySelectorAll('.reqore-table-cell')[3];
168
- const dateCell = firstRow.querySelectorAll('.reqore-table-cell')[7];
187
+ const idCell = firstRow!.querySelectorAll('.reqore-table-cell')[0];
188
+ const firstNameCell = firstRow!.querySelectorAll('.reqore-table-cell')[1];
189
+ const lastNameCell = firstRow!.querySelectorAll('.reqore-table-cell')[2];
190
+ const addressCell = firstRow!.querySelectorAll('.reqore-table-cell')[3];
191
+ const dateCell = firstRow!.querySelectorAll('.reqore-table-cell')[7];
169
192
 
170
193
  expect(idCell.querySelector('.reqore-tag')).toBeTruthy();
171
194
  expect(firstNameCell.querySelector('.reqore-tag')).toBeTruthy();
@@ -175,33 +198,33 @@ test('Renders <Table /> with predefined content', () => {
175
198
  });
176
199
 
177
200
  test('Sorting on <Table /> works properly', () => {
178
- const data = {
201
+ const data: IReqoreTableProps = {
179
202
  ...tableData,
180
203
  columns: [
181
204
  {
182
205
  dataId: 'id',
183
- header: 'ID',
206
+ header: { label: 'ID' },
184
207
  width: 50,
185
208
  align: 'center',
186
209
  sortable: true,
187
210
  },
188
- { dataId: 'firstName', header: 'First Name', width: 150 },
189
- { dataId: 'lastName', header: 'Last Name', width: 150, sortable: true },
190
- { dataId: 'address', header: 'Address', width: 300, grow: 2 },
211
+ { dataId: 'firstName', header: { label: 'First Name' }, width: 150 },
212
+ { dataId: 'lastName', header: { label: 'Last Name' }, width: 150, sortable: true },
213
+ { dataId: 'address', header: { label: 'Address' }, width: 300, grow: 2 },
191
214
  {
192
215
  dataId: 'age',
193
- header: 'Really long age header',
216
+ header: { label: 'Really long age header' },
194
217
  width: 50,
195
218
  align: 'center',
196
219
  sortable: true,
197
220
  },
198
- { dataId: 'occupation', header: 'Ocuppation', width: 200 },
199
- { dataId: 'group', header: 'Group', width: 150 },
200
- ] as IReqoreTableColumn[],
221
+ { dataId: 'occupation', header: { label: 'Ocuppation' }, width: 200 },
222
+ { dataId: 'group', header: { label: 'Group' }, width: 150 },
223
+ ],
201
224
  sort: {
202
225
  by: 'id',
203
226
  direction: 'desc',
204
- } as IReqoreTableSort,
227
+ },
205
228
  };
206
229
 
207
230
  const fn = jest.fn();
@@ -215,16 +238,16 @@ test('Sorting on <Table /> works properly', () => {
215
238
  );
216
239
 
217
240
  const firstRow = document.querySelector('.reqore-table-row');
218
- const idCell = firstRow.querySelector('.reqore-table-cell');
241
+ const idCell = firstRow!.querySelector('.reqore-table-cell');
219
242
 
220
- expect(idCell.textContent).toBe('1000');
243
+ expect(idCell!.textContent).toBe('1000');
221
244
 
222
245
  const lastNameHeaderCell = document.querySelectorAll('.reqore-table-header-cell')[2];
223
246
 
224
247
  fireEvent.click(lastNameHeaderCell);
225
248
  expect(fn).toHaveBeenCalledWith({ by: 'lastName', direction: 'desc' });
226
249
 
227
- const lastNameCell = firstRow.querySelectorAll('.reqore-table-cell')[2];
250
+ const lastNameCell = firstRow!.querySelectorAll('.reqore-table-cell')[2];
228
251
 
229
252
  expect(lastNameCell.textContent).toBe('Zold');
230
253
 
@@ -232,7 +255,7 @@ test('Sorting on <Table /> works properly', () => {
232
255
 
233
256
  expect(fn).toHaveBeenLastCalledWith({ by: 'lastName', direction: 'asc' });
234
257
  expect(lastNameCell.textContent).toBe('Abbess');
235
- expect(idCell.textContent).toBe('543');
258
+ expect(idCell!.textContent).toBe('543');
236
259
  });
237
260
 
238
261
  test('Rows on <Table /> can be selected', () => {
@@ -252,16 +275,16 @@ test('Rows on <Table /> can be selected', () => {
252
275
  );
253
276
 
254
277
  const firstRow = document.querySelector('.reqore-table-row');
255
- const firstCheckCell = firstRow.querySelector('.reqore-table-cell');
278
+ const firstCheckCell = firstRow!.querySelector('.reqore-table-cell');
256
279
 
257
- fireEvent.click(firstCheckCell);
280
+ fireEvent.click(firstCheckCell!);
258
281
 
259
282
  expect(fn).toHaveBeenCalledWith([1]);
260
283
 
261
284
  const secondRow = document.querySelectorAll('.reqore-table-row')[1];
262
285
  const secondCheckCell = secondRow.querySelector('.reqore-table-cell');
263
286
 
264
- fireEvent.click(secondCheckCell);
287
+ fireEvent.click(secondCheckCell!);
265
288
 
266
289
  expect(fn).toHaveBeenLastCalledWith([1, 2]);
267
290
  });
@@ -285,18 +308,18 @@ test('Rows on <Table /> cannot be selected if _selectId is missing', () => {
285
308
  const thirdRow = document.querySelectorAll('.reqore-table-row')[2];
286
309
  const thirdCheckCell = thirdRow.querySelector('.reqore-table-cell');
287
310
 
288
- fireEvent.click(thirdCheckCell);
311
+ fireEvent.click(thirdCheckCell!);
289
312
 
290
313
  const fourthRow = document.querySelectorAll('.reqore-table-row')[3];
291
314
  const fourthCheckCell = fourthRow.querySelector('.reqore-table-cell');
292
315
 
293
- fireEvent.click(fourthCheckCell);
316
+ fireEvent.click(fourthCheckCell!);
294
317
 
295
318
  expect(fn).toHaveBeenCalledTimes(1);
296
319
  });
297
320
 
298
321
  test('Rows on <Table /> are all selected/deselected when clicking on header', () => {
299
- const data = {
322
+ const data: IReqoreTableProps = {
300
323
  ...tableData,
301
324
  selectable: true,
302
325
  };
@@ -312,91 +335,103 @@ test('Rows on <Table /> are all selected/deselected when clicking on header', ()
312
335
  );
313
336
 
314
337
  const header = document.querySelector('.reqore-table-header-wrapper');
315
- const firstHeaderCell = header.querySelector('.reqore-table-header-cell');
338
+ const firstHeaderCell = header!.querySelector('.reqore-table-header-cell');
316
339
 
317
- fireEvent.click(firstHeaderCell);
340
+ fireEvent.click(firstHeaderCell!);
318
341
 
319
- const selectableData: number[] = tableData.data
342
+ const selectableData = tableData.data
320
343
  .filter((datum) => datum._selectId ?? false)
321
344
  .map((datum) => datum._selectId);
322
345
 
323
346
  expect(fn).toHaveBeenCalledWith(selectableData);
324
347
 
325
- fireEvent.click(firstHeaderCell);
348
+ fireEvent.click(firstHeaderCell!);
326
349
 
327
350
  expect(fn).toHaveBeenLastCalledWith([]);
328
351
 
329
352
  const firstRow = document.querySelector('.reqore-table-row');
330
- const firstCheckCell = firstRow.querySelector('.reqore-table-cell');
353
+ const firstCheckCell = firstRow!.querySelector('.reqore-table-cell');
331
354
 
332
- fireEvent.click(firstCheckCell);
333
- fireEvent.click(firstHeaderCell);
355
+ fireEvent.click(firstCheckCell!);
356
+ fireEvent.click(firstHeaderCell!);
334
357
 
335
358
  expect(fn).toHaveBeenLastCalledWith(selectableData);
336
359
  });
337
360
 
338
361
  test('Cells on <Table /> are interactive', () => {
339
362
  const fn = jest.fn();
340
- const data = {
363
+ const data: IReqoreTableProps = {
341
364
  ...tableData,
342
365
  columns: [
343
366
  {
344
367
  dataId: 'id',
345
- header: 'ID',
368
+ header: { label: 'ID', tooltip: 'Custom ID tooltip nice' },
346
369
  width: 50,
347
370
  align: 'center',
348
371
  sortable: true,
349
- tooltip: 'Custom ID tooltip nice',
350
- onCellClick: ({ id }) => {
351
- fn(id);
372
+ cell: {
373
+ onClick: ({ id }) => {
374
+ fn(id);
375
+ },
352
376
  },
353
377
  },
354
378
  {
355
- header: 'Name',
379
+ header: {
380
+ label: 'Name',
381
+ columns: [
382
+ {
383
+ dataId: 'firstName',
384
+ header: {
385
+ label: 'First Name',
386
+ icon: 'SlideshowLine',
387
+ effect: {
388
+ gradient: {
389
+ colors: {
390
+ 0: 'success',
391
+ 100: 'info',
392
+ },
393
+ },
394
+ },
395
+ },
396
+ width: 150,
397
+ grow: 2,
398
+ },
399
+ {
400
+ dataId: 'lastName',
401
+ header: { label: 'Last Name', icon: 'SlideshowLine' },
402
+ width: 150,
403
+ grow: 1,
404
+ sortable: true,
405
+ },
406
+ ],
407
+ },
356
408
  dataId: 'name',
357
409
  grow: 3,
358
- columns: [
359
- {
360
- icon: 'SlideshowLine',
361
- dataId: 'firstName',
362
- header: 'First Name',
363
- width: 150,
364
- grow: 2,
365
- },
366
- {
367
- icon: 'SlideshowLine',
368
- dataId: 'lastName',
369
- header: 'Last Name',
370
- width: 150,
371
- grow: 1,
372
- sortable: true,
373
- },
374
- ],
375
410
  },
376
411
  {
377
412
  dataId: 'address',
378
- header: 'Address',
413
+ header: { label: 'Address', onClick: () => alert('clicked address') },
379
414
  width: 300,
380
415
  grow: 2,
381
- onClick: () => alert('clicked address'),
382
416
  },
383
417
  {
384
- icon: 'User4Line',
385
418
  dataId: 'age',
386
- header: 'Really long age header',
419
+ header: { label: 'Really long age header', icon: 'User4Line' },
387
420
  width: 50,
388
421
  align: 'center',
389
422
  sortable: true,
390
423
  },
391
424
  {
392
- header: 'Data',
425
+ header: {
426
+ label: 'Data',
427
+ columns: [
428
+ { dataId: 'occupation', header: { label: 'Ocuppation' }, width: 200 },
429
+ { dataId: 'group', header: { label: 'Groups' }, width: 150 },
430
+ ],
431
+ },
393
432
  dataId: 'data',
394
- columns: [
395
- { dataId: 'occupation', header: 'Ocuppation', width: 200 },
396
- { dataId: 'group', header: 'Groups', width: 150 },
397
- ],
398
433
  },
399
- ] as IReqoreTableColumn[],
434
+ ],
400
435
  };
401
436
 
402
437
  render(
@@ -408,9 +443,9 @@ test('Cells on <Table /> are interactive', () => {
408
443
  );
409
444
 
410
445
  const firstRow = document.querySelector('.reqore-table-row');
411
- const firstCheckCell = firstRow.querySelector('.reqore-table-cell');
446
+ const firstCheckCell = firstRow!.querySelector('.reqore-table-cell');
412
447
 
413
- fireEvent.click(firstCheckCell);
448
+ fireEvent.click(firstCheckCell!);
414
449
 
415
450
  expect(fn).toHaveBeenCalledWith(1);
416
451
  });
@@ -30,6 +30,8 @@ export interface IReqoreButtonProps extends React.HTMLAttributes<HTMLButtonEleme
30
30
  descriptionEffect?: IReqoreEffect;
31
31
  label?: React.HTMLAttributes<HTMLButtonElement>['children'];
32
32
  as?: string | React.ElementType;
33
+ grow?: 1 | 2 | 3 | 4;
34
+ rounded?: boolean;
33
35
  }
34
36
  export interface IReqoreButtonStyle extends Omit<IReqoreButtonProps, 'intent'> {
35
37
  theme: IReqoreTheme;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"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"}