@reportportal/ui-kit 0.0.1-alpha.167 → 0.0.1-alpha.168
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/bulkPanel.js +80 -78
- package/package.json +1 -1
package/dist/bulkPanel.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as n, jsxs as
|
|
2
|
-
import { useState as k, useRef as
|
|
1
|
+
import { jsx as n, jsxs as s, Fragment as y } from "react/jsx-runtime";
|
|
2
|
+
import { useState as k, useRef as U, useMemo as P, useCallback as _, useEffect as z } from "react";
|
|
3
3
|
import { createPortal as H } from "react-dom";
|
|
4
4
|
import { c as J } from "./bind-06a7ff84.js";
|
|
5
5
|
import { Scrollbars as Q } from "rc-scrollbars";
|
|
@@ -10,17 +10,17 @@ import { K as Z } from "./keyCodes-f63c0e11.js";
|
|
|
10
10
|
import { S as ee } from "./selection-9124d029.js";
|
|
11
11
|
import { Chip as ne } from "./chip.js";
|
|
12
12
|
import { B } from "./button-97d9e587.js";
|
|
13
|
-
import { Tooltip as
|
|
14
|
-
import { S as
|
|
13
|
+
import { Tooltip as te } from "./tooltip.js";
|
|
14
|
+
import { S as le } from "./chevronDownDropdown-0260bb66.js";
|
|
15
15
|
import { S as ie } from "./warning-537ead32.js";
|
|
16
16
|
import "./close-4d480ef7.js";
|
|
17
17
|
import "@floating-ui/react";
|
|
18
18
|
import "./floatingUi-41f8c7b5.js";
|
|
19
|
-
const
|
|
19
|
+
const ae = "_expanded_ue1t9_6", se = "_header_ue1t9_32", oe = "_tabs_ue1t9_119", ce = "_tab_ue1t9_119", re = "_active_ue1t9_146", de = "_item_ue1t9_99", me = {
|
|
20
20
|
"bulk-panel": "_bulk-panel_ue1t9_1",
|
|
21
|
-
expanded:
|
|
21
|
+
expanded: ae,
|
|
22
22
|
"panel-content": "_panel-content_ue1t9_16",
|
|
23
|
-
header:
|
|
23
|
+
header: se,
|
|
24
24
|
"header-actions": "_header-actions_ue1t9_43",
|
|
25
25
|
"warning-icon": "_warning-icon_ue1t9_49",
|
|
26
26
|
"info-message-container": "_info-message-container_ue1t9_58",
|
|
@@ -37,20 +37,20 @@ const se = "_expanded_ue1t9_6", ae = "_header_ue1t9_32", oe = "_tabs_ue1t9_119",
|
|
|
37
37
|
"items-list": "_items-list_ue1t9_167",
|
|
38
38
|
item: de,
|
|
39
39
|
"tooltip-wrapper": "_tooltip-wrapper_ue1t9_179"
|
|
40
|
-
},
|
|
40
|
+
}, t = J.bind(me), pe = {
|
|
41
41
|
selected: "selected",
|
|
42
42
|
clearSelection: "Clear selection",
|
|
43
43
|
selectedItems: "Selected items",
|
|
44
44
|
eligibleTab: "Eligible Items",
|
|
45
45
|
ineligibleTab: "Ineligible Items",
|
|
46
|
-
ineligibleInfoMessage: (i) => /* @__PURE__ */
|
|
46
|
+
ineligibleInfoMessage: (i) => /* @__PURE__ */ s(y, { children: [
|
|
47
47
|
"You have ",
|
|
48
48
|
/* @__PURE__ */ n("b", { children: i }),
|
|
49
49
|
" ineligible items"
|
|
50
50
|
] }),
|
|
51
51
|
cancelButton: (i) => `Cancel "${i}"`,
|
|
52
52
|
proceedButton: (i) => `Proceed with ${i} Eligible Items`
|
|
53
|
-
},
|
|
53
|
+
}, u = {
|
|
54
54
|
ELIGIBLE: "eligible",
|
|
55
55
|
INELIGIBLE: "ineligible"
|
|
56
56
|
}, Ge = ({
|
|
@@ -63,88 +63,90 @@ const se = "_expanded_ue1t9_6", ae = "_header_ue1t9_32", oe = "_tabs_ue1t9_119",
|
|
|
63
63
|
onRemoveItem: w,
|
|
64
64
|
onClearSelection: O
|
|
65
65
|
}) => {
|
|
66
|
-
const
|
|
66
|
+
const r = { ...pe, ...K }, [o, v] = k(!1), [I, C] = k(u.INELIGIBLE), [l, E] = k(null), S = U(null), d = l !== null, { eligibleItems: b, ineligibleItems: h } = P(() => {
|
|
67
67
|
var g;
|
|
68
|
-
if (!
|
|
68
|
+
if (!l)
|
|
69
69
|
return { eligibleItems: [], ineligibleItems: [] };
|
|
70
|
-
const e = ((g =
|
|
71
|
-
return { eligibleItems: i.filter((L) => !
|
|
72
|
-
}, [i,
|
|
73
|
-
|
|
70
|
+
const e = ((g = l.onValidate) == null ? void 0 : g.call(l, i)) ?? [], a = new Set(e.map((L) => L.id));
|
|
71
|
+
return { eligibleItems: i.filter((L) => !a.has(L.id)), ineligibleItems: e };
|
|
72
|
+
}, [i, l]), m = b.length, p = h.length, $ = d && m > 0, T = d && p > 0 ? r.ineligibleInfoMessage(p) : null, F = P(() => d ? p === 0 ? b : m === 0 ? h : I === u.ELIGIBLE ? b : h : i, [
|
|
73
|
+
d,
|
|
74
74
|
i,
|
|
75
|
-
|
|
75
|
+
b,
|
|
76
76
|
h,
|
|
77
77
|
I,
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
]),
|
|
78
|
+
p,
|
|
79
|
+
m
|
|
80
|
+
]), c = _(() => {
|
|
81
|
+
requestAnimationFrame(() => {
|
|
82
|
+
v(!1);
|
|
83
|
+
});
|
|
84
|
+
}, []), V = _(
|
|
81
85
|
(e) => {
|
|
82
86
|
var N, g;
|
|
83
|
-
(N = e.onClick) == null || N.call(e), (((g = e.onValidate) == null ? void 0 : g.call(e, i)) ?? []).length === 0 ? e.onProceed(i, !0) : (
|
|
87
|
+
(N = e.onClick) == null || N.call(e), (((g = e.onValidate) == null ? void 0 : g.call(e, i)) ?? []).length === 0 ? (e.onProceed(i, !0), c()) : (E(e), C(u.INELIGIBLE), v(!0));
|
|
84
88
|
},
|
|
85
|
-
[i]
|
|
86
|
-
),
|
|
87
|
-
const e =
|
|
88
|
-
|
|
89
|
-
}, [
|
|
90
|
-
|
|
91
|
-
}, [
|
|
92
|
-
|
|
93
|
-
}, []),
|
|
94
|
-
_((e) => !e);
|
|
95
|
-
}, []), R = b(
|
|
89
|
+
[i, c]
|
|
90
|
+
), j = _(() => {
|
|
91
|
+
const e = l == null ? void 0 : l.onCancel;
|
|
92
|
+
E(null), c(), e == null || e();
|
|
93
|
+
}, [l, c]), W = _(() => {
|
|
94
|
+
l == null || l.onProceed(b), E(null), c();
|
|
95
|
+
}, [l, b, c]), Y = _(() => {
|
|
96
|
+
v((e) => !e);
|
|
97
|
+
}, []), q = _(
|
|
96
98
|
(e) => {
|
|
97
99
|
w(e);
|
|
98
100
|
},
|
|
99
101
|
[w]
|
|
100
102
|
);
|
|
101
|
-
if (
|
|
103
|
+
if (z(() => {
|
|
102
104
|
if (!o)
|
|
103
105
|
return;
|
|
104
|
-
const e = (
|
|
105
|
-
|
|
106
|
+
const e = (a) => {
|
|
107
|
+
a.keyCode === Z.ESCAPE_KEY_CODE && c();
|
|
106
108
|
};
|
|
107
109
|
return document.addEventListener("keydown", e, !1), () => document.removeEventListener("keydown", e, !1);
|
|
108
|
-
}, [o,
|
|
110
|
+
}, [o, c]), X(S, o ? c : void 0), i.length === 0)
|
|
109
111
|
return null;
|
|
110
|
-
const
|
|
111
|
-
const
|
|
112
|
+
const A = (e) => h.some((a) => a.id === e.id), R = (e) => {
|
|
113
|
+
const a = /* @__PURE__ */ n(
|
|
112
114
|
ne,
|
|
113
115
|
{
|
|
114
|
-
onRemove: () =>
|
|
115
|
-
variant:
|
|
116
|
+
onRemove: () => q(e.id),
|
|
117
|
+
variant: A(e) && d ? "error" : "default",
|
|
116
118
|
children: e.label ?? e.name
|
|
117
119
|
},
|
|
118
120
|
e.id
|
|
119
121
|
);
|
|
120
|
-
return /* @__PURE__ */ n("div", { className:
|
|
121
|
-
|
|
122
|
+
return /* @__PURE__ */ n("div", { className: t("item"), children: e.tooltipContent ? /* @__PURE__ */ n(
|
|
123
|
+
te,
|
|
122
124
|
{
|
|
123
|
-
wrapperClassName:
|
|
125
|
+
wrapperClassName: t("tooltip-wrapper"),
|
|
124
126
|
content: e.tooltipContent,
|
|
125
127
|
placement: "top",
|
|
126
128
|
width: 270,
|
|
127
129
|
portalRoot: f,
|
|
128
|
-
children:
|
|
130
|
+
children: a
|
|
129
131
|
},
|
|
130
132
|
e.id
|
|
131
|
-
) :
|
|
133
|
+
) : a }, e.id);
|
|
132
134
|
}, G = /* @__PURE__ */ n(
|
|
133
135
|
"div",
|
|
134
136
|
{
|
|
135
|
-
className:
|
|
137
|
+
className: t("bulk-panel", { expanded: o }, M),
|
|
136
138
|
role: "region",
|
|
137
139
|
"aria-label": "Bulk actions panel",
|
|
138
|
-
children: /* @__PURE__ */
|
|
139
|
-
/* @__PURE__ */
|
|
140
|
-
/* @__PURE__ */
|
|
140
|
+
children: /* @__PURE__ */ s("div", { className: t("panel-content", { expanded: o }), ref: S, children: [
|
|
141
|
+
/* @__PURE__ */ s("div", { className: t("header"), children: [
|
|
142
|
+
/* @__PURE__ */ s("div", { className: t("selection-info"), children: [
|
|
141
143
|
/* @__PURE__ */ n(
|
|
142
144
|
"button",
|
|
143
145
|
{
|
|
144
146
|
onClick: Y,
|
|
145
147
|
"aria-label": o ? "Collapse panel" : "Expand panel",
|
|
146
148
|
"aria-expanded": o,
|
|
147
|
-
children: /* @__PURE__ */ n("span", { className:
|
|
149
|
+
children: /* @__PURE__ */ n("span", { className: t("expand-icon", { expanded: o }), children: /* @__PURE__ */ n(le, {}) })
|
|
148
150
|
}
|
|
149
151
|
),
|
|
150
152
|
/* @__PURE__ */ n(
|
|
@@ -153,62 +155,62 @@ const se = "_expanded_ue1t9_6", ae = "_header_ue1t9_32", oe = "_tabs_ue1t9_119",
|
|
|
153
155
|
selectedCount: i.length,
|
|
154
156
|
onClearSelection: O,
|
|
155
157
|
captions: {
|
|
156
|
-
selected:
|
|
157
|
-
buttonCaption:
|
|
158
|
+
selected: r.selected,
|
|
159
|
+
buttonCaption: r.clearSelection
|
|
158
160
|
}
|
|
159
161
|
}
|
|
160
162
|
)
|
|
161
163
|
] }),
|
|
162
|
-
/* @__PURE__ */
|
|
163
|
-
(T || x) && /* @__PURE__ */
|
|
164
|
-
/* @__PURE__ */ n("i", { className:
|
|
165
|
-
/* @__PURE__ */ n("div", { className:
|
|
164
|
+
/* @__PURE__ */ s("div", { className: t("header-actions"), children: [
|
|
165
|
+
(T || x) && /* @__PURE__ */ s("div", { className: t("info-message-container"), children: [
|
|
166
|
+
/* @__PURE__ */ n("i", { className: t("warning-icon"), children: /* @__PURE__ */ n(ie, {}) }),
|
|
167
|
+
/* @__PURE__ */ n("div", { className: t("info-message"), children: T || x })
|
|
166
168
|
] }),
|
|
167
|
-
/* @__PURE__ */ n("div", { className:
|
|
168
|
-
/* @__PURE__ */ n(B, { variant: "ghost", onClick:
|
|
169
|
-
$ && /* @__PURE__ */ n(B, { variant: "primary", onClick: W, children:
|
|
170
|
-
] }) : D.map((e,
|
|
169
|
+
/* @__PURE__ */ n("div", { className: t("buttons-container"), children: d ? /* @__PURE__ */ s(y, { children: [
|
|
170
|
+
/* @__PURE__ */ n(B, { variant: "ghost", onClick: j, children: r.cancelButton((l == null ? void 0 : l.label) ?? "") }),
|
|
171
|
+
$ && /* @__PURE__ */ n(B, { variant: "primary", onClick: W, children: r.proceedButton(m) })
|
|
172
|
+
] }) : D.map((e, a) => /* @__PURE__ */ n(
|
|
171
173
|
B,
|
|
172
174
|
{
|
|
173
175
|
variant: e.variant,
|
|
174
|
-
onClick: () =>
|
|
176
|
+
onClick: () => V(e),
|
|
175
177
|
disabled: e.disabled,
|
|
176
178
|
children: e.label
|
|
177
179
|
},
|
|
178
|
-
`${e.label}-${
|
|
180
|
+
`${e.label}-${a}`
|
|
179
181
|
)) })
|
|
180
182
|
] })
|
|
181
183
|
] }),
|
|
182
|
-
/* @__PURE__ */
|
|
183
|
-
/* @__PURE__ */ n("div", { className:
|
|
184
|
-
|
|
184
|
+
/* @__PURE__ */ s("div", { className: t("items-section"), children: [
|
|
185
|
+
/* @__PURE__ */ n("div", { className: t("items-header"), children: d ? /* @__PURE__ */ s("div", { className: t("tabs"), children: [
|
|
186
|
+
p > 0 && /* @__PURE__ */ s(
|
|
185
187
|
"button",
|
|
186
188
|
{
|
|
187
|
-
className:
|
|
188
|
-
active: I ===
|
|
189
|
+
className: t("tab", {
|
|
190
|
+
active: I === u.INELIGIBLE || m === 0
|
|
189
191
|
}),
|
|
190
|
-
onClick: () =>
|
|
192
|
+
onClick: () => C(u.INELIGIBLE),
|
|
191
193
|
children: [
|
|
192
|
-
|
|
193
|
-
/* @__PURE__ */ n("span", { className:
|
|
194
|
+
r.ineligibleTab,
|
|
195
|
+
/* @__PURE__ */ n("span", { className: t("tab-count"), children: p })
|
|
194
196
|
]
|
|
195
197
|
}
|
|
196
198
|
),
|
|
197
|
-
|
|
199
|
+
m > 0 && /* @__PURE__ */ s(
|
|
198
200
|
"button",
|
|
199
201
|
{
|
|
200
|
-
className:
|
|
201
|
-
active: I ===
|
|
202
|
+
className: t("tab", {
|
|
203
|
+
active: I === u.ELIGIBLE || p === 0
|
|
202
204
|
}),
|
|
203
|
-
onClick: () =>
|
|
205
|
+
onClick: () => C(u.ELIGIBLE),
|
|
204
206
|
children: [
|
|
205
|
-
|
|
206
|
-
/* @__PURE__ */ n("span", { className:
|
|
207
|
+
r.eligibleTab,
|
|
208
|
+
/* @__PURE__ */ n("span", { className: t("tab-count"), children: m })
|
|
207
209
|
]
|
|
208
210
|
}
|
|
209
211
|
)
|
|
210
|
-
] }) :
|
|
211
|
-
/* @__PURE__ */ n("div", { className:
|
|
212
|
+
] }) : r.selectedItems }),
|
|
213
|
+
/* @__PURE__ */ n("div", { className: t("items-scroll"), children: /* @__PURE__ */ n(Q, { hideTracksWhenNotNeeded: !0, children: /* @__PURE__ */ n("div", { className: t("items-list"), children: F.map((e) => R(e)) }) }) })
|
|
212
214
|
] })
|
|
213
215
|
] })
|
|
214
216
|
}
|