qbs-react-grid 1.3.16 → 2.0.1
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/es/ColumnGroup.js +1 -1
- package/es/ColumnResizeHandler.js +2 -2
- package/es/Scrollbar.js +1 -1
- package/es/Table.d.ts +1 -1
- package/es/qbsTable/QbsTable.js +120 -8
- package/es/qbsTable/TableCardList.js +1 -1
- package/es/utils/getTableColumns.js +10 -10
- package/es/utils/useAffix.d.ts +4 -4
- package/es/utils/useAffix.js +5 -5
- package/es/utils/useCellDescriptor.d.ts +2 -2
- package/es/utils/usePosition.d.ts +5 -5
- package/es/utils/usePosition.js +3 -3
- package/es/utils/useScrollListener.d.ts +4 -4
- package/es/utils/useScrollListener.js +15 -15
- package/es/utils/useTableDimension.d.ts +11 -11
- package/es/utils/useTableDimension.js +2 -2
- package/es/utils/useTableRows.d.ts +1 -1
- package/lib/ColumnGroup.js +1 -1
- package/lib/ColumnResizeHandler.js +2 -2
- package/lib/Scrollbar.js +1 -1
- package/lib/Table.d.ts +1 -1
- package/lib/qbsTable/QbsTable.js +120 -8
- package/lib/qbsTable/TableCardList.js +1 -1
- package/lib/utils/getTableColumns.js +10 -10
- package/lib/utils/useAffix.d.ts +4 -4
- package/lib/utils/useAffix.js +5 -5
- package/lib/utils/useCellDescriptor.d.ts +2 -2
- package/lib/utils/usePosition.d.ts +5 -5
- package/lib/utils/usePosition.js +3 -3
- package/lib/utils/useScrollListener.d.ts +4 -4
- package/lib/utils/useScrollListener.js +14 -14
- package/lib/utils/useTableDimension.d.ts +11 -11
- package/lib/utils/useTableDimension.js +2 -2
- package/lib/utils/useTableRows.d.ts +1 -1
- package/package.json +7 -7
- package/src/ColumnGroup.tsx +25 -11
- package/src/ColumnResizeHandler.tsx +2 -2
- package/src/Scrollbar.tsx +1 -1
- package/src/Table.tsx +4 -4
- package/src/qbsTable/QbsTable.tsx +222 -116
- package/src/qbsTable/TableCardList.tsx +2 -2
- package/src/utils/getTableColumns.ts +4 -4
- package/src/utils/useAffix.ts +11 -11
- package/src/utils/useCellDescriptor.ts +4 -4
- package/src/utils/usePosition.ts +9 -9
- package/src/utils/useScrollListener.ts +19 -19
- package/src/utils/useTableDimension.ts +4 -4
package/es/ColumnGroup.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
3
|
var _excluded = ["header", "className", "children", "classPrefix", "headerHeight", "verticalAlign", "align", "width", "groupHeaderHeight"];
|
|
4
|
-
import React from 'react';
|
|
5
4
|
import PropTypes from 'prop-types';
|
|
5
|
+
import React from 'react';
|
|
6
6
|
import { useClassNames } from './utils';
|
|
7
7
|
var ColumnGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
8
8
|
var header = props.header,
|
|
@@ -30,8 +30,8 @@ var ColumnResizeHandler = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
30
30
|
merge = _useClassNames.merge;
|
|
31
31
|
var classes = merge(className, withClassPrefix());
|
|
32
32
|
var columnWidth = useRef(defaultColumnWidth || 0);
|
|
33
|
-
var mouseMoveTracker = useRef();
|
|
34
|
-
var isKeyDown = useRef();
|
|
33
|
+
var mouseMoveTracker = useRef(null);
|
|
34
|
+
var isKeyDown = useRef(false);
|
|
35
35
|
var cursorDelta = useRef(0);
|
|
36
36
|
var handleMove = useCallback(function (deltaX) {
|
|
37
37
|
if (!isKeyDown.current) {
|
package/es/Scrollbar.js
CHANGED
|
@@ -37,7 +37,7 @@ var Scrollbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
37
37
|
var scrollRange = useRef(scrollLength);
|
|
38
38
|
var barRef = useRef(null);
|
|
39
39
|
var handleRef = useRef(null);
|
|
40
|
-
var mouseMoveTracker = useRef();
|
|
40
|
+
var mouseMoveTracker = useRef(null);
|
|
41
41
|
var _useClassNames = useClassNames(classPrefix),
|
|
42
42
|
withClassPrefix = _useClassNames.withClassPrefix,
|
|
43
43
|
merge = _useClassNames.merge,
|
package/es/Table.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type {
|
|
2
|
+
import type { RowDataType, RowKeyType, SortType, StandardProps, TableLocaleType, TableSizeChangeEventName } from './@types/common';
|
|
3
3
|
export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
|
|
4
4
|
/**
|
|
5
5
|
* The height of the table will be automatically expanded according to the number of data rows,
|
package/es/qbsTable/QbsTable.js
CHANGED
|
@@ -123,7 +123,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
123
123
|
var _useState4 = useState(false),
|
|
124
124
|
isOpen = _useState4[0],
|
|
125
125
|
setIsOpen = _useState4[1];
|
|
126
|
-
var prevColumns = useRef();
|
|
126
|
+
var prevColumns = useRef(null);
|
|
127
127
|
var _useState5 = useState(tableView),
|
|
128
128
|
tableViewToggle = _useState5[0],
|
|
129
129
|
setTableViewToggle = _useState5[1];
|
|
@@ -347,6 +347,115 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
347
347
|
return item.grouped;
|
|
348
348
|
}) ? true : false;
|
|
349
349
|
};
|
|
350
|
+
// const columnsRendered: React.ReactElement[] = useMemo(
|
|
351
|
+
// () =>
|
|
352
|
+
// (columns ?? []).map(
|
|
353
|
+
// ({
|
|
354
|
+
// title,
|
|
355
|
+
// field,
|
|
356
|
+
// resizable,
|
|
357
|
+
// sortable,
|
|
358
|
+
// colWidth,
|
|
359
|
+
// align,
|
|
360
|
+
// grouped,
|
|
361
|
+
// groupHeader,
|
|
362
|
+
// fixed,
|
|
363
|
+
// children,
|
|
364
|
+
// customCell,
|
|
365
|
+
// renderCell,
|
|
366
|
+
// isVisible,
|
|
367
|
+
// link,
|
|
368
|
+
// getPath,
|
|
369
|
+
// rowClick,
|
|
370
|
+
// sortKey,
|
|
371
|
+
// type,
|
|
372
|
+
// hideLink
|
|
373
|
+
// }) =>
|
|
374
|
+
// isVisible &&
|
|
375
|
+
// (grouped ? (
|
|
376
|
+
// <ColumnGroup
|
|
377
|
+
// header={groupHeader}
|
|
378
|
+
// fixed={fixed}
|
|
379
|
+
// align={align}
|
|
380
|
+
// verticalAlign="middle"
|
|
381
|
+
// groupHeaderHeight={40}
|
|
382
|
+
// >
|
|
383
|
+
// {children?.map(child => (
|
|
384
|
+
// <Column
|
|
385
|
+
// key={child.title}
|
|
386
|
+
// sortable={child.sortable}
|
|
387
|
+
// width={child.colWidth ?? COLUMN_WIDTH}
|
|
388
|
+
// resizable={child.resizable}
|
|
389
|
+
// align={child.align}
|
|
390
|
+
// onResize={handleColumnWidth}
|
|
391
|
+
// fixed={child.fixed}
|
|
392
|
+
// >
|
|
393
|
+
// <HeaderCell
|
|
394
|
+
// dataTheme={dataTheme}
|
|
395
|
+
// verticalAlign={'middle'}
|
|
396
|
+
// className={` ${classes.headerClass}`}
|
|
397
|
+
// sortKey={child.sortKey}
|
|
398
|
+
// renderSortIcon={renderSortIcon}
|
|
399
|
+
// >
|
|
400
|
+
// {child.title}
|
|
401
|
+
// </HeaderCell>
|
|
402
|
+
// {child.customCell || child.link ? (
|
|
403
|
+
// <CustomTableCell
|
|
404
|
+
// renderCell={child.renderCell}
|
|
405
|
+
// dataKey={child.field}
|
|
406
|
+
// dataTheme={dataTheme}
|
|
407
|
+
// type={child.type}
|
|
408
|
+
// path={child.getPath}
|
|
409
|
+
// link={child.link}
|
|
410
|
+
// />
|
|
411
|
+
// ) : (
|
|
412
|
+
// <Cell
|
|
413
|
+
// className={` ${classes.cellClass}`}
|
|
414
|
+
// dataKey={child.field}
|
|
415
|
+
// dataTheme={dataTheme}
|
|
416
|
+
// />
|
|
417
|
+
// )}
|
|
418
|
+
// </Column>
|
|
419
|
+
// ))}
|
|
420
|
+
// </ColumnGroup>
|
|
421
|
+
// ) : (
|
|
422
|
+
// <Column
|
|
423
|
+
// key={title}
|
|
424
|
+
// sortable={sortable}
|
|
425
|
+
// width={colWidth ?? COLUMN_WIDTH}
|
|
426
|
+
// resizable={resizable}
|
|
427
|
+
// align={align}
|
|
428
|
+
// fixed={fixed}
|
|
429
|
+
// onResize={handleColumnWidth}
|
|
430
|
+
// >
|
|
431
|
+
// <HeaderCell
|
|
432
|
+
// dataTheme={dataTheme}
|
|
433
|
+
// verticalAlign={findGrouped() ? 'middle' : undefined}
|
|
434
|
+
// className={` ${classes.headerClass}`}
|
|
435
|
+
// sortKey={sortKey}
|
|
436
|
+
// renderSortIcon={renderSortIcon}
|
|
437
|
+
// >
|
|
438
|
+
// {title}
|
|
439
|
+
// </HeaderCell>
|
|
440
|
+
// {customCell || link ? (
|
|
441
|
+
// <CustomTableCell
|
|
442
|
+
// renderCell={renderCell}
|
|
443
|
+
// dataKey={field}
|
|
444
|
+
// rowClick={rowClick}
|
|
445
|
+
// type={type}
|
|
446
|
+
// hideLink={hideLink}
|
|
447
|
+
// path={getPath}
|
|
448
|
+
// dataTheme={dataTheme}
|
|
449
|
+
// link={link}
|
|
450
|
+
// />
|
|
451
|
+
// ) : (
|
|
452
|
+
// <Cell dataKey={field} dataTheme={dataTheme} className={` ${classes.cellClass}`} />
|
|
453
|
+
// )}
|
|
454
|
+
// </Column>
|
|
455
|
+
// ))
|
|
456
|
+
// ),
|
|
457
|
+
// [columns, dataTheme]
|
|
458
|
+
// );
|
|
350
459
|
var columnsRendered = useMemo(function () {
|
|
351
460
|
return (columns != null ? columns : []).map(function (_ref3) {
|
|
352
461
|
var title = _ref3.title,
|
|
@@ -368,13 +477,13 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
368
477
|
sortKey = _ref3.sortKey,
|
|
369
478
|
type = _ref3.type,
|
|
370
479
|
hideLink = _ref3.hideLink;
|
|
371
|
-
return
|
|
480
|
+
return isVisible ? grouped ? /*#__PURE__*/React.createElement(ColumnGroup, {
|
|
372
481
|
header: groupHeader,
|
|
373
482
|
fixed: fixed,
|
|
374
483
|
align: align,
|
|
375
484
|
verticalAlign: "middle",
|
|
376
485
|
groupHeaderHeight: 40
|
|
377
|
-
},
|
|
486
|
+
}, children === null || children === void 0 ? void 0 : children.map(function (child) {
|
|
378
487
|
var _child$colWidth;
|
|
379
488
|
return /*#__PURE__*/React.createElement(Column, {
|
|
380
489
|
key: child.title,
|
|
@@ -386,7 +495,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
386
495
|
fixed: child.fixed
|
|
387
496
|
}, /*#__PURE__*/React.createElement(HeaderCell, {
|
|
388
497
|
dataTheme: dataTheme,
|
|
389
|
-
verticalAlign:
|
|
498
|
+
verticalAlign: "middle",
|
|
390
499
|
className: " " + classes.headerClass,
|
|
391
500
|
sortKey: child.sortKey,
|
|
392
501
|
renderSortIcon: renderSortIcon
|
|
@@ -402,7 +511,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
402
511
|
dataKey: child.field,
|
|
403
512
|
dataTheme: dataTheme
|
|
404
513
|
}));
|
|
405
|
-
}))
|
|
514
|
+
})) : /*#__PURE__*/React.createElement(Column, {
|
|
406
515
|
key: title,
|
|
407
516
|
sortable: sortable,
|
|
408
517
|
width: colWidth != null ? colWidth : COLUMN_WIDTH,
|
|
@@ -429,9 +538,12 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
429
538
|
dataKey: field,
|
|
430
539
|
dataTheme: dataTheme,
|
|
431
540
|
className: " " + classes.cellClass
|
|
432
|
-
})))
|
|
433
|
-
}
|
|
434
|
-
|
|
541
|
+
})) : /*#__PURE__*/React.createElement(React.Fragment, null);
|
|
542
|
+
} // ✅ Fix: Return `null` instead of `false`
|
|
543
|
+
).filter(Boolean);
|
|
544
|
+
},
|
|
545
|
+
// ✅ Fix: Remove `undefined` and `false` elements
|
|
546
|
+
[columns, dataTheme]);
|
|
435
547
|
return /*#__PURE__*/React.createElement("div", {
|
|
436
548
|
className: "qbs-table " + classes.tableContainerClass,
|
|
437
549
|
"data-theme": dataTheme
|
|
@@ -108,7 +108,7 @@ var QbsTable = function QbsTable(_ref) {
|
|
|
108
108
|
var _useState4 = useState(false),
|
|
109
109
|
isOpen = _useState4[0],
|
|
110
110
|
setIsOpen = _useState4[1];
|
|
111
|
-
var prevColumns = useRef();
|
|
111
|
+
var prevColumns = useRef(null);
|
|
112
112
|
var tableBodyRef = useRef(null);
|
|
113
113
|
var handleSortColumn = useCallback(function (sortColumn, sortType) {
|
|
114
114
|
setLoading(true);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import flatten from 'lodash/flatten';
|
|
2
3
|
import React from 'react';
|
|
3
4
|
import * as ReactIs from 'react-is';
|
|
4
|
-
import flatten from 'lodash/flatten';
|
|
5
5
|
import ColumnGroup from '../ColumnGroup';
|
|
6
6
|
|
|
7
7
|
/**
|
|
@@ -14,13 +14,13 @@ function getTableColumns(children) {
|
|
|
14
14
|
var flattenColumns = flatten(childrenArray).map(function (column) {
|
|
15
15
|
// If the column is a group, we need to get the columns from the children.
|
|
16
16
|
if ((column === null || column === void 0 ? void 0 : column.type) === ColumnGroup) {
|
|
17
|
-
var
|
|
18
|
-
header =
|
|
19
|
-
groupChildren =
|
|
20
|
-
align =
|
|
21
|
-
fixed =
|
|
22
|
-
verticalAlign =
|
|
23
|
-
groupHeaderHeight =
|
|
17
|
+
var _ref = column === null || column === void 0 ? void 0 : column.props,
|
|
18
|
+
header = _ref.header,
|
|
19
|
+
groupChildren = _ref.children,
|
|
20
|
+
align = _ref.align,
|
|
21
|
+
fixed = _ref.fixed,
|
|
22
|
+
verticalAlign = _ref.verticalAlign,
|
|
23
|
+
groupHeaderHeight = _ref.groupHeaderHeight;
|
|
24
24
|
var childColumns = getTableColumns(groupChildren);
|
|
25
25
|
return childColumns.map(function (childColumn, index) {
|
|
26
26
|
// Overwrite the props set by ColumnGroup to Column.
|
|
@@ -49,9 +49,9 @@ function getTableColumns(children) {
|
|
|
49
49
|
return /*#__PURE__*/React.cloneElement(childColumn, groupCellProps);
|
|
50
50
|
});
|
|
51
51
|
} else if (ReactIs.isFragment(column)) {
|
|
52
|
-
var _column$
|
|
52
|
+
var _column$props;
|
|
53
53
|
// If the column is a fragment, we need to get the columns from the children.
|
|
54
|
-
return getTableColumns((_column$
|
|
54
|
+
return getTableColumns((_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.children);
|
|
55
55
|
} else if (Array.isArray(column)) {
|
|
56
56
|
// If the column is an array, need check item in the array.
|
|
57
57
|
return getTableColumns(column);
|
package/es/utils/useAffix.d.ts
CHANGED
|
@@ -6,11 +6,11 @@ interface AffixProps {
|
|
|
6
6
|
contentHeight: React.MutableRefObject<number>;
|
|
7
7
|
affixHeader?: boolean | number;
|
|
8
8
|
affixHorizontalScrollbar?: boolean | number;
|
|
9
|
-
tableOffset: React.RefObject<ElementOffset>;
|
|
10
|
-
headerOffset: React.RefObject<ElementOffset>;
|
|
9
|
+
tableOffset: React.RefObject<ElementOffset | null>;
|
|
10
|
+
headerOffset: React.RefObject<ElementOffset | null>;
|
|
11
11
|
headerHeight: number;
|
|
12
|
-
scrollbarXRef: React.RefObject<ScrollbarInstance>;
|
|
13
|
-
affixHeaderWrapperRef: React.RefObject<HTMLDivElement>;
|
|
12
|
+
scrollbarXRef: React.RefObject<ScrollbarInstance | null>;
|
|
13
|
+
affixHeaderWrapperRef: React.RefObject<HTMLDivElement | null>;
|
|
14
14
|
}
|
|
15
15
|
declare const useAffix: (props: AffixProps) => void;
|
|
16
16
|
export default useAffix;
|
package/es/utils/useAffix.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { useRef, useCallback, useEffect } from 'react';
|
|
2
|
-
import getHeight from 'dom-lib/getHeight';
|
|
3
1
|
import addStyle from 'dom-lib/addStyle';
|
|
4
|
-
import
|
|
2
|
+
import getHeight from 'dom-lib/getHeight';
|
|
5
3
|
import on from 'dom-lib/on';
|
|
6
|
-
import
|
|
4
|
+
import removeStyle from 'dom-lib/removeStyle';
|
|
5
|
+
import { useCallback, useEffect, useRef } from 'react';
|
|
7
6
|
import isNumberOrTrue from './isNumberOrTrue';
|
|
7
|
+
import toggleClass from './toggleClass';
|
|
8
8
|
import useUpdateEffect from './useUpdateEffect';
|
|
9
9
|
var useAffix = function useAffix(props) {
|
|
10
10
|
var getTableHeight = props.getTableHeight,
|
|
@@ -16,7 +16,7 @@ var useAffix = function useAffix(props) {
|
|
|
16
16
|
headerHeight = props.headerHeight,
|
|
17
17
|
scrollbarXRef = props.scrollbarXRef,
|
|
18
18
|
affixHeaderWrapperRef = props.affixHeaderWrapperRef;
|
|
19
|
-
var scrollListener = useRef();
|
|
19
|
+
var scrollListener = useRef(null);
|
|
20
20
|
var handleAffixHorizontalScrollbar = useCallback(function () {
|
|
21
21
|
var _tableOffset$current, _scrollbarXRef$curren;
|
|
22
22
|
var scrollY = window.scrollY || window.pageYOffset;
|
|
@@ -15,8 +15,8 @@ interface CellDescriptorProps<Row> {
|
|
|
15
15
|
onSortColumn?: (dataKey: string, sortType?: SortType) => void;
|
|
16
16
|
onHeaderCellResize?: (width: number, dataKey: string) => void;
|
|
17
17
|
rowHeight?: number | ((rowData?: Row) => number);
|
|
18
|
-
mouseAreaRef: React.RefObject<HTMLDivElement>;
|
|
19
|
-
tableRef: React.RefObject<HTMLDivElement>;
|
|
18
|
+
mouseAreaRef: React.RefObject<HTMLDivElement | null>;
|
|
19
|
+
tableRef: React.RefObject<HTMLDivElement | null>;
|
|
20
20
|
}
|
|
21
21
|
interface CellDescriptor {
|
|
22
22
|
columns: React.ReactNode[];
|
|
@@ -4,13 +4,13 @@ interface PositionProps {
|
|
|
4
4
|
data: readonly RowDataType[];
|
|
5
5
|
height: number;
|
|
6
6
|
tableWidth: React.MutableRefObject<number>;
|
|
7
|
-
tableRef: React.RefObject<HTMLDivElement>;
|
|
7
|
+
tableRef: React.RefObject<HTMLDivElement | null>;
|
|
8
8
|
prefix: (str: string) => string;
|
|
9
9
|
translateDOMPositionXY: React.MutableRefObject<any>;
|
|
10
|
-
wheelWrapperRef: React.RefObject<HTMLDivElement>;
|
|
11
|
-
headerWrapperRef: React.RefObject<HTMLDivElement>;
|
|
12
|
-
affixHeaderWrapperRef: React.RefObject<HTMLDivElement>;
|
|
13
|
-
tableHeaderRef: React.RefObject<HTMLDivElement>;
|
|
10
|
+
wheelWrapperRef: React.RefObject<HTMLDivElement | null>;
|
|
11
|
+
headerWrapperRef: React.RefObject<HTMLDivElement | null>;
|
|
12
|
+
affixHeaderWrapperRef: React.RefObject<HTMLDivElement | null>;
|
|
13
|
+
tableHeaderRef: React.RefObject<HTMLDivElement | null>;
|
|
14
14
|
scrollX: React.MutableRefObject<number>;
|
|
15
15
|
scrollY: React.MutableRefObject<number>;
|
|
16
16
|
contentWidth: React.MutableRefObject<number>;
|
package/es/utils/usePosition.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { useCallback, useRef } from 'react';
|
|
2
1
|
import addStyle from 'dom-lib/addStyle';
|
|
2
|
+
import { useCallback, useRef } from 'react';
|
|
3
3
|
import { SCROLLBAR_WIDTH } from '../constants';
|
|
4
|
+
import defer from './defer';
|
|
5
|
+
import isSupportTouchEvent from './isSupportTouchEvent';
|
|
4
6
|
import toggleClass from './toggleClass';
|
|
5
7
|
import useUpdateEffect from './useUpdateEffect';
|
|
6
|
-
import isSupportTouchEvent from './isSupportTouchEvent';
|
|
7
|
-
import defer from './defer';
|
|
8
8
|
/**
|
|
9
9
|
* Update the position of the table according to the scrolling information of the table.
|
|
10
10
|
* @param props
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type { ScrollbarInstance } from '../Scrollbar';
|
|
3
2
|
import type { RowDataType } from '../@types/common';
|
|
3
|
+
import type { ScrollbarInstance } from '../Scrollbar';
|
|
4
4
|
interface ScrollListenerProps {
|
|
5
5
|
rtl: boolean;
|
|
6
6
|
data: readonly RowDataType[];
|
|
@@ -10,11 +10,11 @@ interface ScrollListenerProps {
|
|
|
10
10
|
headerHeight: number;
|
|
11
11
|
autoHeight?: boolean;
|
|
12
12
|
tableBodyRef: React.RefObject<HTMLDivElement>;
|
|
13
|
-
scrollbarXRef: React.RefObject<ScrollbarInstance>;
|
|
14
|
-
scrollbarYRef: React.RefObject<ScrollbarInstance>;
|
|
13
|
+
scrollbarXRef: React.RefObject<ScrollbarInstance | null>;
|
|
14
|
+
scrollbarYRef: React.RefObject<ScrollbarInstance | null>;
|
|
15
15
|
disabledScroll?: boolean;
|
|
16
16
|
loading?: boolean;
|
|
17
|
-
tableRef: React.RefObject<HTMLDivElement>;
|
|
17
|
+
tableRef: React.RefObject<HTMLDivElement | null>;
|
|
18
18
|
contentWidth: React.MutableRefObject<number>;
|
|
19
19
|
tableWidth: React.MutableRefObject<number>;
|
|
20
20
|
scrollY: React.MutableRefObject<number>;
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { useRef, useCallback, useState, useEffect } from 'react';
|
|
2
|
-
import WheelHandler from 'dom-lib/WheelHandler';
|
|
3
|
-
import scrollLeft from 'dom-lib/scrollLeft';
|
|
4
|
-
import scrollTop from 'dom-lib/scrollTop';
|
|
5
1
|
import on from 'dom-lib/on';
|
|
6
2
|
import removeStyle from 'dom-lib/removeStyle';
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
11
|
-
import
|
|
12
|
-
import flushSync from './flushSync';
|
|
3
|
+
import scrollLeft from 'dom-lib/scrollLeft';
|
|
4
|
+
import scrollTop from 'dom-lib/scrollTop';
|
|
5
|
+
import WheelHandler from 'dom-lib/WheelHandler';
|
|
6
|
+
import { useCallback, useEffect, useRef, useState } from 'react';
|
|
7
|
+
import { BEZIER, SCROLLBAR_WIDTH, TRANSITION_DURATION } from '../constants';
|
|
13
8
|
import defer from './defer';
|
|
9
|
+
import flushSync from './flushSync';
|
|
10
|
+
import isSupportTouchEvent from './isSupportTouchEvent';
|
|
11
|
+
import { cancelAnimationTimeout, requestAnimationTimeout } from './requestAnimationTimeout';
|
|
12
|
+
import useMount from './useMount';
|
|
13
|
+
import useUpdateEffect from './useUpdateEffect';
|
|
14
14
|
|
|
15
15
|
// Inertial sliding start time threshold
|
|
16
16
|
var momentumTimeThreshold = 300;
|
|
@@ -69,10 +69,10 @@ var useScrollListener = function useScrollListener(props) {
|
|
|
69
69
|
headerHeight = props.headerHeight,
|
|
70
70
|
rtl = props.rtl,
|
|
71
71
|
tableKey = props.tableKey;
|
|
72
|
-
var wheelListener = useRef();
|
|
73
|
-
var touchStartListener = useRef();
|
|
74
|
-
var touchMoveListener = useRef();
|
|
75
|
-
var touchEndListener = useRef();
|
|
72
|
+
var wheelListener = useRef(null);
|
|
73
|
+
var touchStartListener = useRef(null);
|
|
74
|
+
var touchMoveListener = useRef(null);
|
|
75
|
+
var touchEndListener = useRef(null);
|
|
76
76
|
var _useState = useState(false),
|
|
77
77
|
isChildFocused = _useState[0],
|
|
78
78
|
setIsChildFocused = _useState[1];
|
|
@@ -164,7 +164,7 @@ var useScrollListener = function useScrollListener(props) {
|
|
|
164
164
|
(_scrollbarXRef$curren = scrollbarXRef.current) === null || _scrollbarXRef$curren === void 0 ? void 0 : (_scrollbarXRef$curren2 = _scrollbarXRef$curren.onWheelScroll) === null || _scrollbarXRef$curren2 === void 0 ? void 0 : _scrollbarXRef$curren2.call(_scrollbarXRef$curren, deltaX);
|
|
165
165
|
(_scrollbarYRef$curren = scrollbarYRef.current) === null || _scrollbarYRef$curren === void 0 ? void 0 : (_scrollbarYRef$curren2 = _scrollbarYRef$curren.onWheelScroll) === null || _scrollbarYRef$curren2 === void 0 ? void 0 : _scrollbarYRef$curren2.call(_scrollbarYRef$curren, deltaY, momentumOptions !== null && momentumOptions !== void 0 && momentumOptions.duration ? true : false);
|
|
166
166
|
}, [handleWheel, scrollbarXRef, scrollbarYRef]);
|
|
167
|
-
var wheelHandler = useRef();
|
|
167
|
+
var wheelHandler = useRef(null);
|
|
168
168
|
|
|
169
169
|
// Stop unending scrolling and remove transition
|
|
170
170
|
var stopScroll = useCallback(function () {
|
|
@@ -5,8 +5,8 @@ interface TableDimensionProps<Row, Key> {
|
|
|
5
5
|
rowHeight: number | ((rowData?: Row) => number);
|
|
6
6
|
height: number;
|
|
7
7
|
minHeight: number;
|
|
8
|
-
tableRef?: React.RefObject<HTMLDivElement>;
|
|
9
|
-
headerWrapperRef?: React.RefObject<HTMLDivElement>;
|
|
8
|
+
tableRef?: React.RefObject<HTMLDivElement | null>;
|
|
9
|
+
headerWrapperRef?: React.RefObject<HTMLDivElement | null>;
|
|
10
10
|
width?: number;
|
|
11
11
|
prefix: (str: string) => string;
|
|
12
12
|
affixHeader?: boolean | number;
|
|
@@ -31,15 +31,15 @@ interface TableDimensionProps<Row, Key> {
|
|
|
31
31
|
* @returns
|
|
32
32
|
*/
|
|
33
33
|
declare const useTableDimension: <Row extends RowDataType<never>, Key>(props: TableDimensionProps<Row, Key>) => {
|
|
34
|
-
contentHeight: React.
|
|
35
|
-
contentWidth: React.
|
|
36
|
-
minScrollY: React.
|
|
37
|
-
minScrollX: React.
|
|
38
|
-
scrollY: React.
|
|
39
|
-
scrollX: React.
|
|
40
|
-
tableWidth: React.
|
|
41
|
-
headerOffset: React.
|
|
42
|
-
tableOffset: React.
|
|
34
|
+
contentHeight: React.RefObject<number>;
|
|
35
|
+
contentWidth: React.RefObject<number>;
|
|
36
|
+
minScrollY: React.RefObject<number>;
|
|
37
|
+
minScrollX: React.RefObject<number>;
|
|
38
|
+
scrollY: React.RefObject<number>;
|
|
39
|
+
scrollX: React.RefObject<number>;
|
|
40
|
+
tableWidth: React.RefObject<number>;
|
|
41
|
+
headerOffset: React.RefObject<ElementOffset | null>;
|
|
42
|
+
tableOffset: React.RefObject<ElementOffset | null>;
|
|
43
43
|
getTableHeight: () => number;
|
|
44
44
|
setScrollY: (value: number) => void;
|
|
45
45
|
setScrollX: (value: number) => void;
|
|
@@ -43,8 +43,8 @@ var useTableDimension = function useTableDimension(props) {
|
|
|
43
43
|
var tableWidth = useRef(widthProp || 0);
|
|
44
44
|
var tableHeight = useRef(heightProp || 0);
|
|
45
45
|
var columnCount = useRef(0);
|
|
46
|
-
var resizeObserver = useRef();
|
|
47
|
-
var containerResizeObserver = useRef();
|
|
46
|
+
var resizeObserver = useRef(null);
|
|
47
|
+
var containerResizeObserver = useRef(null);
|
|
48
48
|
var headerOffset = useRef(null);
|
|
49
49
|
var tableOffset = useRef(null);
|
|
50
50
|
var getRowHeight = useCallback(function (rowData) {
|
|
@@ -14,7 +14,7 @@ interface TableRowsProps<Row, Key> {
|
|
|
14
14
|
declare const useTableRows: <Row extends RowDataType<never>, Key>(props: TableRowsProps<Row, Key>) => {
|
|
15
15
|
bindTableRowsRef: (index: number | string, rowData: any) => (ref: HTMLElement) => void;
|
|
16
16
|
tableRowsMaxHeight: number[];
|
|
17
|
-
tableRows: import("react").
|
|
17
|
+
tableRows: import("react").RefObject<{
|
|
18
18
|
[key: string]: [HTMLElement, any];
|
|
19
19
|
}>;
|
|
20
20
|
};
|
package/lib/ColumnGroup.js
CHANGED
|
@@ -5,8 +5,8 @@ exports.__esModule = true;
|
|
|
5
5
|
exports["default"] = void 0;
|
|
6
6
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
7
7
|
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _utils = require("./utils");
|
|
11
11
|
var _excluded = ["header", "className", "children", "classPrefix", "headerHeight", "verticalAlign", "align", "width", "groupHeaderHeight"];
|
|
12
12
|
var ColumnGroup = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
|
@@ -37,8 +37,8 @@ var ColumnResizeHandler = /*#__PURE__*/_react["default"].forwardRef(function (pr
|
|
|
37
37
|
merge = _useClassNames.merge;
|
|
38
38
|
var classes = merge(className, withClassPrefix());
|
|
39
39
|
var columnWidth = (0, _react.useRef)(defaultColumnWidth || 0);
|
|
40
|
-
var mouseMoveTracker = (0, _react.useRef)();
|
|
41
|
-
var isKeyDown = (0, _react.useRef)();
|
|
40
|
+
var mouseMoveTracker = (0, _react.useRef)(null);
|
|
41
|
+
var isKeyDown = (0, _react.useRef)(false);
|
|
42
42
|
var cursorDelta = (0, _react.useRef)(0);
|
|
43
43
|
var handleMove = (0, _react.useCallback)(function (deltaX) {
|
|
44
44
|
if (!isKeyDown.current) {
|
package/lib/Scrollbar.js
CHANGED
|
@@ -44,7 +44,7 @@ var Scrollbar = /*#__PURE__*/_react["default"].forwardRef(function (props, ref)
|
|
|
44
44
|
var scrollRange = (0, _react.useRef)(scrollLength);
|
|
45
45
|
var barRef = (0, _react.useRef)(null);
|
|
46
46
|
var handleRef = (0, _react.useRef)(null);
|
|
47
|
-
var mouseMoveTracker = (0, _react.useRef)();
|
|
47
|
+
var mouseMoveTracker = (0, _react.useRef)(null);
|
|
48
48
|
var _useClassNames = (0, _utils.useClassNames)(classPrefix),
|
|
49
49
|
withClassPrefix = _useClassNames.withClassPrefix,
|
|
50
50
|
merge = _useClassNames.merge,
|
package/lib/Table.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import type {
|
|
2
|
+
import type { RowDataType, RowKeyType, SortType, StandardProps, TableLocaleType, TableSizeChangeEventName } from './@types/common';
|
|
3
3
|
export interface TableProps<Row, Key> extends Omit<StandardProps, 'onScroll'> {
|
|
4
4
|
/**
|
|
5
5
|
* The height of the table will be automatically expanded according to the number of data rows,
|