@aiquants/directory-tree 1.16.0 → 2.0.0
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 +35 -11
- package/dist/directory-tree.css +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.js +429 -404
- package/dist/src/DirectoryTree.d.ts +1 -1
- package/dist/src/DirectoryTree.d.ts.map +1 -1
- package/dist/src/index.d.ts +1 -1
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/types.d.ts +63 -9
- package/dist/src/types.d.ts.map +1 -1
- package/dist/styles/directory-tree.css +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { VirtualScroll as
|
|
3
|
-
import { FolderIcon as
|
|
4
|
-
import { FileIcon as
|
|
5
|
-
import { twMerge as
|
|
6
|
-
var ye = { exports: {} },
|
|
7
|
-
var
|
|
8
|
-
function
|
|
9
|
-
if (
|
|
10
|
-
|
|
1
|
+
import Ye, { memo as je, useRef as ae, useCallback as M, useEffect as J, useState as Z, useMemo as oe, Fragment as Be, useTransition as He } from "react";
|
|
2
|
+
import { VirtualScroll as We } from "@aiquants/virtualscroll";
|
|
3
|
+
import { FolderIcon as Xe, DocumentTextIcon as Ve, ChevronDownIcon as Je, ChevronRightIcon as Ge } from "@heroicons/react/24/solid";
|
|
4
|
+
import { FileIcon as ze } from "@phosphor-icons/react";
|
|
5
|
+
import { twMerge as A } from "tailwind-merge";
|
|
6
|
+
var ye = { exports: {} }, ue = {};
|
|
7
|
+
var Te;
|
|
8
|
+
function Ue() {
|
|
9
|
+
if (Te) return ue;
|
|
10
|
+
Te = 1;
|
|
11
11
|
var e = /* @__PURE__ */ Symbol.for("react.transitional.element"), r = /* @__PURE__ */ Symbol.for("react.fragment");
|
|
12
12
|
function o(l, n, a) {
|
|
13
13
|
var i = null;
|
|
@@ -24,29 +24,29 @@ function ze() {
|
|
|
24
24
|
props: a
|
|
25
25
|
};
|
|
26
26
|
}
|
|
27
|
-
return
|
|
27
|
+
return ue.Fragment = r, ue.jsx = o, ue.jsxs = o, ue;
|
|
28
28
|
}
|
|
29
|
-
var
|
|
29
|
+
var de = {};
|
|
30
30
|
var Pe;
|
|
31
|
-
function
|
|
31
|
+
function qe() {
|
|
32
32
|
return Pe || (Pe = 1, process.env.NODE_ENV !== "production" && (function() {
|
|
33
33
|
function e(t) {
|
|
34
34
|
if (t == null) return null;
|
|
35
35
|
if (typeof t == "function")
|
|
36
|
-
return t.$$typeof ===
|
|
36
|
+
return t.$$typeof === C ? null : t.displayName || t.name || null;
|
|
37
37
|
if (typeof t == "string") return t;
|
|
38
38
|
switch (t) {
|
|
39
39
|
case s:
|
|
40
40
|
return "Fragment";
|
|
41
|
-
case
|
|
41
|
+
case w:
|
|
42
42
|
return "Profiler";
|
|
43
|
-
case
|
|
43
|
+
case f:
|
|
44
44
|
return "StrictMode";
|
|
45
|
-
case
|
|
45
|
+
case L:
|
|
46
46
|
return "Suspense";
|
|
47
|
-
case
|
|
47
|
+
case Y:
|
|
48
48
|
return "SuspenseList";
|
|
49
|
-
case
|
|
49
|
+
case j:
|
|
50
50
|
return "Activity";
|
|
51
51
|
}
|
|
52
52
|
if (typeof t == "object")
|
|
@@ -55,19 +55,19 @@ function Ue() {
|
|
|
55
55
|
), t.$$typeof) {
|
|
56
56
|
case u:
|
|
57
57
|
return "Portal";
|
|
58
|
-
case
|
|
58
|
+
case S:
|
|
59
59
|
return t.displayName || "Context";
|
|
60
|
-
case
|
|
60
|
+
case R:
|
|
61
61
|
return (t._context.displayName || "Context") + ".Consumer";
|
|
62
62
|
case d:
|
|
63
|
-
var
|
|
64
|
-
return t = t.displayName, t || (t =
|
|
63
|
+
var h = t.render;
|
|
64
|
+
return t = t.displayName, t || (t = h.displayName || h.name || "", t = t !== "" ? "ForwardRef(" + t + ")" : "ForwardRef"), t;
|
|
65
|
+
case E:
|
|
66
|
+
return h = t.displayName || null, h !== null ? h : e(t.type) || "Memo";
|
|
65
67
|
case N:
|
|
66
|
-
|
|
67
|
-
case O:
|
|
68
|
-
f = t._payload, t = t._init;
|
|
68
|
+
h = t._payload, t = t._init;
|
|
69
69
|
try {
|
|
70
|
-
return e(t(
|
|
70
|
+
return e(t(h));
|
|
71
71
|
} catch {
|
|
72
72
|
}
|
|
73
73
|
}
|
|
@@ -79,27 +79,27 @@ function Ue() {
|
|
|
79
79
|
function o(t) {
|
|
80
80
|
try {
|
|
81
81
|
r(t);
|
|
82
|
-
var
|
|
82
|
+
var h = !1;
|
|
83
83
|
} catch {
|
|
84
|
-
|
|
84
|
+
h = !0;
|
|
85
85
|
}
|
|
86
|
-
if (
|
|
87
|
-
|
|
88
|
-
var
|
|
89
|
-
return
|
|
90
|
-
|
|
86
|
+
if (h) {
|
|
87
|
+
h = console;
|
|
88
|
+
var p = h.error, k = typeof Symbol == "function" && Symbol.toStringTag && t[Symbol.toStringTag] || t.constructor.name || "Object";
|
|
89
|
+
return p.call(
|
|
90
|
+
h,
|
|
91
91
|
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
92
|
-
|
|
92
|
+
k
|
|
93
93
|
), r(t);
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
function l(t) {
|
|
97
97
|
if (t === s) return "<>";
|
|
98
|
-
if (typeof t == "object" && t !== null && t.$$typeof ===
|
|
98
|
+
if (typeof t == "object" && t !== null && t.$$typeof === N)
|
|
99
99
|
return "<...>";
|
|
100
100
|
try {
|
|
101
|
-
var
|
|
102
|
-
return
|
|
101
|
+
var h = e(t);
|
|
102
|
+
return h ? "<" + h + ">" : "<...>";
|
|
103
103
|
} catch {
|
|
104
104
|
return "<...>";
|
|
105
105
|
}
|
|
@@ -112,41 +112,41 @@ function Ue() {
|
|
|
112
112
|
return Error("react-stack-top-frame");
|
|
113
113
|
}
|
|
114
114
|
function i(t) {
|
|
115
|
-
if (
|
|
116
|
-
var
|
|
117
|
-
if (
|
|
115
|
+
if (W.call(t, "key")) {
|
|
116
|
+
var h = Object.getOwnPropertyDescriptor(t, "key").get;
|
|
117
|
+
if (h && h.isReactWarning) return !1;
|
|
118
118
|
}
|
|
119
119
|
return t.key !== void 0;
|
|
120
120
|
}
|
|
121
|
-
function m(t,
|
|
122
|
-
function
|
|
123
|
-
|
|
121
|
+
function m(t, h) {
|
|
122
|
+
function p() {
|
|
123
|
+
Q || (Q = !0, console.error(
|
|
124
124
|
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
125
|
-
|
|
125
|
+
h
|
|
126
126
|
));
|
|
127
127
|
}
|
|
128
|
-
|
|
129
|
-
get:
|
|
128
|
+
p.isReactWarning = !0, Object.defineProperty(t, "key", {
|
|
129
|
+
get: p,
|
|
130
130
|
configurable: !0
|
|
131
131
|
});
|
|
132
132
|
}
|
|
133
|
-
function
|
|
133
|
+
function I() {
|
|
134
134
|
var t = e(this.type);
|
|
135
|
-
return
|
|
135
|
+
return X[t] || (X[t] = !0, console.error(
|
|
136
136
|
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
137
137
|
)), t = this.props.ref, t !== void 0 ? t : null;
|
|
138
138
|
}
|
|
139
|
-
function y(t,
|
|
140
|
-
var
|
|
139
|
+
function y(t, h, p, k, te, le) {
|
|
140
|
+
var x = p.ref;
|
|
141
141
|
return t = {
|
|
142
|
-
$$typeof:
|
|
142
|
+
$$typeof: _,
|
|
143
143
|
type: t,
|
|
144
|
-
key:
|
|
145
|
-
props:
|
|
146
|
-
_owner:
|
|
147
|
-
}, (
|
|
144
|
+
key: h,
|
|
145
|
+
props: p,
|
|
146
|
+
_owner: k
|
|
147
|
+
}, (x !== void 0 ? x : null) !== null ? Object.defineProperty(t, "ref", {
|
|
148
148
|
enumerable: !1,
|
|
149
|
-
get:
|
|
149
|
+
get: I
|
|
150
150
|
}) : Object.defineProperty(t, "ref", { enumerable: !1, value: null }), t._store = {}, Object.defineProperty(t._store, "validated", {
|
|
151
151
|
configurable: !1,
|
|
152
152
|
enumerable: !1,
|
|
@@ -161,69 +161,69 @@ function Ue() {
|
|
|
161
161
|
configurable: !1,
|
|
162
162
|
enumerable: !1,
|
|
163
163
|
writable: !0,
|
|
164
|
-
value:
|
|
164
|
+
value: te
|
|
165
165
|
}), Object.defineProperty(t, "_debugTask", {
|
|
166
166
|
configurable: !1,
|
|
167
167
|
enumerable: !1,
|
|
168
168
|
writable: !0,
|
|
169
|
-
value:
|
|
169
|
+
value: le
|
|
170
170
|
}), Object.freeze && (Object.freeze(t.props), Object.freeze(t)), t;
|
|
171
171
|
}
|
|
172
|
-
function c(t,
|
|
173
|
-
var
|
|
174
|
-
if (
|
|
175
|
-
if (
|
|
176
|
-
if (
|
|
177
|
-
for (
|
|
178
|
-
|
|
179
|
-
Object.freeze && Object.freeze(
|
|
172
|
+
function c(t, h, p, k, te, le) {
|
|
173
|
+
var x = h.children;
|
|
174
|
+
if (x !== void 0)
|
|
175
|
+
if (k)
|
|
176
|
+
if (D(x)) {
|
|
177
|
+
for (k = 0; k < x.length; k++)
|
|
178
|
+
v(x[k]);
|
|
179
|
+
Object.freeze && Object.freeze(x);
|
|
180
180
|
} else
|
|
181
181
|
console.error(
|
|
182
182
|
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
183
183
|
);
|
|
184
|
-
else
|
|
185
|
-
if (
|
|
186
|
-
|
|
187
|
-
var
|
|
188
|
-
return
|
|
184
|
+
else v(x);
|
|
185
|
+
if (W.call(h, "key")) {
|
|
186
|
+
x = e(t);
|
|
187
|
+
var V = Object.keys(h).filter(function(re) {
|
|
188
|
+
return re !== "key";
|
|
189
189
|
});
|
|
190
|
-
|
|
190
|
+
k = 0 < V.length ? "{key: someKey, " + V.join(": ..., ") + ": ...}" : "{key: someKey}", G[x + k] || (V = 0 < V.length ? "{" + V.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
191
191
|
`A props object containing a "key" prop is being spread into JSX:
|
|
192
192
|
let props = %s;
|
|
193
193
|
<%s {...props} />
|
|
194
194
|
React keys must be passed directly to JSX without using spread:
|
|
195
195
|
let props = %s;
|
|
196
196
|
<%s key={someKey} {...props} />`,
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
),
|
|
197
|
+
k,
|
|
198
|
+
x,
|
|
199
|
+
V,
|
|
200
|
+
x
|
|
201
|
+
), G[x + k] = !0);
|
|
202
202
|
}
|
|
203
|
-
if (
|
|
204
|
-
|
|
205
|
-
for (var
|
|
206
|
-
|
|
207
|
-
} else
|
|
208
|
-
return
|
|
209
|
-
|
|
203
|
+
if (x = null, p !== void 0 && (o(p), x = "" + p), i(h) && (o(h.key), x = "" + h.key), "key" in h) {
|
|
204
|
+
p = {};
|
|
205
|
+
for (var ie in h)
|
|
206
|
+
ie !== "key" && (p[ie] = h[ie]);
|
|
207
|
+
} else p = h;
|
|
208
|
+
return x && m(
|
|
209
|
+
p,
|
|
210
210
|
typeof t == "function" ? t.displayName || t.name || "Unknown" : t
|
|
211
211
|
), y(
|
|
212
212
|
t,
|
|
213
|
-
|
|
214
|
-
|
|
213
|
+
x,
|
|
214
|
+
p,
|
|
215
215
|
n(),
|
|
216
|
-
|
|
217
|
-
|
|
216
|
+
te,
|
|
217
|
+
le
|
|
218
218
|
);
|
|
219
219
|
}
|
|
220
|
-
function
|
|
221
|
-
|
|
220
|
+
function v(t) {
|
|
221
|
+
b(t) ? t._store && (t._store.validated = 1) : typeof t == "object" && t !== null && t.$$typeof === N && (t._payload.status === "fulfilled" ? b(t._payload.value) && t._payload.value._store && (t._payload.value._store.validated = 1) : t._store && (t._store.validated = 1));
|
|
222
222
|
}
|
|
223
|
-
function
|
|
224
|
-
return typeof t == "object" && t !== null && t.$$typeof ===
|
|
223
|
+
function b(t) {
|
|
224
|
+
return typeof t == "object" && t !== null && t.$$typeof === _;
|
|
225
225
|
}
|
|
226
|
-
var g =
|
|
226
|
+
var g = Ye, _ = /* @__PURE__ */ Symbol.for("react.transitional.element"), u = /* @__PURE__ */ Symbol.for("react.portal"), s = /* @__PURE__ */ Symbol.for("react.fragment"), f = /* @__PURE__ */ Symbol.for("react.strict_mode"), w = /* @__PURE__ */ Symbol.for("react.profiler"), R = /* @__PURE__ */ Symbol.for("react.consumer"), S = /* @__PURE__ */ Symbol.for("react.context"), d = /* @__PURE__ */ Symbol.for("react.forward_ref"), L = /* @__PURE__ */ Symbol.for("react.suspense"), Y = /* @__PURE__ */ Symbol.for("react.suspense_list"), E = /* @__PURE__ */ Symbol.for("react.memo"), N = /* @__PURE__ */ Symbol.for("react.lazy"), j = /* @__PURE__ */ Symbol.for("react.activity"), C = /* @__PURE__ */ Symbol.for("react.client.reference"), H = g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, W = Object.prototype.hasOwnProperty, D = Array.isArray, B = console.createTask ? console.createTask : function() {
|
|
227
227
|
return null;
|
|
228
228
|
};
|
|
229
229
|
g = {
|
|
@@ -231,39 +231,39 @@ React keys must be passed directly to JSX without using spread:
|
|
|
231
231
|
return t();
|
|
232
232
|
}
|
|
233
233
|
};
|
|
234
|
-
var
|
|
234
|
+
var Q, X = {}, K = g.react_stack_bottom_frame.bind(
|
|
235
235
|
g,
|
|
236
236
|
a
|
|
237
|
-
)(),
|
|
238
|
-
|
|
239
|
-
var
|
|
237
|
+
)(), ee = B(l(a)), G = {};
|
|
238
|
+
de.Fragment = s, de.jsx = function(t, h, p) {
|
|
239
|
+
var k = 1e4 > H.recentlyCreatedOwnerStacks++;
|
|
240
240
|
return c(
|
|
241
241
|
t,
|
|
242
|
-
|
|
243
|
-
|
|
242
|
+
h,
|
|
243
|
+
p,
|
|
244
244
|
!1,
|
|
245
|
-
|
|
246
|
-
|
|
245
|
+
k ? Error("react-stack-top-frame") : K,
|
|
246
|
+
k ? B(l(t)) : ee
|
|
247
247
|
);
|
|
248
|
-
},
|
|
249
|
-
var
|
|
248
|
+
}, de.jsxs = function(t, h, p) {
|
|
249
|
+
var k = 1e4 > H.recentlyCreatedOwnerStacks++;
|
|
250
250
|
return c(
|
|
251
251
|
t,
|
|
252
|
-
|
|
253
|
-
|
|
252
|
+
h,
|
|
253
|
+
p,
|
|
254
254
|
!0,
|
|
255
|
-
|
|
256
|
-
|
|
255
|
+
k ? Error("react-stack-top-frame") : K,
|
|
256
|
+
k ? B(l(t)) : ee
|
|
257
257
|
);
|
|
258
258
|
};
|
|
259
|
-
})()),
|
|
259
|
+
})()), de;
|
|
260
260
|
}
|
|
261
|
-
var
|
|
262
|
-
function
|
|
263
|
-
return
|
|
261
|
+
var Ne;
|
|
262
|
+
function Ze() {
|
|
263
|
+
return Ne || (Ne = 1, process.env.NODE_ENV === "production" ? ye.exports = Ue() : ye.exports = qe()), ye.exports;
|
|
264
264
|
}
|
|
265
|
-
var
|
|
266
|
-
const
|
|
265
|
+
var P = Ze();
|
|
266
|
+
const Qe = (e, r, o) => {
|
|
267
267
|
const l = [];
|
|
268
268
|
for (let n = r; n < o; n++) {
|
|
269
269
|
const a = e[n];
|
|
@@ -272,7 +272,7 @@ const Ze = (e, r, o) => {
|
|
|
272
272
|
l.push(i);
|
|
273
273
|
}
|
|
274
274
|
return l;
|
|
275
|
-
},
|
|
275
|
+
}, Ke = (e, r, o) => {
|
|
276
276
|
const l = [];
|
|
277
277
|
for (let n = r; n < o; n++) {
|
|
278
278
|
const a = e[n];
|
|
@@ -281,17 +281,17 @@ const Ze = (e, r, o) => {
|
|
|
281
281
|
l.push(i);
|
|
282
282
|
}
|
|
283
283
|
return l;
|
|
284
|
-
},
|
|
284
|
+
}, et = (e, r, o, l) => {
|
|
285
285
|
const n = Math.max(1, Math.floor(r * l)), a = Math.max(1, Math.floor(o * l));
|
|
286
286
|
(e.width !== n || e.height !== a) && (e.width = n, e.height = a);
|
|
287
287
|
const i = e.style;
|
|
288
288
|
i.width !== `${r}px` && (i.width = `${r}px`), i.height !== `${o}px` && (i.height = `${o}px`);
|
|
289
|
-
},
|
|
289
|
+
}, tt = (e, r, o) => {
|
|
290
290
|
e.lineWidth = o, e.beginPath();
|
|
291
291
|
for (const l of r)
|
|
292
292
|
e.moveTo(l.x1, l.y1), e.lineTo(l.x2, l.y2);
|
|
293
293
|
e.stroke();
|
|
294
|
-
},
|
|
294
|
+
}, rt = (e, r) => {
|
|
295
295
|
const o = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e.trim());
|
|
296
296
|
if (!o)
|
|
297
297
|
return null;
|
|
@@ -299,18 +299,18 @@ const Ze = (e, r, o) => {
|
|
|
299
299
|
l.length === 3 && (l = l.split("").map((m) => m + m).join(""));
|
|
300
300
|
const n = Number.parseInt(l.slice(0, 2), 16), a = Number.parseInt(l.slice(2, 4), 16), i = Number.parseInt(l.slice(4, 6), 16);
|
|
301
301
|
return `rgba(${n}, ${a}, ${i}, ${r})`;
|
|
302
|
-
},
|
|
302
|
+
}, nt = (e, r, o, l) => {
|
|
303
303
|
if (r.length === 0)
|
|
304
304
|
return;
|
|
305
|
-
const n =
|
|
305
|
+
const n = rt(o, 0.14), a = e.strokeStyle, i = e.fillStyle, m = e.lineWidth, I = e.lineCap, y = e.lineJoin;
|
|
306
306
|
e.strokeStyle = o, e.lineCap = "round", e.lineJoin = "round";
|
|
307
307
|
for (const c of r) {
|
|
308
|
-
const
|
|
309
|
-
n && (e.fillStyle = n, e.beginPath(), e.arc(c.centerX, c.centerY, u, 0, Math.PI * 2), e.fill()), e.lineWidth = g, e.beginPath(), e.arc(c.centerX, c.centerY, Math.max(0,
|
|
308
|
+
const v = l ?? c.size, b = Math.max(0, v / 2), g = Math.max(1, Math.round(v * 0.08)), _ = Math.max(1, Math.round(v * 0.14)), u = Math.max(0, b - g * 0.8), s = Math.max(0, u * 0.55);
|
|
309
|
+
n && (e.fillStyle = n, e.beginPath(), e.arc(c.centerX, c.centerY, u, 0, Math.PI * 2), e.fill()), e.lineWidth = g, e.beginPath(), e.arc(c.centerX, c.centerY, Math.max(0, b - g * 0.3), 0, Math.PI * 2), e.stroke(), e.lineWidth = _, e.beginPath(), e.moveTo(c.centerX - s, c.centerY), e.lineTo(c.centerX + s, c.centerY), e.stroke(), c.isExpanded || (e.beginPath(), e.moveTo(c.centerX, c.centerY - s), e.lineTo(c.centerX, c.centerY + s), e.stroke());
|
|
310
310
|
}
|
|
311
|
-
e.strokeStyle = a, e.fillStyle = i, e.lineWidth = m, e.lineCap =
|
|
312
|
-
},
|
|
313
|
-
const
|
|
311
|
+
e.strokeStyle = a, e.fillStyle = i, e.lineWidth = m, e.lineCap = I, e.lineJoin = y;
|
|
312
|
+
}, Me = je(({ segmentsByItem: e, glyphsByItem: r, itemHeight: o, width: l, viewportHeight: n, scrollPosition: a, color: i = "#a0aec0", strokeWidth: m = 1, renderStartIndex: I, renderEndIndex: y, lookaheadEndIndex: c, devicePixelRatio: v, expandGlyphColor: b, expandGlyphSize: g }) => {
|
|
313
|
+
const _ = ae(null), u = ae(null), s = ae({
|
|
314
314
|
segmentsByItem: e,
|
|
315
315
|
glyphsByItem: r,
|
|
316
316
|
itemHeight: o,
|
|
@@ -319,45 +319,45 @@ const Ze = (e, r, o) => {
|
|
|
319
319
|
scrollPosition: a,
|
|
320
320
|
color: i,
|
|
321
321
|
strokeWidth: m,
|
|
322
|
-
renderStartIndex:
|
|
322
|
+
renderStartIndex: I,
|
|
323
323
|
renderEndIndex: y,
|
|
324
324
|
lookaheadEndIndex: c,
|
|
325
|
-
devicePixelRatio:
|
|
326
|
-
expandGlyphColor:
|
|
325
|
+
devicePixelRatio: v,
|
|
326
|
+
expandGlyphColor: b,
|
|
327
327
|
expandGlyphSize: g
|
|
328
|
-
}),
|
|
328
|
+
}), f = M(() => {
|
|
329
329
|
u.current = null;
|
|
330
|
-
const
|
|
331
|
-
if (!
|
|
330
|
+
const R = _.current;
|
|
331
|
+
if (!R)
|
|
332
332
|
return;
|
|
333
|
-
const
|
|
334
|
-
if (!
|
|
333
|
+
const S = R.getContext("2d");
|
|
334
|
+
if (!S)
|
|
335
335
|
return;
|
|
336
336
|
const d = s.current;
|
|
337
337
|
if (d.width <= 0 || d.viewportHeight <= 0) {
|
|
338
|
-
|
|
338
|
+
S.clearRect(0, 0, R.width, R.height);
|
|
339
339
|
return;
|
|
340
340
|
}
|
|
341
|
-
const
|
|
342
|
-
|
|
343
|
-
const
|
|
341
|
+
const L = Number.isFinite(d.devicePixelRatio ?? NaN) ? d.devicePixelRatio : typeof window < "u" && window.devicePixelRatio || 1;
|
|
342
|
+
et(R, d.width, d.viewportHeight, L);
|
|
343
|
+
const Y = d.segmentsByItem.length, E = typeof d.renderStartIndex == "number" && Number.isFinite(d.renderStartIndex) ? Math.max(0, Math.floor(d.renderStartIndex)) : Math.max(0, Math.floor(d.scrollPosition / d.itemHeight)), N = Math.min(Y, Math.ceil((d.scrollPosition + d.viewportHeight) / d.itemHeight)), j = (() => {
|
|
344
344
|
if (typeof d.renderEndIndex == "number" && Number.isFinite(d.renderEndIndex)) {
|
|
345
|
-
const
|
|
346
|
-
return Math.max(Math.min(
|
|
345
|
+
const D = Math.floor(d.renderEndIndex);
|
|
346
|
+
return Math.max(Math.min(Y, D + 1), E);
|
|
347
347
|
}
|
|
348
|
-
return Math.max(
|
|
349
|
-
})(),
|
|
348
|
+
return Math.max(N, E);
|
|
349
|
+
})(), C = (() => {
|
|
350
350
|
if (typeof d.lookaheadEndIndex == "number" && Number.isFinite(d.lookaheadEndIndex)) {
|
|
351
|
-
const
|
|
352
|
-
return Math.max(
|
|
351
|
+
const D = Math.floor(d.lookaheadEndIndex), B = Math.min(Y, D + 1);
|
|
352
|
+
return Math.max(B, j);
|
|
353
353
|
}
|
|
354
|
-
return Math.max(
|
|
355
|
-
})(), H =
|
|
356
|
-
|
|
357
|
-
}, []),
|
|
358
|
-
u.current === null && (u.current = window.requestAnimationFrame(
|
|
359
|
-
}, [
|
|
360
|
-
return
|
|
354
|
+
return Math.max(N, j);
|
|
355
|
+
})(), H = Qe(d.segmentsByItem, E, C), W = Ke(d.glyphsByItem, E, C);
|
|
356
|
+
S.save(), S.scale(L, L), S.clearRect(0, 0, d.width, d.viewportHeight), S.translate(0, -d.scrollPosition), S.strokeStyle = d.color, tt(S, H, d.strokeWidth), nt(S, W, d.expandGlyphColor ?? d.color, d.expandGlyphSize), S.restore();
|
|
357
|
+
}, []), w = M(() => {
|
|
358
|
+
u.current === null && (u.current = window.requestAnimationFrame(f));
|
|
359
|
+
}, [f]);
|
|
360
|
+
return J(() => {
|
|
361
361
|
s.current = {
|
|
362
362
|
segmentsByItem: e,
|
|
363
363
|
glyphsByItem: r,
|
|
@@ -367,156 +367,156 @@ const Ze = (e, r, o) => {
|
|
|
367
367
|
scrollPosition: a,
|
|
368
368
|
color: i,
|
|
369
369
|
strokeWidth: m,
|
|
370
|
-
renderStartIndex:
|
|
370
|
+
renderStartIndex: I,
|
|
371
371
|
renderEndIndex: y,
|
|
372
372
|
lookaheadEndIndex: c,
|
|
373
|
-
devicePixelRatio:
|
|
374
|
-
expandGlyphColor:
|
|
373
|
+
devicePixelRatio: v,
|
|
374
|
+
expandGlyphColor: b,
|
|
375
375
|
expandGlyphSize: g
|
|
376
|
-
},
|
|
377
|
-
}, [e, r, o, l, n, a, i, m,
|
|
376
|
+
}, w();
|
|
377
|
+
}, [e, r, o, l, n, a, i, m, I, y, c, v, b, g, w]), J(() => () => {
|
|
378
378
|
u.current !== null && (window.cancelAnimationFrame(u.current), u.current = null);
|
|
379
|
-
}, []), /* @__PURE__ */
|
|
379
|
+
}, []), /* @__PURE__ */ P.jsx("canvas", { ref: _, className: "pointer-events-none absolute top-0 left-0 z-0" });
|
|
380
380
|
});
|
|
381
|
-
|
|
382
|
-
const
|
|
381
|
+
Me.displayName = "TreeLineCanvas";
|
|
382
|
+
const $ = {
|
|
383
383
|
container: "directory-tree-container relative h-full transition-opacity duration-300 overflow-y-hidden pb-[5px] pr-[3px]",
|
|
384
384
|
containerPending: "opacity-70",
|
|
385
385
|
entry: "directory-tree-entry flex items-center cursor-pointer relative select-none",
|
|
386
386
|
// ホバー時のスタイル(ライト/ダークモード対応)
|
|
387
|
-
entryHover:
|
|
387
|
+
entryHover: A("directory-tree-entry--hover hover:bg-gray-400/15", "dark:hover:bg-gray-200/10"),
|
|
388
388
|
// 選択時のスタイル(ライト/ダークモード対応)
|
|
389
|
-
entrySelected:
|
|
389
|
+
entrySelected: A("directory-tree-entry--selected bg-blue-400/10", "dark:bg-blue-400/15"),
|
|
390
390
|
// アイテム選択時のスタイル(ライト/ダークモード対応)
|
|
391
|
-
entryItemSelected:
|
|
391
|
+
entryItemSelected: A("directory-tree-entry--item-selected bg-blue-400/20 shadow-[0_0_0_1px_rgba(59,130,246,0.3)]", "dark:bg-blue-400/25 dark:shadow-[0_0_0_1px_rgba(96,165,250,0.4)]"),
|
|
392
392
|
// アイコンのスタイル
|
|
393
|
-
expandIcon:
|
|
394
|
-
expandIconSelected:
|
|
395
|
-
typeIcon:
|
|
396
|
-
typeIconSelected:
|
|
393
|
+
expandIcon: A("directory-tree-expand-icon w-5 h-5 flex-shrink-0 flex items-center justify-center", "text-gray-500", "dark:text-gray-400"),
|
|
394
|
+
expandIconSelected: A("directory-tree-expand-icon--selected text-blue-700", "dark:text-blue-400"),
|
|
395
|
+
typeIcon: A("directory-tree-type-icon w-5 h-5 flex-shrink-0 flex items-center justify-center", "text-gray-500", "dark:text-gray-400"),
|
|
396
|
+
typeIconSelected: A("directory-tree-type-icon--selected text-blue-700", "dark:text-blue-400"),
|
|
397
397
|
// テキストのスタイル
|
|
398
|
-
name:
|
|
398
|
+
name: A("directory-tree-name overflow-hidden text-ellipsis whitespace-nowrap ml-1", "text-gray-700", "dark:text-gray-200"),
|
|
399
399
|
nameDirectory: "directory-tree-name--directory",
|
|
400
|
-
nameSelected:
|
|
401
|
-
},
|
|
400
|
+
nameSelected: A("directory-tree-name--selected text-blue-800 font-medium", "dark:text-blue-300")
|
|
401
|
+
}, ot = {
|
|
402
402
|
msOverflowStyle: "none",
|
|
403
403
|
scrollbarWidth: "none"
|
|
404
|
-
},
|
|
404
|
+
}, at = () => {
|
|
405
405
|
let e = document.getElementById("directory-tree-webkit-scrollbar-hide");
|
|
406
406
|
e || (e = document.createElement("style"), e.id = "directory-tree-webkit-scrollbar-hide", e.textContent = ".directory-tree-container::-webkit-scrollbar { display: none; }", document.head.appendChild(e));
|
|
407
|
-
},
|
|
407
|
+
}, st = (e, r, o, l) => {
|
|
408
408
|
const n = [], a = [];
|
|
409
409
|
let i = 0;
|
|
410
|
-
const m = (
|
|
411
|
-
for (let
|
|
412
|
-
const
|
|
413
|
-
let
|
|
414
|
-
l && (
|
|
415
|
-
id:
|
|
416
|
-
name:
|
|
417
|
-
absolutePath:
|
|
418
|
-
indentLevel:
|
|
410
|
+
const m = (I, y, c) => {
|
|
411
|
+
for (let v = 0; v < I.length; v++) {
|
|
412
|
+
const b = I[v], g = v === I.length - 1, _ = [...c, g], u = b.children !== void 0, s = u && r(b.absolutePath, b.relativePath);
|
|
413
|
+
let f = y, w = _, R = c;
|
|
414
|
+
l && (f = y - 1, w = _.slice(1), R = c.slice(1)), n.push({ entry: b, indentLevel: f, parentIsLast: w }), o && (f > i && (i = f), a.push({
|
|
415
|
+
id: b.absolutePath,
|
|
416
|
+
name: b.name,
|
|
417
|
+
absolutePath: b.absolutePath,
|
|
418
|
+
indentLevel: f,
|
|
419
419
|
isLastChild: g,
|
|
420
420
|
isDirectory: u,
|
|
421
421
|
isExpanded: s,
|
|
422
|
-
ancestorIsLast: [...
|
|
422
|
+
ancestorIsLast: [...R],
|
|
423
423
|
hideLines: l && y === 0
|
|
424
|
-
})), u && s &&
|
|
424
|
+
})), u && s && b.children && m(b.children, y + 1, _);
|
|
425
425
|
}
|
|
426
426
|
};
|
|
427
427
|
return m(e, 0, []), { flatItems: n, lineItems: a, maxIndent: i };
|
|
428
|
-
},
|
|
429
|
-
const a = l?.renderStart ?? Math.max(0, Math.floor(n /
|
|
430
|
-
return { renderStart: a, renderEnd:
|
|
431
|
-
},
|
|
428
|
+
}, lt = (e, r, o, l, n) => {
|
|
429
|
+
const a = l?.renderStart ?? Math.max(0, Math.floor(n / se)), i = r > 0 ? Math.ceil(r / se) + o : o, m = e > 0 ? Math.min(e - 1, a + i) : a, I = l?.renderEnd ?? m, y = e > 0 ? Math.min(e - 1, I + o) : I;
|
|
430
|
+
return { renderStart: a, renderEnd: I, lookaheadEnd: y };
|
|
431
|
+
}, it = ({ isDirectory: e, isExpanded: r, showExpandIcons: o, useCanvasExpandIcons: l, expandIconSize: n }) => {
|
|
432
432
|
const a = n ? { width: n, height: n } : void 0, i = n ? "" : "h-4 w-4";
|
|
433
|
-
return !(o && e) || l ? /* @__PURE__ */
|
|
434
|
-
},
|
|
433
|
+
return !(o && e) || l ? /* @__PURE__ */ P.jsx("span", { className: i, style: a, "aria-hidden": "true" }) : r ? /* @__PURE__ */ P.jsx(Je, { className: i, style: a }) : /* @__PURE__ */ P.jsx(Ge, { className: i, style: a });
|
|
434
|
+
}, ct = (e) => e.slice((e.lastIndexOf(".") - 1 >>> 0) + 2).toLowerCase(), ut = (e, r, o, l, n) => {
|
|
435
435
|
if (e.length === 0)
|
|
436
436
|
return { segmentsByItem: [], glyphsByItem: [] };
|
|
437
|
-
const a = Array.from({ length: e.length }, () => []), i = Array.from({ length: e.length }, () => []), m = l ? typeof n == "number" && Number.isFinite(n) && n > 0 ? n : Math.max(8, Math.min(o * 0.9, r * 0.7)) : 0,
|
|
437
|
+
const a = Array.from({ length: e.length }, () => []), i = Array.from({ length: e.length }, () => []), m = l ? typeof n == "number" && Number.isFinite(n) && n > 0 ? n : Math.max(8, Math.min(o * 0.9, r * 0.7)) : 0, I = 3;
|
|
438
438
|
for (let y = 0; y < e.length; y++) {
|
|
439
439
|
const c = e[y];
|
|
440
440
|
if (c.hideLines)
|
|
441
441
|
continue;
|
|
442
|
-
const
|
|
443
|
-
for (let
|
|
444
|
-
if (c.ancestorIsLast[
|
|
442
|
+
const v = [], b = y * r, g = b + r / 2, _ = m > 0 ? m / 2 + 2 : o / 1.5;
|
|
443
|
+
for (let f = 0; f < c.indentLevel; f++) {
|
|
444
|
+
if (c.ancestorIsLast[f] ?? !1)
|
|
445
445
|
continue;
|
|
446
|
-
let
|
|
447
|
-
for (let
|
|
448
|
-
const d = e[
|
|
449
|
-
if (d.indentLevel >
|
|
450
|
-
|
|
446
|
+
let R = !1;
|
|
447
|
+
for (let S = y; S < e.length; S++) {
|
|
448
|
+
const d = e[S];
|
|
449
|
+
if (d.indentLevel > f && d.ancestorIsLast.length > f && !d.ancestorIsLast[f]) {
|
|
450
|
+
R = !0;
|
|
451
451
|
break;
|
|
452
452
|
}
|
|
453
|
-
if (
|
|
453
|
+
if (S > y && d.indentLevel === f)
|
|
454
454
|
break;
|
|
455
455
|
}
|
|
456
|
-
if (
|
|
457
|
-
const
|
|
458
|
-
|
|
459
|
-
key: `${c.id}-ancestor-${
|
|
460
|
-
x1:
|
|
461
|
-
y1:
|
|
462
|
-
x2:
|
|
463
|
-
y2:
|
|
456
|
+
if (R) {
|
|
457
|
+
const S = f * o + o / 2 + I;
|
|
458
|
+
v.push({
|
|
459
|
+
key: `${c.id}-ancestor-${f}`,
|
|
460
|
+
x1: S,
|
|
461
|
+
y1: b,
|
|
462
|
+
x2: S,
|
|
463
|
+
y2: b + r,
|
|
464
464
|
itemIndex: y
|
|
465
465
|
});
|
|
466
466
|
}
|
|
467
467
|
}
|
|
468
|
-
const u = c.indentLevel * o, s = u + o / 2 +
|
|
469
|
-
if (c.isDirectory ?
|
|
468
|
+
const u = c.indentLevel * o, s = u + o / 2 + I;
|
|
469
|
+
if (c.isDirectory ? v.push({
|
|
470
470
|
key: `${c.id}-connector-top`,
|
|
471
471
|
x1: s,
|
|
472
|
-
y1:
|
|
472
|
+
y1: b,
|
|
473
473
|
x2: s,
|
|
474
|
-
y2: g -
|
|
474
|
+
y2: g - _,
|
|
475
475
|
itemIndex: y
|
|
476
|
-
}) :
|
|
476
|
+
}) : v.push({
|
|
477
477
|
key: `${c.id}-connector-top`,
|
|
478
478
|
x1: s,
|
|
479
|
-
y1:
|
|
479
|
+
y1: b,
|
|
480
480
|
x2: s,
|
|
481
481
|
y2: g,
|
|
482
482
|
itemIndex: y
|
|
483
|
-
}), !c.isDirectory && c.isLastChild &&
|
|
483
|
+
}), !c.isDirectory && c.isLastChild && v.push({
|
|
484
484
|
key: `${c.id}-connector-horizontal`,
|
|
485
485
|
x1: s,
|
|
486
486
|
y1: g,
|
|
487
|
-
x2: u + o +
|
|
487
|
+
x2: u + o + I,
|
|
488
488
|
y2: g,
|
|
489
489
|
itemIndex: y
|
|
490
|
-
}), c.isLastChild || (c.isDirectory ?
|
|
490
|
+
}), c.isLastChild || (c.isDirectory ? v.push({
|
|
491
491
|
key: `${c.id}-connector-bottom`,
|
|
492
492
|
x1: s,
|
|
493
|
-
y1: g +
|
|
493
|
+
y1: g + _,
|
|
494
494
|
x2: s,
|
|
495
|
-
y2:
|
|
495
|
+
y2: b + r,
|
|
496
496
|
itemIndex: y
|
|
497
|
-
}) :
|
|
497
|
+
}) : v.push({
|
|
498
498
|
key: `${c.id}-connector-bottom`,
|
|
499
499
|
x1: s,
|
|
500
500
|
y1: g,
|
|
501
501
|
x2: s,
|
|
502
|
-
y2:
|
|
502
|
+
y2: b + r,
|
|
503
503
|
itemIndex: y
|
|
504
|
-
})), a[y] =
|
|
505
|
-
const
|
|
504
|
+
})), a[y] = v, l && c.isDirectory) {
|
|
505
|
+
const f = m, w = s, R = g;
|
|
506
506
|
i[y] = [
|
|
507
507
|
{
|
|
508
508
|
key: `${c.id}-glyph`,
|
|
509
509
|
itemIndex: y,
|
|
510
|
-
centerX:
|
|
511
|
-
centerY:
|
|
512
|
-
size:
|
|
510
|
+
centerX: w,
|
|
511
|
+
centerY: R,
|
|
512
|
+
size: f,
|
|
513
513
|
isExpanded: c.isExpanded
|
|
514
514
|
}
|
|
515
515
|
];
|
|
516
516
|
}
|
|
517
517
|
}
|
|
518
518
|
return { segmentsByItem: a, glyphsByItem: i };
|
|
519
|
-
},
|
|
519
|
+
}, ge = (e, r) => {
|
|
520
520
|
if (e == null || typeof e == "boolean") return null;
|
|
521
521
|
if (typeof e == "function")
|
|
522
522
|
return console.warn(`[DirectoryTree] Function returned by renderer for "${r}". Return a node.`), null;
|
|
@@ -524,7 +524,7 @@ const L = {
|
|
|
524
524
|
if ("then" in e)
|
|
525
525
|
return console.warn(`[DirectoryTree] Promise returned for "${r}". Not supported.`), null;
|
|
526
526
|
if (Array.isArray(e)) {
|
|
527
|
-
const l = e.map((n) =>
|
|
527
|
+
const l = e.map((n) => ge(n, r)).filter(Boolean);
|
|
528
528
|
return l.length ? l : null;
|
|
529
529
|
}
|
|
530
530
|
const o = e.type;
|
|
@@ -532,10 +532,10 @@ const L = {
|
|
|
532
532
|
return console.warn(`[DirectoryTree] Lazy component for "${r}". Not supported.`), null;
|
|
533
533
|
}
|
|
534
534
|
return e;
|
|
535
|
-
},
|
|
535
|
+
}, dt = (e, r) => {
|
|
536
536
|
const { entry: o, isDirectory: l, isExpanded: n, extension: a } = e;
|
|
537
537
|
let i;
|
|
538
|
-
return o.icon !== void 0 ? i = o.icon : l ? i = n && r?.directoryExpanded || r?.directory || /* @__PURE__ */
|
|
538
|
+
return o.icon !== void 0 ? i = o.icon : l ? i = n && r?.directoryExpanded || r?.directory || /* @__PURE__ */ P.jsx(Xe, { className: "h-4 w-4" }) : a && r?.fileByExtension?.[a] ? i = r.fileByExtension[a] : i = r?.file || (a === "md" ? /* @__PURE__ */ P.jsx(Ve, { className: "h-4 w-4" }) : /* @__PURE__ */ P.jsx(ze, { className: "h-4 w-4" })), ge(typeof i == "function" ? i(e) : i, o.absolutePath);
|
|
539
539
|
}, xe = je(
|
|
540
540
|
({
|
|
541
541
|
entry: e,
|
|
@@ -544,233 +544,258 @@ const L = {
|
|
|
544
544
|
parentIsLast: l,
|
|
545
545
|
renderChildren: n = !0,
|
|
546
546
|
expansion: { toggleDirectory: a, onToggleDirectoryRecursive: i },
|
|
547
|
-
selection: {
|
|
548
|
-
visual: { iconOverrides:
|
|
547
|
+
selection: { onEntryClick: m, selectedPath: I, mode: y = "none", selectedItems: c, onSelectionChange: v },
|
|
548
|
+
visual: { iconOverrides: b, showExpandIcons: g = !0, showDirectoryIcons: _ = !0, showFileIcons: u = !0, useCanvasExpandIcons: s = !1, expandIconSize: f, highlightStyles: w }
|
|
549
549
|
}) => {
|
|
550
|
-
const R =
|
|
551
|
-
|
|
550
|
+
const R = ae(null), [S, d] = Z(null), [L, Y] = Z(!1);
|
|
551
|
+
J(
|
|
552
552
|
() => () => {
|
|
553
553
|
R.current && window.clearTimeout(R.current);
|
|
554
554
|
},
|
|
555
555
|
[]
|
|
556
556
|
);
|
|
557
|
-
const E = e.children !== void 0, N = E && o(e.absolutePath
|
|
558
|
-
|
|
559
|
-
|
|
557
|
+
const E = e.children !== void 0, N = E && o(e.absolutePath), j = e.absolutePath === I, C = !E && c?.has(e.absolutePath), H = E ? void 0 : ct(e.name);
|
|
558
|
+
J(() => {
|
|
559
|
+
d(N && e.children ? e.children : null);
|
|
560
560
|
}, [N, e.children]);
|
|
561
|
-
const
|
|
562
|
-
(
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
561
|
+
const W = M(
|
|
562
|
+
(p) => {
|
|
563
|
+
p.stopPropagation(), y !== "none" && !E && v && v(e, !C);
|
|
564
|
+
let k = !1;
|
|
565
|
+
m({
|
|
566
|
+
entry: e,
|
|
567
|
+
isDirectory: E,
|
|
568
|
+
isExpanded: N,
|
|
569
|
+
preventDefault: () => {
|
|
570
|
+
k = !0;
|
|
571
|
+
}
|
|
572
|
+
}), !(!E || k) && (R.current ? (window.clearTimeout(R.current), R.current = null, i(e)) : R.current = window.setTimeout(() => {
|
|
573
|
+
a(e.absolutePath), R.current = null;
|
|
574
|
+
}, 500));
|
|
567
575
|
},
|
|
568
|
-
[E, e, i, a, m, y,
|
|
569
|
-
),
|
|
570
|
-
|
|
571
|
-
|
|
576
|
+
[E, e, N, i, a, m, y, v, C]
|
|
577
|
+
), D = L ? w?.hoverClassName !== void 0 ? w.hoverClassName : $.entryHover : "", B = (() => {
|
|
578
|
+
if (E) {
|
|
579
|
+
if (j)
|
|
580
|
+
return w?.directorySelectedClassName !== void 0 ? w.directorySelectedClassName : $.entrySelected;
|
|
581
|
+
} else if (j || C)
|
|
582
|
+
return w?.itemSelectedClassName !== void 0 ? w.itemSelectedClassName : A(
|
|
583
|
+
j && $.entrySelected,
|
|
584
|
+
C && $.entryItemSelected
|
|
585
|
+
);
|
|
586
|
+
return "";
|
|
587
|
+
})(), Q = A($.entry, D, B, e.className), X = A($.expandIcon, (j || C) && $.expandIconSelected), K = A($.typeIcon, (j || C) && $.typeIconSelected), ee = A($.name, E && $.nameDirectory, (j || C) && $.nameSelected), G = it({ isDirectory: E, isExpanded: N, showExpandIcons: g, useCanvasExpandIcons: s, expandIconSize: f }), t = (E ? _ : u) ? dt({ entry: e, isDirectory: E, isExpanded: N, isSelected: j, isItemSelected: !!C, extension: H }, b) : null, h = {
|
|
588
|
+
...L ? w?.hoverStyle : {},
|
|
589
|
+
...E && j ? w?.directorySelectedStyle : {},
|
|
590
|
+
...!E && (j || C) ? w?.itemSelectedStyle : {}
|
|
591
|
+
};
|
|
592
|
+
return /* @__PURE__ */ P.jsxs(Be, { children: [
|
|
593
|
+
/* @__PURE__ */ P.jsxs(
|
|
572
594
|
"div",
|
|
573
595
|
{
|
|
574
|
-
className:
|
|
596
|
+
className: Q,
|
|
575
597
|
style: {
|
|
576
|
-
paddingLeft: `${Math.max(0, r *
|
|
577
|
-
transform: r < 0 ? `translateX(${r *
|
|
578
|
-
width: r < 0 ? `calc(100% + ${Math.abs(r *
|
|
579
|
-
height: `${
|
|
598
|
+
paddingLeft: `${Math.max(0, r * fe)}px`,
|
|
599
|
+
transform: r < 0 ? `translateX(${r * fe}px)` : void 0,
|
|
600
|
+
width: r < 0 ? `calc(100% + ${Math.abs(r * fe)}px)` : void 0,
|
|
601
|
+
height: `${se}px`,
|
|
602
|
+
...h,
|
|
580
603
|
...e.style
|
|
581
604
|
},
|
|
582
605
|
"data-entry-type": E ? "directory" : "file",
|
|
583
606
|
"data-entry-expanded": E ? String(N) : void 0,
|
|
584
|
-
"data-entry-selected":
|
|
607
|
+
"data-entry-selected": j ? "true" : void 0,
|
|
585
608
|
"data-entry-item-selected": C ? "true" : void 0,
|
|
586
|
-
onClick:
|
|
587
|
-
onMouseEnter: () =>
|
|
588
|
-
onMouseLeave: () =>
|
|
589
|
-
onKeyDown: (
|
|
609
|
+
onClick: W,
|
|
610
|
+
onMouseEnter: () => Y(!0),
|
|
611
|
+
onMouseLeave: () => Y(!1),
|
|
612
|
+
onKeyDown: (p) => p.key === "Enter" && W(p),
|
|
590
613
|
tabIndex: 0,
|
|
591
614
|
role: "treeitem",
|
|
592
615
|
"aria-expanded": E ? N : void 0,
|
|
593
616
|
"aria-label": `${e.name} (${E ? "directory" : "file"})`,
|
|
594
617
|
children: [
|
|
595
|
-
(g || s) && /* @__PURE__ */
|
|
596
|
-
(E ?
|
|
597
|
-
/* @__PURE__ */
|
|
618
|
+
(g || s) && /* @__PURE__ */ P.jsx("span", { className: X, children: G }),
|
|
619
|
+
(E ? _ : u) && /* @__PURE__ */ P.jsx("span", { className: K, children: t }),
|
|
620
|
+
/* @__PURE__ */ P.jsx("span", { className: ee, "data-entry-type": E ? "directory" : "file", "data-entry-role": "name", children: e.label ?? e.name })
|
|
598
621
|
]
|
|
599
622
|
}
|
|
600
623
|
),
|
|
601
|
-
N &&
|
|
624
|
+
N && S && n && /* @__PURE__ */ P.jsx("fieldset", { children: S.map((p, k) => /* @__PURE__ */ P.jsx(
|
|
602
625
|
xe,
|
|
603
626
|
{
|
|
604
|
-
entry:
|
|
627
|
+
entry: p,
|
|
605
628
|
indentLevel: r + 1,
|
|
606
629
|
isDirOpen: o,
|
|
607
|
-
parentIsLast: [...l,
|
|
630
|
+
parentIsLast: [...l, k === S.length - 1],
|
|
608
631
|
expansion: { toggleDirectory: a, onToggleDirectoryRecursive: i },
|
|
609
|
-
selection: {
|
|
632
|
+
selection: { onEntryClick: m, selectedPath: I, mode: y, selectedItems: c, onSelectionChange: v },
|
|
610
633
|
visual: {
|
|
611
|
-
iconOverrides:
|
|
634
|
+
iconOverrides: b,
|
|
612
635
|
showExpandIcons: g,
|
|
613
|
-
showDirectoryIcons:
|
|
636
|
+
showDirectoryIcons: _,
|
|
614
637
|
showFileIcons: u,
|
|
615
638
|
useCanvasExpandIcons: s,
|
|
616
|
-
expandIconSize:
|
|
639
|
+
expandIconSize: f,
|
|
640
|
+
highlightStyles: w
|
|
617
641
|
}
|
|
618
642
|
},
|
|
619
|
-
|
|
643
|
+
p.absolutePath
|
|
620
644
|
)) })
|
|
621
645
|
] }, e.absolutePath);
|
|
622
646
|
},
|
|
623
647
|
(e, r) => {
|
|
624
648
|
if (e.entry !== r.entry) return !1;
|
|
625
|
-
const o = e.entry.children !== void 0, l = r.entry.children !== void 0, n = o && e.isDirOpen(e.entry.absolutePath
|
|
626
|
-
return e.indentLevel === r.indentLevel && n === a && e.selection.selectedPath === r.selection.selectedPath && e.selection.mode === r.selection.mode && e.selection.selectedItems === r.selection.selectedItems && e.visual.iconOverrides === r.visual.iconOverrides && e.visual.showExpandIcons === r.visual.showExpandIcons && e.visual.showDirectoryIcons === r.visual.showDirectoryIcons && e.visual.showFileIcons === r.visual.showFileIcons && e.visual.useCanvasExpandIcons === r.visual.useCanvasExpandIcons && e.visual.expandIconSize === r.visual.expandIconSize && e.parentIsLast.length === r.parentIsLast.length && e.parentIsLast.every((i, m) => i === r.parentIsLast[m]);
|
|
649
|
+
const o = e.entry.children !== void 0, l = r.entry.children !== void 0, n = o && e.isDirOpen(e.entry.absolutePath), a = l && r.isDirOpen(r.entry.absolutePath);
|
|
650
|
+
return e.indentLevel === r.indentLevel && n === a && e.selection.selectedPath === r.selection.selectedPath && e.selection.mode === r.selection.mode && e.selection.selectedItems === r.selection.selectedItems && e.visual.iconOverrides === r.visual.iconOverrides && e.visual.showExpandIcons === r.visual.showExpandIcons && e.visual.showDirectoryIcons === r.visual.showDirectoryIcons && e.visual.showFileIcons === r.visual.showFileIcons && e.visual.useCanvasExpandIcons === r.visual.useCanvasExpandIcons && e.visual.expandIconSize === r.visual.expandIconSize && e.visual.highlightStyles === r.visual.highlightStyles && e.parentIsLast.length === r.parentIsLast.length && e.parentIsLast.every((i, m) => i === r.parentIsLast[m]);
|
|
627
651
|
}
|
|
628
652
|
);
|
|
629
653
|
xe.displayName = "DirectoryEntryItem";
|
|
630
|
-
const
|
|
654
|
+
const se = 20, ft = () => se, fe = 16, Ce = 12, Oe = (e) => {
|
|
631
655
|
const r = [];
|
|
632
656
|
if (e.children)
|
|
633
657
|
for (const o of e.children)
|
|
634
|
-
o.type === "directory" && (r.push(o.absolutePath), r.push(...
|
|
658
|
+
o.type === "directory" && (r.push(o.absolutePath), r.push(...Oe(o)));
|
|
635
659
|
return r;
|
|
636
|
-
},
|
|
660
|
+
}, vt = ({
|
|
637
661
|
entries: e,
|
|
638
662
|
expansion: { toggle: r, isExpanded: o, expandMultiple: l, collapseMultiple: n, isPending: a, alwaysExpanded: i = !1, doubleClickAction: m = "recursive" },
|
|
639
|
-
selection: {
|
|
640
|
-
visual: { className: g, style:
|
|
663
|
+
selection: { onEntryClick: I, selectedPath: y, mode: c = "none", selectedItems: v, onSelectionChange: b },
|
|
664
|
+
visual: { className: g, style: _, lineColor: u = "#A0AEC0", showTreeLines: s = !0, showExpandIcons: f = !0, showDirectoryIcons: w = !0, showFileIcons: R = !0, iconOverrides: S, expandIconSize: d, removeRootIndent: L = !1, highlightStyles: Y } = {},
|
|
641
665
|
virtualScroll: E
|
|
642
666
|
}) => {
|
|
643
|
-
const [N,
|
|
644
|
-
overscanCount:
|
|
645
|
-
className:
|
|
646
|
-
background:
|
|
647
|
-
onScroll:
|
|
648
|
-
onRangeChange:
|
|
649
|
-
initialScrollIndex:
|
|
650
|
-
initialScrollOffset:
|
|
651
|
-
callbackThrottleMs:
|
|
652
|
-
contentInsets:
|
|
653
|
-
onItemFocus:
|
|
654
|
-
viewportHeightOverride:
|
|
655
|
-
scrollBarOptions:
|
|
656
|
-
behaviorOptions:
|
|
657
|
-
} = E ?? {}, [
|
|
658
|
-
(
|
|
659
|
-
|
|
667
|
+
const [N, j] = Z(!1), C = ae(null), H = ae(null), [W, D] = Z(0), [B, Q] = Z(null), {
|
|
668
|
+
overscanCount: X = 15,
|
|
669
|
+
className: K,
|
|
670
|
+
background: ee,
|
|
671
|
+
onScroll: G,
|
|
672
|
+
onRangeChange: t,
|
|
673
|
+
initialScrollIndex: h,
|
|
674
|
+
initialScrollOffset: p,
|
|
675
|
+
callbackThrottleMs: k = 5,
|
|
676
|
+
contentInsets: te,
|
|
677
|
+
onItemFocus: le,
|
|
678
|
+
viewportHeightOverride: x,
|
|
679
|
+
scrollBarOptions: V,
|
|
680
|
+
behaviorOptions: ie
|
|
681
|
+
} = E ?? {}, [re, Ee] = Z(typeof p == "number" ? p : 0), Ae = M(
|
|
682
|
+
(T, U) => {
|
|
683
|
+
Ee(T), G?.(T, U);
|
|
660
684
|
},
|
|
661
|
-
[
|
|
662
|
-
),
|
|
663
|
-
(
|
|
664
|
-
const { renderingStartIndex: U, renderingEndIndex:
|
|
665
|
-
|
|
685
|
+
[G]
|
|
686
|
+
), $e = M(
|
|
687
|
+
(T) => {
|
|
688
|
+
const { renderingStartIndex: U, renderingEndIndex: F } = T;
|
|
689
|
+
Q((O) => O && O.renderStart === U && O.renderEnd === F ? O : { renderStart: U, renderEnd: F }), t?.(T);
|
|
666
690
|
},
|
|
667
|
-
[
|
|
691
|
+
[t]
|
|
668
692
|
);
|
|
669
|
-
|
|
670
|
-
typeof
|
|
671
|
-
}, [
|
|
672
|
-
|
|
673
|
-
}, []),
|
|
674
|
-
if (typeof
|
|
675
|
-
|
|
693
|
+
J(() => {
|
|
694
|
+
typeof p == "number" && Ee(p);
|
|
695
|
+
}, [p]), J(() => {
|
|
696
|
+
j(!0), at();
|
|
697
|
+
}, []), J(() => {
|
|
698
|
+
if (typeof x == "number") {
|
|
699
|
+
D((O) => Math.abs(O - x) > 1 ? x : O);
|
|
676
700
|
return;
|
|
677
701
|
}
|
|
678
|
-
const
|
|
679
|
-
if (!
|
|
702
|
+
const T = C.current;
|
|
703
|
+
if (!T) return D(0);
|
|
680
704
|
(() => {
|
|
681
|
-
const
|
|
682
|
-
|
|
705
|
+
const O = T.clientHeight;
|
|
706
|
+
D((q) => Math.abs(q - O) > 1 ? O : q);
|
|
683
707
|
})();
|
|
684
|
-
const
|
|
685
|
-
for (const
|
|
686
|
-
|
|
708
|
+
const F = new ResizeObserver((O) => {
|
|
709
|
+
for (const q of O)
|
|
710
|
+
q.target === T && D((be) => Math.abs(be - q.contentRect.height) > 1 ? q.contentRect.height : be);
|
|
687
711
|
});
|
|
688
|
-
return
|
|
689
|
-
}, [
|
|
690
|
-
const
|
|
712
|
+
return F.observe(T), () => F.disconnect();
|
|
713
|
+
}, [x]);
|
|
714
|
+
const z = typeof x == "number" ? x : W, ne = M((T) => i || (N ? o(T) : !1), [N, o, i]), Ie = A($.container, a && $.containerPending, g), Se = oe(
|
|
691
715
|
() => ({
|
|
692
|
-
...
|
|
693
|
-
...
|
|
694
|
-
...typeof
|
|
716
|
+
...ot,
|
|
717
|
+
..._ ?? {},
|
|
718
|
+
...typeof x == "number" ? { height: x, minHeight: x } : {}
|
|
695
719
|
}),
|
|
696
|
-
[
|
|
697
|
-
),
|
|
698
|
-
(
|
|
699
|
-
const
|
|
700
|
-
if (
|
|
701
|
-
if (
|
|
702
|
-
if (
|
|
703
|
-
console.warn(`[DirectoryTree] Unknown double click action: ${
|
|
720
|
+
[_, x]
|
|
721
|
+
), De = M(
|
|
722
|
+
(T, U) => {
|
|
723
|
+
const F = [T.absolutePath, ...Oe(T)], O = U || m;
|
|
724
|
+
if (F.every((ve) => ne(ve))) return n(F);
|
|
725
|
+
if (F.every((ve) => !ne(ve)) || O === "recursive") return l(F);
|
|
726
|
+
if (O === "toggle") return n(F);
|
|
727
|
+
console.warn(`[DirectoryTree] Unknown double click action: ${O}. No action taken.`);
|
|
704
728
|
},
|
|
705
|
-
[
|
|
706
|
-
), { flatItems:
|
|
707
|
-
() => !s || pe.length === 0 ? { segmentsByItem: [], glyphsByItem: [] } :
|
|
729
|
+
[ne, l, n, m]
|
|
730
|
+
), { flatItems: ce, lineItems: pe, maxIndent: ke } = oe(() => st(e, ne, s, L), [e, ne, s, L]), me = oe(
|
|
731
|
+
() => !s || pe.length === 0 ? { segmentsByItem: [], glyphsByItem: [] } : ut(pe, se, fe, s, d ?? Ce),
|
|
708
732
|
[pe, s, d]
|
|
709
|
-
),
|
|
710
|
-
|
|
733
|
+
), he = oe(() => !s || e.length === 0 ? 0 : (ke + 2) * fe, [e.length, ke, s]), { renderStart: we, renderEnd: Re, lookaheadEnd: _e } = oe(() => lt(ce.length, z, X, B, re), [ce.length, z, X, B, re]), Le = oe(() => !s || he <= 0 || z <= 0 || me.segmentsByItem.length === 0 ? null : /* @__PURE__ */ P.jsx("div", { className: "pointer-events-none absolute inset-0 z-0", "aria-hidden": "true", children: /* @__PURE__ */ P.jsx("div", { className: "absolute top-0 left-0", style: { width: he, height: z }, children: /* @__PURE__ */ P.jsx(
|
|
734
|
+
Me,
|
|
711
735
|
{
|
|
712
|
-
segmentsByItem:
|
|
713
|
-
glyphsByItem:
|
|
714
|
-
itemHeight:
|
|
715
|
-
width:
|
|
716
|
-
viewportHeight:
|
|
717
|
-
scrollPosition:
|
|
736
|
+
segmentsByItem: me.segmentsByItem,
|
|
737
|
+
glyphsByItem: me.glyphsByItem,
|
|
738
|
+
itemHeight: se,
|
|
739
|
+
width: he,
|
|
740
|
+
viewportHeight: z,
|
|
741
|
+
scrollPosition: re,
|
|
718
742
|
color: u,
|
|
719
743
|
expandGlyphColor: u,
|
|
720
|
-
expandGlyphSize: d ??
|
|
744
|
+
expandGlyphSize: d ?? Ce,
|
|
721
745
|
renderStartIndex: we,
|
|
722
|
-
renderEndIndex:
|
|
723
|
-
lookaheadEndIndex:
|
|
746
|
+
renderEndIndex: Re,
|
|
747
|
+
lookaheadEndIndex: _e
|
|
724
748
|
}
|
|
725
|
-
) }) }), [
|
|
726
|
-
return e.length === 0 ? /* @__PURE__ */
|
|
727
|
-
|
|
749
|
+
) }) }), [he, z, we, Re, _e, re, me, u, s, d]), Fe = M((T) => ce[T], [ce]);
|
|
750
|
+
return e.length === 0 ? /* @__PURE__ */ P.jsx("div", { className: Ie, style: Se }) : /* @__PURE__ */ P.jsx("div", { ref: C, className: Ie, style: Se, role: "tree", children: /* @__PURE__ */ P.jsx(
|
|
751
|
+
We,
|
|
728
752
|
{
|
|
729
|
-
ref:
|
|
730
|
-
itemCount:
|
|
731
|
-
getItem:
|
|
732
|
-
getItemHeight:
|
|
733
|
-
viewportSize:
|
|
734
|
-
overscanCount:
|
|
735
|
-
onScroll:
|
|
736
|
-
onRangeChange:
|
|
737
|
-
className:
|
|
738
|
-
background: /* @__PURE__ */
|
|
739
|
-
|
|
740
|
-
|
|
753
|
+
ref: H,
|
|
754
|
+
itemCount: ce.length,
|
|
755
|
+
getItem: Fe,
|
|
756
|
+
getItemHeight: ft,
|
|
757
|
+
viewportSize: z,
|
|
758
|
+
overscanCount: X,
|
|
759
|
+
onScroll: Ae,
|
|
760
|
+
onRangeChange: $e,
|
|
761
|
+
className: K,
|
|
762
|
+
background: /* @__PURE__ */ P.jsxs(P.Fragment, { children: [
|
|
763
|
+
Le,
|
|
764
|
+
ee
|
|
741
765
|
] }),
|
|
742
|
-
initialScrollIndex:
|
|
743
|
-
initialScrollOffset:
|
|
744
|
-
onItemFocus:
|
|
745
|
-
callbackThrottleMs:
|
|
746
|
-
contentInsets:
|
|
747
|
-
scrollBarOptions:
|
|
748
|
-
behaviorOptions:
|
|
749
|
-
children: (
|
|
766
|
+
initialScrollIndex: h,
|
|
767
|
+
initialScrollOffset: p,
|
|
768
|
+
onItemFocus: le,
|
|
769
|
+
callbackThrottleMs: k,
|
|
770
|
+
contentInsets: te,
|
|
771
|
+
scrollBarOptions: V,
|
|
772
|
+
behaviorOptions: ie,
|
|
773
|
+
children: (T) => T && /* @__PURE__ */ P.jsx(
|
|
750
774
|
xe,
|
|
751
775
|
{
|
|
752
|
-
entry:
|
|
753
|
-
indentLevel:
|
|
754
|
-
isDirOpen:
|
|
755
|
-
parentIsLast:
|
|
776
|
+
entry: T.entry,
|
|
777
|
+
indentLevel: T.indentLevel,
|
|
778
|
+
isDirOpen: ne,
|
|
779
|
+
parentIsLast: T.parentIsLast,
|
|
756
780
|
renderChildren: !1,
|
|
757
|
-
expansion: { toggleDirectory: r, onToggleDirectoryRecursive:
|
|
758
|
-
selection: {
|
|
781
|
+
expansion: { toggleDirectory: r, onToggleDirectoryRecursive: De },
|
|
782
|
+
selection: { onEntryClick: I, selectedPath: y ?? null, mode: c, selectedItems: v, onSelectionChange: b },
|
|
759
783
|
visual: {
|
|
760
|
-
iconOverrides:
|
|
761
|
-
showExpandIcons:
|
|
762
|
-
showDirectoryIcons:
|
|
763
|
-
showFileIcons:
|
|
784
|
+
iconOverrides: S,
|
|
785
|
+
showExpandIcons: f,
|
|
786
|
+
showDirectoryIcons: w,
|
|
787
|
+
showFileIcons: R,
|
|
764
788
|
useCanvasExpandIcons: s,
|
|
765
|
-
expandIconSize: d
|
|
789
|
+
expandIconSize: d,
|
|
790
|
+
highlightStyles: Y
|
|
766
791
|
}
|
|
767
792
|
},
|
|
768
|
-
|
|
793
|
+
T.entry.absolutePath
|
|
769
794
|
)
|
|
770
795
|
}
|
|
771
796
|
) });
|
|
772
797
|
}, gt = ({ initialExpanded: e = /* @__PURE__ */ new Set(), storageKey: r } = {}) => {
|
|
773
|
-
const [o, l] =
|
|
798
|
+
const [o, l] = He(), [n, a] = Z(() => {
|
|
774
799
|
if (typeof window < "u" && r)
|
|
775
800
|
try {
|
|
776
801
|
const u = window.localStorage.getItem(r);
|
|
@@ -782,23 +807,23 @@ const le = 20, dt = () => le, de = 16, Ne = 12, Me = (e) => {
|
|
|
782
807
|
console.error("[useDirectoryTreeState] Error reading from localStorage", u);
|
|
783
808
|
}
|
|
784
809
|
return e;
|
|
785
|
-
}), i =
|
|
810
|
+
}), i = M((u) => {
|
|
786
811
|
l(() => {
|
|
787
812
|
a((s) => {
|
|
788
|
-
const
|
|
789
|
-
return u(
|
|
813
|
+
const f = new Set(s);
|
|
814
|
+
return u(f), f;
|
|
790
815
|
});
|
|
791
816
|
});
|
|
792
|
-
}, []), m =
|
|
817
|
+
}, []), m = M(
|
|
793
818
|
(u, s) => {
|
|
794
|
-
i((
|
|
795
|
-
for (const
|
|
796
|
-
s(
|
|
819
|
+
i((f) => {
|
|
820
|
+
for (const w of u)
|
|
821
|
+
s(f, w);
|
|
797
822
|
});
|
|
798
823
|
},
|
|
799
824
|
[i]
|
|
800
825
|
);
|
|
801
|
-
|
|
826
|
+
J(() => {
|
|
802
827
|
if (r && typeof window < "u")
|
|
803
828
|
try {
|
|
804
829
|
window.localStorage.setItem(r, JSON.stringify(Array.from(n)));
|
|
@@ -806,60 +831,60 @@ const le = 20, dt = () => le, de = 16, Ne = 12, Me = (e) => {
|
|
|
806
831
|
console.warn(`Error setting localStorage key "${r}":`, u);
|
|
807
832
|
}
|
|
808
833
|
}, [n, r]);
|
|
809
|
-
const
|
|
834
|
+
const I = M(
|
|
810
835
|
(u) => {
|
|
811
|
-
m([u], (s,
|
|
812
|
-
s.has(
|
|
836
|
+
m([u], (s, f) => {
|
|
837
|
+
s.has(f) ? s.delete(f) : s.add(f);
|
|
813
838
|
});
|
|
814
839
|
},
|
|
815
840
|
[m]
|
|
816
|
-
), y =
|
|
841
|
+
), y = M(
|
|
817
842
|
(u) => {
|
|
818
|
-
m([u], (s,
|
|
819
|
-
s.add(
|
|
843
|
+
m([u], (s, f) => {
|
|
844
|
+
s.add(f);
|
|
820
845
|
});
|
|
821
846
|
},
|
|
822
847
|
[m]
|
|
823
|
-
), c =
|
|
848
|
+
), c = M(
|
|
824
849
|
(u) => {
|
|
825
|
-
m([u], (s,
|
|
826
|
-
s.delete(
|
|
850
|
+
m([u], (s, f) => {
|
|
851
|
+
s.delete(f);
|
|
827
852
|
});
|
|
828
853
|
},
|
|
829
854
|
[m]
|
|
830
|
-
),
|
|
855
|
+
), v = M(
|
|
831
856
|
(u) => {
|
|
832
|
-
m(u, (s,
|
|
833
|
-
s.delete(
|
|
857
|
+
m(u, (s, f) => {
|
|
858
|
+
s.delete(f);
|
|
834
859
|
});
|
|
835
860
|
},
|
|
836
861
|
[m]
|
|
837
|
-
),
|
|
862
|
+
), b = M(
|
|
838
863
|
(u) => {
|
|
839
|
-
m(u, (s,
|
|
840
|
-
s.add(
|
|
864
|
+
m(u, (s, f) => {
|
|
865
|
+
s.add(f);
|
|
841
866
|
});
|
|
842
867
|
},
|
|
843
868
|
[m]
|
|
844
|
-
), g =
|
|
869
|
+
), g = M(() => {
|
|
845
870
|
i((u) => {
|
|
846
871
|
u.clear();
|
|
847
872
|
});
|
|
848
|
-
}, [i]),
|
|
873
|
+
}, [i]), _ = M((u) => n.has(u), [n]);
|
|
849
874
|
return {
|
|
850
875
|
expanded: n,
|
|
851
|
-
toggle:
|
|
876
|
+
toggle: I,
|
|
852
877
|
expand: y,
|
|
853
878
|
collapse: c,
|
|
854
|
-
collapseMultiple:
|
|
855
|
-
expandMultiple:
|
|
879
|
+
collapseMultiple: v,
|
|
880
|
+
expandMultiple: b,
|
|
856
881
|
collapseAll: g,
|
|
857
|
-
isExpanded:
|
|
882
|
+
isExpanded: _,
|
|
858
883
|
isPending: o
|
|
859
884
|
};
|
|
860
885
|
};
|
|
861
886
|
export {
|
|
862
|
-
|
|
863
|
-
|
|
887
|
+
vt as DirectoryTree,
|
|
888
|
+
$ as directoryTreeClasses,
|
|
864
889
|
gt as useDirectoryTreeState
|
|
865
890
|
};
|