@blocklet/labels 1.5.143 → 1.5.144
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/components/label/labels.d.ts +1 -1
- package/dist/index.es.js +189 -170
- package/dist/index.umd.js +3 -3
- package/package.json +2 -2
package/dist/index.es.js
CHANGED
|
@@ -1,26 +1,25 @@
|
|
|
1
|
-
import { jsx as n, jsxs as b, Fragment as
|
|
2
|
-
import { createContext as
|
|
1
|
+
import { jsx as n, jsxs as b, Fragment as L } from "react/jsx-runtime";
|
|
2
|
+
import { createContext as $, useRef as D, useState as A, useCallback as k, useEffect as F, useMemo as N, useContext as q } from "react";
|
|
3
3
|
import { ExpandMore as R, Translate as X, Add as ee, EditOutlined as te, DeleteOutlineOutlined as ne, Edit as re, LabelOutlined as oe } from "@mui/icons-material";
|
|
4
|
-
import
|
|
5
|
-
import { styled as
|
|
4
|
+
import f from "@mui/material/Box";
|
|
5
|
+
import { styled as H } from "@mui/material/styles";
|
|
6
6
|
import { Tree as le } from "react-arborist";
|
|
7
7
|
import { Icon as ae } from "@iconify/react";
|
|
8
8
|
import ie from "lodash/omit";
|
|
9
|
-
import se, { components as
|
|
9
|
+
import se, { components as J } from "react-select";
|
|
10
10
|
import ce from "@mui/material/Typography";
|
|
11
|
-
import
|
|
12
|
-
import
|
|
11
|
+
import B from "@mui/material/Button";
|
|
12
|
+
import j from "@mui/material/IconButton";
|
|
13
13
|
import M from "@mui/material/TextField";
|
|
14
|
-
import
|
|
15
|
-
import { GithubPicker as
|
|
16
|
-
import
|
|
17
|
-
import { TextField as V, InputAdornment as
|
|
18
|
-
import
|
|
14
|
+
import de from "@mui/material/ClickAwayListener";
|
|
15
|
+
import { GithubPicker as ue } from "react-color";
|
|
16
|
+
import _ from "@arcblock/ux/lib/Dialog";
|
|
17
|
+
import { TextField as V, InputAdornment as he, IconButton as K, Box as O, ClickAwayListener as pe, Chip as fe, Button as me, getContrastRatio as ge, alpha as xe } from "@mui/material";
|
|
18
|
+
import ye from "@mui/material/Popover";
|
|
19
19
|
import { useLocaleContext as Q } from "@arcblock/ux/lib/Locale/context";
|
|
20
|
-
import
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
function ye({
|
|
20
|
+
import Ce from "@mui/material/Alert";
|
|
21
|
+
const be = (e) => /* @__PURE__ */ n("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...e, children: /* @__PURE__ */ n("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" }) }), ve = (e) => /* @__PURE__ */ n("svg", { viewBox: "0 0 24 24", width: "1.2em", height: "1.2em", ...e, children: /* @__PURE__ */ n("path", { fill: "currentColor", d: "m10 16.4l-4-4L7.4 11l2.6 2.6L16.6 7L18 8.4Z" }) }), Y = $({});
|
|
22
|
+
function we({
|
|
24
23
|
selectable: e = !1,
|
|
25
24
|
selected: t = [],
|
|
26
25
|
onSelect: i,
|
|
@@ -29,7 +28,7 @@ function ye({
|
|
|
29
28
|
}) {
|
|
30
29
|
const r = (h) => t.indexOf(h) !== -1, a = (h) => {
|
|
31
30
|
Array.from(new Set(t).add(h)), i == null || i(h);
|
|
32
|
-
}, d =
|
|
31
|
+
}, d = N(
|
|
33
32
|
() => ({
|
|
34
33
|
selectable: e,
|
|
35
34
|
selected: t,
|
|
@@ -42,28 +41,28 @@ function ye({
|
|
|
42
41
|
);
|
|
43
42
|
return /* @__PURE__ */ n(Y.Provider, { value: d, children: l });
|
|
44
43
|
}
|
|
45
|
-
const
|
|
44
|
+
const Se = (e) => {
|
|
46
45
|
var t;
|
|
47
46
|
return e.isLeaf || !((t = e.data.children) != null && t.length);
|
|
48
47
|
};
|
|
49
|
-
function
|
|
50
|
-
return
|
|
48
|
+
function Ie({ node: e }) {
|
|
49
|
+
return Se(e) ? /* @__PURE__ */ n("span", {}) : e.isOpen ? /* @__PURE__ */ n(R, { style: { fontSize: 20 } }) : /* @__PURE__ */ n(R, { style: { fontSize: 20, transform: "rotate(-90deg)" } });
|
|
51
50
|
}
|
|
52
|
-
function
|
|
53
|
-
const { selectable: o, select: l, isSelected: r, renderItem: a } =
|
|
51
|
+
function ze({ node: e, style: t, dragHandle: i }) {
|
|
52
|
+
const { selectable: o, select: l, isSelected: r, renderItem: a } = q(Y), { data: d } = e, h = d.icon ? /* @__PURE__ */ n(ae, { icon: d.icon, style: { fontSize: 18 } }) : /* @__PURE__ */ n(be, { style: { fontSize: 18, color: d.color || "#ddd" } }), x = (y) => {
|
|
54
53
|
y.stopPropagation(), e.isInternal && e.toggle();
|
|
55
54
|
}, g = (y) => {
|
|
56
55
|
y.stopPropagation(), o && l(e.id);
|
|
57
|
-
},
|
|
58
|
-
/* @__PURE__ */ b(
|
|
59
|
-
/* @__PURE__ */ n(
|
|
60
|
-
/* @__PURE__ */ n(
|
|
61
|
-
/* @__PURE__ */ n(
|
|
56
|
+
}, m = /* @__PURE__ */ b(L, { children: [
|
|
57
|
+
/* @__PURE__ */ b(f, { sx: { display: "flex", alignItems: "center", flex: 1 }, children: [
|
|
58
|
+
/* @__PURE__ */ n(f, { sx: { display: "flex", cursor: "pointer" }, onClick: x, children: /* @__PURE__ */ n(Ie, { node: e }) }),
|
|
59
|
+
/* @__PURE__ */ n(f, { sx: { display: "flex", alignItems: "center", width: 22, height: 22 }, children: h }),
|
|
60
|
+
/* @__PURE__ */ n(f, { component: "span", sx: { color: "grey.700" }, children: e.data.name })
|
|
62
61
|
] }),
|
|
63
|
-
o && r(e.id) && /* @__PURE__ */ n(
|
|
62
|
+
o && r(e.id) && /* @__PURE__ */ n(ve, {})
|
|
64
63
|
] });
|
|
65
64
|
return /* @__PURE__ */ b(
|
|
66
|
-
|
|
65
|
+
f,
|
|
67
66
|
{
|
|
68
67
|
className: "label-tree-item",
|
|
69
68
|
style: t,
|
|
@@ -71,13 +70,13 @@ function ve({ node: e, style: t, dragHandle: i }) {
|
|
|
71
70
|
ref: i,
|
|
72
71
|
onClick: g,
|
|
73
72
|
children: [
|
|
74
|
-
!a &&
|
|
75
|
-
!!a && a(
|
|
73
|
+
!a && m,
|
|
74
|
+
!!a && a(m, e.data)
|
|
76
75
|
]
|
|
77
76
|
}
|
|
78
77
|
);
|
|
79
78
|
}
|
|
80
|
-
const
|
|
79
|
+
const Ae = H(f)`
|
|
81
80
|
> div,
|
|
82
81
|
> div > div,
|
|
83
82
|
> div > div > div {
|
|
@@ -101,15 +100,15 @@ function W({
|
|
|
101
100
|
sx: a,
|
|
102
101
|
...d
|
|
103
102
|
}) {
|
|
104
|
-
const h = D(), x = [...Array.isArray(a) ? a : [a]], [g,
|
|
103
|
+
const h = D(), x = [...Array.isArray(a) ? a : [a]], [g, m] = A(0), y = k(() => {
|
|
105
104
|
var c, s;
|
|
106
|
-
|
|
105
|
+
m((((s = (c = h.current) == null ? void 0 : c.visibleNodes) == null ? void 0 : s.length) || 0) * l);
|
|
107
106
|
}, [l]);
|
|
108
107
|
return F(() => {
|
|
109
108
|
y();
|
|
110
|
-
}, [e, y]), /* @__PURE__ */ n(
|
|
109
|
+
}, [e, y]), /* @__PURE__ */ n(we, { selectable: t, selected: i, onSelect: o, renderItem: r, children: /* @__PURE__ */ n(Ae, { ...d, sx: x, children: /* @__PURE__ */ n(le, { data: e, rowHeight: l, height: g, indent: 32, ref: h, onToggle: () => {
|
|
111
110
|
setTimeout(y);
|
|
112
|
-
}, children:
|
|
111
|
+
}, children: ze }) }) });
|
|
113
112
|
}
|
|
114
113
|
const P = (e) => e.reduce((t, i) => {
|
|
115
114
|
var o;
|
|
@@ -117,29 +116,29 @@ const P = (e) => e.reduce((t, i) => {
|
|
|
117
116
|
}, []), Z = (e) => e.map((t) => {
|
|
118
117
|
var i;
|
|
119
118
|
return (i = t.children) != null && i.length && (t.children = Z(t.children)), t;
|
|
120
|
-
}),
|
|
119
|
+
}), ke = (e, t = null) => {
|
|
121
120
|
try {
|
|
122
121
|
return JSON.parse(e);
|
|
123
122
|
} catch {
|
|
124
123
|
return t;
|
|
125
124
|
}
|
|
126
|
-
},
|
|
125
|
+
}, Ne = (e) => {
|
|
127
126
|
const t = e.reduce((l, r) => (l[r.id] = l[r.id] || {}, r.parentId && (l[r.id].parent = r.parentId, l[r.parentId] = l[r.parentId] || {}, l[r.parentId].children = l[r.parentId].children || [], l[r.parentId].children.push(r.id)), l), {}), i = e.map(({ parentId: l, translation: r, ...a }) => ({
|
|
128
127
|
...a,
|
|
129
|
-
translation:
|
|
128
|
+
translation: ke(r),
|
|
130
129
|
children: []
|
|
131
130
|
})), o = i.reduce((l, r) => ({ ...l, [r.id]: r }), {});
|
|
132
131
|
return i.forEach((l) => {
|
|
133
132
|
const r = t[l.id];
|
|
134
133
|
r.parent && o[r.parent] && (l.parent = o[r.parent]), r.children && (l.children = r.children.map((a) => o[a]));
|
|
135
134
|
}), i.filter((l) => !l.parent);
|
|
136
|
-
},
|
|
135
|
+
}, Te = (e) => {
|
|
137
136
|
const { options: t, getValue: i, selectProps: o, selectOption: l } = e, r = i(), a = (d) => {
|
|
138
137
|
const h = t.find((x) => x.data.id === d);
|
|
139
138
|
h && l(h);
|
|
140
139
|
};
|
|
141
|
-
return /* @__PURE__ */ b(
|
|
142
|
-
/* @__PURE__ */ n(
|
|
140
|
+
return /* @__PURE__ */ b(L, { children: [
|
|
141
|
+
/* @__PURE__ */ n(J.MenuList, { ...ie(e, ["addon"]), children: /* @__PURE__ */ n(f, { sx: { px: 2, py: 1 }, children: /* @__PURE__ */ n(
|
|
143
142
|
W,
|
|
144
143
|
{
|
|
145
144
|
data: o.data,
|
|
@@ -150,12 +149,12 @@ const P = (e) => e.reduce((t, i) => {
|
|
|
150
149
|
) }) }),
|
|
151
150
|
e.addon
|
|
152
151
|
] });
|
|
153
|
-
},
|
|
152
|
+
}, Oe = ({ children: e, ...t }) => {
|
|
154
153
|
const [i, o] = e, l = Array.isArray(i) ? i.length : 0;
|
|
155
|
-
return /* @__PURE__ */ b(
|
|
156
|
-
/* @__PURE__ */ n(
|
|
154
|
+
return /* @__PURE__ */ b(J.ValueContainer, { ...t, children: [
|
|
155
|
+
/* @__PURE__ */ n(f, { component: "span", sx: { fontSize: 13, fontWeight: "bold" }, children: l ? "Labels" : "Filter by labels" }),
|
|
157
156
|
!!l && /* @__PURE__ */ n(
|
|
158
|
-
|
|
157
|
+
f,
|
|
159
158
|
{
|
|
160
159
|
sx: {
|
|
161
160
|
display: "inline-flex",
|
|
@@ -173,7 +172,7 @@ const P = (e) => e.reduce((t, i) => {
|
|
|
173
172
|
),
|
|
174
173
|
o
|
|
175
174
|
] });
|
|
176
|
-
},
|
|
175
|
+
}, Be = {
|
|
177
176
|
control: (e) => ({
|
|
178
177
|
...e,
|
|
179
178
|
minHeight: 31
|
|
@@ -191,7 +190,7 @@ const P = (e) => e.reduce((t, i) => {
|
|
|
191
190
|
padding: "4px"
|
|
192
191
|
})
|
|
193
192
|
};
|
|
194
|
-
function
|
|
193
|
+
function Pe({
|
|
195
194
|
data: e,
|
|
196
195
|
value: t = [],
|
|
197
196
|
editable: i = !1,
|
|
@@ -202,26 +201,26 @@ function ke({
|
|
|
202
201
|
maxHeight: d = 264,
|
|
203
202
|
...h
|
|
204
203
|
}) {
|
|
205
|
-
const x = D(null), g =
|
|
204
|
+
const x = D(null), g = N(
|
|
206
205
|
() => P(e).map((p) => ({ data: p, label: p.name, value: p.id })),
|
|
207
206
|
[e]
|
|
208
|
-
),
|
|
207
|
+
), m = g.reduce(
|
|
209
208
|
(p, I) => ({ ...p, [I.data.id]: I }),
|
|
210
209
|
{}
|
|
211
|
-
), y = Array.isArray(t) ? t : [t], z = y.map((p) =>
|
|
210
|
+
), y = Array.isArray(t) ? t : [t], z = y.map((p) => m[p]), c = D({
|
|
212
211
|
prev: y.map((p) => {
|
|
213
212
|
var I;
|
|
214
|
-
return ((I =
|
|
213
|
+
return ((I = m[p]) == null ? void 0 : I.data) || "";
|
|
215
214
|
})
|
|
216
215
|
}), s = (p, I) => {
|
|
217
216
|
!a || !Array.isArray(p) ? l(p ? [p.data] : []) : c.current.current = p.map((u) => u.data), ["clear", "remove-value"].includes(I.action) && x.current && setTimeout(() => {
|
|
218
217
|
var u;
|
|
219
218
|
return (u = x == null ? void 0 : x.current) == null ? void 0 : u.blur();
|
|
220
219
|
}, 1);
|
|
221
|
-
},
|
|
220
|
+
}, w = () => {
|
|
222
221
|
c.current.current && JSON.stringify(c.current.prev.map((I) => I.id)) !== JSON.stringify(c.current.current.map((I) => I.id)) && (l(c.current.current), c.current.prev = c.current.current);
|
|
223
222
|
};
|
|
224
|
-
return /* @__PURE__ */ n(
|
|
223
|
+
return /* @__PURE__ */ n(f, { ...h, children: /* @__PURE__ */ n(
|
|
225
224
|
se,
|
|
226
225
|
{
|
|
227
226
|
ref: x,
|
|
@@ -230,13 +229,13 @@ function ke({
|
|
|
230
229
|
onChange: s,
|
|
231
230
|
components: {
|
|
232
231
|
// @ts-ignore
|
|
233
|
-
MenuList: (p) => /* @__PURE__ */ n(
|
|
232
|
+
MenuList: (p) => /* @__PURE__ */ n(Te, { ...p, addon: o }),
|
|
234
233
|
// eslint-disable-line react/no-unstable-nested-components
|
|
235
|
-
...r && { ValueContainer:
|
|
234
|
+
...r && { ValueContainer: Oe }
|
|
236
235
|
},
|
|
237
236
|
placeholder: "Select labels",
|
|
238
237
|
styles: {
|
|
239
|
-
...r &&
|
|
238
|
+
...r && Be,
|
|
240
239
|
menu: (p) => ({
|
|
241
240
|
...p,
|
|
242
241
|
...i && { paddingBottom: "36px" },
|
|
@@ -260,23 +259,23 @@ function ke({
|
|
|
260
259
|
isSearchable: !1,
|
|
261
260
|
isMulti: a,
|
|
262
261
|
closeMenuOnSelect: !a,
|
|
263
|
-
onMenuClose:
|
|
262
|
+
onMenuClose: w,
|
|
264
263
|
isClearable: !0,
|
|
265
264
|
data: e
|
|
266
265
|
}
|
|
267
266
|
) });
|
|
268
267
|
}
|
|
269
|
-
var
|
|
270
|
-
return
|
|
268
|
+
var E = function() {
|
|
269
|
+
return E = Object.assign || function(t) {
|
|
271
270
|
for (var i, o = 1, l = arguments.length; o < l; o++) {
|
|
272
271
|
i = arguments[o];
|
|
273
272
|
for (var r in i)
|
|
274
273
|
Object.prototype.hasOwnProperty.call(i, r) && (t[r] = i[r]);
|
|
275
274
|
}
|
|
276
275
|
return t;
|
|
277
|
-
},
|
|
276
|
+
}, E.apply(this, arguments);
|
|
278
277
|
};
|
|
279
|
-
function
|
|
278
|
+
function Le(e, t) {
|
|
280
279
|
var i = typeof Symbol == "function" && e[Symbol.iterator];
|
|
281
280
|
if (!i)
|
|
282
281
|
return e;
|
|
@@ -296,22 +295,22 @@ function Ae(e, t) {
|
|
|
296
295
|
}
|
|
297
296
|
return r;
|
|
298
297
|
}
|
|
299
|
-
var
|
|
298
|
+
var Ee = function(e) {
|
|
300
299
|
return typeof e == "function";
|
|
301
|
-
},
|
|
302
|
-
var t =
|
|
300
|
+
}, je = function(e) {
|
|
301
|
+
var t = Le(A(e), 2), i = t[0], o = t[1], l = k(function(r) {
|
|
303
302
|
o(function(a) {
|
|
304
|
-
var d =
|
|
305
|
-
return d ?
|
|
303
|
+
var d = Ee(r) ? r(a) : r;
|
|
304
|
+
return d ? E(E({}, a), d) : a;
|
|
306
305
|
});
|
|
307
306
|
}, []);
|
|
308
307
|
return [i, l];
|
|
309
308
|
};
|
|
310
|
-
const
|
|
311
|
-
function
|
|
312
|
-
const { languages: i } = Q(), { translation: o, onChange: l } = e, [r, a] =
|
|
313
|
-
const
|
|
314
|
-
|
|
309
|
+
const Me = je;
|
|
310
|
+
function De({ I18NProps: e, ...t }) {
|
|
311
|
+
const { languages: i } = Q(), { translation: o, onChange: l } = e, [r, a] = A(null), d = (g) => {
|
|
312
|
+
const m = g.currentTarget.closest(".MuiInputBase-root");
|
|
313
|
+
m && a(m);
|
|
315
314
|
}, h = () => {
|
|
316
315
|
a(null);
|
|
317
316
|
}, x = i.filter((g) => g.code !== "en");
|
|
@@ -320,10 +319,10 @@ function Le({ I18NProps: e, ...t }) {
|
|
|
320
319
|
{
|
|
321
320
|
...t,
|
|
322
321
|
InputProps: {
|
|
323
|
-
endAdornment: /* @__PURE__ */ b(
|
|
324
|
-
/* @__PURE__ */ n(
|
|
322
|
+
endAdornment: /* @__PURE__ */ b(he, { position: "end", children: [
|
|
323
|
+
/* @__PURE__ */ n(K, { edge: "end", onClick: d, children: /* @__PURE__ */ n(X, {}) }),
|
|
325
324
|
/* @__PURE__ */ n(
|
|
326
|
-
|
|
325
|
+
ye,
|
|
327
326
|
{
|
|
328
327
|
open: !!r,
|
|
329
328
|
anchorEl: r,
|
|
@@ -341,8 +340,8 @@ function Le({ I18NProps: e, ...t }) {
|
|
|
341
340
|
},
|
|
342
341
|
elevation: 1,
|
|
343
342
|
sx: { mt: 2 },
|
|
344
|
-
children: /* @__PURE__ */ n(
|
|
345
|
-
|
|
343
|
+
children: /* @__PURE__ */ n(O, { sx: { p: 2 }, children: x.map(({ code: g, name: m }) => /* @__PURE__ */ b(
|
|
344
|
+
O,
|
|
346
345
|
{
|
|
347
346
|
sx: {
|
|
348
347
|
display: "flex",
|
|
@@ -351,8 +350,8 @@ function Le({ I18NProps: e, ...t }) {
|
|
|
351
350
|
"& + &": { mt: 1 }
|
|
352
351
|
},
|
|
353
352
|
children: [
|
|
354
|
-
/* @__PURE__ */ n(
|
|
355
|
-
/* @__PURE__ */ n(
|
|
353
|
+
/* @__PURE__ */ n(O, { sx: { flex: "0 0 120px" }, children: m }),
|
|
354
|
+
/* @__PURE__ */ n(O, { sx: { flex: 1 }, children: /* @__PURE__ */ n(
|
|
356
355
|
V,
|
|
357
356
|
{
|
|
358
357
|
value: o[g] || "",
|
|
@@ -372,35 +371,35 @@ function Le({ I18NProps: e, ...t }) {
|
|
|
372
371
|
}
|
|
373
372
|
);
|
|
374
373
|
}
|
|
375
|
-
function
|
|
376
|
-
const r = !(t != null && t.id), [a, d] =
|
|
374
|
+
function Fe({ open: e, initialLabel: t, onSubmit: i, onClose: o, ...l }) {
|
|
375
|
+
const r = !(t != null && t.id), [a, d] = Me({
|
|
377
376
|
name: (t == null ? void 0 : t.name) || "",
|
|
378
377
|
color: (t == null ? void 0 : t.color) || "#ddd",
|
|
379
378
|
slug: (t == null ? void 0 : t.id) || "",
|
|
380
379
|
translation: (t == null ? void 0 : t.translation) || {}
|
|
381
|
-
}), h = (s) => /^#([0-9A-F]{3}){1,2}$/i.test(s), x =
|
|
380
|
+
}), h = (s) => /^#([0-9A-F]{3}){1,2}$/i.test(s), x = N(() => r ? a.name && a.color && a.slug && h(a.color) : a.name && a.color && h(a.color), [a, r]), [g, m] = A(!1), y = () => {
|
|
382
381
|
i({ ...t, name: a.name, color: a.color, id: a.slug, translation: a.translation });
|
|
383
382
|
}, z = (s) => {
|
|
384
|
-
d({ color: s.hex }), setTimeout(() =>
|
|
383
|
+
d({ color: s.hex }), setTimeout(() => m(!1));
|
|
385
384
|
}, c = (s) => {
|
|
386
385
|
d({ color: s.target.value });
|
|
387
386
|
};
|
|
388
387
|
return /* @__PURE__ */ n(
|
|
389
|
-
|
|
388
|
+
_,
|
|
390
389
|
{
|
|
391
390
|
open: e,
|
|
392
391
|
showCloseButton: !0,
|
|
393
392
|
maxWidth: "lg",
|
|
394
393
|
title: r ? "Create label" : "Edit label",
|
|
395
|
-
actions: /* @__PURE__ */ b(
|
|
396
|
-
/* @__PURE__ */ n(
|
|
397
|
-
/* @__PURE__ */ n(
|
|
394
|
+
actions: /* @__PURE__ */ b(L, { children: [
|
|
395
|
+
/* @__PURE__ */ n(B, { color: "inherit", variant: "contained", size: "small", onClick: o, children: "Cancel" }),
|
|
396
|
+
/* @__PURE__ */ n(B, { color: "primary", variant: "contained", size: "small", onClick: y, disabled: !x, children: r ? "Create" : "Save Changes" })
|
|
398
397
|
] }),
|
|
399
398
|
onClose: o,
|
|
400
399
|
...l,
|
|
401
|
-
children: /* @__PURE__ */ b(
|
|
400
|
+
children: /* @__PURE__ */ b(f, { width: 600, minHeight: 280, children: [
|
|
402
401
|
/* @__PURE__ */ n(
|
|
403
|
-
|
|
402
|
+
De,
|
|
404
403
|
{
|
|
405
404
|
label: "Name",
|
|
406
405
|
value: a.name,
|
|
@@ -427,13 +426,13 @@ function Ee({ open: e, initialLabel: t, onSubmit: i, onClose: o, ...l }) {
|
|
|
427
426
|
}
|
|
428
427
|
),
|
|
429
428
|
(t == null ? void 0 : t.parent) && /* @__PURE__ */ n(M, { label: "Parent", value: t.parent.name, size: "small", fullWidth: !0, disabled: !0, sx: { mt: 2 } }),
|
|
430
|
-
/* @__PURE__ */ n(
|
|
431
|
-
/* @__PURE__ */ b(
|
|
429
|
+
/* @__PURE__ */ n(de, { onClickAway: () => m(!1), children: /* @__PURE__ */ b(f, { sx: { position: "relative", mt: 2 }, children: [
|
|
430
|
+
/* @__PURE__ */ b(f, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
|
|
432
431
|
/* @__PURE__ */ n(
|
|
433
|
-
|
|
432
|
+
f,
|
|
434
433
|
{
|
|
435
434
|
sx: { width: 30, height: 30, bgcolor: a.color, borderRadius: 1 },
|
|
436
|
-
onClick: () =>
|
|
435
|
+
onClick: () => m(!0)
|
|
437
436
|
}
|
|
438
437
|
),
|
|
439
438
|
/* @__PURE__ */ n(
|
|
@@ -448,34 +447,34 @@ function Ee({ open: e, initialLabel: t, onSubmit: i, onClose: o, ...l }) {
|
|
|
448
447
|
}
|
|
449
448
|
)
|
|
450
449
|
] }),
|
|
451
|
-
g && /* @__PURE__ */ n(
|
|
450
|
+
g && /* @__PURE__ */ n(f, { sx: { position: "absolute", top: 48, zIndex: 1 }, children: /* @__PURE__ */ n(ue, { color: a.color, onChangeComplete: z }) })
|
|
452
451
|
] }) })
|
|
453
452
|
] })
|
|
454
453
|
}
|
|
455
454
|
);
|
|
456
455
|
}
|
|
457
|
-
function
|
|
456
|
+
function We({ open: e, label: t, onSubmit: i, onClose: o, ...l }) {
|
|
458
457
|
return /* @__PURE__ */ n(
|
|
459
|
-
|
|
458
|
+
_,
|
|
460
459
|
{
|
|
461
460
|
open: e,
|
|
462
461
|
showCloseButton: !0,
|
|
463
462
|
maxWidth: "md",
|
|
464
463
|
title: "Delete",
|
|
465
|
-
actions: /* @__PURE__ */ b(
|
|
466
|
-
/* @__PURE__ */ n(
|
|
467
|
-
/* @__PURE__ */ n(
|
|
464
|
+
actions: /* @__PURE__ */ b(L, { children: [
|
|
465
|
+
/* @__PURE__ */ n(B, { color: "inherit", variant: "contained", size: "small", onClick: o, children: "Cancel" }),
|
|
466
|
+
/* @__PURE__ */ n(B, { color: "primary", variant: "contained", size: "small", onClick: i, children: "Delete" })
|
|
468
467
|
] }),
|
|
469
468
|
onClose: o,
|
|
470
469
|
...l,
|
|
471
|
-
children: /* @__PURE__ */ b(
|
|
472
|
-
/* @__PURE__ */ n(
|
|
470
|
+
children: /* @__PURE__ */ b(f, { width: 600, minHeight: 280, children: [
|
|
471
|
+
/* @__PURE__ */ n(Ce, { severity: "info", sx: { mb: 2 }, children: "Are you sure you want to delete these labels ?" }),
|
|
473
472
|
/* @__PURE__ */ n(W, { data: [t] })
|
|
474
473
|
] })
|
|
475
474
|
}
|
|
476
475
|
);
|
|
477
476
|
}
|
|
478
|
-
const
|
|
477
|
+
const Re = H(W)`
|
|
479
478
|
.label-tree-item {
|
|
480
479
|
&:before {
|
|
481
480
|
content: '';
|
|
@@ -496,9 +495,9 @@ const Me = J(W)`
|
|
|
496
495
|
padding: 0 16px;
|
|
497
496
|
}
|
|
498
497
|
`;
|
|
499
|
-
function
|
|
498
|
+
function Ve({ locale: e, value: t }) {
|
|
500
499
|
return /* @__PURE__ */ b(
|
|
501
|
-
|
|
500
|
+
f,
|
|
502
501
|
{
|
|
503
502
|
sx: {
|
|
504
503
|
display: "flex",
|
|
@@ -512,57 +511,57 @@ function De({ locale: e, value: t }) {
|
|
|
512
511
|
},
|
|
513
512
|
className: "label-translation-tag",
|
|
514
513
|
children: [
|
|
515
|
-
/* @__PURE__ */ n(
|
|
516
|
-
/* @__PURE__ */ n(
|
|
514
|
+
/* @__PURE__ */ n(f, { sx: { pr: 0.5, borderRight: 1, borderColor: "grey.400" }, children: e }),
|
|
515
|
+
/* @__PURE__ */ n(f, { sx: { pl: 0.5 }, children: t })
|
|
517
516
|
]
|
|
518
517
|
}
|
|
519
518
|
);
|
|
520
519
|
}
|
|
521
|
-
function
|
|
522
|
-
const [o, l] =
|
|
523
|
-
const u = (C,
|
|
520
|
+
function dt({ data: e, api: t, ...i }) {
|
|
521
|
+
const [o, l] = A(null), [r, a] = A(null), [d, h] = A(Z(e)), x = N(() => P(d), [d]), g = N(() => {
|
|
522
|
+
const u = (C, S) => C.map((v) => (S && (v.parent = S), v.children && (v.children = u(v.children, v)), v));
|
|
524
523
|
return u(d);
|
|
525
|
-
}, [d]),
|
|
526
|
-
var C,
|
|
527
|
-
u.parent ? (u.parent.children = (
|
|
524
|
+
}, [d]), m = (u) => {
|
|
525
|
+
var C, S;
|
|
526
|
+
u.parent ? (u.parent.children = (S = (C = u.parent) == null ? void 0 : C.children) == null ? void 0 : S.map((v) => v.id === u.id ? { ...u } : v), m(u.parent)) : h(d.map((v) => v.id === u.id ? { ...u } : v));
|
|
528
527
|
}, y = (u) => {
|
|
529
528
|
u.parent ? (u.parent.children = u.parent.children || [], u.parent.children.push(u), h([...d])) : h([...d, u]);
|
|
530
529
|
}, z = (u) => {
|
|
531
530
|
var C;
|
|
532
|
-
u.parent ? u.parent.children = (C = u.parent.children) == null ? void 0 : C.filter((
|
|
531
|
+
u.parent ? u.parent.children = (C = u.parent.children) == null ? void 0 : C.filter((S) => S.id !== u.id) : h(d.filter((S) => S.id !== u.id));
|
|
533
532
|
}, c = (u) => {
|
|
534
533
|
if (o)
|
|
535
534
|
return;
|
|
536
535
|
l({ id: "", name: "New label", parent: u, color: "#dddddd" });
|
|
537
536
|
}, s = (u) => {
|
|
538
537
|
o || l(u);
|
|
539
|
-
},
|
|
538
|
+
}, w = async (u) => {
|
|
540
539
|
if (!o)
|
|
541
540
|
return;
|
|
542
|
-
const { parent: C, children:
|
|
543
|
-
o.id ? (await t.updateLabel({ ...
|
|
541
|
+
const { parent: C, children: S, translation: v, ...T } = u;
|
|
542
|
+
o.id ? (await t.updateLabel({ ...T, translation: JSON.stringify(v), parentId: C == null ? void 0 : C.id }), m(u)) : (await t.createLabel({ ...T, translation: JSON.stringify(v), parentId: C == null ? void 0 : C.id }), y(u)), l(null);
|
|
544
543
|
}, p = async () => {
|
|
545
544
|
r && (await t.deleteLabel(r.id), z(r), a(null));
|
|
546
|
-
}, I = (u, C) => /* @__PURE__ */ b(
|
|
547
|
-
/* @__PURE__ */ b(
|
|
548
|
-
/* @__PURE__ */ n(
|
|
549
|
-
C.translation && /* @__PURE__ */ n(
|
|
550
|
-
var
|
|
551
|
-
const v = (
|
|
552
|
-
return v ? /* @__PURE__ */ n(
|
|
545
|
+
}, I = (u, C) => /* @__PURE__ */ b(L, { children: [
|
|
546
|
+
/* @__PURE__ */ b(f, { sx: { display: "flex", alignItems: "center", flexWrap: "wrap" }, className: "label-name", children: [
|
|
547
|
+
/* @__PURE__ */ n(f, { children: u }),
|
|
548
|
+
C.translation && /* @__PURE__ */ n(f, { sx: { display: "flex", alignItems: "center", gap: 0.5, ml: 2 }, className: "label-translation", children: Object.keys(C.translation).map((S) => {
|
|
549
|
+
var T;
|
|
550
|
+
const v = (T = C.translation) == null ? void 0 : T[S];
|
|
551
|
+
return v ? /* @__PURE__ */ n(Ve, { locale: S, value: v }, S) : null;
|
|
553
552
|
}) })
|
|
554
553
|
] }),
|
|
555
|
-
/* @__PURE__ */ b(
|
|
556
|
-
/* @__PURE__ */ n(
|
|
557
|
-
/* @__PURE__ */ n(
|
|
558
|
-
/* @__PURE__ */ n(
|
|
554
|
+
/* @__PURE__ */ b(f, { sx: { display: "flex", gap: 1, flex: "0 0 auto" }, className: "label-action", children: [
|
|
555
|
+
/* @__PURE__ */ n(j, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => c(C), children: /* @__PURE__ */ n(ee, { sx: { fontSize: 20 } }) }),
|
|
556
|
+
/* @__PURE__ */ n(j, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => s(C), children: /* @__PURE__ */ n(te, { sx: { fontSize: 18 } }) }),
|
|
557
|
+
/* @__PURE__ */ n(j, { color: "inherit", size: "small", sx: { color: "grey.500" }, onClick: () => a(C), children: /* @__PURE__ */ n(ne, { sx: { fontSize: 20 } }) })
|
|
559
558
|
] })
|
|
560
559
|
] });
|
|
561
|
-
return /* @__PURE__ */ b(
|
|
562
|
-
/* @__PURE__ */ b(
|
|
560
|
+
return /* @__PURE__ */ b(f, { ...i, className: "label-container", children: [
|
|
561
|
+
/* @__PURE__ */ b(f, { sx: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
|
|
563
562
|
/* @__PURE__ */ n(ce, { component: "h2", variant: "h6", children: "Manage labels" }),
|
|
564
563
|
/* @__PURE__ */ n(
|
|
565
|
-
|
|
564
|
+
B,
|
|
566
565
|
{
|
|
567
566
|
color: "primary",
|
|
568
567
|
variant: "contained",
|
|
@@ -573,25 +572,25 @@ function lt({ data: e, api: t, ...i }) {
|
|
|
573
572
|
}
|
|
574
573
|
)
|
|
575
574
|
] }),
|
|
576
|
-
/* @__PURE__ */ b(
|
|
577
|
-
/* @__PURE__ */ b(
|
|
575
|
+
/* @__PURE__ */ b(f, { sx: { mt: 2, border: 1, borderColor: "grey.300", borderRadius: 1, overflow: "hidden" }, children: [
|
|
576
|
+
/* @__PURE__ */ b(f, { sx: { p: 2, fontSize: 14, fontWeight: "bold", bgcolor: "grey.200" }, className: "label-header", children: [
|
|
578
577
|
x.length,
|
|
579
578
|
" labels"
|
|
580
579
|
] }),
|
|
581
|
-
/* @__PURE__ */ n(
|
|
580
|
+
/* @__PURE__ */ n(f, { sx: { pt: 0.5 }, children: /* @__PURE__ */ n(Re, { data: g, selected: [], renderItem: I, rowHeight: 64 }) })
|
|
582
581
|
] }),
|
|
583
582
|
/* @__PURE__ */ n(
|
|
584
|
-
|
|
583
|
+
Fe,
|
|
585
584
|
{
|
|
586
585
|
open: !!o,
|
|
587
586
|
onClose: () => l(null),
|
|
588
587
|
initialLabel: o,
|
|
589
|
-
onSubmit:
|
|
588
|
+
onSubmit: w
|
|
590
589
|
},
|
|
591
590
|
o == null ? void 0 : o.id
|
|
592
591
|
),
|
|
593
592
|
/* @__PURE__ */ n(
|
|
594
|
-
|
|
593
|
+
We,
|
|
595
594
|
{
|
|
596
595
|
open: !!r,
|
|
597
596
|
onClose: () => a(null),
|
|
@@ -602,14 +601,14 @@ function lt({ data: e, api: t, ...i }) {
|
|
|
602
601
|
)
|
|
603
602
|
] });
|
|
604
603
|
}
|
|
605
|
-
const G =
|
|
604
|
+
const G = $({}), U = () => q(G), ut = () => {
|
|
606
605
|
const { updateLabels: e } = U();
|
|
607
606
|
F(() => () => {
|
|
608
607
|
e();
|
|
609
608
|
}, []);
|
|
610
609
|
};
|
|
611
|
-
function
|
|
612
|
-
const { locale: i } = Q(), [o, l] =
|
|
610
|
+
function ht({ fetchLabels: e, children: t }) {
|
|
611
|
+
const { locale: i } = Q(), [o, l] = A({
|
|
613
612
|
loading: !0,
|
|
614
613
|
labels: [],
|
|
615
614
|
updateCounter: 1
|
|
@@ -617,18 +616,18 @@ function it({ fetchLabels: e, children: t }) {
|
|
|
617
616
|
F(() => {
|
|
618
617
|
(async () => {
|
|
619
618
|
try {
|
|
620
|
-
l((
|
|
619
|
+
l((w) => ({ ...w, loading: !0 }));
|
|
621
620
|
const s = await e();
|
|
622
|
-
l((
|
|
621
|
+
l((w) => ({ ...w, loading: !1, labels: Ne(s) }));
|
|
623
622
|
} catch (s) {
|
|
624
|
-
console.error(s), l((
|
|
623
|
+
console.error(s), l((w) => ({ ...w, loading: !1, labels: [] }));
|
|
625
624
|
}
|
|
626
625
|
})();
|
|
627
626
|
}, [o.updateCounter]);
|
|
628
|
-
const r =
|
|
627
|
+
const r = N(() => {
|
|
629
628
|
var s;
|
|
630
|
-
return (s = o.labels) != null && s.length ? P(o.labels).reduce((
|
|
631
|
-
}, [o.labels]), a =
|
|
629
|
+
return (s = o.labels) != null && s.length ? P(o.labels).reduce((w, p) => ({ ...w, [p.id]: p }), {}) : {};
|
|
630
|
+
}, [o.labels]), a = k(
|
|
632
631
|
(c) => {
|
|
633
632
|
var s;
|
|
634
633
|
return {
|
|
@@ -637,71 +636,91 @@ function it({ fetchLabels: e, children: t }) {
|
|
|
637
636
|
};
|
|
638
637
|
},
|
|
639
638
|
[i]
|
|
640
|
-
), d =
|
|
639
|
+
), d = k(
|
|
641
640
|
(c) => c.filter(Boolean).map((s) => r[s]).map(a),
|
|
642
641
|
[r, a]
|
|
643
|
-
), h =
|
|
642
|
+
), h = k((c) => {
|
|
644
643
|
let { parent: s } = c;
|
|
645
|
-
const
|
|
644
|
+
const w = [];
|
|
646
645
|
for (; s; )
|
|
647
|
-
|
|
648
|
-
return
|
|
649
|
-
}, []), x =
|
|
650
|
-
(c) => [...h(c), c].map(a).map((
|
|
646
|
+
w.unshift(s), s = s.parent;
|
|
647
|
+
return w;
|
|
648
|
+
}, []), x = k(
|
|
649
|
+
(c) => [...h(c), c].map(a).map((w) => w.name).join(" / "),
|
|
651
650
|
[a, h]
|
|
652
|
-
), g =
|
|
651
|
+
), g = k((c) => (c == null ? void 0 : c.split(",")) || [], []), m = k((c = []) => {
|
|
653
652
|
if (c != null && c.length)
|
|
654
653
|
return c.join(",");
|
|
655
|
-
}, []), y =
|
|
654
|
+
}, []), y = N(() => o.labels.map(a), [o.labels, a]), z = N(() => ({
|
|
656
655
|
loading: o.loading,
|
|
657
656
|
labels: o.labels || [],
|
|
658
657
|
updateLabels: () => l((c) => ({ ...c, updateCounter: ++o.updateCounter })),
|
|
659
658
|
getLabelsById: d,
|
|
660
659
|
parseLabelIds: g,
|
|
661
|
-
stringifyLabelIds:
|
|
660
|
+
stringifyLabelIds: m,
|
|
662
661
|
localizedLabels: y,
|
|
663
662
|
flattenedLabels: P(y || []),
|
|
664
663
|
getFullLabelName: x
|
|
665
|
-
}), [o, d, g,
|
|
664
|
+
}), [o, d, g, m, y, x]);
|
|
666
665
|
return /* @__PURE__ */ n(G.Provider, { value: z, children: t });
|
|
667
666
|
}
|
|
668
|
-
|
|
669
|
-
|
|
667
|
+
const $e = (e) => {
|
|
668
|
+
try {
|
|
669
|
+
return ge(e, "#fff") > 3.5 ? "#fff" : "#111";
|
|
670
|
+
} catch {
|
|
671
|
+
return "#111";
|
|
672
|
+
}
|
|
673
|
+
}, qe = (e, t) => {
|
|
674
|
+
try {
|
|
675
|
+
if (e)
|
|
676
|
+
return xe(e, t);
|
|
677
|
+
} catch {
|
|
678
|
+
return e;
|
|
679
|
+
}
|
|
680
|
+
};
|
|
681
|
+
function pt({ labels: e, editable: t, onChange: i, sx: o, renderLabel: l }) {
|
|
682
|
+
const r = !(e != null && e.length), { labels: a, loading: d, getLabelsById: h, getFullLabelName: x } = U(), [g, m] = A(!1);
|
|
670
683
|
if (d || !t && r)
|
|
671
684
|
return null;
|
|
672
685
|
const y = (s) => {
|
|
673
686
|
i == null || i(s), setTimeout(() => {
|
|
674
|
-
|
|
687
|
+
m(!1);
|
|
675
688
|
}, 300);
|
|
676
689
|
};
|
|
677
690
|
if (g)
|
|
678
|
-
return /* @__PURE__ */ n(
|
|
691
|
+
return /* @__PURE__ */ n(pe, { onClickAway: () => g && m(!1), children: /* @__PURE__ */ n("div", { children: /* @__PURE__ */ n(Pe, { data: a, value: e || [], onChange: y }) }) });
|
|
679
692
|
const z = h(e || []), c = [
|
|
680
693
|
{ display: "flex", gap: 1, alignItems: "center", flexWrap: "wrap" },
|
|
681
694
|
...Array.isArray(o) ? o : [o]
|
|
682
695
|
];
|
|
683
|
-
return /* @__PURE__ */ b(
|
|
696
|
+
return /* @__PURE__ */ b(O, { sx: c, children: [
|
|
684
697
|
z.map((s) => s ? l ? l(s) : /* @__PURE__ */ n(
|
|
685
698
|
fe,
|
|
686
699
|
{
|
|
687
700
|
label: x(s),
|
|
688
701
|
variant: "filled",
|
|
689
702
|
size: "small",
|
|
690
|
-
sx: {
|
|
703
|
+
sx: {
|
|
704
|
+
height: 20,
|
|
705
|
+
borderRadius: 1,
|
|
706
|
+
fontSize: 12,
|
|
707
|
+
bgcolor: qe(s.color, 0.8),
|
|
708
|
+
color: $e(s.color)
|
|
709
|
+
}
|
|
691
710
|
},
|
|
692
711
|
s.id
|
|
693
712
|
) : null),
|
|
694
|
-
t && !r && /* @__PURE__ */ n(
|
|
695
|
-
t && r && /* @__PURE__ */ n(
|
|
713
|
+
t && !r && /* @__PURE__ */ n(K, { color: "inherit", size: "small", onClick: () => m(!0), sx: { color: "grey.400" }, children: /* @__PURE__ */ n(re, { sx: { fontSize: 20 } }) }),
|
|
714
|
+
t && r && /* @__PURE__ */ n(me, { color: "inherit", variant: "outlined", startIcon: /* @__PURE__ */ n(oe, {}), onClick: () => m(!0), children: "Edit labels" })
|
|
696
715
|
] });
|
|
697
716
|
}
|
|
698
717
|
export {
|
|
699
|
-
|
|
700
|
-
|
|
718
|
+
dt as LabelManager,
|
|
719
|
+
Pe as LabelPicker,
|
|
701
720
|
W as LabelTree,
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
721
|
+
pt as Labels,
|
|
722
|
+
ht as LabelsProvider,
|
|
723
|
+
Ne as transformLabels,
|
|
705
724
|
U as useLabelsContext,
|
|
706
|
-
|
|
725
|
+
ut as useLabelsUpdateOnDestroy
|
|
707
726
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react"),require("@mui/icons-material"),require("@mui/material/Box"),require("@mui/material/styles"),require("react-arborist"),require("@iconify/react"),require("lodash/omit"),require("react-select"),require("@mui/material/Typography"),require("@mui/material/Button"),require("@mui/material/IconButton"),require("@mui/material/TextField"),require("@mui/material/ClickAwayListener"),require("react-color"),require("@arcblock/ux/lib/Dialog"),require("@mui/material"),require("@mui/material/Popover"),require("@arcblock/ux/lib/Locale/context"),require("@mui/material/Alert")
|
|
1
|
+
(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react"),require("@mui/icons-material"),require("@mui/material/Box"),require("@mui/material/styles"),require("react-arborist"),require("@iconify/react"),require("lodash/omit"),require("react-select"),require("@mui/material/Typography"),require("@mui/material/Button"),require("@mui/material/IconButton"),require("@mui/material/TextField"),require("@mui/material/ClickAwayListener"),require("react-color"),require("@arcblock/ux/lib/Dialog"),require("@mui/material"),require("@mui/material/Popover"),require("@arcblock/ux/lib/Locale/context"),require("@mui/material/Alert")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","@mui/icons-material","@mui/material/Box","@mui/material/styles","react-arborist","@iconify/react","lodash/omit","react-select","@mui/material/Typography","@mui/material/Button","@mui/material/IconButton","@mui/material/TextField","@mui/material/ClickAwayListener","react-color","@arcblock/ux/lib/Dialog","@mui/material","@mui/material/Popover","@arcblock/ux/lib/Locale/context","@mui/material/Alert"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p.DiscussKitComponents={},p.jsxRuntime,p.React,p.iconsMaterial,p.Box,p.styles,p.reactArborist,p.react$1,p.omit,p.Select,p.Typography,p.Button,p.IconButton,p.TextField,p.ClickAwayListener,p.reactColor,p.Dialog,p.material,p.Popover,p.context,p.Alert))})(this,function(p,e,h,A,y,j,Q,U,Y,E,Z,L,M,F,G,X,W,k,B,V,R){"use strict";const ee=r=>e.jsx("svg",{viewBox:"0 0 24 24",width:"1.2em",height:"1.2em",...r,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"})}),re=r=>e.jsx("svg",{viewBox:"0 0 24 24",width:"1.2em",height:"1.2em",...r,children:e.jsx("path",{fill:"currentColor",d:"m10 16.4l-4-4L7.4 11l2.6 2.6L16.6 7L18 8.4Z"})}),H=h.createContext({});function te({selectable:r=!1,selected:t=[],onSelect:a,renderItem:o,children:s}){const n=f=>t.indexOf(f)!==-1,l=f=>{Array.from(new Set(t).add(f)),a==null||a(f)},d=h.useMemo(()=>({selectable:r,selected:t,isSelected:n,select:l,renderItem:o}),[t]);return e.jsx(H.Provider,{value:d,children:s})}const ne=r=>{var t;return r.isLeaf||!((t=r.data.children)!=null&&t.length)};function oe({node:r}){return ne(r)?e.jsx("span",{}):r.isOpen?e.jsx(A.ExpandMore,{style:{fontSize:20}}):e.jsx(A.ExpandMore,{style:{fontSize:20,transform:"rotate(-90deg)"}})}function se({node:r,style:t,dragHandle:a}){const{selectable:o,select:s,isSelected:n,renderItem:l}=h.useContext(H),{data:d}=r,f=d.icon?e.jsx(U.Icon,{icon:d.icon,style:{fontSize:18}}):e.jsx(ee,{style:{fontSize:18,color:d.color||"#ddd"}}),x=b=>{b.stopPropagation(),r.isInternal&&r.toggle()},C=b=>{b.stopPropagation(),o&&s(r.id)},m=e.jsxs(e.Fragment,{children:[e.jsxs(y,{sx:{display:"flex",alignItems:"center",flex:1},children:[e.jsx(y,{sx:{display:"flex",cursor:"pointer"},onClick:x,children:e.jsx(oe,{node:r})}),e.jsx(y,{sx:{display:"flex",alignItems:"center",width:22,height:22},children:f}),e.jsx(y,{component:"span",sx:{color:"grey.700"},children:r.data.name})]}),o&&n(r.id)&&e.jsx(re,{})]});return e.jsxs(y,{className:"label-tree-item",style:t,sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},ref:a,onClick:C,children:[!l&&m,!!l&&l(m,r.data)]})}const le=j.styled(y)`
|
|
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
|
|
14
|
+
`;function O({data:r,selectable:t,selected:a=[],onSelect:o,rowHeight:s=28,renderItem:n,sx:l,...d}){const f=h.useRef(),x=[...Array.isArray(l)?l:[l]],[C,m]=h.useState(0),b=h.useCallback(()=>{var c,i;m((((i=(c=f.current)==null?void 0:c.visibleNodes)==null?void 0:i.length)||0)*s)},[s]);h.useEffect(()=>{b()},[r,b]);const T=()=>{setTimeout(b)};return e.jsx(te,{selectable:t,selected:a,onSelect:o,renderItem:n,children:e.jsx(le,{...d,sx:x,children:e.jsx(Q.Tree,{data:r,rowHeight:s,height:C,indent:32,ref:f,onToggle:T,children:se})})})}const q=r=>r.reduce((t,a)=>{var o;return t.push(a),(o=a.children)!=null&&o.length&&t.push(...q(a.children)),t},[]),J=r=>r.map(t=>{var a;return(a=t.children)!=null&&a.length&&(t.children=J(t.children)),t}),ae=(r,t=null)=>{try{return JSON.parse(r)}catch{return t}},_=r=>{const t=r.reduce((s,n)=>(s[n.id]=s[n.id]||{},n.parentId&&(s[n.id].parent=n.parentId,s[n.parentId]=s[n.parentId]||{},s[n.parentId].children=s[n.parentId].children||[],s[n.parentId].children.push(n.id)),s),{}),a=r.map(({parentId:s,translation:n,...l})=>({...l,translation:ae(n),children:[]})),o=a.reduce((s,n)=>({...s,[n.id]:n}),{});return a.forEach(s=>{const n=t[s.id];n.parent&&o[n.parent]&&(s.parent=o[n.parent]),n.children&&(s.children=n.children.map(l=>o[l]))}),a.filter(s=>!s.parent)},ie=r=>{const{options:t,getValue:a,selectProps:o,selectOption:s}=r,n=a(),l=d=>{const f=t.find(x=>x.data.id===d);f&&s(f)};return e.jsxs(e.Fragment,{children:[e.jsx(E.components.MenuList,{...Y(r,["addon"]),children:e.jsx(y,{sx:{px:2,py:1},children:e.jsx(O,{data:o.data,selectable:!0,onSelect:l,selected:n.map(d=>d.data.id)})})}),r.addon]})},ce=({children:r,...t})=>{const[a,o]=r,s=Array.isArray(a)?a.length:0;return e.jsxs(E.components.ValueContainer,{...t,children:[e.jsx(y,{component:"span",sx:{fontSize:13,fontWeight:"bold"},children:s?"Labels":"Filter by labels"}),!!s&&e.jsx(y,{sx:{display:"inline-flex",justifyContent:"center",alignItems:"center",width:22,height:22,ml:1,borderRadius:"100%",fontSize:12,bgcolor:"grey.200"},children:s}),o]})},de={control:r=>({...r,minHeight:31}),valueContainer:r=>({...r,display:"flex"}),dropdownIndicator:r=>({...r,padding:"0 4px"}),clearIndicator:r=>({...r,padding:"4px"})};function K({data:r,value:t=[],editable:a=!1,addon:o,onChange:s,compact:n,isMulti:l=!0,maxHeight:d=264,...f}){const x=h.useRef(null),C=h.useMemo(()=>q(r).map(g=>({data:g,label:g.name,value:g.id})),[r]),m=C.reduce((g,z)=>({...g,[z.data.id]:z}),{}),b=Array.isArray(t)?t:[t],T=b.map(g=>m[g]),c=h.useRef({prev:b.map(g=>{var z;return((z=m[g])==null?void 0:z.data)||""})}),i=(g,z)=>{!l||!Array.isArray(g)?s(g?[g.data]:[]):c.current.current=g.map(u=>u.data),["clear","remove-value"].includes(z.action)&&x.current&&setTimeout(()=>{var u;return(u=x==null?void 0:x.current)==null?void 0:u.blur()},1)},w=()=>{c.current.current&&JSON.stringify(c.current.prev.map(z=>z.id))!==JSON.stringify(c.current.current.map(z=>z.id))&&(s(c.current.current),c.current.prev=c.current.current)};return e.jsx(y,{...f,children:e.jsx(E,{ref:x,defaultValue:T,options:C,onChange:i,components:{MenuList:g=>e.jsx(ie,{...g,addon:o}),...n&&{ValueContainer:ce}},placeholder:"Select labels",styles:{...n&&de,menu:g=>({...g,...a&&{paddingBottom:"36px"},zIndex:99}),menuList:g=>({...g,overflowY:"auto",maxHeight:`${d}px`})},theme:g=>({...g,colors:{...g.colors,primary25:"#ddd",primary50:"#ddd",primary:"#ddd"}}),isSearchable:!1,isMulti:l,closeMenuOnSelect:!l,onMenuClose:w,isClearable:!0,data:r})})}var P=function(){return P=Object.assign||function(t){for(var a,o=1,s=arguments.length;o<s;o++){a=arguments[o];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t},P.apply(this,arguments)};function ue(r,t){var a=typeof Symbol=="function"&&r[Symbol.iterator];if(!a)return r;var o=a.call(r),s,n=[],l;try{for(;(t===void 0||t-- >0)&&!(s=o.next()).done;)n.push(s.value)}catch(d){l={error:d}}finally{try{s&&!s.done&&(a=o.return)&&a.call(o)}finally{if(l)throw l.error}}return n}typeof SuppressedError=="function"&&SuppressedError;var he=function(r){return typeof r=="function"},pe=function(r){var t=ue(h.useState(r),2),a=t[0],o=t[1],s=h.useCallback(function(n){o(function(l){var d=he(n)?n(l):n;return d?P(P({},l),d):l})},[]);return[a,s]};const fe=pe;function ge({I18NProps:r,...t}){const{languages:a}=V.useLocaleContext(),{translation:o,onChange:s}=r,[n,l]=h.useState(null),d=C=>{const m=C.currentTarget.closest(".MuiInputBase-root");m&&l(m)},f=()=>{l(null)},x=a.filter(C=>C.code!=="en");return e.jsx(k.TextField,{...t,InputProps:{endAdornment:e.jsxs(k.InputAdornment,{position:"end",children:[e.jsx(k.IconButton,{edge:"end",onClick:d,children:e.jsx(A.Translate,{})}),e.jsx(B,{open:!!n,anchorEl:n,onClose:f,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(k.Box,{sx:{p:2},children:x.map(({code:C,name:m})=>e.jsxs(k.Box,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between","& + &":{mt:1}},children:[e.jsx(k.Box,{sx:{flex:"0 0 120px"},children:m}),e.jsx(k.Box,{sx:{flex:1},children:e.jsx(k.TextField,{value:o[C]||"",size:"small",sx:{width:1},onChange:b=>s({...o,[C]:b.target.value})})})]},C))})})]})}})}function ye({open:r,initialLabel:t,onSubmit:a,onClose:o,...s}){const n=!(t!=null&&t.id),[l,d]=fe({name:(t==null?void 0:t.name)||"",color:(t==null?void 0:t.color)||"#ddd",slug:(t==null?void 0:t.id)||"",translation:(t==null?void 0:t.translation)||{}}),f=i=>/^#([0-9A-F]{3}){1,2}$/i.test(i),x=h.useMemo(()=>n?l.name&&l.color&&l.slug&&f(l.color):l.name&&l.color&&f(l.color),[l,n]),[C,m]=h.useState(!1),b=()=>{a({...t,name:l.name,color:l.color,id:l.slug,translation:l.translation})},T=i=>{d({color:i.hex}),setTimeout(()=>m(!1))},c=i=>{d({color:i.target.value})};return e.jsx(W,{open:r,showCloseButton:!0,maxWidth:"lg",title:n?"Create label":"Edit label",actions:e.jsxs(e.Fragment,{children:[e.jsx(L,{color:"inherit",variant:"contained",size:"small",onClick:o,children:"Cancel"}),e.jsx(L,{color:"primary",variant:"contained",size:"small",onClick:b,disabled:!x,children:n?"Create":"Save Changes"})]}),onClose:o,...s,children:e.jsxs(y,{width:600,minHeight:280,children:[e.jsx(ge,{label:"Name",value:l.name,placeholder:"New label",size:"small",fullWidth:!0,onChange:i=>d({name:i.target.value}),I18NProps:{translation:l.translation,onChange:i=>d({translation:i})}}),e.jsx(F,{label:"Slug",value:l.slug,size:"small",fullWidth:!0,disabled:!n,onChange:i=>d({slug:i.target.value}),sx:{mt:2}}),(t==null?void 0:t.parent)&&e.jsx(F,{label:"Parent",value:t.parent.name,size:"small",fullWidth:!0,disabled:!0,sx:{mt:2}}),e.jsx(G,{onClickAway:()=>m(!1),children:e.jsxs(y,{sx:{position:"relative",mt:2},children:[e.jsxs(y,{sx:{display:"flex",alignItems:"center",gap:1},children:[e.jsx(y,{sx:{width:30,height:30,bgcolor:l.color,borderRadius:1},onClick:()=>m(!0)}),e.jsx(F,{label:"",value:l.color,size:"small",onChange:c,inputProps:{maxLength:7},sx:{width:100,".MuiInputBase-root":{height:32}}})]}),C&&e.jsx(y,{sx:{position:"absolute",top:48,zIndex:1},children:e.jsx(X.GithubPicker,{color:l.color,onChangeComplete:T})})]})})]})})}function me({open:r,label:t,onSubmit:a,onClose:o,...s}){return e.jsx(W,{open:r,showCloseButton:!0,maxWidth:"md",title:"Delete",actions:e.jsxs(e.Fragment,{children:[e.jsx(L,{color:"inherit",variant:"contained",size:"small",onClick:o,children:"Cancel"}),e.jsx(L,{color:"primary",variant:"contained",size:"small",onClick:a,children:"Delete"})]}),onClose:o,...s,children:e.jsxs(y,{width:600,minHeight:280,children:[e.jsx(R,{severity:"info",sx:{mb:2},children:"Are you sure you want to delete these labels ?"}),e.jsx(O,{data:[t]})]})})}const Ce=j.styled(O)`
|
|
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
|
|
34
|
+
`;function xe({locale:r,value:t}){return e.jsxs(y,{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(y,{sx:{pr:.5,borderRight:1,borderColor:"grey.400"},children:r}),e.jsx(y,{sx:{pl:.5},children:t})]})}function be({data:r,api:t,...a}){const[o,s]=h.useState(null),[n,l]=h.useState(null),[d,f]=h.useState(J(r)),x=h.useMemo(()=>q(d),[d]),C=h.useMemo(()=>{const u=(v,I)=>v.map(S=>(I&&(S.parent=I),S.children&&(S.children=u(S.children,S)),S));return u(d)},[d]),m=u=>{var v,I;u.parent?(u.parent.children=(I=(v=u.parent)==null?void 0:v.children)==null?void 0:I.map(S=>S.id===u.id?{...u}:S),m(u.parent)):f(d.map(S=>S.id===u.id?{...u}:S))},b=u=>{u.parent?(u.parent.children=u.parent.children||[],u.parent.children.push(u),f([...d])):f([...d,u])},T=u=>{var v;u.parent?u.parent.children=(v=u.parent.children)==null?void 0:v.filter(I=>I.id!==u.id):f(d.filter(I=>I.id!==u.id))},c=u=>{if(o)return;s({id:"",name:"New label",parent:u,color:"#dddddd"})},i=u=>{o||s(u)},w=async u=>{if(!o)return;const{parent:v,children:I,translation:S,...N}=u;o.id?(await t.updateLabel({...N,translation:JSON.stringify(S),parentId:v==null?void 0:v.id}),m(u)):(await t.createLabel({...N,translation:JSON.stringify(S),parentId:v==null?void 0:v.id}),b(u)),s(null)},g=async()=>{n&&(await t.deleteLabel(n.id),T(n),l(null))},z=(u,v)=>e.jsxs(e.Fragment,{children:[e.jsxs(y,{sx:{display:"flex",alignItems:"center",flexWrap:"wrap"},className:"label-name",children:[e.jsx(y,{children:u}),v.translation&&e.jsx(y,{sx:{display:"flex",alignItems:"center",gap:.5,ml:2},className:"label-translation",children:Object.keys(v.translation).map(I=>{var N;const S=(N=v.translation)==null?void 0:N[I];return S?e.jsx(xe,{locale:I,value:S},I):null})})]}),e.jsxs(y,{sx:{display:"flex",gap:1,flex:"0 0 auto"},className:"label-action",children:[e.jsx(M,{color:"inherit",size:"small",sx:{color:"grey.500"},onClick:()=>c(v),children:e.jsx(A.Add,{sx:{fontSize:20}})}),e.jsx(M,{color:"inherit",size:"small",sx:{color:"grey.500"},onClick:()=>i(v),children:e.jsx(A.EditOutlined,{sx:{fontSize:18}})}),e.jsx(M,{color:"inherit",size:"small",sx:{color:"grey.500"},onClick:()=>l(v),children:e.jsx(A.DeleteOutlineOutlined,{sx:{fontSize:20}})})]})]});return e.jsxs(y,{...a,className:"label-container",children:[e.jsxs(y,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[e.jsx(Z,{component:"h2",variant:"h6",children:"Manage labels"}),e.jsx(L,{color:"primary",variant:"contained",size:"small",sx:{textTransform:"none"},onClick:()=>c(),children:"New label"})]}),e.jsxs(y,{sx:{mt:2,border:1,borderColor:"grey.300",borderRadius:1,overflow:"hidden"},children:[e.jsxs(y,{sx:{p:2,fontSize:14,fontWeight:"bold",bgcolor:"grey.200"},className:"label-header",children:[x.length," labels"]}),e.jsx(y,{sx:{pt:.5},children:e.jsx(Ce,{data:C,selected:[],renderItem:z,rowHeight:64})})]}),e.jsx(ye,{open:!!o,onClose:()=>s(null),initialLabel:o,onSubmit:w},o==null?void 0:o.id),e.jsx(me,{open:!!n,onClose:()=>l(null),label:n,onSubmit:g},n==null?void 0:n.id)]})}const $=h.createContext({}),D=()=>h.useContext($),ve=()=>{const{updateLabels:r}=D();h.useEffect(()=>()=>{r()},[])};function Se({fetchLabels:r,children:t}){const{locale:a}=V.useLocaleContext(),[o,s]=h.useState({loading:!0,labels:[],updateCounter:1});h.useEffect(()=>{(async()=>{try{s(w=>({...w,loading:!0}));const i=await r();s(w=>({...w,loading:!1,labels:_(i)}))}catch(i){console.error(i),s(w=>({...w,loading:!1,labels:[]}))}})()},[o.updateCounter]);const n=h.useMemo(()=>{var i;return(i=o.labels)!=null&&i.length?q(o.labels).reduce((w,g)=>({...w,[g.id]:g}),{}):{}},[o.labels]),l=h.useCallback(c=>{var i;return{...c,name:((i=c.translation)==null?void 0:i[a])||c.name}},[a]),d=h.useCallback(c=>c.filter(Boolean).map(i=>n[i]).map(l),[n,l]),f=h.useCallback(c=>{let{parent:i}=c;const w=[];for(;i;)w.unshift(i),i=i.parent;return w},[]),x=h.useCallback(c=>[...f(c),c].map(l).map(w=>w.name).join(" / "),[l,f]),C=h.useCallback(c=>(c==null?void 0:c.split(","))||[],[]),m=h.useCallback((c=[])=>{if(c!=null&&c.length)return c.join(",")},[]),b=h.useMemo(()=>o.labels.map(l),[o.labels,l]),T=h.useMemo(()=>({loading:o.loading,labels:o.labels||[],updateLabels:()=>s(c=>({...c,updateCounter:++o.updateCounter})),getLabelsById:d,parseLabelIds:C,stringifyLabelIds:m,localizedLabels:b,flattenedLabels:q(b||[]),getFullLabelName:x}),[o,d,C,m,b,x]);return e.jsx($.Provider,{value:T,children:t})}const we=r=>{try{return k.getContrastRatio(r,"#fff")>3.5?"#fff":"#111"}catch{return"#111"}},ke=(r,t)=>{try{if(r)return k.alpha(r,t)}catch{return r}};function Ie({labels:r,editable:t,onChange:a,sx:o,renderLabel:s}){const n=!(r!=null&&r.length),{labels:l,loading:d,getLabelsById:f,getFullLabelName:x}=D(),[C,m]=h.useState(!1);if(d||!t&&n)return null;const b=i=>{a==null||a(i),setTimeout(()=>{m(!1)},300)};if(C)return e.jsx(k.ClickAwayListener,{onClickAway:()=>C&&m(!1),children:e.jsx("div",{children:e.jsx(K,{data:l,value:r||[],onChange:b})})});const T=f(r||[]),c=[{display:"flex",gap:1,alignItems:"center",flexWrap:"wrap"},...Array.isArray(o)?o:[o]];return e.jsxs(k.Box,{sx:c,children:[T.map(i=>i?s?s(i):e.jsx(k.Chip,{label:x(i),variant:"filled",size:"small",sx:{height:20,borderRadius:1,fontSize:12,bgcolor:ke(i.color,.8),color:we(i.color)}},i.id):null),t&&!n&&e.jsx(k.IconButton,{color:"inherit",size:"small",onClick:()=>m(!0),sx:{color:"grey.400"},children:e.jsx(A.Edit,{sx:{fontSize:20}})}),t&&n&&e.jsx(k.Button,{color:"inherit",variant:"outlined",startIcon:e.jsx(A.LabelOutlined,{}),onClick:()=>m(!0),children:"Edit labels"})]})}p.LabelManager=be,p.LabelPicker=K,p.LabelTree=O,p.Labels=Ie,p.LabelsProvider=Se,p.transformLabels=_,p.useLabelsContext=D,p.useLabelsUpdateOnDestroy=ve,Object.defineProperty(p,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.144",
|
|
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": "2af06d02998788272e9397ec4d9a3af4125a4e8d"
|
|
79
79
|
}
|