@noraent/nora-datagrid 0.0.3 → 0.0.5

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 (19) hide show
  1. package/lib/cjs/App.js +126 -124
  2. package/lib/cjs/buildPackage.json +2 -2
  3. package/lib/cjs/components/TwoDimensionalVirtualizedList.js +50 -32
  4. package/lib/cjs/components/body/NoDataComponent.d.ts +2 -0
  5. package/lib/cjs/components/body/NoDataComponent.js +17 -0
  6. package/lib/cjs/components/body/_styled/index.d.ts +12 -0
  7. package/lib/cjs/components/body/_styled/index.js +26 -0
  8. package/lib/esm/App.js +126 -124
  9. package/lib/esm/app.scss +56 -0
  10. package/lib/esm/buildPackage.json +2 -2
  11. package/lib/esm/components/TwoDimensionalVirtualizedList.js +50 -32
  12. package/lib/esm/components/body/NoDataComponent.d.ts +2 -0
  13. package/lib/esm/components/body/NoDataComponent.js +17 -0
  14. package/lib/esm/components/body/_styled/index.d.ts +12 -0
  15. package/lib/esm/components/body/_styled/index.js +26 -0
  16. package/lib/esm/main.d.ts +1 -0
  17. package/lib/esm/main.js +8 -9
  18. package/package.json +2 -2
  19. /package/lib/{app.scss → cjs/app.scss} +0 -0
package/lib/cjs/App.js CHANGED
@@ -1,131 +1,133 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import React from "react";
3
3
  import { DataGrid } from "./DataGrid";
4
4
  function App() {
5
5
  const ref = React.useRef(null);
6
- return (_jsxs("div", { style: { width: "1200px", height: "500px" }, children: [_jsx("button", { children: "dd" }), _jsx("button", { children: "dd" }), _jsx(DataGrid, { gridRef: ref, columns: [
7
- {
8
- fieldId: "firstName",
9
- fieldName: "코드",
10
- },
11
- {
12
- fieldId: "lastName",
13
- fieldName: "이름",
14
- width: "120",
15
- },
16
- {
17
- fieldId: "currency",
18
- fieldName: "성명",
19
- width: "120",
20
- },
21
- {
22
- fieldId: "currency4",
23
- fieldName: "국가",
24
- width: "140",
25
- },
26
- {
27
- fieldId: "currency5",
28
- fieldName: "구매링크",
29
- width: "120",
30
- },
31
- {
32
- fieldId: "currency6",
33
- fieldName: "카드",
34
- width: "130",
35
- },
36
- {
37
- fieldId: "currency7",
38
- fieldName: "카드번호",
39
- width: "120",
40
- },
41
- {
42
- fieldId: "currency8",
43
- fieldName: "currency8",
44
- width: "140",
45
- },
46
- {
47
- fieldId: "currency9",
48
- fieldName: "currency9",
49
- width: "120",
50
- },
51
- {
52
- fieldId: "currency10",
53
- fieldName: "currency10",
54
- width: "130",
55
- },
56
- {
57
- fieldId: "currency11",
58
- fieldName: "currency11",
59
- width: "120",
60
- },
61
- {
62
- fieldId: "currency12",
63
- fieldName: "currency12",
64
- width: "120",
65
- },
66
- {
67
- fieldId: "currency13",
68
- fieldName: "Currency13",
69
- width: "120",
70
- },
71
- {
72
- fieldId: "currency14",
73
- fieldName: "currency14",
74
- width: "120",
75
- },
76
- {
77
- fieldId: "currency15",
78
- fieldName: "currency15",
79
- width: "120",
80
- },
81
- {
82
- fieldId: "currency16",
83
- fieldName: "Currency16",
84
- width: "120",
85
- },
86
- {
87
- fieldId: "currency17",
88
- fieldName: "currency17",
89
- width: "120",
90
- },
91
- {
92
- fieldId: "currency18",
93
- fieldName: "currency18",
94
- width: "120",
95
- },
96
- {
97
- fieldId: "currency19",
98
- fieldName: "currency19",
99
- width: "120",
100
- },
101
- {
102
- fieldId: "currency19",
103
- fieldName: "Currency19",
104
- width: "120",
105
- },
106
- {
107
- fieldId: "currency20",
108
- fieldName: "currency20",
109
- width: "120",
110
- },
111
- {
112
- fieldId: "currency21",
113
- fieldName: "currency21",
114
- width: "120",
115
- },
116
- ], dataSource: Array.from({ length: 100 }, (_, i) => {
117
- return {
118
- id: i,
119
- firstName: `test-${i}`,
120
- lastName: `lastName-${i}`,
121
- currency: `currency-${i}`,
122
- currency14: `currency14-${i}`,
123
- currency15: `currency15-${i}`,
124
- __uuid: "",
125
- // height: 30,
126
- // height: Math.floor(Math.random() * 20) + 20,
127
- };
128
- }) }), _jsx("button", { children: "dd" })] }));
6
+ return (_jsxs(_Fragment, { children: [_jsx("button", { children: "dd" }), _jsx("button", { children: "dd" }), _jsx("div", { style: { width: "1200px", height: "100%", maxHeight: "600px" }, children: _jsx(DataGrid, { gridRef: ref, columns: [
7
+ {
8
+ fieldId: "firstName",
9
+ fieldName: "코드",
10
+ },
11
+ {
12
+ fieldId: "lastName",
13
+ fieldName: "이름",
14
+ width: "120",
15
+ },
16
+ {
17
+ fieldId: "currency",
18
+ fieldName: "성명",
19
+ width: "120",
20
+ },
21
+ {
22
+ fieldId: "currency4",
23
+ fieldName: "국가",
24
+ width: "140",
25
+ },
26
+ {
27
+ fieldId: "currency5",
28
+ fieldName: "구매링크",
29
+ width: "120",
30
+ },
31
+ {
32
+ fieldId: "currency6",
33
+ fieldName: "카드",
34
+ width: "130",
35
+ },
36
+ {
37
+ fieldId: "currency7",
38
+ fieldName: "카드번호",
39
+ width: "120",
40
+ },
41
+ {
42
+ fieldId: "currency8",
43
+ fieldName: "currency8",
44
+ width: "140",
45
+ },
46
+ {
47
+ fieldId: "currency9",
48
+ fieldName: "currency9",
49
+ width: "120",
50
+ },
51
+ {
52
+ fieldId: "currency10",
53
+ fieldName: "currency10",
54
+ width: "130",
55
+ },
56
+ {
57
+ fieldId: "currency11",
58
+ fieldName: "currency11",
59
+ width: "120",
60
+ },
61
+ {
62
+ fieldId: "currency12",
63
+ fieldName: "currency12",
64
+ width: "120",
65
+ },
66
+ {
67
+ fieldId: "currency13",
68
+ fieldName: "Currency13",
69
+ width: "120",
70
+ },
71
+ {
72
+ fieldId: "currency14",
73
+ fieldName: "currency14",
74
+ width: "120",
75
+ },
76
+ {
77
+ fieldId: "currency15",
78
+ fieldName: "currency15",
79
+ width: "120",
80
+ },
81
+ {
82
+ fieldId: "currency16",
83
+ fieldName: "Currency16",
84
+ width: "120",
85
+ },
86
+ {
87
+ fieldId: "currency17",
88
+ fieldName: "currency17",
89
+ width: "120",
90
+ },
91
+ {
92
+ fieldId: "currency18",
93
+ fieldName: "currency18",
94
+ width: "120",
95
+ },
96
+ {
97
+ fieldId: "currency19",
98
+ fieldName: "currency19",
99
+ width: "120",
100
+ },
101
+ {
102
+ fieldId: "currency19",
103
+ fieldName: "Currency19",
104
+ width: "120",
105
+ },
106
+ {
107
+ fieldId: "currency20",
108
+ fieldName: "currency20",
109
+ width: "120",
110
+ },
111
+ {
112
+ fieldId: "currency21",
113
+ fieldName: "currency21",
114
+ width: "120",
115
+ },
116
+ ],
117
+ // dataSource={Array.from({ length: 100 }, (_, i) => {
118
+ // return {
119
+ // id: i,
120
+ // firstName: `test-${i}`,
121
+ // lastName: `lastName-${i}`,
122
+ // currency: `currency-${i}`,
123
+ // currency14: `currency14-${i}`,
124
+ // currency15: `currency15-${i}`,
125
+ // __uuid: "",
126
+ // // height: 30,
127
+ // // height: Math.floor(Math.random() * 20) + 20,
128
+ // };
129
+ // })}
130
+ dataSource: [] }) }), _jsx("button", { children: "dd" })] }));
129
131
  }
130
132
  export const initialItemsData = () => Array.from({ length: 10 }, (_, i) => {
131
133
  return {
package/lib/cjs/buildPackage.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "module": "./lib/esm/index.js",
5
5
  "main": "./lib/cjs/index.js",
6
6
  "private": false,
@@ -21,7 +21,7 @@
21
21
  "tsc-build": "tsc -p tsconfig-esm.json && tsc -p tsconfig-cjs.json && npm run copy-scss",
22
22
  "publish:npm": "rm -rf dist && mkdir dist && babel src -d dist --copy-files && npm run copy-package ",
23
23
  "copy-package": "cp package.json dist/buildPackage.json && cp package.json lib/cjs/buildPackage.json&& cp package.json lib/esm/buildPackage.json",
24
- "copy-scss": "cpx \"src/**/*.scss\" lib"
24
+ "copy-scss": "cpx \"src/**/*.scss\" lib/cjs && cpx \"src/**/*.scss\" lib/esm"
25
25
  },
26
26
  "dependencies": {
27
27
  "@emotion/css": "^11.13.4",
package/lib/cjs/components/TwoDimensionalVirtualizedList.js CHANGED
@@ -10,6 +10,7 @@ import { useSelector, useStore } from "../provider/GridStoreContent";
10
10
  import { EditStatus } from "../types/dataGridCoreEnum";
11
11
  import CellMode from "./cell/CellMode";
12
12
  import ImeComponent from "./ime/IMEComponent";
13
+ import NoDataComponent from "./body/NoDataComponent";
13
14
  const initialWindowWidth = 800;
14
15
  export const initialWindowHeight = 500;
15
16
  const initialBodyHeight = initialWindowHeight - 34;
@@ -31,15 +32,30 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
31
32
  const rightScrollRef = useRef(null);
32
33
  const bottomScrollRef = useRef(null);
33
34
  useEffect(() => {
34
- const handleResize = () => {
35
- var _a, _b, _c, _d, _f, _g;
36
- const store = gridRef.current.store;
37
- const width = (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.gridContainer.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 0;
38
- const height = (_g = (_f = (_d = store === null || store === void 0 ? void 0 : store.gridContainer.current) === null || _d === void 0 ? void 0 : _d.parentElement) === null || _f === void 0 ? void 0 : _f.clientHeight) !== null && _g !== void 0 ? _g : 0;
39
- setWindowSize({ width, height });
40
- };
41
- handleResize();
42
- window.addEventListener("resize", handleResize);
35
+ var _a;
36
+ const store = gridRef.current.store;
37
+ const parentElement = (_a = store === null || store === void 0 ? void 0 : store.gridContainer.current) === null || _a === void 0 ? void 0 : _a.parentElement;
38
+ // ResizeObserver 인스턴스 생성: 부모 요소의 크기 변화를 감지함
39
+ const observer = new ResizeObserver((entries) => {
40
+ // 감지된 모든 요소에 대해 반복
41
+ for (let entry of entries) {
42
+ // 감지된 요소의 현재 너비를 가져옴
43
+ const parentWidth = entry.contentRect.width;
44
+ const parentHeight = entry.contentRect.height;
45
+ // 새로운 자식 요소의 크기 계산
46
+ const newWidth = parentWidth;
47
+ const newHeight = parentHeight;
48
+ // // 자식 요소의 현재 크기와 새 크기가 다른 경우, 크기를 업데이트
49
+ setWindowSize({
50
+ width: newWidth,
51
+ height: newHeight,
52
+ });
53
+ }
54
+ });
55
+ // 부모 요소에 대한 참조가 있을 경우, 감지 시작
56
+ if (parentElement) {
57
+ observer.observe(parentElement);
58
+ }
43
59
  window.addEventListener("focusout", (event) => {
44
60
  var _a;
45
61
  if (((_a = event.target.nextElementSibling) === null || _a === void 0 ? void 0 : _a.className) === "nora-data-grid-container") {
@@ -47,7 +63,9 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
47
63
  }
48
64
  });
49
65
  return () => {
50
- window.removeEventListener("resize", handleResize);
66
+ if (parentElement) {
67
+ observer.unobserve(parentElement);
68
+ }
51
69
  };
52
70
  }, []);
53
71
  const { columns } = useSelector((store) => ({
@@ -194,30 +212,30 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
194
212
  console.log("start, end!", start, end);
195
213
  gridRef.current.store.state.renderedRowStartEnd = [start, end];
196
214
  }, [start, end]);
197
- return (_jsxs("div", { style: { position: "relative" }, children: [_jsx("div", { style: {
215
+ return (_jsxs("div", { style: { position: "relative" }, children: [_jsxs("div", { style: {
198
216
  height: `${windowSize.height}px`,
199
217
  width: `${windowSize.width}px`,
200
- }, children: _jsxs(TableBody, { ref: domRef, style: {
201
- height: "100%",
202
- position: "relative",
203
- display: "flex",
204
- flexDirection: "column",
205
- overflow: "scroll",
206
- scrollbarWidth: "none",
207
- }, className: classes.TableClasses.body.scroll.root, onScroll: handleScroll, children: [_jsx(VirtualHorizontalHeader, { offsetLeft: offsetLeft, startColumnIndex: startColumnIndex, cumulativeWidths: cumulativeWidths, windowSize: windowSize, columnEndIndex: columnEndIndex }), _jsx("div", { style: {
208
- flexBasis: `${totalHeight}px`,
209
- flexShrink: 0,
210
- }, children: _jsx("div", { style: {
211
- willChange: "transform, opacity",
212
- transform: `translate3d(${offsetLeft}px, ${offsetTop}px, 0px)`,
213
- position: "absolute",
214
- }, children: children(React.useMemo(() => ({
215
- visibleItems,
216
- startColumnIndex,
217
- cumulativeWidths,
218
- windowSize,
219
- columnEndIndex,
220
- }), [visibleItems, startColumnIndex, cumulativeWidths, windowSize, columnEndIndex])) }) })] }) }), _jsx(RightScrollBar, { ref: rightScrollRef, style: { height: initialBodyHeight - 20, right: "0px" }, onScroll: handleScrollController, children: _jsx("div", { style: { width: "14px", height: `${totalHeight}px` } }) }), _jsx(BottomScrollBar, { ref: bottomScrollRef, style: { width: windowSize.width }, onScroll: handleScrollBottomController, children: _jsx("div", { style: { height: "14px", width: `${totalWidth}px` } }) })] }));
218
+ }, children: [_jsx(NoDataComponent, {}), _jsxs(TableBody, { ref: domRef, style: {
219
+ height: "100%",
220
+ position: "relative",
221
+ display: "flex",
222
+ flexDirection: "column",
223
+ overflow: "scroll",
224
+ scrollbarWidth: "none",
225
+ }, className: classes.TableClasses.body.scroll.root, onScroll: handleScroll, children: [_jsx(VirtualHorizontalHeader, { offsetLeft: offsetLeft, startColumnIndex: startColumnIndex, cumulativeWidths: cumulativeWidths, windowSize: windowSize, columnEndIndex: columnEndIndex }), _jsx("div", { style: {
226
+ flexBasis: `${totalHeight}px`,
227
+ flexShrink: 0,
228
+ }, children: _jsx("div", { style: {
229
+ willChange: "transform, opacity",
230
+ transform: `translate3d(${offsetLeft}px, ${offsetTop}px, 0px)`,
231
+ position: "absolute",
232
+ }, children: children(React.useMemo(() => ({
233
+ visibleItems,
234
+ startColumnIndex,
235
+ cumulativeWidths,
236
+ windowSize,
237
+ columnEndIndex,
238
+ }), [visibleItems, startColumnIndex, cumulativeWidths, windowSize, columnEndIndex])) }) })] })] }), _jsx(RightScrollBar, { ref: rightScrollRef, style: { height: windowSize.height - 40, right: "0px" }, onScroll: handleScrollController, children: _jsx("div", { style: { width: "14px", height: `${totalHeight}px` } }) }), _jsx(BottomScrollBar, { ref: bottomScrollRef, style: { width: windowSize.width }, onScroll: handleScrollBottomController, children: _jsx("div", { style: { height: "14px", width: `${totalWidth}px` } }) })] }));
221
239
  });
222
240
  const VirtualListItem = React.memo(({ item, startColumnIndex, cumulativeWidths, windowSize, columnEndIndex, isColIndex, editStatus }) => {
223
241
  const { columns, dataSource } = useSelector((store) => ({
package/lib/cjs/components/body/NoDataComponent.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
2
+ export default _default;
package/lib/cjs/components/body/NoDataComponent.js ADDED
@@ -0,0 +1,17 @@
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import { memo } from "react";
3
+ import { useSelector } from "../../provider/GridStoreContent";
4
+ import { ErrorIconBox, NoDataContent, NoDataTitle } from "./_styled";
5
+ const NoDataComponent = () => {
6
+ const { dataSource } = useSelector((store) => ({
7
+ dataSource: store.state.dataSource,
8
+ }));
9
+ if (!dataSource || (dataSource && dataSource.length === 0)) {
10
+ return (_jsxs(NoDataContent, { children: [_jsx(ErrorIconBox, { children: _jsx(ErrorSvg, {}) }), _jsx(NoDataTitle, { children: "\uB370\uC774\uD130 \uC5C6\uC74C." })] }));
11
+ }
12
+ return _jsx(_Fragment, {});
13
+ };
14
+ function ErrorSvg() {
15
+ return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { id: "bxs:error", children: _jsx("path", { id: "Vector", d: "M12.884 2.532C12.538 1.878 11.462 1.878 11.116 2.532L2.11596 19.532C2.03494 19.6844 1.99478 19.8551 1.99938 20.0276C2.00398 20.2001 2.05319 20.3685 2.14221 20.5164C2.23124 20.6642 2.35704 20.7864 2.50736 20.8712C2.65768 20.956 2.82739 21.0003 2.99996 21H21C21.1724 21.0004 21.342 20.956 21.4922 20.8713C21.6424 20.7866 21.7681 20.6644 21.8571 20.5167C21.946 20.3689 21.9951 20.2006 21.9997 20.0282C22.0042 19.8559 21.964 19.6852 21.883 19.533L12.884 2.532ZM13 18H11V16H13V18ZM11 14V9H13L13.001 14H11Z", fill: "white" }) }) }));
16
+ }
17
+ export default memo(NoDataComponent);
package/lib/cjs/components/body/_styled/index.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ export declare const NoDataContent: import("@emotion/styled").StyledComponent<{
2
+ theme?: import("@emotion/react").Theme;
3
+ as?: React.ElementType;
4
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
5
+ export declare const NoDataTitle: import("@emotion/styled").StyledComponent<{
6
+ theme?: import("@emotion/react").Theme;
7
+ as?: React.ElementType;
8
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
9
+ export declare const ErrorIconBox: import("@emotion/styled").StyledComponent<{
10
+ theme?: import("@emotion/react").Theme;
11
+ as?: React.ElementType;
12
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
package/lib/cjs/components/body/_styled/index.js ADDED
@@ -0,0 +1,26 @@
1
+ import styled from "@emotion/styled";
2
+ export const NoDataContent = styled("div")(() => ({
3
+ display: "flex",
4
+ position: "absolute",
5
+ top: "50%",
6
+ left: "50%",
7
+ transform: "translate(-50%, -50%)",
8
+ flexDirection: "column",
9
+ justifyContent: "center",
10
+ alignItems: "center",
11
+ gap: "8px",
12
+ }));
13
+ export const NoDataTitle = styled("h2")(() => ({
14
+ fontSize: "14px",
15
+ fontWeight: "500",
16
+ color: "#5e5e5e", // 색상정의 필요 디자인 토큰 없는 관계로 하드 코딩
17
+ }));
18
+ export const ErrorIconBox = styled("div")(() => ({
19
+ display: "flex",
20
+ width: "48px",
21
+ height: "48px",
22
+ background: "rgb(221, 221, 221)",
23
+ borderRadius: "50px",
24
+ justifyContent: "center",
25
+ alignItems: "center",
26
+ }));
package/lib/esm/App.js CHANGED
@@ -1,131 +1,133 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import React from "react";
3
3
  import { DataGrid } from "./DataGrid";
4
4
  function App() {
5
5
  const ref = React.useRef(null);
6
- return (_jsxs("div", { style: { width: "1200px", height: "500px" }, children: [_jsx("button", { children: "dd" }), _jsx("button", { children: "dd" }), _jsx(DataGrid, { gridRef: ref, columns: [
7
- {
8
- fieldId: "firstName",
9
- fieldName: "코드",
10
- },
11
- {
12
- fieldId: "lastName",
13
- fieldName: "이름",
14
- width: "120",
15
- },
16
- {
17
- fieldId: "currency",
18
- fieldName: "성명",
19
- width: "120",
20
- },
21
- {
22
- fieldId: "currency4",
23
- fieldName: "국가",
24
- width: "140",
25
- },
26
- {
27
- fieldId: "currency5",
28
- fieldName: "구매링크",
29
- width: "120",
30
- },
31
- {
32
- fieldId: "currency6",
33
- fieldName: "카드",
34
- width: "130",
35
- },
36
- {
37
- fieldId: "currency7",
38
- fieldName: "카드번호",
39
- width: "120",
40
- },
41
- {
42
- fieldId: "currency8",
43
- fieldName: "currency8",
44
- width: "140",
45
- },
46
- {
47
- fieldId: "currency9",
48
- fieldName: "currency9",
49
- width: "120",
50
- },
51
- {
52
- fieldId: "currency10",
53
- fieldName: "currency10",
54
- width: "130",
55
- },
56
- {
57
- fieldId: "currency11",
58
- fieldName: "currency11",
59
- width: "120",
60
- },
61
- {
62
- fieldId: "currency12",
63
- fieldName: "currency12",
64
- width: "120",
65
- },
66
- {
67
- fieldId: "currency13",
68
- fieldName: "Currency13",
69
- width: "120",
70
- },
71
- {
72
- fieldId: "currency14",
73
- fieldName: "currency14",
74
- width: "120",
75
- },
76
- {
77
- fieldId: "currency15",
78
- fieldName: "currency15",
79
- width: "120",
80
- },
81
- {
82
- fieldId: "currency16",
83
- fieldName: "Currency16",
84
- width: "120",
85
- },
86
- {
87
- fieldId: "currency17",
88
- fieldName: "currency17",
89
- width: "120",
90
- },
91
- {
92
- fieldId: "currency18",
93
- fieldName: "currency18",
94
- width: "120",
95
- },
96
- {
97
- fieldId: "currency19",
98
- fieldName: "currency19",
99
- width: "120",
100
- },
101
- {
102
- fieldId: "currency19",
103
- fieldName: "Currency19",
104
- width: "120",
105
- },
106
- {
107
- fieldId: "currency20",
108
- fieldName: "currency20",
109
- width: "120",
110
- },
111
- {
112
- fieldId: "currency21",
113
- fieldName: "currency21",
114
- width: "120",
115
- },
116
- ], dataSource: Array.from({ length: 100 }, (_, i) => {
117
- return {
118
- id: i,
119
- firstName: `test-${i}`,
120
- lastName: `lastName-${i}`,
121
- currency: `currency-${i}`,
122
- currency14: `currency14-${i}`,
123
- currency15: `currency15-${i}`,
124
- __uuid: "",
125
- // height: 30,
126
- // height: Math.floor(Math.random() * 20) + 20,
127
- };
128
- }) }), _jsx("button", { children: "dd" })] }));
6
+ return (_jsxs(_Fragment, { children: [_jsx("button", { children: "dd" }), _jsx("button", { children: "dd" }), _jsx("div", { style: { width: "1200px", height: "100%", maxHeight: "600px" }, children: _jsx(DataGrid, { gridRef: ref, columns: [
7
+ {
8
+ fieldId: "firstName",
9
+ fieldName: "코드",
10
+ },
11
+ {
12
+ fieldId: "lastName",
13
+ fieldName: "이름",
14
+ width: "120",
15
+ },
16
+ {
17
+ fieldId: "currency",
18
+ fieldName: "성명",
19
+ width: "120",
20
+ },
21
+ {
22
+ fieldId: "currency4",
23
+ fieldName: "국가",
24
+ width: "140",
25
+ },
26
+ {
27
+ fieldId: "currency5",
28
+ fieldName: "구매링크",
29
+ width: "120",
30
+ },
31
+ {
32
+ fieldId: "currency6",
33
+ fieldName: "카드",
34
+ width: "130",
35
+ },
36
+ {
37
+ fieldId: "currency7",
38
+ fieldName: "카드번호",
39
+ width: "120",
40
+ },
41
+ {
42
+ fieldId: "currency8",
43
+ fieldName: "currency8",
44
+ width: "140",
45
+ },
46
+ {
47
+ fieldId: "currency9",
48
+ fieldName: "currency9",
49
+ width: "120",
50
+ },
51
+ {
52
+ fieldId: "currency10",
53
+ fieldName: "currency10",
54
+ width: "130",
55
+ },
56
+ {
57
+ fieldId: "currency11",
58
+ fieldName: "currency11",
59
+ width: "120",
60
+ },
61
+ {
62
+ fieldId: "currency12",
63
+ fieldName: "currency12",
64
+ width: "120",
65
+ },
66
+ {
67
+ fieldId: "currency13",
68
+ fieldName: "Currency13",
69
+ width: "120",
70
+ },
71
+ {
72
+ fieldId: "currency14",
73
+ fieldName: "currency14",
74
+ width: "120",
75
+ },
76
+ {
77
+ fieldId: "currency15",
78
+ fieldName: "currency15",
79
+ width: "120",
80
+ },
81
+ {
82
+ fieldId: "currency16",
83
+ fieldName: "Currency16",
84
+ width: "120",
85
+ },
86
+ {
87
+ fieldId: "currency17",
88
+ fieldName: "currency17",
89
+ width: "120",
90
+ },
91
+ {
92
+ fieldId: "currency18",
93
+ fieldName: "currency18",
94
+ width: "120",
95
+ },
96
+ {
97
+ fieldId: "currency19",
98
+ fieldName: "currency19",
99
+ width: "120",
100
+ },
101
+ {
102
+ fieldId: "currency19",
103
+ fieldName: "Currency19",
104
+ width: "120",
105
+ },
106
+ {
107
+ fieldId: "currency20",
108
+ fieldName: "currency20",
109
+ width: "120",
110
+ },
111
+ {
112
+ fieldId: "currency21",
113
+ fieldName: "currency21",
114
+ width: "120",
115
+ },
116
+ ],
117
+ // dataSource={Array.from({ length: 100 }, (_, i) => {
118
+ // return {
119
+ // id: i,
120
+ // firstName: `test-${i}`,
121
+ // lastName: `lastName-${i}`,
122
+ // currency: `currency-${i}`,
123
+ // currency14: `currency14-${i}`,
124
+ // currency15: `currency15-${i}`,
125
+ // __uuid: "",
126
+ // // height: 30,
127
+ // // height: Math.floor(Math.random() * 20) + 20,
128
+ // };
129
+ // })}
130
+ dataSource: [] }) }), _jsx("button", { children: "dd" })] }));
129
131
  }
130
132
  export const initialItemsData = () => Array.from({ length: 10 }, (_, i) => {
131
133
  return {
package/lib/esm/app.scss ADDED
@@ -0,0 +1,56 @@
1
+ $--nora-data-grid-primary-main: red;
2
+
3
+ .nora-data-grid-container {
4
+ * {
5
+ margin: 0;
6
+ padding: 0;
7
+ box-sizing: border-box;
8
+ }
9
+ }
10
+
11
+ /* 전체 페이지에 커스텀 스크롤바 적용 */
12
+ body {
13
+ scrollbar-width: none;
14
+ -ms-overflow-style: none;
15
+
16
+ -webkit-user-select: none;
17
+ -moz-user-select: none;
18
+ -ms-use-select: none;
19
+ user-select: none;
20
+ }
21
+ ::-webkit-scrollbar-track {
22
+ background: transparent;
23
+ }
24
+ ::-webkit-scrollbar-thumb {
25
+ background-color: rgba(0, 0, 0, 0.1);
26
+ border-radius: 3px; /* 둥글게 처리 */
27
+ transition: background-color 0.3s ease;
28
+ }
29
+ ::-webkit-scrollbar-thumb:hover {
30
+ background-color: rgba(0, 0, 0, 0.4);
31
+ }
32
+ ::-webkit-scrollbar-thumb:active {
33
+ background-color: rgba(0, 0, 0, 0.5);
34
+ }
35
+ ::-webkit-scrollbar {
36
+ width: 10px;
37
+ height: 10px;
38
+ }
39
+ body:hover ::-webkit-scrollbar {
40
+ width: 10px;
41
+ height: 10px;
42
+ }
43
+
44
+ .range-1 {
45
+ background-color: #efe8ffdc;
46
+ }
47
+ .range-2 {
48
+ background-color: #efe8ffdc;
49
+
50
+ // background-color: rgba(40, 255, 130, 0.521);
51
+ }
52
+ .range-3 {
53
+ background-color: #efe8ffdc;
54
+
55
+ // background-color: rgba(40, 255, 130, 0.808);
56
+ }
package/lib/esm/buildPackage.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "module": "./lib/esm/index.js",
5
5
  "main": "./lib/cjs/index.js",
6
6
  "private": false,
@@ -21,7 +21,7 @@
21
21
  "tsc-build": "tsc -p tsconfig-esm.json && tsc -p tsconfig-cjs.json && npm run copy-scss",
22
22
  "publish:npm": "rm -rf dist && mkdir dist && babel src -d dist --copy-files && npm run copy-package ",
23
23
  "copy-package": "cp package.json dist/buildPackage.json && cp package.json lib/cjs/buildPackage.json&& cp package.json lib/esm/buildPackage.json",
24
- "copy-scss": "cpx \"src/**/*.scss\" lib"
24
+ "copy-scss": "cpx \"src/**/*.scss\" lib/cjs && cpx \"src/**/*.scss\" lib/esm"
25
25
  },
26
26
  "dependencies": {
27
27
  "@emotion/css": "^11.13.4",
package/lib/esm/components/TwoDimensionalVirtualizedList.js CHANGED
@@ -10,6 +10,7 @@ import { useSelector, useStore } from "../provider/GridStoreContent";
10
10
  import { EditStatus } from "../types/dataGridCoreEnum";
11
11
  import CellMode from "./cell/CellMode";
12
12
  import ImeComponent from "./ime/IMEComponent";
13
+ import NoDataComponent from "./body/NoDataComponent";
13
14
  const initialWindowWidth = 800;
14
15
  export const initialWindowHeight = 500;
15
16
  const initialBodyHeight = initialWindowHeight - 34;
@@ -31,15 +32,30 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
31
32
  const rightScrollRef = useRef(null);
32
33
  const bottomScrollRef = useRef(null);
33
34
  useEffect(() => {
34
- const handleResize = () => {
35
- var _a, _b, _c, _d, _f, _g;
36
- const store = gridRef.current.store;
37
- const width = (_c = (_b = (_a = store === null || store === void 0 ? void 0 : store.gridContainer.current) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.clientWidth) !== null && _c !== void 0 ? _c : 0;
38
- const height = (_g = (_f = (_d = store === null || store === void 0 ? void 0 : store.gridContainer.current) === null || _d === void 0 ? void 0 : _d.parentElement) === null || _f === void 0 ? void 0 : _f.clientHeight) !== null && _g !== void 0 ? _g : 0;
39
- setWindowSize({ width, height });
40
- };
41
- handleResize();
42
- window.addEventListener("resize", handleResize);
35
+ var _a;
36
+ const store = gridRef.current.store;
37
+ const parentElement = (_a = store === null || store === void 0 ? void 0 : store.gridContainer.current) === null || _a === void 0 ? void 0 : _a.parentElement;
38
+ // ResizeObserver 인스턴스 생성: 부모 요소의 크기 변화를 감지함
39
+ const observer = new ResizeObserver((entries) => {
40
+ // 감지된 모든 요소에 대해 반복
41
+ for (let entry of entries) {
42
+ // 감지된 요소의 현재 너비를 가져옴
43
+ const parentWidth = entry.contentRect.width;
44
+ const parentHeight = entry.contentRect.height;
45
+ // 새로운 자식 요소의 크기 계산
46
+ const newWidth = parentWidth;
47
+ const newHeight = parentHeight;
48
+ // // 자식 요소의 현재 크기와 새 크기가 다른 경우, 크기를 업데이트
49
+ setWindowSize({
50
+ width: newWidth,
51
+ height: newHeight,
52
+ });
53
+ }
54
+ });
55
+ // 부모 요소에 대한 참조가 있을 경우, 감지 시작
56
+ if (parentElement) {
57
+ observer.observe(parentElement);
58
+ }
43
59
  window.addEventListener("focusout", (event) => {
44
60
  var _a;
45
61
  if (((_a = event.target.nextElementSibling) === null || _a === void 0 ? void 0 : _a.className) === "nora-data-grid-container") {
@@ -47,7 +63,9 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
47
63
  }
48
64
  });
49
65
  return () => {
50
- window.removeEventListener("resize", handleResize);
66
+ if (parentElement) {
67
+ observer.unobserve(parentElement);
68
+ }
51
69
  };
52
70
  }, []);
53
71
  const { columns } = useSelector((store) => ({
@@ -194,30 +212,30 @@ const DynamicVirtualScroll = React.memo(({ children }) => {
194
212
  console.log("start, end!", start, end);
195
213
  gridRef.current.store.state.renderedRowStartEnd = [start, end];
196
214
  }, [start, end]);
197
- return (_jsxs("div", { style: { position: "relative" }, children: [_jsx("div", { style: {
215
+ return (_jsxs("div", { style: { position: "relative" }, children: [_jsxs("div", { style: {
198
216
  height: `${windowSize.height}px`,
199
217
  width: `${windowSize.width}px`,
200
- }, children: _jsxs(TableBody, { ref: domRef, style: {
201
- height: "100%",
202
- position: "relative",
203
- display: "flex",
204
- flexDirection: "column",
205
- overflow: "scroll",
206
- scrollbarWidth: "none",
207
- }, className: classes.TableClasses.body.scroll.root, onScroll: handleScroll, children: [_jsx(VirtualHorizontalHeader, { offsetLeft: offsetLeft, startColumnIndex: startColumnIndex, cumulativeWidths: cumulativeWidths, windowSize: windowSize, columnEndIndex: columnEndIndex }), _jsx("div", { style: {
208
- flexBasis: `${totalHeight}px`,
209
- flexShrink: 0,
210
- }, children: _jsx("div", { style: {
211
- willChange: "transform, opacity",
212
- transform: `translate3d(${offsetLeft}px, ${offsetTop}px, 0px)`,
213
- position: "absolute",
214
- }, children: children(React.useMemo(() => ({
215
- visibleItems,
216
- startColumnIndex,
217
- cumulativeWidths,
218
- windowSize,
219
- columnEndIndex,
220
- }), [visibleItems, startColumnIndex, cumulativeWidths, windowSize, columnEndIndex])) }) })] }) }), _jsx(RightScrollBar, { ref: rightScrollRef, style: { height: initialBodyHeight - 20, right: "0px" }, onScroll: handleScrollController, children: _jsx("div", { style: { width: "14px", height: `${totalHeight}px` } }) }), _jsx(BottomScrollBar, { ref: bottomScrollRef, style: { width: windowSize.width }, onScroll: handleScrollBottomController, children: _jsx("div", { style: { height: "14px", width: `${totalWidth}px` } }) })] }));
218
+ }, children: [_jsx(NoDataComponent, {}), _jsxs(TableBody, { ref: domRef, style: {
219
+ height: "100%",
220
+ position: "relative",
221
+ display: "flex",
222
+ flexDirection: "column",
223
+ overflow: "scroll",
224
+ scrollbarWidth: "none",
225
+ }, className: classes.TableClasses.body.scroll.root, onScroll: handleScroll, children: [_jsx(VirtualHorizontalHeader, { offsetLeft: offsetLeft, startColumnIndex: startColumnIndex, cumulativeWidths: cumulativeWidths, windowSize: windowSize, columnEndIndex: columnEndIndex }), _jsx("div", { style: {
226
+ flexBasis: `${totalHeight}px`,
227
+ flexShrink: 0,
228
+ }, children: _jsx("div", { style: {
229
+ willChange: "transform, opacity",
230
+ transform: `translate3d(${offsetLeft}px, ${offsetTop}px, 0px)`,
231
+ position: "absolute",
232
+ }, children: children(React.useMemo(() => ({
233
+ visibleItems,
234
+ startColumnIndex,
235
+ cumulativeWidths,
236
+ windowSize,
237
+ columnEndIndex,
238
+ }), [visibleItems, startColumnIndex, cumulativeWidths, windowSize, columnEndIndex])) }) })] })] }), _jsx(RightScrollBar, { ref: rightScrollRef, style: { height: windowSize.height - 40, right: "0px" }, onScroll: handleScrollController, children: _jsx("div", { style: { width: "14px", height: `${totalHeight}px` } }) }), _jsx(BottomScrollBar, { ref: bottomScrollRef, style: { width: windowSize.width }, onScroll: handleScrollBottomController, children: _jsx("div", { style: { height: "14px", width: `${totalWidth}px` } }) })] }));
221
239
  });
222
240
  const VirtualListItem = React.memo(({ item, startColumnIndex, cumulativeWidths, windowSize, columnEndIndex, isColIndex, editStatus }) => {
223
241
  const { columns, dataSource } = useSelector((store) => ({
package/lib/esm/components/body/NoDataComponent.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const _default: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
2
+ export default _default;
package/lib/esm/components/body/NoDataComponent.js ADDED
@@ -0,0 +1,17 @@
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import { memo } from "react";
3
+ import { useSelector } from "../../provider/GridStoreContent";
4
+ import { ErrorIconBox, NoDataContent, NoDataTitle } from "./_styled";
5
+ const NoDataComponent = () => {
6
+ const { dataSource } = useSelector((store) => ({
7
+ dataSource: store.state.dataSource,
8
+ }));
9
+ if (!dataSource || (dataSource && dataSource.length === 0)) {
10
+ return (_jsxs(NoDataContent, { children: [_jsx(ErrorIconBox, { children: _jsx(ErrorSvg, {}) }), _jsx(NoDataTitle, { children: "\uB370\uC774\uD130 \uC5C6\uC74C." })] }));
11
+ }
12
+ return _jsx(_Fragment, {});
13
+ };
14
+ function ErrorSvg() {
15
+ return (_jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("g", { id: "bxs:error", children: _jsx("path", { id: "Vector", d: "M12.884 2.532C12.538 1.878 11.462 1.878 11.116 2.532L2.11596 19.532C2.03494 19.6844 1.99478 19.8551 1.99938 20.0276C2.00398 20.2001 2.05319 20.3685 2.14221 20.5164C2.23124 20.6642 2.35704 20.7864 2.50736 20.8712C2.65768 20.956 2.82739 21.0003 2.99996 21H21C21.1724 21.0004 21.342 20.956 21.4922 20.8713C21.6424 20.7866 21.7681 20.6644 21.8571 20.5167C21.946 20.3689 21.9951 20.2006 21.9997 20.0282C22.0042 19.8559 21.964 19.6852 21.883 19.533L12.884 2.532ZM13 18H11V16H13V18ZM11 14V9H13L13.001 14H11Z", fill: "white" }) }) }));
16
+ }
17
+ export default memo(NoDataComponent);
package/lib/esm/components/body/_styled/index.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ export declare const NoDataContent: import("@emotion/styled").StyledComponent<{
2
+ theme?: import("@emotion/react").Theme;
3
+ as?: React.ElementType;
4
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
5
+ export declare const NoDataTitle: import("@emotion/styled").StyledComponent<{
6
+ theme?: import("@emotion/react").Theme;
7
+ as?: React.ElementType;
8
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
9
+ export declare const ErrorIconBox: import("@emotion/styled").StyledComponent<{
10
+ theme?: import("@emotion/react").Theme;
11
+ as?: React.ElementType;
12
+ }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
package/lib/esm/components/body/_styled/index.js ADDED
@@ -0,0 +1,26 @@
1
+ import styled from "@emotion/styled";
2
+ export const NoDataContent = styled("div")(() => ({
3
+ display: "flex",
4
+ position: "absolute",
5
+ top: "50%",
6
+ left: "50%",
7
+ transform: "translate(-50%, -50%)",
8
+ flexDirection: "column",
9
+ justifyContent: "center",
10
+ alignItems: "center",
11
+ gap: "8px",
12
+ }));
13
+ export const NoDataTitle = styled("h2")(() => ({
14
+ fontSize: "14px",
15
+ fontWeight: "500",
16
+ color: "#5e5e5e", // 색상정의 필요 디자인 토큰 없는 관계로 하드 코딩
17
+ }));
18
+ export const ErrorIconBox = styled("div")(() => ({
19
+ display: "flex",
20
+ width: "48px",
21
+ height: "48px",
22
+ background: "rgb(221, 221, 221)",
23
+ borderRadius: "50px",
24
+ justifyContent: "center",
25
+ alignItems: "center",
26
+ }));
package/lib/esm/main.d.ts CHANGED
@@ -0,0 +1 @@
1
+ export {};
package/lib/esm/main.js CHANGED
@@ -1,9 +1,8 @@
1
- "use strict";
2
- // import { StrictMode } from "react";
3
- // import { createRoot } from "react-dom/client";
4
- // import App from "./App.tsx";
5
- // createRoot(document.getElementById("root")!).render(
6
- // // <StrictMode>
7
- // <App />
8
- // // </StrictMode>
9
- // );
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { createRoot } from "react-dom/client";
3
+ import App from "./App.tsx";
4
+ createRoot(document.getElementById("root")).render(
5
+ // <StrictMode>
6
+ _jsx(App, {})
7
+ // </StrictMode>
8
+ );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@noraent/nora-datagrid",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
4
  "module": "./lib/esm/index.js",
5
5
  "main": "./lib/cjs/index.js",
6
6
  "private": false,
@@ -21,7 +21,7 @@
21
21
  "tsc-build": "tsc -p tsconfig-esm.json && tsc -p tsconfig-cjs.json && npm run copy-scss",
22
22
  "publish:npm": "rm -rf dist && mkdir dist && babel src -d dist --copy-files && npm run copy-package ",
23
23
  "copy-package": "cp package.json dist/buildPackage.json && cp package.json lib/cjs/buildPackage.json&& cp package.json lib/esm/buildPackage.json",
24
- "copy-scss": "cpx \"src/**/*.scss\" lib"
24
+ "copy-scss": "cpx \"src/**/*.scss\" lib/cjs && cpx \"src/**/*.scss\" lib/esm"
25
25
  },
26
26
  "dependencies": {
27
27
  "@emotion/css": "^11.13.4",
/package/lib/{app.scss → cjs/app.scss} RENAMED
File without changes