@aloudata/aloudata-design 2.19.5 → 3.0.0-beta.2

package/dist/DataPreviewTable/hooks/useDirection.js

@@ -1,216 +1,165 @@
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-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); }
-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; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { DEFAULT_COLUMN_WIDTH } from "../constant";
-import { EScrollHorizontalDirection, EScrollVerticalDirection } from "../interface";
-import getColumnOffsetsFromWidths from "../utils/getColumnOffsetsFromWidths";
-import getColumnRange from "../utils/getColumnRange";
-import getRowRange from "../utils/getRowRange";
-import getTableLayout from "../utils/getTableLayout";
-export default function useDirection(columns, wrapRef) {
-  var prevScrollData = useRef({
-    scrollTop: 0,
-    scrollLeft: 0,
-    direction: {
-      vertical: EScrollVerticalDirection.SCROLL_TO_BOTTOM,
-      horizontal: EScrollHorizontalDirection.SCROLL_TO_RIGHT,
-      current: 'init'
-    }
-  });
-  var _useState = useState([0, 0]),
-    _useState2 = _slicedToArray(_useState, 2),
-    columnRange = _useState2[0],
-    setColumnRange = _useState2[1];
-  var _useState3 = useState([0, 0]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    rowRange = _useState4[0],
-    setRowRange = _useState4[1];
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    tableColumns = _useState6[0],
-    setTableColumns = _useState6[1];
-  var _useState7 = useState(0),
-    _useState8 = _slicedToArray(_useState7, 2),
-    contentWidth = _useState8[0],
-    setContentWidth = _useState8[1];
-  var columnWidthRef = useRef({});
-  var getScrollDirection = useCallback(function (currentScrollTop, currentScrollLeft) {
-    var _prevScrollData$curre = prevScrollData.current,
-      preScrollTop = _prevScrollData$curre.scrollTop,
-      preScrollLeft = _prevScrollData$curre.scrollLeft;
-    if (currentScrollLeft > preScrollLeft) {
-      var direction = {
-        vertical: EScrollVerticalDirection.SCROLL_TO_BOTTOM,
-        horizontal: EScrollHorizontalDirection.SCROLL_TO_RIGHT,
-        current: EScrollHorizontalDirection.SCROLL_TO_RIGHT
-      };
-      prevScrollData.current = {
-        scrollTop: currentScrollTop,
-        scrollLeft: currentScrollLeft,
-        direction: direction
-      };
-      return direction;
-    } else if (currentScrollLeft < preScrollLeft) {
-      var _direction = {
-        vertical: EScrollVerticalDirection.SCROLL_TO_BOTTOM,
-        horizontal: EScrollHorizontalDirection.SCROLL_TO_LEFT,
-        current: EScrollHorizontalDirection.SCROLL_TO_LEFT
-      };
-      prevScrollData.current = {
-        scrollTop: currentScrollTop,
-        scrollLeft: currentScrollLeft,
-        direction: _direction
-      };
-      return _direction;
-    } else if (currentScrollTop > preScrollTop) {
-      var _direction2 = {
-        vertical: EScrollVerticalDirection.SCROLL_TO_BOTTOM,
-        horizontal: EScrollHorizontalDirection.SCROLL_TO_RIGHT,
-        current: EScrollVerticalDirection.SCROLL_TO_BOTTOM
-      };
-      prevScrollData.current = {
-        scrollTop: currentScrollTop,
-        scrollLeft: currentScrollLeft,
-        direction: _direction2
-      };
-      return _direction2;
-    } else if (currentScrollTop < preScrollTop) {
-      var _direction3 = {
-        vertical: EScrollVerticalDirection.SCROLL_TO_TOP,
-        horizontal: EScrollHorizontalDirection.SCROLL_TO_RIGHT,
-        current: EScrollVerticalDirection.SCROLL_TO_TOP
-      };
-      prevScrollData.current = {
-        scrollTop: currentScrollTop,
-        scrollLeft: currentScrollLeft,
-        direction: _direction3
-      };
-      return _direction3;
-    } else {
-      return prevScrollData.current.direction;
-    }
-  }, []);
-  var _useState9 = useState([]),
-    _useState10 = _slicedToArray(_useState9, 2),
-    columnsOffsets = _useState10[0],
-    setColumnsOffsets = _useState10[1];
-  var setRange = useCallback(function (columnsOffsets) {
-    var _wrapRef$current, _wrapRef$current2, _wrapRef$current3, _wrapRef$current4;
-    var scrollTop = ((_wrapRef$current = wrapRef.current) === null || _wrapRef$current === void 0 ? void 0 : _wrapRef$current.scrollTop) || 0;
-    var scrollLeft = ((_wrapRef$current2 = wrapRef.current) === null || _wrapRef$current2 === void 0 ? void 0 : _wrapRef$current2.scrollLeft) || 0;
-    var direction = getScrollDirection(scrollTop, scrollLeft);
-    var columnRange = getColumnRange({
-      direction: direction.horizontal,
-      wrapWidth: ((_wrapRef$current3 = wrapRef.current) === null || _wrapRef$current3 === void 0 ? void 0 : _wrapRef$current3.clientWidth) || 0,
-      scrollLeft: scrollLeft,
-      columnsOffsets: columnsOffsets
-    });
-    if (columnRange) {
-      setColumnRange(columnRange);
-    }
-    var rowRange = getRowRange({
-      direction: direction.vertical,
-      wrapHeight: ((_wrapRef$current4 = wrapRef.current) === null || _wrapRef$current4 === void 0 ? void 0 : _wrapRef$current4.clientHeight) || 0,
-      scrollTop: scrollTop
-    });
-    if (rowRange) {
-      setRowRange(rowRange);
-    }
-  }, [getScrollDirection, wrapRef]);
-  var _useState11 = useState({}),
-    _useState12 = _slicedToArray(_useState11, 2),
-    columnLayout = _useState12[0],
-    setColumnLayout = _useState12[1];
-  var onScroll = function onScroll() {
-    setRange(columnsOffsets);
-  };
-  useEffect(function () {
-    if (columns.length > 0) {
-      // 存在有效的列
-      // 计算列宽
-      var columnWidths = columns.map(function (_ref) {
-        var defaultWidth = _ref.defaultWidth,
-          id = _ref.id;
-        var width = columnWidthRef.current[id] || defaultWidth || DEFAULT_COLUMN_WIDTH;
-        columnWidthRef.current[id] = width;
-        return width;
-      });
+import { EScrollHorizontalDirection, EScrollVerticalDirection } from "../interface.js";
+import getColumnOffsetsFromWidths_default from "../utils/getColumnOffsetsFromWidths.js";
+import getColumnRange_default from "../utils/getColumnRange.js";
+import getRowRange_default from "../utils/getRowRange.js";
+import getTableLayout_default from "../utils/getTableLayout.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/DataPreviewTable/hooks/useDirection.ts
+function useDirection(columns, wrapRef) {
+	const prevScrollData = useRef({
+		scrollTop: 0,
+		scrollLeft: 0,
+		direction: {
+			vertical: EScrollVerticalDirection.SCROLL_TO_BOTTOM,
+			horizontal: EScrollHorizontalDirection.SCROLL_TO_RIGHT,
+			current: "init"
+		}
+	});
+	const [columnRange, setColumnRange] = useState([0, 0]);
+	const [rowRange, setRowRange] = useState([0, 0]);
+	const [tableColumns, setTableColumns] = useState([]);
+	const [contentWidth, setContentWidth] = useState(0);
+	const columnWidthRef = useRef({});
+	const getScrollDirection = useCallback((currentScrollTop, currentScrollLeft) => {
+		const { scrollTop: preScrollTop, scrollLeft: preScrollLeft } = prevScrollData.current;
+		if (currentScrollLeft > preScrollLeft) {
+			const direction = {
+				vertical: EScrollVerticalDirection.SCROLL_TO_BOTTOM,
+				horizontal: EScrollHorizontalDirection.SCROLL_TO_RIGHT,
+				current: EScrollHorizontalDirection.SCROLL_TO_RIGHT
+			};
+			prevScrollData.current = {
+				scrollTop: currentScrollTop,
+				scrollLeft: currentScrollLeft,
+				direction
+			};
+			return direction;
+		} else if (currentScrollLeft < preScrollLeft) {
+			const direction = {
+				vertical: EScrollVerticalDirection.SCROLL_TO_BOTTOM,
+				horizontal: EScrollHorizontalDirection.SCROLL_TO_LEFT,
+				current: EScrollHorizontalDirection.SCROLL_TO_LEFT
+			};
+			prevScrollData.current = {
+				scrollTop: currentScrollTop,
+				scrollLeft: currentScrollLeft,
+				direction
+			};
+			return direction;
+		} else if (currentScrollTop > preScrollTop) {
+			const direction = {
+				vertical: EScrollVerticalDirection.SCROLL_TO_BOTTOM,
+				horizontal: EScrollHorizontalDirection.SCROLL_TO_RIGHT,
+				current: EScrollVerticalDirection.SCROLL_TO_BOTTOM
+			};
+			prevScrollData.current = {
+				scrollTop: currentScrollTop,
+				scrollLeft: currentScrollLeft,
+				direction
+			};
+			return direction;
+		} else if (currentScrollTop < preScrollTop) {
+			const direction = {
+				vertical: EScrollVerticalDirection.SCROLL_TO_TOP,
+				horizontal: EScrollHorizontalDirection.SCROLL_TO_RIGHT,
+				current: EScrollVerticalDirection.SCROLL_TO_TOP
+			};
+			prevScrollData.current = {
+				scrollTop: currentScrollTop,
+				scrollLeft: currentScrollLeft,
+				direction
+			};
+			return direction;
+		} else return prevScrollData.current.direction;
+	}, []);
+	const [columnsOffsets, setColumnsOffsets] = useState([]);
+	const setRange = useCallback((columnsOffsets) => {
+		const scrollTop = wrapRef.current?.scrollTop || 0;
+		const scrollLeft = wrapRef.current?.scrollLeft || 0;
+		const direction = getScrollDirection(scrollTop, scrollLeft);
+		const columnRange = getColumnRange_default({
+			direction: direction.horizontal,
+			wrapWidth: wrapRef.current?.clientWidth || 0,
+			scrollLeft,
+			columnsOffsets
+		});
+		if (columnRange) setColumnRange(columnRange);
+		const rowRange = getRowRange_default({
+			direction: direction.vertical,
+			wrapHeight: wrapRef.current?.clientHeight || 0,
+			scrollTop
+		});
+		if (rowRange) setRowRange(rowRange);
+	}, [getScrollDirection, wrapRef]);
+	const [columnLayout, setColumnLayout] = useState({});
+	const onScroll = () => {
+		setRange(columnsOffsets);
+	};
+	useEffect(() => {
+		if (columns.length > 0) {
+			const columnWidths = columns.map(({ defaultWidth, id }) => {
+				const width = columnWidthRef.current[id] || defaultWidth || 100;
+				columnWidthRef.current[id] = width;
+				return width;
+			});
+			const contentWidth = columnWidths.reduce((sum, width) => {
+				return sum + width;
+			}, 0);
+			const offsets = getColumnOffsetsFromWidths_default(columnWidths);
+			const columnLayout = getTableLayout_default(columns, columnWidths);
+			setContentWidth(contentWidth);
+			setColumnsOffsets(offsets);
+			setColumnLayout(columnLayout);
+			setRange(offsets);
+			setTableColumns(columns);
+		} else {
+			setContentWidth(0);
+			setColumnsOffsets([]);
+			setColumnLayout({});
+			setTableColumns([]);
+		}
+	}, [columns, setRange]);
+	const setColumnsWidth = useCallback((columnId, width) => {
+		columnWidthRef.current[columnId] = width;
+		const columnWidths = columns.map(({ id }) => {
+			return columnWidthRef.current[id];
+		});
+		const offsets = getColumnOffsetsFromWidths_default(columnWidths);
+		const columnLayout = getTableLayout_default(columns, columnWidths);
+		setContentWidth(columnWidths.reduce((sum, width) => {
+			return sum + width;
+		}, 0));
+		setColumnsOffsets(offsets);
+		setColumnLayout(columnLayout);
+		setRange(offsets);
+	}, [columns, setRange]);
+	useEffect(() => {
+		const wrap = wrapRef.current;
+		const resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) if (entry.contentRect) setRange(columnsOffsets);
+			else if (entry.contentBoxSize) setRange(columnsOffsets);
+		});
+		resizeObserver.observe(wrap);
+		return () => {
+			resizeObserver.unobserve(wrap);
+			resizeObserver.disconnect();
+		};
+	}, [
+		wrapRef,
+		setRange,
+		columnsOffsets
+	]);
+	return {
+		columnRange,
+		rowRange,
+		setColumnsWidth,
+		columnLayout,
+		contentWidth,
+		tableColumns,
+		onScroll
+	};
+}
+//#endregion
+export { useDirection as default };
 
-      // 计算contentWidth
-      var _contentWidth = columnWidths.reduce(function (sum, width) {
-        return sum + width;
-      }, 0);
-      // 计算columnsOffsets
-      var offsets = getColumnOffsetsFromWidths(columnWidths);
-      // 计算columnLayout
-      var _columnLayout = getTableLayout(columns, columnWidths);
-      setContentWidth(_contentWidth);
-      setColumnsOffsets(offsets);
-      setColumnLayout(_columnLayout);
-      setRange(offsets);
-      setTableColumns(columns);
-    } else {
-      // 没有有效的列
-      setContentWidth(0);
-      setColumnsOffsets([]);
-      setColumnLayout({});
-      // setRange();
-      setTableColumns([]);
-    }
-  }, [columns, setRange]);
-  var setColumnsWidth = useCallback(function (columnId, width) {
-    columnWidthRef.current[columnId] = width;
-    var columnWidths = columns.map(function (_ref2) {
-      var id = _ref2.id;
-      return columnWidthRef.current[id];
-    });
-    var offsets = getColumnOffsetsFromWidths(columnWidths);
-    var columnLayout = getTableLayout(columns, columnWidths);
-    setContentWidth(columnWidths.reduce(function (sum, width) {
-      return sum + width;
-    }, 0));
-    setColumnsOffsets(offsets);
-    setColumnLayout(columnLayout);
-    setRange(offsets);
-  }, [columns, setRange]);
-  useEffect(function () {
-    var wrap = wrapRef.current;
-    var resizeObserver = new ResizeObserver(function (entries) {
-      var _iterator = _createForOfIteratorHelper(entries),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var entry = _step.value;
-          if (entry.contentRect) {
-            setRange(columnsOffsets);
-          } else if (entry.contentBoxSize) {
-            setRange(columnsOffsets);
-          }
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
-      }
-    });
-    resizeObserver.observe(wrap);
-    return function () {
-      resizeObserver.unobserve(wrap);
-      resizeObserver.disconnect();
-    };
-  }, [wrapRef, setRange, columnsOffsets]);
-  return {
-    columnRange: columnRange,
-    rowRange: rowRange,
-    setColumnsWidth: setColumnsWidth,
-    columnLayout: columnLayout,
-    contentWidth: contentWidth,
-    tableColumns: tableColumns,
-    onScroll: onScroll
-  };
-}
+//# sourceMappingURL=useDirection.js.map

package/dist/DataPreviewTable/hooks/useDirection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDirection.js","names":[],"sources":["../../../src/DataPreviewTable/hooks/useDirection.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef, useState } from 'react';\nimport { DEFAULT_COLUMN_WIDTH } from '../constant';\nimport {\n  EScrollHorizontalDirection,\n  EScrollVerticalDirection,\n  IColumnLayout,\n  IScrollData,\n  PreviewColumn,\n} from '../interface';\nimport getColumnOffsetsFromWidths from '../utils/getColumnOffsetsFromWidths';\nimport getColumnRange from '../utils/getColumnRange';\nimport getRowRange from '../utils/getRowRange';\nimport getTableLayout from '../utils/getTableLayout';\nexport default function useDirection(\n  columns: PreviewColumn[],\n  wrapRef: RefObject<HTMLDivElement>,\n) {\n  const prevScrollData = useRef<IScrollData>({\n    scrollTop: 0,\n    scrollLeft: 0,\n    direction: {\n      vertical: EScrollVerticalDirection.SCROLL_TO_BOTTOM,\n      horizontal: EScrollHorizontalDirection.SCROLL_TO_RIGHT,\n      current: 'init',\n    },\n  });\n\n  const [columnRange, setColumnRange] = useState<[number, number]>([0, 0]);\n  const [rowRange, setRowRange] = useState<[number, number]>([0, 0]);\n  const [tableColumns, setTableColumns] = useState<PreviewColumn[]>([]);\n  const [contentWidth, setContentWidth] = useState<number>(0);\n  const columnWidthRef = useRef<{\n    [id: string]: number;\n  }>({});\n  const getScrollDirection = useCallback(\n    (currentScrollTop: number, currentScrollLeft: number) => {\n      const { scrollTop: preScrollTop, scrollLeft: preScrollLeft } =\n        prevScrollData.current;\n\n      if (currentScrollLeft > preScrollLeft) {\n        const direction = {\n          vertical: EScrollVerticalDirection.SCROLL_TO_BOTTOM,\n          horizontal: EScrollHorizontalDirection.SCROLL_TO_RIGHT,\n          current: EScrollHorizontalDirection.SCROLL_TO_RIGHT,\n        };\n        prevScrollData.current = {\n          scrollTop: currentScrollTop,\n          scrollLeft: currentScrollLeft,\n          direction,\n        };\n        return direction;\n      } else if (currentScrollLeft < preScrollLeft) {\n        const direction = {\n          vertical: EScrollVerticalDirection.SCROLL_TO_BOTTOM,\n          horizontal: EScrollHorizontalDirection.SCROLL_TO_LEFT,\n          current: EScrollHorizontalDirection.SCROLL_TO_LEFT,\n        };\n        prevScrollData.current = {\n          scrollTop: currentScrollTop,\n          scrollLeft: currentScrollLeft,\n          direction,\n        };\n        return direction;\n      } else if (currentScrollTop > preScrollTop) {\n        const direction = {\n          vertical: EScrollVerticalDirection.SCROLL_TO_BOTTOM,\n          horizontal: EScrollHorizontalDirection.SCROLL_TO_RIGHT,\n          current: EScrollVerticalDirection.SCROLL_TO_BOTTOM,\n        };\n        prevScrollData.current = {\n          scrollTop: currentScrollTop,\n          scrollLeft: currentScrollLeft,\n          direction,\n        };\n        return direction;\n      } else if (currentScrollTop < preScrollTop) {\n        const direction = {\n          vertical: EScrollVerticalDirection.SCROLL_TO_TOP,\n          horizontal: EScrollHorizontalDirection.SCROLL_TO_RIGHT,\n          current: EScrollVerticalDirection.SCROLL_TO_TOP,\n        };\n        prevScrollData.current = {\n          scrollTop: currentScrollTop,\n          scrollLeft: currentScrollLeft,\n          direction,\n        };\n        return direction;\n      } else {\n        return prevScrollData.current.direction;\n      }\n    },\n    [],\n  );\n  const [columnsOffsets, setColumnsOffsets] = useState<number[]>([]);\n\n  const setRange = useCallback(\n    (columnsOffsets: number[]) => {\n      const scrollTop: number = wrapRef.current?.scrollTop || 0;\n      const scrollLeft: number = wrapRef.current?.scrollLeft || 0;\n      const direction = getScrollDirection(scrollTop, scrollLeft);\n\n      const columnRange = getColumnRange({\n        direction: direction.horizontal,\n        wrapWidth: wrapRef.current?.clientWidth || 0,\n        scrollLeft,\n        columnsOffsets,\n      });\n\n      if (columnRange) {\n        setColumnRange(columnRange);\n      }\n      const rowRange = getRowRange({\n        direction: direction.vertical,\n        wrapHeight: wrapRef.current?.clientHeight || 0,\n        scrollTop,\n      });\n      if (rowRange) {\n        setRowRange(rowRange);\n      }\n    },\n    [getScrollDirection, wrapRef],\n  );\n  const [columnLayout, setColumnLayout] = useState<IColumnLayout>({});\n  const onScroll = () => {\n    setRange(columnsOffsets);\n  };\n  useEffect(() => {\n    if (columns.length > 0) {\n      // 存在有效的列\n      // 计算列宽\n      const columnWidths = columns.map(({ defaultWidth, id }) => {\n        const width =\n          columnWidthRef.current[id] || defaultWidth || DEFAULT_COLUMN_WIDTH;\n        columnWidthRef.current[id] = width;\n        return width;\n      });\n\n      // 计算contentWidth\n      const contentWidth = columnWidths.reduce((sum, width) => {\n        return sum + width;\n      }, 0);\n      // 计算columnsOffsets\n      const offsets = getColumnOffsetsFromWidths(columnWidths);\n      // 计算columnLayout\n      const columnLayout = getTableLayout(columns, columnWidths);\n\n      setContentWidth(contentWidth);\n      setColumnsOffsets(offsets);\n      setColumnLayout(columnLayout);\n      setRange(offsets);\n      setTableColumns(columns);\n    } else {\n      // 没有有效的列\n      setContentWidth(0);\n      setColumnsOffsets([]);\n      setColumnLayout({});\n      // setRange();\n      setTableColumns([]);\n    }\n  }, [columns, setRange]);\n  const setColumnsWidth = useCallback(\n    (columnId: string, width: number) => {\n      columnWidthRef.current[columnId] = width;\n      const columnWidths = columns.map(({ id }) => {\n        return columnWidthRef.current[id];\n      });\n      const offsets = getColumnOffsetsFromWidths(columnWidths);\n      const columnLayout = getTableLayout(columns, columnWidths);\n      setContentWidth(\n        columnWidths.reduce((sum, width) => {\n          return sum + width;\n        }, 0),\n      );\n      setColumnsOffsets(offsets);\n      setColumnLayout(columnLayout);\n      setRange(offsets);\n    },\n    [columns, setRange],\n  );\n\n  useEffect(() => {\n    const wrap = wrapRef.current;\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.contentRect) {\n          setRange(columnsOffsets);\n        } else if (entry.contentBoxSize) {\n          setRange(columnsOffsets);\n        }\n      }\n    });\n    resizeObserver.observe(wrap as Element);\n    return () => {\n      resizeObserver.unobserve(wrap as Element);\n      resizeObserver.disconnect();\n    };\n  }, [wrapRef, setRange, columnsOffsets]);\n\n  return {\n    columnRange,\n    rowRange,\n    setColumnsWidth,\n    columnLayout,\n    contentWidth,\n    tableColumns,\n    onScroll,\n  };\n}\n"],"mappings":"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"}

package/dist/DataPreviewTable/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { DataPreviewTableRef, ITableProps } from './interface';
+import { default as React } from 'react';
+import { DataPreviewTableRef, ITableProps } from './interface.js';
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<ITableProps & React.RefAttributes<DataPreviewTableRef>>>;
 export default _default;