react-excel-lite 0.0.5 → 0.0.7
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/README.md +72 -6
- package/dist/components/excel-grid.d.ts.map +1 -1
- package/dist/components/grid-cell.d.ts.map +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/react-excel-lite.js +446 -379
- package/dist/react-excel-lite.umd.cjs +2 -3
- package/dist/types.d.ts +8 -7
- package/dist/types.d.ts.map +1 -1
- package/package.json +1 -5
package/README.md
CHANGED
|
@@ -16,6 +16,7 @@ A lightweight, Excel-like editable grid component for React.
|
|
|
16
16
|
- Grouped column headers with custom styling
|
|
17
17
|
- Row headers with custom styling
|
|
18
18
|
- Keyboard shortcuts (Delete/Backspace to clear)
|
|
19
|
+
- **Styling-agnostic**: Works with Tailwind CSS, CSS Modules, plain CSS, or any styling solution
|
|
19
20
|
- Zero external dependencies
|
|
20
21
|
|
|
21
22
|
## Installation
|
|
@@ -100,9 +101,18 @@ function App() {
|
|
|
100
101
|
}
|
|
101
102
|
```
|
|
102
103
|
|
|
103
|
-
##
|
|
104
|
+
## Styling
|
|
105
|
+
|
|
106
|
+
The component comes with sensible default styles built-in. You can customize styles using the `styles` prop with CSS class strings from any styling solution.
|
|
107
|
+
|
|
108
|
+
### Default Styles
|
|
104
109
|
|
|
105
|
-
|
|
110
|
+
Out of the box, the grid has:
|
|
111
|
+
- Light gray borders and headers
|
|
112
|
+
- Blue selection highlight
|
|
113
|
+
- Blue fill handle
|
|
114
|
+
|
|
115
|
+
### Custom Styling with Tailwind CSS
|
|
106
116
|
|
|
107
117
|
```tsx
|
|
108
118
|
import type { GridStyles } from "react-excel-lite";
|
|
@@ -120,6 +130,66 @@ const styles: GridStyles = {
|
|
|
120
130
|
<ExcelGrid data={data} onChange={setData} styles={styles} />;
|
|
121
131
|
```
|
|
122
132
|
|
|
133
|
+
### Custom Styling with CSS Modules
|
|
134
|
+
|
|
135
|
+
```tsx
|
|
136
|
+
import styles from "./grid.module.css";
|
|
137
|
+
import type { GridStyles } from "react-excel-lite";
|
|
138
|
+
|
|
139
|
+
const gridStyles: GridStyles = {
|
|
140
|
+
selected: styles.selectedCell,
|
|
141
|
+
fillTarget: styles.fillTargetCell,
|
|
142
|
+
fillHandle: styles.fillHandle,
|
|
143
|
+
};
|
|
144
|
+
|
|
145
|
+
<ExcelGrid data={data} onChange={setData} styles={gridStyles} />;
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
### Custom Styling with Plain CSS
|
|
149
|
+
|
|
150
|
+
```tsx
|
|
151
|
+
const styles: GridStyles = {
|
|
152
|
+
selected: "my-selected-cell",
|
|
153
|
+
fillTarget: "my-fill-target",
|
|
154
|
+
fillHandle: "my-fill-handle",
|
|
155
|
+
};
|
|
156
|
+
|
|
157
|
+
<ExcelGrid data={data} onChange={setData} styles={styles} />;
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
```css
|
|
161
|
+
/* styles.css */
|
|
162
|
+
.my-selected-cell {
|
|
163
|
+
background-color: #f3e8ff;
|
|
164
|
+
outline: 2px solid #a855f7;
|
|
165
|
+
outline-offset: -2px;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.my-fill-target {
|
|
169
|
+
background-color: #faf5ff;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.my-fill-handle {
|
|
173
|
+
background-color: #a855f7;
|
|
174
|
+
}
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
### GridStyles Interface
|
|
178
|
+
|
|
179
|
+
```ts
|
|
180
|
+
interface GridStyles {
|
|
181
|
+
cell?: string; // CSS class for data cells
|
|
182
|
+
selected?: string; // CSS class for selected cells (overrides default)
|
|
183
|
+
fillTarget?: string; // CSS class for fill target cells (overrides default)
|
|
184
|
+
fillHandle?: string; // CSS class for fill handle (overrides default)
|
|
185
|
+
colGroup?: string; // CSS class for column group headers
|
|
186
|
+
colHeader?: string; // CSS class for individual column headers
|
|
187
|
+
rowHeader?: string; // CSS class for row headers
|
|
188
|
+
}
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
### Styling Individual Headers
|
|
192
|
+
|
|
123
193
|
Style individual column headers and groups:
|
|
124
194
|
|
|
125
195
|
```tsx
|
|
@@ -242,7 +312,3 @@ interface ExcelGridProps {
|
|
|
242
312
|
styles?: GridStyles;
|
|
243
313
|
}
|
|
244
314
|
```
|
|
245
|
-
|
|
246
|
-
## Styling
|
|
247
|
-
|
|
248
|
-
The component uses Tailwind CSS classes. Make sure Tailwind CSS is configured in your project, or override styles using the `styles` prop.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"excel-grid.d.ts","sourceRoot":"","sources":["../../src/components/excel-grid.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"excel-grid.d.ts","sourceRoot":"","sources":["../../src/components/excel-grid.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAa,MAAM,UAAU,CAAC;AA2D1D,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,cAAmB,EACnB,MAAM,GACP,EAAE,cAAc,2CA+PhB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid-cell.d.ts","sourceRoot":"","sources":["../../src/components/grid-cell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"grid-cell.d.ts","sourceRoot":"","sources":["../../src/components/grid-cell.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AA8C9C,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,UAAU,EACV,YAAY,EACZ,cAAc,EACd,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,qBAAqB,EACrB,MAAM,GACP,EAAE,aAAa,2CA+Df"}
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGlD,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAG7D,OAAO,EAAE,EAAE,EAAE,MAAM,YAAY,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EACL,UAAU,EACV,UAAU,EACV,eAAe,EACf,aAAa,EACb,QAAQ,EACR,KAAK,EACL,cAAc,EACd,kBAAkB,GACnB,MAAM,oBAAoB,CAAC;AAG5B,YAAY,EACV,SAAS,EACT,cAAc,EACd,SAAS,EACT,cAAc,EACd,cAAc,EACd,UAAU,EACV,cAAc,EACd,aAAa,GACd,MAAM,SAAS,CAAC"}
|
package/dist/react-excel-lite.js
CHANGED
|
@@ -1,536 +1,603 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
return n.filter(Boolean).join(" ");
|
|
1
|
+
import { jsxs as K, jsx as v } from "react/jsx-runtime";
|
|
2
|
+
import { useState as L, useCallback as C, useEffect as W, useRef as O, useMemo as U } from "react";
|
|
3
|
+
function H(...o) {
|
|
4
|
+
return o.filter(Boolean).join(" ");
|
|
6
5
|
}
|
|
7
|
-
function
|
|
8
|
-
return `${
|
|
6
|
+
function Co(o) {
|
|
7
|
+
return `${o.row}-${o.col}`;
|
|
9
8
|
}
|
|
10
|
-
function
|
|
11
|
-
const [
|
|
12
|
-
return { row:
|
|
9
|
+
function xo(o) {
|
|
10
|
+
const [t, n] = o.split("-").map(Number);
|
|
11
|
+
return { row: t, col: n };
|
|
13
12
|
}
|
|
14
|
-
function
|
|
15
|
-
if (!
|
|
16
|
-
const
|
|
17
|
-
for (let
|
|
18
|
-
for (let
|
|
19
|
-
c.push({ row:
|
|
13
|
+
function So(o, t) {
|
|
14
|
+
if (!o || !t) return o ? [o] : [];
|
|
15
|
+
const n = Math.min(o.row, t.row), s = Math.max(o.row, t.row), u = Math.min(o.col, t.col), b = Math.max(o.col, t.col), c = [];
|
|
16
|
+
for (let h = n; h <= s; h++)
|
|
17
|
+
for (let f = u; f <= b; f++)
|
|
18
|
+
c.push({ row: h, col: f });
|
|
20
19
|
return c;
|
|
21
20
|
}
|
|
22
|
-
function
|
|
23
|
-
if (!
|
|
24
|
-
const
|
|
25
|
-
return
|
|
21
|
+
function X(o, t) {
|
|
22
|
+
if (!t.start) return !1;
|
|
23
|
+
const n = t.end || t.start, s = Math.min(t.start.row, n.row), u = Math.max(t.start.row, n.row), b = Math.min(t.start.col, n.col), c = Math.max(t.start.col, n.col);
|
|
24
|
+
return o.row >= s && o.row <= u && o.col >= b && o.col <= c;
|
|
26
25
|
}
|
|
27
|
-
function
|
|
28
|
-
return
|
|
26
|
+
function _(o) {
|
|
27
|
+
return o.split(/\r?\n/).filter((t) => t.trim()).map((t) => t.split(" ").map((n) => n.trim()));
|
|
29
28
|
}
|
|
30
|
-
function
|
|
31
|
-
return
|
|
29
|
+
function J(o) {
|
|
30
|
+
return o.map((t) => t.join(" ")).join(`
|
|
32
31
|
`);
|
|
33
32
|
}
|
|
34
|
-
function
|
|
35
|
-
return !
|
|
33
|
+
function j(o) {
|
|
34
|
+
return !o.start || !o.end ? o : {
|
|
36
35
|
start: {
|
|
37
|
-
row: Math.min(
|
|
38
|
-
col: Math.min(
|
|
36
|
+
row: Math.min(o.start.row, o.end.row),
|
|
37
|
+
col: Math.min(o.start.col, o.end.col)
|
|
39
38
|
},
|
|
40
39
|
end: {
|
|
41
|
-
row: Math.max(
|
|
42
|
-
col: Math.max(
|
|
40
|
+
row: Math.max(o.start.row, o.end.row),
|
|
41
|
+
col: Math.max(o.start.col, o.end.col)
|
|
43
42
|
}
|
|
44
43
|
};
|
|
45
44
|
}
|
|
46
|
-
function
|
|
47
|
-
if (
|
|
45
|
+
function yo(o, t) {
|
|
46
|
+
if (o.row === t.row && o.col === t.col)
|
|
48
47
|
return [];
|
|
49
|
-
const
|
|
50
|
-
for (let
|
|
51
|
-
for (let
|
|
52
|
-
|
|
48
|
+
const n = Math.min(o.row, t.row), s = Math.max(o.row, t.row), u = Math.min(o.col, t.col), b = Math.max(o.col, t.col), c = [];
|
|
49
|
+
for (let h = n; h <= s; h++)
|
|
50
|
+
for (let f = u; f <= b; f++)
|
|
51
|
+
h === o.row && f === o.col || c.push({ row: h, col: f });
|
|
53
52
|
return c;
|
|
54
53
|
}
|
|
55
|
-
function
|
|
56
|
-
const [
|
|
54
|
+
function Q() {
|
|
55
|
+
const [o, t] = L({
|
|
57
56
|
start: null,
|
|
58
57
|
end: null
|
|
59
|
-
}), [
|
|
60
|
-
|
|
61
|
-
}, []), b =
|
|
62
|
-
(
|
|
63
|
-
|
|
58
|
+
}), [n, s] = L(!1), u = C((a) => {
|
|
59
|
+
t({ start: a, end: a }), s(!0);
|
|
60
|
+
}, []), b = C(
|
|
61
|
+
(a) => {
|
|
62
|
+
n && t((l) => ({ ...l, end: a }));
|
|
64
63
|
},
|
|
65
|
-
[e]
|
|
66
|
-
), c = x(() => {
|
|
67
|
-
s(!1);
|
|
68
|
-
}, []), f = x(() => {
|
|
69
|
-
o({ start: null, end: null }), s(!1);
|
|
70
|
-
}, []), a = x(
|
|
71
|
-
(u) => J(u, n),
|
|
72
64
|
[n]
|
|
65
|
+
), c = C(() => {
|
|
66
|
+
s(!1);
|
|
67
|
+
}, []), h = C(() => {
|
|
68
|
+
t({ start: null, end: null }), s(!1);
|
|
69
|
+
}, []), f = C(
|
|
70
|
+
(a) => X(a, o),
|
|
71
|
+
[o]
|
|
73
72
|
);
|
|
74
|
-
return
|
|
75
|
-
const
|
|
76
|
-
|
|
73
|
+
return W(() => {
|
|
74
|
+
const a = () => {
|
|
75
|
+
n && s(!1);
|
|
77
76
|
};
|
|
78
|
-
return window.addEventListener("mouseup",
|
|
79
|
-
}, [
|
|
80
|
-
selection:
|
|
81
|
-
isSelecting:
|
|
82
|
-
isCellSelected:
|
|
83
|
-
handleCellMouseDown:
|
|
77
|
+
return window.addEventListener("mouseup", a), () => window.removeEventListener("mouseup", a);
|
|
78
|
+
}, [n]), {
|
|
79
|
+
selection: o,
|
|
80
|
+
isSelecting: n,
|
|
81
|
+
isCellSelected: f,
|
|
82
|
+
handleCellMouseDown: u,
|
|
84
83
|
handleCellMouseEnter: b,
|
|
85
84
|
handleMouseUp: c,
|
|
86
|
-
clearSelection:
|
|
87
|
-
setSelection:
|
|
85
|
+
clearSelection: h,
|
|
86
|
+
setSelection: t
|
|
88
87
|
};
|
|
89
88
|
}
|
|
90
|
-
function
|
|
91
|
-
selection:
|
|
92
|
-
getValue:
|
|
93
|
-
setValues:
|
|
89
|
+
function Y({
|
|
90
|
+
selection: o,
|
|
91
|
+
getValue: t,
|
|
92
|
+
setValues: n,
|
|
94
93
|
rowCount: s,
|
|
95
|
-
colCount:
|
|
94
|
+
colCount: u
|
|
96
95
|
}) {
|
|
97
|
-
const b =
|
|
98
|
-
const l =
|
|
96
|
+
const b = C(() => {
|
|
97
|
+
const l = j(o);
|
|
99
98
|
if (!l.start || !l.end) return [];
|
|
100
|
-
const
|
|
101
|
-
for (let
|
|
102
|
-
const
|
|
103
|
-
for (let
|
|
104
|
-
|
|
105
|
-
|
|
99
|
+
const x = [];
|
|
100
|
+
for (let y = l.start.row; y <= l.end.row; y++) {
|
|
101
|
+
const M = [];
|
|
102
|
+
for (let g = l.start.col; g <= l.end.col; g++)
|
|
103
|
+
M.push(t({ row: y, col: g }));
|
|
104
|
+
x.push(M);
|
|
106
105
|
}
|
|
107
|
-
return
|
|
108
|
-
}, [
|
|
106
|
+
return x;
|
|
107
|
+
}, [o, t]), c = C(async () => {
|
|
109
108
|
const l = b();
|
|
110
109
|
if (l.length === 0) return;
|
|
111
|
-
const
|
|
110
|
+
const x = J(l);
|
|
112
111
|
try {
|
|
113
|
-
await navigator.clipboard.writeText(
|
|
114
|
-
} catch (
|
|
115
|
-
console.error("Clipboard copy failed:",
|
|
112
|
+
await navigator.clipboard.writeText(x);
|
|
113
|
+
} catch (y) {
|
|
114
|
+
console.error("Clipboard copy failed:", y);
|
|
116
115
|
}
|
|
117
|
-
}, [b]),
|
|
118
|
-
if (
|
|
116
|
+
}, [b]), h = C(async () => {
|
|
117
|
+
if (o.start)
|
|
119
118
|
try {
|
|
120
|
-
const l = await navigator.clipboard.readText(),
|
|
121
|
-
if (
|
|
122
|
-
const
|
|
123
|
-
|
|
124
|
-
const
|
|
125
|
-
|
|
126
|
-
const F =
|
|
127
|
-
F >=
|
|
119
|
+
const l = await navigator.clipboard.readText(), x = _(l);
|
|
120
|
+
if (x.length === 0) return;
|
|
121
|
+
const y = o.start.row, M = o.start.col, g = [];
|
|
122
|
+
x.forEach((w, p) => {
|
|
123
|
+
const d = y + p;
|
|
124
|
+
d >= s || w.forEach((i, R) => {
|
|
125
|
+
const F = M + R;
|
|
126
|
+
F >= u || g.push({ coord: { row: d, col: F }, value: i });
|
|
128
127
|
});
|
|
129
|
-
}),
|
|
128
|
+
}), g.length > 0 && n(g);
|
|
130
129
|
} catch (l) {
|
|
131
130
|
console.error("Clipboard paste failed:", l);
|
|
132
131
|
}
|
|
133
|
-
}, [
|
|
134
|
-
const l =
|
|
132
|
+
}, [o.start, n, s, u]), f = C(() => {
|
|
133
|
+
const l = j(o);
|
|
135
134
|
if (!l.start || !l.end) return;
|
|
136
|
-
const
|
|
137
|
-
for (let
|
|
138
|
-
for (let
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
}, [
|
|
135
|
+
const x = [];
|
|
136
|
+
for (let y = l.start.row; y <= l.end.row; y++)
|
|
137
|
+
for (let M = l.start.col; M <= l.end.col; M++)
|
|
138
|
+
x.push({ coord: { row: y, col: M }, value: "" });
|
|
139
|
+
x.length > 0 && n(x);
|
|
140
|
+
}, [o, n]), a = C(
|
|
142
141
|
(l) => {
|
|
143
|
-
(l.ctrlKey || l.metaKey) && l.key === "c" && (l.preventDefault(), c()), (l.ctrlKey || l.metaKey) && l.key === "v" && (l.preventDefault(),
|
|
142
|
+
(l.ctrlKey || l.metaKey) && l.key === "c" && (l.preventDefault(), c()), (l.ctrlKey || l.metaKey) && l.key === "v" && (l.preventDefault(), h()), (l.key === "Backspace" || l.key === "Delete") && (l.preventDefault(), f());
|
|
144
143
|
},
|
|
145
|
-
[c,
|
|
144
|
+
[c, h, f]
|
|
146
145
|
);
|
|
147
146
|
return {
|
|
148
147
|
handleCopy: c,
|
|
149
|
-
handlePaste:
|
|
150
|
-
handleKeyDown:
|
|
148
|
+
handlePaste: h,
|
|
149
|
+
handleKeyDown: a
|
|
151
150
|
};
|
|
152
151
|
}
|
|
153
|
-
function
|
|
154
|
-
if (
|
|
155
|
-
const
|
|
156
|
-
return isNaN(
|
|
152
|
+
function Z(o) {
|
|
153
|
+
if (o.trim() === "") return null;
|
|
154
|
+
const t = Number(o);
|
|
155
|
+
return isNaN(t) ? null : t;
|
|
157
156
|
}
|
|
158
|
-
function
|
|
159
|
-
if (
|
|
160
|
-
const
|
|
161
|
-
if (
|
|
162
|
-
const
|
|
163
|
-
if (
|
|
164
|
-
return { numbers:
|
|
165
|
-
const s =
|
|
166
|
-
for (let
|
|
167
|
-
if (
|
|
168
|
-
return { numbers:
|
|
169
|
-
return { numbers:
|
|
157
|
+
function q(o) {
|
|
158
|
+
if (o.length === 0) return null;
|
|
159
|
+
const t = o.map(Z);
|
|
160
|
+
if (t.some((u) => u === null)) return null;
|
|
161
|
+
const n = t;
|
|
162
|
+
if (n.length === 1)
|
|
163
|
+
return { numbers: n, diff: 0 };
|
|
164
|
+
const s = n[1] - n[0];
|
|
165
|
+
for (let u = 2; u < n.length; u++)
|
|
166
|
+
if (n[u] - n[u - 1] !== s)
|
|
167
|
+
return { numbers: n, diff: 0 };
|
|
168
|
+
return { numbers: n, diff: s };
|
|
170
169
|
}
|
|
171
|
-
function
|
|
172
|
-
selection:
|
|
173
|
-
getValue:
|
|
174
|
-
setValues:
|
|
170
|
+
function oo({
|
|
171
|
+
selection: o,
|
|
172
|
+
getValue: t,
|
|
173
|
+
setValues: n
|
|
175
174
|
}) {
|
|
176
|
-
const [s,
|
|
177
|
-
|
|
178
|
-
}, []),
|
|
179
|
-
(
|
|
180
|
-
if (!
|
|
181
|
-
const
|
|
182
|
-
if (!
|
|
183
|
-
l(
|
|
184
|
-
const
|
|
185
|
-
row: Math.min(
|
|
186
|
-
col: Math.min(
|
|
187
|
-
},
|
|
188
|
-
row: Math.max(
|
|
189
|
-
col: Math.max(
|
|
190
|
-
},
|
|
191
|
-
for (let F =
|
|
192
|
-
for (let r =
|
|
193
|
-
F >=
|
|
194
|
-
c(
|
|
175
|
+
const [s, u] = L(null), [b, c] = L([]), [h, f] = L(!1), [a, l] = L(null), x = C((w) => {
|
|
176
|
+
u(w), f(!0), c([]), l(null);
|
|
177
|
+
}, []), y = C(
|
|
178
|
+
(w) => {
|
|
179
|
+
if (!h || !o.start) return;
|
|
180
|
+
const p = j(o);
|
|
181
|
+
if (!p.start || !p.end) return;
|
|
182
|
+
l(w);
|
|
183
|
+
const d = {
|
|
184
|
+
row: Math.min(p.start.row, w.row),
|
|
185
|
+
col: Math.min(p.start.col, w.col)
|
|
186
|
+
}, i = {
|
|
187
|
+
row: Math.max(p.end.row, w.row),
|
|
188
|
+
col: Math.max(p.end.col, w.col)
|
|
189
|
+
}, R = [];
|
|
190
|
+
for (let F = d.row; F <= i.row; F++)
|
|
191
|
+
for (let r = d.col; r <= i.col; r++)
|
|
192
|
+
F >= p.start.row && F <= p.end.row && r >= p.start.col && r <= p.end.col || R.push({ row: F, col: r });
|
|
193
|
+
c(R);
|
|
195
194
|
},
|
|
196
|
-
[
|
|
197
|
-
),
|
|
198
|
-
if (!
|
|
199
|
-
|
|
195
|
+
[h, o]
|
|
196
|
+
), M = C(() => {
|
|
197
|
+
if (!o.start || b.length === 0 || !a) {
|
|
198
|
+
u(null), c([]), f(!1), l(null);
|
|
200
199
|
return;
|
|
201
200
|
}
|
|
202
|
-
const
|
|
203
|
-
if (!
|
|
204
|
-
|
|
201
|
+
const w = j(o);
|
|
202
|
+
if (!w.start || !w.end) {
|
|
203
|
+
u(null), c([]), f(!1), l(null);
|
|
205
204
|
return;
|
|
206
205
|
}
|
|
207
|
-
const
|
|
206
|
+
const p = [], d = w.start, i = w.end, R = i.row - d.row + 1, F = i.col - d.col + 1;
|
|
208
207
|
b.forEach((r) => {
|
|
209
|
-
let
|
|
210
|
-
if (r.row <
|
|
211
|
-
const
|
|
212
|
-
|
|
213
|
-
} else if (r.row >
|
|
214
|
-
const
|
|
215
|
-
|
|
208
|
+
let k, T;
|
|
209
|
+
if (r.row < d.row) {
|
|
210
|
+
const N = d.row - r.row;
|
|
211
|
+
k = i.row - (N - 1) % R;
|
|
212
|
+
} else if (r.row > i.row) {
|
|
213
|
+
const N = r.row - i.row;
|
|
214
|
+
k = d.row + (N - 1) % R;
|
|
216
215
|
} else
|
|
217
|
-
|
|
218
|
-
if (r.col <
|
|
219
|
-
const
|
|
220
|
-
|
|
221
|
-
} else if (r.col >
|
|
222
|
-
const
|
|
223
|
-
|
|
216
|
+
k = r.row;
|
|
217
|
+
if (r.col < d.col) {
|
|
218
|
+
const N = d.col - r.col;
|
|
219
|
+
T = i.col - (N - 1) % F;
|
|
220
|
+
} else if (r.col > i.col) {
|
|
221
|
+
const N = r.col - i.col;
|
|
222
|
+
T = d.col + (N - 1) % F;
|
|
224
223
|
} else
|
|
225
|
-
|
|
226
|
-
let
|
|
227
|
-
if (r.row !==
|
|
228
|
-
const
|
|
229
|
-
for (let
|
|
230
|
-
|
|
231
|
-
const
|
|
232
|
-
if (
|
|
233
|
-
if (r.row >
|
|
234
|
-
const
|
|
235
|
-
|
|
236
|
-
} else if (r.row <
|
|
237
|
-
const
|
|
238
|
-
|
|
224
|
+
T = r.col;
|
|
225
|
+
let G = t({ row: k, col: T });
|
|
226
|
+
if (r.row !== k && r.col >= d.col && r.col <= i.col) {
|
|
227
|
+
const N = [];
|
|
228
|
+
for (let S = d.row; S <= i.row; S++)
|
|
229
|
+
N.push(t({ row: S, col: r.col }));
|
|
230
|
+
const D = q(N);
|
|
231
|
+
if (D && D.diff !== 0) {
|
|
232
|
+
if (r.row > i.row) {
|
|
233
|
+
const S = r.row - i.row;
|
|
234
|
+
G = String(D.numbers[D.numbers.length - 1] + D.diff * S);
|
|
235
|
+
} else if (r.row < d.row) {
|
|
236
|
+
const S = d.row - r.row;
|
|
237
|
+
G = String(D.numbers[0] - D.diff * S);
|
|
239
238
|
}
|
|
240
239
|
}
|
|
241
240
|
}
|
|
242
|
-
if (r.col !==
|
|
243
|
-
const
|
|
244
|
-
for (let
|
|
245
|
-
|
|
246
|
-
const
|
|
247
|
-
if (
|
|
248
|
-
if (r.col >
|
|
249
|
-
const
|
|
250
|
-
|
|
251
|
-
} else if (r.col <
|
|
252
|
-
const
|
|
253
|
-
|
|
241
|
+
if (r.col !== T && r.row >= d.row && r.row <= i.row) {
|
|
242
|
+
const N = [];
|
|
243
|
+
for (let S = d.col; S <= i.col; S++)
|
|
244
|
+
N.push(t({ row: r.row, col: S }));
|
|
245
|
+
const D = q(N);
|
|
246
|
+
if (D && D.diff !== 0) {
|
|
247
|
+
if (r.col > i.col) {
|
|
248
|
+
const S = r.col - i.col;
|
|
249
|
+
G = String(D.numbers[D.numbers.length - 1] + D.diff * S);
|
|
250
|
+
} else if (r.col < d.col) {
|
|
251
|
+
const S = d.col - r.col;
|
|
252
|
+
G = String(D.numbers[0] - D.diff * S);
|
|
254
253
|
}
|
|
255
254
|
}
|
|
256
255
|
}
|
|
257
|
-
|
|
258
|
-
}),
|
|
259
|
-
}, [
|
|
260
|
-
(
|
|
261
|
-
(
|
|
256
|
+
p.push({ coord: r, value: G });
|
|
257
|
+
}), p.length > 0 && n(p), u(null), c([]), f(!1), l(null);
|
|
258
|
+
}, [o, b, a, t, n]), g = C(
|
|
259
|
+
(w) => b.some(
|
|
260
|
+
(p) => p.row === w.row && p.col === w.col
|
|
262
261
|
),
|
|
263
262
|
[b]
|
|
264
263
|
);
|
|
265
|
-
return
|
|
266
|
-
const
|
|
267
|
-
|
|
264
|
+
return W(() => {
|
|
265
|
+
const w = () => {
|
|
266
|
+
h && M();
|
|
268
267
|
};
|
|
269
|
-
return window.addEventListener("mouseup",
|
|
270
|
-
}, [
|
|
268
|
+
return window.addEventListener("mouseup", w), () => window.removeEventListener("mouseup", w);
|
|
269
|
+
}, [h, M]), {
|
|
271
270
|
fillSource: s,
|
|
272
271
|
fillTargets: b,
|
|
273
|
-
isDraggingFill:
|
|
274
|
-
isFillTarget:
|
|
275
|
-
handleFillHandleMouseDown:
|
|
276
|
-
handleCellMouseEnterForFill:
|
|
277
|
-
handleFillMouseUp:
|
|
272
|
+
isDraggingFill: h,
|
|
273
|
+
isFillTarget: g,
|
|
274
|
+
handleFillHandleMouseDown: x,
|
|
275
|
+
handleCellMouseEnterForFill: y,
|
|
276
|
+
handleFillMouseUp: M
|
|
278
277
|
};
|
|
279
278
|
}
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
279
|
+
const to = {
|
|
280
|
+
position: "relative",
|
|
281
|
+
border: "1px solid #d1d5db",
|
|
282
|
+
padding: 0
|
|
283
|
+
}, no = {
|
|
284
|
+
width: "100%",
|
|
285
|
+
height: "100%",
|
|
286
|
+
paddingLeft: "4px",
|
|
287
|
+
paddingRight: "4px",
|
|
288
|
+
paddingTop: "4px",
|
|
289
|
+
paddingBottom: "4px",
|
|
290
|
+
textAlign: "right",
|
|
291
|
+
fontSize: "12px",
|
|
292
|
+
backgroundColor: "transparent",
|
|
293
|
+
outline: "none",
|
|
294
|
+
cursor: "cell"
|
|
295
|
+
}, lo = {
|
|
296
|
+
position: "absolute",
|
|
297
|
+
bottom: "-2px",
|
|
298
|
+
right: "-2px",
|
|
299
|
+
width: "8px",
|
|
300
|
+
height: "8px",
|
|
301
|
+
cursor: "crosshair",
|
|
302
|
+
zIndex: 20,
|
|
303
|
+
backgroundColor: "#3b82f6"
|
|
304
|
+
}, eo = {
|
|
305
|
+
backgroundColor: "#dbeafe",
|
|
306
|
+
outline: "2px solid #3b82f6",
|
|
307
|
+
outlineOffset: "-2px"
|
|
308
|
+
}, ro = {
|
|
309
|
+
backgroundColor: "#eff6ff"
|
|
310
|
+
};
|
|
311
|
+
function so({
|
|
312
|
+
coord: o,
|
|
313
|
+
value: t,
|
|
314
|
+
isSelected: n,
|
|
284
315
|
isFillTarget: s,
|
|
285
|
-
showFillHandle:
|
|
316
|
+
showFillHandle: u,
|
|
286
317
|
onMouseDown: b,
|
|
287
318
|
onMouseEnter: c,
|
|
288
|
-
onChange:
|
|
289
|
-
onFillHandleMouseDown:
|
|
290
|
-
styles:
|
|
319
|
+
onChange: h,
|
|
320
|
+
onFillHandleMouseDown: f,
|
|
321
|
+
styles: a
|
|
291
322
|
}) {
|
|
292
|
-
const l = (
|
|
293
|
-
|
|
294
|
-
},
|
|
295
|
-
|
|
296
|
-
},
|
|
297
|
-
|
|
323
|
+
const l = (i) => {
|
|
324
|
+
h(o, i.target.value);
|
|
325
|
+
}, x = (i) => {
|
|
326
|
+
i.target.classList.contains("fill-handle") || b(o);
|
|
327
|
+
}, y = (i) => {
|
|
328
|
+
i.stopPropagation(), i.preventDefault(), f(o);
|
|
329
|
+
}, M = !!a?.selected, g = !!a?.fillTarget, w = !!a?.fillHandle, p = {
|
|
330
|
+
...to,
|
|
331
|
+
...n && !M ? eo : {},
|
|
332
|
+
...s && !g ? ro : {}
|
|
333
|
+
}, d = {
|
|
334
|
+
...lo,
|
|
335
|
+
...w ? { backgroundColor: void 0 } : {}
|
|
298
336
|
};
|
|
299
|
-
return /* @__PURE__ */
|
|
337
|
+
return /* @__PURE__ */ K(
|
|
300
338
|
"td",
|
|
301
339
|
{
|
|
302
|
-
className:
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
s && (u?.fillTarget ?? "bg-blue-50")
|
|
340
|
+
className: H(
|
|
341
|
+
a?.cell,
|
|
342
|
+
n && a?.selected,
|
|
343
|
+
s && a?.fillTarget
|
|
307
344
|
),
|
|
308
|
-
|
|
309
|
-
|
|
345
|
+
style: p,
|
|
346
|
+
onMouseDown: x,
|
|
347
|
+
onMouseEnter: () => c(o),
|
|
310
348
|
children: [
|
|
311
|
-
/* @__PURE__ */
|
|
349
|
+
/* @__PURE__ */ v(
|
|
312
350
|
"input",
|
|
313
351
|
{
|
|
314
352
|
type: "text",
|
|
315
|
-
value:
|
|
353
|
+
value: t,
|
|
316
354
|
onChange: l,
|
|
317
|
-
|
|
318
|
-
"w-full h-full px-1 py-1 text-right text-xs bg-transparent outline-none cursor-cell",
|
|
319
|
-
e && "bg-transparent"
|
|
320
|
-
)
|
|
355
|
+
style: no
|
|
321
356
|
}
|
|
322
357
|
),
|
|
323
|
-
|
|
358
|
+
u && /* @__PURE__ */ v(
|
|
324
359
|
"div",
|
|
325
360
|
{
|
|
326
|
-
className:
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
),
|
|
330
|
-
onMouseDown: C
|
|
361
|
+
className: H("fill-handle", a?.fillHandle),
|
|
362
|
+
style: d,
|
|
363
|
+
onMouseDown: y
|
|
331
364
|
}
|
|
332
365
|
)
|
|
333
366
|
]
|
|
334
367
|
}
|
|
335
368
|
);
|
|
336
369
|
}
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
370
|
+
const co = {
|
|
371
|
+
outline: "none",
|
|
372
|
+
overflowX: "auto"
|
|
373
|
+
}, io = {
|
|
374
|
+
borderCollapse: "collapse",
|
|
375
|
+
fontSize: "12px",
|
|
376
|
+
userSelect: "none"
|
|
377
|
+
}, ao = {
|
|
378
|
+
position: "sticky",
|
|
379
|
+
left: 0,
|
|
380
|
+
zIndex: 10,
|
|
381
|
+
border: "1px solid #d1d5db",
|
|
382
|
+
padding: "6px 8px",
|
|
383
|
+
textAlign: "center",
|
|
384
|
+
fontWeight: 500
|
|
385
|
+
}, uo = {
|
|
386
|
+
border: "1px solid #d1d5db",
|
|
387
|
+
padding: "6px 4px",
|
|
388
|
+
textAlign: "center",
|
|
389
|
+
fontWeight: 500
|
|
390
|
+
}, fo = {
|
|
391
|
+
border: "1px solid #d1d5db",
|
|
392
|
+
padding: "4px",
|
|
393
|
+
textAlign: "center",
|
|
394
|
+
fontWeight: 500,
|
|
395
|
+
fontSize: "11px"
|
|
396
|
+
}, wo = {
|
|
397
|
+
backgroundColor: "#f3f4f6"
|
|
398
|
+
}, ho = {
|
|
399
|
+
backgroundColor: "#dbeafe",
|
|
400
|
+
color: "#1d4ed8"
|
|
401
|
+
}, po = {
|
|
402
|
+
backgroundColor: "#f9fafb"
|
|
403
|
+
};
|
|
404
|
+
function Mo({
|
|
405
|
+
data: o,
|
|
406
|
+
onChange: t,
|
|
407
|
+
rowHeaders: n,
|
|
341
408
|
colHeaders: s,
|
|
342
|
-
className:
|
|
409
|
+
className: u,
|
|
343
410
|
rowHeaderTitle: b = "",
|
|
344
411
|
styles: c
|
|
345
412
|
}) {
|
|
346
|
-
const
|
|
347
|
-
(
|
|
413
|
+
const h = O(null), f = o.length, a = U(() => s ? s.reduce(
|
|
414
|
+
(e, m) => e + m.headers.length,
|
|
348
415
|
0
|
|
349
|
-
) :
|
|
350
|
-
(
|
|
351
|
-
[
|
|
352
|
-
),
|
|
353
|
-
(
|
|
354
|
-
const
|
|
355
|
-
(
|
|
356
|
-
(
|
|
357
|
-
) :
|
|
416
|
+
) : o[0]?.length ?? 0, [s, o]), l = U(() => s ? s.flatMap((e) => e.headers) : [], [s]), x = C(
|
|
417
|
+
(e) => e.row < 0 || e.row >= f || e.col < 0 || e.col >= a ? "" : o[e.row]?.[e.col] ?? "",
|
|
418
|
+
[o, f, a]
|
|
419
|
+
), y = C(
|
|
420
|
+
(e, m) => {
|
|
421
|
+
const E = o.map(
|
|
422
|
+
(z, B) => B === e.row ? z.map(
|
|
423
|
+
(A, I) => I === e.col ? m : A
|
|
424
|
+
) : z
|
|
358
425
|
);
|
|
359
|
-
|
|
426
|
+
t(E);
|
|
360
427
|
},
|
|
361
|
-
[
|
|
362
|
-
),
|
|
363
|
-
(
|
|
364
|
-
if (
|
|
365
|
-
const
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
}),
|
|
428
|
+
[o, t]
|
|
429
|
+
), M = C(
|
|
430
|
+
(e) => {
|
|
431
|
+
if (e.length === 0) return;
|
|
432
|
+
const m = o.map((E) => [...E]);
|
|
433
|
+
e.forEach(({ coord: E, value: z }) => {
|
|
434
|
+
E.row >= 0 && E.row < f && E.col >= 0 && E.col < a && (m[E.row][E.col] = z);
|
|
435
|
+
}), t(m);
|
|
369
436
|
},
|
|
370
|
-
[
|
|
437
|
+
[o, t, f, a]
|
|
371
438
|
), {
|
|
372
|
-
selection:
|
|
373
|
-
isSelecting:
|
|
374
|
-
isCellSelected:
|
|
375
|
-
handleCellMouseDown:
|
|
376
|
-
handleCellMouseEnter:
|
|
377
|
-
} =
|
|
378
|
-
selection:
|
|
379
|
-
getValue:
|
|
380
|
-
setValues:
|
|
381
|
-
rowCount:
|
|
382
|
-
colCount:
|
|
439
|
+
selection: g,
|
|
440
|
+
isSelecting: w,
|
|
441
|
+
isCellSelected: p,
|
|
442
|
+
handleCellMouseDown: d,
|
|
443
|
+
handleCellMouseEnter: i
|
|
444
|
+
} = Q(), { handleKeyDown: R } = Y({
|
|
445
|
+
selection: g,
|
|
446
|
+
getValue: x,
|
|
447
|
+
setValues: M,
|
|
448
|
+
rowCount: f,
|
|
449
|
+
colCount: a
|
|
383
450
|
}), {
|
|
384
451
|
isDraggingFill: F,
|
|
385
452
|
isFillTarget: r,
|
|
386
|
-
handleFillHandleMouseDown:
|
|
387
|
-
handleCellMouseEnterForFill:
|
|
388
|
-
} =
|
|
389
|
-
selection:
|
|
390
|
-
getValue:
|
|
391
|
-
setValues:
|
|
392
|
-
}),
|
|
393
|
-
(
|
|
394
|
-
F ?
|
|
453
|
+
handleFillHandleMouseDown: k,
|
|
454
|
+
handleCellMouseEnterForFill: T
|
|
455
|
+
} = oo({
|
|
456
|
+
selection: g,
|
|
457
|
+
getValue: x,
|
|
458
|
+
setValues: M
|
|
459
|
+
}), G = C(
|
|
460
|
+
(e) => {
|
|
461
|
+
F ? T(e) : w && i(e);
|
|
395
462
|
},
|
|
396
463
|
[
|
|
397
464
|
F,
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
465
|
+
w,
|
|
466
|
+
T,
|
|
467
|
+
i
|
|
401
468
|
]
|
|
402
|
-
),
|
|
403
|
-
(
|
|
404
|
-
|
|
469
|
+
), N = C(
|
|
470
|
+
(e, m) => {
|
|
471
|
+
y(e, m);
|
|
405
472
|
},
|
|
406
|
-
[
|
|
407
|
-
),
|
|
408
|
-
(
|
|
409
|
-
if (!
|
|
410
|
-
const
|
|
411
|
-
return !
|
|
473
|
+
[y]
|
|
474
|
+
), D = C(
|
|
475
|
+
(e) => {
|
|
476
|
+
if (!g.start) return !1;
|
|
477
|
+
const m = j(g);
|
|
478
|
+
return !m.start || !m.end ? !1 : e.row === m.end.row && e.col === m.end.col;
|
|
412
479
|
},
|
|
413
|
-
[
|
|
414
|
-
)
|
|
415
|
-
|
|
480
|
+
[g]
|
|
481
|
+
), S = (e) => ({
|
|
482
|
+
...ao,
|
|
483
|
+
...!e && !c?.rowHeader ? wo : {}
|
|
484
|
+
}), P = (e) => ({
|
|
485
|
+
...uo,
|
|
486
|
+
...!e && !c?.colGroup ? ho : {}
|
|
487
|
+
}), V = (e) => ({
|
|
488
|
+
...fo,
|
|
489
|
+
...!e && !c?.colHeader ? po : {}
|
|
490
|
+
});
|
|
491
|
+
return /* @__PURE__ */ v(
|
|
416
492
|
"div",
|
|
417
493
|
{
|
|
418
|
-
ref:
|
|
419
|
-
className:
|
|
494
|
+
ref: h,
|
|
495
|
+
className: u,
|
|
496
|
+
style: co,
|
|
420
497
|
tabIndex: 0,
|
|
421
|
-
onKeyDown:
|
|
422
|
-
children: /* @__PURE__ */
|
|
423
|
-
/* @__PURE__ */
|
|
424
|
-
s && /* @__PURE__ */
|
|
425
|
-
|
|
498
|
+
onKeyDown: R,
|
|
499
|
+
children: /* @__PURE__ */ K("table", { style: io, children: [
|
|
500
|
+
/* @__PURE__ */ K("thead", { children: [
|
|
501
|
+
s && /* @__PURE__ */ K("tr", { children: [
|
|
502
|
+
n && /* @__PURE__ */ v(
|
|
426
503
|
"th",
|
|
427
504
|
{
|
|
428
|
-
className:
|
|
429
|
-
|
|
430
|
-
c?.rowHeader
|
|
431
|
-
),
|
|
505
|
+
className: c?.rowHeader,
|
|
506
|
+
style: S(),
|
|
432
507
|
children: b
|
|
433
508
|
}
|
|
434
509
|
),
|
|
435
|
-
s.map((
|
|
510
|
+
s.map((e, m) => /* @__PURE__ */ v(
|
|
436
511
|
"th",
|
|
437
512
|
{
|
|
438
|
-
colSpan:
|
|
439
|
-
className:
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
t.className
|
|
443
|
-
),
|
|
444
|
-
children: t.label
|
|
513
|
+
colSpan: e.headers.length,
|
|
514
|
+
className: H(c?.colGroup, e.className),
|
|
515
|
+
style: P(e.className),
|
|
516
|
+
children: e.label
|
|
445
517
|
},
|
|
446
|
-
|
|
518
|
+
m
|
|
447
519
|
))
|
|
448
520
|
] }),
|
|
449
|
-
s && /* @__PURE__ */
|
|
450
|
-
|
|
521
|
+
s && /* @__PURE__ */ K("tr", { children: [
|
|
522
|
+
n && /* @__PURE__ */ v(
|
|
451
523
|
"th",
|
|
452
524
|
{
|
|
453
|
-
className:
|
|
454
|
-
|
|
455
|
-
c?.rowHeader
|
|
456
|
-
)
|
|
525
|
+
className: c?.rowHeader,
|
|
526
|
+
style: S()
|
|
457
527
|
}
|
|
458
528
|
),
|
|
459
|
-
l.map((
|
|
529
|
+
l.map((e) => /* @__PURE__ */ v(
|
|
460
530
|
"th",
|
|
461
531
|
{
|
|
462
|
-
className:
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
),
|
|
467
|
-
title: t.description,
|
|
468
|
-
children: t.label
|
|
532
|
+
className: H(c?.colHeader, e.className),
|
|
533
|
+
style: V(e.className),
|
|
534
|
+
title: e.description,
|
|
535
|
+
children: e.label
|
|
469
536
|
},
|
|
470
|
-
|
|
537
|
+
e.key
|
|
471
538
|
))
|
|
472
539
|
] })
|
|
473
540
|
] }),
|
|
474
|
-
/* @__PURE__ */
|
|
475
|
-
|
|
541
|
+
/* @__PURE__ */ v("tbody", { children: o.map((e, m) => /* @__PURE__ */ K("tr", { children: [
|
|
542
|
+
n && n[m] && /* @__PURE__ */ v(
|
|
476
543
|
"td",
|
|
477
544
|
{
|
|
478
|
-
className:
|
|
479
|
-
"sticky left-0 z-10 bg-gray-100 border border-gray-300 px-1 py-1.5 text-center font-medium",
|
|
545
|
+
className: H(
|
|
480
546
|
c?.rowHeader,
|
|
481
|
-
|
|
547
|
+
n[m].className
|
|
482
548
|
),
|
|
483
|
-
|
|
484
|
-
|
|
549
|
+
style: S(n[m].className),
|
|
550
|
+
title: n[m].description,
|
|
551
|
+
children: n[m].label
|
|
485
552
|
}
|
|
486
553
|
),
|
|
487
|
-
|
|
488
|
-
const
|
|
489
|
-
return /* @__PURE__ */
|
|
490
|
-
|
|
554
|
+
e.map((E, z) => {
|
|
555
|
+
const B = { row: m, col: z }, A = p(B), I = r(B), $ = D(B);
|
|
556
|
+
return /* @__PURE__ */ v(
|
|
557
|
+
so,
|
|
491
558
|
{
|
|
492
|
-
coord:
|
|
493
|
-
value:
|
|
494
|
-
isSelected:
|
|
495
|
-
isFillTarget:
|
|
496
|
-
showFillHandle:
|
|
497
|
-
onMouseDown:
|
|
498
|
-
onMouseEnter:
|
|
499
|
-
onChange:
|
|
500
|
-
onFillHandleMouseDown:
|
|
559
|
+
coord: B,
|
|
560
|
+
value: x(B),
|
|
561
|
+
isSelected: A,
|
|
562
|
+
isFillTarget: I,
|
|
563
|
+
showFillHandle: $ && !F,
|
|
564
|
+
onMouseDown: d,
|
|
565
|
+
onMouseEnter: G,
|
|
566
|
+
onChange: N,
|
|
567
|
+
onFillHandleMouseDown: k,
|
|
501
568
|
styles: c
|
|
502
569
|
},
|
|
503
|
-
|
|
570
|
+
z
|
|
504
571
|
);
|
|
505
572
|
})
|
|
506
|
-
] },
|
|
573
|
+
] }, m)) })
|
|
507
574
|
] })
|
|
508
575
|
}
|
|
509
576
|
);
|
|
510
577
|
}
|
|
511
|
-
function
|
|
512
|
-
const
|
|
513
|
-
return isNaN(
|
|
578
|
+
function go(o) {
|
|
579
|
+
const t = typeof o == "string" ? parseFloat(o.replace(/,/g, "")) : o;
|
|
580
|
+
return isNaN(t) ? "0" : new Intl.NumberFormat("ko-KR").format(t);
|
|
514
581
|
}
|
|
515
|
-
function
|
|
516
|
-
const
|
|
517
|
-
return isNaN(
|
|
582
|
+
function Do(o) {
|
|
583
|
+
const t = parseInt(o.replace(/,/g, ""), 10);
|
|
584
|
+
return isNaN(t) ? 0 : t;
|
|
518
585
|
}
|
|
519
586
|
export {
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
587
|
+
Mo as ExcelGrid,
|
|
588
|
+
so as GridCell,
|
|
589
|
+
H as cn,
|
|
590
|
+
Co as coordToKey,
|
|
591
|
+
go as formatCurrency,
|
|
592
|
+
So as getCellsInRange,
|
|
593
|
+
yo as getFillTargetCells,
|
|
594
|
+
X as isCellInRange,
|
|
595
|
+
xo as keyToCoord,
|
|
596
|
+
j as normalizeRange,
|
|
597
|
+
Do as parseCurrency,
|
|
598
|
+
_ as parseTSV,
|
|
599
|
+
J as toTSV,
|
|
600
|
+
Y as useGridClipboard,
|
|
601
|
+
oo as useGridDragFill,
|
|
602
|
+
Q as useGridSelection
|
|
536
603
|
};
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
(function(){
|
|
2
|
-
(function(
|
|
3
|
-
`)}function I(l){return!l.start||!l.end?l:{start:{row:Math.min(l.start.row,l.end.row),col:Math.min(l.start.col,l.end.col)},end:{row:Math.max(l.start.row,l.end.row),col:Math.max(l.start.col,l.end.col)}}}function X(l,n){if(l.row===n.row&&l.col===n.col)return[];const o=Math.min(l.row,n.row),c=Math.max(l.row,n.row),a=Math.min(l.col,n.col),y=Math.max(l.col,n.col),i=[];for(let w=o;w<=c;w++)for(let u=a;u<=y;u++)w===l.row&&u===l.col||i.push({row:w,col:u});return i}function $(){const[l,n]=s.useState({start:null,end:null}),[o,c]=s.useState(!1),a=s.useCallback(f=>{n({start:f,end:f}),c(!0)},[]),y=s.useCallback(f=>{o&&n(t=>({...t,end:f}))},[o]),i=s.useCallback(()=>{c(!1)},[]),w=s.useCallback(()=>{n({start:null,end:null}),c(!1)},[]),u=s.useCallback(f=>B(f,l),[l]);return s.useEffect(()=>{const f=()=>{o&&c(!1)};return window.addEventListener("mouseup",f),()=>window.removeEventListener("mouseup",f)},[o]),{selection:l,isSelecting:o,isCellSelected:u,handleCellMouseDown:a,handleCellMouseEnter:y,handleMouseUp:i,clearSelection:w,setSelection:n}}function A({selection:l,getValue:n,setValues:o,rowCount:c,colCount:a}){const y=s.useCallback(()=>{const t=I(l);if(!t.start||!t.end)return[];const S=[];for(let k=t.start.row;k<=t.end.row;k++){const b=[];for(let D=t.start.col;D<=t.end.col;D++)b.push(n({row:k,col:D}));S.push(b)}return S},[l,n]),i=s.useCallback(async()=>{const t=y();if(t.length===0)return;const S=P(t);try{await navigator.clipboard.writeText(S)}catch(k){console.error("Clipboard copy failed:",k)}},[y]),w=s.useCallback(async()=>{if(l.start)try{const t=await navigator.clipboard.readText(),S=U(t);if(S.length===0)return;const k=l.start.row,b=l.start.col,D=[];S.forEach((p,M)=>{const d=k+M;d>=c||p.forEach((h,v)=>{const F=b+v;F>=a||D.push({coord:{row:d,col:F},value:h})})}),D.length>0&&o(D)}catch(t){console.error("Clipboard paste failed:",t)}},[l.start,o,c,a]),u=s.useCallback(()=>{const t=I(l);if(!t.start||!t.end)return;const S=[];for(let k=t.start.row;k<=t.end.row;k++)for(let b=t.start.col;b<=t.end.col;b++)S.push({coord:{row:k,col:b},value:""});S.length>0&&o(S)},[l,o]),f=s.useCallback(t=>{(t.ctrlKey||t.metaKey)&&t.key==="c"&&(t.preventDefault(),i()),(t.ctrlKey||t.metaKey)&&t.key==="v"&&(t.preventDefault(),w()),(t.key==="Backspace"||t.key==="Delete")&&(t.preventDefault(),u())},[i,w,u]);return{handleCopy:i,handlePaste:w,handleKeyDown:f}}function Y(l){if(l.trim()==="")return null;const n=Number(l);return isNaN(n)?null:n}function J(l){if(l.length===0)return null;const n=l.map(Y);if(n.some(a=>a===null))return null;const o=n;if(o.length===1)return{numbers:o,diff:0};const c=o[1]-o[0];for(let a=2;a<o.length;a++)if(o[a]-o[a-1]!==c)return{numbers:o,diff:0};return{numbers:o,diff:c}}function O({selection:l,getValue:n,setValues:o}){const[c,a]=s.useState(null),[y,i]=s.useState([]),[w,u]=s.useState(!1),[f,t]=s.useState(null),S=s.useCallback(p=>{a(p),u(!0),i([]),t(null)},[]),k=s.useCallback(p=>{if(!w||!l.start)return;const M=I(l);if(!M.start||!M.end)return;t(p);const d={row:Math.min(M.start.row,p.row),col:Math.min(M.start.col,p.col)},h={row:Math.max(M.end.row,p.row),col:Math.max(M.end.col,p.col)},v=[];for(let F=d.row;F<=h.row;F++)for(let r=d.col;r<=h.col;r++)F>=M.start.row&&F<=M.end.row&&r>=M.start.col&&r<=M.end.col||v.push({row:F,col:r});i(v)},[w,l]),b=s.useCallback(()=>{if(!l.start||y.length===0||!f){a(null),i([]),u(!1),t(null);return}const p=I(l);if(!p.start||!p.end){a(null),i([]),u(!1),t(null);return}const M=[],d=p.start,h=p.end,v=h.row-d.row+1,F=h.col-d.col+1;y.forEach(r=>{let G,z;if(r.row<d.row){const E=d.row-r.row;G=h.row-(E-1)%v}else if(r.row>h.row){const E=r.row-h.row;G=d.row+(E-1)%v}else G=r.row;if(r.col<d.col){const E=d.col-r.col;z=h.col-(E-1)%F}else if(r.col>h.col){const E=r.col-h.col;z=d.col+(E-1)%F}else z=r.col;let K=n({row:G,col:z});if(r.row!==G&&r.col>=d.col&&r.col<=h.col){const E=[];for(let e=d.row;e<=h.row;e++)E.push(n({row:e,col:r.col}));const x=J(E);if(x&&x.diff!==0){if(r.row>h.row){const e=r.row-h.row;K=String(x.numbers[x.numbers.length-1]+x.diff*e)}else if(r.row<d.row){const e=d.row-r.row;K=String(x.numbers[0]-x.diff*e)}}}if(r.col!==z&&r.row>=d.row&&r.row<=h.row){const E=[];for(let e=d.col;e<=h.col;e++)E.push(n({row:r.row,col:e}));const x=J(E);if(x&&x.diff!==0){if(r.col>h.col){const e=r.col-h.col;K=String(x.numbers[x.numbers.length-1]+x.diff*e)}else if(r.col<d.col){const e=d.col-r.col;K=String(x.numbers[0]-x.diff*e)}}}M.push({coord:r,value:K})}),M.length>0&&o(M),a(null),i([]),u(!1),t(null)},[l,y,f,n,o]),D=s.useCallback(p=>y.some(M=>M.row===p.row&&M.col===p.col),[y]);return s.useEffect(()=>{const p=()=>{w&&b()};return window.addEventListener("mouseup",p),()=>window.removeEventListener("mouseup",p)},[w,b]),{fillSource:c,fillTargets:y,isDraggingFill:w,isFillTarget:D,handleFillHandleMouseDown:S,handleCellMouseEnterForFill:k,handleFillMouseUp:b}}function V({coord:l,value:n,isSelected:o,isFillTarget:c,showFillHandle:a,onMouseDown:y,onMouseEnter:i,onChange:w,onFillHandleMouseDown:u,styles:f}){const t=b=>{w(l,b.target.value)},S=b=>{b.target.classList.contains("fill-handle")||y(l)},k=b=>{b.stopPropagation(),b.preventDefault(),u(l)};return g.jsxs("td",{className:T("relative border border-gray-300 p-0",f?.cell,o&&(f?.selected??"bg-blue-100 ring-2 ring-inset ring-blue-500"),c&&(f?.fillTarget??"bg-blue-50")),onMouseDown:S,onMouseEnter:()=>i(l),children:[g.jsx("input",{type:"text",value:n,onChange:t,className:T("w-full h-full px-1 py-1 text-right text-xs bg-transparent outline-none cursor-cell",o&&"bg-transparent")}),a&&g.jsx("div",{className:T("fill-handle absolute -bottom-0.5 -right-0.5 w-2 h-2 cursor-crosshair z-20",f?.fillHandle??"bg-blue-500"),onMouseDown:k})]})}function Z({data:l,onChange:n,rowHeaders:o,colHeaders:c,className:a,rowHeaderTitle:y="",styles:i}){const w=s.useRef(null),u=l.length,f=s.useMemo(()=>c?c.reduce((e,C)=>e+C.headers.length,0):l[0]?.length??0,[c,l]),t=s.useMemo(()=>c?c.flatMap(e=>e.headers):[],[c]),S=s.useCallback(e=>e.row<0||e.row>=u||e.col<0||e.col>=f?"":l[e.row]?.[e.col]??"",[l,u,f]),k=s.useCallback((e,C)=>{const N=l.map((R,j)=>j===e.row?R.map((L,q)=>q===e.col?C:L):R);n(N)},[l,n]),b=s.useCallback(e=>{if(e.length===0)return;const C=l.map(N=>[...N]);e.forEach(({coord:N,value:R})=>{N.row>=0&&N.row<u&&N.col>=0&&N.col<f&&(C[N.row][N.col]=R)}),n(C)},[l,n,u,f]),{selection:D,isSelecting:p,isCellSelected:M,handleCellMouseDown:d,handleCellMouseEnter:h}=$(),{handleKeyDown:v}=A({selection:D,getValue:S,setValues:b,rowCount:u,colCount:f}),{isDraggingFill:F,isFillTarget:r,handleFillHandleMouseDown:G,handleCellMouseEnterForFill:z}=O({selection:D,getValue:S,setValues:b}),K=s.useCallback(e=>{F?z(e):p&&h(e)},[F,p,z,h]),E=s.useCallback((e,C)=>{k(e,C)},[k]),x=s.useCallback(e=>{if(!D.start)return!1;const C=I(D);return!C.start||!C.end?!1:e.row===C.end.row&&e.col===C.end.col},[D]);return g.jsx("div",{ref:w,className:T("outline-none overflow-x-auto",a),tabIndex:0,onKeyDown:v,children:g.jsxs("table",{className:"border-collapse text-xs select-none",children:[g.jsxs("thead",{children:[c&&g.jsxs("tr",{children:[o&&g.jsx("th",{className:T("sticky left-0 z-10 bg-gray-100 border border-gray-300 px-2 py-1.5 text-center font-medium",i?.rowHeader),children:y}),c.map((e,C)=>g.jsx("th",{colSpan:e.headers.length,className:T("bg-blue-100 border border-gray-300 px-1 py-1.5 text-center font-medium text-blue-700",i?.colGroup,e.className),children:e.label},C))]}),c&&g.jsxs("tr",{children:[o&&g.jsx("th",{className:T("sticky left-0 z-10 bg-gray-100 border border-gray-300 px-2 py-1",i?.rowHeader)}),t.map(e=>g.jsx("th",{className:T("bg-gray-50 border border-gray-300 px-1 py-1 text-center font-medium text-[11px]",i?.colHeader,e.className),title:e.description,children:e.label},e.key))]})]}),g.jsx("tbody",{children:l.map((e,C)=>g.jsxs("tr",{children:[o&&o[C]&&g.jsx("td",{className:T("sticky left-0 z-10 bg-gray-100 border border-gray-300 px-1 py-1.5 text-center font-medium",i?.rowHeader,o[C].className),title:o[C].description,children:o[C].label}),e.map((N,R)=>{const j={row:C,col:R},L=M(j),q=r(j),nl=x(j);return g.jsx(V,{coord:j,value:S(j),isSelected:L,isFillTarget:q,showFillHandle:nl&&!F,onMouseDown:d,onMouseEnter:K,onChange:E,onFillHandleMouseDown:G,styles:i},R)})]},C))})]})})}function H(l){const n=typeof l=="string"?parseFloat(l.replace(/,/g,"")):l;return isNaN(n)?"0":new Intl.NumberFormat("ko-KR").format(n)}function ll(l){const n=parseInt(l.replace(/,/g,""),10);return isNaN(n)?0:n}m.ExcelGrid=Z,m.GridCell=V,m.cn=T,m.coordToKey=_,m.formatCurrency=H,m.getCellsInRange=W,m.getFillTargetCells=X,m.isCellInRange=B,m.keyToCoord=Q,m.normalizeRange=I,m.parseCurrency=ll,m.parseTSV=U,m.toTSV=P,m.useGridClipboard=A,m.useGridDragFill=O,m.useGridSelection=$,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
|
|
1
|
+
(function(m,y){typeof exports=="object"&&typeof module<"u"?y(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],y):(m=typeof globalThis<"u"?globalThis:m||self,y(m.ReactExcelLite={},m.ReactJsxRuntime,m.React))})(this,(function(m,y,r){"use strict";function L(...l){return l.filter(Boolean).join(" ")}function J(l){return`${l.row}-${l.col}`}function X(l){const[o,e]=l.split("-").map(Number);return{row:o,col:e}}function _(l,o){if(!l||!o)return l?[l]:[];const e=Math.min(l.row,o.row),c=Math.max(l.row,o.row),f=Math.min(l.col,o.col),S=Math.max(l.col,o.col),i=[];for(let p=e;p<=c;p++)for(let d=f;d<=S;d++)i.push({row:p,col:d});return i}function q(l,o){if(!o.start)return!1;const e=o.end||o.start,c=Math.min(o.start.row,e.row),f=Math.max(o.start.row,e.row),S=Math.min(o.start.col,e.col),i=Math.max(o.start.col,e.col);return l.row>=c&&l.row<=f&&l.col>=S&&l.col<=i}function A(l){return l.split(/\r?\n/).filter(o=>o.trim()).map(o=>o.split(" ").map(e=>e.trim()))}function U(l){return l.map(o=>o.join(" ")).join(`
|
|
2
|
+
`)}function j(l){return!l.start||!l.end?l:{start:{row:Math.min(l.start.row,l.end.row),col:Math.min(l.start.col,l.end.col)},end:{row:Math.max(l.start.row,l.end.row),col:Math.max(l.start.col,l.end.col)}}}function Q(l,o){if(l.row===o.row&&l.col===o.col)return[];const e=Math.min(l.row,o.row),c=Math.max(l.row,o.row),f=Math.min(l.col,o.col),S=Math.max(l.col,o.col),i=[];for(let p=e;p<=c;p++)for(let d=f;d<=S;d++)p===l.row&&d===l.col||i.push({row:p,col:d});return i}function V(){const[l,o]=r.useState({start:null,end:null}),[e,c]=r.useState(!1),f=r.useCallback(u=>{o({start:u,end:u}),c(!0)},[]),S=r.useCallback(u=>{e&&o(n=>({...n,end:u}))},[e]),i=r.useCallback(()=>{c(!1)},[]),p=r.useCallback(()=>{o({start:null,end:null}),c(!1)},[]),d=r.useCallback(u=>q(u,l),[l]);return r.useEffect(()=>{const u=()=>{e&&c(!1)};return window.addEventListener("mouseup",u),()=>window.removeEventListener("mouseup",u)},[e]),{selection:l,isSelecting:e,isCellSelected:d,handleCellMouseDown:f,handleCellMouseEnter:S,handleMouseUp:i,clearSelection:p,setSelection:o}}function P({selection:l,getValue:o,setValues:e,rowCount:c,colCount:f}){const S=r.useCallback(()=>{const n=j(l);if(!n.start||!n.end)return[];const g=[];for(let k=n.start.row;k<=n.end.row;k++){const x=[];for(let D=n.start.col;D<=n.end.col;D++)x.push(o({row:k,col:D}));g.push(x)}return g},[l,o]),i=r.useCallback(async()=>{const n=S();if(n.length===0)return;const g=U(n);try{await navigator.clipboard.writeText(g)}catch(k){console.error("Clipboard copy failed:",k)}},[S]),p=r.useCallback(async()=>{if(l.start)try{const n=await navigator.clipboard.readText(),g=A(n);if(g.length===0)return;const k=l.start.row,x=l.start.col,D=[];g.forEach((h,C)=>{const w=k+C;w>=c||h.forEach((a,v)=>{const E=x+v;E>=f||D.push({coord:{row:w,col:E},value:a})})}),D.length>0&&e(D)}catch(n){console.error("Clipboard paste failed:",n)}},[l.start,e,c,f]),d=r.useCallback(()=>{const n=j(l);if(!n.start||!n.end)return;const g=[];for(let k=n.start.row;k<=n.end.row;k++)for(let x=n.start.col;x<=n.end.col;x++)g.push({coord:{row:k,col:x},value:""});g.length>0&&e(g)},[l,e]),u=r.useCallback(n=>{(n.ctrlKey||n.metaKey)&&n.key==="c"&&(n.preventDefault(),i()),(n.ctrlKey||n.metaKey)&&n.key==="v"&&(n.preventDefault(),p()),(n.key==="Backspace"||n.key==="Delete")&&(n.preventDefault(),d())},[i,p,d]);return{handleCopy:i,handlePaste:p,handleKeyDown:u}}function Y(l){if(l.trim()==="")return null;const o=Number(l);return isNaN(o)?null:o}function W(l){if(l.length===0)return null;const o=l.map(Y);if(o.some(f=>f===null))return null;const e=o;if(e.length===1)return{numbers:e,diff:0};const c=e[1]-e[0];for(let f=2;f<e.length;f++)if(e[f]-e[f-1]!==c)return{numbers:e,diff:0};return{numbers:e,diff:c}}function O({selection:l,getValue:o,setValues:e}){const[c,f]=r.useState(null),[S,i]=r.useState([]),[p,d]=r.useState(!1),[u,n]=r.useState(null),g=r.useCallback(h=>{f(h),d(!0),i([]),n(null)},[]),k=r.useCallback(h=>{if(!p||!l.start)return;const C=j(l);if(!C.start||!C.end)return;n(h);const w={row:Math.min(C.start.row,h.row),col:Math.min(C.start.col,h.col)},a={row:Math.max(C.end.row,h.row),col:Math.max(C.end.col,h.col)},v=[];for(let E=w.row;E<=a.row;E++)for(let s=w.col;s<=a.col;s++)E>=C.start.row&&E<=C.end.row&&s>=C.start.col&&s<=C.end.col||v.push({row:E,col:s});i(v)},[p,l]),x=r.useCallback(()=>{if(!l.start||S.length===0||!u){f(null),i([]),d(!1),n(null);return}const h=j(l);if(!h.start||!h.end){f(null),i([]),d(!1),n(null);return}const C=[],w=h.start,a=h.end,v=a.row-w.row+1,E=a.col-w.col+1;S.forEach(s=>{let G,z;if(s.row<w.row){const T=w.row-s.row;G=a.row-(T-1)%v}else if(s.row>a.row){const T=s.row-a.row;G=w.row+(T-1)%v}else G=s.row;if(s.col<w.col){const T=w.col-s.col;z=a.col-(T-1)%E}else if(s.col>a.col){const T=s.col-a.col;z=w.col+(T-1)%E}else z=s.col;let R=o({row:G,col:z});if(s.row!==G&&s.col>=w.col&&s.col<=a.col){const T=[];for(let M=w.row;M<=a.row;M++)T.push(o({row:M,col:s.col}));const F=W(T);if(F&&F.diff!==0){if(s.row>a.row){const M=s.row-a.row;R=String(F.numbers[F.numbers.length-1]+F.diff*M)}else if(s.row<w.row){const M=w.row-s.row;R=String(F.numbers[0]-F.diff*M)}}}if(s.col!==z&&s.row>=w.row&&s.row<=a.row){const T=[];for(let M=w.col;M<=a.col;M++)T.push(o({row:s.row,col:M}));const F=W(T);if(F&&F.diff!==0){if(s.col>a.col){const M=s.col-a.col;R=String(F.numbers[F.numbers.length-1]+F.diff*M)}else if(s.col<w.col){const M=w.col-s.col;R=String(F.numbers[0]-F.diff*M)}}}C.push({coord:s,value:R})}),C.length>0&&e(C),f(null),i([]),d(!1),n(null)},[l,S,u,o,e]),D=r.useCallback(h=>S.some(C=>C.row===h.row&&C.col===h.col),[S]);return r.useEffect(()=>{const h=()=>{p&&x()};return window.addEventListener("mouseup",h),()=>window.removeEventListener("mouseup",h)},[p,x]),{fillSource:c,fillTargets:S,isDraggingFill:p,isFillTarget:D,handleFillHandleMouseDown:g,handleCellMouseEnterForFill:k,handleFillMouseUp:x}}const Z={position:"relative",border:"1px solid #d1d5db",padding:0},ll={width:"100%",height:"100%",paddingLeft:"4px",paddingRight:"4px",paddingTop:"4px",paddingBottom:"4px",textAlign:"right",fontSize:"12px",backgroundColor:"transparent",outline:"none",cursor:"cell"},ol={position:"absolute",bottom:"-2px",right:"-2px",width:"8px",height:"8px",cursor:"crosshair",zIndex:20,backgroundColor:"#3b82f6"},el={backgroundColor:"#dbeafe",outline:"2px solid #3b82f6",outlineOffset:"-2px"},nl={backgroundColor:"#eff6ff"};function $({coord:l,value:o,isSelected:e,isFillTarget:c,showFillHandle:f,onMouseDown:S,onMouseEnter:i,onChange:p,onFillHandleMouseDown:d,styles:u}){const n=a=>{p(l,a.target.value)},g=a=>{a.target.classList.contains("fill-handle")||S(l)},k=a=>{a.stopPropagation(),a.preventDefault(),d(l)},x=!!u?.selected,D=!!u?.fillTarget,h=!!u?.fillHandle,C={...Z,...e&&!x?el:{},...c&&!D?nl:{}},w={...ol,...h?{backgroundColor:void 0}:{}};return y.jsxs("td",{className:L(u?.cell,e&&u?.selected,c&&u?.fillTarget),style:C,onMouseDown:g,onMouseEnter:()=>i(l),children:[y.jsx("input",{type:"text",value:o,onChange:n,style:ll}),f&&y.jsx("div",{className:L("fill-handle",u?.fillHandle),style:w,onMouseDown:k})]})}const tl={outline:"none",overflowX:"auto"},sl={borderCollapse:"collapse",fontSize:"12px",userSelect:"none"},rl={position:"sticky",left:0,zIndex:10,border:"1px solid #d1d5db",padding:"6px 8px",textAlign:"center",fontWeight:500},cl={border:"1px solid #d1d5db",padding:"6px 4px",textAlign:"center",fontWeight:500},il={border:"1px solid #d1d5db",padding:"4px",textAlign:"center",fontWeight:500,fontSize:"11px"},al={backgroundColor:"#f3f4f6"},ul={backgroundColor:"#dbeafe",color:"#1d4ed8"},fl={backgroundColor:"#f9fafb"};function dl({data:l,onChange:o,rowHeaders:e,colHeaders:c,className:f,rowHeaderTitle:S="",styles:i}){const p=r.useRef(null),d=l.length,u=r.useMemo(()=>c?c.reduce((t,b)=>t+b.headers.length,0):l[0]?.length??0,[c,l]),n=r.useMemo(()=>c?c.flatMap(t=>t.headers):[],[c]),g=r.useCallback(t=>t.row<0||t.row>=d||t.col<0||t.col>=u?"":l[t.row]?.[t.col]??"",[l,d,u]),k=r.useCallback((t,b)=>{const N=l.map((B,K)=>K===t.row?B.map((H,I)=>I===t.col?b:H):B);o(N)},[l,o]),x=r.useCallback(t=>{if(t.length===0)return;const b=l.map(N=>[...N]);t.forEach(({coord:N,value:B})=>{N.row>=0&&N.row<d&&N.col>=0&&N.col<u&&(b[N.row][N.col]=B)}),o(b)},[l,o,d,u]),{selection:D,isSelecting:h,isCellSelected:C,handleCellMouseDown:w,handleCellMouseEnter:a}=V(),{handleKeyDown:v}=P({selection:D,getValue:g,setValues:x,rowCount:d,colCount:u}),{isDraggingFill:E,isFillTarget:s,handleFillHandleMouseDown:G,handleCellMouseEnterForFill:z}=O({selection:D,getValue:g,setValues:x}),R=r.useCallback(t=>{E?z(t):h&&a(t)},[E,h,z,a]),T=r.useCallback((t,b)=>{k(t,b)},[k]),F=r.useCallback(t=>{if(!D.start)return!1;const b=j(D);return!b.start||!b.end?!1:t.row===b.end.row&&t.col===b.end.col},[D]),M=t=>({...rl,...!t&&!i?.rowHeader?al:{}}),pl=t=>({...cl,...!t&&!i?.colGroup?ul:{}}),ml=t=>({...il,...!t&&!i?.colHeader?fl:{}});return y.jsx("div",{ref:p,className:f,style:tl,tabIndex:0,onKeyDown:v,children:y.jsxs("table",{style:sl,children:[y.jsxs("thead",{children:[c&&y.jsxs("tr",{children:[e&&y.jsx("th",{className:i?.rowHeader,style:M(),children:S}),c.map((t,b)=>y.jsx("th",{colSpan:t.headers.length,className:L(i?.colGroup,t.className),style:pl(t.className),children:t.label},b))]}),c&&y.jsxs("tr",{children:[e&&y.jsx("th",{className:i?.rowHeader,style:M()}),n.map(t=>y.jsx("th",{className:L(i?.colHeader,t.className),style:ml(t.className),title:t.description,children:t.label},t.key))]})]}),y.jsx("tbody",{children:l.map((t,b)=>y.jsxs("tr",{children:[e&&e[b]&&y.jsx("td",{className:L(i?.rowHeader,e[b].className),style:M(e[b].className),title:e[b].description,children:e[b].label}),t.map((N,B)=>{const K={row:b,col:B},H=C(K),I=s(K),Cl=F(K);return y.jsx($,{coord:K,value:g(K),isSelected:H,isFillTarget:I,showFillHandle:Cl&&!E,onMouseDown:w,onMouseEnter:R,onChange:T,onFillHandleMouseDown:G,styles:i},B)})]},b))})]})})}function wl(l){const o=typeof l=="string"?parseFloat(l.replace(/,/g,"")):l;return isNaN(o)?"0":new Intl.NumberFormat("ko-KR").format(o)}function hl(l){const o=parseInt(l.replace(/,/g,""),10);return isNaN(o)?0:o}m.ExcelGrid=dl,m.GridCell=$,m.cn=L,m.coordToKey=J,m.formatCurrency=wl,m.getCellsInRange=_,m.getFillTargetCells=Q,m.isCellInRange=q,m.keyToCoord=X,m.normalizeRange=j,m.parseCurrency=hl,m.parseTSV=A,m.toTSV=U,m.useGridClipboard=P,m.useGridDragFill=O,m.useGridSelection=V,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/types.d.ts
CHANGED
|
@@ -43,21 +43,22 @@ export interface RowHeaderGroup {
|
|
|
43
43
|
}
|
|
44
44
|
/**
|
|
45
45
|
* Grid styles configuration
|
|
46
|
+
* All values are CSS class strings (e.g., Tailwind classes, CSS modules, or plain CSS classes)
|
|
46
47
|
*/
|
|
47
48
|
export interface GridStyles {
|
|
48
|
-
/**
|
|
49
|
+
/** CSS class for data cells */
|
|
49
50
|
cell?: string;
|
|
50
|
-
/**
|
|
51
|
+
/** CSS class for selected cells (overrides default blue selection style) */
|
|
51
52
|
selected?: string;
|
|
52
|
-
/**
|
|
53
|
+
/** CSS class for fill target cells when dragging fill handle (overrides default light blue) */
|
|
53
54
|
fillTarget?: string;
|
|
54
|
-
/**
|
|
55
|
+
/** CSS class for fill handle at bottom-right corner (overrides default blue square) */
|
|
55
56
|
fillHandle?: string;
|
|
56
|
-
/**
|
|
57
|
+
/** CSS class for column group headers */
|
|
57
58
|
colGroup?: string;
|
|
58
|
-
/**
|
|
59
|
+
/** CSS class for individual column headers */
|
|
59
60
|
colHeader?: string;
|
|
60
|
-
/**
|
|
61
|
+
/** CSS class for row headers */
|
|
61
62
|
rowHeader?: string;
|
|
62
63
|
}
|
|
63
64
|
/**
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,GAAG,EAAE,SAAS,GAAG,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,GAAG,EAAE,SAAS,GAAG,IAAI,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,SAAS,EAAE,CAAC;IACrB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+FAA+F;IAC/F,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uFAAuF;IACvF,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,2BAA2B;IAC3B,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC;IACjB,2BAA2B;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,KAAK,IAAI,CAAC;IACrC,mDAAmD;IACnD,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;IAC9B,sCAAsC;IACtC,UAAU,CAAC,EAAE,cAAc,EAAE,CAAC;IAC9B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACxC,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,qBAAqB,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,kBAAkB;IAClB,MAAM,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,YAAY,CAAC,CAAC;CAC9E"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-excel-lite",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.7",
|
|
4
4
|
"description": "A lightweight, Excel-like editable grid component for React with cell selection, copy/paste, auto-fill with arithmetic sequence detection, and customizable styling.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -26,13 +26,9 @@
|
|
|
26
26
|
"react-dom": ">=18.0.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@tailwindcss/postcss": "^4.1.18",
|
|
30
29
|
"@vitejs/plugin-react": "^5.1.1",
|
|
31
|
-
"postcss": "^8.5.6",
|
|
32
|
-
"tailwindcss": "^4.1.18",
|
|
33
30
|
"typescript": "~5.9.3",
|
|
34
31
|
"vite": "^7.2.4",
|
|
35
|
-
"vite-plugin-css-injected-by-js": "^3.5.2",
|
|
36
32
|
"vite-plugin-dts": "^4.5.4"
|
|
37
33
|
}
|
|
38
34
|
}
|