qbs-react-grid 2.0.16 → 2.2.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/dist/css/qbs-react-grid.css +1 -1
- package/dist/css/qbs-react-grid.min.css +1 -1
- package/dist/css/qbs-react-grid.min.css.map +1 -1
- package/es/Pagination.d.ts +3 -0
- package/es/Pagination.js +8 -3
- package/es/index.d.ts +1 -1
- package/es/less/qbs-table.less +95 -4
- package/es/qbsTable/QbsTable.js +53 -34
- package/es/qbsTable/TableCardList.js +47 -31
- package/es/qbsTable/Toolbar.js +19 -13
- package/es/qbsTable/commontypes.d.ts +9 -1
- package/es/qbsTable/labels.d.ts +48 -0
- package/es/qbsTable/labels.js +34 -0
- package/es/qbsTable/utilities/CardComponent.d.ts +2 -0
- package/es/qbsTable/utilities/CardComponent.js +7 -3
- package/es/qbsTable/utilities/CardMenuDropdown.d.ts +2 -0
- package/es/qbsTable/utilities/CardMenuDropdown.js +5 -2
- package/es/qbsTable/utilities/ColumShowHide.d.ts +2 -0
- package/es/qbsTable/utilities/ColumShowHide.js +9 -6
- package/es/qbsTable/utilities/SearchInput.d.ts +1 -0
- package/es/qbsTable/utilities/SearchInput.js +3 -1
- package/es/qbsTable/utilities/tablecalc.d.ts +1 -1
- package/es/qbsTable/utilities/tablecalc.js +7 -2
- package/lib/Pagination.d.ts +3 -0
- package/lib/Pagination.js +8 -3
- package/lib/index.d.ts +1 -1
- package/lib/less/qbs-table.less +95 -4
- package/lib/qbsTable/QbsTable.js +53 -34
- package/lib/qbsTable/TableCardList.js +47 -31
- package/lib/qbsTable/Toolbar.js +19 -13
- package/lib/qbsTable/commontypes.d.ts +9 -1
- package/lib/qbsTable/labels.d.ts +48 -0
- package/lib/qbsTable/labels.js +42 -0
- package/lib/qbsTable/utilities/CardComponent.d.ts +2 -0
- package/lib/qbsTable/utilities/CardComponent.js +7 -3
- package/lib/qbsTable/utilities/CardMenuDropdown.d.ts +2 -0
- package/lib/qbsTable/utilities/CardMenuDropdown.js +5 -2
- package/lib/qbsTable/utilities/ColumShowHide.d.ts +2 -0
- package/lib/qbsTable/utilities/ColumShowHide.js +9 -6
- package/lib/qbsTable/utilities/SearchInput.d.ts +1 -0
- package/lib/qbsTable/utilities/SearchInput.js +3 -1
- package/lib/qbsTable/utilities/tablecalc.d.ts +1 -1
- package/lib/qbsTable/utilities/tablecalc.js +7 -2
- package/package.json +1 -1
- package/src/Pagination.tsx +10 -3
- package/src/index.ts +1 -1
- package/src/less/qbs-table.less +95 -4
- package/src/qbsTable/QbsTable.tsx +35 -9
- package/src/qbsTable/TableCardList.tsx +31 -7
- package/src/qbsTable/Toolbar.tsx +20 -12
- package/src/qbsTable/commontypes.ts +13 -2
- package/src/qbsTable/labels.ts +58 -0
- package/src/qbsTable/utilities/CardComponent.tsx +7 -2
- package/src/qbsTable/utilities/CardMenuDropdown.tsx +10 -2
- package/src/qbsTable/utilities/ColumShowHide.tsx +10 -6
- package/src/qbsTable/utilities/SearchInput.tsx +3 -1
- package/src/qbsTable/utilities/tablecalc.ts +8 -2
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
export var DEFAULT_QBS_TABLE_LABELS = {
|
|
3
|
+
search: 'Search',
|
|
4
|
+
searchAriaLabel: 'Search',
|
|
5
|
+
clear: 'Clear',
|
|
6
|
+
selectedItems: 'Selected Items',
|
|
7
|
+
switchToDefaultView: 'Switch to Default View',
|
|
8
|
+
switchToRelaxedView: 'Switch to Relaxed View',
|
|
9
|
+
switchToFullScreen: 'Switch to Full Screen',
|
|
10
|
+
switchToTableView: 'Switch to Table View',
|
|
11
|
+
switchToCardView: 'Switch to Card View',
|
|
12
|
+
noDataFound: 'No Data Found',
|
|
13
|
+
showingRange: function showingRange(start, end, total) {
|
|
14
|
+
return "Showing " + start + " to " + end + " of " + total;
|
|
15
|
+
},
|
|
16
|
+
itemsPerPage: 'Items per page',
|
|
17
|
+
fixedColumns: 'FIXED COLUMNS',
|
|
18
|
+
visibleColumns: 'VISIBLE COLUMNS',
|
|
19
|
+
availableColumns: 'AVAILABLE COLUMNS',
|
|
20
|
+
resetToDefault: 'Reset to default',
|
|
21
|
+
save: 'Save',
|
|
22
|
+
viewMore: 'View More',
|
|
23
|
+
viewLess: 'View Less',
|
|
24
|
+
actions: 'Actions'
|
|
25
|
+
};
|
|
26
|
+
export var mergeLabels = function mergeLabels(labels) {
|
|
27
|
+
var _labels$showingRange;
|
|
28
|
+
return _extends({}, DEFAULT_QBS_TABLE_LABELS, labels, {
|
|
29
|
+
showingRange: (_labels$showingRange = labels === null || labels === void 0 ? void 0 : labels.showingRange) != null ? _labels$showingRange : DEFAULT_QBS_TABLE_LABELS.showingRange
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
export var formatSelectedItems = function formatSelectedItems(selectedItemsLabel, count) {
|
|
33
|
+
return selectedItemsLabel + "(" + count + ") ";
|
|
34
|
+
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { QbsColumnProps } from '../commontypes';
|
|
3
|
+
import { type QbsTableLabels } from '../labels';
|
|
3
4
|
type Props = {
|
|
4
5
|
columns: QbsColumnProps[];
|
|
5
6
|
data: any;
|
|
@@ -9,6 +10,7 @@ type Props = {
|
|
|
9
10
|
handleMenuActions?: () => void;
|
|
10
11
|
cardColumLimit?: number;
|
|
11
12
|
childDetailHeading?: string;
|
|
13
|
+
labels?: QbsTableLabels;
|
|
12
14
|
};
|
|
13
15
|
declare const CardComponent: React.FC<Props>;
|
|
14
16
|
export default CardComponent;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { useRef, useState } from 'react';
|
|
2
|
+
import { mergeLabels } from '../labels';
|
|
2
3
|
import CardMenuDropdown from './CardMenuDropdown';
|
|
3
4
|
import { handleCellFormat } from './handleFormatCell';
|
|
4
5
|
import { ArrowUpIcon } from './icons';
|
|
@@ -15,7 +16,9 @@ var CardComponent = function CardComponent(_ref) {
|
|
|
15
16
|
cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
|
|
16
17
|
handleMenuActions = _ref.handleMenuActions,
|
|
17
18
|
_ref$childDetailHeadi = _ref.childDetailHeading,
|
|
18
|
-
childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi
|
|
19
|
+
childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi,
|
|
20
|
+
labelsProp = _ref.labels;
|
|
21
|
+
var labels = mergeLabels(labelsProp);
|
|
19
22
|
var _useState = useState(false),
|
|
20
23
|
viewMore = _useState[0],
|
|
21
24
|
setViewMore = _useState[1];
|
|
@@ -64,10 +67,11 @@ var CardComponent = function CardComponent(_ref) {
|
|
|
64
67
|
rowData: data,
|
|
65
68
|
iconName: "more",
|
|
66
69
|
rowIndex: index,
|
|
67
|
-
handleMenuActions: handleMenuActions
|
|
70
|
+
handleMenuActions: handleMenuActions,
|
|
71
|
+
labels: labels
|
|
68
72
|
})), columns.length > initialDisplayCount && /*#__PURE__*/React.createElement(TooltipComponent, {
|
|
69
73
|
tableBodyRef: useCardRef,
|
|
70
|
-
title: viewMore ?
|
|
74
|
+
title: viewMore ? labels.viewLess : labels.viewMore,
|
|
71
75
|
enabled: false
|
|
72
76
|
}, /*#__PURE__*/React.createElement("button", {
|
|
73
77
|
onClick: toggleViewMore,
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ActionProps } from '../commontypes';
|
|
3
|
+
import { type QbsTableLabels } from '../labels';
|
|
3
4
|
type Props = {
|
|
4
5
|
iconName: string;
|
|
5
6
|
actionDropDown: ActionProps[];
|
|
@@ -8,6 +9,7 @@ type Props = {
|
|
|
8
9
|
dataTheme?: string;
|
|
9
10
|
tableBodyRef: React.RefObject<HTMLDivElement>;
|
|
10
11
|
rowIndex?: number;
|
|
12
|
+
labels?: QbsTableLabels;
|
|
11
13
|
};
|
|
12
14
|
declare const CardMenuDropdown: React.FC<Props>;
|
|
13
15
|
export default CardMenuDropdown;
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import React, { useEffect, useRef, useState } from 'react';
|
|
2
|
+
import { mergeLabels } from '../labels';
|
|
2
3
|
import { ThreeDotIcon } from './icons';
|
|
3
4
|
import TooltipComponent from './ToolTip';
|
|
4
5
|
var CardMenuDropdown = function CardMenuDropdown(_ref) {
|
|
5
6
|
var actionDropDown = _ref.actionDropDown,
|
|
6
7
|
handleMenuActions = _ref.handleMenuActions,
|
|
7
|
-
rowData = _ref.rowData
|
|
8
|
+
rowData = _ref.rowData,
|
|
9
|
+
labelsProp = _ref.labels;
|
|
10
|
+
var labels = mergeLabels(labelsProp);
|
|
8
11
|
var _useState = useState(false),
|
|
9
12
|
openMenu = _useState[0],
|
|
10
13
|
setOpenMenu = _useState[1];
|
|
@@ -63,7 +66,7 @@ var CardMenuDropdown = function CardMenuDropdown(_ref) {
|
|
|
63
66
|
onClick: toggleMenu,
|
|
64
67
|
ref: menuButtonRef
|
|
65
68
|
}, /*#__PURE__*/React.createElement(TooltipComponent, {
|
|
66
|
-
title:
|
|
69
|
+
title: labels.actions,
|
|
67
70
|
enabled: false,
|
|
68
71
|
ref: menuButtonRef
|
|
69
72
|
}, /*#__PURE__*/React.createElement(ThreeDotIcon, null))), openMenu && /*#__PURE__*/React.createElement("div", {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { QbsColumnProps } from '../commontypes';
|
|
3
|
+
import { type QbsTableLabels } from '../labels';
|
|
3
4
|
interface ColumnToggleProps {
|
|
4
5
|
columns: QbsColumnProps[];
|
|
5
6
|
onToggle: (columnName: string) => void;
|
|
@@ -11,6 +12,7 @@ interface ColumnToggleProps {
|
|
|
11
12
|
tableHeight?: number;
|
|
12
13
|
viewMode?: string;
|
|
13
14
|
setViewMode?: (value: string) => void;
|
|
15
|
+
labels?: QbsTableLabels;
|
|
14
16
|
}
|
|
15
17
|
declare const ColumnToggle: React.FC<ColumnToggleProps>;
|
|
16
18
|
export default ColumnToggle;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
2
|
+
import { mergeLabels } from '../labels';
|
|
2
3
|
import { SettingsIcon } from './icons';
|
|
3
4
|
var ColumnToggle = function ColumnToggle(_ref) {
|
|
4
5
|
var columns = _ref.columns,
|
|
@@ -9,7 +10,9 @@ var ColumnToggle = function ColumnToggle(_ref) {
|
|
|
9
10
|
handleResetColumns = _ref.handleResetColumns,
|
|
10
11
|
handleColumnToggle = _ref.handleColumnToggle,
|
|
11
12
|
_ref$tableHeight = _ref.tableHeight,
|
|
12
|
-
tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight
|
|
13
|
+
tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight,
|
|
14
|
+
labelsProp = _ref.labels;
|
|
15
|
+
var labels = mergeLabels(labelsProp);
|
|
13
16
|
var _useState = useState(null),
|
|
14
17
|
draggedItem = _useState[0],
|
|
15
18
|
setDraggedItem = _useState[1];
|
|
@@ -164,7 +167,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
|
|
|
164
167
|
className: "qbs-table-popup-item"
|
|
165
168
|
}, /*#__PURE__*/React.createElement("div", {
|
|
166
169
|
className: "qbs-table-popup-label"
|
|
167
|
-
},
|
|
170
|
+
}, labels.fixedColumns), /*#__PURE__*/React.createElement("div", {
|
|
168
171
|
className: "qbs-table-columns-container"
|
|
169
172
|
}, /*#__PURE__*/React.createElement("div", {
|
|
170
173
|
className: "qbs-table-column"
|
|
@@ -176,7 +179,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
|
|
|
176
179
|
className: "qbs-table-popup-item"
|
|
177
180
|
}, /*#__PURE__*/React.createElement("div", {
|
|
178
181
|
className: "qbs-table-popup-label"
|
|
179
|
-
},
|
|
182
|
+
}, labels.visibleColumns), /*#__PURE__*/React.createElement("div", {
|
|
180
183
|
className: "qbs-table-columns-container"
|
|
181
184
|
}, /*#__PURE__*/React.createElement("div", {
|
|
182
185
|
className: "qbs-table-column"
|
|
@@ -188,7 +191,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
|
|
|
188
191
|
className: "qbs-table-popup-item"
|
|
189
192
|
}, /*#__PURE__*/React.createElement("div", {
|
|
190
193
|
className: "qbs-table-popup-label"
|
|
191
|
-
},
|
|
194
|
+
}, labels.availableColumns), /*#__PURE__*/React.createElement("div", {
|
|
192
195
|
className: "qbs-table-columns-container"
|
|
193
196
|
}, /*#__PURE__*/React.createElement("div", {
|
|
194
197
|
className: "qbs-table-column"
|
|
@@ -209,12 +212,12 @@ var ColumnToggle = function ColumnToggle(_ref) {
|
|
|
209
212
|
onClick: function onClick() {
|
|
210
213
|
return handleResetColumns === null || handleResetColumns === void 0 ? void 0 : handleResetColumns();
|
|
211
214
|
}
|
|
212
|
-
},
|
|
215
|
+
}, labels.resetToDefault), /*#__PURE__*/React.createElement("a", {
|
|
213
216
|
className: "qbs-table-reset-link",
|
|
214
217
|
href: "#",
|
|
215
218
|
onClick: function onClick() {
|
|
216
219
|
return handleColToggle();
|
|
217
220
|
}
|
|
218
|
-
},
|
|
221
|
+
}, labels.save))))));
|
|
219
222
|
};
|
|
220
223
|
export default ColumnToggle;
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React, { memo, useCallback } from 'react';
|
|
2
2
|
var SearchInput = function SearchInput(_ref) {
|
|
3
3
|
var placeholder = _ref.placeholder,
|
|
4
|
+
_ref$searchAriaLabel = _ref.searchAriaLabel,
|
|
5
|
+
searchAriaLabel = _ref$searchAriaLabel === void 0 ? 'Search' : _ref$searchAriaLabel,
|
|
4
6
|
handleChange = _ref.handleChange,
|
|
5
7
|
searchValue = _ref.searchValue,
|
|
6
8
|
handleSearch = _ref.handleSearch;
|
|
@@ -24,7 +26,7 @@ var SearchInput = function SearchInput(_ref) {
|
|
|
24
26
|
placeholder: placeholder,
|
|
25
27
|
value: searchValue != null ? searchValue : '',
|
|
26
28
|
onChange: handleInputChange,
|
|
27
|
-
"aria-label":
|
|
29
|
+
"aria-label": searchAriaLabel
|
|
28
30
|
}), /*#__PURE__*/React.createElement("button", {
|
|
29
31
|
className: "search-button absolute left-1 bottom-1.5 bg-white text-grey-dark",
|
|
30
32
|
onClick: function onClick() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function getRowDisplayRange(totalRows: number, rowsPerPage: number, pageNumber: number): string;
|
|
1
|
+
export declare function getRowDisplayRange(totalRows: number, rowsPerPage: number, pageNumber: number, formatRange?: (start: number, end: number, total: number) => string): string;
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
export function getRowDisplayRange(totalRows, rowsPerPage, pageNumber) {
|
|
1
|
+
export function getRowDisplayRange(totalRows, rowsPerPage, pageNumber, formatRange) {
|
|
2
|
+
if (formatRange === void 0) {
|
|
3
|
+
formatRange = function formatRange(start, end, total) {
|
|
4
|
+
return "Showing " + start + " to " + end + " of " + total;
|
|
5
|
+
};
|
|
6
|
+
}
|
|
2
7
|
var start = (pageNumber - 1) * rowsPerPage + 1;
|
|
3
8
|
var end = Math.min(pageNumber * rowsPerPage, totalRows);
|
|
4
|
-
return
|
|
9
|
+
return formatRange(start != null ? start : 0, end != null ? end : 0, totalRows != null ? totalRows : 0);
|
|
5
10
|
}
|
package/lib/Pagination.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
+
import { type QbsTableLabels } from './qbsTable/labels';
|
|
2
3
|
type PageProps = {
|
|
3
4
|
paginationProps: {
|
|
4
5
|
total?: number;
|
|
@@ -9,6 +10,8 @@ type PageProps = {
|
|
|
9
10
|
onRowsPerPage?: (row: number, page: number) => void;
|
|
10
11
|
onPagination?: (row: number, page: number) => void;
|
|
11
12
|
};
|
|
13
|
+
labels?: QbsTableLabels;
|
|
14
|
+
dataTheme?: string;
|
|
12
15
|
};
|
|
13
16
|
declare const Pagination: FC<PageProps>;
|
|
14
17
|
export default Pagination;
|
package/lib/Pagination.js
CHANGED
|
@@ -5,6 +5,7 @@ exports.__esModule = true;
|
|
|
5
5
|
exports["default"] = void 0;
|
|
6
6
|
var _react = _interopRequireWildcard(require("react"));
|
|
7
7
|
var _customSelect = _interopRequireDefault(require("./customSelect"));
|
|
8
|
+
var _labels = require("./qbsTable/labels");
|
|
8
9
|
var _tablecalc = require("./qbsTable/utilities/tablecalc");
|
|
9
10
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
10
11
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -41,7 +42,10 @@ var PageIndex = function PageIndex(_ref) {
|
|
|
41
42
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderPageNumbers());
|
|
42
43
|
};
|
|
43
44
|
var Pagination = function Pagination(_ref2) {
|
|
44
|
-
var paginationProps = _ref2.paginationProps
|
|
45
|
+
var paginationProps = _ref2.paginationProps,
|
|
46
|
+
labelsProp = _ref2.labels,
|
|
47
|
+
dataTheme = _ref2.dataTheme;
|
|
48
|
+
var labels = (0, _labels.mergeLabels)(labelsProp);
|
|
45
49
|
var _paginationProps$drop = paginationProps.dropOptions,
|
|
46
50
|
dropOptions = _paginationProps$drop === void 0 ? [10, 20, 50, 100, 200] : _paginationProps$drop,
|
|
47
51
|
_paginationProps$curr = paginationProps.currentPage,
|
|
@@ -82,13 +86,14 @@ var Pagination = function Pagination(_ref2) {
|
|
|
82
86
|
};
|
|
83
87
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
84
88
|
className: "qbs-table-custom-pagination",
|
|
89
|
+
"data-theme": dataTheme,
|
|
85
90
|
style: {
|
|
86
91
|
display: 'flex',
|
|
87
92
|
justifyContent: 'space-between'
|
|
88
93
|
}
|
|
89
94
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
90
95
|
className: "rows-count"
|
|
91
|
-
}, (0, _tablecalc.getRowDisplayRange)(total, rowsPerPageState, currentPage)), /*#__PURE__*/_react["default"].createElement("div", {
|
|
96
|
+
}, (0, _tablecalc.getRowDisplayRange)(total, rowsPerPageState, currentPage, labels.showingRange)), /*#__PURE__*/_react["default"].createElement("div", {
|
|
92
97
|
className: "qbs-table-pagination-right-block"
|
|
93
98
|
}, /*#__PURE__*/_react["default"].createElement("button", {
|
|
94
99
|
className: "qbs-table-icon-container",
|
|
@@ -167,7 +172,7 @@ var Pagination = function Pagination(_ref2) {
|
|
|
167
172
|
className: "qbs-table-pagination-flexBox"
|
|
168
173
|
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
169
174
|
className: "qbs-table-pagination-text"
|
|
170
|
-
},
|
|
175
|
+
}, labels.itemsPerPage), /*#__PURE__*/_react["default"].createElement(_customSelect["default"], {
|
|
171
176
|
options: dropData,
|
|
172
177
|
selectedValue: rowsPerPageState,
|
|
173
178
|
onChange: handleRowsPerPage
|
package/lib/index.d.ts
CHANGED
|
@@ -11,5 +11,5 @@ export type { ColumnProps } from './Column';
|
|
|
11
11
|
export type { CellProps } from './Cell';
|
|
12
12
|
export type { HeaderCellProps } from './HeaderCell';
|
|
13
13
|
export type { ColumnGroupProps } from './ColumnGroup';
|
|
14
|
-
export type { QbsTableProps } from './qbsTable/commontypes';
|
|
14
|
+
export type { QbsTableProps, QbsTableLabels } from './qbsTable/commontypes';
|
|
15
15
|
export type { StandardProps, SortType, RowDataType, RowKeyType, TableSizeChangeEventName } from './@types/common';
|
package/lib/less/qbs-table.less
CHANGED
|
@@ -104,12 +104,103 @@
|
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
106
|
.qbs-table[data-theme='dark'] {
|
|
107
|
-
background-color: #
|
|
108
|
-
color: #
|
|
107
|
+
background-color: #1f1f1f;
|
|
108
|
+
color: #f5f5f5;
|
|
109
|
+
|
|
110
|
+
.qbs-table-border-wrap {
|
|
111
|
+
border-color: #3d3d3d;
|
|
112
|
+
background: #262626;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.qbs-table-toolbar-container,
|
|
116
|
+
.qbs-table-toolbar,
|
|
117
|
+
.qbs-table-toolbar-sub-container,
|
|
118
|
+
.sub-qbs-table-toolbar {
|
|
119
|
+
color: #f5f5f5;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.qbs-table-search-container {
|
|
123
|
+
.input {
|
|
124
|
+
border-color: #4a4a4a;
|
|
125
|
+
background: #2d2d2d;
|
|
126
|
+
color: #f5f5f5;
|
|
127
|
+
|
|
128
|
+
&:hover,
|
|
129
|
+
&:focus {
|
|
130
|
+
border-color: #6b6b6b;
|
|
131
|
+
background: #2d2d2d;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.search-button,
|
|
136
|
+
.close-button {
|
|
137
|
+
color: #d1d1d1;
|
|
138
|
+
background-color: transparent;
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.qbs-table-column-popup,
|
|
143
|
+
.qbs-table-popup-container {
|
|
144
|
+
background: #2d2d2d;
|
|
145
|
+
color: #f5f5f5;
|
|
146
|
+
border-color: #4a4a4a;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.qbs-table-popup-label,
|
|
150
|
+
.qbs-table-popup-value,
|
|
151
|
+
.qbs-table-reset-link {
|
|
152
|
+
color: #f5f5f5;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.qbs-table-custom-pagination,
|
|
156
|
+
.qbs-table-pagination-text,
|
|
157
|
+
.rows-count {
|
|
158
|
+
color: #f5f5f5;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.qbs-table-icon-container svg path {
|
|
162
|
+
stroke: #e5e5e5;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.custom-select-trigger,
|
|
166
|
+
.custom-select-options {
|
|
167
|
+
background: #2d2d2d;
|
|
168
|
+
color: #f5f5f5;
|
|
169
|
+
border-color: #4a4a4a;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.qbs-card-container {
|
|
173
|
+
border-color: #4a4a4a;
|
|
174
|
+
background: #262626;
|
|
175
|
+
color: #f5f5f5;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.nodata-title {
|
|
179
|
+
color: #f5f5f5;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.tooltiptext {
|
|
183
|
+
background-color: #3d3d3d;
|
|
184
|
+
color: #fff;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.qbs-table-custom-pagination[data-theme='dark'] {
|
|
189
|
+
color: #f5f5f5;
|
|
190
|
+
|
|
191
|
+
.rows-count,
|
|
192
|
+
.qbs-table-pagination-text {
|
|
193
|
+
color: #f5f5f5;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.qbs-table-icon-container svg path {
|
|
197
|
+
stroke: #e5e5e5;
|
|
198
|
+
}
|
|
109
199
|
}
|
|
200
|
+
|
|
110
201
|
.rs-table-cell-content[data-theme='dark'] {
|
|
111
|
-
background-color: #
|
|
112
|
-
color: #
|
|
202
|
+
background-color: #262626;
|
|
203
|
+
color: #f5f5f5;
|
|
113
204
|
}
|
|
114
205
|
/* Dropdown container */
|
|
115
206
|
.qbs-table-menu-dropdown {
|
package/lib/qbsTable/QbsTable.js
CHANGED
|
@@ -12,6 +12,7 @@ var _HeaderCell = _interopRequireDefault(require("../HeaderCell"));
|
|
|
12
12
|
var _Pagination = _interopRequireDefault(require("../Pagination"));
|
|
13
13
|
var _Table = _interopRequireDefault(require("../Table"));
|
|
14
14
|
var _useResponsiveStore = _interopRequireDefault(require("../utils/useResponsiveStore"));
|
|
15
|
+
var _labels = require("./labels");
|
|
15
16
|
var _CustomTableCell = require("./CustomTableCell");
|
|
16
17
|
var _Toolbar = _interopRequireDefault(require("./Toolbar"));
|
|
17
18
|
var _CardComponent = _interopRequireDefault(require("./utilities/CardComponent"));
|
|
@@ -131,7 +132,13 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
131
132
|
_ref$dropType = _ref.dropType,
|
|
132
133
|
dropType = _ref$dropType === void 0 ? 'horizondal' : _ref$dropType,
|
|
133
134
|
rowHeight = _ref.rowHeight,
|
|
134
|
-
isFullScreen = _ref.isFullScreen
|
|
135
|
+
isFullScreen = _ref.isFullScreen,
|
|
136
|
+
_ref$showHeader = _ref.showHeader,
|
|
137
|
+
showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader,
|
|
138
|
+
labelsProp = _ref.labels;
|
|
139
|
+
var labels = (0, _react.useMemo)(function () {
|
|
140
|
+
return (0, _labels.mergeLabels)(labelsProp);
|
|
141
|
+
}, [labelsProp]);
|
|
135
142
|
var _useState = (0, _react.useState)(false),
|
|
136
143
|
loading = _useState[0],
|
|
137
144
|
setLoading = _useState[1];
|
|
@@ -142,8 +149,8 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
142
149
|
checkedKeys = _useState3[0],
|
|
143
150
|
setCheckedKeys = _useState3[1];
|
|
144
151
|
var dataTheme = (0, _react.useMemo)(function () {
|
|
145
|
-
var
|
|
146
|
-
return (
|
|
152
|
+
var _ref2;
|
|
153
|
+
return (_ref2 = theme != null ? theme : typeof localStorage !== 'undefined' ? localStorage.getItem('theme') : null) != null ? _ref2 : 'light';
|
|
147
154
|
}, [theme]);
|
|
148
155
|
var _useState4 = (0, _react.useState)(false),
|
|
149
156
|
isOpen = _useState4[0],
|
|
@@ -264,7 +271,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
264
271
|
|
|
265
272
|
// useEffect(() => {
|
|
266
273
|
// }, [columns]);
|
|
267
|
-
var handleClear = function handleClear(
|
|
274
|
+
var handleClear = function handleClear(_ref3) {
|
|
268
275
|
setCheckedKeys([]);
|
|
269
276
|
handleChecked([]);
|
|
270
277
|
};
|
|
@@ -299,12 +306,19 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
299
306
|
fullWidthView: fullWidthView,
|
|
300
307
|
setTableFullView: setTableFullView,
|
|
301
308
|
setRowViewToggle: setRowViewToggle,
|
|
302
|
-
isFullScreen: isFullScreen
|
|
309
|
+
isFullScreen: isFullScreen,
|
|
310
|
+
labels: labels
|
|
303
311
|
};
|
|
312
|
+
(0, _react.useEffect)(function () {
|
|
313
|
+
if (!dataTheme || typeof document === 'undefined') return;
|
|
314
|
+
document.body.setAttribute('data-theme', dataTheme === 'dark' ? 'dark' : 'light');
|
|
315
|
+
document.documentElement.dataset.theme = dataTheme;
|
|
316
|
+
}, [dataTheme]);
|
|
304
317
|
var themeToggle = (0, _react.useMemo)(function () {
|
|
305
|
-
return document.getElementById('themeToggle');
|
|
318
|
+
return typeof document !== 'undefined' ? document.getElementById('themeToggle') : null;
|
|
306
319
|
}, []);
|
|
307
320
|
(0, _react.useEffect)(function () {
|
|
321
|
+
if (theme || typeof document === 'undefined') return;
|
|
308
322
|
var handleThemeToggle = function handleThemeToggle() {
|
|
309
323
|
if (themeToggle !== null && themeToggle !== void 0 && themeToggle.checked) {
|
|
310
324
|
document.body.setAttribute('data-theme', 'dark');
|
|
@@ -326,7 +340,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
326
340
|
themeToggle === null || themeToggle === void 0 ? void 0 : themeToggle.removeEventListener('change', handleThemeToggle);
|
|
327
341
|
document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
|
|
328
342
|
};
|
|
329
|
-
}, [themeToggle]);
|
|
343
|
+
}, [theme, themeToggle]);
|
|
330
344
|
var handleExpanded = (0, _react.useCallback)(function (rowData) {
|
|
331
345
|
var keyValue = dataRowKey;
|
|
332
346
|
var key = rowData[keyValue];
|
|
@@ -502,26 +516,26 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
502
516
|
// [columns, dataTheme]
|
|
503
517
|
// );
|
|
504
518
|
var columnsRendered = (0, _react.useMemo)(function () {
|
|
505
|
-
return (columns != null ? columns : []).map(function (
|
|
506
|
-
var title =
|
|
507
|
-
field =
|
|
508
|
-
resizable =
|
|
509
|
-
sortable =
|
|
510
|
-
colWidth =
|
|
511
|
-
align =
|
|
512
|
-
grouped =
|
|
513
|
-
groupHeader =
|
|
514
|
-
fixed =
|
|
515
|
-
children =
|
|
516
|
-
customCell =
|
|
517
|
-
renderCell =
|
|
518
|
-
isVisible =
|
|
519
|
-
link =
|
|
520
|
-
getPath =
|
|
521
|
-
rowClick =
|
|
522
|
-
sortKey =
|
|
523
|
-
type =
|
|
524
|
-
hideLink =
|
|
519
|
+
return (columns != null ? columns : []).map(function (_ref4) {
|
|
520
|
+
var title = _ref4.title,
|
|
521
|
+
field = _ref4.field,
|
|
522
|
+
resizable = _ref4.resizable,
|
|
523
|
+
sortable = _ref4.sortable,
|
|
524
|
+
colWidth = _ref4.colWidth,
|
|
525
|
+
align = _ref4.align,
|
|
526
|
+
grouped = _ref4.grouped,
|
|
527
|
+
groupHeader = _ref4.groupHeader,
|
|
528
|
+
fixed = _ref4.fixed,
|
|
529
|
+
children = _ref4.children,
|
|
530
|
+
customCell = _ref4.customCell,
|
|
531
|
+
renderCell = _ref4.renderCell,
|
|
532
|
+
isVisible = _ref4.isVisible,
|
|
533
|
+
link = _ref4.link,
|
|
534
|
+
getPath = _ref4.getPath,
|
|
535
|
+
rowClick = _ref4.rowClick,
|
|
536
|
+
sortKey = _ref4.sortKey,
|
|
537
|
+
type = _ref4.type,
|
|
538
|
+
hideLink = _ref4.hideLink;
|
|
525
539
|
return isVisible ? grouped ? /*#__PURE__*/_react["default"].createElement(_ColumnGroup["default"], {
|
|
526
540
|
header: groupHeader,
|
|
527
541
|
fixed: fixed,
|
|
@@ -631,7 +645,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
631
645
|
bordered: bordered,
|
|
632
646
|
renderEmpty: function renderEmpty(info) {
|
|
633
647
|
return _renderEmpty ? _renderEmpty(info) : /*#__PURE__*/_react["default"].createElement(_empty["default"], {
|
|
634
|
-
title: emptyTitle != null ? emptyTitle :
|
|
648
|
+
title: emptyTitle != null ? emptyTitle : labels.noDataFound,
|
|
635
649
|
subtitle: emptySubTitle
|
|
636
650
|
});
|
|
637
651
|
},
|
|
@@ -640,7 +654,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
640
654
|
headerHeight: headerHeight,
|
|
641
655
|
rowExpandedHeight: rowExpandedHeight,
|
|
642
656
|
loading: isLoading != null ? isLoading : loading,
|
|
643
|
-
showHeader:
|
|
657
|
+
showHeader: showHeader,
|
|
644
658
|
defaultChecked: true,
|
|
645
659
|
expandedRowKeys: expandedRowKeys,
|
|
646
660
|
onExpandChange: onExpandChange,
|
|
@@ -737,7 +751,8 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
737
751
|
setViewMode: setViewMode,
|
|
738
752
|
setIsOpen: setIsOpen,
|
|
739
753
|
handleResetColumns: handleResetColumns,
|
|
740
|
-
handleColumnToggle: handleColumnToggle
|
|
754
|
+
handleColumnToggle: handleColumnToggle,
|
|
755
|
+
labels: labels
|
|
741
756
|
})), /*#__PURE__*/_react["default"].createElement(_Cell["default"], null)), actionProps && (actionProps === null || actionProps === void 0 ? void 0 : actionProps.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Column["default"], {
|
|
742
757
|
width: 40,
|
|
743
758
|
fixed: "right"
|
|
@@ -756,7 +771,8 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
756
771
|
isOpen: isOpen,
|
|
757
772
|
setIsOpen: setIsOpen,
|
|
758
773
|
handleResetColumns: handleResetColumns,
|
|
759
|
-
handleColumnToggle: handleColumnToggle
|
|
774
|
+
handleColumnToggle: handleColumnToggle,
|
|
775
|
+
labels: labels
|
|
760
776
|
})), /*#__PURE__*/_react["default"].createElement(_CustomTableCell.ActionCell, {
|
|
761
777
|
tableBodyRef: tableBodyRef,
|
|
762
778
|
dropType: dropType,
|
|
@@ -775,7 +791,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
775
791
|
}, ((data === null || data === void 0 ? void 0 : data.length) === 0 || !data) && !isLoading && /*#__PURE__*/_react["default"].createElement("div", {
|
|
776
792
|
className: "flex flex-col gap-2 p-2 mt-6 card-empty-container"
|
|
777
793
|
}, /*#__PURE__*/_react["default"].createElement(_empty["default"], {
|
|
778
|
-
title: emptyTitle != null ? emptyTitle :
|
|
794
|
+
title: emptyTitle != null ? emptyTitle : labels.noDataFound,
|
|
779
795
|
subtitle: emptySubTitle
|
|
780
796
|
})), isLoading ? handleCustomCardLoader ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, handleCustomCardLoader()) : /*#__PURE__*/_react["default"].createElement("div", {
|
|
781
797
|
className: "flex flex-col gap-2 p-2"
|
|
@@ -790,10 +806,13 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
790
806
|
childDetailHeading: childDetailHeading,
|
|
791
807
|
columns: columns,
|
|
792
808
|
tableBodyRef: tableBodyRef,
|
|
793
|
-
actionProps: actionProps
|
|
809
|
+
actionProps: actionProps,
|
|
810
|
+
labels: labels
|
|
794
811
|
}));
|
|
795
812
|
})), /*#__PURE__*/_react["default"].createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Pagination["default"], {
|
|
796
|
-
paginationProps: paginationProps
|
|
813
|
+
paginationProps: paginationProps,
|
|
814
|
+
labels: labels,
|
|
815
|
+
dataTheme: dataTheme
|
|
797
816
|
}))));
|
|
798
817
|
};
|
|
799
818
|
var _default = QbsTable;
|