@noraent/nora-datagrid 0.0.21 → 0.0.23

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.
Files changed (13) hide show
  1. package/lib/cjs/App.js +28 -5
  2. package/lib/cjs/DataGrid.js +2 -16
  3. package/lib/cjs/buildPackage.json +1 -1
  4. package/lib/cjs/common/styled/index.d.ts +5 -0
  5. package/lib/cjs/common/styled/index.js +20 -2
  6. package/lib/cjs/components/ime/IMEComponent.js +4 -1
  7. package/lib/esm/App.js +28 -5
  8. package/lib/esm/DataGrid.js +2 -16
  9. package/lib/esm/buildPackage.json +1 -1
  10. package/lib/esm/common/styled/index.d.ts +5 -0
  11. package/lib/esm/common/styled/index.js +20 -2
  12. package/lib/esm/components/ime/IMEComponent.js +4 -1
  13. package/package.json +1 -1
package/lib/cjs/App.js CHANGED
@@ -1,12 +1,33 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
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
- return _jsx("div", { style: { background: "green" }, children: params.value });
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: Math.random() * 20 + 50 }, (_, i) => {
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
- // const [count, setCount] = React.useState(1);
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);
package/lib/cjs/buildPackage.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.21",
3
+ "version": "0.0.23",
4
4
  "module": "./lib/esm/index.js",
5
5
  "main": "./lib/cjs/index.js",
6
6
  "private": false,
package/lib/cjs/common/styled/index.d.ts CHANGED
@@ -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 {};
package/lib/cjs/common/styled/index.js CHANGED
@@ -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: initialWindowHeight,
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.2,
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/cjs/components/ime/IMEComponent.js CHANGED
@@ -106,6 +106,9 @@ const IMEComponent = React.forwardRef((props, ref) => {
106
106
  React.useEffect(() => {
107
107
  setImeValue("");
108
108
  }, [cellFocus]);
109
- return (_jsx("textarea", { autoFocus: true, className: "ime-input", ref: ref, style: { position: "absolute", resize: "none", overflow: "hidden", background: "red", top: `-${32000}px`, left: `-${32000}px` }, value: imeValue, onChange: handleValueChange, onKeyDown: handleKeyDown }));
109
+ return (_jsx("textarea", {
110
+ // 그리드에 포커스 중일때만 활성화하기
111
+ // autoFocus
112
+ className: "ime-input", ref: ref, style: { position: "absolute", resize: "none", overflow: "hidden", background: "red", top: `-${32000}px`, left: `-${32000}px` }, value: imeValue, onChange: handleValueChange, onKeyDown: handleKeyDown }));
110
113
  });
111
114
  export default React.memo(IMEComponent);
package/lib/esm/App.js CHANGED
@@ -1,12 +1,33 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
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
- return _jsx("div", { style: { background: "green" }, children: params.value });
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: Math.random() * 20 + 50 }, (_, i) => {
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
- // const [count, setCount] = React.useState(1);
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);
package/lib/esm/buildPackage.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.21",
3
+ "version": "0.0.23",
4
4
  "module": "./lib/esm/index.js",
5
5
  "main": "./lib/cjs/index.js",
6
6
  "private": false,
package/lib/esm/common/styled/index.d.ts CHANGED
@@ -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 {};
package/lib/esm/common/styled/index.js CHANGED
@@ -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: initialWindowHeight,
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.2,
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/components/ime/IMEComponent.js CHANGED
@@ -106,6 +106,9 @@ const IMEComponent = React.forwardRef((props, ref) => {
106
106
  React.useEffect(() => {
107
107
  setImeValue("");
108
108
  }, [cellFocus]);
109
- return (_jsx("textarea", { autoFocus: true, className: "ime-input", ref: ref, style: { position: "absolute", resize: "none", overflow: "hidden", background: "red", top: `-${32000}px`, left: `-${32000}px` }, value: imeValue, onChange: handleValueChange, onKeyDown: handleKeyDown }));
109
+ return (_jsx("textarea", {
110
+ // 그리드에 포커스 중일때만 활성화하기
111
+ // autoFocus
112
+ className: "ime-input", ref: ref, style: { position: "absolute", resize: "none", overflow: "hidden", background: "red", top: `-${32000}px`, left: `-${32000}px` }, value: imeValue, onChange: handleValueChange, onKeyDown: handleKeyDown }));
110
113
  });
111
114
  export default React.memo(IMEComponent);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.21",
3
+ "version": "0.0.23",
4
4
  "module": "./lib/esm/index.js",
5
5
  "main": "./lib/cjs/index.js",
6
6
  "private": false,