qbs-react-grid 2.2.4 → 2.2.5
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/Cell.js +1 -2
- package/es/Pagination.d.ts +0 -3
- package/es/Pagination.js +3 -8
- package/es/Table.d.ts +0 -3
- package/es/Table.js +12 -18
- package/es/index.d.ts +1 -1
- package/es/less/pagination.less +9 -9
- package/es/less/qbs-table.less +73 -205
- package/es/qbsTable/CustomTableCell.js +2 -13
- package/es/qbsTable/QbsTable.js +46 -124
- package/es/qbsTable/TableCardList.js +39 -52
- package/es/qbsTable/Toolbar.js +13 -62
- package/es/qbsTable/commontypes.d.ts +2 -30
- package/es/qbsTable/utilities/CardComponent.d.ts +0 -2
- package/es/qbsTable/utilities/CardComponent.js +3 -7
- package/es/qbsTable/utilities/CardMenuDropdown.d.ts +0 -2
- package/es/qbsTable/utilities/CardMenuDropdown.js +7 -7
- package/es/qbsTable/utilities/ColumShowHide.d.ts +0 -4
- package/es/qbsTable/utilities/ColumShowHide.js +6 -9
- package/es/qbsTable/utilities/SearchInput.d.ts +0 -1
- package/es/qbsTable/utilities/SearchInput.js +1 -3
- package/es/qbsTable/utilities/ToolTip.d.ts +1 -8
- package/es/qbsTable/utilities/ToolTip.js +31 -107
- package/es/qbsTable/utilities/empty.js +1 -1
- package/es/qbsTable/utilities/icons.d.ts +0 -3
- package/es/qbsTable/utilities/icons.js +1 -65
- package/es/qbsTable/utilities/tablecalc.d.ts +1 -1
- package/es/qbsTable/utilities/tablecalc.js +2 -7
- package/es/utils/useCellDescriptor.js +1 -0
- package/es/utils/useScrollListener.d.ts +0 -1
- package/es/utils/useScrollListener.js +3 -5
- package/lib/Cell.js +1 -2
- package/lib/Pagination.d.ts +0 -3
- package/lib/Pagination.js +3 -8
- package/lib/Table.d.ts +0 -3
- package/lib/Table.js +12 -18
- package/lib/index.d.ts +1 -1
- package/lib/less/pagination.less +9 -9
- package/lib/less/qbs-table.less +73 -205
- package/lib/qbsTable/CustomTableCell.js +2 -13
- package/lib/qbsTable/QbsTable.js +46 -124
- package/lib/qbsTable/TableCardList.js +39 -52
- package/lib/qbsTable/Toolbar.js +12 -61
- package/lib/qbsTable/commontypes.d.ts +2 -30
- package/lib/qbsTable/utilities/CardComponent.d.ts +0 -2
- package/lib/qbsTable/utilities/CardComponent.js +3 -7
- package/lib/qbsTable/utilities/CardMenuDropdown.d.ts +0 -2
- package/lib/qbsTable/utilities/CardMenuDropdown.js +5 -6
- package/lib/qbsTable/utilities/ColumShowHide.d.ts +0 -4
- package/lib/qbsTable/utilities/ColumShowHide.js +6 -9
- package/lib/qbsTable/utilities/SearchInput.d.ts +0 -1
- package/lib/qbsTable/utilities/SearchInput.js +1 -3
- package/lib/qbsTable/utilities/ToolTip.d.ts +1 -8
- package/lib/qbsTable/utilities/ToolTip.js +30 -107
- package/lib/qbsTable/utilities/empty.js +1 -1
- package/lib/qbsTable/utilities/icons.d.ts +0 -3
- package/lib/qbsTable/utilities/icons.js +3 -70
- package/lib/qbsTable/utilities/tablecalc.d.ts +1 -1
- package/lib/qbsTable/utilities/tablecalc.js +2 -7
- package/lib/utils/useCellDescriptor.js +1 -0
- package/lib/utils/useScrollListener.d.ts +0 -1
- package/lib/utils/useScrollListener.js +3 -5
- package/package.json +2 -2
- package/src/Cell.tsx +1 -3
- package/src/HeaderCell.tsx +1 -0
- package/src/Pagination.tsx +3 -10
- package/src/Table.tsx +10 -23
- package/src/customSelect.tsx +88 -88
- package/src/index.ts +1 -1
- package/src/less/pagination.less +9 -9
- package/src/less/qbs-table.less +73 -205
- package/src/qbsTable/CustomTableCell.tsx +9 -31
- package/src/qbsTable/QbsTable.tsx +25 -101
- package/src/qbsTable/TableCardList.tsx +19 -35
- package/src/qbsTable/Toolbar.tsx +11 -53
- package/src/qbsTable/commontypes.ts +1 -32
- package/src/qbsTable/utilities/CardComponent.tsx +2 -7
- package/src/qbsTable/utilities/CardMenuDropdown.tsx +6 -11
- package/src/qbsTable/utilities/ColumShowHide.tsx +6 -33
- package/src/qbsTable/utilities/SearchInput.tsx +1 -3
- package/src/qbsTable/utilities/ToolTip.tsx +27 -138
- package/src/qbsTable/utilities/empty.tsx +2 -2
- package/src/qbsTable/utilities/icons.tsx +1 -78
- package/src/qbsTable/utilities/tablecalc.ts +2 -8
- package/src/utils/useCellDescriptor.ts +1 -0
- package/src/utils/useScrollListener.ts +3 -13
- package/src/utils/useTableRows.ts +1 -1
- package/es/qbsTable/labels.d.ts +0 -48
- package/es/qbsTable/labels.js +0 -34
- package/es/qbsTable/utilities/VerticalDropDownMenu.d.ts +0 -13
- package/es/qbsTable/utilities/VerticalDropDownMenu.js +0 -157
- package/lib/qbsTable/labels.d.ts +0 -48
- package/lib/qbsTable/labels.js +0 -42
- package/lib/qbsTable/utilities/VerticalDropDownMenu.d.ts +0 -13
- package/lib/qbsTable/utilities/VerticalDropDownMenu.js +0 -165
- package/src/qbsTable/labels.ts +0 -58
- package/src/qbsTable/utilities/VerticalDropDownMenu.tsx +0 -178
package/lib/qbsTable/Toolbar.js
CHANGED
|
@@ -8,13 +8,12 @@ var _useResponsiveStore = _interopRequireDefault(require("../utils/useResponsive
|
|
|
8
8
|
var _debounce = _interopRequireDefault(require("./utilities/debounce"));
|
|
9
9
|
var _icons = require("./utilities/icons");
|
|
10
10
|
var _SearchInput = _interopRequireDefault(require("./utilities/SearchInput"));
|
|
11
|
-
var _labels = require("./labels");
|
|
12
11
|
var _tablecalc = require("./utilities/tablecalc");
|
|
13
12
|
var _ToolTip = _interopRequireDefault(require("./utilities/ToolTip"));
|
|
14
13
|
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); }
|
|
15
14
|
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; }
|
|
16
15
|
var ToolBar = function ToolBar(_ref) {
|
|
17
|
-
var
|
|
16
|
+
var _paginationProps$tota, _paginationProps$rows, _paginationProps$curr;
|
|
18
17
|
var pagination = _ref.pagination,
|
|
19
18
|
_ref$paginationProps = _ref.paginationProps,
|
|
20
19
|
paginationProps = _ref$paginationProps === void 0 ? {} : _ref$paginationProps,
|
|
@@ -35,19 +34,7 @@ var ToolBar = function ToolBar(_ref) {
|
|
|
35
34
|
tableViewToggle = _ref.tableViewToggle,
|
|
36
35
|
setTableViewToggle = _ref.setTableViewToggle,
|
|
37
36
|
_ref$enableTableToggl = _ref.enableTableToggle,
|
|
38
|
-
enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl
|
|
39
|
-
_ref$rowViewToggle = _ref.rowViewToggle,
|
|
40
|
-
rowViewToggle = _ref$rowViewToggle === void 0 ? false : _ref$rowViewToggle,
|
|
41
|
-
_ref$defaultRowView = _ref.defaultRowView,
|
|
42
|
-
defaultRowView = _ref$defaultRowView === void 0 ? true : _ref$defaultRowView,
|
|
43
|
-
_ref$fullWidthView = _ref.fullWidthView,
|
|
44
|
-
fullWidthView = _ref$fullWidthView === void 0 ? false : _ref$fullWidthView,
|
|
45
|
-
setTableFullView = _ref.setTableFullView,
|
|
46
|
-
setRowViewToggle = _ref.setRowViewToggle,
|
|
47
|
-
_ref$isFullScreen = _ref.isFullScreen,
|
|
48
|
-
isFullScreen = _ref$isFullScreen === void 0 ? false : _ref$isFullScreen,
|
|
49
|
-
labelsProp = _ref.labels;
|
|
50
|
-
var labels = (0, _labels.mergeLabels)(labelsProp);
|
|
37
|
+
enableTableToggle = _ref$enableTableToggl === void 0 ? false : _ref$enableTableToggl;
|
|
51
38
|
var debouncedOnSearch = (0, _react.useCallback)((0, _debounce["default"])(onSearch != null ? onSearch : function () {}, 1000), [onSearch]);
|
|
52
39
|
var _useState = (0, _react.useState)(searchValue),
|
|
53
40
|
searchParam = _useState[0],
|
|
@@ -96,8 +83,7 @@ var ToolBar = function ToolBar(_ref) {
|
|
|
96
83
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
97
84
|
className: "qbs-table-primary-filter"
|
|
98
85
|
}, search && /*#__PURE__*/_react["default"].createElement(_SearchInput["default"], {
|
|
99
|
-
placeholder: searchPlaceholder != null ? searchPlaceholder :
|
|
100
|
-
searchAriaLabel: labels.searchAriaLabel,
|
|
86
|
+
placeholder: searchPlaceholder != null ? searchPlaceholder : 'Search',
|
|
101
87
|
handleChange: handleChange,
|
|
102
88
|
handleSearch: handleSearch,
|
|
103
89
|
searchValue: searchParam
|
|
@@ -118,45 +104,12 @@ var ToolBar = function ToolBar(_ref) {
|
|
|
118
104
|
strokeLinejoin: "round",
|
|
119
105
|
d: "M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z"
|
|
120
106
|
}))), tableHeaderActions, /*#__PURE__*/_react["default"].createElement("div", {
|
|
121
|
-
className: " pr-1 cursor-pointer relative
|
|
122
|
-
},
|
|
123
|
-
className: "flex gap-2 qbs-row-switch-cntainer"
|
|
124
|
-
}, rowViewToggle && /*#__PURE__*/_react["default"].createElement("div", {
|
|
125
|
-
className: "flex gap-2 table_cell_style"
|
|
126
|
-
}, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
|
|
127
|
-
tableBodyRef: toolbarRef,
|
|
128
|
-
title: labels.switchToDefaultView
|
|
129
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
130
|
-
onClick: function onClick() {
|
|
131
|
-
return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(true);
|
|
132
|
-
}
|
|
133
|
-
}, /*#__PURE__*/_react["default"].createElement(_icons.DefaultView, {
|
|
134
|
-
className: "" + (defaultRowView ? 'active' : '')
|
|
135
|
-
}))), /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
|
|
136
|
-
tableBodyRef: toolbarRef,
|
|
137
|
-
title: labels.switchToRelaxedView
|
|
138
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
139
|
-
onClick: function onClick() {
|
|
140
|
-
return setRowViewToggle === null || setRowViewToggle === void 0 ? void 0 : setRowViewToggle(false);
|
|
141
|
-
}
|
|
142
|
-
}, /*#__PURE__*/_react["default"].createElement(_icons.ContentView, {
|
|
143
|
-
className: "" + (!defaultRowView ? 'active' : '')
|
|
144
|
-
})))), isFullScreen && /*#__PURE__*/_react["default"].createElement("div", {
|
|
145
|
-
className: " table_full_width"
|
|
146
|
-
}, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
|
|
147
|
-
tableBodyRef: toolbarRef,
|
|
148
|
-
title: labels.switchToFullScreen
|
|
149
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
150
|
-
onClick: function onClick() {
|
|
151
|
-
return setTableFullView === null || setTableFullView === void 0 ? void 0 : setTableFullView(!fullWidthView);
|
|
152
|
-
}
|
|
153
|
-
}, /*#__PURE__*/_react["default"].createElement(_icons.ExpandIcon, {
|
|
154
|
-
className: "" + (fullWidthView ? 'active' : '')
|
|
155
|
-
}))))), enableTableToggle && !isMobile && /*#__PURE__*/_react["default"].createElement("div", {
|
|
107
|
+
className: " pr-1 cursor-pointer relative "
|
|
108
|
+
}, enableTableToggle && !isMobile && /*#__PURE__*/_react["default"].createElement("div", {
|
|
156
109
|
className: "qbs-table-top-icons flex gap-2"
|
|
157
110
|
}, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
|
|
158
111
|
tableBodyRef: toolbarRef,
|
|
159
|
-
title:
|
|
112
|
+
title: 'Switch to Table View'
|
|
160
113
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
161
114
|
onClick: function onClick() {
|
|
162
115
|
return setTableViewToggle === null || setTableViewToggle === void 0 ? void 0 : setTableViewToggle(true);
|
|
@@ -171,7 +124,7 @@ var ToolBar = function ToolBar(_ref) {
|
|
|
171
124
|
}
|
|
172
125
|
}, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
|
|
173
126
|
tableBodyRef: toolbarRef,
|
|
174
|
-
title:
|
|
127
|
+
title: 'Switch to Card View'
|
|
175
128
|
}, /*#__PURE__*/_react["default"].createElement(_icons.CardView, {
|
|
176
129
|
className: "" + (!tableViewToggle ? 'active' : '')
|
|
177
130
|
}))))))), isMobile && isOpen && /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -184,27 +137,25 @@ var ToolBar = function ToolBar(_ref) {
|
|
|
184
137
|
className: "qbs-table-toolbar-sub-container-start"
|
|
185
138
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
186
139
|
className: "selected-row"
|
|
187
|
-
},
|
|
140
|
+
}, "Selected Items(" + (checkedKeys === null || checkedKeys === void 0 ? void 0 : checkedKeys.length) + ") "), /*#__PURE__*/_react["default"].createElement("div", {
|
|
188
141
|
className: "selected-row-action"
|
|
189
142
|
}, /*#__PURE__*/_react["default"].createElement("button", {
|
|
190
143
|
className: "btn",
|
|
191
144
|
onClick: function onClick() {
|
|
192
145
|
return onSelect === null || onSelect === void 0 ? void 0 : onSelect([]);
|
|
193
146
|
}
|
|
194
|
-
},
|
|
147
|
+
}, "Clear"), selectedRowActions === null || selectedRowActions === void 0 ? void 0 : selectedRowActions.map(function (actions, index) {
|
|
195
148
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, handleHide(actions) && /*#__PURE__*/_react["default"].createElement("button", {
|
|
196
149
|
key: index.toString(),
|
|
197
|
-
className: "btn
|
|
150
|
+
className: "btn",
|
|
198
151
|
disabled: actions.disabled,
|
|
199
152
|
onClick: function onClick() {
|
|
200
153
|
return actions === null || actions === void 0 ? void 0 : actions.action(checkedKeys);
|
|
201
154
|
}
|
|
202
|
-
},
|
|
203
|
-
className: "mr-2"
|
|
204
|
-
}, actions === null || actions === void 0 ? void 0 : actions.icon), /*#__PURE__*/_react["default"].createElement("span", null, actions.actionTitle)));
|
|
155
|
+
}, actions.actionTitle));
|
|
205
156
|
}))) : /*#__PURE__*/_react["default"].createElement("div", null, pagination && paginationProps && dataLength > 0 && /*#__PURE__*/_react["default"].createElement("div", {
|
|
206
157
|
className: "rows-count"
|
|
207
|
-
}, (0, _tablecalc.getRowDisplayRange)((_paginationProps$tota = paginationProps.total) != null ? _paginationProps$tota : 0, (_paginationProps$rows = paginationProps.rowsPerPage) != null ? _paginationProps$rows : 0, (_paginationProps$curr = paginationProps.currentPage) != null ? _paginationProps$curr : 0
|
|
158
|
+
}, (0, _tablecalc.getRowDisplayRange)((_paginationProps$tota = paginationProps.total) != null ? _paginationProps$tota : 0, (_paginationProps$rows = paginationProps.rowsPerPage) != null ? _paginationProps$rows : 0, (_paginationProps$curr = paginationProps.currentPage) != null ? _paginationProps$curr : 0)))));
|
|
208
159
|
};
|
|
209
160
|
var _default = ToolBar;
|
|
210
161
|
exports["default"] = _default;
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import React, { ReactElement, ReactNode } from 'react';
|
|
2
|
-
import type { QbsTableLabels } from './labels';
|
|
3
|
-
export type { QbsTableLabels };
|
|
4
2
|
interface Content {
|
|
5
3
|
cell: ReactNode | string;
|
|
6
4
|
toolTip?: string;
|
|
@@ -41,7 +39,7 @@ export interface PaginationProps {
|
|
|
41
39
|
export interface ActionProps {
|
|
42
40
|
title?: string;
|
|
43
41
|
action?: (row: any) => void;
|
|
44
|
-
icon
|
|
42
|
+
icon: React.ReactNode;
|
|
45
43
|
toolTip?: string;
|
|
46
44
|
hidden?: boolean;
|
|
47
45
|
hide?: (data: any, index?: number) => boolean;
|
|
@@ -71,7 +69,6 @@ export interface QbsTableProps {
|
|
|
71
69
|
searchValue?: string;
|
|
72
70
|
handleSearchValue?: (value?: string) => void;
|
|
73
71
|
theme?: string;
|
|
74
|
-
rtl?: boolean;
|
|
75
72
|
onRowClick?: (data: any) => void;
|
|
76
73
|
cellBordered?: boolean;
|
|
77
74
|
bordered?: boolean;
|
|
@@ -92,15 +89,12 @@ export interface QbsTableProps {
|
|
|
92
89
|
advancefilter?: ReactElement | ReactNode;
|
|
93
90
|
tableHeaderActions?: ReactElement | ReactNode;
|
|
94
91
|
searchPlaceholder?: string;
|
|
95
|
-
labels?: QbsTableLabels;
|
|
96
92
|
selectedRowActions?: {
|
|
97
93
|
actionTitle?: string;
|
|
98
94
|
action: (checked: (number | string)[]) => void;
|
|
99
95
|
disabled?: boolean;
|
|
100
96
|
hidden?: boolean;
|
|
101
97
|
customHide?: string;
|
|
102
|
-
buttonClassName?: string;
|
|
103
|
-
icon?: ReactElement | ReactNode;
|
|
104
98
|
}[];
|
|
105
99
|
selectedRows?: (number | string)[];
|
|
106
100
|
classes?: {
|
|
@@ -133,20 +127,6 @@ export interface QbsTableProps {
|
|
|
133
127
|
handleTableCardView?: (data: any) => React.ReactNode;
|
|
134
128
|
isCustomTableCardView?: boolean;
|
|
135
129
|
handleCustomCardLoader?: () => React.ReactNode;
|
|
136
|
-
hasMoreData?: boolean;
|
|
137
|
-
loadMoreData?: () => void;
|
|
138
|
-
infiniteScroll?: boolean;
|
|
139
|
-
infiniteLoading?: boolean;
|
|
140
|
-
viewMode?: string;
|
|
141
|
-
rowViewToggle?: boolean;
|
|
142
|
-
defaultRowView?: boolean;
|
|
143
|
-
fullWidthView?: boolean;
|
|
144
|
-
setTableFullView?: (value: boolean) => void;
|
|
145
|
-
setRowViewToggle?: (value: boolean) => void;
|
|
146
|
-
dropType?: 'horizondal' | 'vertical';
|
|
147
|
-
rowHeight?: number;
|
|
148
|
-
isFullScreen?: boolean;
|
|
149
|
-
showHeader?: boolean;
|
|
150
130
|
}
|
|
151
131
|
export interface QbsTableToolbarProps {
|
|
152
132
|
title?: string;
|
|
@@ -171,7 +151,6 @@ export interface QbsTableToolbarProps {
|
|
|
171
151
|
dataLength: number;
|
|
172
152
|
headerHeight?: number;
|
|
173
153
|
searchPlaceholder?: string;
|
|
174
|
-
labels?: QbsTableLabels;
|
|
175
154
|
tableView?: boolean;
|
|
176
155
|
enableTableToggle?: boolean;
|
|
177
156
|
tableViewToggle?: boolean;
|
|
@@ -182,13 +161,6 @@ export interface QbsTableToolbarProps {
|
|
|
182
161
|
disabled?: boolean;
|
|
183
162
|
hidden?: boolean;
|
|
184
163
|
customHide?: string;
|
|
185
|
-
buttonClassName?: string;
|
|
186
|
-
icon?: ReactElement | ReactNode;
|
|
187
164
|
}[];
|
|
188
|
-
rowViewToggle?: boolean;
|
|
189
|
-
defaultRowView?: boolean;
|
|
190
|
-
fullWidthView?: boolean;
|
|
191
|
-
setTableFullView?: (value: boolean) => void;
|
|
192
|
-
setRowViewToggle?: (value: boolean) => void;
|
|
193
|
-
isFullScreen?: boolean;
|
|
194
165
|
}
|
|
166
|
+
export {};
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { QbsColumnProps } from '../commontypes';
|
|
3
|
-
import { type QbsTableLabels } from '../labels';
|
|
4
3
|
type Props = {
|
|
5
4
|
columns: QbsColumnProps[];
|
|
6
5
|
data: any;
|
|
@@ -10,7 +9,6 @@ type Props = {
|
|
|
10
9
|
handleMenuActions?: () => void;
|
|
11
10
|
cardColumLimit?: number;
|
|
12
11
|
childDetailHeading?: string;
|
|
13
|
-
labels?: QbsTableLabels;
|
|
14
12
|
};
|
|
15
13
|
declare const CardComponent: React.FC<Props>;
|
|
16
14
|
export default CardComponent;
|
|
@@ -4,7 +4,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
exports.__esModule = true;
|
|
5
5
|
exports["default"] = void 0;
|
|
6
6
|
var _react = _interopRequireWildcard(require("react"));
|
|
7
|
-
var _labels = require("../labels");
|
|
8
7
|
var _CardMenuDropdown = _interopRequireDefault(require("./CardMenuDropdown"));
|
|
9
8
|
var _handleFormatCell = require("./handleFormatCell");
|
|
10
9
|
var _icons = require("./icons");
|
|
@@ -23,9 +22,7 @@ var CardComponent = function CardComponent(_ref) {
|
|
|
23
22
|
cardColumLimit = _ref$cardColumLimit === void 0 ? 5 : _ref$cardColumLimit,
|
|
24
23
|
handleMenuActions = _ref.handleMenuActions,
|
|
25
24
|
_ref$childDetailHeadi = _ref.childDetailHeading,
|
|
26
|
-
childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi
|
|
27
|
-
labelsProp = _ref.labels;
|
|
28
|
-
var labels = (0, _labels.mergeLabels)(labelsProp);
|
|
25
|
+
childDetailHeading = _ref$childDetailHeadi === void 0 ? '' : _ref$childDetailHeadi;
|
|
29
26
|
var _useState = (0, _react.useState)(false),
|
|
30
27
|
viewMore = _useState[0],
|
|
31
28
|
setViewMore = _useState[1];
|
|
@@ -74,11 +71,10 @@ var CardComponent = function CardComponent(_ref) {
|
|
|
74
71
|
rowData: data,
|
|
75
72
|
iconName: "more",
|
|
76
73
|
rowIndex: index,
|
|
77
|
-
handleMenuActions: handleMenuActions
|
|
78
|
-
labels: labels
|
|
74
|
+
handleMenuActions: handleMenuActions
|
|
79
75
|
})), columns.length > initialDisplayCount && /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
|
|
80
76
|
tableBodyRef: useCardRef,
|
|
81
|
-
title: viewMore ?
|
|
77
|
+
title: viewMore ? ' View Less' : 'View More',
|
|
82
78
|
enabled: false
|
|
83
79
|
}, /*#__PURE__*/_react["default"].createElement("button", {
|
|
84
80
|
onClick: toggleViewMore,
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ActionProps } from '../commontypes';
|
|
3
|
-
import { type QbsTableLabels } from '../labels';
|
|
4
3
|
type Props = {
|
|
5
4
|
iconName: string;
|
|
6
5
|
actionDropDown: ActionProps[];
|
|
@@ -9,7 +8,6 @@ type Props = {
|
|
|
9
8
|
dataTheme?: string;
|
|
10
9
|
tableBodyRef: React.RefObject<HTMLDivElement>;
|
|
11
10
|
rowIndex?: number;
|
|
12
|
-
labels?: QbsTableLabels;
|
|
13
11
|
};
|
|
14
12
|
declare const CardMenuDropdown: React.FC<Props>;
|
|
15
13
|
export default CardMenuDropdown;
|
|
@@ -4,7 +4,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
exports.__esModule = true;
|
|
5
5
|
exports["default"] = void 0;
|
|
6
6
|
var _react = _interopRequireWildcard(require("react"));
|
|
7
|
-
var _labels = require("../labels");
|
|
8
7
|
var _icons = require("./icons");
|
|
9
8
|
var _ToolTip = _interopRequireDefault(require("./ToolTip"));
|
|
10
9
|
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); }
|
|
@@ -12,9 +11,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
12
11
|
var CardMenuDropdown = function CardMenuDropdown(_ref) {
|
|
13
12
|
var actionDropDown = _ref.actionDropDown,
|
|
14
13
|
handleMenuActions = _ref.handleMenuActions,
|
|
15
|
-
rowData = _ref.rowData
|
|
16
|
-
labelsProp = _ref.labels;
|
|
17
|
-
var labels = (0, _labels.mergeLabels)(labelsProp);
|
|
14
|
+
rowData = _ref.rowData;
|
|
18
15
|
var _useState = (0, _react.useState)(false),
|
|
19
16
|
openMenu = _useState[0],
|
|
20
17
|
setOpenMenu = _useState[1];
|
|
@@ -41,6 +38,7 @@ var CardMenuDropdown = function CardMenuDropdown(_ref) {
|
|
|
41
38
|
var dropdownHeight = 200; // Adjust this if your dropdown height varies
|
|
42
39
|
var spaceBelow = window.innerHeight - buttonRect.bottom;
|
|
43
40
|
var spaceAbove = buttonRect.top;
|
|
41
|
+
console.log(spaceAbove, spaceBelow, dropdownHeight);
|
|
44
42
|
if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
|
|
45
43
|
setMenuPositionStyles({
|
|
46
44
|
bottom: '30px',
|
|
@@ -73,8 +71,9 @@ var CardMenuDropdown = function CardMenuDropdown(_ref) {
|
|
|
73
71
|
onClick: toggleMenu,
|
|
74
72
|
ref: menuButtonRef
|
|
75
73
|
}, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
|
|
76
|
-
title:
|
|
77
|
-
enabled: false
|
|
74
|
+
title: "Actions",
|
|
75
|
+
enabled: false,
|
|
76
|
+
ref: menuButtonRef
|
|
78
77
|
}, /*#__PURE__*/_react["default"].createElement(_icons.ThreeDotIcon, null))), openMenu && /*#__PURE__*/_react["default"].createElement("div", {
|
|
79
78
|
className: " qbs-card-dropdown rounded absolute right-0 mt-2 w-auto min-w-11 z-10 shadow-modalShadow bg-white dark:bg-[#424242] dark:text-white",
|
|
80
79
|
style: menuPositionStyles
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { QbsColumnProps } from '../commontypes';
|
|
3
|
-
import { type QbsTableLabels } from '../labels';
|
|
4
3
|
interface ColumnToggleProps {
|
|
5
4
|
columns: QbsColumnProps[];
|
|
6
5
|
onToggle: (columnName: string) => void;
|
|
@@ -10,9 +9,6 @@ interface ColumnToggleProps {
|
|
|
10
9
|
handleColumnToggle?: (columns: QbsColumnProps[]) => void;
|
|
11
10
|
handleResetColumns?: () => void;
|
|
12
11
|
tableHeight?: number;
|
|
13
|
-
viewMode?: string;
|
|
14
|
-
setViewMode?: (value: string) => void;
|
|
15
|
-
labels?: QbsTableLabels;
|
|
16
12
|
}
|
|
17
13
|
declare const ColumnToggle: React.FC<ColumnToggleProps>;
|
|
18
14
|
export default ColumnToggle;
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
exports["default"] = void 0;
|
|
5
5
|
var _react = _interopRequireWildcard(require("react"));
|
|
6
|
-
var _labels = require("../labels");
|
|
7
6
|
var _icons = require("./icons");
|
|
8
7
|
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); }
|
|
9
8
|
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; }
|
|
@@ -16,9 +15,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
|
|
|
16
15
|
handleResetColumns = _ref.handleResetColumns,
|
|
17
16
|
handleColumnToggle = _ref.handleColumnToggle,
|
|
18
17
|
_ref$tableHeight = _ref.tableHeight,
|
|
19
|
-
tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight
|
|
20
|
-
labelsProp = _ref.labels;
|
|
21
|
-
var labels = (0, _labels.mergeLabels)(labelsProp);
|
|
18
|
+
tableHeight = _ref$tableHeight === void 0 ? 450 : _ref$tableHeight;
|
|
22
19
|
var _useState = (0, _react.useState)(null),
|
|
23
20
|
draggedItem = _useState[0],
|
|
24
21
|
setDraggedItem = _useState[1];
|
|
@@ -173,7 +170,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
|
|
|
173
170
|
className: "qbs-table-popup-item"
|
|
174
171
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
175
172
|
className: "qbs-table-popup-label"
|
|
176
|
-
},
|
|
173
|
+
}, "FIXED COLUMNS"), /*#__PURE__*/_react["default"].createElement("div", {
|
|
177
174
|
className: "qbs-table-columns-container"
|
|
178
175
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
179
176
|
className: "qbs-table-column"
|
|
@@ -185,7 +182,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
|
|
|
185
182
|
className: "qbs-table-popup-item"
|
|
186
183
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
187
184
|
className: "qbs-table-popup-label"
|
|
188
|
-
},
|
|
185
|
+
}, "VISIBLE COLUMNS"), /*#__PURE__*/_react["default"].createElement("div", {
|
|
189
186
|
className: "qbs-table-columns-container"
|
|
190
187
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
191
188
|
className: "qbs-table-column"
|
|
@@ -197,7 +194,7 @@ var ColumnToggle = function ColumnToggle(_ref) {
|
|
|
197
194
|
className: "qbs-table-popup-item"
|
|
198
195
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
199
196
|
className: "qbs-table-popup-label"
|
|
200
|
-
},
|
|
197
|
+
}, "AVAILABLE COLUMNS"), /*#__PURE__*/_react["default"].createElement("div", {
|
|
201
198
|
className: "qbs-table-columns-container"
|
|
202
199
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
203
200
|
className: "qbs-table-column"
|
|
@@ -218,13 +215,13 @@ var ColumnToggle = function ColumnToggle(_ref) {
|
|
|
218
215
|
onClick: function onClick() {
|
|
219
216
|
return handleResetColumns === null || handleResetColumns === void 0 ? void 0 : handleResetColumns();
|
|
220
217
|
}
|
|
221
|
-
},
|
|
218
|
+
}, "Reset to default"), /*#__PURE__*/_react["default"].createElement("a", {
|
|
222
219
|
className: "qbs-table-reset-link",
|
|
223
220
|
href: "#",
|
|
224
221
|
onClick: function onClick() {
|
|
225
222
|
return handleColToggle();
|
|
226
223
|
}
|
|
227
|
-
},
|
|
224
|
+
}, "Save"))))));
|
|
228
225
|
};
|
|
229
226
|
var _default = ColumnToggle;
|
|
230
227
|
exports["default"] = _default;
|
|
@@ -7,8 +7,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
7
7
|
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; }
|
|
8
8
|
var SearchInput = function SearchInput(_ref) {
|
|
9
9
|
var placeholder = _ref.placeholder,
|
|
10
|
-
_ref$searchAriaLabel = _ref.searchAriaLabel,
|
|
11
|
-
searchAriaLabel = _ref$searchAriaLabel === void 0 ? 'Search' : _ref$searchAriaLabel,
|
|
12
10
|
handleChange = _ref.handleChange,
|
|
13
11
|
searchValue = _ref.searchValue,
|
|
14
12
|
handleSearch = _ref.handleSearch;
|
|
@@ -32,7 +30,7 @@ var SearchInput = function SearchInput(_ref) {
|
|
|
32
30
|
placeholder: placeholder,
|
|
33
31
|
value: searchValue != null ? searchValue : '',
|
|
34
32
|
onChange: handleInputChange,
|
|
35
|
-
"aria-label":
|
|
33
|
+
"aria-label": "Search"
|
|
36
34
|
}), /*#__PURE__*/_react["default"].createElement("button", {
|
|
37
35
|
className: "search-button absolute left-1 bottom-1.5 bg-white text-grey-dark",
|
|
38
36
|
onClick: function onClick() {
|
|
@@ -1,10 +1,3 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
3
|
-
title?: React.ReactNode;
|
|
4
|
-
children: React.ReactNode;
|
|
5
|
-
tableBodyRef?: React.RefObject<HTMLDivElement | null>;
|
|
6
|
-
/** When false, renders children only (no tooltip). */
|
|
7
|
-
enabled?: boolean;
|
|
8
|
-
};
|
|
9
|
-
declare const TooltipComponent: React.FC<TooltipComponentProps>;
|
|
2
|
+
declare const TooltipComponent: React.FC<any>;
|
|
10
3
|
export default TooltipComponent;
|
|
@@ -1,125 +1,48 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
exports.__esModule = true;
|
|
5
4
|
exports["default"] = void 0;
|
|
6
5
|
var _react = _interopRequireWildcard(require("react"));
|
|
7
|
-
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
8
6
|
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); }
|
|
9
7
|
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; }
|
|
10
|
-
var VIEWPORT_PADDING = 8;
|
|
11
|
-
var TOOLTIP_GAP = 8;
|
|
12
8
|
var TooltipComponent = function TooltipComponent(_ref) {
|
|
13
9
|
var title = _ref.title,
|
|
14
10
|
children = _ref.children,
|
|
15
|
-
tableBodyRef = _ref.tableBodyRef
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
var
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
arrowOffset = _useState5[0],
|
|
35
|
-
setArrowOffset = _useState5[1];
|
|
36
|
-
var triggerRef = (0, _react.useRef)(null);
|
|
37
|
-
var tooltipRef = (0, _react.useRef)(null);
|
|
38
|
-
var updatePosition = (0, _react.useCallback)(function () {
|
|
39
|
-
var _tableBodyRef$current, _tableBodyRef$current2, _trigger$closest;
|
|
40
|
-
var trigger = triggerRef.current;
|
|
41
|
-
var tooltip = tooltipRef.current;
|
|
42
|
-
if (!trigger || !tooltip) {
|
|
43
|
-
return;
|
|
11
|
+
tableBodyRef = _ref.tableBodyRef;
|
|
12
|
+
var _useState = (0, _react.useState)('bottom-position'),
|
|
13
|
+
dropdownPosition = _useState[0],
|
|
14
|
+
setDropdownPosition = _useState[1];
|
|
15
|
+
var dropRef = (0, _react.useRef)(null);
|
|
16
|
+
var menuButtonRef = (0, _react.useRef)(null);
|
|
17
|
+
var adjustDropdownPosition = function adjustDropdownPosition() {
|
|
18
|
+
if (menuButtonRef.current && tableBodyRef !== null && tableBodyRef !== void 0 && tableBodyRef.current) {
|
|
19
|
+
var _menuButtonRef$curren;
|
|
20
|
+
var inputBoxRect = (_menuButtonRef$curren = menuButtonRef.current) === null || _menuButtonRef$curren === void 0 ? void 0 : _menuButtonRef$curren.getBoundingClientRect();
|
|
21
|
+
var tableRect = tableBodyRef.current.getBoundingClientRect();
|
|
22
|
+
// Calculate positions relative to the table
|
|
23
|
+
var spaceAbove = inputBoxRect.top - tableRect.top;
|
|
24
|
+
var spaceBelow = tableRect.bottom - inputBoxRect.bottom;
|
|
25
|
+
if (spaceAbove > spaceBelow) {
|
|
26
|
+
setDropdownPosition('top-position');
|
|
27
|
+
} else {
|
|
28
|
+
setDropdownPosition('bottom-position');
|
|
29
|
+
}
|
|
44
30
|
}
|
|
45
|
-
var triggerRect = trigger.getBoundingClientRect();
|
|
46
|
-
var tooltipRect = tooltip.getBoundingClientRect();
|
|
47
|
-
var boundaryRect = (_tableBodyRef$current = tableBodyRef === null || tableBodyRef === void 0 ? void 0 : (_tableBodyRef$current2 = tableBodyRef.current) === null || _tableBodyRef$current2 === void 0 ? void 0 : _tableBodyRef$current2.getBoundingClientRect()) != null ? _tableBodyRef$current : (_trigger$closest = trigger.closest('.qbs-table')) === null || _trigger$closest === void 0 ? void 0 : _trigger$closest.getBoundingClientRect();
|
|
48
|
-
var spaceAbove = boundaryRect ? triggerRect.top - boundaryRect.top : triggerRect.top;
|
|
49
|
-
var spaceBelow = boundaryRect ? boundaryRect.bottom - triggerRect.bottom : window.innerHeight - triggerRect.bottom;
|
|
50
|
-
var nextPlacement = spaceBelow >= tooltipRect.height + TOOLTIP_GAP || spaceBelow >= spaceAbove ? 'down' : 'up';
|
|
51
|
-
var triggerCenter = triggerRect.left + triggerRect.width / 2;
|
|
52
|
-
var left = triggerCenter - tooltipRect.width / 2;
|
|
53
|
-
if (left < VIEWPORT_PADDING) {
|
|
54
|
-
left = VIEWPORT_PADDING;
|
|
55
|
-
} else if (left + tooltipRect.width > window.innerWidth - VIEWPORT_PADDING) {
|
|
56
|
-
left = window.innerWidth - VIEWPORT_PADDING - tooltipRect.width;
|
|
57
|
-
}
|
|
58
|
-
var top = nextPlacement === 'down' ? triggerRect.bottom + TOOLTIP_GAP : triggerRect.top - tooltipRect.height - TOOLTIP_GAP;
|
|
59
|
-
setPlacement(nextPlacement);
|
|
60
|
-
setCoords({
|
|
61
|
-
top: top,
|
|
62
|
-
left: left
|
|
63
|
-
});
|
|
64
|
-
setArrowOffset(triggerCenter - left);
|
|
65
|
-
setPositioned(true);
|
|
66
|
-
}, [tableBodyRef]);
|
|
67
|
-
var showTooltip = function showTooltip() {
|
|
68
|
-
setPositioned(false);
|
|
69
|
-
setVisible(true);
|
|
70
|
-
};
|
|
71
|
-
var hideTooltip = function hideTooltip() {
|
|
72
|
-
setVisible(false);
|
|
73
|
-
setPositioned(false);
|
|
74
31
|
};
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
updatePosition();
|
|
80
|
-
var frame = window.requestAnimationFrame(updatePosition);
|
|
81
|
-
return function () {
|
|
82
|
-
return window.cancelAnimationFrame(frame);
|
|
83
|
-
};
|
|
84
|
-
}, [visible, title, updatePosition]);
|
|
85
|
-
(0, _react.useEffect)(function () {
|
|
86
|
-
if (!visible) {
|
|
87
|
-
return;
|
|
88
|
-
}
|
|
89
|
-
var handleReposition = function handleReposition() {
|
|
90
|
-
return updatePosition();
|
|
91
|
-
};
|
|
92
|
-
window.addEventListener('resize', handleReposition);
|
|
93
|
-
window.addEventListener('scroll', handleReposition, true);
|
|
94
|
-
return function () {
|
|
95
|
-
window.removeEventListener('resize', handleReposition);
|
|
96
|
-
window.removeEventListener('scroll', handleReposition, true);
|
|
97
|
-
};
|
|
98
|
-
}, [visible, updatePosition]);
|
|
99
|
-
if (!title || enabled === false) {
|
|
100
|
-
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, children);
|
|
101
|
-
}
|
|
102
|
-
var portalRoot = typeof document !== 'undefined' ? document.body : null;
|
|
103
|
-
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", {
|
|
104
|
-
ref: triggerRef,
|
|
105
|
-
className: "qbs-table-tooltip-trigger",
|
|
32
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
33
|
+
className: "qbs-table-tooltip " + (dropdownPosition == 'bottom-position' ? 'down' : 'up') + " "
|
|
34
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
35
|
+
ref: menuButtonRef,
|
|
106
36
|
style: {
|
|
107
|
-
display: '
|
|
37
|
+
display: 'flex'
|
|
108
38
|
},
|
|
109
|
-
onMouseEnter:
|
|
110
|
-
|
|
111
|
-
onFocus: showTooltip,
|
|
112
|
-
onBlur: hideTooltip
|
|
113
|
-
}, children), visible && portalRoot && /*#__PURE__*/_reactDom["default"].createPortal(/*#__PURE__*/_react["default"].createElement("span", {
|
|
114
|
-
ref: tooltipRef,
|
|
115
|
-
role: "tooltip",
|
|
116
|
-
className: "qbs-table-tooltip-floating tooltiptext qbs-table-tooltip-floating--" + placement + " " + (positioned ? 'is-positioned' : ''),
|
|
117
|
-
style: {
|
|
118
|
-
top: coords.top,
|
|
119
|
-
left: coords.left,
|
|
120
|
-
'--tooltip-arrow-offset': arrowOffset + "px"
|
|
39
|
+
onMouseEnter: function onMouseEnter() {
|
|
40
|
+
return adjustDropdownPosition();
|
|
121
41
|
}
|
|
122
|
-
},
|
|
42
|
+
}, children), /*#__PURE__*/_react["default"].createElement("span", {
|
|
43
|
+
ref: dropRef,
|
|
44
|
+
className: 'tooltiptext'
|
|
45
|
+
}, title));
|
|
123
46
|
};
|
|
124
47
|
var _default = TooltipComponent;
|
|
125
48
|
exports["default"] = _default;
|
|
@@ -75,7 +75,7 @@ var NoData = function NoData(_ref) {
|
|
|
75
75
|
}), /*#__PURE__*/_react["default"].createElement("path", {
|
|
76
76
|
fill: "#797979",
|
|
77
77
|
d: "M47.365 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 57.417a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.415.927.926.927zM104.183 52.974a.926.926 0 00.926-.927V50.27a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 44.088a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 39.645a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 10-1.852 0v1.777c0 .512.415.927.926.927zM104.183 35.202a.926.926 0 00.926-.927v-1.777a.926.926 0 00-1.852 0v1.777c0 .512.414.927.926.927zM47.365 30.758a.926.926 0 00.926-.926v-.888c0-.248.02-.49.057-.726a.926.926 0 00-1.83-.288c-.052.33-.08.67-.08 1.014v.888c0 .512.416.926.927.926zM104.183 30.758a.926.926 0 00.926-.926v-.888c0-.345-.027-.683-.079-1.014a.926.926 0 10-1.83.288c.037.236.057.478.057.726v.888c0 .512.414.926.926.926zM47.881 26.426a.926.926 0 001.294-.204c.286-.394.633-.74 1.026-1.026a.926.926 0 00-1.09-1.498c-.55.4-1.034.884-1.434 1.434a.926.926 0 00.204 1.294zM103.667 26.426a.926.926 0 00.204-1.294 6.509 6.509 0 00-1.434-1.434.926.926 0 00-1.09 1.498c.393.286.74.632 1.026 1.026a.926.926 0 001.294.204zM51.138 23.597c.08.506.554.851 1.059.772a4.67 4.67 0 01.726-.057h.914a.926.926 0 000-1.852h-.914c-.344 0-.683.026-1.014.078a.926.926 0 00-.77 1.06zM100.41 23.597a.927.927 0 00-.771-1.059 6.522 6.522 0 00-1.014-.078h-.914a.926.926 0 100 1.852h.914c.248 0 .49.02.726.057a.926.926 0 001.059-.772zM55.653 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H56.58a.926.926 0 00-.926.926zM60.223 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H61.15a.926.926 0 00-.926.926zM64.793 23.386c0 .511.415.926.926.926h1.829a.926.926 0 000-1.852h-1.829a.926.926 0 00-.926.926zM69.364 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H70.29a.926.926 0 00-.927.926zM73.934 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852H74.86a.926.926 0 00-.926.926zM78.504 23.386c0 .511.415.926.926.926h1.828a.926.926 0 000-1.852H79.43a.926.926 0 00-.926.926zM83.074 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H84a.926.926 0 00-.927.926zM87.644 23.386c0 .511.415.926.927.926h1.828a.926.926 0 000-1.852H88.57a.926.926 0 00-.927.926zM92.215 23.386c0 .511.414.926.926.926h1.828a.926.926 0 000-1.852h-1.828a.926.926 0 00-.926.926zM72.178 36.453a1.39 1.39 0 10-1.965 1.965l3.797 3.797-3.797 3.798a1.39 1.39 0 001.965 1.965l3.797-3.798 3.798 3.798a1.39 1.39 0 001.965-1.965l-3.798-3.798 3.798-3.797a1.39 1.39 0 10-1.965-1.965l-3.798 3.797-3.797-3.797z"
|
|
78
|
-
})), ' '), /*#__PURE__*/_react["default"].createElement("p", {
|
|
78
|
+
})), " ", ' '), /*#__PURE__*/_react["default"].createElement("p", {
|
|
79
79
|
className: "text-center text-common font-bold text-blackAlt nodata-title"
|
|
80
80
|
}, title), /*#__PURE__*/_react["default"].createElement("span", {
|
|
81
81
|
className: "text-xxs font-medium text-grey-medium nodata-sub-title"
|
|
@@ -6,6 +6,3 @@ export declare const TableIcon: React.FC<any>;
|
|
|
6
6
|
export declare const CardIcon: React.FC<any>;
|
|
7
7
|
export declare const CardView: React.FC<any>;
|
|
8
8
|
export declare const TableView: React.FC<any>;
|
|
9
|
-
export declare const ExpandIcon: React.FC<any>;
|
|
10
|
-
export declare const ContentView: React.FC<any>;
|
|
11
|
-
export declare const DefaultView: React.FC<any>;
|