qbs-react-grid 2.2.5 → 2.2.6
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/qbsTable/CustomTableCell.js +23 -8
- package/es/qbsTable/QbsTable.js +4 -2
- package/es/qbsTable/TableCardList.js +4 -2
- package/es/qbsTable/commontypes.d.ts +1 -0
- package/es/qbsTable/utilities/VerticalDropDownMenu.d.ts +11 -0
- package/es/qbsTable/utilities/VerticalDropDownMenu.js +165 -0
- package/lib/qbsTable/CustomTableCell.js +23 -8
- package/lib/qbsTable/QbsTable.js +4 -2
- package/lib/qbsTable/TableCardList.js +4 -2
- package/lib/qbsTable/commontypes.d.ts +1 -0
- package/lib/qbsTable/utilities/VerticalDropDownMenu.d.ts +11 -0
- package/lib/qbsTable/utilities/VerticalDropDownMenu.js +173 -0
- package/package.json +9 -1
- package/src/qbsTable/CustomTableCell.tsx +24 -6
- package/src/qbsTable/QbsTable.tsx +3 -1
- package/src/qbsTable/TableCardList.tsx +3 -1
- package/src/qbsTable/commontypes.ts +1 -0
- package/src/qbsTable/utilities/VerticalDropDownMenu.tsx +193 -0
package/es/qbsTable/QbsTable.js
CHANGED
|
@@ -106,7 +106,8 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
106
106
|
_ref$isCustomTableCar = _ref.isCustomTableCardView,
|
|
107
107
|
isCustomTableCardView = _ref$isCustomTableCar === void 0 ? false : _ref$isCustomTableCar,
|
|
108
108
|
handleTableCardView = _ref.handleTableCardView,
|
|
109
|
-
handleCustomCardLoader = _ref.handleCustomCardLoader
|
|
109
|
+
handleCustomCardLoader = _ref.handleCustomCardLoader,
|
|
110
|
+
dropType = _ref.dropType;
|
|
110
111
|
var _useState = useState(false),
|
|
111
112
|
loading = _useState[0],
|
|
112
113
|
setLoading = _useState[1];
|
|
@@ -704,7 +705,8 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
704
705
|
actionProps: actionProps,
|
|
705
706
|
className: classes.cellClass + " " + classes.actionCellClass,
|
|
706
707
|
handleMenuActions: handleMenuActions,
|
|
707
|
-
dataTheme: dataTheme
|
|
708
|
+
dataTheme: dataTheme,
|
|
709
|
+
dropType: dropType
|
|
708
710
|
}))) : /*#__PURE__*/React.createElement("div", {
|
|
709
711
|
className: isCustomTableCardView && ((data === null || data === void 0 ? void 0 : data.length) === 0 || !data) && !isLoading ? 'qbs-card-empty-wrapper' : isCustomTableCardView ? 'qbs-card-wrapper' : ' p-2',
|
|
710
712
|
style: {
|
|
@@ -91,7 +91,8 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
91
91
|
_renderEmpty = _ref.renderEmpty,
|
|
92
92
|
autoHeight = _ref.autoHeight,
|
|
93
93
|
emptySubTitle = _ref.emptySubTitle,
|
|
94
|
-
emptyTitle = _ref.emptyTitle
|
|
94
|
+
emptyTitle = _ref.emptyTitle,
|
|
95
|
+
dropType = _ref.dropType;
|
|
95
96
|
var _useState = useState(false),
|
|
96
97
|
loading = _useState[0],
|
|
97
98
|
setLoading = _useState[1];
|
|
@@ -563,7 +564,8 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
563
564
|
actionProps: actionProps,
|
|
564
565
|
className: classes.cellClass + " " + classes.actionCellClass,
|
|
565
566
|
handleMenuActions: handleMenuActions,
|
|
566
|
-
dataTheme: dataTheme
|
|
567
|
+
dataTheme: dataTheme,
|
|
568
|
+
dropType: dropType
|
|
567
569
|
}))), /*#__PURE__*/React.createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/React.createElement(Pagination, {
|
|
568
570
|
paginationProps: paginationProps
|
|
569
571
|
}))));
|
|
@@ -82,6 +82,7 @@ export interface QbsTableProps {
|
|
|
82
82
|
expandedRowKeys?: readonly number[];
|
|
83
83
|
setExpandedRowKeys?: (value: readonly number[]) => void;
|
|
84
84
|
handleMenuActions?: (actions: ActionProps, rowData: any) => void;
|
|
85
|
+
dropType?: 'vertical' | string;
|
|
85
86
|
handleRowExpanded?: (rowData: any) => React.ReactNode;
|
|
86
87
|
shouldUpdateScroll?: boolean;
|
|
87
88
|
rowExpand?: boolean;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ActionProps } from '../commontypes';
|
|
3
|
+
type VerticalMenuDropdownProps = {
|
|
4
|
+
actionDropDown?: readonly ActionProps[];
|
|
5
|
+
handleMenuActions?: (actions: ActionProps, rowData: any) => void;
|
|
6
|
+
rowData: any;
|
|
7
|
+
tableBodyRef?: React.RefObject<HTMLDivElement>;
|
|
8
|
+
rowIndex?: number;
|
|
9
|
+
};
|
|
10
|
+
declare const VerticalMenuDropdown: React.FC<VerticalMenuDropdownProps>;
|
|
11
|
+
export default VerticalMenuDropdown;
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
2
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
3
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
4
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
5
|
+
import ReactDOM from 'react-dom';
|
|
6
|
+
import { ThreeDotIcon } from './icons';
|
|
7
|
+
import TooltipComponent from './ToolTip';
|
|
8
|
+
var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
|
|
9
|
+
var _actionDropDown$filte2, _document$getElementB;
|
|
10
|
+
var actionDropDown = _ref.actionDropDown,
|
|
11
|
+
handleMenuActions = _ref.handleMenuActions,
|
|
12
|
+
rowData = _ref.rowData,
|
|
13
|
+
tableBodyRef = _ref.tableBodyRef,
|
|
14
|
+
rowIndex = _ref.rowIndex;
|
|
15
|
+
var _useState = useState(false),
|
|
16
|
+
openMenu = _useState[0],
|
|
17
|
+
setOpenMenu = _useState[1];
|
|
18
|
+
var _useState2 = useState({
|
|
19
|
+
top: 0,
|
|
20
|
+
left: 0
|
|
21
|
+
}),
|
|
22
|
+
position = _useState2[0],
|
|
23
|
+
setPosition = _useState2[1];
|
|
24
|
+
var menuButtonRef = useRef(null);
|
|
25
|
+
var menuRef = useRef(null);
|
|
26
|
+
var updateMenuPosition = function updateMenuPosition() {
|
|
27
|
+
var _actionDropDown$filte;
|
|
28
|
+
if (!menuButtonRef.current) return;
|
|
29
|
+
var rect = menuButtonRef.current.getBoundingClientRect();
|
|
30
|
+
var viewportPadding = 8;
|
|
31
|
+
var menuGap = 4;
|
|
32
|
+
var visibleItems = (_actionDropDown$filte = actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
|
|
33
|
+
var _item$hide$call, _item$hide;
|
|
34
|
+
return !item.hidden && !((_item$hide$call = (_item$hide = item.hide) === null || _item$hide === void 0 ? void 0 : _item$hide.call(item, rowData, rowIndex)) != null ? _item$hide$call : false);
|
|
35
|
+
})) != null ? _actionDropDown$filte : [];
|
|
36
|
+
var menuWidth = menuRef.current && menuRef.current.offsetWidth > 0 ? menuRef.current.offsetWidth : Math.max(120, visibleItems.length * 48);
|
|
37
|
+
var menuHeight = visibleItems.length * 40;
|
|
38
|
+
var spaceBelow = window.innerHeight - rect.bottom;
|
|
39
|
+
var openBelow = spaceBelow >= menuHeight + menuGap;
|
|
40
|
+
var left = rect.left;
|
|
41
|
+
if (left + menuWidth > window.innerWidth - viewportPadding) {
|
|
42
|
+
left = Math.max(viewportPadding, rect.right - menuWidth);
|
|
43
|
+
}
|
|
44
|
+
setPosition({
|
|
45
|
+
top: openBelow ? rect.bottom + menuGap : rect.top - menuHeight - menuGap,
|
|
46
|
+
left: left
|
|
47
|
+
});
|
|
48
|
+
};
|
|
49
|
+
useEffect(function () {
|
|
50
|
+
if (!openMenu) return;
|
|
51
|
+
updateMenuPosition();
|
|
52
|
+
var frame = requestAnimationFrame(function () {
|
|
53
|
+
return updateMenuPosition();
|
|
54
|
+
});
|
|
55
|
+
var resizeObserver = menuRef.current && typeof ResizeObserver !== 'undefined' ? new ResizeObserver(function () {
|
|
56
|
+
return updateMenuPosition();
|
|
57
|
+
}) : null;
|
|
58
|
+
if (resizeObserver && menuRef.current) {
|
|
59
|
+
resizeObserver.observe(menuRef.current);
|
|
60
|
+
}
|
|
61
|
+
return function () {
|
|
62
|
+
cancelAnimationFrame(frame);
|
|
63
|
+
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
|
|
64
|
+
};
|
|
65
|
+
}, [openMenu]);
|
|
66
|
+
useEffect(function () {
|
|
67
|
+
if (!openMenu) return;
|
|
68
|
+
var handleClickOutside = function handleClickOutside(event) {
|
|
69
|
+
var _menuRef$current, _menuButtonRef$curren;
|
|
70
|
+
var target = event.target;
|
|
71
|
+
if ((_menuRef$current = menuRef.current) !== null && _menuRef$current !== void 0 && _menuRef$current.contains(target) || (_menuButtonRef$curren = menuButtonRef.current) !== null && _menuButtonRef$curren !== void 0 && _menuButtonRef$curren.contains(target)) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
setOpenMenu(false);
|
|
75
|
+
};
|
|
76
|
+
var handleScroll = function handleScroll() {
|
|
77
|
+
return setOpenMenu(false);
|
|
78
|
+
};
|
|
79
|
+
document.addEventListener('click', handleClickOutside);
|
|
80
|
+
window.addEventListener('scroll', handleScroll, true);
|
|
81
|
+
return function () {
|
|
82
|
+
document.removeEventListener('click', handleClickOutside);
|
|
83
|
+
window.removeEventListener('scroll', handleScroll, true);
|
|
84
|
+
};
|
|
85
|
+
}, [openMenu]);
|
|
86
|
+
useEffect(function () {
|
|
87
|
+
var scrollbarHandle = document.querySelector('.rs-table-scrollbar-handle');
|
|
88
|
+
if (!scrollbarHandle) return;
|
|
89
|
+
var observer = new MutationObserver(function (mutations) {
|
|
90
|
+
for (var _iterator = _createForOfIteratorHelperLoose(mutations), _step; !(_step = _iterator()).done;) {
|
|
91
|
+
var mutation = _step.value;
|
|
92
|
+
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
|
|
93
|
+
setOpenMenu(false);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
observer.observe(scrollbarHandle, {
|
|
98
|
+
attributes: true,
|
|
99
|
+
attributeFilter: ['style']
|
|
100
|
+
});
|
|
101
|
+
return function () {
|
|
102
|
+
return observer.disconnect();
|
|
103
|
+
};
|
|
104
|
+
}, [openMenu]);
|
|
105
|
+
var handleMenuItemClick = function handleMenuItemClick(slug) {
|
|
106
|
+
var _slug$action;
|
|
107
|
+
handleMenuActions === null || handleMenuActions === void 0 ? void 0 : handleMenuActions(slug, rowData);
|
|
108
|
+
(_slug$action = slug.action) === null || _slug$action === void 0 ? void 0 : _slug$action.call(slug, rowData);
|
|
109
|
+
setOpenMenu(false);
|
|
110
|
+
};
|
|
111
|
+
var visibleCount = (_actionDropDown$filte2 = actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
|
|
112
|
+
var _item$hide$call2, _item$hide2;
|
|
113
|
+
return !item.hidden && !((_item$hide$call2 = (_item$hide2 = item.hide) === null || _item$hide2 === void 0 ? void 0 : _item$hide2.call(item, rowData, rowIndex)) != null ? _item$hide$call2 : false);
|
|
114
|
+
}).length) != null ? _actionDropDown$filte2 : 0;
|
|
115
|
+
var portalTarget = (_document$getElementB = document.getElementById('portal-root')) != null ? _document$getElementB : document.body;
|
|
116
|
+
var dropdownContent = /*#__PURE__*/React.createElement("div", {
|
|
117
|
+
className: "absolute z-[60] min-w-48 rounded-md vertical-menu-dropdown-content",
|
|
118
|
+
ref: menuRef,
|
|
119
|
+
style: {
|
|
120
|
+
top: position.top,
|
|
121
|
+
left: position.left,
|
|
122
|
+
position: 'fixed',
|
|
123
|
+
minWidth: 120,
|
|
124
|
+
width: 'max-content'
|
|
125
|
+
}
|
|
126
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
127
|
+
className: "py-1"
|
|
128
|
+
}, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
|
|
129
|
+
var _item$hide$call3, _item$hide3;
|
|
130
|
+
return !item.hidden && !((_item$hide$call3 = (_item$hide3 = item.hide) === null || _item$hide3 === void 0 ? void 0 : _item$hide3.call(item, rowData, rowIndex)) != null ? _item$hide$call3 : false) ? /*#__PURE__*/React.createElement("div", {
|
|
131
|
+
key: item.title,
|
|
132
|
+
className: "vertical-menu-item px-4 py-2 text-sm text-base-black hover:bg-gray-light-1 cursor-pointer flex items-center gap-2 transition-colors",
|
|
133
|
+
onClick: function onClick(e) {
|
|
134
|
+
var _item$action;
|
|
135
|
+
e.preventDefault();
|
|
136
|
+
(_item$action = item.action) === null || _item$action === void 0 ? void 0 : _item$action.call(item, item);
|
|
137
|
+
handleMenuItemClick(item);
|
|
138
|
+
}
|
|
139
|
+
}, /*#__PURE__*/React.createElement(TooltipComponent, {
|
|
140
|
+
title: item.toolTip,
|
|
141
|
+
tableBodyRef: tableBodyRef
|
|
142
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
143
|
+
className: "vertical-menu-icon-title flex items-center gap-2"
|
|
144
|
+
}, item.icon && /*#__PURE__*/React.createElement("span", {
|
|
145
|
+
className: "vertical-menu-icon"
|
|
146
|
+
}, item.icon), /*#__PURE__*/React.createElement("span", {
|
|
147
|
+
className: "vertical-menu-title"
|
|
148
|
+
}, item.title)))) : null;
|
|
149
|
+
})));
|
|
150
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
151
|
+
className: "inline-block vertical-menu-dropdown-wrapper"
|
|
152
|
+
}, visibleCount > 0 && /*#__PURE__*/React.createElement("button", {
|
|
153
|
+
type: "button",
|
|
154
|
+
className: "vertical-menu-trigger-button p-2 rounded text-base-gray hover:bg-gray-light-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
|
|
155
|
+
onClick: function onClick(event) {
|
|
156
|
+
event.stopPropagation();
|
|
157
|
+
if (!openMenu) updateMenuPosition();
|
|
158
|
+
setOpenMenu(function (prev) {
|
|
159
|
+
return !prev;
|
|
160
|
+
});
|
|
161
|
+
},
|
|
162
|
+
ref: menuButtonRef
|
|
163
|
+
}, /*#__PURE__*/React.createElement(ThreeDotIcon, null))), openMenu && portalTarget && /*#__PURE__*/ReactDOM.createPortal(dropdownContent, portalTarget));
|
|
164
|
+
};
|
|
165
|
+
export default VerticalMenuDropdown;
|
|
@@ -10,10 +10,12 @@ var _reactRouterDom = require("react-router-dom");
|
|
|
10
10
|
var _Cell = _interopRequireDefault(require("../Cell"));
|
|
11
11
|
var _handleFormatCell = require("./utilities/handleFormatCell");
|
|
12
12
|
var _menuDropDown = _interopRequireDefault(require("./utilities/menuDropDown"));
|
|
13
|
+
var _VerticalDropDownMenu = _interopRequireDefault(require("./utilities/VerticalDropDownMenu"));
|
|
13
14
|
var _excluded = ["rowData", "onChange", "checkedKeys", "dataKey", "dataTheme"],
|
|
14
|
-
_excluded2 = ["rowData", "
|
|
15
|
-
_excluded3 = ["rowData", "
|
|
16
|
-
_excluded4 = ["rowData", "
|
|
15
|
+
_excluded2 = ["rowData", "handleMenuActions", "dataTheme", "actionProps", "tableBodyRef", "rowIndex", "dropType"],
|
|
16
|
+
_excluded3 = ["rowData", "dataKey", "expandedRowKeys", "onChange"],
|
|
17
|
+
_excluded4 = ["rowData", "renderCell", "toolTip", "hideLink", "dataKey", "onChange", "rowClick", "type", "path", "link"],
|
|
18
|
+
_excluded5 = ["rowData", "getToolTip", "dataKey", "onChange", "rowClick", "getIcon", "path", "link"];
|
|
17
19
|
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); }
|
|
18
20
|
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; }
|
|
19
21
|
var CHECKBOX_LINE_HEIGHT = '36px';
|
|
@@ -61,8 +63,21 @@ var ActionCell = /*#__PURE__*/_react["default"].memo(function (_ref2) {
|
|
|
61
63
|
dataTheme = _ref2.dataTheme,
|
|
62
64
|
actionProps = _ref2.actionProps,
|
|
63
65
|
tableBodyRef = _ref2.tableBodyRef,
|
|
64
|
-
rowIndex = _ref2.rowIndex
|
|
65
|
-
|
|
66
|
+
rowIndex = _ref2.rowIndex,
|
|
67
|
+
dropType = _ref2.dropType,
|
|
68
|
+
props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded2);
|
|
69
|
+
return /*#__PURE__*/_react["default"].createElement(_Cell["default"], (0, _extends2["default"])({}, props, {
|
|
70
|
+
dataTheme: dataTheme,
|
|
71
|
+
style: {
|
|
72
|
+
padding: 0
|
|
73
|
+
}
|
|
74
|
+
}), dropType === 'vertical' ? /*#__PURE__*/_react["default"].createElement(_VerticalDropDownMenu["default"], {
|
|
75
|
+
tableBodyRef: tableBodyRef,
|
|
76
|
+
actionDropDown: actionProps,
|
|
77
|
+
rowData: rowData,
|
|
78
|
+
rowIndex: rowIndex,
|
|
79
|
+
handleMenuActions: handleMenuActions
|
|
80
|
+
}) : /*#__PURE__*/_react["default"].createElement(_menuDropDown["default"], {
|
|
66
81
|
tableBodyRef: tableBodyRef,
|
|
67
82
|
actionDropDown: actionProps,
|
|
68
83
|
rowData: rowData,
|
|
@@ -77,7 +92,7 @@ var ExpandCell = /*#__PURE__*/_react["default"].memo(function (_ref3) {
|
|
|
77
92
|
dataKey = _ref3.dataKey,
|
|
78
93
|
expandedRowKeys = _ref3.expandedRowKeys,
|
|
79
94
|
onChange = _ref3.onChange,
|
|
80
|
-
props = (0, _objectWithoutPropertiesLoose2["default"])(_ref3,
|
|
95
|
+
props = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, _excluded3);
|
|
81
96
|
return /*#__PURE__*/_react["default"].createElement(_Cell["default"], props, /*#__PURE__*/_react["default"].createElement("button", {
|
|
82
97
|
onClick: function onClick() {
|
|
83
98
|
onChange(rowData);
|
|
@@ -121,7 +136,7 @@ var CustomTableCell = /*#__PURE__*/_react["default"].memo(function (_ref4) {
|
|
|
121
136
|
type = _ref4.type,
|
|
122
137
|
path = _ref4.path,
|
|
123
138
|
link = _ref4.link,
|
|
124
|
-
props = (0, _objectWithoutPropertiesLoose2["default"])(_ref4,
|
|
139
|
+
props = (0, _objectWithoutPropertiesLoose2["default"])(_ref4, _excluded4);
|
|
125
140
|
return /*#__PURE__*/_react["default"].createElement(_Cell["default"], (0, _extends2["default"])({}, props, {
|
|
126
141
|
dataKey: dataKey
|
|
127
142
|
}), link && !path && !(hideLink !== null && hideLink !== void 0 && hideLink(rowData)) ? /*#__PURE__*/_react["default"].createElement("a", {
|
|
@@ -145,7 +160,7 @@ var CustomRowStatus = /*#__PURE__*/_react["default"].memo(function (_ref5) {
|
|
|
145
160
|
getIcon = _ref5.getIcon,
|
|
146
161
|
path = _ref5.path,
|
|
147
162
|
link = _ref5.link,
|
|
148
|
-
props = (0, _objectWithoutPropertiesLoose2["default"])(_ref5,
|
|
163
|
+
props = (0, _objectWithoutPropertiesLoose2["default"])(_ref5, _excluded5);
|
|
149
164
|
var _useState = (0, _react.useState)('bottom-position'),
|
|
150
165
|
dropdownPosition = _useState[0],
|
|
151
166
|
setDropdownPosition = _useState[1];
|
package/lib/qbsTable/QbsTable.js
CHANGED
|
@@ -112,7 +112,8 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
112
112
|
_ref$isCustomTableCar = _ref.isCustomTableCardView,
|
|
113
113
|
isCustomTableCardView = _ref$isCustomTableCar === void 0 ? false : _ref$isCustomTableCar,
|
|
114
114
|
handleTableCardView = _ref.handleTableCardView,
|
|
115
|
-
handleCustomCardLoader = _ref.handleCustomCardLoader
|
|
115
|
+
handleCustomCardLoader = _ref.handleCustomCardLoader,
|
|
116
|
+
dropType = _ref.dropType;
|
|
116
117
|
var _useState = (0, _react.useState)(false),
|
|
117
118
|
loading = _useState[0],
|
|
118
119
|
setLoading = _useState[1];
|
|
@@ -710,7 +711,8 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
710
711
|
actionProps: actionProps,
|
|
711
712
|
className: classes.cellClass + " " + classes.actionCellClass,
|
|
712
713
|
handleMenuActions: handleMenuActions,
|
|
713
|
-
dataTheme: dataTheme
|
|
714
|
+
dataTheme: dataTheme,
|
|
715
|
+
dropType: dropType
|
|
714
716
|
}))) : /*#__PURE__*/_react["default"].createElement("div", {
|
|
715
717
|
className: isCustomTableCardView && ((data === null || data === void 0 ? void 0 : data.length) === 0 || !data) && !isLoading ? 'qbs-card-empty-wrapper' : isCustomTableCardView ? 'qbs-card-wrapper' : ' p-2',
|
|
716
718
|
style: {
|
|
@@ -97,7 +97,8 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
97
97
|
_renderEmpty = _ref.renderEmpty,
|
|
98
98
|
autoHeight = _ref.autoHeight,
|
|
99
99
|
emptySubTitle = _ref.emptySubTitle,
|
|
100
|
-
emptyTitle = _ref.emptyTitle
|
|
100
|
+
emptyTitle = _ref.emptyTitle,
|
|
101
|
+
dropType = _ref.dropType;
|
|
101
102
|
var _useState = (0, _react.useState)(false),
|
|
102
103
|
loading = _useState[0],
|
|
103
104
|
setLoading = _useState[1];
|
|
@@ -569,7 +570,8 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
569
570
|
actionProps: actionProps,
|
|
570
571
|
className: classes.cellClass + " " + classes.actionCellClass,
|
|
571
572
|
handleMenuActions: handleMenuActions,
|
|
572
|
-
dataTheme: dataTheme
|
|
573
|
+
dataTheme: dataTheme,
|
|
574
|
+
dropType: dropType
|
|
573
575
|
}))), /*#__PURE__*/_react["default"].createElement("div", null, pagination && (data === null || data === void 0 ? void 0 : data.length) > 0 && /*#__PURE__*/_react["default"].createElement(_Pagination["default"], {
|
|
574
576
|
paginationProps: paginationProps
|
|
575
577
|
}))));
|
|
@@ -82,6 +82,7 @@ export interface QbsTableProps {
|
|
|
82
82
|
expandedRowKeys?: readonly number[];
|
|
83
83
|
setExpandedRowKeys?: (value: readonly number[]) => void;
|
|
84
84
|
handleMenuActions?: (actions: ActionProps, rowData: any) => void;
|
|
85
|
+
dropType?: 'vertical' | string;
|
|
85
86
|
handleRowExpanded?: (rowData: any) => React.ReactNode;
|
|
86
87
|
shouldUpdateScroll?: boolean;
|
|
87
88
|
rowExpand?: boolean;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ActionProps } from '../commontypes';
|
|
3
|
+
type VerticalMenuDropdownProps = {
|
|
4
|
+
actionDropDown?: readonly ActionProps[];
|
|
5
|
+
handleMenuActions?: (actions: ActionProps, rowData: any) => void;
|
|
6
|
+
rowData: any;
|
|
7
|
+
tableBodyRef?: React.RefObject<HTMLDivElement>;
|
|
8
|
+
rowIndex?: number;
|
|
9
|
+
};
|
|
10
|
+
declare const VerticalMenuDropdown: React.FC<VerticalMenuDropdownProps>;
|
|
11
|
+
export default VerticalMenuDropdown;
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
exports.__esModule = true;
|
|
5
|
+
exports["default"] = void 0;
|
|
6
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
7
|
+
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
8
|
+
var _icons = require("./icons");
|
|
9
|
+
var _ToolTip = _interopRequireDefault(require("./ToolTip"));
|
|
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); }
|
|
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; }
|
|
12
|
+
function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
13
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
14
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
15
|
+
var VerticalMenuDropdown = function VerticalMenuDropdown(_ref) {
|
|
16
|
+
var _actionDropDown$filte2, _document$getElementB;
|
|
17
|
+
var actionDropDown = _ref.actionDropDown,
|
|
18
|
+
handleMenuActions = _ref.handleMenuActions,
|
|
19
|
+
rowData = _ref.rowData,
|
|
20
|
+
tableBodyRef = _ref.tableBodyRef,
|
|
21
|
+
rowIndex = _ref.rowIndex;
|
|
22
|
+
var _useState = (0, _react.useState)(false),
|
|
23
|
+
openMenu = _useState[0],
|
|
24
|
+
setOpenMenu = _useState[1];
|
|
25
|
+
var _useState2 = (0, _react.useState)({
|
|
26
|
+
top: 0,
|
|
27
|
+
left: 0
|
|
28
|
+
}),
|
|
29
|
+
position = _useState2[0],
|
|
30
|
+
setPosition = _useState2[1];
|
|
31
|
+
var menuButtonRef = (0, _react.useRef)(null);
|
|
32
|
+
var menuRef = (0, _react.useRef)(null);
|
|
33
|
+
var updateMenuPosition = function updateMenuPosition() {
|
|
34
|
+
var _actionDropDown$filte;
|
|
35
|
+
if (!menuButtonRef.current) return;
|
|
36
|
+
var rect = menuButtonRef.current.getBoundingClientRect();
|
|
37
|
+
var viewportPadding = 8;
|
|
38
|
+
var menuGap = 4;
|
|
39
|
+
var visibleItems = (_actionDropDown$filte = actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
|
|
40
|
+
var _item$hide$call, _item$hide;
|
|
41
|
+
return !item.hidden && !((_item$hide$call = (_item$hide = item.hide) === null || _item$hide === void 0 ? void 0 : _item$hide.call(item, rowData, rowIndex)) != null ? _item$hide$call : false);
|
|
42
|
+
})) != null ? _actionDropDown$filte : [];
|
|
43
|
+
var menuWidth = menuRef.current && menuRef.current.offsetWidth > 0 ? menuRef.current.offsetWidth : Math.max(120, visibleItems.length * 48);
|
|
44
|
+
var menuHeight = visibleItems.length * 40;
|
|
45
|
+
var spaceBelow = window.innerHeight - rect.bottom;
|
|
46
|
+
var openBelow = spaceBelow >= menuHeight + menuGap;
|
|
47
|
+
var left = rect.left;
|
|
48
|
+
if (left + menuWidth > window.innerWidth - viewportPadding) {
|
|
49
|
+
left = Math.max(viewportPadding, rect.right - menuWidth);
|
|
50
|
+
}
|
|
51
|
+
setPosition({
|
|
52
|
+
top: openBelow ? rect.bottom + menuGap : rect.top - menuHeight - menuGap,
|
|
53
|
+
left: left
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
(0, _react.useEffect)(function () {
|
|
57
|
+
if (!openMenu) return;
|
|
58
|
+
updateMenuPosition();
|
|
59
|
+
var frame = requestAnimationFrame(function () {
|
|
60
|
+
return updateMenuPosition();
|
|
61
|
+
});
|
|
62
|
+
var resizeObserver = menuRef.current && typeof ResizeObserver !== 'undefined' ? new ResizeObserver(function () {
|
|
63
|
+
return updateMenuPosition();
|
|
64
|
+
}) : null;
|
|
65
|
+
if (resizeObserver && menuRef.current) {
|
|
66
|
+
resizeObserver.observe(menuRef.current);
|
|
67
|
+
}
|
|
68
|
+
return function () {
|
|
69
|
+
cancelAnimationFrame(frame);
|
|
70
|
+
resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
|
|
71
|
+
};
|
|
72
|
+
}, [openMenu]);
|
|
73
|
+
(0, _react.useEffect)(function () {
|
|
74
|
+
if (!openMenu) return;
|
|
75
|
+
var handleClickOutside = function handleClickOutside(event) {
|
|
76
|
+
var _menuRef$current, _menuButtonRef$curren;
|
|
77
|
+
var target = event.target;
|
|
78
|
+
if ((_menuRef$current = menuRef.current) !== null && _menuRef$current !== void 0 && _menuRef$current.contains(target) || (_menuButtonRef$curren = menuButtonRef.current) !== null && _menuButtonRef$curren !== void 0 && _menuButtonRef$curren.contains(target)) {
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
setOpenMenu(false);
|
|
82
|
+
};
|
|
83
|
+
var handleScroll = function handleScroll() {
|
|
84
|
+
return setOpenMenu(false);
|
|
85
|
+
};
|
|
86
|
+
document.addEventListener('click', handleClickOutside);
|
|
87
|
+
window.addEventListener('scroll', handleScroll, true);
|
|
88
|
+
return function () {
|
|
89
|
+
document.removeEventListener('click', handleClickOutside);
|
|
90
|
+
window.removeEventListener('scroll', handleScroll, true);
|
|
91
|
+
};
|
|
92
|
+
}, [openMenu]);
|
|
93
|
+
(0, _react.useEffect)(function () {
|
|
94
|
+
var scrollbarHandle = document.querySelector('.rs-table-scrollbar-handle');
|
|
95
|
+
if (!scrollbarHandle) return;
|
|
96
|
+
var observer = new MutationObserver(function (mutations) {
|
|
97
|
+
for (var _iterator = _createForOfIteratorHelperLoose(mutations), _step; !(_step = _iterator()).done;) {
|
|
98
|
+
var mutation = _step.value;
|
|
99
|
+
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
|
|
100
|
+
setOpenMenu(false);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
});
|
|
104
|
+
observer.observe(scrollbarHandle, {
|
|
105
|
+
attributes: true,
|
|
106
|
+
attributeFilter: ['style']
|
|
107
|
+
});
|
|
108
|
+
return function () {
|
|
109
|
+
return observer.disconnect();
|
|
110
|
+
};
|
|
111
|
+
}, [openMenu]);
|
|
112
|
+
var handleMenuItemClick = function handleMenuItemClick(slug) {
|
|
113
|
+
var _slug$action;
|
|
114
|
+
handleMenuActions === null || handleMenuActions === void 0 ? void 0 : handleMenuActions(slug, rowData);
|
|
115
|
+
(_slug$action = slug.action) === null || _slug$action === void 0 ? void 0 : _slug$action.call(slug, rowData);
|
|
116
|
+
setOpenMenu(false);
|
|
117
|
+
};
|
|
118
|
+
var visibleCount = (_actionDropDown$filte2 = actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.filter(function (item) {
|
|
119
|
+
var _item$hide$call2, _item$hide2;
|
|
120
|
+
return !item.hidden && !((_item$hide$call2 = (_item$hide2 = item.hide) === null || _item$hide2 === void 0 ? void 0 : _item$hide2.call(item, rowData, rowIndex)) != null ? _item$hide$call2 : false);
|
|
121
|
+
}).length) != null ? _actionDropDown$filte2 : 0;
|
|
122
|
+
var portalTarget = (_document$getElementB = document.getElementById('portal-root')) != null ? _document$getElementB : document.body;
|
|
123
|
+
var dropdownContent = /*#__PURE__*/_react["default"].createElement("div", {
|
|
124
|
+
className: "absolute z-[60] min-w-48 rounded-md vertical-menu-dropdown-content",
|
|
125
|
+
ref: menuRef,
|
|
126
|
+
style: {
|
|
127
|
+
top: position.top,
|
|
128
|
+
left: position.left,
|
|
129
|
+
position: 'fixed',
|
|
130
|
+
minWidth: 120,
|
|
131
|
+
width: 'max-content'
|
|
132
|
+
}
|
|
133
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
134
|
+
className: "py-1"
|
|
135
|
+
}, actionDropDown === null || actionDropDown === void 0 ? void 0 : actionDropDown.map(function (item) {
|
|
136
|
+
var _item$hide$call3, _item$hide3;
|
|
137
|
+
return !item.hidden && !((_item$hide$call3 = (_item$hide3 = item.hide) === null || _item$hide3 === void 0 ? void 0 : _item$hide3.call(item, rowData, rowIndex)) != null ? _item$hide$call3 : false) ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
138
|
+
key: item.title,
|
|
139
|
+
className: "vertical-menu-item px-4 py-2 text-sm text-base-black hover:bg-gray-light-1 cursor-pointer flex items-center gap-2 transition-colors",
|
|
140
|
+
onClick: function onClick(e) {
|
|
141
|
+
var _item$action;
|
|
142
|
+
e.preventDefault();
|
|
143
|
+
(_item$action = item.action) === null || _item$action === void 0 ? void 0 : _item$action.call(item, item);
|
|
144
|
+
handleMenuItemClick(item);
|
|
145
|
+
}
|
|
146
|
+
}, /*#__PURE__*/_react["default"].createElement(_ToolTip["default"], {
|
|
147
|
+
title: item.toolTip,
|
|
148
|
+
tableBodyRef: tableBodyRef
|
|
149
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
150
|
+
className: "vertical-menu-icon-title flex items-center gap-2"
|
|
151
|
+
}, item.icon && /*#__PURE__*/_react["default"].createElement("span", {
|
|
152
|
+
className: "vertical-menu-icon"
|
|
153
|
+
}, item.icon), /*#__PURE__*/_react["default"].createElement("span", {
|
|
154
|
+
className: "vertical-menu-title"
|
|
155
|
+
}, item.title)))) : null;
|
|
156
|
+
})));
|
|
157
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
158
|
+
className: "inline-block vertical-menu-dropdown-wrapper"
|
|
159
|
+
}, visibleCount > 0 && /*#__PURE__*/_react["default"].createElement("button", {
|
|
160
|
+
type: "button",
|
|
161
|
+
className: "vertical-menu-trigger-button p-2 rounded text-base-gray hover:bg-gray-light-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary",
|
|
162
|
+
onClick: function onClick(event) {
|
|
163
|
+
event.stopPropagation();
|
|
164
|
+
if (!openMenu) updateMenuPosition();
|
|
165
|
+
setOpenMenu(function (prev) {
|
|
166
|
+
return !prev;
|
|
167
|
+
});
|
|
168
|
+
},
|
|
169
|
+
ref: menuButtonRef
|
|
170
|
+
}, /*#__PURE__*/_react["default"].createElement(_icons.ThreeDotIcon, null))), openMenu && portalTarget && /*#__PURE__*/_reactDom["default"].createPortal(dropdownContent, portalTarget));
|
|
171
|
+
};
|
|
172
|
+
var _default = VerticalMenuDropdown;
|
|
173
|
+
exports["default"] = _default;
|
package/package.json
CHANGED
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "qbs-react-grid",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.6",
|
|
4
4
|
"description": "A React table component",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"typings": "lib/index.d.ts",
|
|
7
7
|
"module": "es/index.js",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./es/index.js",
|
|
11
|
+
"require": "./lib/index.js",
|
|
12
|
+
"default": "./es/index.js"
|
|
13
|
+
},
|
|
14
|
+
"./dist/css/qbs-react-grid.css": "./dist/css/qbs-react-grid.css"
|
|
15
|
+
},
|
|
8
16
|
"scripts": {
|
|
9
17
|
"format": "prettier --write \"{src,test}/**/*.{tsx,ts,js}\"",
|
|
10
18
|
"format:check": "prettier --list-different \"{src,test}/**/*.{tsx,ts,js}\"",
|
|
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
|
|
|
4
4
|
import Cell from '../Cell';
|
|
5
5
|
import { handleCellFormat } from './utilities/handleFormatCell';
|
|
6
6
|
import MenuDropDown from './utilities/menuDropDown';
|
|
7
|
+
import VerticalMenuDropdown from './utilities/VerticalDropDownMenu';
|
|
7
8
|
|
|
8
9
|
const CHECKBOX_LINE_HEIGHT = '36px';
|
|
9
10
|
export const CheckCell: React.FC<any> = React.memo(
|
|
@@ -37,9 +38,26 @@ export const CheckCell: React.FC<any> = React.memo(
|
|
|
37
38
|
)
|
|
38
39
|
);
|
|
39
40
|
export const ActionCell: React.FC<any> = React.memo(
|
|
40
|
-
({
|
|
41
|
-
|
|
42
|
-
|
|
41
|
+
({
|
|
42
|
+
rowData,
|
|
43
|
+
handleMenuActions,
|
|
44
|
+
dataTheme,
|
|
45
|
+
actionProps,
|
|
46
|
+
tableBodyRef,
|
|
47
|
+
rowIndex,
|
|
48
|
+
dropType,
|
|
49
|
+
...props
|
|
50
|
+
}) => (
|
|
51
|
+
<Cell {...props} dataTheme={dataTheme} style={{ padding: 0 }}>
|
|
52
|
+
{dropType === 'vertical' ? (
|
|
53
|
+
<VerticalMenuDropdown
|
|
54
|
+
tableBodyRef={tableBodyRef}
|
|
55
|
+
actionDropDown={actionProps}
|
|
56
|
+
rowData={rowData}
|
|
57
|
+
rowIndex={rowIndex}
|
|
58
|
+
handleMenuActions={handleMenuActions}
|
|
59
|
+
/>
|
|
60
|
+
) : (
|
|
43
61
|
<MenuDropDown
|
|
44
62
|
tableBodyRef={tableBodyRef}
|
|
45
63
|
actionDropDown={actionProps}
|
|
@@ -48,9 +66,9 @@ export const ActionCell: React.FC<any> = React.memo(
|
|
|
48
66
|
rowIndex={rowIndex}
|
|
49
67
|
handleMenuActions={handleMenuActions}
|
|
50
68
|
/>
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
69
|
+
)}
|
|
70
|
+
</Cell>
|
|
71
|
+
)
|
|
54
72
|
);
|
|
55
73
|
export const ExpandCell: React.FC<any> = React.memo(
|
|
56
74
|
({ rowData, dataKey, expandedRowKeys, onChange, ...props }) => (
|
|
@@ -91,7 +91,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
|
|
|
91
91
|
childDetailHeading = '',
|
|
92
92
|
isCustomTableCardView = false,
|
|
93
93
|
handleTableCardView,
|
|
94
|
-
handleCustomCardLoader
|
|
94
|
+
handleCustomCardLoader,
|
|
95
|
+
dropType
|
|
95
96
|
}) => {
|
|
96
97
|
const [loading, setLoading] = useState(false);
|
|
97
98
|
const [columns, setColumns] = useState(propColumn);
|
|
@@ -755,6 +756,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
|
|
|
755
756
|
className={`${classes.cellClass} ${classes.actionCellClass}`}
|
|
756
757
|
handleMenuActions={handleMenuActions}
|
|
757
758
|
dataTheme={dataTheme}
|
|
759
|
+
dropType={dropType}
|
|
758
760
|
/>
|
|
759
761
|
</Column>
|
|
760
762
|
)}
|
|
@@ -81,7 +81,8 @@ const QbsTable: React.FC<QbsTableProps> = ({
|
|
|
81
81
|
renderEmpty,
|
|
82
82
|
autoHeight,
|
|
83
83
|
emptySubTitle,
|
|
84
|
-
emptyTitle
|
|
84
|
+
emptyTitle,
|
|
85
|
+
dropType
|
|
85
86
|
}) => {
|
|
86
87
|
const [loading, setLoading] = useState(false);
|
|
87
88
|
const [columns, setColumns] = useState(propColumn);
|
|
@@ -624,6 +625,7 @@ const QbsTable: React.FC<QbsTableProps> = ({
|
|
|
624
625
|
className={`${classes.cellClass} ${classes.actionCellClass}`}
|
|
625
626
|
handleMenuActions={handleMenuActions}
|
|
626
627
|
dataTheme={dataTheme}
|
|
628
|
+
dropType={dropType}
|
|
627
629
|
/>
|
|
628
630
|
</Column>
|
|
629
631
|
)}
|
|
@@ -87,6 +87,7 @@ export interface QbsTableProps {
|
|
|
87
87
|
expandedRowKeys?: readonly number[];
|
|
88
88
|
setExpandedRowKeys?: (value: readonly number[]) => void;
|
|
89
89
|
handleMenuActions?: (actions: ActionProps, rowData: any) => void;
|
|
90
|
+
dropType?: 'vertical' | string;
|
|
90
91
|
handleRowExpanded?: (rowData: any) => React.ReactNode;
|
|
91
92
|
shouldUpdateScroll?: boolean;
|
|
92
93
|
rowExpand?: boolean;
|