@noraent/nora-datagrid 0.0.26 → 0.0.28
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/lib/cjs/App.js +35 -19
- package/lib/cjs/buildPackage.json +1 -1
- package/lib/cjs/components/TwoDimensionalVirtualizedList.js +4 -2
- package/lib/esm/App.js +35 -19
- package/lib/esm/buildPackage.json +1 -1
- package/lib/esm/components/TwoDimensionalVirtualizedList.js +4 -2
- package/package.json +1 -1
package/lib/cjs/App.js
CHANGED
|
@@ -1,30 +1,45 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
1
10
|
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useState } from "react";
|
|
11
|
+
import { useDeferredValue, useEffect, useState } from "react";
|
|
3
12
|
import { DataGrid } from "./DataGrid";
|
|
4
13
|
import { useGridApiRef } from "./hooks/useGridApiRef";
|
|
5
14
|
const RenderCell = (params) => {
|
|
6
15
|
const [value, setValue] = useState(0);
|
|
16
|
+
const test = useDeferredValue(value);
|
|
7
17
|
useEffect(() => {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
const tt = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
19
|
+
let tt = 0;
|
|
20
|
+
for (let i = 0; i < 1000; i++) {
|
|
21
|
+
tt += 233300 * i;
|
|
22
|
+
}
|
|
23
|
+
const data = Array.from({ length: 10000 }, (_, i) => {
|
|
24
|
+
return {
|
|
25
|
+
id: i,
|
|
26
|
+
code: `${tt} -test-${i}`,
|
|
27
|
+
name: `name-${i} ${Math.random() * 20}`,
|
|
28
|
+
note: `note-${i}`,
|
|
29
|
+
date: new Date(),
|
|
30
|
+
currency4: `test-${i}`,
|
|
31
|
+
// height: 30,
|
|
32
|
+
// height: 20,
|
|
33
|
+
// height: Math.floor(Math.random() * 20) + 20,
|
|
34
|
+
};
|
|
35
|
+
});
|
|
36
|
+
setValue(tt);
|
|
37
|
+
});
|
|
38
|
+
requestIdleCallback(() => {
|
|
39
|
+
tt();
|
|
23
40
|
});
|
|
24
|
-
console.log("!!!!", data);
|
|
25
|
-
setValue(tt);
|
|
26
41
|
}, []);
|
|
27
|
-
return (_jsxs("div", { style: { background: "green" }, children: [
|
|
42
|
+
return (_jsxs("div", { style: { background: "green" }, children: [test, params.value] }));
|
|
28
43
|
};
|
|
29
44
|
const RenderEditCell = (params) => {
|
|
30
45
|
return (_jsx(_Fragment, { children: _jsx("input", Object.assign({}, params, { style: { background: "yellow" } })) }));
|
|
@@ -156,6 +171,7 @@ function App() {
|
|
|
156
171
|
name: `name-${i} ${Math.random() * 20}`,
|
|
157
172
|
note: `note-${i}`,
|
|
158
173
|
date: new Date(),
|
|
174
|
+
currency4: `test=${i}`,
|
|
159
175
|
// height: 30,
|
|
160
176
|
// height: 20,
|
|
161
177
|
// height: Math.floor(Math.random() * 20) + 20,
|
|
@@ -251,10 +251,12 @@ const VirtualListItem = React.memo(({ item, startColumnIndex, cumulativeWidths,
|
|
|
251
251
|
const cellStyle = useMemo(() => ({ height: `${item.height}px` }), [item.height]);
|
|
252
252
|
return (_jsx(TableRow, { "aria-rowindex": item.__ariaRowindex, style: cellStyle, className: classes.TableClasses.body.row.root, children: visibleColumns.map((column) => (_jsx(VirtualItem, { column: column, row: row, rowIndex: item.__dataRowindex, isFocus: isColIndex === column.__ariaColindex, editStatus: isColIndex === column.__ariaColindex ? editStatus : undefined }, column.__uuid))) }, item.id));
|
|
253
253
|
});
|
|
254
|
+
const cellClassName = cx(classes.TableClasses.body.row.cell.root, classes.TableClasses.body.row.cell.classes);
|
|
254
255
|
const VirtualItem = React.memo(({ column, row, isFocus, editStatus, rowIndex, }) => {
|
|
255
256
|
const cellStyle = useMemo(() => ({ width: `${column.width}px` }), [column.width]);
|
|
256
|
-
const
|
|
257
|
-
|
|
257
|
+
const deferredValue = React.useDeferredValue(row ? row[column.fieldId] : "");
|
|
258
|
+
const showChild = React.useMemo(() => true, []);
|
|
259
|
+
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));
|
|
258
260
|
});
|
|
259
261
|
export const TwoDimensionalVirtualizedList = React.memo(() => {
|
|
260
262
|
// 마우스 다운 시작지점점
|
package/lib/esm/App.js
CHANGED
|
@@ -1,30 +1,45 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
1
10
|
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useState } from "react";
|
|
11
|
+
import { useDeferredValue, useEffect, useState } from "react";
|
|
3
12
|
import { DataGrid } from "./DataGrid";
|
|
4
13
|
import { useGridApiRef } from "./hooks/useGridApiRef";
|
|
5
14
|
const RenderCell = (params) => {
|
|
6
15
|
const [value, setValue] = useState(0);
|
|
16
|
+
const test = useDeferredValue(value);
|
|
7
17
|
useEffect(() => {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
const tt = () => __awaiter(void 0, void 0, void 0, function* () {
|
|
19
|
+
let tt = 0;
|
|
20
|
+
for (let i = 0; i < 1000; i++) {
|
|
21
|
+
tt += 233300 * i;
|
|
22
|
+
}
|
|
23
|
+
const data = Array.from({ length: 10000 }, (_, i) => {
|
|
24
|
+
return {
|
|
25
|
+
id: i,
|
|
26
|
+
code: `${tt} -test-${i}`,
|
|
27
|
+
name: `name-${i} ${Math.random() * 20}`,
|
|
28
|
+
note: `note-${i}`,
|
|
29
|
+
date: new Date(),
|
|
30
|
+
currency4: `test-${i}`,
|
|
31
|
+
// height: 30,
|
|
32
|
+
// height: 20,
|
|
33
|
+
// height: Math.floor(Math.random() * 20) + 20,
|
|
34
|
+
};
|
|
35
|
+
});
|
|
36
|
+
setValue(tt);
|
|
37
|
+
});
|
|
38
|
+
requestIdleCallback(() => {
|
|
39
|
+
tt();
|
|
23
40
|
});
|
|
24
|
-
console.log("!!!!", data);
|
|
25
|
-
setValue(tt);
|
|
26
41
|
}, []);
|
|
27
|
-
return (_jsxs("div", { style: { background: "green" }, children: [
|
|
42
|
+
return (_jsxs("div", { style: { background: "green" }, children: [test, params.value] }));
|
|
28
43
|
};
|
|
29
44
|
const RenderEditCell = (params) => {
|
|
30
45
|
return (_jsx(_Fragment, { children: _jsx("input", Object.assign({}, params, { style: { background: "yellow" } })) }));
|
|
@@ -156,6 +171,7 @@ function App() {
|
|
|
156
171
|
name: `name-${i} ${Math.random() * 20}`,
|
|
157
172
|
note: `note-${i}`,
|
|
158
173
|
date: new Date(),
|
|
174
|
+
currency4: `test=${i}`,
|
|
159
175
|
// height: 30,
|
|
160
176
|
// height: 20,
|
|
161
177
|
// height: Math.floor(Math.random() * 20) + 20,
|
|
@@ -251,10 +251,12 @@ const VirtualListItem = React.memo(({ item, startColumnIndex, cumulativeWidths,
|
|
|
251
251
|
const cellStyle = useMemo(() => ({ height: `${item.height}px` }), [item.height]);
|
|
252
252
|
return (_jsx(TableRow, { "aria-rowindex": item.__ariaRowindex, style: cellStyle, className: classes.TableClasses.body.row.root, children: visibleColumns.map((column) => (_jsx(VirtualItem, { column: column, row: row, rowIndex: item.__dataRowindex, isFocus: isColIndex === column.__ariaColindex, editStatus: isColIndex === column.__ariaColindex ? editStatus : undefined }, column.__uuid))) }, item.id));
|
|
253
253
|
});
|
|
254
|
+
const cellClassName = cx(classes.TableClasses.body.row.cell.root, classes.TableClasses.body.row.cell.classes);
|
|
254
255
|
const VirtualItem = React.memo(({ column, row, isFocus, editStatus, rowIndex, }) => {
|
|
255
256
|
const cellStyle = useMemo(() => ({ width: `${column.width}px` }), [column.width]);
|
|
256
|
-
const
|
|
257
|
-
|
|
257
|
+
const deferredValue = React.useDeferredValue(row ? row[column.fieldId] : "");
|
|
258
|
+
const showChild = React.useMemo(() => true, []);
|
|
259
|
+
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));
|
|
258
260
|
});
|
|
259
261
|
export const TwoDimensionalVirtualizedList = React.memo(() => {
|
|
260
262
|
// 마우스 다운 시작지점점
|