@noraent/nora-datagrid 0.0.30 → 0.0.32

package/lib/cjs/App.js

@@ -20,7 +20,7 @@ const RenderCell = (params) => {
             for (let i = 0; i < 1; i++) {
                 tt += 233300 * i;
             }
-            const data = Array.from({ length: 1 }, (_, i) => {
+            Array.from({ length: 1 }, (_, i) => {
                 return {
                     id: i,
                     code: `${tt} -test-${i}`,
@@ -164,7 +164,7 @@ function App() {
     const ref = useGridApiRef();
     const [dataSource, setDataSource] = useState([]);
     const handleDataSource = () => {
-        const data = Array.from({ length: 1000 }, (_, i) => {
+        const data = Array.from({ length: 1000000 }, (_, i) => {
             return {
                 id: i,
                 code: `test-${i}`,
@@ -180,6 +180,10 @@ function App() {
         setDataSource(data);
     };
     return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => {
+                    ref.current.scrollToRowIndex(414);
+                }, children: "414 \uC774\uB3D9" }), _jsx("button", { onClick: () => {
+                    ref.current.scrollToRowIndex(1000000);
+                }, children: "1000000 \uC774\uB3D9" }), _jsx("button", { onClick: () => {
                     handleDataSource();
                 }, children: "\uB370\uC774\uD130 set" }), _jsx("button", { onClick: () => {
                     const data = ref.current.getData();

package/lib/cjs/buildPackage.json

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

package/lib/cjs/hooks/external/usePublicTest.js

@@ -1,23 +1,27 @@
 import React from "react";
-// import {
-//   DataGridPrivateApi,
-//   DataGridPublicApi,
-//   GirdApiCommon,
-// } from "@/core/types/dataGridProps";
 import { useGridApiMethod } from "../useGridApiMethod";
+import { classes } from "../../types/classes";
 export default function usePublicTest(apiRef) {
     const getData = React.useCallback(() => {
         return apiRef.current.store.state.dataSource;
     }, []);
-    const setTextPublic = React.useCallback((_data) => {
-        alert("dd");
-        console.log("!!!! public");
+    const scrollToRowIndex = React.useCallback((rowIndex) => {
+        // 가변 X
+        // const top = rowIndex * 32 - 32;
+        apiRef.current.initHeightCache();
+        if (apiRef.current.store.gridContainer.current) {
+            const body = apiRef.current.store.gridContainer.current.querySelector(`.${classes.TableClasses.body.scroll.root}`);
+            if (body) {
+                const top = apiRef.current.getScrollTop(rowIndex);
+                body.scrollTop = top;
+            }
+        }
     }, []);
     const addCellRange = React.useCallback((cellRange) => {
         const updatedCellRange = structuredClone(apiRef.current.store.__cellRange);
         updatedCellRange.push(cellRange);
         apiRef.current = Object.assign(Object.assign({}, apiRef.current), { store: Object.assign(Object.assign({}, apiRef.current.store), { __cellRange: updatedCellRange }) });
     }, []);
-    const apiMethods = { setTextPublic, addCellRange, getData };
+    const apiMethods = { addCellRange, getData, scrollToRowIndex };
     useGridApiMethod(apiRef, apiMethods, "public");
 }

package/lib/cjs/hooks/internal/useInternalPrivateApi.js

@@ -75,10 +75,13 @@ export default function useInternalPrivateApi(apiRef) {
         return defaultValues[key];
     }
     const scrollToRowIndex = React.useCallback((rowIndex) => {
-        const top = rowIndex * 32 - 32;
+        // 가변 X
+        // const top = rowIndex * 32 - 32;
+        apiRef.current.initHeightCache();
         if (apiRef.current.store.gridContainer.current) {
             const body = apiRef.current.store.gridContainer.current.querySelector(`.${classes.TableClasses.body.scroll.root}`);
             if (body) {
+                const top = getScrollTop(rowIndex);
                 body.scrollTop = top;
             }
         }
@@ -111,6 +114,31 @@ export default function useInternalPrivateApi(apiRef) {
         store.state.dataSource[rowIndex] = Object.assign(Object.assign({}, store.state.dataSource[rowIndex]), { [fieldId]: value });
         return store.state.dataSource;
     }), []);
+    const initHeightCache = React.useCallback(() => {
+        let sum = 0;
+        const heightCache = apiRef.current.store.state.dataSource.map((row) => {
+            var _a;
+            sum += (_a = row.height) !== null && _a !== void 0 ? _a : 32;
+            return sum;
+        });
+        apiRef.current.store.heightCache = heightCache;
+    }, []);
+    const getScrollTop = React.useCallback((rowIndex) => {
+        let low = 0;
+        let high = apiRef.current.store.heightCache.length - 1;
+        let result = 0;
+        while (low <= high) {
+            const mid = Math.floor((low + high) / 2);
+            if (mid < rowIndex) {
+                result = apiRef.current.store.heightCache[mid];
+                low = mid + 1;
+            }
+            else {
+                high = mid - 1;
+            }
+        }
+        return result;
+    }, []);
     const apiMethods = {
         setText,
         setGridContainer,
@@ -122,6 +150,8 @@ export default function useInternalPrivateApi(apiRef) {
         setEditStatus,
         cellByRowIndex,
         setBasicStore,
+        initHeightCache,
+        getScrollTop,
     };
     useGridApiMethod(apiRef, apiMethods, "private");
     return {};

package/lib/cjs/types/dataGridProps.d.ts

@@ -54,6 +54,7 @@ export interface DataGridOptionPropsModel {
  */
 interface DataGridBasicStorePropsModel {
     gridContainer: React.RefObject<HTMLDivElement>;
+    heightCache: number[];
     __cellRange: Array<CellRangeDef>;
     __cellRangeTemp: CellRangeTempDef;
 }
@@ -91,6 +92,12 @@ export interface DataGridPrivateApiModel {
      * @namespace NoraDataGrid.DataGridPrivateApiModel.setBasicProps
      */
     setBasicStore: (props: DataGridBasicProps) => DataGridStoreDef["state"];
+    /**
+     * 특정 행(row)의  스크롤 위치를 가져옵니다.
+     * @private
+     * @namespace NoraDataGrid.DataGridPrivateApiModel.getScrollTop
+     */
+    getScrollTop: (rowIndex: number) => number;
     /**
      * 특정 행(row)의 위치로 스크롤을 이동합니다.
      * @private
@@ -116,18 +123,34 @@ export interface DataGridPrivateApiModel {
      * 셀 모드를 변경합니다.
      */
     setEditStatus: (editStatus: DataGridStoreDef["state"]["editStatus"]) => Promise<DataGridStoreDef["state"]["editStatus"]>;
+    /**
+     * 데이터에 있는 모든 행 높이를 초기화 합니다.
+     * @private
+     * @namespace NoraDataGrid.DataGridPublicApiModel.getData
+     */
+    initHeightCache: () => void;
     cellByRowIndex: (rowIndex: number, fieldId: keyof DataGridPrivateDataSourceModel, value: string | number | undefined) => Promise<DataGridStoreDef["state"]["dataSource"]>;
 }
 export interface DataGridPublicApiModel {
-    setTextPublic: (data: any) => void;
     /**
      * 선택할 셀의 범위를 추가합니다.
      * @param cellRange
      * @returns
      */
     addCellRange: (cellRange: CellRangeDef) => void;
-    forceUpdate: () => void;
+    /**
+     * 현재 데이터를 가져옵니다.
+     * @public
+     * @namespace NoraDataGrid.DataGridPublicApiModel.getData
+     */
     getData: <R extends DataGridBasicPropsModel["dataSource"] = DataGridBasicPropsModel["dataSource"]>() => R;
+    /**
+     * 특정 행(row)의 위치로 스크롤을 이동합니다.
+     * @public
+     * @namespace NoraDataGrid.DataGridPublicApiModel.scrollToRowIndex
+     */
+    scrollToRowIndex: (rowIndex: number) => void;
+    forceUpdate: () => void;
 }
 export type CommonApi = React.MutableRefObject<DataGridPrivateApi | null>;
 export type GirdApi = DataGridPublicApi;

package/lib/esm/App.js

@@ -20,7 +20,7 @@ const RenderCell = (params) => {
             for (let i = 0; i < 1; i++) {
                 tt += 233300 * i;
             }
-            const data = Array.from({ length: 1 }, (_, i) => {
+            Array.from({ length: 1 }, (_, i) => {
                 return {
                     id: i,
                     code: `${tt} -test-${i}`,
@@ -164,7 +164,7 @@ function App() {
     const ref = useGridApiRef();
     const [dataSource, setDataSource] = useState([]);
     const handleDataSource = () => {
-        const data = Array.from({ length: 1000 }, (_, i) => {
+        const data = Array.from({ length: 1000000 }, (_, i) => {
             return {
                 id: i,
                 code: `test-${i}`,
@@ -180,6 +180,10 @@ function App() {
         setDataSource(data);
     };
     return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => {
+                    ref.current.scrollToRowIndex(414);
+                }, children: "414 \uC774\uB3D9" }), _jsx("button", { onClick: () => {
+                    ref.current.scrollToRowIndex(1000000);
+                }, children: "1000000 \uC774\uB3D9" }), _jsx("button", { onClick: () => {
                     handleDataSource();
                 }, children: "\uB370\uC774\uD130 set" }), _jsx("button", { onClick: () => {
                     const data = ref.current.getData();

package/lib/esm/buildPackage.json

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

package/lib/esm/hooks/external/usePublicTest.js

@@ -1,23 +1,27 @@
 import React from "react";
-// import {
-//   DataGridPrivateApi,
-//   DataGridPublicApi,
-//   GirdApiCommon,
-// } from "@/core/types/dataGridProps";
 import { useGridApiMethod } from "../useGridApiMethod";
+import { classes } from "../../types/classes";
 export default function usePublicTest(apiRef) {
     const getData = React.useCallback(() => {
         return apiRef.current.store.state.dataSource;
     }, []);
-    const setTextPublic = React.useCallback((_data) => {
-        alert("dd");
-        console.log("!!!! public");
+    const scrollToRowIndex = React.useCallback((rowIndex) => {
+        // 가변 X
+        // const top = rowIndex * 32 - 32;
+        apiRef.current.initHeightCache();
+        if (apiRef.current.store.gridContainer.current) {
+            const body = apiRef.current.store.gridContainer.current.querySelector(`.${classes.TableClasses.body.scroll.root}`);
+            if (body) {
+                const top = apiRef.current.getScrollTop(rowIndex);
+                body.scrollTop = top;
+            }
+        }
     }, []);
     const addCellRange = React.useCallback((cellRange) => {
         const updatedCellRange = structuredClone(apiRef.current.store.__cellRange);
         updatedCellRange.push(cellRange);
         apiRef.current = Object.assign(Object.assign({}, apiRef.current), { store: Object.assign(Object.assign({}, apiRef.current.store), { __cellRange: updatedCellRange }) });
     }, []);
-    const apiMethods = { setTextPublic, addCellRange, getData };
+    const apiMethods = { addCellRange, getData, scrollToRowIndex };
     useGridApiMethod(apiRef, apiMethods, "public");
 }

package/lib/esm/hooks/internal/useInternalPrivateApi.js

@@ -75,10 +75,13 @@ export default function useInternalPrivateApi(apiRef) {
         return defaultValues[key];
     }
     const scrollToRowIndex = React.useCallback((rowIndex) => {
-        const top = rowIndex * 32 - 32;
+        // 가변 X
+        // const top = rowIndex * 32 - 32;
+        apiRef.current.initHeightCache();
         if (apiRef.current.store.gridContainer.current) {
             const body = apiRef.current.store.gridContainer.current.querySelector(`.${classes.TableClasses.body.scroll.root}`);
             if (body) {
+                const top = getScrollTop(rowIndex);
                 body.scrollTop = top;
             }
         }
@@ -111,6 +114,31 @@ export default function useInternalPrivateApi(apiRef) {
         store.state.dataSource[rowIndex] = Object.assign(Object.assign({}, store.state.dataSource[rowIndex]), { [fieldId]: value });
         return store.state.dataSource;
     }), []);
+    const initHeightCache = React.useCallback(() => {
+        let sum = 0;
+        const heightCache = apiRef.current.store.state.dataSource.map((row) => {
+            var _a;
+            sum += (_a = row.height) !== null && _a !== void 0 ? _a : 32;
+            return sum;
+        });
+        apiRef.current.store.heightCache = heightCache;
+    }, []);
+    const getScrollTop = React.useCallback((rowIndex) => {
+        let low = 0;
+        let high = apiRef.current.store.heightCache.length - 1;
+        let result = 0;
+        while (low <= high) {
+            const mid = Math.floor((low + high) / 2);
+            if (mid < rowIndex) {
+                result = apiRef.current.store.heightCache[mid];
+                low = mid + 1;
+            }
+            else {
+                high = mid - 1;
+            }
+        }
+        return result;
+    }, []);
     const apiMethods = {
         setText,
         setGridContainer,
@@ -122,6 +150,8 @@ export default function useInternalPrivateApi(apiRef) {
         setEditStatus,
         cellByRowIndex,
         setBasicStore,
+        initHeightCache,
+        getScrollTop,
     };
     useGridApiMethod(apiRef, apiMethods, "private");
     return {};

package/lib/esm/types/dataGridProps.d.ts

@@ -54,6 +54,7 @@ export interface DataGridOptionPropsModel {
  */
 interface DataGridBasicStorePropsModel {
     gridContainer: React.RefObject<HTMLDivElement>;
+    heightCache: number[];
     __cellRange: Array<CellRangeDef>;
     __cellRangeTemp: CellRangeTempDef;
 }
@@ -91,6 +92,12 @@ export interface DataGridPrivateApiModel {
      * @namespace NoraDataGrid.DataGridPrivateApiModel.setBasicProps
      */
     setBasicStore: (props: DataGridBasicProps) => DataGridStoreDef["state"];
+    /**
+     * 특정 행(row)의  스크롤 위치를 가져옵니다.
+     * @private
+     * @namespace NoraDataGrid.DataGridPrivateApiModel.getScrollTop
+     */
+    getScrollTop: (rowIndex: number) => number;
     /**
      * 특정 행(row)의 위치로 스크롤을 이동합니다.
      * @private
@@ -116,18 +123,34 @@ export interface DataGridPrivateApiModel {
      * 셀 모드를 변경합니다.
      */
     setEditStatus: (editStatus: DataGridStoreDef["state"]["editStatus"]) => Promise<DataGridStoreDef["state"]["editStatus"]>;
+    /**
+     * 데이터에 있는 모든 행 높이를 초기화 합니다.
+     * @private
+     * @namespace NoraDataGrid.DataGridPublicApiModel.getData
+     */
+    initHeightCache: () => void;
     cellByRowIndex: (rowIndex: number, fieldId: keyof DataGridPrivateDataSourceModel, value: string | number | undefined) => Promise<DataGridStoreDef["state"]["dataSource"]>;
 }
 export interface DataGridPublicApiModel {
-    setTextPublic: (data: any) => void;
     /**
      * 선택할 셀의 범위를 추가합니다.
      * @param cellRange
      * @returns
      */
     addCellRange: (cellRange: CellRangeDef) => void;
-    forceUpdate: () => void;
+    /**
+     * 현재 데이터를 가져옵니다.
+     * @public
+     * @namespace NoraDataGrid.DataGridPublicApiModel.getData
+     */
     getData: <R extends DataGridBasicPropsModel["dataSource"] = DataGridBasicPropsModel["dataSource"]>() => R;
+    /**
+     * 특정 행(row)의 위치로 스크롤을 이동합니다.
+     * @public
+     * @namespace NoraDataGrid.DataGridPublicApiModel.scrollToRowIndex
+     */
+    scrollToRowIndex: (rowIndex: number) => void;
+    forceUpdate: () => void;
 }
 export type CommonApi = React.MutableRefObject<DataGridPrivateApi | null>;
 export type GirdApi = DataGridPublicApi;

package/package.json

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