@qoretechnologies/reqore 0.21.0 → 0.22.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/__tests__/table.test.tsx +20 -18
- package/dist/components/Table/index.d.ts +7 -8
- package/dist/components/Table/index.d.ts.map +1 -1
- package/dist/components/Table/index.js +5 -4
- package/dist/components/Table/index.js.map +1 -1
- package/dist/types/global.d.ts +14 -0
- package/dist/types/global.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/Table/index.tsx +18 -10
- package/src/mock/data.json +11000 -0
- package/src/mock/tableData.ts +5 -14
- package/src/stories/Table/Table.stories.tsx +12 -1
- package/src/types/global.ts +15 -0
- package/tests.json +1 -1
package/__tests__/table.test.tsx
CHANGED
|
@@ -103,7 +103,7 @@ test('Renders <Table /> with custom content', () => {
|
|
|
103
103
|
const firstRow = document.querySelector('.reqore-table-row');
|
|
104
104
|
const idCell = firstRow.querySelector('.reqore-table-cell');
|
|
105
105
|
|
|
106
|
-
expect(idCell.textContent).toBe('ID
|
|
106
|
+
expect(idCell.textContent).toBe('ID 1');
|
|
107
107
|
});
|
|
108
108
|
|
|
109
109
|
test('Renders <Table /> with predefined content', () => {
|
|
@@ -186,7 +186,7 @@ test('Sorting on <Table /> works properly', () => {
|
|
|
186
186
|
sortable: true,
|
|
187
187
|
},
|
|
188
188
|
{ dataId: 'firstName', header: 'First Name', width: 150 },
|
|
189
|
-
{ dataId: 'lastName', header: 'Last Name', width: 150 },
|
|
189
|
+
{ dataId: 'lastName', header: 'Last Name', width: 150, sortable: true },
|
|
190
190
|
{ dataId: 'address', header: 'Address', width: 300, grow: 2 },
|
|
191
191
|
{
|
|
192
192
|
dataId: 'age',
|
|
@@ -217,20 +217,22 @@ test('Sorting on <Table /> works properly', () => {
|
|
|
217
217
|
const firstRow = document.querySelector('.reqore-table-row');
|
|
218
218
|
const idCell = firstRow.querySelector('.reqore-table-cell');
|
|
219
219
|
|
|
220
|
-
expect(idCell.textContent).toBe('
|
|
220
|
+
expect(idCell.textContent).toBe('1000');
|
|
221
221
|
|
|
222
|
-
|
|
222
|
+
const lastNameHeaderCell = document.querySelectorAll('.reqore-table-header-cell')[2];
|
|
223
223
|
|
|
224
|
-
|
|
224
|
+
fireEvent.click(lastNameHeaderCell);
|
|
225
|
+
expect(fn).toHaveBeenCalledWith({ by: 'lastName', direction: 'desc' });
|
|
225
226
|
|
|
226
|
-
|
|
227
|
-
|
|
227
|
+
const lastNameCell = firstRow.querySelectorAll('.reqore-table-cell')[2];
|
|
228
|
+
|
|
229
|
+
expect(lastNameCell.textContent).toBe('Zold');
|
|
228
230
|
|
|
229
|
-
fireEvent.click(document.querySelectorAll('.reqore-table-header-cell')[
|
|
231
|
+
fireEvent.click(document.querySelectorAll('.reqore-table-header-cell')[2]);
|
|
230
232
|
|
|
231
|
-
expect(fn).toHaveBeenLastCalledWith({ by: '
|
|
232
|
-
expect(
|
|
233
|
-
expect(idCell.textContent).toBe('
|
|
233
|
+
expect(fn).toHaveBeenLastCalledWith({ by: 'lastName', direction: 'asc' });
|
|
234
|
+
expect(lastNameCell.textContent).toBe('Abbess');
|
|
235
|
+
expect(idCell.textContent).toBe('543');
|
|
234
236
|
});
|
|
235
237
|
|
|
236
238
|
test('Rows on <Table /> can be selected', () => {
|
|
@@ -254,14 +256,14 @@ test('Rows on <Table /> can be selected', () => {
|
|
|
254
256
|
|
|
255
257
|
fireEvent.click(firstCheckCell);
|
|
256
258
|
|
|
257
|
-
expect(fn).toHaveBeenCalledWith([
|
|
259
|
+
expect(fn).toHaveBeenCalledWith([1]);
|
|
258
260
|
|
|
259
261
|
const secondRow = document.querySelectorAll('.reqore-table-row')[1];
|
|
260
262
|
const secondCheckCell = secondRow.querySelector('.reqore-table-cell');
|
|
261
263
|
|
|
262
264
|
fireEvent.click(secondCheckCell);
|
|
263
265
|
|
|
264
|
-
expect(fn).toHaveBeenLastCalledWith([
|
|
266
|
+
expect(fn).toHaveBeenLastCalledWith([1, 2]);
|
|
265
267
|
});
|
|
266
268
|
|
|
267
269
|
test('Rows on <Table /> cannot be selected if _selectId is missing', () => {
|
|
@@ -280,10 +282,10 @@ test('Rows on <Table /> cannot be selected if _selectId is missing', () => {
|
|
|
280
282
|
</ReqoreUIProvider>
|
|
281
283
|
);
|
|
282
284
|
|
|
283
|
-
const
|
|
284
|
-
const
|
|
285
|
+
const thirdRow = document.querySelectorAll('.reqore-table-row')[2];
|
|
286
|
+
const thirdCheckCell = thirdRow.querySelector('.reqore-table-cell');
|
|
285
287
|
|
|
286
|
-
fireEvent.click(
|
|
288
|
+
fireEvent.click(thirdCheckCell);
|
|
287
289
|
|
|
288
290
|
const fourthRow = document.querySelectorAll('.reqore-table-row')[3];
|
|
289
291
|
const fourthCheckCell = fourthRow.querySelector('.reqore-table-cell');
|
|
@@ -314,7 +316,7 @@ test('Rows on <Table /> are all selected/deselected when clicking on header', ()
|
|
|
314
316
|
|
|
315
317
|
fireEvent.click(firstHeaderCell);
|
|
316
318
|
|
|
317
|
-
const selectableData:
|
|
319
|
+
const selectableData: number[] = tableData.data
|
|
318
320
|
.filter((datum) => datum._selectId ?? false)
|
|
319
321
|
.map((datum) => datum._selectId);
|
|
320
322
|
|
|
@@ -410,5 +412,5 @@ test('Cells on <Table /> are interactive', () => {
|
|
|
410
412
|
|
|
411
413
|
fireEvent.click(firstCheckCell);
|
|
412
414
|
|
|
413
|
-
expect(fn).toHaveBeenCalledWith(
|
|
415
|
+
expect(fn).toHaveBeenCalledWith(1);
|
|
414
416
|
});
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TSizes } from '../../constants/sizes';
|
|
3
|
-
import {
|
|
3
|
+
import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
|
|
4
|
+
import { IReqoreIntent, IWithReqoreCustomTheme, IWithReqoreFlat } from '../../types/global';
|
|
4
5
|
import { IReqoreIconName } from '../../types/icons';
|
|
5
6
|
export declare type TReqoreTableColumnContent = React.FC<{
|
|
6
7
|
[key: string]: any;
|
|
7
8
|
_selectId?: string;
|
|
8
9
|
}> | 'time-ago' | 'tag' | `tag:${TReqoreIntent}` | `tag:#${string}` | 'title' | `title:${TReqoreIntent}` | 'text' | `text:${TReqoreIntent}`;
|
|
9
|
-
export interface IReqoreTableColumn {
|
|
10
|
+
export interface IReqoreTableColumn extends IReqoreIntent {
|
|
10
11
|
dataId: string;
|
|
11
12
|
header?: string | JSX.Element;
|
|
12
13
|
grow?: 1 | 2 | 3 | 4;
|
|
@@ -19,7 +20,6 @@ export interface IReqoreTableColumn {
|
|
|
19
20
|
icon?: IReqoreIconName;
|
|
20
21
|
iconSize?: string;
|
|
21
22
|
tooltip?: string;
|
|
22
|
-
intent?: TReqoreIntent;
|
|
23
23
|
cellTooltip?: (data: {
|
|
24
24
|
[key: string]: any;
|
|
25
25
|
_selectId?: string;
|
|
@@ -37,7 +37,7 @@ export interface IReqoreTableRowData {
|
|
|
37
37
|
}
|
|
38
38
|
export declare type IReqoreTableRowClick = (data: IReqoreTableRowData) => void;
|
|
39
39
|
export declare type IReqoreTableData = IReqoreTableRowData[];
|
|
40
|
-
export interface IReqoreTableProps extends React.HTMLAttributes<HTMLDivElement
|
|
40
|
+
export interface IReqoreTableProps extends React.HTMLAttributes<HTMLDivElement>, IReqoreIntent, IWithReqoreFlat, IWithReqoreCustomTheme {
|
|
41
41
|
columns: IReqoreTableColumn[];
|
|
42
42
|
data?: IReqoreTableData;
|
|
43
43
|
className?: string;
|
|
@@ -52,15 +52,14 @@ export interface IReqoreTableProps extends React.HTMLAttributes<HTMLDivElement>
|
|
|
52
52
|
onSelectedChange?: (selected?: any[]) => void;
|
|
53
53
|
selectToggleTooltip?: string;
|
|
54
54
|
onRowClick?: IReqoreTableRowClick;
|
|
55
|
-
customTheme?: IReqoreCustomTheme;
|
|
56
|
-
intent?: TReqoreIntent;
|
|
57
55
|
rounded?: boolean;
|
|
58
|
-
flat?: boolean;
|
|
59
56
|
size?: TSizes;
|
|
57
|
+
fill?: boolean;
|
|
60
58
|
}
|
|
61
59
|
export interface IReqoreTableStyle {
|
|
62
60
|
theme: IReqoreTheme;
|
|
63
61
|
width?: number;
|
|
62
|
+
fill?: number;
|
|
64
63
|
striped?: boolean;
|
|
65
64
|
selectable?: boolean;
|
|
66
65
|
rounded?: boolean;
|
|
@@ -70,6 +69,6 @@ export interface IReqoreTableSort {
|
|
|
70
69
|
by?: string;
|
|
71
70
|
direction?: 'asc' | 'desc';
|
|
72
71
|
}
|
|
73
|
-
declare const ReqoreTable: ({ className, height, width, columns, data, sort, onSortChange, selectable, selected, onSelectedChange, selectToggleTooltip, customTheme, rounded, onRowClick, striped, selectedRowIntent, size, intent, ...rest }: IReqoreTableProps) => JSX.Element;
|
|
72
|
+
declare const ReqoreTable: ({ className, height, width, columns, data, sort, onSortChange, selectable, selected, onSelectedChange, selectToggleTooltip, customTheme, rounded, onRowClick, striped, selectedRowIntent, size, intent, fill, ...rest }: IReqoreTableProps) => JSX.Element;
|
|
74
73
|
export default ReqoreTable;
|
|
75
74
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAoB,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -76,19 +76,20 @@ var header_1 = __importStar(require("./header"));
|
|
|
76
76
|
var headerCell_1 = require("./headerCell");
|
|
77
77
|
var helpers_1 = require("./helpers");
|
|
78
78
|
var StyledTableWrapper = styled_components_1["default"].div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
79
|
-
var theme = _a.theme, width = _a.width, rounded = _a.rounded, flat = _a.flat;
|
|
80
|
-
return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", ";\n\n position: relative;\n clear: both;\n overflow: hidden;\n z-index: 1;\n\n display: flex;\n flex-flow: column;\n\n border-radius: ", ";\n\n background-color: ", ";\n color: ", ";\n\n ", "\n "], ["\n width: ", ";\n\n position: relative;\n clear: both;\n overflow: hidden;\n z-index: 1;\n\n display: flex;\n flex-flow: column;\n\n border-radius: ", ";\n\n background-color: ", ";\n color: ", ";\n\n ", "\n "])), width ? "".concat(width, "px") : '100%', rounded ? '10px' : undefined, theme.main, (0, colors_1.getReadableColor)(theme, undefined, undefined, true), !flat && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", ", ", " {\n ", "\n }\n "], ["\n ", ", ", " {\n ", "\n }\n "])), headerCell_1.StyledTableHeader, header_1.StyledColumnGroupHeader, function (_a) {
|
|
79
|
+
var theme = _a.theme, width = _a.width, rounded = _a.rounded, flat = _a.flat, fill = _a.fill;
|
|
80
|
+
return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n\n position: relative;\n clear: both;\n overflow: hidden;\n z-index: 1;\n\n display: flex;\n flex-flow: column;\n\n border-radius: ", ";\n\n background-color: ", ";\n color: ", ";\n\n ", "\n "], ["\n width: ", ";\n height: ", ";\n\n position: relative;\n clear: both;\n overflow: hidden;\n z-index: 1;\n\n display: flex;\n flex-flow: column;\n\n border-radius: ", ";\n\n background-color: ", ";\n color: ", ";\n\n ", "\n "])), width ? "".concat(width, "px") : '100%', fill ? '100%' : 'auto', rounded ? '10px' : undefined, theme.main, (0, colors_1.getReadableColor)(theme, undefined, undefined, true), !flat && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", ", ", " {\n ", "\n }\n "], ["\n ", ", ", " {\n ", "\n }\n "])), headerCell_1.StyledTableHeader, header_1.StyledColumnGroupHeader, function (_a) {
|
|
81
81
|
var theme = _a.theme;
|
|
82
82
|
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n "], ["\n border-bottom: 1px solid ", ";\n "])), (0, colors_1.changeLightness)(theme.main, 0.07));
|
|
83
83
|
}));
|
|
84
84
|
});
|
|
85
85
|
var ReqoreTable = function (_a) {
|
|
86
|
-
var className = _a.className, _b = _a.height, height = _b === void 0 ? 300 : _b, width = _a.width, columns = _a.columns, _c = _a.data, data = _c === void 0 ? [] : _c, sort = _a.sort, onSortChange = _a.onSortChange, selectable = _a.selectable, selected = _a.selected, onSelectedChange = _a.onSelectedChange, selectToggleTooltip = _a.selectToggleTooltip, customTheme = _a.customTheme, rounded = _a.rounded, onRowClick = _a.onRowClick, striped = _a.striped, selectedRowIntent = _a.selectedRowIntent, size = _a.size, intent = _a.intent, rest = __rest(_a, ["className", "height", "width", "columns", "data", "sort", "onSortChange", "selectable", "selected", "onSelectedChange", "selectToggleTooltip", "customTheme", "rounded", "onRowClick", "striped", "selectedRowIntent", "size", "intent"]);
|
|
86
|
+
var className = _a.className, _b = _a.height, height = _b === void 0 ? 300 : _b, width = _a.width, columns = _a.columns, _c = _a.data, data = _c === void 0 ? [] : _c, sort = _a.sort, onSortChange = _a.onSortChange, selectable = _a.selectable, selected = _a.selected, onSelectedChange = _a.onSelectedChange, selectToggleTooltip = _a.selectToggleTooltip, customTheme = _a.customTheme, rounded = _a.rounded, onRowClick = _a.onRowClick, striped = _a.striped, selectedRowIntent = _a.selectedRowIntent, size = _a.size, intent = _a.intent, fill = _a.fill, rest = __rest(_a, ["className", "height", "width", "columns", "data", "sort", "onSortChange", "selectable", "selected", "onSelectedChange", "selectToggleTooltip", "customTheme", "rounded", "onRowClick", "striped", "selectedRowIntent", "size", "intent", "fill"]);
|
|
87
87
|
var _d = (0, react_1.useState)(0), leftScroll = _d[0], setLeftScroll = _d[1];
|
|
88
88
|
var _e = (0, react_1.useState)(data || []), _data = _e[0], setData = _e[1];
|
|
89
89
|
var _f = (0, react_1.useState)((0, helpers_1.fixSort)(sort)), _sort = _f[0], setSort = _f[1];
|
|
90
90
|
var _g = (0, react_1.useState)([]), _selected = _g[0], setSelected = _g[1];
|
|
91
91
|
var _h = (0, react_1.useState)('none'), _selectedQuant = _h[0], setSelectedQuant = _h[1];
|
|
92
|
+
var _j = (0, react_use_1.useMeasure)(), wrapperRef = _j[0], sizes = _j[1];
|
|
92
93
|
var theme = (0, useTheme_1.useReqoreTheme)('main', customTheme, intent);
|
|
93
94
|
(0, react_use_1.useUpdateEffect)(function () {
|
|
94
95
|
if (onSortChange) {
|
|
@@ -158,7 +159,7 @@ var ReqoreTable = function (_a) {
|
|
|
158
159
|
}
|
|
159
160
|
}
|
|
160
161
|
};
|
|
161
|
-
return ((0, jsx_runtime_1.jsx)(ThemeProvider_1["default"], __assign({ theme: theme }, { children: (0, jsx_runtime_1.jsxs)(StyledTableWrapper, __assign({}, rest, { className: "".concat(className || '', " reqore-table"), rounded: rounded, width: width }, { children: [(0, jsx_runtime_1.jsx)(header_1["default"], { columns: columns, leftScroll: leftScroll, onSortChange: handleSortChange, sortData: _sort, selectable: selectable, selectedQuant: _selectedQuant, onToggleSelectClick: handleToggleSelectClick, hasVerticalScroll: (0, lodash_1.size)(_data) * sizes_1.TABLE_SIZE_TO_PX[size] > height, selectToggleTooltip: selectToggleTooltip }), (0, jsx_runtime_1.jsx)(body_1["default"], { data: _sort ? (0, helpers_1.sortTableData)(_data, _sort) : _data, columns: columns, setLeftScroll: setLeftScroll, height: height, selectable: selectable, onSelectClick: handleSelectClick, onRowClick: onRowClick, selected: _selected, selectedRowIntent: selectedRowIntent, size: size, striped: striped, flat: rest.flat })] })) })));
|
|
162
|
+
return ((0, jsx_runtime_1.jsx)(ThemeProvider_1["default"], __assign({ theme: theme }, { children: (0, jsx_runtime_1.jsxs)(StyledTableWrapper, __assign({}, rest, { fill: fill, className: "".concat(className || '', " reqore-table"), rounded: rounded, width: width, ref: wrapperRef }, { children: [(0, jsx_runtime_1.jsx)(header_1["default"], { columns: columns, leftScroll: leftScroll, onSortChange: handleSortChange, sortData: _sort, selectable: selectable, selectedQuant: _selectedQuant, onToggleSelectClick: handleToggleSelectClick, hasVerticalScroll: (0, lodash_1.size)(_data) * sizes_1.TABLE_SIZE_TO_PX[size] > height, selectToggleTooltip: selectToggleTooltip }), (0, jsx_runtime_1.jsx)(body_1["default"], { data: _sort ? (0, helpers_1.sortTableData)(_data, _sort) : _data, columns: columns, setLeftScroll: setLeftScroll, height: fill ? sizes.height : height, selectable: selectable, onSelectClick: handleSelectClick, onRowClick: onRowClick, selected: _selected, selectedRowIntent: selectedRowIntent, size: size, striped: striped, flat: rest.flat })] })) })));
|
|
162
163
|
};
|
|
163
164
|
exports["default"] = ReqoreTable;
|
|
164
165
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,WAAW;AACX,iCAAuC;AACvC,+BAAwC;AACxC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"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"}
|
package/dist/types/global.d.ts
CHANGED
|
@@ -72,6 +72,20 @@ export interface IWithReqoreTooltip {
|
|
|
72
72
|
*/
|
|
73
73
|
tooltip?: string | IReqoreTooltip;
|
|
74
74
|
}
|
|
75
|
+
export interface IWithReqoreFlat {
|
|
76
|
+
/**
|
|
77
|
+
* If true, the component will be flat
|
|
78
|
+
* @default false
|
|
79
|
+
* @type boolean
|
|
80
|
+
* @memberof IWithReqoreFlat
|
|
81
|
+
* @example
|
|
82
|
+
* <ReqoreInput flat />
|
|
83
|
+
* <ReqoreInput flat={true} />
|
|
84
|
+
* <ReqoreInput flat={false} />
|
|
85
|
+
*
|
|
86
|
+
*/
|
|
87
|
+
flat?: boolean;
|
|
88
|
+
}
|
|
75
89
|
export interface IReqoreTooltip extends IPopoverOptions {
|
|
76
90
|
}
|
|
77
91
|
export declare type TReqoreTooltipProp = string | IReqoreTooltip;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/types/global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;CACnC;AAED,MAAM,WAAW,cAAe,SAAQ,eAAe;CAAG;AAC1D,oBAAY,kBAAkB,GAAG,MAAM,GAAG,cAAc,CAAC"}
|
|
1
|
+
{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/types/global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;CACnC;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,cAAe,SAAQ,eAAe;CAAG;AAC1D,oBAAY,kBAAkB,GAAG,MAAM,GAAG,cAAc,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
/* @flow */
|
|
2
2
|
import { size as count } from 'lodash';
|
|
3
3
|
import React, { useState } from 'react';
|
|
4
|
-
import { useUpdateEffect } from 'react-use';
|
|
4
|
+
import { useMeasure, useUpdateEffect } from 'react-use';
|
|
5
5
|
import styled, { css } from 'styled-components';
|
|
6
6
|
import { TABLE_SIZE_TO_PX, TSizes } from '../../constants/sizes';
|
|
7
|
-
import {
|
|
7
|
+
import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
|
|
8
8
|
import ReqoreThemeProvider from '../../containers/ThemeProvider';
|
|
9
9
|
import { changeLightness, getReadableColor } from '../../helpers/colors';
|
|
10
10
|
import { useReqoreTheme } from '../../hooks/useTheme';
|
|
11
|
+
import { IReqoreIntent, IWithReqoreCustomTheme, IWithReqoreFlat } from '../../types/global';
|
|
11
12
|
import { IReqoreIconName } from '../../types/icons';
|
|
12
13
|
import ReqoreTableBody from './body';
|
|
13
14
|
import ReqoreTableHeader, { StyledColumnGroupHeader } from './header';
|
|
@@ -25,7 +26,7 @@ export type TReqoreTableColumnContent =
|
|
|
25
26
|
| 'text'
|
|
26
27
|
| `text:${TReqoreIntent}`;
|
|
27
28
|
|
|
28
|
-
export interface IReqoreTableColumn {
|
|
29
|
+
export interface IReqoreTableColumn extends IReqoreIntent {
|
|
29
30
|
dataId: string;
|
|
30
31
|
header?: string | JSX.Element;
|
|
31
32
|
grow?: 1 | 2 | 3 | 4;
|
|
@@ -38,7 +39,6 @@ export interface IReqoreTableColumn {
|
|
|
38
39
|
icon?: IReqoreIconName;
|
|
39
40
|
iconSize?: string;
|
|
40
41
|
tooltip?: string;
|
|
41
|
-
intent?: TReqoreIntent;
|
|
42
42
|
cellTooltip?: (data: { [key: string]: any; _selectId?: string }) => string | JSX.Element;
|
|
43
43
|
onCellClick?: (data: { [key: string]: any; _selectId?: string }) => void;
|
|
44
44
|
}
|
|
@@ -53,7 +53,11 @@ export interface IReqoreTableRowData {
|
|
|
53
53
|
export type IReqoreTableRowClick = (data: IReqoreTableRowData) => void;
|
|
54
54
|
export type IReqoreTableData = IReqoreTableRowData[];
|
|
55
55
|
|
|
56
|
-
export interface IReqoreTableProps
|
|
56
|
+
export interface IReqoreTableProps
|
|
57
|
+
extends React.HTMLAttributes<HTMLDivElement>,
|
|
58
|
+
IReqoreIntent,
|
|
59
|
+
IWithReqoreFlat,
|
|
60
|
+
IWithReqoreCustomTheme {
|
|
57
61
|
columns: IReqoreTableColumn[];
|
|
58
62
|
data?: IReqoreTableData;
|
|
59
63
|
className?: string;
|
|
@@ -68,16 +72,15 @@ export interface IReqoreTableProps extends React.HTMLAttributes<HTMLDivElement>
|
|
|
68
72
|
onSelectedChange?: (selected?: any[]) => void;
|
|
69
73
|
selectToggleTooltip?: string;
|
|
70
74
|
onRowClick?: IReqoreTableRowClick;
|
|
71
|
-
customTheme?: IReqoreCustomTheme;
|
|
72
|
-
intent?: TReqoreIntent;
|
|
73
75
|
rounded?: boolean;
|
|
74
|
-
flat?: boolean;
|
|
75
76
|
size?: TSizes;
|
|
77
|
+
fill?: boolean;
|
|
76
78
|
}
|
|
77
79
|
|
|
78
80
|
export interface IReqoreTableStyle {
|
|
79
81
|
theme: IReqoreTheme;
|
|
80
82
|
width?: number;
|
|
83
|
+
fill?: number;
|
|
81
84
|
striped?: boolean;
|
|
82
85
|
selectable?: boolean;
|
|
83
86
|
rounded?: boolean;
|
|
@@ -90,8 +93,9 @@ export interface IReqoreTableSort {
|
|
|
90
93
|
}
|
|
91
94
|
|
|
92
95
|
const StyledTableWrapper = styled.div<IReqoreTableStyle>`
|
|
93
|
-
${({ theme, width, rounded, flat }: IReqoreTableStyle) => css`
|
|
96
|
+
${({ theme, width, rounded, flat, fill }: IReqoreTableStyle) => css`
|
|
94
97
|
width: ${width ? `${width}px` : '100%'};
|
|
98
|
+
height: ${fill ? '100%' : 'auto'};
|
|
95
99
|
|
|
96
100
|
position: relative;
|
|
97
101
|
clear: both;
|
|
@@ -136,6 +140,7 @@ const ReqoreTable = ({
|
|
|
136
140
|
selectedRowIntent,
|
|
137
141
|
size,
|
|
138
142
|
intent,
|
|
143
|
+
fill,
|
|
139
144
|
...rest
|
|
140
145
|
}: IReqoreTableProps) => {
|
|
141
146
|
const [leftScroll, setLeftScroll] = useState<number>(0);
|
|
@@ -143,6 +148,7 @@ const ReqoreTable = ({
|
|
|
143
148
|
const [_sort, setSort] = useState<IReqoreTableSort>(fixSort(sort));
|
|
144
149
|
const [_selected, setSelected] = useState<string[]>([]);
|
|
145
150
|
const [_selectedQuant, setSelectedQuant] = useState<'all' | 'none' | 'some'>('none');
|
|
151
|
+
const [wrapperRef, sizes] = useMeasure();
|
|
146
152
|
const theme = useReqoreTheme('main', customTheme, intent);
|
|
147
153
|
|
|
148
154
|
useUpdateEffect(() => {
|
|
@@ -228,9 +234,11 @@ const ReqoreTable = ({
|
|
|
228
234
|
<ReqoreThemeProvider theme={theme}>
|
|
229
235
|
<StyledTableWrapper
|
|
230
236
|
{...rest}
|
|
237
|
+
fill={fill}
|
|
231
238
|
className={`${className || ''} reqore-table`}
|
|
232
239
|
rounded={rounded}
|
|
233
240
|
width={width}
|
|
241
|
+
ref={wrapperRef}
|
|
234
242
|
>
|
|
235
243
|
<ReqoreTableHeader
|
|
236
244
|
columns={columns}
|
|
@@ -247,7 +255,7 @@ const ReqoreTable = ({
|
|
|
247
255
|
data={_sort ? sortTableData(_data, _sort) : _data}
|
|
248
256
|
columns={columns}
|
|
249
257
|
setLeftScroll={setLeftScroll}
|
|
250
|
-
height={height}
|
|
258
|
+
height={fill ? sizes.height : height}
|
|
251
259
|
selectable={selectable}
|
|
252
260
|
onSelectClick={handleSelectClick}
|
|
253
261
|
onRowClick={onRowClick}
|