@blocklet/labels 1.5.94 → 1.5.96
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/dist/index.es.js +110 -104
- package/dist/index.umd.js +3 -3
- package/package.json +2 -2
package/dist/index.es.js
CHANGED
|
@@ -4,20 +4,20 @@ import h from "@mui/material/Box";
|
|
|
4
4
|
import { styled as J } from "@mui/material/styles";
|
|
5
5
|
import { Tree as X } from "react-arborist";
|
|
6
6
|
import { Icon as ee } from "@iconify/react";
|
|
7
|
-
import { jsx as n, jsxs as v, Fragment as
|
|
7
|
+
import { jsx as n, jsxs as v, Fragment as O } from "react/jsx-runtime";
|
|
8
8
|
import te from "lodash/omit";
|
|
9
9
|
import ne, { components as _ } from "react-select";
|
|
10
10
|
import re from "@mui/material/Typography";
|
|
11
11
|
import A from "@mui/material/Button";
|
|
12
|
-
import
|
|
12
|
+
import B from "@mui/material/IconButton";
|
|
13
13
|
import oe from "@mui/icons-material/DeleteOutlineOutlined";
|
|
14
14
|
import le from "@mui/icons-material/EditOutlined";
|
|
15
15
|
import ie from "@mui/icons-material/Add";
|
|
16
16
|
import j from "@mui/material/TextField";
|
|
17
17
|
import $ from "@mui/material/ClickAwayListener";
|
|
18
|
-
import { GithubPicker as
|
|
18
|
+
import { GithubPicker as ae } from "react-color";
|
|
19
19
|
import K from "@arcblock/ux/lib/Dialog";
|
|
20
|
-
import { TextField as V, InputAdornment as
|
|
20
|
+
import { TextField as V, InputAdornment as se, IconButton as ce, Box as P } from "@mui/material";
|
|
21
21
|
import de from "@mui/icons-material/Translate";
|
|
22
22
|
import ue from "@mui/material/Popover";
|
|
23
23
|
import { useLocaleContext as Q } from "@arcblock/ux/lib/Locale/context";
|
|
@@ -47,13 +47,13 @@ const ge = (e) => /* @__PURE__ */ n("svg", {
|
|
|
47
47
|
function ye({
|
|
48
48
|
selectable: e = !1,
|
|
49
49
|
selected: t = [],
|
|
50
|
-
onSelect:
|
|
50
|
+
onSelect: a,
|
|
51
51
|
renderItem: l,
|
|
52
52
|
children: o
|
|
53
53
|
}) {
|
|
54
54
|
const r = (u) => t.indexOf(u) !== -1, i = (u) => {
|
|
55
|
-
Array.from(new Set(t).add(u)),
|
|
56
|
-
},
|
|
55
|
+
Array.from(new Set(t).add(u)), a == null || a(u);
|
|
56
|
+
}, s = T(
|
|
57
57
|
() => ({
|
|
58
58
|
selectable: e,
|
|
59
59
|
selected: t,
|
|
@@ -64,7 +64,7 @@ function ye({
|
|
|
64
64
|
[t]
|
|
65
65
|
);
|
|
66
66
|
return /* @__PURE__ */ n(Y.Provider, {
|
|
67
|
-
value:
|
|
67
|
+
value: s,
|
|
68
68
|
children: o
|
|
69
69
|
});
|
|
70
70
|
}
|
|
@@ -89,7 +89,7 @@ function ve({
|
|
|
89
89
|
function be({
|
|
90
90
|
node: e,
|
|
91
91
|
style: t,
|
|
92
|
-
dragHandle:
|
|
92
|
+
dragHandle: a
|
|
93
93
|
}) {
|
|
94
94
|
const {
|
|
95
95
|
selectable: l,
|
|
@@ -97,22 +97,22 @@ function be({
|
|
|
97
97
|
isSelected: r,
|
|
98
98
|
renderItem: i
|
|
99
99
|
} = H(Y), {
|
|
100
|
-
data:
|
|
101
|
-
} = e, u =
|
|
102
|
-
icon:
|
|
100
|
+
data: s
|
|
101
|
+
} = e, u = s.icon ? /* @__PURE__ */ n(ee, {
|
|
102
|
+
icon: s.icon,
|
|
103
103
|
style: {
|
|
104
104
|
fontSize: 18
|
|
105
105
|
}
|
|
106
106
|
}) : /* @__PURE__ */ n(ge, {
|
|
107
107
|
style: {
|
|
108
108
|
fontSize: 18,
|
|
109
|
-
color:
|
|
109
|
+
color: s.color || "#ddd"
|
|
110
110
|
}
|
|
111
111
|
}), m = (d) => {
|
|
112
112
|
d.stopPropagation(), e.isInternal && e.toggle();
|
|
113
113
|
}, g = (d) => {
|
|
114
114
|
d.stopPropagation(), l && o(e.id);
|
|
115
|
-
}, x = /* @__PURE__ */ v(
|
|
115
|
+
}, x = /* @__PURE__ */ v(O, {
|
|
116
116
|
children: [/* @__PURE__ */ v(h, {
|
|
117
117
|
sx: {
|
|
118
118
|
display: "flex",
|
|
@@ -153,7 +153,7 @@ function be({
|
|
|
153
153
|
alignItems: "center",
|
|
154
154
|
justifyContent: "space-between"
|
|
155
155
|
},
|
|
156
|
-
ref:
|
|
156
|
+
ref: a,
|
|
157
157
|
onClick: g,
|
|
158
158
|
children: [!i && x, !!i && i(x, e.data)]
|
|
159
159
|
});
|
|
@@ -175,12 +175,12 @@ const Se = J(h)`
|
|
|
175
175
|
function F({
|
|
176
176
|
data: e,
|
|
177
177
|
selectable: t,
|
|
178
|
-
selected:
|
|
178
|
+
selected: a = [],
|
|
179
179
|
onSelect: l,
|
|
180
180
|
rowHeight: o = 28,
|
|
181
181
|
renderItem: r,
|
|
182
182
|
sx: i,
|
|
183
|
-
...
|
|
183
|
+
...s
|
|
184
184
|
}) {
|
|
185
185
|
const u = D(), m = [...Array.isArray(i) ? i : [i]], [g, x] = z(0), d = k(() => {
|
|
186
186
|
var y, b;
|
|
@@ -190,11 +190,11 @@ function F({
|
|
|
190
190
|
d();
|
|
191
191
|
}, [e, d]), /* @__PURE__ */ n(ye, {
|
|
192
192
|
selectable: t,
|
|
193
|
-
selected:
|
|
193
|
+
selected: a,
|
|
194
194
|
onSelect: l,
|
|
195
195
|
renderItem: r,
|
|
196
196
|
children: /* @__PURE__ */ n(Se, {
|
|
197
|
-
...
|
|
197
|
+
...s,
|
|
198
198
|
sx: m,
|
|
199
199
|
children: /* @__PURE__ */ n(X, {
|
|
200
200
|
data: e,
|
|
@@ -210,12 +210,12 @@ function F({
|
|
|
210
210
|
})
|
|
211
211
|
});
|
|
212
212
|
}
|
|
213
|
-
const L = (e) => e.reduce((t,
|
|
213
|
+
const L = (e) => e.reduce((t, a) => {
|
|
214
214
|
var l;
|
|
215
|
-
return t.push(
|
|
215
|
+
return t.push(a), (l = a.children) != null && l.length && t.push(...L(a.children)), t;
|
|
216
216
|
}, []), Z = (e) => e.map((t) => {
|
|
217
|
-
var
|
|
218
|
-
return (
|
|
217
|
+
var a;
|
|
218
|
+
return (a = t.children) != null && a.length && (t.children = Z(t.children)), t;
|
|
219
219
|
}), we = (e, t = null) => {
|
|
220
220
|
try {
|
|
221
221
|
return JSON.parse(e);
|
|
@@ -223,26 +223,26 @@ const L = (e) => e.reduce((t, s) => {
|
|
|
223
223
|
return t;
|
|
224
224
|
}
|
|
225
225
|
}, Ie = (e) => {
|
|
226
|
-
const t = e.reduce((o, r) => (o[r.id] = o[r.id] || {}, r.parentId && (o[r.id].parent = r.parentId, o[r.parentId] = o[r.parentId] || {}, o[r.parentId].children = o[r.parentId].children || [], o[r.parentId].children.push(r.id)), o), {}),
|
|
226
|
+
const t = e.reduce((o, r) => (o[r.id] = o[r.id] || {}, r.parentId && (o[r.id].parent = r.parentId, o[r.parentId] = o[r.parentId] || {}, o[r.parentId].children = o[r.parentId].children || [], o[r.parentId].children.push(r.id)), o), {}), a = e.map(({ parentId: o, translation: r, ...i }) => ({
|
|
227
227
|
...i,
|
|
228
228
|
translation: we(r),
|
|
229
229
|
children: []
|
|
230
|
-
})), l =
|
|
231
|
-
return
|
|
230
|
+
})), l = a.reduce((o, r) => ({ ...o, [r.id]: r }), {});
|
|
231
|
+
return a.forEach((o) => {
|
|
232
232
|
const r = t[o.id];
|
|
233
233
|
r.parent && l[r.parent] && (o.parent = l[r.parent]), r.children && (o.children = r.children.map((i) => l[i]));
|
|
234
|
-
}),
|
|
234
|
+
}), a.filter((o) => !o.parent);
|
|
235
235
|
}, ze = (e) => {
|
|
236
236
|
const {
|
|
237
237
|
options: t,
|
|
238
|
-
getValue:
|
|
238
|
+
getValue: a,
|
|
239
239
|
selectProps: l,
|
|
240
240
|
selectOption: o
|
|
241
|
-
} = e, r =
|
|
242
|
-
const u = t.find((m) => m.data.id ===
|
|
241
|
+
} = e, r = a(), i = (s) => {
|
|
242
|
+
const u = t.find((m) => m.data.id === s);
|
|
243
243
|
u && o(u);
|
|
244
244
|
};
|
|
245
|
-
return /* @__PURE__ */ v(
|
|
245
|
+
return /* @__PURE__ */ v(O, {
|
|
246
246
|
children: [/* @__PURE__ */ n(_.MenuList, {
|
|
247
247
|
...te(e, ["addon"]),
|
|
248
248
|
children: /* @__PURE__ */ n(h, {
|
|
@@ -254,7 +254,7 @@ const L = (e) => e.reduce((t, s) => {
|
|
|
254
254
|
data: l.data,
|
|
255
255
|
selectable: !0,
|
|
256
256
|
onSelect: i,
|
|
257
|
-
selected: r.map((
|
|
257
|
+
selected: r.map((s) => s.data.id)
|
|
258
258
|
})
|
|
259
259
|
})
|
|
260
260
|
}), e.addon]
|
|
@@ -263,7 +263,7 @@ const L = (e) => e.reduce((t, s) => {
|
|
|
263
263
|
children: e,
|
|
264
264
|
...t
|
|
265
265
|
}) => {
|
|
266
|
-
const [
|
|
266
|
+
const [a, l] = e, o = Array.isArray(a) ? a.length : 0;
|
|
267
267
|
return /* @__PURE__ */ v(_.ValueContainer, {
|
|
268
268
|
...t,
|
|
269
269
|
children: [/* @__PURE__ */ n(h, {
|
|
@@ -309,12 +309,12 @@ const L = (e) => e.reduce((t, s) => {
|
|
|
309
309
|
function Ae({
|
|
310
310
|
data: e,
|
|
311
311
|
value: t = [],
|
|
312
|
-
editable:
|
|
312
|
+
editable: a = !1,
|
|
313
313
|
addon: l,
|
|
314
314
|
onChange: o,
|
|
315
315
|
compact: r,
|
|
316
316
|
isMulti: i = !0,
|
|
317
|
-
maxHeight:
|
|
317
|
+
maxHeight: s = 264,
|
|
318
318
|
...u
|
|
319
319
|
}) {
|
|
320
320
|
const m = D(null), g = T(() => L(e).map((p) => ({
|
|
@@ -358,7 +358,7 @@ function Ae({
|
|
|
358
358
|
...r && ke,
|
|
359
359
|
menu: (p) => ({
|
|
360
360
|
...p,
|
|
361
|
-
...
|
|
361
|
+
...a && {
|
|
362
362
|
paddingBottom: "36px"
|
|
363
363
|
},
|
|
364
364
|
zIndex: 99
|
|
@@ -366,7 +366,7 @@ function Ae({
|
|
|
366
366
|
menuList: (p) => ({
|
|
367
367
|
...p,
|
|
368
368
|
overflowY: "auto",
|
|
369
|
-
maxHeight: `${
|
|
369
|
+
maxHeight: `${s}px`
|
|
370
370
|
})
|
|
371
371
|
},
|
|
372
372
|
theme: (p) => ({
|
|
@@ -389,27 +389,27 @@ function Ae({
|
|
|
389
389
|
}
|
|
390
390
|
var E = function() {
|
|
391
391
|
return E = Object.assign || function(t) {
|
|
392
|
-
for (var
|
|
393
|
-
|
|
394
|
-
for (var r in
|
|
395
|
-
Object.prototype.hasOwnProperty.call(
|
|
392
|
+
for (var a, l = 1, o = arguments.length; l < o; l++) {
|
|
393
|
+
a = arguments[l];
|
|
394
|
+
for (var r in a)
|
|
395
|
+
Object.prototype.hasOwnProperty.call(a, r) && (t[r] = a[r]);
|
|
396
396
|
}
|
|
397
397
|
return t;
|
|
398
398
|
}, E.apply(this, arguments);
|
|
399
399
|
};
|
|
400
|
-
function
|
|
401
|
-
var
|
|
402
|
-
if (!
|
|
400
|
+
function Ne(e, t) {
|
|
401
|
+
var a = typeof Symbol == "function" && e[Symbol.iterator];
|
|
402
|
+
if (!a)
|
|
403
403
|
return e;
|
|
404
|
-
var l =
|
|
404
|
+
var l = a.call(e), o, r = [], i;
|
|
405
405
|
try {
|
|
406
406
|
for (; (t === void 0 || t-- > 0) && !(o = l.next()).done; )
|
|
407
407
|
r.push(o.value);
|
|
408
|
-
} catch (
|
|
409
|
-
i = { error:
|
|
408
|
+
} catch (s) {
|
|
409
|
+
i = { error: s };
|
|
410
410
|
} finally {
|
|
411
411
|
try {
|
|
412
|
-
o && !o.done && (
|
|
412
|
+
o && !o.done && (a = l.return) && a.call(l);
|
|
413
413
|
} finally {
|
|
414
414
|
if (i)
|
|
415
415
|
throw i.error;
|
|
@@ -417,41 +417,41 @@ function Oe(e, t) {
|
|
|
417
417
|
}
|
|
418
418
|
return r;
|
|
419
419
|
}
|
|
420
|
-
var
|
|
420
|
+
var Oe = function(e) {
|
|
421
421
|
return typeof e == "function";
|
|
422
|
-
},
|
|
423
|
-
var t =
|
|
422
|
+
}, Pe = function(e) {
|
|
423
|
+
var t = Ne(z(e), 2), a = t[0], l = t[1], o = k(function(r) {
|
|
424
424
|
l(function(i) {
|
|
425
|
-
var
|
|
426
|
-
return
|
|
425
|
+
var s = Oe(r) ? r(i) : r;
|
|
426
|
+
return s ? E(E({}, i), s) : i;
|
|
427
427
|
});
|
|
428
428
|
}, []);
|
|
429
|
-
return [
|
|
429
|
+
return [a, o];
|
|
430
430
|
};
|
|
431
|
-
const
|
|
431
|
+
const Be = Pe;
|
|
432
432
|
function Ee({
|
|
433
433
|
I18NProps: e,
|
|
434
434
|
...t
|
|
435
435
|
}) {
|
|
436
436
|
const {
|
|
437
|
-
languages:
|
|
437
|
+
languages: a
|
|
438
438
|
} = Q(), {
|
|
439
439
|
translation: l,
|
|
440
440
|
onChange: o
|
|
441
|
-
} = e, [r, i] = z(null),
|
|
441
|
+
} = e, [r, i] = z(null), s = (g) => {
|
|
442
442
|
const x = g.currentTarget.closest(".MuiInputBase-root");
|
|
443
443
|
x && i(x);
|
|
444
444
|
}, u = () => {
|
|
445
445
|
i(null);
|
|
446
|
-
}, m =
|
|
446
|
+
}, m = a.filter((g) => g.code !== "en");
|
|
447
447
|
return /* @__PURE__ */ n(V, {
|
|
448
448
|
...t,
|
|
449
449
|
InputProps: {
|
|
450
|
-
endAdornment: /* @__PURE__ */ v(
|
|
450
|
+
endAdornment: /* @__PURE__ */ v(se, {
|
|
451
451
|
position: "end",
|
|
452
452
|
children: [/* @__PURE__ */ n(ce, {
|
|
453
453
|
edge: "end",
|
|
454
|
-
onClick:
|
|
454
|
+
onClick: s,
|
|
455
455
|
children: /* @__PURE__ */ n(de, {})
|
|
456
456
|
}), /* @__PURE__ */ n(ue, {
|
|
457
457
|
open: !!r,
|
|
@@ -477,14 +477,14 @@ function Ee({
|
|
|
477
477
|
sx: {
|
|
478
478
|
mt: 2
|
|
479
479
|
},
|
|
480
|
-
children: /* @__PURE__ */ n(
|
|
480
|
+
children: /* @__PURE__ */ n(P, {
|
|
481
481
|
sx: {
|
|
482
482
|
p: 2
|
|
483
483
|
},
|
|
484
484
|
children: m.map(({
|
|
485
485
|
code: g,
|
|
486
486
|
name: x
|
|
487
|
-
}) => /* @__PURE__ */ v(
|
|
487
|
+
}) => /* @__PURE__ */ v(P, {
|
|
488
488
|
sx: {
|
|
489
489
|
display: "flex",
|
|
490
490
|
alignItems: "center",
|
|
@@ -493,12 +493,12 @@ function Ee({
|
|
|
493
493
|
mt: 1
|
|
494
494
|
}
|
|
495
495
|
},
|
|
496
|
-
children: [/* @__PURE__ */ n(
|
|
496
|
+
children: [/* @__PURE__ */ n(P, {
|
|
497
497
|
sx: {
|
|
498
498
|
flex: "0 0 120px"
|
|
499
499
|
},
|
|
500
500
|
children: x
|
|
501
|
-
}), /* @__PURE__ */ n(
|
|
501
|
+
}), /* @__PURE__ */ n(P, {
|
|
502
502
|
sx: {
|
|
503
503
|
flex: 1
|
|
504
504
|
},
|
|
@@ -524,17 +524,17 @@ function Ee({
|
|
|
524
524
|
function Le({
|
|
525
525
|
open: e,
|
|
526
526
|
initialLabel: t,
|
|
527
|
-
onSubmit:
|
|
527
|
+
onSubmit: a,
|
|
528
528
|
onClose: l,
|
|
529
529
|
...o
|
|
530
530
|
}) {
|
|
531
|
-
const r = !(t != null && t.id), [i,
|
|
531
|
+
const r = !(t != null && t.id), [i, s] = Be({
|
|
532
532
|
name: (t == null ? void 0 : t.name) || "",
|
|
533
533
|
color: (t == null ? void 0 : t.color) || "#ddd",
|
|
534
534
|
slug: (t == null ? void 0 : t.id) || "",
|
|
535
535
|
translation: (t == null ? void 0 : t.translation) || {}
|
|
536
536
|
}), u = (b) => /^#([0-9A-F]{3}){1,2}$/i.test(b), m = T(() => r ? i.name && i.color && i.slug && u(i.color) : i.name && i.color && u(i.color), [i, r]), [g, x] = z(!1), d = () => {
|
|
537
|
-
|
|
537
|
+
a({
|
|
538
538
|
...t,
|
|
539
539
|
name: i.name,
|
|
540
540
|
color: i.color,
|
|
@@ -542,11 +542,11 @@ function Le({
|
|
|
542
542
|
translation: i.translation
|
|
543
543
|
});
|
|
544
544
|
}, f = (b) => {
|
|
545
|
-
|
|
545
|
+
s({
|
|
546
546
|
color: b.hex
|
|
547
547
|
}), setTimeout(() => x(!1));
|
|
548
548
|
}, y = (b) => {
|
|
549
|
-
|
|
549
|
+
s({
|
|
550
550
|
color: b.target.value
|
|
551
551
|
});
|
|
552
552
|
};
|
|
@@ -555,7 +555,7 @@ function Le({
|
|
|
555
555
|
showCloseButton: !0,
|
|
556
556
|
maxWidth: "lg",
|
|
557
557
|
title: r ? "Create label" : "Edit label",
|
|
558
|
-
actions: /* @__PURE__ */ v(
|
|
558
|
+
actions: /* @__PURE__ */ v(O, {
|
|
559
559
|
children: [/* @__PURE__ */ n(A, {
|
|
560
560
|
color: "inherit",
|
|
561
561
|
variant: "contained",
|
|
@@ -582,12 +582,12 @@ function Le({
|
|
|
582
582
|
placeholder: "New label",
|
|
583
583
|
size: "small",
|
|
584
584
|
fullWidth: !0,
|
|
585
|
-
onChange: (b) =>
|
|
585
|
+
onChange: (b) => s({
|
|
586
586
|
name: b.target.value
|
|
587
587
|
}),
|
|
588
588
|
I18NProps: {
|
|
589
589
|
translation: i.translation,
|
|
590
|
-
onChange: (b) =>
|
|
590
|
+
onChange: (b) => s({
|
|
591
591
|
translation: b
|
|
592
592
|
})
|
|
593
593
|
}
|
|
@@ -597,7 +597,7 @@ function Le({
|
|
|
597
597
|
size: "small",
|
|
598
598
|
fullWidth: !0,
|
|
599
599
|
disabled: !r,
|
|
600
|
-
onChange: (b) =>
|
|
600
|
+
onChange: (b) => s({
|
|
601
601
|
slug: b.target.value
|
|
602
602
|
}),
|
|
603
603
|
sx: {
|
|
@@ -654,7 +654,7 @@ function Le({
|
|
|
654
654
|
top: 48,
|
|
655
655
|
zIndex: 1
|
|
656
656
|
},
|
|
657
|
-
children: /* @__PURE__ */ n(
|
|
657
|
+
children: /* @__PURE__ */ n(ae, {
|
|
658
658
|
color: i.color,
|
|
659
659
|
onChangeComplete: f
|
|
660
660
|
})
|
|
@@ -667,7 +667,7 @@ function Le({
|
|
|
667
667
|
function Me({
|
|
668
668
|
open: e,
|
|
669
669
|
label: t,
|
|
670
|
-
onSubmit:
|
|
670
|
+
onSubmit: a,
|
|
671
671
|
onClose: l,
|
|
672
672
|
...o
|
|
673
673
|
}) {
|
|
@@ -676,7 +676,7 @@ function Me({
|
|
|
676
676
|
showCloseButton: !0,
|
|
677
677
|
maxWidth: "md",
|
|
678
678
|
title: "Delete",
|
|
679
|
-
actions: /* @__PURE__ */ v(
|
|
679
|
+
actions: /* @__PURE__ */ v(O, {
|
|
680
680
|
children: [/* @__PURE__ */ n(A, {
|
|
681
681
|
color: "inherit",
|
|
682
682
|
variant: "contained",
|
|
@@ -687,7 +687,7 @@ function Me({
|
|
|
687
687
|
color: "primary",
|
|
688
688
|
variant: "contained",
|
|
689
689
|
size: "small",
|
|
690
|
-
onClick:
|
|
690
|
+
onClick: a,
|
|
691
691
|
children: "Delete"
|
|
692
692
|
})]
|
|
693
693
|
}),
|
|
@@ -744,6 +744,7 @@ function De({
|
|
|
744
744
|
bgcolor: "grey.300",
|
|
745
745
|
borderRadius: 2
|
|
746
746
|
},
|
|
747
|
+
className: "label-translation-tag",
|
|
747
748
|
children: [/* @__PURE__ */ n(h, {
|
|
748
749
|
sx: {
|
|
749
750
|
pr: 0.5,
|
|
@@ -762,23 +763,23 @@ function De({
|
|
|
762
763
|
function ut({
|
|
763
764
|
data: e,
|
|
764
765
|
api: t,
|
|
765
|
-
...
|
|
766
|
+
...a
|
|
766
767
|
}) {
|
|
767
|
-
const [l, o] = z(null), [r, i] = z(null), [
|
|
768
|
+
const [l, o] = z(null), [r, i] = z(null), [s, u] = z(Z(e)), m = T(() => L(s), [s]), g = T(() => {
|
|
768
769
|
const c = (C, w) => C.map((S) => (w && (S.parent = w), S.children && (S.children = c(S.children, S)), S));
|
|
769
|
-
return c(
|
|
770
|
-
}, [
|
|
770
|
+
return c(s);
|
|
771
|
+
}, [s]), x = (c) => {
|
|
771
772
|
var C, w;
|
|
772
773
|
c.parent ? (c.parent.children = (w = (C = c.parent) == null ? void 0 : C.children) == null ? void 0 : w.map((S) => S.id === c.id ? {
|
|
773
774
|
...c
|
|
774
|
-
} : S), x(c.parent)) : u(
|
|
775
|
+
} : S), x(c.parent)) : u(s.map((S) => S.id === c.id ? {
|
|
775
776
|
...c
|
|
776
777
|
} : S));
|
|
777
778
|
}, d = (c) => {
|
|
778
|
-
c.parent ? (c.parent.children = c.parent.children || [], c.parent.children.push(c), u([...
|
|
779
|
+
c.parent ? (c.parent.children = c.parent.children || [], c.parent.children.push(c), u([...s])) : u([...s, c]);
|
|
779
780
|
}, f = (c) => {
|
|
780
781
|
var C;
|
|
781
|
-
c.parent ? c.parent.children = (C = c.parent.children) == null ? void 0 : C.filter((w) => w.id !== c.id) : u(
|
|
782
|
+
c.parent ? c.parent.children = (C = c.parent.children) == null ? void 0 : C.filter((w) => w.id !== c.id) : u(s.filter((w) => w.id !== c.id));
|
|
782
783
|
}, y = (c) => {
|
|
783
784
|
if (l)
|
|
784
785
|
return;
|
|
@@ -797,26 +798,27 @@ function ut({
|
|
|
797
798
|
parent: C,
|
|
798
799
|
children: w,
|
|
799
800
|
translation: S,
|
|
800
|
-
...
|
|
801
|
+
...N
|
|
801
802
|
} = c;
|
|
802
803
|
l.id ? (await t.updateLabel({
|
|
803
|
-
...
|
|
804
|
+
...N,
|
|
804
805
|
translation: JSON.stringify(S),
|
|
805
806
|
parentId: C == null ? void 0 : C.id
|
|
806
807
|
}), x(c)) : (await t.createLabel({
|
|
807
|
-
...
|
|
808
|
+
...N,
|
|
808
809
|
translation: JSON.stringify(S),
|
|
809
810
|
parentId: C == null ? void 0 : C.id
|
|
810
811
|
}), d(c)), o(null);
|
|
811
812
|
}, p = async () => {
|
|
812
813
|
!r || (await t.deleteLabel(r.id), f(r), i(null));
|
|
813
|
-
}, I = (c, C) => /* @__PURE__ */ v(
|
|
814
|
+
}, I = (c, C) => /* @__PURE__ */ v(O, {
|
|
814
815
|
children: [/* @__PURE__ */ v(h, {
|
|
815
816
|
sx: {
|
|
816
817
|
display: "flex",
|
|
817
818
|
alignItems: "center",
|
|
818
819
|
flexWrap: "wrap"
|
|
819
820
|
},
|
|
821
|
+
className: "label-name",
|
|
820
822
|
children: [/* @__PURE__ */ n(h, {
|
|
821
823
|
children: c
|
|
822
824
|
}), C.translation && /* @__PURE__ */ n(h, {
|
|
@@ -826,9 +828,10 @@ function ut({
|
|
|
826
828
|
gap: 0.5,
|
|
827
829
|
ml: 2
|
|
828
830
|
},
|
|
831
|
+
className: "label-translation",
|
|
829
832
|
children: Object.keys(C.translation).map((w) => {
|
|
830
|
-
var
|
|
831
|
-
const S = (
|
|
833
|
+
var N;
|
|
834
|
+
const S = (N = C.translation) == null ? void 0 : N[w];
|
|
832
835
|
return S ? /* @__PURE__ */ n(De, {
|
|
833
836
|
locale: w,
|
|
834
837
|
value: S
|
|
@@ -841,7 +844,8 @@ function ut({
|
|
|
841
844
|
gap: 1,
|
|
842
845
|
flex: "0 0 auto"
|
|
843
846
|
},
|
|
844
|
-
|
|
847
|
+
className: "label-action",
|
|
848
|
+
children: [/* @__PURE__ */ n(B, {
|
|
845
849
|
color: "inherit",
|
|
846
850
|
size: "small",
|
|
847
851
|
sx: {
|
|
@@ -853,7 +857,7 @@ function ut({
|
|
|
853
857
|
fontSize: 20
|
|
854
858
|
}
|
|
855
859
|
})
|
|
856
|
-
}), /* @__PURE__ */ n(
|
|
860
|
+
}), /* @__PURE__ */ n(B, {
|
|
857
861
|
color: "inherit",
|
|
858
862
|
size: "small",
|
|
859
863
|
sx: {
|
|
@@ -865,7 +869,7 @@ function ut({
|
|
|
865
869
|
fontSize: 18
|
|
866
870
|
}
|
|
867
871
|
})
|
|
868
|
-
}), /* @__PURE__ */ n(
|
|
872
|
+
}), /* @__PURE__ */ n(B, {
|
|
869
873
|
color: "inherit",
|
|
870
874
|
size: "small",
|
|
871
875
|
sx: {
|
|
@@ -881,7 +885,8 @@ function ut({
|
|
|
881
885
|
})]
|
|
882
886
|
});
|
|
883
887
|
return /* @__PURE__ */ v(h, {
|
|
884
|
-
...
|
|
888
|
+
...a,
|
|
889
|
+
className: "label-container",
|
|
885
890
|
children: [/* @__PURE__ */ v(h, {
|
|
886
891
|
sx: {
|
|
887
892
|
display: "flex",
|
|
@@ -917,6 +922,7 @@ function ut({
|
|
|
917
922
|
fontWeight: "bold",
|
|
918
923
|
bgcolor: "grey.200"
|
|
919
924
|
},
|
|
925
|
+
className: "label-header",
|
|
920
926
|
children: [m.length, " labels"]
|
|
921
927
|
}), /* @__PURE__ */ n(h, {
|
|
922
928
|
sx: {
|
|
@@ -955,7 +961,7 @@ function pt({
|
|
|
955
961
|
children: t
|
|
956
962
|
}) {
|
|
957
963
|
const {
|
|
958
|
-
locale:
|
|
964
|
+
locale: a
|
|
959
965
|
} = Q(), [l, o] = z({
|
|
960
966
|
loading: !0,
|
|
961
967
|
labels: [],
|
|
@@ -993,9 +999,9 @@ function pt({
|
|
|
993
999
|
var f;
|
|
994
1000
|
return {
|
|
995
1001
|
...d,
|
|
996
|
-
name: ((f = d.translation) == null ? void 0 : f[
|
|
1002
|
+
name: ((f = d.translation) == null ? void 0 : f[a]) || d.name
|
|
997
1003
|
};
|
|
998
|
-
}, [
|
|
1004
|
+
}, [a]), s = k((d) => d.filter(Boolean).map((f) => r[f]).map(i), [r, i]), u = k((d) => (d == null ? void 0 : d.split(",")) || [], []), m = k((d = []) => {
|
|
999
1005
|
if (!!(d != null && d.length))
|
|
1000
1006
|
return d.join(",");
|
|
1001
1007
|
}, []), g = T(() => l.labels.map(i), [l.labels, i]), x = T(() => ({
|
|
@@ -1005,11 +1011,11 @@ function pt({
|
|
|
1005
1011
|
...d,
|
|
1006
1012
|
updateCounter: ++l.updateCounter
|
|
1007
1013
|
})),
|
|
1008
|
-
getLabelsById:
|
|
1014
|
+
getLabelsById: s,
|
|
1009
1015
|
parseLabelIds: u,
|
|
1010
1016
|
stringifyLabelIds: m,
|
|
1011
1017
|
localizedLabels: g
|
|
1012
|
-
}), [l,
|
|
1018
|
+
}), [l, s, u, m, g]);
|
|
1013
1019
|
return /* @__PURE__ */ n(G.Provider, {
|
|
1014
1020
|
value: x,
|
|
1015
1021
|
children: t
|
|
@@ -1018,18 +1024,18 @@ function pt({
|
|
|
1018
1024
|
function mt({
|
|
1019
1025
|
labels: e,
|
|
1020
1026
|
editable: t,
|
|
1021
|
-
onChange:
|
|
1027
|
+
onChange: a,
|
|
1022
1028
|
sx: l
|
|
1023
1029
|
}) {
|
|
1024
1030
|
const o = !(e != null && e.length), {
|
|
1025
1031
|
labels: r,
|
|
1026
1032
|
loading: i,
|
|
1027
|
-
getLabelsById:
|
|
1033
|
+
getLabelsById: s
|
|
1028
1034
|
} = U(), [u, m] = z(!1);
|
|
1029
1035
|
if (i || !t && o)
|
|
1030
1036
|
return null;
|
|
1031
1037
|
const g = (f) => {
|
|
1032
|
-
|
|
1038
|
+
a == null || a(f), setTimeout(() => {
|
|
1033
1039
|
m(!1);
|
|
1034
1040
|
}, 300);
|
|
1035
1041
|
};
|
|
@@ -1044,7 +1050,7 @@ function mt({
|
|
|
1044
1050
|
})
|
|
1045
1051
|
})
|
|
1046
1052
|
});
|
|
1047
|
-
const x =
|
|
1053
|
+
const x = s(e || []), d = [{
|
|
1048
1054
|
display: "flex",
|
|
1049
1055
|
gap: 1,
|
|
1050
1056
|
alignItems: "center",
|
|
@@ -1059,7 +1065,7 @@ function mt({
|
|
|
1059
1065
|
sx: {
|
|
1060
1066
|
borderRadius: 1
|
|
1061
1067
|
}
|
|
1062
|
-
}, f.id) : null), t && !o && /* @__PURE__ */ n(
|
|
1068
|
+
}, f.id) : null), t && !o && /* @__PURE__ */ n(B, {
|
|
1063
1069
|
color: "inherit",
|
|
1064
1070
|
size: "small",
|
|
1065
1071
|
onClick: () => m(!0),
|
package/dist/index.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(i,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react"),require("@mui/icons-material/ExpandMore"),require("@mui/material/Box"),require("@mui/material/styles"),require("react-arborist"),require("@iconify/react"),require("react/jsx-runtime"),require("lodash/omit"),require("react-select"),require("@mui/material/Typography"),require("@mui/material/Button"),require("@mui/material/IconButton"),require("@mui/icons-material/DeleteOutlineOutlined"),require("@mui/icons-material/EditOutlined"),require("@mui/icons-material/Add"),require("@mui/material/TextField"),require("@mui/material/ClickAwayListener"),require("react-color"),require("@arcblock/ux/lib/Dialog"),require("@mui/material"),require("@mui/icons-material/Translate"),require("@mui/material/Popover"),require("@arcblock/ux/lib/Locale/context"),require("@mui/material/Alert"),require("@mui/icons-material/Edit"),require("@mui/icons-material/LabelOutlined"),require("@mui/material/Chip")):typeof define=="function"&&define.amd?define(["exports","react","@mui/icons-material/ExpandMore","@mui/material/Box","@mui/material/styles","react-arborist","@iconify/react","react/jsx-runtime","lodash/omit","react-select","@mui/material/Typography","@mui/material/Button","@mui/material/IconButton","@mui/icons-material/DeleteOutlineOutlined","@mui/icons-material/EditOutlined","@mui/icons-material/Add","@mui/material/TextField","@mui/material/ClickAwayListener","react-color","@arcblock/ux/lib/Dialog","@mui/material","@mui/icons-material/Translate","@mui/material/Popover","@arcblock/ux/lib/Locale/context","@mui/material/Alert","@mui/icons-material/Edit","@mui/icons-material/LabelOutlined","@mui/material/Chip"],u):(i=typeof globalThis<"u"?globalThis:i||self,u(i.DiscussKitComponents={},i.React,i.ExpandMoreIcon,i.Box,i.styles,i.reactArborist,i.react$1,i.jsxRuntime,i.omit,i.Select,i.Typography,i.Button,i.IconButton,i.DeleteOutlineOutlinedIcon,i.EditOutlinedIcon,i.AddIcon,i.TextField,i.ClickAwayListener,i.reactColor,i.Dialog,i.material,i.TranslateIcon,i.Popover,i.context,i.Alert,i.EditIcon,i.LabelOutlinedIcon,i.Chip))})(this,function(i,u,U,Y,
|
|
1
|
+
(function(i,u){typeof exports=="object"&&typeof module<"u"?u(exports,require("react"),require("@mui/icons-material/ExpandMore"),require("@mui/material/Box"),require("@mui/material/styles"),require("react-arborist"),require("@iconify/react"),require("react/jsx-runtime"),require("lodash/omit"),require("react-select"),require("@mui/material/Typography"),require("@mui/material/Button"),require("@mui/material/IconButton"),require("@mui/icons-material/DeleteOutlineOutlined"),require("@mui/icons-material/EditOutlined"),require("@mui/icons-material/Add"),require("@mui/material/TextField"),require("@mui/material/ClickAwayListener"),require("react-color"),require("@arcblock/ux/lib/Dialog"),require("@mui/material"),require("@mui/icons-material/Translate"),require("@mui/material/Popover"),require("@arcblock/ux/lib/Locale/context"),require("@mui/material/Alert"),require("@mui/icons-material/Edit"),require("@mui/icons-material/LabelOutlined"),require("@mui/material/Chip")):typeof define=="function"&&define.amd?define(["exports","react","@mui/icons-material/ExpandMore","@mui/material/Box","@mui/material/styles","react-arborist","@iconify/react","react/jsx-runtime","lodash/omit","react-select","@mui/material/Typography","@mui/material/Button","@mui/material/IconButton","@mui/icons-material/DeleteOutlineOutlined","@mui/icons-material/EditOutlined","@mui/icons-material/Add","@mui/material/TextField","@mui/material/ClickAwayListener","react-color","@arcblock/ux/lib/Dialog","@mui/material","@mui/icons-material/Translate","@mui/material/Popover","@arcblock/ux/lib/Locale/context","@mui/material/Alert","@mui/icons-material/Edit","@mui/icons-material/LabelOutlined","@mui/material/Chip"],u):(i=typeof globalThis<"u"?globalThis:i||self,u(i.DiscussKitComponents={},i.React,i.ExpandMoreIcon,i.Box,i.styles,i.reactArborist,i.react$1,i.jsxRuntime,i.omit,i.Select,i.Typography,i.Button,i.IconButton,i.DeleteOutlineOutlinedIcon,i.EditOutlinedIcon,i.AddIcon,i.TextField,i.ClickAwayListener,i.reactColor,i.Dialog,i.material,i.TranslateIcon,i.Popover,i.context,i.Alert,i.EditIcon,i.LabelOutlinedIcon,i.Chip))})(this,function(i,u,U,Y,D,Z,G,e,X,E,R,ee,te,re,ne,le,ae,oe,se,ie,T,de,ce,F,ue,fe,he,pe){"use strict";const I=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},j=I(U),p=I(Y),me=I(X),ge=I(E),ye=I(R),k=I(ee),A=I(te),xe=I(re),Ce=I(ne),ve=I(le),P=I(ae),W=I(oe),V=I(ie),be=I(de),Se=I(ce),Ie=I(ue),we=I(fe),_e=I(he),Oe=I(pe),Te=t=>e.jsx("svg",{viewBox:"0 0 24 24",width:"1.2em",height:"1.2em",...t,children:e.jsx("path",{fill:"currentColor",d:"M5 19q-.825 0-1.413-.587Q3 17.825 3 17V7q0-.825.587-1.412Q4.175 5 5 5h10q.5 0 .938.225q.437.225.712.625l3.525 5q.375.525.375 1.15q0 .625-.375 1.15l-3.525 5q-.275.4-.712.625Q15.5 19 15 19Z"})}),ke=t=>e.jsx("svg",{viewBox:"0 0 24 24",width:"1.2em",height:"1.2em",...t,children:e.jsx("path",{fill:"currentColor",d:"m10 16.4l-4-4L7.4 11l2.6 2.6L16.6 7L18 8.4Z"})}),H=u.createContext({});function qe({selectable:t=!1,selected:r=[],onSelect:s,renderItem:l,children:a}){const n=h=>r.indexOf(h)!==-1,o=h=>{Array.from(new Set(r).add(h)),s==null||s(h)},d=u.useMemo(()=>({selectable:t,selected:r,isSelected:n,select:o,renderItem:l}),[r]);return e.jsx(H.Provider,{value:d,children:a})}const Ae=t=>{var r;return t.isLeaf||!((r=t.data.children)!=null&&r.length)};function ze({node:t}){return Ae(t)?e.jsx("span",{}):t.isOpen?e.jsx(j.default,{style:{fontSize:20}}):e.jsx(j.default,{style:{fontSize:20,transform:"rotate(-90deg)"}})}function Le({node:t,style:r,dragHandle:s}){const{selectable:l,select:a,isSelected:n,renderItem:o}=u.useContext(H),{data:d}=t,h=d.icon?e.jsx(G.Icon,{icon:d.icon,style:{fontSize:18}}):e.jsx(Te,{style:{fontSize:18,color:d.color||"#ddd"}}),g=f=>{f.stopPropagation(),t.isInternal&&t.toggle()},x=f=>{f.stopPropagation(),l&&a(t.id)},C=e.jsxs(e.Fragment,{children:[e.jsxs(p.default,{sx:{display:"flex",alignItems:"center",flex:1},children:[e.jsx(p.default,{sx:{display:"flex",cursor:"pointer"},onClick:g,children:e.jsx(ze,{node:t})}),e.jsx(p.default,{sx:{display:"flex",alignItems:"center",width:22,height:22},children:h}),e.jsx(p.default,{component:"span",sx:{color:"grey.700"},children:t.data.name})]}),l&&n(t.id)&&e.jsx(ke,{})]});return e.jsxs(p.default,{className:"label-tree-item",style:r,sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},ref:s,onClick:x,children:[!o&&C,!!o&&o(C,t.data)]})}const Be=D.styled(p.default)`
|
|
2
2
|
> div,
|
|
3
3
|
> div > div,
|
|
4
4
|
> div > div > div {
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
.label-tree-item {
|
|
12
12
|
width: 100%;
|
|
13
13
|
}
|
|
14
|
-
`;function z({data:t,selectable:r,selected:s=[],onSelect:l,rowHeight:
|
|
14
|
+
`;function z({data:t,selectable:r,selected:s=[],onSelect:l,rowHeight:a=28,renderItem:n,sx:o,...d}){const h=u.useRef(),g=[...Array.isArray(o)?o:[o]],[x,C]=u.useState(0),f=u.useCallback(()=>{var v,S;C((((S=(v=h.current)==null?void 0:v.visibleNodes)==null?void 0:S.length)||0)*a)},[a]);u.useEffect(()=>{f()},[t,f]);const y=()=>{setTimeout(f)};return e.jsx(qe,{selectable:r,selected:s,onSelect:l,renderItem:n,children:e.jsx(Be,{...d,sx:g,children:e.jsx(Z.Tree,{data:t,rowHeight:a,height:x,indent:32,ref:h,onToggle:y,children:Le})})})}const L=t=>t.reduce((r,s)=>{var l;return r.push(s),(l=s.children)!=null&&l.length&&r.push(...L(s.children)),r},[]),J=t=>t.map(r=>{var s;return(s=r.children)!=null&&s.length&&(r.children=J(r.children)),r}),Ee=(t,r=null)=>{try{return JSON.parse(t)}catch{return r}},K=t=>{const r=t.reduce((a,n)=>(a[n.id]=a[n.id]||{},n.parentId&&(a[n.id].parent=n.parentId,a[n.parentId]=a[n.parentId]||{},a[n.parentId].children=a[n.parentId].children||[],a[n.parentId].children.push(n.id)),a),{}),s=t.map(({parentId:a,translation:n,...o})=>({...o,translation:Ee(n),children:[]})),l=s.reduce((a,n)=>({...a,[n.id]:n}),{});return s.forEach(a=>{const n=r[a.id];n.parent&&l[n.parent]&&(a.parent=l[n.parent]),n.children&&(a.children=n.children.map(o=>l[o]))}),s.filter(a=>!a.parent)},Pe=t=>{const{options:r,getValue:s,selectProps:l,selectOption:a}=t,n=s(),o=d=>{const h=r.find(g=>g.data.id===d);h&&a(h)};return e.jsxs(e.Fragment,{children:[e.jsx(E.components.MenuList,{...me.default(t,["addon"]),children:e.jsx(p.default,{sx:{px:2,py:1},children:e.jsx(z,{data:l.data,selectable:!0,onSelect:o,selected:n.map(d=>d.data.id)})})}),t.addon]})},Me=({children:t,...r})=>{const[s,l]=t,a=Array.isArray(s)?s.length:0;return e.jsxs(E.components.ValueContainer,{...r,children:[e.jsx(p.default,{component:"span",sx:{fontSize:13,fontWeight:"bold"},children:a?"Labels":"Filter by labels"}),!!a&&e.jsx(p.default,{sx:{display:"inline-flex",justifyContent:"center",alignItems:"center",width:22,height:22,ml:1,borderRadius:"100%",fontSize:12,bgcolor:"grey.200"},children:a}),l]})},Ne={control:t=>({...t,minHeight:31}),valueContainer:t=>({...t,display:"flex"}),dropdownIndicator:t=>({...t,padding:"0 4px"}),clearIndicator:t=>({...t,padding:"4px"})};function $({data:t,value:r=[],editable:s=!1,addon:l,onChange:a,compact:n,isMulti:o=!0,maxHeight:d=264,...h}){const g=u.useRef(null),x=u.useMemo(()=>L(t).map(m=>({data:m,label:m.name,value:m.id})),[t]),C=x.reduce((m,O)=>({...m,[O.data.id]:O}),{}),f=Array.isArray(r)?r:[r],y=f.map(m=>C[m]),v=u.useRef({prev:f.map(m=>{var O;return((O=C[m])==null?void 0:O.data)||""})}),S=(m,O)=>{!o||!Array.isArray(m)?a(m?[m.data]:[]):v.current.current=m.map(c=>c.data),["clear","remove-value"].includes(O.action)&&g.current&&setTimeout(()=>{var c;return(c=g==null?void 0:g.current)==null?void 0:c.blur()},1)},N=()=>{v.current.current&&JSON.stringify(v.current.prev.map(O=>O.id))!==JSON.stringify(v.current.current.map(O=>O.id))&&(a(v.current.current),v.current.prev=v.current.current)};return e.jsx(p.default,{...h,children:e.jsx(ge.default,{ref:g,defaultValue:y,options:x,onChange:S,components:{MenuList:m=>e.jsx(Pe,{...m,addon:l}),...n&&{ValueContainer:Me}},placeholder:"Select labels",styles:{...n&&Ne,menu:m=>({...m,...s&&{paddingBottom:"36px"},zIndex:99}),menuList:m=>({...m,overflowY:"auto",maxHeight:`${d}px`})},theme:m=>({...m,colors:{...m.colors,primary25:"#ddd",primary50:"#ddd",primary:"#ddd"}}),isSearchable:!1,isMulti:o,closeMenuOnSelect:!o,onMenuClose:N,isClearable:!0,data:t})})}var B=function(){return B=Object.assign||function(r){for(var s,l=1,a=arguments.length;l<a;l++){s=arguments[l];for(var n in s)Object.prototype.hasOwnProperty.call(s,n)&&(r[n]=s[n])}return r},B.apply(this,arguments)};function De(t,r){var s=typeof Symbol=="function"&&t[Symbol.iterator];if(!s)return t;var l=s.call(t),a,n=[],o;try{for(;(r===void 0||r-- >0)&&!(a=l.next()).done;)n.push(a.value)}catch(d){o={error:d}}finally{try{a&&!a.done&&(s=l.return)&&s.call(l)}finally{if(o)throw o.error}}return n}typeof SuppressedError=="function"&&SuppressedError;var Fe=function(t){return typeof t=="function"},je=function(t){var r=De(u.useState(t),2),s=r[0],l=r[1],a=u.useCallback(function(n){l(function(o){var d=Fe(n)?n(o):n;return d?B(B({},o),d):o})},[]);return[s,a]};const We=je;function Ve({I18NProps:t,...r}){const{languages:s}=F.useLocaleContext(),{translation:l,onChange:a}=t,[n,o]=u.useState(null),d=x=>{const C=x.currentTarget.closest(".MuiInputBase-root");C&&o(C)},h=()=>{o(null)},g=s.filter(x=>x.code!=="en");return e.jsx(T.TextField,{...r,InputProps:{endAdornment:e.jsxs(T.InputAdornment,{position:"end",children:[e.jsx(T.IconButton,{edge:"end",onClick:d,children:e.jsx(be.default,{})}),e.jsx(Se.default,{open:!!n,anchorEl:n,onClose:h,transformOrigin:{vertical:"top",horizontal:"right"},anchorOrigin:{vertical:"bottom",horizontal:"right"},PaperProps:{sx:{width:n==null?void 0:n.clientWidth,maxHeight:200,overflowY:"auto",bgcolor:"grey.50"}},elevation:1,sx:{mt:2},children:e.jsx(T.Box,{sx:{p:2},children:g.map(({code:x,name:C})=>e.jsxs(T.Box,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between","& + &":{mt:1}},children:[e.jsx(T.Box,{sx:{flex:"0 0 120px"},children:C}),e.jsx(T.Box,{sx:{flex:1},children:e.jsx(T.TextField,{value:l[x]||"",size:"small",sx:{width:1},onChange:f=>a({...l,[x]:f.target.value})})})]},x))})})]})}})}function He({open:t,initialLabel:r,onSubmit:s,onClose:l,...a}){const n=!(r!=null&&r.id),[o,d]=We({name:(r==null?void 0:r.name)||"",color:(r==null?void 0:r.color)||"#ddd",slug:(r==null?void 0:r.id)||"",translation:(r==null?void 0:r.translation)||{}}),h=S=>/^#([0-9A-F]{3}){1,2}$/i.test(S),g=u.useMemo(()=>n?o.name&&o.color&&o.slug&&h(o.color):o.name&&o.color&&h(o.color),[o,n]),[x,C]=u.useState(!1),f=()=>{s({...r,name:o.name,color:o.color,id:o.slug,translation:o.translation})},y=S=>{d({color:S.hex}),setTimeout(()=>C(!1))},v=S=>{d({color:S.target.value})};return e.jsx(V.default,{open:t,showCloseButton:!0,maxWidth:"lg",title:n?"Create label":"Edit label",actions:e.jsxs(e.Fragment,{children:[e.jsx(k.default,{color:"inherit",variant:"contained",size:"small",onClick:l,children:"Cancel"}),e.jsx(k.default,{color:"primary",variant:"contained",size:"small",onClick:f,disabled:!g,children:n?"Create":"Save Changes"})]}),onClose:l,...a,children:e.jsxs(p.default,{width:600,minHeight:280,children:[e.jsx(Ve,{label:"Name",value:o.name,placeholder:"New label",size:"small",fullWidth:!0,onChange:S=>d({name:S.target.value}),I18NProps:{translation:o.translation,onChange:S=>d({translation:S})}}),e.jsx(P.default,{label:"Slug",value:o.slug,size:"small",fullWidth:!0,disabled:!n,onChange:S=>d({slug:S.target.value}),sx:{mt:2}}),(r==null?void 0:r.parent)&&e.jsx(P.default,{label:"Parent",value:r.parent.name,size:"small",fullWidth:!0,disabled:!0,sx:{mt:2}}),e.jsx(W.default,{onClickAway:()=>C(!1),children:e.jsxs(p.default,{sx:{position:"relative",mt:2},children:[e.jsxs(p.default,{sx:{display:"flex",alignItems:"center",gap:1},children:[e.jsx(p.default,{sx:{width:30,height:30,bgcolor:o.color,borderRadius:1},onClick:()=>C(!0)}),e.jsx(P.default,{label:"",value:o.color,size:"small",onChange:v,inputProps:{maxLength:7},sx:{width:100,".MuiInputBase-root":{height:32}}})]}),x&&e.jsx(p.default,{sx:{position:"absolute",top:48,zIndex:1},children:e.jsx(se.GithubPicker,{color:o.color,onChangeComplete:y})})]})})]})})}function Je({open:t,label:r,onSubmit:s,onClose:l,...a}){return e.jsx(V.default,{open:t,showCloseButton:!0,maxWidth:"md",title:"Delete",actions:e.jsxs(e.Fragment,{children:[e.jsx(k.default,{color:"inherit",variant:"contained",size:"small",onClick:l,children:"Cancel"}),e.jsx(k.default,{color:"primary",variant:"contained",size:"small",onClick:s,children:"Delete"})]}),onClose:l,...a,children:e.jsxs(p.default,{width:600,minHeight:280,children:[e.jsx(Ie.default,{severity:"info",sx:{mb:2},children:"Are you sure you want to delete these labels ?"}),e.jsx(z,{data:[r]})]})})}const Ke=D.styled(z)`
|
|
15
15
|
.label-tree-item {
|
|
16
16
|
&:before {
|
|
17
17
|
content: '';
|
|
@@ -31,4 +31,4 @@
|
|
|
31
31
|
box-sizing: border-box;
|
|
32
32
|
padding: 0 16px;
|
|
33
33
|
}
|
|
34
|
-
`;function $e({locale:t,value:r}){return e.jsxs(p.default,{sx:{display:"flex",alignItems:"center",flex:"0 0 auto",px:1,py:.25,fontSize:12,bgcolor:"grey.300",borderRadius:2},children:[e.jsx(p.default,{sx:{pr:.5,borderRight:1,borderColor:"grey.400"},children:t}),e.jsx(p.default,{sx:{pl:.5},children:r})]})}function Qe({data:t,api:r,...s}){const[l,
|
|
34
|
+
`;function $e({locale:t,value:r}){return e.jsxs(p.default,{sx:{display:"flex",alignItems:"center",flex:"0 0 auto",px:1,py:.25,fontSize:12,bgcolor:"grey.300",borderRadius:2},className:"label-translation-tag",children:[e.jsx(p.default,{sx:{pr:.5,borderRight:1,borderColor:"grey.400"},children:t}),e.jsx(p.default,{sx:{pl:.5},children:r})]})}function Qe({data:t,api:r,...s}){const[l,a]=u.useState(null),[n,o]=u.useState(null),[d,h]=u.useState(J(t)),g=u.useMemo(()=>L(d),[d]),x=u.useMemo(()=>{const c=(b,_)=>b.map(w=>(_&&(w.parent=_),w.children&&(w.children=c(w.children,w)),w));return c(d)},[d]),C=c=>{var b,_;c.parent?(c.parent.children=(_=(b=c.parent)==null?void 0:b.children)==null?void 0:_.map(w=>w.id===c.id?{...c}:w),C(c.parent)):h(d.map(w=>w.id===c.id?{...c}:w))},f=c=>{c.parent?(c.parent.children=c.parent.children||[],c.parent.children.push(c),h([...d])):h([...d,c])},y=c=>{var b;c.parent?c.parent.children=(b=c.parent.children)==null?void 0:b.filter(_=>_.id!==c.id):h(d.filter(_=>_.id!==c.id))},v=c=>{if(l)return;a({id:"",name:"New label",parent:c,color:"#dddddd"})},S=c=>{l||a(c)},N=async c=>{if(!l)return;const{parent:b,children:_,translation:w,...q}=c;l.id?(await r.updateLabel({...q,translation:JSON.stringify(w),parentId:b==null?void 0:b.id}),C(c)):(await r.createLabel({...q,translation:JSON.stringify(w),parentId:b==null?void 0:b.id}),f(c)),a(null)},m=async()=>{!n||(await r.deleteLabel(n.id),y(n),o(null))},O=(c,b)=>e.jsxs(e.Fragment,{children:[e.jsxs(p.default,{sx:{display:"flex",alignItems:"center",flexWrap:"wrap"},className:"label-name",children:[e.jsx(p.default,{children:c}),b.translation&&e.jsx(p.default,{sx:{display:"flex",alignItems:"center",gap:.5,ml:2},className:"label-translation",children:Object.keys(b.translation).map(_=>{var q;const w=(q=b.translation)==null?void 0:q[_];return w?e.jsx($e,{locale:_,value:w},_):null})})]}),e.jsxs(p.default,{sx:{display:"flex",gap:1,flex:"0 0 auto"},className:"label-action",children:[e.jsx(A.default,{color:"inherit",size:"small",sx:{color:"grey.500"},onClick:()=>v(b),children:e.jsx(ve.default,{sx:{fontSize:20}})}),e.jsx(A.default,{color:"inherit",size:"small",sx:{color:"grey.500"},onClick:()=>S(b),children:e.jsx(Ce.default,{sx:{fontSize:18}})}),e.jsx(A.default,{color:"inherit",size:"small",sx:{color:"grey.500"},onClick:()=>o(b),children:e.jsx(xe.default,{sx:{fontSize:20}})})]})]});return e.jsxs(p.default,{...s,className:"label-container",children:[e.jsxs(p.default,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[e.jsx(ye.default,{component:"h2",variant:"h6",children:"Manage labels"}),e.jsx(k.default,{color:"primary",variant:"contained",size:"small",sx:{textTransform:"none"},onClick:()=>v(),children:"New label"})]}),e.jsxs(p.default,{sx:{mt:2,border:1,borderColor:"grey.300",borderRadius:1,overflow:"hidden"},children:[e.jsxs(p.default,{sx:{p:2,fontSize:14,fontWeight:"bold",bgcolor:"grey.200"},className:"label-header",children:[g.length," labels"]}),e.jsx(p.default,{sx:{pt:.5},children:e.jsx(Ke,{data:x,selected:[],renderItem:O,rowHeight:64})})]}),e.jsx(He,{open:!!l,onClose:()=>a(null),initialLabel:l,onSubmit:N},l==null?void 0:l.id),e.jsx(Je,{open:!!n,onClose:()=>o(null),label:n,onSubmit:m},n==null?void 0:n.id)]})}const Q=u.createContext({}),M=()=>u.useContext(Q),Ue=()=>{const{updateLabels:t}=M();u.useEffect(()=>()=>{t()},[])};function Ye({fetchLabels:t,children:r}){const{locale:s}=F.useLocaleContext(),[l,a]=u.useState({loading:!0,labels:[],updateCounter:1});u.useEffect(()=>{(async()=>{try{a(v=>({...v,loading:!0}));const y=await t();a(v=>({...v,loading:!1,labels:K(y)}))}catch(y){console.error(y),a(v=>({...v,loading:!1,labels:[]}))}})()},[l.updateCounter]);const n=u.useMemo(()=>{var y;return(y=l.labels)!=null&&y.length?L(l.labels).reduce((v,S)=>({...v,[S.id]:S}),{}):{}},[l.labels]),o=u.useCallback(f=>{var y;return{...f,name:((y=f.translation)==null?void 0:y[s])||f.name}},[s]),d=u.useCallback(f=>f.filter(Boolean).map(y=>n[y]).map(o),[n,o]),h=u.useCallback(f=>(f==null?void 0:f.split(","))||[],[]),g=u.useCallback((f=[])=>{if(!!(f!=null&&f.length))return f.join(",")},[]),x=u.useMemo(()=>l.labels.map(o),[l.labels,o]),C=u.useMemo(()=>({loading:l.loading,labels:l.labels||[],updateLabels:()=>a(f=>({...f,updateCounter:++l.updateCounter})),getLabelsById:d,parseLabelIds:h,stringifyLabelIds:g,localizedLabels:x}),[l,d,h,g,x]);return e.jsx(Q.Provider,{value:C,children:r})}function Ze({labels:t,editable:r,onChange:s,sx:l}){const a=!(t!=null&&t.length),{labels:n,loading:o,getLabelsById:d}=M(),[h,g]=u.useState(!1);if(o||!r&&a)return null;const x=y=>{s==null||s(y),setTimeout(()=>{g(!1)},300)};if(h)return e.jsx(W.default,{onClickAway:()=>h&&g(!1),children:e.jsx("div",{children:e.jsx($,{data:n,value:t||[],onChange:x})})});const C=d(t||[]),f=[{display:"flex",gap:1,alignItems:"center",flexWrap:"wrap"},...Array.isArray(l)?l:[l]];return e.jsxs(p.default,{sx:f,children:[C.map(y=>y?e.jsx(Oe.default,{label:y.name,variant:"filled",size:"small",sx:{borderRadius:1}},y.id):null),r&&!a&&e.jsx(A.default,{color:"inherit",size:"small",onClick:()=>g(!0),sx:{color:"grey.400"},children:e.jsx(we.default,{sx:{fontSize:20}})}),r&&a&&e.jsx(k.default,{color:"inherit",variant:"outlined",startIcon:e.jsx(_e.default,{}),onClick:()=>g(!0),children:"Edit labels"})]})}i.LabelManager=Qe,i.LabelPicker=$,i.LabelTree=z,i.Labels=Ze,i.LabelsProvider=Ye,i.transformLabels=K,i.useLabelsContext=M,i.useLabelsUpdateOnDestroy=Ue,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/labels",
|
|
3
|
-
"version": "1.5.
|
|
3
|
+
"version": "1.5.96",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
@@ -75,5 +75,5 @@
|
|
|
75
75
|
"resolutions": {
|
|
76
76
|
"react": "^18.2.0"
|
|
77
77
|
},
|
|
78
|
-
"gitHead": "
|
|
78
|
+
"gitHead": "bd72204c7087654c65c03c88c8f8e092d85f211d"
|
|
79
79
|
}
|