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.
Files changed (57) hide show
  1. package/dist/css/qbs-react-grid.css +1 -1
  2. package/dist/css/qbs-react-grid.min.css +1 -1
  3. package/dist/css/qbs-react-grid.min.css.map +1 -1
  4. package/es/Pagination.d.ts +3 -0
  5. package/es/Pagination.js +8 -3
  6. package/es/index.d.ts +1 -1
  7. package/es/less/qbs-table.less +95 -4
  8. package/es/qbsTable/QbsTable.js +53 -34
  9. package/es/qbsTable/TableCardList.js +47 -31
  10. package/es/qbsTable/Toolbar.js +19 -13
  11. package/es/qbsTable/commontypes.d.ts +9 -1
  12. package/es/qbsTable/labels.d.ts +48 -0
  13. package/es/qbsTable/labels.js +34 -0
  14. package/es/qbsTable/utilities/CardComponent.d.ts +2 -0
  15. package/es/qbsTable/utilities/CardComponent.js +7 -3
  16. package/es/qbsTable/utilities/CardMenuDropdown.d.ts +2 -0
  17. package/es/qbsTable/utilities/CardMenuDropdown.js +5 -2
  18. package/es/qbsTable/utilities/ColumShowHide.d.ts +2 -0
  19. package/es/qbsTable/utilities/ColumShowHide.js +9 -6
  20. package/es/qbsTable/utilities/SearchInput.d.ts +1 -0
  21. package/es/qbsTable/utilities/SearchInput.js +3 -1
  22. package/es/qbsTable/utilities/tablecalc.d.ts +1 -1
  23. package/es/qbsTable/utilities/tablecalc.js +7 -2
  24. package/lib/Pagination.d.ts +3 -0
  25. package/lib/Pagination.js +8 -3
  26. package/lib/index.d.ts +1 -1
  27. package/lib/less/qbs-table.less +95 -4
  28. package/lib/qbsTable/QbsTable.js +53 -34
  29. package/lib/qbsTable/TableCardList.js +47 -31
  30. package/lib/qbsTable/Toolbar.js +19 -13
  31. package/lib/qbsTable/commontypes.d.ts +9 -1
  32. package/lib/qbsTable/labels.d.ts +48 -0
  33. package/lib/qbsTable/labels.js +42 -0
  34. package/lib/qbsTable/utilities/CardComponent.d.ts +2 -0
  35. package/lib/qbsTable/utilities/CardComponent.js +7 -3
  36. package/lib/qbsTable/utilities/CardMenuDropdown.d.ts +2 -0
  37. package/lib/qbsTable/utilities/CardMenuDropdown.js +5 -2
  38. package/lib/qbsTable/utilities/ColumShowHide.d.ts +2 -0
  39. package/lib/qbsTable/utilities/ColumShowHide.js +9 -6
  40. package/lib/qbsTable/utilities/SearchInput.d.ts +1 -0
  41. package/lib/qbsTable/utilities/SearchInput.js +3 -1
  42. package/lib/qbsTable/utilities/tablecalc.d.ts +1 -1
  43. package/lib/qbsTable/utilities/tablecalc.js +7 -2
  44. package/package.json +1 -1
  45. package/src/Pagination.tsx +10 -3
  46. package/src/index.ts +1 -1
  47. package/src/less/qbs-table.less +95 -4
  48. package/src/qbsTable/QbsTable.tsx +35 -9
  49. package/src/qbsTable/TableCardList.tsx +31 -7
  50. package/src/qbsTable/Toolbar.tsx +20 -12
  51. package/src/qbsTable/commontypes.ts +13 -2
  52. package/src/qbsTable/labels.ts +58 -0
  53. package/src/qbsTable/utilities/CardComponent.tsx +7 -2
  54. package/src/qbsTable/utilities/CardMenuDropdown.tsx +10 -2
  55. package/src/qbsTable/utilities/ColumShowHide.tsx +10 -6
  56. package/src/qbsTable/utilities/SearchInput.tsx +3 -1
  57. 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 ? ' View Less' : 'View More',
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: "Actions",
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
- }, "FIXED COLUMNS"), /*#__PURE__*/React.createElement("div", {
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
- }, "VISIBLE COLUMNS"), /*#__PURE__*/React.createElement("div", {
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
- }, "AVAILABLE COLUMNS"), /*#__PURE__*/React.createElement("div", {
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
- }, "Reset to default"), /*#__PURE__*/React.createElement("a", {
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
- }, "Save"))))));
221
+ }, labels.save))))));
219
222
  };
220
223
  export default ColumnToggle;
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  export interface SearchProps {
3
3
  placeholder: string;
4
+ searchAriaLabel?: string;
4
5
  handleChange: (value: string) => void;
5
6
  searchValue: string | undefined;
6
7
  handleSearch: (value?: string) => void;
@@ -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": "Search"
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 "Showing " + (start != null ? start : 0) + " to " + (end != null ? end : 0) + " of " + (totalRows != null ? totalRows : 0);
9
+ return formatRange(start != null ? start : 0, end != null ? end : 0, totalRows != null ? totalRows : 0);
5
10
  }
@@ -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
- }, "Items per page"), /*#__PURE__*/_react["default"].createElement(_customSelect["default"], {
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';
@@ -104,12 +104,103 @@
104
104
  }
105
105
  }
106
106
  .qbs-table[data-theme='dark'] {
107
- background-color: #333333;
108
- color: #ffffff;
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: #333333;
112
- color: #ffffff;
202
+ background-color: #262626;
203
+ color: #f5f5f5;
113
204
  }
114
205
  /* Dropdown container */
115
206
  .qbs-table-menu-dropdown {
@@ -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 _localStorage$getItem;
146
- return (_localStorage$getItem = localStorage.getItem('theme')) != null ? _localStorage$getItem : theme;
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(_ref2) {
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 (_ref3) {
506
- var title = _ref3.title,
507
- field = _ref3.field,
508
- resizable = _ref3.resizable,
509
- sortable = _ref3.sortable,
510
- colWidth = _ref3.colWidth,
511
- align = _ref3.align,
512
- grouped = _ref3.grouped,
513
- groupHeader = _ref3.groupHeader,
514
- fixed = _ref3.fixed,
515
- children = _ref3.children,
516
- customCell = _ref3.customCell,
517
- renderCell = _ref3.renderCell,
518
- isVisible = _ref3.isVisible,
519
- link = _ref3.link,
520
- getPath = _ref3.getPath,
521
- rowClick = _ref3.rowClick,
522
- sortKey = _ref3.sortKey,
523
- type = _ref3.type,
524
- hideLink = _ref3.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 : 'No Data Found',
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: true,
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 : 'No Data Found',
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;