qbs-react-grid 1.3.16 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/es/ColumnGroup.js +1 -1
  2. package/es/ColumnResizeHandler.js +2 -2
  3. package/es/Scrollbar.js +1 -1
  4. package/es/Table.d.ts +1 -1
  5. package/es/qbsTable/CustomTableCell.js +4 -4
  6. package/es/qbsTable/QbsTable.js +120 -8
  7. package/es/qbsTable/TableCardList.js +1 -1
  8. package/es/utils/getTableColumns.js +10 -10
  9. package/es/utils/useAffix.d.ts +4 -4
  10. package/es/utils/useAffix.js +5 -5
  11. package/es/utils/useCellDescriptor.d.ts +2 -2
  12. package/es/utils/useCellDescriptor.js +1 -0
  13. package/es/utils/usePosition.d.ts +5 -5
  14. package/es/utils/usePosition.js +3 -3
  15. package/es/utils/useScrollListener.d.ts +4 -4
  16. package/es/utils/useScrollListener.js +15 -15
  17. package/es/utils/useTableDimension.d.ts +11 -11
  18. package/es/utils/useTableDimension.js +2 -2
  19. package/es/utils/useTableRows.d.ts +1 -1
  20. package/lib/ColumnGroup.js +1 -1
  21. package/lib/ColumnResizeHandler.js +2 -2
  22. package/lib/Scrollbar.js +1 -1
  23. package/lib/Table.d.ts +1 -1
  24. package/lib/qbsTable/CustomTableCell.js +4 -4
  25. package/lib/qbsTable/QbsTable.js +120 -8
  26. package/lib/qbsTable/TableCardList.js +1 -1
  27. package/lib/utils/getTableColumns.js +10 -10
  28. package/lib/utils/useAffix.d.ts +4 -4
  29. package/lib/utils/useAffix.js +5 -5
  30. package/lib/utils/useCellDescriptor.d.ts +2 -2
  31. package/lib/utils/useCellDescriptor.js +1 -0
  32. package/lib/utils/usePosition.d.ts +5 -5
  33. package/lib/utils/usePosition.js +3 -3
  34. package/lib/utils/useScrollListener.d.ts +4 -4
  35. package/lib/utils/useScrollListener.js +14 -14
  36. package/lib/utils/useTableDimension.d.ts +11 -11
  37. package/lib/utils/useTableDimension.js +2 -2
  38. package/lib/utils/useTableRows.d.ts +1 -1
  39. package/package.json +7 -7
  40. package/src/ColumnGroup.tsx +25 -11
  41. package/src/ColumnResizeHandler.tsx +2 -2
  42. package/src/Scrollbar.tsx +1 -1
  43. package/src/Table.tsx +4 -4
  44. package/src/qbsTable/CustomTableCell.tsx +46 -48
  45. package/src/qbsTable/QbsTable.tsx +220 -116
  46. package/src/qbsTable/TableCardList.tsx +2 -2
  47. package/src/utils/getTableColumns.ts +4 -4
  48. package/src/utils/useAffix.ts +11 -11
  49. package/src/utils/useCellDescriptor.ts +5 -5
  50. package/src/utils/usePosition.ts +9 -9
  51. package/src/utils/useScrollListener.ts +19 -19
  52. package/src/utils/useTableDimension.ts +4 -4
package/src/utils/useScrollListener.ts CHANGED
@@ -1,18 +1,18 @@
1
- import React, { 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 { requestAnimationTimeout, cancelAnimationTimeout } from './requestAnimationTimeout';
8
- import useUpdateEffect from './useUpdateEffect';
9
- import useMount from './useMount';
10
- import { SCROLLBAR_WIDTH, TRANSITION_DURATION, BEZIER } from '../constants';
11
- import type { ScrollbarInstance } from '../Scrollbar';
3
+ import scrollLeft from 'dom-lib/scrollLeft';
4
+ import scrollTop from 'dom-lib/scrollTop';
5
+ import WheelHandler from 'dom-lib/WheelHandler';
6
+ import React, { useCallback, useEffect, useRef, useState } from 'react';
12
7
  import type { ListenerCallback, RowDataType } from '../@types/common';
13
- import isSupportTouchEvent from './isSupportTouchEvent';
14
- import flushSync from './flushSync';
8
+ import { BEZIER, SCROLLBAR_WIDTH, TRANSITION_DURATION } from '../constants';
9
+ import type { ScrollbarInstance } from '../Scrollbar';
15
10
  import defer from './defer';
11
+ import flushSync from './flushSync';
12
+ import isSupportTouchEvent from './isSupportTouchEvent';
13
+ import { cancelAnimationTimeout, requestAnimationTimeout } from './requestAnimationTimeout';
14
+ import useMount from './useMount';
15
+ import useUpdateEffect from './useUpdateEffect';
16
16
 
17
17
  // Inertial sliding start time threshold
18
18
  const momentumTimeThreshold = 300;
@@ -29,11 +29,11 @@ interface ScrollListenerProps {
29
29
  headerHeight: number;
30
30
  autoHeight?: boolean;
31
31
  tableBodyRef: React.RefObject<HTMLDivElement>;
32
- scrollbarXRef: React.RefObject<ScrollbarInstance>;
33
- scrollbarYRef: React.RefObject<ScrollbarInstance>;
32
+ scrollbarXRef: React.RefObject<ScrollbarInstance | null>;
33
+ scrollbarYRef: React.RefObject<ScrollbarInstance | null>;
34
34
  disabledScroll?: boolean;
35
35
  loading?: boolean;
36
- tableRef: React.RefObject<HTMLDivElement>;
36
+ tableRef: React.RefObject<HTMLDivElement | null>;
37
37
  contentWidth: React.MutableRefObject<number>;
38
38
  tableWidth: React.MutableRefObject<number>;
39
39
  scrollY: React.MutableRefObject<number>;
@@ -109,10 +109,10 @@ const useScrollListener = (props: ScrollListenerProps) => {
109
109
  tableKey
110
110
  } = props;
111
111
 
112
- const wheelListener = useRef<ListenerCallback>();
113
- const touchStartListener = useRef<ListenerCallback>();
114
- const touchMoveListener = useRef<ListenerCallback>();
115
- const touchEndListener = useRef<ListenerCallback>();
112
+ const wheelListener = useRef<ListenerCallback>(null);
113
+ const touchStartListener = useRef<ListenerCallback>(null);
114
+ const touchMoveListener = useRef<ListenerCallback>(null);
115
+ const touchEndListener = useRef<ListenerCallback>(null);
116
116
  const [isChildFocused, setIsChildFocused] = useState(false);
117
117
 
118
118
  const [isScrolling, setScrolling] = useState(false);
@@ -247,7 +247,7 @@ const useScrollListener = (props: ScrollListenerProps) => {
247
247
  [handleWheel, scrollbarXRef, scrollbarYRef]
248
248
  );
249
249
 
250
- const wheelHandler = useRef<WheelHandler | null>();
250
+ const wheelHandler = useRef<WheelHandler | null>(null);
251
251
 
252
252
  // Stop unending scrolling and remove transition
253
253
  const stopScroll = useCallback(() => {
package/src/utils/useTableDimension.ts CHANGED
@@ -16,8 +16,8 @@ interface TableDimensionProps<Row, Key> {
16
16
  rowHeight: number | ((rowData?: Row) => number);
17
17
  height: number;
18
18
  minHeight: number;
19
- tableRef?: React.RefObject<HTMLDivElement>;
20
- headerWrapperRef?: React.RefObject<HTMLDivElement>;
19
+ tableRef?: React.RefObject<HTMLDivElement | null>;
20
+ headerWrapperRef?: React.RefObject<HTMLDivElement | null>;
21
21
  width?: number;
22
22
  prefix: (str: string) => string;
23
23
  affixHeader?: boolean | number;
@@ -74,8 +74,8 @@ const useTableDimension = <Row extends RowDataType, Key>(props: TableDimensionPr
74
74
  const tableWidth = useRef(widthProp || 0);
75
75
  const tableHeight = useRef(heightProp || 0);
76
76
  const columnCount = useRef(0);
77
- const resizeObserver = useRef<ResizeObserver>();
78
- const containerResizeObserver = useRef<ResizeObserver>();
77
+ const resizeObserver = useRef<ResizeObserver>(null);
78
+ const containerResizeObserver = useRef<ResizeObserver>(null);
79
79
  const headerOffset = useRef<ElementOffset | null>(null);
80
80
  const tableOffset = useRef<ElementOffset | null>(null);
81
81