qbs-react-grid 2.2.3 → 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 -166
- 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 -174
- package/src/qbsTable/labels.ts +0 -58
- package/src/qbsTable/utilities/VerticalDropDownMenu.tsx +0 -187
|
@@ -8,7 +8,7 @@ export var ThreeDotIcon = function ThreeDotIcon() {
|
|
|
8
8
|
xmlns: "http://www.w3.org/2000/svg"
|
|
9
9
|
}, /*#__PURE__*/React.createElement("path", {
|
|
10
10
|
d: "M2 2.16665L2 2.17498M2 7.99998L2 8.00831M2 13.8333L2 13.8416M2 2.99998C1.53976 2.99998 1.16667 2.62688 1.16667 2.16665C1.16667 1.70641 1.53976 1.33331 2 1.33331C2.46024 1.33331 2.83333 1.70641 2.83333 2.16665C2.83333 2.62688 2.46024 2.99998 2 2.99998ZM2 8.83331C1.53976 8.83331 1.16667 8.46022 1.16667 7.99998C1.16667 7.53974 1.53976 7.16665 2 7.16665C2.46024 7.16665 2.83333 7.53974 2.83333 7.99998C2.83333 8.46022 2.46024 8.83331 2 8.83331ZM2 14.6666C1.53976 14.6666 1.16666 14.2935 1.16666 13.8333C1.16666 13.3731 1.53976 13 2 13C2.46024 13 2.83333 13.3731 2.83333 13.8333C2.83333 14.2935 2.46024 14.6666 2 14.6666Z",
|
|
11
|
-
stroke: "
|
|
11
|
+
stroke: "#313131",
|
|
12
12
|
strokeWidth: "1.5",
|
|
13
13
|
strokeLinecap: "round",
|
|
14
14
|
strokeLinejoin: "round"
|
|
@@ -125,68 +125,4 @@ export var TableView = function TableView(_ref5) {
|
|
|
125
125
|
stroke: "currentColor",
|
|
126
126
|
strokeWidth: "1.5"
|
|
127
127
|
}));
|
|
128
|
-
};
|
|
129
|
-
export var ExpandIcon = function ExpandIcon(_ref6) {
|
|
130
|
-
var className = _ref6.className;
|
|
131
|
-
return /*#__PURE__*/React.createElement("svg", {
|
|
132
|
-
width: "16",
|
|
133
|
-
height: "16",
|
|
134
|
-
className: className,
|
|
135
|
-
viewBox: "0 0 16 16",
|
|
136
|
-
fill: "none",
|
|
137
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
138
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
139
|
-
d: "M2.66797 5.33073V2.66406M2.66797 2.66406H5.33464M2.66797 2.66406L6.0013 5.9974M13.3346 5.33073V2.66406M13.3346 2.66406H10.668M13.3346 2.66406L10.0013 5.9974M2.66797 10.6641V13.3307M2.66797 13.3307H5.33464M2.66797 13.3307L6.0013 9.9974M13.3346 13.3307L10.0013 9.9974M13.3346 13.3307V10.6641M13.3346 13.3307H10.668",
|
|
140
|
-
stroke: "#585858",
|
|
141
|
-
strokeWidth: "1.5",
|
|
142
|
-
strokeLinecap: "round",
|
|
143
|
-
strokeLinejoin: "round"
|
|
144
|
-
}));
|
|
145
|
-
};
|
|
146
|
-
export var ContentView = function ContentView(_ref7) {
|
|
147
|
-
var className = _ref7.className;
|
|
148
|
-
return /*#__PURE__*/React.createElement("svg", {
|
|
149
|
-
width: "16",
|
|
150
|
-
height: "17",
|
|
151
|
-
className: className,
|
|
152
|
-
viewBox: "0 0 16 17",
|
|
153
|
-
fill: "none",
|
|
154
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
155
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
156
|
-
d: "M4.00344 9.48438C3.24485 9.48438 2.94141 9.80804 2.94141 10.6122V12.6553C2.94141 13.4594 3.24485 13.7831 4.00344 13.7831H11.994C12.7526 13.7831 13.056 13.4594 13.056 12.6553V10.6122C13.056 9.80804 12.7526 9.48438 11.994 9.48438H4.00344Z",
|
|
157
|
-
stroke: "#585858",
|
|
158
|
-
strokeLinecap: "round",
|
|
159
|
-
strokeLinejoin: "round"
|
|
160
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
161
|
-
d: "M4.00344 3.66406C3.24485 3.66406 2.94141 3.98773 2.94141 4.79184V6.835C2.94141 7.63911 3.24485 7.96278 4.00344 7.96278H11.994C12.7526 7.96278 13.056 7.63911 13.056 6.835V4.79184C13.056 3.98773 12.7526 3.66406 11.994 3.66406H4.00344Z",
|
|
162
|
-
stroke: "#585858",
|
|
163
|
-
strokeLinecap: "round",
|
|
164
|
-
strokeLinejoin: "round"
|
|
165
|
-
}));
|
|
166
|
-
};
|
|
167
|
-
export var DefaultView = function DefaultView(_ref8) {
|
|
168
|
-
var className = _ref8.className;
|
|
169
|
-
return /*#__PURE__*/React.createElement("svg", {
|
|
170
|
-
width: "16",
|
|
171
|
-
height: "17",
|
|
172
|
-
className: className,
|
|
173
|
-
viewBox: "0 0 16 17",
|
|
174
|
-
fill: "none",
|
|
175
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
176
|
-
}, /*#__PURE__*/React.createElement("path", {
|
|
177
|
-
fillRule: "evenodd",
|
|
178
|
-
clipRule: "evenodd",
|
|
179
|
-
d: "M2.39844 4.72969C2.39844 4.28786 2.75661 3.92969 3.19844 3.92969H12.7984C13.2403 3.92969 13.5984 4.28786 13.5984 4.72969C13.5984 5.17152 13.2403 5.52969 12.7984 5.52969H3.19844C2.75661 5.52969 2.39844 5.17152 2.39844 4.72969Z",
|
|
180
|
-
fill: "#585858"
|
|
181
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
182
|
-
fillRule: "evenodd",
|
|
183
|
-
clipRule: "evenodd",
|
|
184
|
-
d: "M2.39844 8.72969C2.39844 8.28786 2.75661 7.92969 3.19844 7.92969H12.7984C13.2403 7.92969 13.5984 8.28786 13.5984 8.72969C13.5984 9.17152 13.2403 9.52969 12.7984 9.52969H3.19844C2.75661 9.52969 2.39844 9.17152 2.39844 8.72969Z",
|
|
185
|
-
fill: "#585858"
|
|
186
|
-
}), /*#__PURE__*/React.createElement("path", {
|
|
187
|
-
fillRule: "evenodd",
|
|
188
|
-
clipRule: "evenodd",
|
|
189
|
-
d: "M2.39844 12.7297C2.39844 12.2879 2.75661 11.9297 3.19844 11.9297H12.7984C13.2403 11.9297 13.5984 12.2879 13.5984 12.7297C13.5984 13.1715 13.2403 13.5297 12.7984 13.5297H3.19844C2.75661 13.5297 2.39844 13.1715 2.39844 12.7297Z",
|
|
190
|
-
fill: "#585858"
|
|
191
|
-
}));
|
|
192
128
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function getRowDisplayRange(totalRows: number, rowsPerPage: number, pageNumber: number
|
|
1
|
+
export declare function getRowDisplayRange(totalRows: number, rowsPerPage: number, pageNumber: number): string;
|
|
@@ -1,10 +1,5 @@
|
|
|
1
|
-
export function getRowDisplayRange(totalRows, rowsPerPage, pageNumber
|
|
2
|
-
if (formatRange === void 0) {
|
|
3
|
-
formatRange = function formatRange(start, end, total) {
|
|
4
|
-
return "Showing " + start + " to " + end + " of " + total;
|
|
5
|
-
};
|
|
6
|
-
}
|
|
1
|
+
export function getRowDisplayRange(totalRows, rowsPerPage, pageNumber) {
|
|
7
2
|
var start = (pageNumber - 1) * rowsPerPage + 1;
|
|
8
3
|
var end = Math.min(pageNumber * rowsPerPage, totalRows);
|
|
9
|
-
return
|
|
4
|
+
return "Showing " + (start != null ? start : 0) + " to " + (end != null ? end : 0) + " of " + (totalRows != null ? totalRows : 0);
|
|
10
5
|
}
|
|
@@ -151,6 +151,7 @@ var useCellDescriptor = function useCellDescriptor(props) {
|
|
|
151
151
|
if (treeCol) {
|
|
152
152
|
hasCustomTreeCol = true;
|
|
153
153
|
}
|
|
154
|
+
console.log(columns);
|
|
154
155
|
if ((columnChildren === null || columnChildren === void 0 ? void 0 : columnChildren.length) !== 2) {
|
|
155
156
|
throw new Error("Component <HeaderCell> and <Cell> is required, column index: " + index + " ");
|
|
156
157
|
}
|
|
@@ -31,7 +31,6 @@ interface ScrollListenerProps {
|
|
|
31
31
|
onTouchStart?: (event: React.TouchEvent) => void;
|
|
32
32
|
onTouchMove?: (event: React.TouchEvent) => void;
|
|
33
33
|
onTouchEnd?: (event: React.TouchEvent) => void;
|
|
34
|
-
handleInfiniteScroll?: (value: number) => void;
|
|
35
34
|
}
|
|
36
35
|
/**
|
|
37
36
|
* Add scroll, touch, and wheel monitoring events to the table,
|
|
@@ -68,8 +68,7 @@ var useScrollListener = function useScrollListener(props) {
|
|
|
68
68
|
contentHeight = props.contentHeight,
|
|
69
69
|
headerHeight = props.headerHeight,
|
|
70
70
|
rtl = props.rtl,
|
|
71
|
-
tableKey = props.tableKey
|
|
72
|
-
handleInfiniteScroll = props.handleInfiniteScroll;
|
|
71
|
+
tableKey = props.tableKey;
|
|
73
72
|
var wheelListener = useRef(null);
|
|
74
73
|
var touchStartListener = useRef(null);
|
|
75
74
|
var touchMoveListener = useRef(null);
|
|
@@ -131,9 +130,6 @@ var useScrollListener = function useScrollListener(props) {
|
|
|
131
130
|
var x = Math.min(0, nextScrollX < minScrollX.current ? minScrollX.current : nextScrollX);
|
|
132
131
|
setScrollX(x);
|
|
133
132
|
setScrollY(y);
|
|
134
|
-
if (typeof handleInfiniteScroll === 'function' && deltaY !== 0 && !loading && Math.abs(y) + getTableHeight() >= contentHeight.current - 12) {
|
|
135
|
-
handleInfiniteScroll(scrollY.current);
|
|
136
|
-
}
|
|
137
133
|
onScroll === null || onScroll === void 0 ? void 0 : onScroll(Math.abs(x), Math.abs(y));
|
|
138
134
|
if (virtualized) {
|
|
139
135
|
// Add a state to the table during virtualized scrolling.
|
|
@@ -211,6 +207,7 @@ var useScrollListener = function useScrollListener(props) {
|
|
|
211
207
|
if (!isTouching.current) {
|
|
212
208
|
return;
|
|
213
209
|
}
|
|
210
|
+
console.log('handleTouchMove');
|
|
214
211
|
var _event$touches$2 = event.touches[0],
|
|
215
212
|
pageX = _event$touches$2.pageX,
|
|
216
213
|
pageY = _event$touches$2.pageY;
|
|
@@ -244,6 +241,7 @@ var useScrollListener = function useScrollListener(props) {
|
|
|
244
241
|
if (!isTouching.current) {
|
|
245
242
|
return;
|
|
246
243
|
}
|
|
244
|
+
console.log('handleTouchEnd');
|
|
247
245
|
isTouching.current = false;
|
|
248
246
|
var touchDuration = new Date().getTime() - momentumStartTime.current;
|
|
249
247
|
var absDeltaY = Math.abs(scrollY.current - momentumStartY.current);
|
package/lib/Cell.js
CHANGED
|
@@ -86,11 +86,10 @@ var Cell = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
|
|
86
86
|
var nextHeight = isHeaderCell ? headerHeight : cellHeight;
|
|
87
87
|
var styles = (0, _extends4["default"])({}, predefinedStyle, (_extends2 = {}, _extends2[fullText ? 'minWidth' : 'width'] = width, _extends2.height = nextHeight, _extends2.zIndex = depth, _extends2[rtl ? 'right' : 'left'] = left, _extends2));
|
|
88
88
|
var paddingKey = rtl ? 'paddingRight' : 'paddingLeft';
|
|
89
|
-
var resolvedAlign = rtl && align === 'left' ? 'right' : rtl && align === 'right' ? 'left' : align;
|
|
90
89
|
var contentStyles = (0, _extends4["default"])({}, style, (_extends3 = {
|
|
91
90
|
width: fullText ? width - 1 : width,
|
|
92
91
|
height: nextHeight,
|
|
93
|
-
textAlign:
|
|
92
|
+
textAlign: align
|
|
94
93
|
}, _extends3[paddingKey] = isTreeCol ? depth * _constants.LAYER_WIDTH + 10 : (style === null || style === void 0 ? void 0 : style[paddingKey]) || (style === null || style === void 0 ? void 0 : style.padding), _extends3));
|
|
95
94
|
if (verticalAlign) {
|
|
96
95
|
contentStyles.display = 'table-cell';
|
package/lib/Pagination.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { FC } from 'react';
|
|
2
|
-
import { type QbsTableLabels } from './qbsTable/labels';
|
|
3
2
|
type PageProps = {
|
|
4
3
|
paginationProps: {
|
|
5
4
|
total?: number;
|
|
@@ -10,8 +9,6 @@ type PageProps = {
|
|
|
10
9
|
onRowsPerPage?: (row: number, page: number) => void;
|
|
11
10
|
onPagination?: (row: number, page: number) => void;
|
|
12
11
|
};
|
|
13
|
-
labels?: QbsTableLabels;
|
|
14
|
-
dataTheme?: string;
|
|
15
12
|
};
|
|
16
13
|
declare const Pagination: FC<PageProps>;
|
|
17
14
|
export default Pagination;
|
package/lib/Pagination.js
CHANGED
|
@@ -5,7 +5,6 @@ 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");
|
|
9
8
|
var _tablecalc = require("./qbsTable/utilities/tablecalc");
|
|
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); }
|
|
11
10
|
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; }
|
|
@@ -42,10 +41,7 @@ var PageIndex = function PageIndex(_ref) {
|
|
|
42
41
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderPageNumbers());
|
|
43
42
|
};
|
|
44
43
|
var Pagination = function Pagination(_ref2) {
|
|
45
|
-
var paginationProps = _ref2.paginationProps
|
|
46
|
-
labelsProp = _ref2.labels,
|
|
47
|
-
dataTheme = _ref2.dataTheme;
|
|
48
|
-
var labels = (0, _labels.mergeLabels)(labelsProp);
|
|
44
|
+
var paginationProps = _ref2.paginationProps;
|
|
49
45
|
var _paginationProps$drop = paginationProps.dropOptions,
|
|
50
46
|
dropOptions = _paginationProps$drop === void 0 ? [10, 20, 50, 100, 200] : _paginationProps$drop,
|
|
51
47
|
_paginationProps$curr = paginationProps.currentPage,
|
|
@@ -86,14 +82,13 @@ var Pagination = function Pagination(_ref2) {
|
|
|
86
82
|
};
|
|
87
83
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
88
84
|
className: "qbs-table-custom-pagination",
|
|
89
|
-
"data-theme": dataTheme,
|
|
90
85
|
style: {
|
|
91
86
|
display: 'flex',
|
|
92
87
|
justifyContent: 'space-between'
|
|
93
88
|
}
|
|
94
89
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
95
90
|
className: "rows-count"
|
|
96
|
-
}, (0, _tablecalc.getRowDisplayRange)(total, rowsPerPageState, currentPage
|
|
91
|
+
}, (0, _tablecalc.getRowDisplayRange)(total, rowsPerPageState, currentPage)), /*#__PURE__*/_react["default"].createElement("div", {
|
|
97
92
|
className: "qbs-table-pagination-right-block"
|
|
98
93
|
}, /*#__PURE__*/_react["default"].createElement("button", {
|
|
99
94
|
className: "qbs-table-icon-container",
|
|
@@ -172,7 +167,7 @@ var Pagination = function Pagination(_ref2) {
|
|
|
172
167
|
className: "qbs-table-pagination-flexBox"
|
|
173
168
|
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
174
169
|
className: "qbs-table-pagination-text"
|
|
175
|
-
},
|
|
170
|
+
}, "Items per page"), /*#__PURE__*/_react["default"].createElement(_customSelect["default"], {
|
|
176
171
|
options: dropData,
|
|
177
172
|
selectedValue: rowsPerPageState,
|
|
178
173
|
onChange: handleRowsPerPage
|
package/lib/Table.d.ts
CHANGED
|
@@ -99,7 +99,6 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
|
|
|
99
99
|
/** Tree table, the callback function in the expanded node */
|
|
100
100
|
renderTreeToggle?: (expandButton: React.ReactNode, rowData?: Row, expanded?: boolean) => React.ReactNode;
|
|
101
101
|
tableKey?: string;
|
|
102
|
-
infiniteLoading?: boolean;
|
|
103
102
|
/** Customize what you can do to expand a zone */
|
|
104
103
|
renderRowExpanded?: (rowData?: Row) => React.ReactNode;
|
|
105
104
|
/** Custom row element */
|
|
@@ -124,7 +123,6 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
|
|
|
124
123
|
onTouchMove?: (event: React.TouchEvent) => void;
|
|
125
124
|
/** Callback for the `touchend` event. */
|
|
126
125
|
onTouchEnd?: (event: React.TouchEvent) => void;
|
|
127
|
-
handleInfiniteScroll?: (value: number) => void;
|
|
128
126
|
/**
|
|
129
127
|
* Callback after table data update.
|
|
130
128
|
* @deprecated use `shouldUpdateScroll` instead
|
|
@@ -134,7 +132,6 @@ export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
|
|
|
134
132
|
y: number;
|
|
135
133
|
}) => void) => void;
|
|
136
134
|
tableBodyRef: React.RefObject<HTMLDivElement>;
|
|
137
|
-
wheelWrapperRef: React.RefObject<HTMLDivElement | null>;
|
|
138
135
|
bodyRef?: (ref: HTMLElement) => void;
|
|
139
136
|
}
|
|
140
137
|
export interface TableInstance<Row, Key> extends React.FunctionComponent<TableProps<Row, Key>> {
|
package/lib/Table.js
CHANGED
|
@@ -20,7 +20,7 @@ var _Row = _interopRequireDefault(require("./Row"));
|
|
|
20
20
|
var _Scrollbar = _interopRequireDefault(require("./Scrollbar"));
|
|
21
21
|
var _TableContext = _interopRequireDefault(require("./TableContext"));
|
|
22
22
|
var _utils = require("./utils");
|
|
23
|
-
var _excluded = ["affixHeader", "children", "classPrefix", "className", "data", "defaultSortType", "width", "expandedRowKeys", "defaultExpandAllRows", "defaultExpandedRowKeys", "style", "id", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "loading", "locale", "showHeader", "sortColumn", "rowHeight", "sortType", "headerHeight", "minHeight", "height", "autoHeight", "fillHeight", "rtl", "translate3d", "rowKey", "virtualized", "rowClassName", "rowExpandedHeight", "disabledScroll", "affixHorizontalScrollbar", "loadAnimation", "shouldUpdateScroll", "renderRow", "renderRowExpanded", "renderLoading", "renderEmpty", "onSortColumn", "onScroll", "renderTreeToggle", "onRowClick", "onRowContextMenu", "onExpandChange", "onTouchStart", "onTouchMove", "onTouchEnd", "tableBodyHeight", "columns", "tableBodyRef", "tableKey"
|
|
23
|
+
var _excluded = ["affixHeader", "children", "classPrefix", "className", "data", "defaultSortType", "width", "expandedRowKeys", "defaultExpandAllRows", "defaultExpandedRowKeys", "style", "id", "isTree", "hover", "bordered", "cellBordered", "wordWrap", "loading", "locale", "showHeader", "pagination", "paginationProps", "sortColumn", "rowHeight", "sortType", "headerHeight", "minHeight", "height", "autoHeight", "fillHeight", "rtl", "translate3d", "rowKey", "virtualized", "rowClassName", "rowExpandedHeight", "disabledScroll", "affixHorizontalScrollbar", "loadAnimation", "shouldUpdateScroll", "renderRow", "renderRowExpanded", "renderLoading", "renderEmpty", "onSortColumn", "onScroll", "renderTreeToggle", "onRowClick", "onRowContextMenu", "onExpandChange", "onTouchStart", "onTouchMove", "onTouchEnd", "dataTheme", "tableBodyHeight", "columns", "tableBodyRef", "tableKey"],
|
|
24
24
|
_excluded2 = ["depth", "rowIndex"],
|
|
25
25
|
_excluded3 = ["cellHeight"];
|
|
26
26
|
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); }
|
|
@@ -77,6 +77,10 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
|
|
77
77
|
} : _props$locale,
|
|
78
78
|
_props$showHeader = props.showHeader,
|
|
79
79
|
showHeader = _props$showHeader === void 0 ? true : _props$showHeader,
|
|
80
|
+
_props$pagination = props.pagination,
|
|
81
|
+
pagination = _props$pagination === void 0 ? true : _props$pagination,
|
|
82
|
+
_props$paginationProp = props.paginationProps,
|
|
83
|
+
paginationProps = _props$paginationProp === void 0 ? {} : _props$paginationProp,
|
|
80
84
|
sortColumn = props.sortColumn,
|
|
81
85
|
_props$rowHeight = props.rowHeight,
|
|
82
86
|
rowHeight = _props$rowHeight === void 0 ? _constants.ROW_HEIGHT : _props$rowHeight,
|
|
@@ -114,19 +118,18 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
|
|
114
118
|
onTouchStart = props.onTouchStart,
|
|
115
119
|
onTouchMove = props.onTouchMove,
|
|
116
120
|
onTouchEnd = props.onTouchEnd,
|
|
121
|
+
dataTheme = props.dataTheme,
|
|
117
122
|
tableBodyHeight = props.tableBodyHeight,
|
|
118
123
|
columns = props.columns,
|
|
119
124
|
tableBodyRef = props.tableBodyRef,
|
|
120
125
|
tableKey = props.tableKey,
|
|
121
|
-
handleInfiniteScroll = props.handleInfiniteScroll,
|
|
122
|
-
infiniteLoading = props.infiniteLoading,
|
|
123
|
-
wheelWrapperRef = props.wheelWrapperRef,
|
|
124
126
|
rest = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
|
|
125
127
|
var _useClassNames = (0, _utils.useClassNames)(classPrefix, typeof classPrefix !== 'undefined'),
|
|
126
128
|
withClassPrefix = _useClassNames.withClassPrefix,
|
|
127
129
|
mergeCls = _useClassNames.merge,
|
|
128
130
|
prefix = _useClassNames.prefix;
|
|
129
131
|
var childTableRef = (0, _react.useRef)(null);
|
|
132
|
+
|
|
130
133
|
// Use `forceUpdate` to force the component to re-render after manipulating the DOM.
|
|
131
134
|
var _useReducer = (0, _react.useReducer)(function (x) {
|
|
132
135
|
return x + 1;
|
|
@@ -185,6 +188,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
|
|
185
188
|
var affixHeaderWrapperRef = (0, _react.useRef)(null);
|
|
186
189
|
var headerWrapperRef = (0, _react.useRef)(null);
|
|
187
190
|
// const tableBodyRef = useRef<HTMLDivElement>(null);
|
|
191
|
+
var wheelWrapperRef = (0, _react.useRef)(null);
|
|
188
192
|
var scrollbarXRef = (0, _react.useRef)(null);
|
|
189
193
|
var scrollbarYRef = (0, _react.useRef)(null);
|
|
190
194
|
var handleTableResizeChange = function handleTableResizeChange(_prevSize, event) {
|
|
@@ -296,8 +300,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
|
|
296
300
|
onScroll: onScroll,
|
|
297
301
|
onTouchStart: onTouchStart,
|
|
298
302
|
onTouchMove: onTouchMove,
|
|
299
|
-
onTouchEnd: onTouchEnd
|
|
300
|
-
handleInfiniteScroll: handleInfiniteScroll
|
|
303
|
+
onTouchEnd: onTouchEnd
|
|
301
304
|
}),
|
|
302
305
|
isScrolling = _useScrollListener.isScrolling,
|
|
303
306
|
isChildFocused = _useScrollListener.isChildFocused,
|
|
@@ -621,9 +624,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
|
|
621
624
|
width: tableWidth.current
|
|
622
625
|
},
|
|
623
626
|
length: tableWidth.current,
|
|
624
|
-
onScroll:
|
|
625
|
-
onScrollHorizontal(delta);
|
|
626
|
-
},
|
|
627
|
+
onScroll: onScrollHorizontal,
|
|
627
628
|
scrollLength: contentWidth.current,
|
|
628
629
|
ref: scrollbarXRef
|
|
629
630
|
}));
|
|
@@ -787,9 +788,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
|
|
787
788
|
role: "rowgroup",
|
|
788
789
|
className: prefix('body-row-wrapper'),
|
|
789
790
|
style: bodyStyles,
|
|
790
|
-
onScroll:
|
|
791
|
-
onScrollBody === null || onScrollBody === void 0 ? void 0 : onScrollBody(e); // existing handler
|
|
792
|
-
}
|
|
791
|
+
onScroll: onScrollBody
|
|
793
792
|
}, !loading && /*#__PURE__*/_react["default"].createElement("div", {
|
|
794
793
|
style: wheelStyles,
|
|
795
794
|
className: prefix('body-wheel-area'),
|
|
@@ -800,12 +799,7 @@ var Table = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
|
|
800
799
|
}) : null, visibleRows.current, bottomHideHeight ? /*#__PURE__*/_react["default"].createElement(_Row["default"], {
|
|
801
800
|
style: bottomRowStyles,
|
|
802
801
|
className: "virtualized"
|
|
803
|
-
}) : null,
|
|
804
|
-
style: {
|
|
805
|
-
padding: 12,
|
|
806
|
-
textAlign: 'center'
|
|
807
|
-
}
|
|
808
|
-
}, /*#__PURE__*/_react["default"].createElement("span", null, "Loading more rows\u2026"))), /*#__PURE__*/_react["default"].createElement(_EmptyMessage["default"], {
|
|
802
|
+
}) : null), /*#__PURE__*/_react["default"].createElement(_EmptyMessage["default"], {
|
|
809
803
|
locale: locale,
|
|
810
804
|
renderEmpty: renderEmpty,
|
|
811
805
|
addPrefix: prefix,
|
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
|
|
14
|
+
export type { QbsTableProps } from './qbsTable/commontypes';
|
|
15
15
|
export type { StandardProps, SortType, RowDataType, RowKeyType, TableSizeChangeEventName } from './@types/common';
|
package/lib/less/pagination.less
CHANGED
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
min-height: 40px;
|
|
6
6
|
align-items: center;
|
|
7
7
|
border-radius: 0 0 4px 4px;
|
|
8
|
-
border-top: 1px solid
|
|
9
|
-
background:
|
|
8
|
+
border-top: 1px solid #d6d8dc;
|
|
9
|
+
background: #fff;
|
|
10
10
|
&-header {
|
|
11
11
|
border-bottom: 1px solid #eee;
|
|
12
12
|
position: absolute;
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
font-weight: 500;
|
|
28
28
|
line-height: 20px;
|
|
29
29
|
border-radius: 6px;
|
|
30
|
-
border: 1px solid
|
|
31
|
-
background:
|
|
30
|
+
border: 1px solid #d6d8dc;
|
|
31
|
+
background: #fff;
|
|
32
32
|
}
|
|
33
33
|
.qbs-table-icon-container {
|
|
34
34
|
padding: 0;
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
font-style: normal;
|
|
110
110
|
font-weight: 500;
|
|
111
111
|
line-height: 20px;
|
|
112
|
-
color:
|
|
112
|
+
color: #313131;
|
|
113
113
|
}
|
|
114
114
|
}
|
|
115
115
|
|
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
.custom-select-trigger {
|
|
126
126
|
padding: 2px 8px;
|
|
127
127
|
cursor: pointer;
|
|
128
|
-
border: 1px solid
|
|
128
|
+
border: 1px solid #d6d8dc;
|
|
129
129
|
border-radius: 4px;
|
|
130
130
|
min-width: 65px;
|
|
131
131
|
position: relative;
|
|
@@ -140,7 +140,7 @@
|
|
|
140
140
|
list-style: none;
|
|
141
141
|
margin: 2px 0 0;
|
|
142
142
|
padding: 0;
|
|
143
|
-
background:
|
|
143
|
+
background: #fff;
|
|
144
144
|
border-radius: 8px;
|
|
145
145
|
box-shadow: 0 8px 20px 0 #00000026;
|
|
146
146
|
}
|
|
@@ -158,7 +158,7 @@ ul.custom-select-options.top {
|
|
|
158
158
|
|
|
159
159
|
.custom-select-option:hover,
|
|
160
160
|
.custom-select-option.selected {
|
|
161
|
-
background-color:
|
|
161
|
+
background-color: #f0f0f0;
|
|
162
162
|
}
|
|
163
163
|
|
|
164
164
|
.custom-select-trigger:before {
|
|
@@ -167,7 +167,7 @@ ul.custom-select-options.top {
|
|
|
167
167
|
right: 10px;
|
|
168
168
|
top: 6px;
|
|
169
169
|
font-weight: bold;
|
|
170
|
-
border: solid
|
|
170
|
+
border: solid black;
|
|
171
171
|
border-width: 0 1px 1px 0;
|
|
172
172
|
display: inline-block;
|
|
173
173
|
padding: 3px;
|