@noraent/nora-datagrid 0.0.21 → 0.0.22
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 +28 -5
- package/lib/cjs/DataGrid.js +2 -16
- package/lib/cjs/buildPackage.json +1 -1
- package/lib/cjs/common/styled/index.d.ts +5 -0
- package/lib/cjs/common/styled/index.js +20 -2
- package/lib/esm/App.js +28 -5
- package/lib/esm/DataGrid.js +2 -16
- package/lib/esm/buildPackage.json +1 -1
- package/lib/esm/common/styled/index.d.ts +5 -0
- package/lib/esm/common/styled/index.js +20 -2
- package/package.json +1 -1
package/lib/cjs/App.js
CHANGED
|
@@ -1,12 +1,33 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useState } from "react";
|
|
1
|
+
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from "react";
|
|
3
3
|
import { DataGrid } from "./DataGrid";
|
|
4
4
|
import { useGridApiRef } from "./hooks/useGridApiRef";
|
|
5
5
|
const RenderCell = (params) => {
|
|
6
|
-
|
|
6
|
+
const [value, setValue] = useState(0);
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
let tt = 0;
|
|
9
|
+
for (let i = 0; i < 1000; i++) {
|
|
10
|
+
tt += 233300 * i;
|
|
11
|
+
}
|
|
12
|
+
const data = Array.from({ length: 10000 }, (_, i) => {
|
|
13
|
+
return {
|
|
14
|
+
id: i,
|
|
15
|
+
code: `${tt} -test-${i}`,
|
|
16
|
+
name: `name-${i} ${Math.random() * 20}`,
|
|
17
|
+
note: `note-${i}`,
|
|
18
|
+
date: new Date(),
|
|
19
|
+
// height: 30,
|
|
20
|
+
// height: 20,
|
|
21
|
+
// height: Math.floor(Math.random() * 20) + 20,
|
|
22
|
+
};
|
|
23
|
+
});
|
|
24
|
+
console.log("!!!!", data);
|
|
25
|
+
setValue(tt);
|
|
26
|
+
}, []);
|
|
27
|
+
return (_jsxs("div", { style: { background: "green" }, children: [value, params.value] }));
|
|
7
28
|
};
|
|
8
29
|
const RenderEditCell = (params) => {
|
|
9
|
-
return _jsx("input", Object.assign({}, params, { style: { background: "yellow" } }));
|
|
30
|
+
return (_jsx(_Fragment, { children: _jsx("input", Object.assign({}, params, { style: { background: "yellow" } })) }));
|
|
10
31
|
};
|
|
11
32
|
const columns = [
|
|
12
33
|
{
|
|
@@ -24,6 +45,8 @@ const columns = [
|
|
|
24
45
|
fieldId: "currency",
|
|
25
46
|
fieldName: "성명",
|
|
26
47
|
width: "120",
|
|
48
|
+
renderCell: RenderCell,
|
|
49
|
+
renderEditCell: RenderEditCell,
|
|
27
50
|
},
|
|
28
51
|
{
|
|
29
52
|
fieldId: "currency4",
|
|
@@ -126,7 +149,7 @@ function App() {
|
|
|
126
149
|
const ref = useGridApiRef();
|
|
127
150
|
const [dataSource, setDataSource] = useState([]);
|
|
128
151
|
const handleDataSource = () => {
|
|
129
|
-
const data = Array.from({ length:
|
|
152
|
+
const data = Array.from({ length: 1000 }, (_, i) => {
|
|
130
153
|
return {
|
|
131
154
|
id: i,
|
|
132
155
|
code: `test-${i}`,
|
package/lib/cjs/DataGrid.js
CHANGED
|
@@ -8,6 +8,7 @@ import { TwoDimensionalVirtualizedList } from "./components/TwoDimensionalVirtua
|
|
|
8
8
|
import { GridStoreContentProvider } from "./provider/GridStoreContent";
|
|
9
9
|
import useUpdateEffect from "./common/constants/utils";
|
|
10
10
|
import { packageJsonExpr } from "./packageInfo";
|
|
11
|
+
import { Spinner, StyledNoneContent, Typography } from "./common/styled";
|
|
11
12
|
console.log(`%c
|
|
12
13
|
███╗ ██╗ ██████╗ ██████╗ █████╗
|
|
13
14
|
████╗ ██║██╔═══██╗██╔══██╗██╔══██╗
|
|
@@ -32,9 +33,6 @@ const DataGridMaster = React.forwardRef((props, _ref) => {
|
|
|
32
33
|
startTransition(() => {
|
|
33
34
|
apiRef.current.setGridContainer(containerRef);
|
|
34
35
|
apiRef.current.setInitialStore(props);
|
|
35
|
-
// setTimeout(() => {
|
|
36
|
-
// setIsClient(true);
|
|
37
|
-
// }, 2200);
|
|
38
36
|
});
|
|
39
37
|
}, []);
|
|
40
38
|
// 변경 된 부분만 반영
|
|
@@ -55,18 +53,6 @@ const DataGridMaster = React.forwardRef((props, _ref) => {
|
|
|
55
53
|
prevProps.current = props;
|
|
56
54
|
});
|
|
57
55
|
}, [props]);
|
|
58
|
-
|
|
59
|
-
// React.useEffect(() => {
|
|
60
|
-
// const id = setInterval(() => {
|
|
61
|
-
// // 타이머 숫자가 하나씩 줄어들도록
|
|
62
|
-
// setCount((count) => count - 1);
|
|
63
|
-
// }, 1000);
|
|
64
|
-
// // 0이 되면 카운트가 멈춤
|
|
65
|
-
// if (count === 0) {
|
|
66
|
-
// clearInterval(id);
|
|
67
|
-
// }
|
|
68
|
-
// return () => clearInterval(id);
|
|
69
|
-
// }, [count]);
|
|
70
|
-
return (_jsx(_Fragment, { children: _jsx(GridApiContext.Provider, { value: apiRef, children: _jsx(GridStoreContentProvider, { value: apiRef, children: _jsxs(NoraDataGrid, { ref: containerRef, children: [_jsx(NoraDataGrid.Title, {}), _jsx(NoraDataGrid.Body, { children: !isPending && apiRef.current.store && _jsx(TwoDimensionalVirtualizedList, {}) })] }) }) }) }));
|
|
56
|
+
return (_jsx(_Fragment, { children: _jsx(GridApiContext.Provider, { value: apiRef, children: _jsx(GridStoreContentProvider, { value: apiRef, children: _jsxs(NoraDataGrid, { ref: containerRef, children: [_jsx(NoraDataGrid.Title, {}), _jsxs(NoraDataGrid.Body, { children: [isPending && (_jsxs(StyledNoneContent, { children: [_jsx(Spinner, {}), _jsx(Typography, { style: { marginTop: "8px", fontSize: "14px" }, children: "\uB85C\uB529\uC911" })] })), !isPending && apiRef.current.store && _jsx(TwoDimensionalVirtualizedList, {})] })] }) }) }) }));
|
|
71
57
|
});
|
|
72
58
|
export const DataGrid = React.memo(DataGridMaster);
|
|
@@ -41,4 +41,9 @@ declare const variantMapping: {
|
|
|
41
41
|
fontWeight: number;
|
|
42
42
|
};
|
|
43
43
|
};
|
|
44
|
+
export declare const Spinner: import("@emotion/styled").StyledComponent<{
|
|
45
|
+
theme?: import("@emotion/react").Theme;
|
|
46
|
+
as?: React.ElementType;
|
|
47
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
48
|
+
export declare const spin: string;
|
|
44
49
|
export {};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import styled from "@emotion/styled";
|
|
2
2
|
import { foundation } from "../foundation";
|
|
3
3
|
import { initialWindowHeight } from "../../components/TwoDimensionalVirtualizedList";
|
|
4
|
+
import { keyframes } from "@emotion/css";
|
|
4
5
|
/**
|
|
5
6
|
* 💡 알림
|
|
6
7
|
* 본 섹션은 가이드의 가독성을 높이기 위해 추가되었습니다.
|
|
@@ -33,13 +34,14 @@ export const StyledSubTitle = styled("h3")(() => ({
|
|
|
33
34
|
}));
|
|
34
35
|
export const StyledNoneContent = styled("div")(() => ({
|
|
35
36
|
width: "100%",
|
|
36
|
-
height:
|
|
37
|
+
height: "100%",
|
|
38
|
+
minHeight: initialWindowHeight,
|
|
37
39
|
display: "flex",
|
|
38
40
|
justifyContent: "center",
|
|
39
41
|
alignItems: "center",
|
|
40
42
|
gap: "4px",
|
|
41
43
|
flexDirection: "column",
|
|
42
|
-
opacity: 0.
|
|
44
|
+
opacity: 0.8,
|
|
43
45
|
}));
|
|
44
46
|
export const Typography = styled("p")((props) => {
|
|
45
47
|
var _a;
|
|
@@ -55,3 +57,19 @@ const variantMapping = {
|
|
|
55
57
|
fontWeight: 400,
|
|
56
58
|
},
|
|
57
59
|
};
|
|
60
|
+
// spinner
|
|
61
|
+
export const Spinner = styled("div")(() => ({
|
|
62
|
+
border: "5px solid #27c382",
|
|
63
|
+
borderRadius: "50%",
|
|
64
|
+
borderRightColor: "transparent",
|
|
65
|
+
display: "inline-block",
|
|
66
|
+
width: "50px",
|
|
67
|
+
height: "50px",
|
|
68
|
+
animation: `1s linear infinite ${spin}`,
|
|
69
|
+
animationDelay: `${Date.now() % 1000}`,
|
|
70
|
+
}));
|
|
71
|
+
export const spin = keyframes `
|
|
72
|
+
to {
|
|
73
|
+
transform: rotate(360deg);
|
|
74
|
+
}
|
|
75
|
+
`;
|
package/lib/esm/App.js
CHANGED
|
@@ -1,12 +1,33 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { useState } from "react";
|
|
1
|
+
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect, useState } from "react";
|
|
3
3
|
import { DataGrid } from "./DataGrid";
|
|
4
4
|
import { useGridApiRef } from "./hooks/useGridApiRef";
|
|
5
5
|
const RenderCell = (params) => {
|
|
6
|
-
|
|
6
|
+
const [value, setValue] = useState(0);
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
let tt = 0;
|
|
9
|
+
for (let i = 0; i < 1000; i++) {
|
|
10
|
+
tt += 233300 * i;
|
|
11
|
+
}
|
|
12
|
+
const data = Array.from({ length: 10000 }, (_, i) => {
|
|
13
|
+
return {
|
|
14
|
+
id: i,
|
|
15
|
+
code: `${tt} -test-${i}`,
|
|
16
|
+
name: `name-${i} ${Math.random() * 20}`,
|
|
17
|
+
note: `note-${i}`,
|
|
18
|
+
date: new Date(),
|
|
19
|
+
// height: 30,
|
|
20
|
+
// height: 20,
|
|
21
|
+
// height: Math.floor(Math.random() * 20) + 20,
|
|
22
|
+
};
|
|
23
|
+
});
|
|
24
|
+
console.log("!!!!", data);
|
|
25
|
+
setValue(tt);
|
|
26
|
+
}, []);
|
|
27
|
+
return (_jsxs("div", { style: { background: "green" }, children: [value, params.value] }));
|
|
7
28
|
};
|
|
8
29
|
const RenderEditCell = (params) => {
|
|
9
|
-
return _jsx("input", Object.assign({}, params, { style: { background: "yellow" } }));
|
|
30
|
+
return (_jsx(_Fragment, { children: _jsx("input", Object.assign({}, params, { style: { background: "yellow" } })) }));
|
|
10
31
|
};
|
|
11
32
|
const columns = [
|
|
12
33
|
{
|
|
@@ -24,6 +45,8 @@ const columns = [
|
|
|
24
45
|
fieldId: "currency",
|
|
25
46
|
fieldName: "성명",
|
|
26
47
|
width: "120",
|
|
48
|
+
renderCell: RenderCell,
|
|
49
|
+
renderEditCell: RenderEditCell,
|
|
27
50
|
},
|
|
28
51
|
{
|
|
29
52
|
fieldId: "currency4",
|
|
@@ -126,7 +149,7 @@ function App() {
|
|
|
126
149
|
const ref = useGridApiRef();
|
|
127
150
|
const [dataSource, setDataSource] = useState([]);
|
|
128
151
|
const handleDataSource = () => {
|
|
129
|
-
const data = Array.from({ length:
|
|
152
|
+
const data = Array.from({ length: 1000 }, (_, i) => {
|
|
130
153
|
return {
|
|
131
154
|
id: i,
|
|
132
155
|
code: `test-${i}`,
|
package/lib/esm/DataGrid.js
CHANGED
|
@@ -8,6 +8,7 @@ import { TwoDimensionalVirtualizedList } from "./components/TwoDimensionalVirtua
|
|
|
8
8
|
import { GridStoreContentProvider } from "./provider/GridStoreContent";
|
|
9
9
|
import useUpdateEffect from "./common/constants/utils";
|
|
10
10
|
import { packageJsonExpr } from "./packageInfo";
|
|
11
|
+
import { Spinner, StyledNoneContent, Typography } from "./common/styled";
|
|
11
12
|
console.log(`%c
|
|
12
13
|
███╗ ██╗ ██████╗ ██████╗ █████╗
|
|
13
14
|
████╗ ██║██╔═══██╗██╔══██╗██╔══██╗
|
|
@@ -32,9 +33,6 @@ const DataGridMaster = React.forwardRef((props, _ref) => {
|
|
|
32
33
|
startTransition(() => {
|
|
33
34
|
apiRef.current.setGridContainer(containerRef);
|
|
34
35
|
apiRef.current.setInitialStore(props);
|
|
35
|
-
// setTimeout(() => {
|
|
36
|
-
// setIsClient(true);
|
|
37
|
-
// }, 2200);
|
|
38
36
|
});
|
|
39
37
|
}, []);
|
|
40
38
|
// 변경 된 부분만 반영
|
|
@@ -55,18 +53,6 @@ const DataGridMaster = React.forwardRef((props, _ref) => {
|
|
|
55
53
|
prevProps.current = props;
|
|
56
54
|
});
|
|
57
55
|
}, [props]);
|
|
58
|
-
|
|
59
|
-
// React.useEffect(() => {
|
|
60
|
-
// const id = setInterval(() => {
|
|
61
|
-
// // 타이머 숫자가 하나씩 줄어들도록
|
|
62
|
-
// setCount((count) => count - 1);
|
|
63
|
-
// }, 1000);
|
|
64
|
-
// // 0이 되면 카운트가 멈춤
|
|
65
|
-
// if (count === 0) {
|
|
66
|
-
// clearInterval(id);
|
|
67
|
-
// }
|
|
68
|
-
// return () => clearInterval(id);
|
|
69
|
-
// }, [count]);
|
|
70
|
-
return (_jsx(_Fragment, { children: _jsx(GridApiContext.Provider, { value: apiRef, children: _jsx(GridStoreContentProvider, { value: apiRef, children: _jsxs(NoraDataGrid, { ref: containerRef, children: [_jsx(NoraDataGrid.Title, {}), _jsx(NoraDataGrid.Body, { children: !isPending && apiRef.current.store && _jsx(TwoDimensionalVirtualizedList, {}) })] }) }) }) }));
|
|
56
|
+
return (_jsx(_Fragment, { children: _jsx(GridApiContext.Provider, { value: apiRef, children: _jsx(GridStoreContentProvider, { value: apiRef, children: _jsxs(NoraDataGrid, { ref: containerRef, children: [_jsx(NoraDataGrid.Title, {}), _jsxs(NoraDataGrid.Body, { children: [isPending && (_jsxs(StyledNoneContent, { children: [_jsx(Spinner, {}), _jsx(Typography, { style: { marginTop: "8px", fontSize: "14px" }, children: "\uB85C\uB529\uC911" })] })), !isPending && apiRef.current.store && _jsx(TwoDimensionalVirtualizedList, {})] })] }) }) }) }));
|
|
71
57
|
});
|
|
72
58
|
export const DataGrid = React.memo(DataGridMaster);
|
|
@@ -41,4 +41,9 @@ declare const variantMapping: {
|
|
|
41
41
|
fontWeight: number;
|
|
42
42
|
};
|
|
43
43
|
};
|
|
44
|
+
export declare const Spinner: import("@emotion/styled").StyledComponent<{
|
|
45
|
+
theme?: import("@emotion/react").Theme;
|
|
46
|
+
as?: React.ElementType;
|
|
47
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
48
|
+
export declare const spin: string;
|
|
44
49
|
export {};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import styled from "@emotion/styled";
|
|
2
2
|
import { foundation } from "../foundation";
|
|
3
3
|
import { initialWindowHeight } from "../../components/TwoDimensionalVirtualizedList";
|
|
4
|
+
import { keyframes } from "@emotion/css";
|
|
4
5
|
/**
|
|
5
6
|
* 💡 알림
|
|
6
7
|
* 본 섹션은 가이드의 가독성을 높이기 위해 추가되었습니다.
|
|
@@ -33,13 +34,14 @@ export const StyledSubTitle = styled("h3")(() => ({
|
|
|
33
34
|
}));
|
|
34
35
|
export const StyledNoneContent = styled("div")(() => ({
|
|
35
36
|
width: "100%",
|
|
36
|
-
height:
|
|
37
|
+
height: "100%",
|
|
38
|
+
minHeight: initialWindowHeight,
|
|
37
39
|
display: "flex",
|
|
38
40
|
justifyContent: "center",
|
|
39
41
|
alignItems: "center",
|
|
40
42
|
gap: "4px",
|
|
41
43
|
flexDirection: "column",
|
|
42
|
-
opacity: 0.
|
|
44
|
+
opacity: 0.8,
|
|
43
45
|
}));
|
|
44
46
|
export const Typography = styled("p")((props) => {
|
|
45
47
|
var _a;
|
|
@@ -55,3 +57,19 @@ const variantMapping = {
|
|
|
55
57
|
fontWeight: 400,
|
|
56
58
|
},
|
|
57
59
|
};
|
|
60
|
+
// spinner
|
|
61
|
+
export const Spinner = styled("div")(() => ({
|
|
62
|
+
border: "5px solid #27c382",
|
|
63
|
+
borderRadius: "50%",
|
|
64
|
+
borderRightColor: "transparent",
|
|
65
|
+
display: "inline-block",
|
|
66
|
+
width: "50px",
|
|
67
|
+
height: "50px",
|
|
68
|
+
animation: `1s linear infinite ${spin}`,
|
|
69
|
+
animationDelay: `${Date.now() % 1000}`,
|
|
70
|
+
}));
|
|
71
|
+
export const spin = keyframes `
|
|
72
|
+
to {
|
|
73
|
+
transform: rotate(360deg);
|
|
74
|
+
}
|
|
75
|
+
`;
|