@noraent/nora-datagrid 0.0.55 → 0.0.56

package/lib/cjs/buildPackage.json

@@ -1,6 +1,6 @@
 {
   "name": "@noraent/nora-datagrid",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "module": "./lib/esm/index.js",
   "main": "./lib/cjs/index.js",
   "private": false,

package/lib/cjs/common/constants/useEnhancedEffect/index.d.ts

@@ -0,0 +1 @@
+export { default } from './useEnhancedEffect';

package/lib/cjs/common/constants/useEnhancedEffect/index.js

@@ -0,0 +1 @@
+export { default } from './useEnhancedEffect';

package/lib/cjs/common/constants/useEnhancedEffect/useEnhancedEffect.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const useEnhancedEffect: typeof React.useEffect;
+export default useEnhancedEffect;

package/lib/cjs/common/constants/useEnhancedEffect/useEnhancedEffect.js

@@ -0,0 +1,4 @@
+"use client";
+import * as React from "react";
+const useEnhancedEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+export default useEnhancedEffect;

package/lib/cjs/common/constants/useEventCallback.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 항상 최신 상태를 유지 해야할떄 사용
+ */
+declare function useEventCallback<Fn extends (...args: any[]) => any = (...args: unknown[]) => unknown>(fn: Fn): Fn;
+declare function useEventCallback<Args extends unknown[], Return>(fn: (...args: Args) => Return): (...args: Args) => Return;
+export default useEventCallback;

package/lib/cjs/common/constants/useEventCallback.js

@@ -0,0 +1,13 @@
+"use client";
+import * as React from "react";
+import useEnhancedEffect from "./useEnhancedEffect";
+function useEventCallback(fn) {
+    const ref = React.useRef(fn);
+    useEnhancedEffect(() => {
+        ref.current = fn;
+    });
+    return React.useRef((...args) => 
+    // @ts-expect-error hide `this`
+    (0, ref.current)(...args)).current;
+}
+export default useEventCallback;

package/lib/cjs/components/TwoDimensionalVirtualizedList.js

@@ -13,6 +13,7 @@ import ImeComponent from "./ime/IMEComponent";
 import NoDataComponent from "./body/NoDataComponent";
 import { useAddApi } from "../hooks/useGridInitialization";
 import { useDeepCompareMemo } from "../common/constants/utils";
+import useEventCallback from "../common/constants/useEventCallback";
 const initialWindowWidth = 800;
 export const initialWindowHeight = 500;
 const overscanTopRow = 4;
@@ -23,7 +24,7 @@ const frameInterval = 1000 / targetFPS;
 const DynamicVirtualScroll = React.memo(({ children }) => {
     const prevScrollTop = useRef(0);
     const prevScrollLeft = useRef(0);
-    const [scrollTop, setScrollTop] = useState(0);
+    const [_scrollTop, setScrollTop] = useState(0);
     const [scrollLeft, setScrollLeft] = useState(0);
     const [windowSize, setWindowSize] = useState({
         width: initialWindowWidth,
@@ -148,26 +149,42 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         }
         return widths;
     }, [columns]);
-    const getItemRange = useCallback(() => {
+    const prevRightScrollRef = useRef(0);
+    const prevStartRef = useRef(0);
+    const prevEndRef = useRef(0);
+    const getItemRange = useEventCallback(() => {
+        var _a, _b;
+        const rightScrollTop = Math.round((_b = (_a = rightScrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0);
+        if (prevRightScrollRef.current !== 0 && prevRightScrollRef.current === rightScrollTop) {
+            return {
+                start: prevStartRef.current,
+                end: prevEndRef.current,
+            };
+        }
         const dataSource = gridRef.current.store.state.dataSource;
-        const start = Math.max(0, binarySearchIndex(cumulativeHeights, scrollTop) - overscanTopRow);
+        const start = Math.max(0, binarySearchIndex(cumulativeHeights, rightScrollTop) - overscanTopRow);
         let end = Math.min(start + overscanBottomRow, dataSource.length);
         let startAdjust = start ? start + overscanTopRow : start;
         while (end < dataSource.length && cumulativeHeights[end] - cumulativeHeights[startAdjust] <= windowSize.height) {
             end++;
         }
         end = Math.min(end + overscanBottomRow, dataSource.length);
+        prevRightScrollRef.current = rightScrollTop;
+        prevStartRef.current = start;
+        prevEndRef.current = end;
         return { start, end };
-    }, [
-        // dataSource,
-        // JSON.stringify(dataSource),
-        scrollTop,
-        cumulativeHeights,
-        windowSize.height,
-        binarySearchIndex,
-        cumulativeHeights,
-        // __randomDataSourceKey,
-    ]);
+    }
+    // , [
+    //   // dataSource,
+    //   // JSON.stringify(dataSource),
+    //   scrollTop,
+    //   cumulativeHeights,
+    //   windowSize.height,
+    //   binarySearchIndex,
+    //   cumulativeHeights,
+    //   // __randomDataSourceKey,
+    // ]
+    );
     const { start, end } = getItemRange();
     const visibleItems = useDeepCompareMemo(() => {
         const dataSource = gridRef.current.store.state.dataSource;
@@ -195,9 +212,11 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         end,
     ]);
     const startColumnIndex = useDeepCompareMemo(() => Math.max(0, binarySearchIndex(cumulativeWidths, scrollLeft) - overscanColumn), [cumulativeWidths, scrollLeft, binarySearchIndex, overscanColumn]);
-    const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start] || 0, [cumulativeHeights, start]);
-    const offsetLeft = useDeepCompareMemo(() => cumulativeWidths[startColumnIndex] || 0, [cumulativeWidths, startColumnIndex]);
     const domRef = React.useRef(null);
+    // const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start] || 0, [cumulativeHeights, start]);
+    // const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start] || 0, [cumulativeHeights, start]);
+    const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start], [cumulativeHeights, start]);
+    const offsetLeft = useDeepCompareMemo(() => cumulativeWidths[startColumnIndex] || 0, [cumulativeWidths, startColumnIndex]);
     const updateScroll = useCallback((newScrollTop, newScrollLeft) => {
         newScrollTop !== undefined && setScrollTop(newScrollTop);
         newScrollLeft !== undefined && setScrollLeft(newScrollLeft);
@@ -206,7 +225,7 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         if (newScrollLeft !== undefined)
             prevScrollLeft.current = newScrollLeft;
     }, []);
-    const handleScroll = useCallback((e) => {
+    const handleScroll = useEventCallback((e) => {
         if (isSyncingRef.current)
             return;
         isSyncingRef.current = true;
@@ -225,8 +244,10 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
             }
             isSyncingRef.current = false;
         });
-    }, [updateScroll, frameInterval]);
-    const binarySearchColumnIndex = useCallback((items, start, scrollLeft) => {
+    }
+    // ,[updateScroll, frameInterval]
+    );
+    const binarySearchColumnIndex = useEventCallback((items, start, scrollLeft) => {
         let high = items.length - 1;
         let target = windowSize.width;
         let end = start;
@@ -237,7 +258,9 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
             }
         }
         return items.length - 1;
-    }, [windowSize.width]);
+    }
+    // ,    [windowSize.width]
+    );
     const columnEndIndex = useDeepCompareMemo(() => binarySearchColumnIndex(cumulativeWidths, startColumnIndex, scrollLeft), [cumulativeWidths, startColumnIndex, scrollLeft, windowSize.width]);
     const isSyncingRef = useRef(false);
     const handleScrollController = useCallback((e) => {
@@ -316,15 +339,7 @@ const cellClassName = cx(classes.TableClasses.body.row.cell.root, classes.TableC
 const VirtualItem = React.memo(({ column, row, isFocus, editStatus, rowIndex, }) => {
     const cellStyle = useMemo(() => ({ width: `${column.width}px` }), [column.width]);
     const deferredValue = React.useDeferredValue(row ? row[column.fieldId] : "");
-    const [showChild, setShowChild] = React.useState(true);
-    React.useEffect(() => {
-        // requestIdleCallback(() => {
-        requestAnimationFrame(() => {
-            // 브라우저 여유가 있을때 show
-            setShowChild(true);
-        });
-    }, []);
-    return (_jsx(TableCell, { "aria-colindex": column.__ariaColindex, tabIndex: isFocus ? 0 : -1, style: cellStyle, className: cellClassName, children: showChild && _jsx(CellMode, { column: column, value: deferredValue, editStatus: editStatus, rowIndex: rowIndex }) }, column.__uuid));
+    return (_jsx(TableCell, { "aria-colindex": column.__ariaColindex, tabIndex: isFocus ? 0 : -1, style: cellStyle, className: cellClassName, children: deferredValue && _jsx(CellMode, { column: column, value: deferredValue, editStatus: editStatus, rowIndex: rowIndex }) }, column.__uuid));
 });
 export const TwoDimensionalVirtualizedList = React.memo(() => {
     // 마우스 다운 시작지점점

package/lib/esm/buildPackage.json

@@ -1,6 +1,6 @@
 {
   "name": "@noraent/nora-datagrid",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "module": "./lib/esm/index.js",
   "main": "./lib/cjs/index.js",
   "private": false,

package/lib/esm/common/constants/useEnhancedEffect/index.d.ts

@@ -0,0 +1 @@
+export { default } from './useEnhancedEffect';

package/lib/esm/common/constants/useEnhancedEffect/index.js

@@ -0,0 +1 @@
+export { default } from './useEnhancedEffect';

package/lib/esm/common/constants/useEnhancedEffect/useEnhancedEffect.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const useEnhancedEffect: typeof React.useEffect;
+export default useEnhancedEffect;

package/lib/esm/common/constants/useEnhancedEffect/useEnhancedEffect.js

@@ -0,0 +1,4 @@
+"use client";
+import * as React from "react";
+const useEnhancedEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+export default useEnhancedEffect;

package/lib/esm/common/constants/useEventCallback.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 항상 최신 상태를 유지 해야할떄 사용
+ */
+declare function useEventCallback<Fn extends (...args: any[]) => any = (...args: unknown[]) => unknown>(fn: Fn): Fn;
+declare function useEventCallback<Args extends unknown[], Return>(fn: (...args: Args) => Return): (...args: Args) => Return;
+export default useEventCallback;

package/lib/esm/common/constants/useEventCallback.js

@@ -0,0 +1,13 @@
+"use client";
+import * as React from "react";
+import useEnhancedEffect from "./useEnhancedEffect";
+function useEventCallback(fn) {
+    const ref = React.useRef(fn);
+    useEnhancedEffect(() => {
+        ref.current = fn;
+    });
+    return React.useRef((...args) => 
+    // @ts-expect-error hide `this`
+    (0, ref.current)(...args)).current;
+}
+export default useEventCallback;

package/lib/esm/components/TwoDimensionalVirtualizedList.js

@@ -13,6 +13,7 @@ import ImeComponent from "./ime/IMEComponent";
 import NoDataComponent from "./body/NoDataComponent";
 import { useAddApi } from "../hooks/useGridInitialization";
 import { useDeepCompareMemo } from "../common/constants/utils";
+import useEventCallback from "../common/constants/useEventCallback";
 const initialWindowWidth = 800;
 export const initialWindowHeight = 500;
 const overscanTopRow = 4;
@@ -23,7 +24,7 @@ const frameInterval = 1000 / targetFPS;
 const DynamicVirtualScroll = React.memo(({ children }) => {
     const prevScrollTop = useRef(0);
     const prevScrollLeft = useRef(0);
-    const [scrollTop, setScrollTop] = useState(0);
+    const [_scrollTop, setScrollTop] = useState(0);
     const [scrollLeft, setScrollLeft] = useState(0);
     const [windowSize, setWindowSize] = useState({
         width: initialWindowWidth,
@@ -148,26 +149,42 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         }
         return widths;
     }, [columns]);
-    const getItemRange = useCallback(() => {
+    const prevRightScrollRef = useRef(0);
+    const prevStartRef = useRef(0);
+    const prevEndRef = useRef(0);
+    const getItemRange = useEventCallback(() => {
+        var _a, _b;
+        const rightScrollTop = Math.round((_b = (_a = rightScrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0);
+        if (prevRightScrollRef.current !== 0 && prevRightScrollRef.current === rightScrollTop) {
+            return {
+                start: prevStartRef.current,
+                end: prevEndRef.current,
+            };
+        }
         const dataSource = gridRef.current.store.state.dataSource;
-        const start = Math.max(0, binarySearchIndex(cumulativeHeights, scrollTop) - overscanTopRow);
+        const start = Math.max(0, binarySearchIndex(cumulativeHeights, rightScrollTop) - overscanTopRow);
         let end = Math.min(start + overscanBottomRow, dataSource.length);
         let startAdjust = start ? start + overscanTopRow : start;
         while (end < dataSource.length && cumulativeHeights[end] - cumulativeHeights[startAdjust] <= windowSize.height) {
             end++;
         }
         end = Math.min(end + overscanBottomRow, dataSource.length);
+        prevRightScrollRef.current = rightScrollTop;
+        prevStartRef.current = start;
+        prevEndRef.current = end;
         return { start, end };
-    }, [
-        // dataSource,
-        // JSON.stringify(dataSource),
-        scrollTop,
-        cumulativeHeights,
-        windowSize.height,
-        binarySearchIndex,
-        cumulativeHeights,
-        // __randomDataSourceKey,
-    ]);
+    }
+    // , [
+    //   // dataSource,
+    //   // JSON.stringify(dataSource),
+    //   scrollTop,
+    //   cumulativeHeights,
+    //   windowSize.height,
+    //   binarySearchIndex,
+    //   cumulativeHeights,
+    //   // __randomDataSourceKey,
+    // ]
+    );
     const { start, end } = getItemRange();
     const visibleItems = useDeepCompareMemo(() => {
         const dataSource = gridRef.current.store.state.dataSource;
@@ -195,9 +212,11 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         end,
     ]);
     const startColumnIndex = useDeepCompareMemo(() => Math.max(0, binarySearchIndex(cumulativeWidths, scrollLeft) - overscanColumn), [cumulativeWidths, scrollLeft, binarySearchIndex, overscanColumn]);
-    const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start] || 0, [cumulativeHeights, start]);
-    const offsetLeft = useDeepCompareMemo(() => cumulativeWidths[startColumnIndex] || 0, [cumulativeWidths, startColumnIndex]);
     const domRef = React.useRef(null);
+    // const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start] || 0, [cumulativeHeights, start]);
+    // const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start] || 0, [cumulativeHeights, start]);
+    const offsetTop = useDeepCompareMemo(() => cumulativeHeights[start], [cumulativeHeights, start]);
+    const offsetLeft = useDeepCompareMemo(() => cumulativeWidths[startColumnIndex] || 0, [cumulativeWidths, startColumnIndex]);
     const updateScroll = useCallback((newScrollTop, newScrollLeft) => {
         newScrollTop !== undefined && setScrollTop(newScrollTop);
         newScrollLeft !== undefined && setScrollLeft(newScrollLeft);
@@ -206,7 +225,7 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
         if (newScrollLeft !== undefined)
             prevScrollLeft.current = newScrollLeft;
     }, []);
-    const handleScroll = useCallback((e) => {
+    const handleScroll = useEventCallback((e) => {
         if (isSyncingRef.current)
             return;
         isSyncingRef.current = true;
@@ -225,8 +244,10 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
             }
             isSyncingRef.current = false;
         });
-    }, [updateScroll, frameInterval]);
-    const binarySearchColumnIndex = useCallback((items, start, scrollLeft) => {
+    }
+    // ,[updateScroll, frameInterval]
+    );
+    const binarySearchColumnIndex = useEventCallback((items, start, scrollLeft) => {
         let high = items.length - 1;
         let target = windowSize.width;
         let end = start;
@@ -237,7 +258,9 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
             }
         }
         return items.length - 1;
-    }, [windowSize.width]);
+    }
+    // ,    [windowSize.width]
+    );
     const columnEndIndex = useDeepCompareMemo(() => binarySearchColumnIndex(cumulativeWidths, startColumnIndex, scrollLeft), [cumulativeWidths, startColumnIndex, scrollLeft, windowSize.width]);
     const isSyncingRef = useRef(false);
     const handleScrollController = useCallback((e) => {
@@ -316,15 +339,7 @@ const cellClassName = cx(classes.TableClasses.body.row.cell.root, classes.TableC
 const VirtualItem = React.memo(({ column, row, isFocus, editStatus, rowIndex, }) => {
     const cellStyle = useMemo(() => ({ width: `${column.width}px` }), [column.width]);
     const deferredValue = React.useDeferredValue(row ? row[column.fieldId] : "");
-    const [showChild, setShowChild] = React.useState(true);
-    React.useEffect(() => {
-        // requestIdleCallback(() => {
-        requestAnimationFrame(() => {
-            // 브라우저 여유가 있을때 show
-            setShowChild(true);
-        });
-    }, []);
-    return (_jsx(TableCell, { "aria-colindex": column.__ariaColindex, tabIndex: isFocus ? 0 : -1, style: cellStyle, className: cellClassName, children: showChild && _jsx(CellMode, { column: column, value: deferredValue, editStatus: editStatus, rowIndex: rowIndex }) }, column.__uuid));
+    return (_jsx(TableCell, { "aria-colindex": column.__ariaColindex, tabIndex: isFocus ? 0 : -1, style: cellStyle, className: cellClassName, children: deferredValue && _jsx(CellMode, { column: column, value: deferredValue, editStatus: editStatus, rowIndex: rowIndex }) }, column.__uuid));
 });
 export const TwoDimensionalVirtualizedList = React.memo(() => {
     // 마우스 다운 시작지점점

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noraent/nora-datagrid",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "module": "./lib/esm/index.js",
   "main": "./lib/cjs/index.js",
   "private": false,