@mittwald/flow-react-components 0.1.0-alpha.204 → 0.1.0-alpha.205
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/Activity.js +7 -0
- package/dist/List.js +163 -168
- package/dist/SkeletonText-B5ZghZhO.js +13 -0
- package/dist/SkeletonText.js +7 -0
- package/dist/styles.css +1 -1
- package/dist/types/components/List/model/loading/types.d.ts +1 -1
- package/dist/types/components/SkeletonText/SkeletonText.d.ts +3 -3
- package/dist/types/components/SkeletonText/index.d.ts +3 -3
- package/package.json +12 -4
package/dist/List.js
CHANGED
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
/* */
|
|
3
3
|
var mt = Object.defineProperty;
|
|
4
4
|
var gt = (a, t, e) => t in a ? mt(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
|
|
5
|
-
var
|
|
6
|
-
import
|
|
5
|
+
var n = (a, t, e) => gt(a, typeof t != "symbol" ? t + "" : t, e);
|
|
6
|
+
import r, { createContext as pt, useContext as ft, createElement as Y, useState as Q, useEffect as L, useRef as bt, cloneElement as St } from "react";
|
|
7
7
|
import "./propsContext-DzAKlmhS.js";
|
|
8
8
|
import { P as vt } from "./PropsContextProvider-C6Z4XGp6.js";
|
|
9
9
|
import "@react-aria/utils";
|
|
@@ -16,7 +16,7 @@ import { I as Ft } from "./IconContextMenu-jwoVcLvd.js";
|
|
|
16
16
|
import { a as A, C as X } from "./ContextMenuTrigger-BdJf5T8A.js";
|
|
17
17
|
import { M as Z } from "./MenuItem-DcfYvfPJ.js";
|
|
18
18
|
import { useLocalizedStringFormatter as v } from "react-aria";
|
|
19
|
-
import { TunnelProvider as Lt, TunnelExit as
|
|
19
|
+
import { TunnelProvider as Lt, TunnelExit as U } from "@mittwald/react-tunnel";
|
|
20
20
|
import C from "clsx";
|
|
21
21
|
import { g as Tt } from "./getContainerBreakpointSizeClassName-BrcFDcCY.js";
|
|
22
22
|
import { f as It } from "./flowComponent-DHPUcYyM.js";
|
|
@@ -24,21 +24,22 @@ import { R as kt } from "./Render-BdlTa7Qb.js";
|
|
|
24
24
|
import { T as f } from "./Text-Sd5q3Yme.js";
|
|
25
25
|
import { I as _ } from "./IconChevronDown--OxZLX8L.js";
|
|
26
26
|
import { I as At } from "./IconClose-BFwPT_IX.js";
|
|
27
|
-
import { makeObservable as
|
|
27
|
+
import { makeObservable as Bt, observable as $, computed as O, action as F } from "mobx";
|
|
28
28
|
import "./context-BB3_MApL.js";
|
|
29
|
-
import { u as
|
|
30
|
-
import { S as
|
|
29
|
+
import { u as Pt } from "./useOnChange-C1Quwyuz.js";
|
|
30
|
+
import { S as xt } from "./SearchField-DstUFmq4.js";
|
|
31
31
|
import { getProperty as Dt } from "dot-prop";
|
|
32
|
-
import { hash as
|
|
33
|
-
import { useReactTable as
|
|
32
|
+
import { hash as Vt } from "object-code";
|
|
33
|
+
import { useReactTable as Nt, getCoreRowModel as Rt, getSortedRowModel as Mt, getFilteredRowModel as zt, getPaginationRowModel as Ut, getFacetedUniqueValues as $t } from "@tanstack/react-table";
|
|
34
34
|
import tt from "invariant";
|
|
35
35
|
import { getAsyncResource as q } from "@mittwald/react-use-promise";
|
|
36
36
|
import { u as H } from "./useSelector-DpU7_HMO.js";
|
|
37
|
-
import * as
|
|
37
|
+
import * as B from "react-aria-components";
|
|
38
38
|
import { I as Ot } from "./IllustratedMessage-B3MHD01M.js";
|
|
39
39
|
import { I as qt } from "./IconSearch-C7VQTAqK.js";
|
|
40
40
|
import { H as et } from "./Heading-BEC6iPfF.js";
|
|
41
|
-
import {
|
|
41
|
+
import { S as K } from "./SkeletonText-B5ZghZhO.js";
|
|
42
|
+
import { d as S, a as G } from "./deepFindOfType-6pG0fH7S.js";
|
|
42
43
|
import { ListLoaderAsyncResource as Ht, TypedListLoaderAsyncResource as Kt } from "./List/ListLoaderAsyncResource.js";
|
|
43
44
|
import { S as Gt } from "./Skeleton-CKLaTmDR.js";
|
|
44
45
|
const jt = "flow--list--items--item--view", Wt = "flow--list--items--item--view--title", Jt = "flow--list--items--item--view--top-content", Yt = "flow--list--items--item--view--content", Qt = "flow--list--items--item--view--action", Xt = "flow--list--items--item--view--avatar", Zt = "flow--list--items--item--view--text", _t = "flow--list--items--item--view--heading", h = {
|
|
@@ -75,19 +76,19 @@ const jt = "flow--list--items--item--view", Wt = "flow--list--items--item--view-
|
|
|
75
76
|
"list.sorting": "Sorting"
|
|
76
77
|
} }, te = (a) => {
|
|
77
78
|
const { className: t, children: e } = a, s = v(g);
|
|
78
|
-
return /* @__PURE__ */
|
|
79
|
+
return /* @__PURE__ */ r.createElement(A, null, /* @__PURE__ */ r.createElement(
|
|
79
80
|
p,
|
|
80
81
|
{
|
|
81
82
|
variant: "plain",
|
|
82
83
|
className: t,
|
|
83
84
|
"aria-label": s.format("list.options")
|
|
84
85
|
},
|
|
85
|
-
/* @__PURE__ */
|
|
86
|
+
/* @__PURE__ */ r.createElement(Ft, null)
|
|
86
87
|
), e);
|
|
87
88
|
}, ee = (a) => a === "top" ? h.topContent : a === "bottom" ? h.content : h.topContent, st = (a) => {
|
|
88
89
|
const { children: t, className: e, containerBreakpointSize: s = "m" } = a, i = {
|
|
89
90
|
ContextMenu: {
|
|
90
|
-
wrapWith: /* @__PURE__ */
|
|
91
|
+
wrapWith: /* @__PURE__ */ r.createElement(te, { className: h.action }),
|
|
91
92
|
placement: "bottom end"
|
|
92
93
|
},
|
|
93
94
|
Button: {
|
|
@@ -122,20 +123,20 @@ const jt = "flow--list--items--item--view", Wt = "flow--list--items--item--view-
|
|
|
122
123
|
e,
|
|
123
124
|
h[Tt(s)]
|
|
124
125
|
);
|
|
125
|
-
return /* @__PURE__ */
|
|
126
|
-
}, it = pt({}), m = () => ft(it).list, se = () => m().loader.getLoaderInvocationHooks().map((t, e) => /* @__PURE__ */
|
|
126
|
+
return /* @__PURE__ */ r.createElement("div", { className: o }, /* @__PURE__ */ r.createElement(vt, { props: i }, /* @__PURE__ */ r.createElement(Lt, null, t, /* @__PURE__ */ r.createElement("div", { className: h.title }, /* @__PURE__ */ r.createElement(U, { id: "title" })), /* @__PURE__ */ r.createElement(U, { id: "topContent" }))));
|
|
127
|
+
}, it = pt({}), m = () => ft(it).list, se = () => m().loader.getLoaderInvocationHooks().map((t, e) => /* @__PURE__ */ r.createElement(kt, { key: e }, () => {
|
|
127
128
|
t();
|
|
128
129
|
})), ie = (a) => {
|
|
129
130
|
const { sorting: t } = a;
|
|
130
|
-
return /* @__PURE__ */
|
|
131
|
+
return /* @__PURE__ */ r.createElement(Z, { id: t.id }, t.name);
|
|
131
132
|
}, T = (a) => {
|
|
132
133
|
const { children: t, locales: e, variables: s } = a;
|
|
133
134
|
return v(e).format(t, s);
|
|
134
135
|
}, ae = () => {
|
|
135
|
-
const a = m(), t = a.visibleSorting.map((i) => /* @__PURE__ */
|
|
136
|
+
const a = m(), t = a.visibleSorting.map((i) => /* @__PURE__ */ r.createElement(ie, { sorting: i, key: i.id }));
|
|
136
137
|
if (t.length === 0)
|
|
137
138
|
return null;
|
|
138
|
-
const e = a.visibleSorting.find((i) => i.isSorted()), s = /* @__PURE__ */
|
|
139
|
+
const e = a.visibleSorting.find((i) => i.isSorted()), s = /* @__PURE__ */ r.createElement(f, null, e ? /* @__PURE__ */ r.createElement(
|
|
139
140
|
T,
|
|
140
141
|
{
|
|
141
142
|
locales: g,
|
|
@@ -144,8 +145,8 @@ const jt = "flow--list--items--item--view", Wt = "flow--list--items--item--view-
|
|
|
144
145
|
}
|
|
145
146
|
},
|
|
146
147
|
"list.setSorting"
|
|
147
|
-
) : /* @__PURE__ */
|
|
148
|
-
return /* @__PURE__ */
|
|
148
|
+
) : /* @__PURE__ */ r.createElement(T, { locales: g }, "list.sorting"));
|
|
149
|
+
return /* @__PURE__ */ r.createElement(A, null, /* @__PURE__ */ r.createElement(p, { variant: "soft", size: "s", color: "secondary" }, s, /* @__PURE__ */ r.createElement(_, null)), /* @__PURE__ */ r.createElement(
|
|
149
150
|
X,
|
|
150
151
|
{
|
|
151
152
|
selectionMode: "single",
|
|
@@ -156,8 +157,8 @@ const jt = "flow--list--items--item--view", Wt = "flow--list--items--item--view-
|
|
|
156
157
|
},
|
|
157
158
|
t
|
|
158
159
|
));
|
|
159
|
-
},
|
|
160
|
-
const { filter: t } = a, { values: e, mode: s, name: i, property: o } = t, l = e.map((u) => /* @__PURE__ */
|
|
160
|
+
}, re = (a) => {
|
|
161
|
+
const { filter: t } = a, { values: e, mode: s, name: i, property: o } = t, l = e.map((u) => /* @__PURE__ */ r.createElement(
|
|
161
162
|
Z,
|
|
162
163
|
{
|
|
163
164
|
id: u.id,
|
|
@@ -168,7 +169,7 @@ const jt = "flow--list--items--item--view", Wt = "flow--list--items--item--view-
|
|
|
168
169
|
},
|
|
169
170
|
u.render()
|
|
170
171
|
)), c = e.filter((u) => u.isActive).map((u) => u.id);
|
|
171
|
-
return /* @__PURE__ */
|
|
172
|
+
return /* @__PURE__ */ r.createElement(A, null, /* @__PURE__ */ r.createElement(p, { variant: "soft", size: "s", color: "secondary" }, /* @__PURE__ */ r.createElement(f, null, i ?? o), /* @__PURE__ */ r.createElement(_, null)), /* @__PURE__ */ r.createElement(
|
|
172
173
|
X,
|
|
173
174
|
{
|
|
174
175
|
selectionMode: s === "one" ? "single" : "multiple",
|
|
@@ -176,17 +177,17 @@ const jt = "flow--list--items--item--view", Wt = "flow--list--items--item--view-
|
|
|
176
177
|
},
|
|
177
178
|
l
|
|
178
179
|
));
|
|
179
|
-
},
|
|
180
|
-
header:
|
|
180
|
+
}, ne = "flow--list--header", oe = "flow--list--header--picker-list-and-search", le = "flow--list--header--picker-list", ce = "flow--list--header--search-field", w = {
|
|
181
|
+
header: ne,
|
|
181
182
|
pickerListAndSearch: oe,
|
|
182
183
|
pickerList: le,
|
|
183
184
|
searchField: ce
|
|
184
|
-
}, ue = "flow--list--header--active-filters", de = "flow--list--header--active-filters--clear-button",
|
|
185
|
+
}, ue = "flow--list--header--active-filters", de = "flow--list--header--active-filters--clear-button", j = {
|
|
185
186
|
activeFilters: ue,
|
|
186
187
|
clearButton: de
|
|
187
188
|
}, he = () => {
|
|
188
189
|
const a = m(), t = a.filters.flatMap(
|
|
189
|
-
(e) => e.values.filter((s) => s.isActive).map((s) => /* @__PURE__ */
|
|
190
|
+
(e) => e.values.filter((s) => s.isActive).map((s) => /* @__PURE__ */ r.createElement(
|
|
190
191
|
p,
|
|
191
192
|
{
|
|
192
193
|
variant: "soft",
|
|
@@ -194,23 +195,23 @@ const jt = "flow--list--items--item--view", Wt = "flow--list--items--item--view-
|
|
|
194
195
|
key: s.id,
|
|
195
196
|
onPress: () => s.deactivate()
|
|
196
197
|
},
|
|
197
|
-
/* @__PURE__ */
|
|
198
|
-
/* @__PURE__ */
|
|
198
|
+
/* @__PURE__ */ r.createElement(f, null, s.render()),
|
|
199
|
+
/* @__PURE__ */ r.createElement(At, null)
|
|
199
200
|
))
|
|
200
201
|
);
|
|
201
|
-
return t.length <= 0 ? null : /* @__PURE__ */
|
|
202
|
+
return t.length <= 0 ? null : /* @__PURE__ */ r.createElement("div", { className: j.activeFilters }, t, /* @__PURE__ */ r.createElement(
|
|
202
203
|
p,
|
|
203
204
|
{
|
|
204
|
-
className:
|
|
205
|
+
className: j.clearButton,
|
|
205
206
|
size: "s",
|
|
206
207
|
variant: "plain",
|
|
207
208
|
onPress: () => a.clearFilters()
|
|
208
209
|
},
|
|
209
|
-
/* @__PURE__ */
|
|
210
|
+
/* @__PURE__ */ r.createElement(T, { locales: g }, "list.resetAll")
|
|
210
211
|
));
|
|
211
212
|
}, me = (a) => {
|
|
212
213
|
const { className: t, onChange: e, value: s, ...i } = a, [o, l] = Q(s ?? "");
|
|
213
|
-
|
|
214
|
+
Pt(s, () => {
|
|
214
215
|
l(s ?? "");
|
|
215
216
|
}, [o]);
|
|
216
217
|
const c = () => {
|
|
@@ -218,8 +219,8 @@ const jt = "flow--list--items--item--view", Wt = "flow--list--items--item--view-
|
|
|
218
219
|
}, u = (d) => {
|
|
219
220
|
d.key === "Enter" ? o.trim() === "" ? e(void 0) : e(o) : d.key === "Escape" && c();
|
|
220
221
|
};
|
|
221
|
-
return /* @__PURE__ */
|
|
222
|
-
|
|
222
|
+
return /* @__PURE__ */ r.createElement(
|
|
223
|
+
xt,
|
|
223
224
|
{
|
|
224
225
|
className: t,
|
|
225
226
|
value: o,
|
|
@@ -241,16 +242,16 @@ const jt = "flow--list--items--item--view", Wt = "flow--list--items--item--view-
|
|
|
241
242
|
const { className: t } = a, e = m();
|
|
242
243
|
if (e.filters.length === 0 && e.visibleSorting.length === 0 && !e.search)
|
|
243
244
|
return null;
|
|
244
|
-
const s = e.filters.map((i) => /* @__PURE__ */
|
|
245
|
-
return /* @__PURE__ */
|
|
245
|
+
const s = e.filters.map((i) => /* @__PURE__ */ r.createElement(re, { key: i.property, filter: i }));
|
|
246
|
+
return /* @__PURE__ */ r.createElement("div", { className: C(t, w.header) }, /* @__PURE__ */ r.createElement("div", { className: w.pickerListAndSearch }, /* @__PURE__ */ r.createElement("div", { className: w.pickerList }, /* @__PURE__ */ r.createElement(ae, null), s), e.search && /* @__PURE__ */ r.createElement(ge, { className: w.searchField, search: e.search })), /* @__PURE__ */ r.createElement(he, null));
|
|
246
247
|
}, fe = "flow--list", be = {
|
|
247
248
|
list: fe
|
|
248
249
|
};
|
|
249
250
|
let Se = class at {
|
|
250
251
|
constructor(t, e, s) {
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
252
|
+
n(this, "id");
|
|
253
|
+
n(this, "data");
|
|
254
|
+
n(this, "collection");
|
|
254
255
|
this.collection = t, this.id = e, this.data = s;
|
|
255
256
|
}
|
|
256
257
|
static fromRow(t, e) {
|
|
@@ -259,7 +260,7 @@ let Se = class at {
|
|
|
259
260
|
};
|
|
260
261
|
class ve {
|
|
261
262
|
constructor(t) {
|
|
262
|
-
|
|
263
|
+
n(this, "list");
|
|
263
264
|
this.list = t;
|
|
264
265
|
}
|
|
265
266
|
get entries() {
|
|
@@ -268,8 +269,8 @@ class ve {
|
|
|
268
269
|
}
|
|
269
270
|
class ye {
|
|
270
271
|
constructor(t, e = {}) {
|
|
271
|
-
|
|
272
|
-
|
|
272
|
+
n(this, "batchSize");
|
|
273
|
+
n(this, "list");
|
|
273
274
|
var i;
|
|
274
275
|
const { batchSize: s = 20 } = e;
|
|
275
276
|
this.list = t, this.batchSize = s, t.filters.forEach((o) => o.onFilterUpdated(() => this.reset())), (i = t.search) == null || i.onUpdated(() => this.reset());
|
|
@@ -314,18 +315,18 @@ class ye {
|
|
|
314
315
|
}
|
|
315
316
|
}
|
|
316
317
|
const we = "$";
|
|
317
|
-
class
|
|
318
|
+
class W {
|
|
318
319
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
319
320
|
constructor(t, e) {
|
|
320
|
-
|
|
321
|
-
|
|
321
|
+
n(this, "filter");
|
|
322
|
+
n(this, "value");
|
|
322
323
|
this.filter = t, this.value = e;
|
|
323
324
|
}
|
|
324
325
|
equals(t) {
|
|
325
326
|
return yt(this.value, t.value);
|
|
326
327
|
}
|
|
327
328
|
get id() {
|
|
328
|
-
return `${this.filter.property}@@${
|
|
329
|
+
return `${this.filter.property}@@${Vt(this.value)}`;
|
|
329
330
|
}
|
|
330
331
|
get isActive() {
|
|
331
332
|
return this.filter.isValueActive(this);
|
|
@@ -343,16 +344,16 @@ class j {
|
|
|
343
344
|
const Ee = (a, t) => a === t, Ce = (a) => String(a);
|
|
344
345
|
class Fe {
|
|
345
346
|
constructor(t, e) {
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
347
|
+
n(this, "_values");
|
|
348
|
+
n(this, "list");
|
|
349
|
+
n(this, "property");
|
|
350
|
+
n(this, "mode");
|
|
351
|
+
n(this, "matcher");
|
|
352
|
+
n(this, "renderItem");
|
|
353
|
+
n(this, "name");
|
|
354
|
+
n(this, "onFilterUpdateCallbacks", /* @__PURE__ */ new Set());
|
|
354
355
|
var s;
|
|
355
|
-
this.list = t, this.property = e.property, this.mode = e.mode ?? "one", this._values = (s = e.values) == null ? void 0 : s.map((i) => new
|
|
356
|
+
this.list = t, this.property = e.property, this.mode = e.mode ?? "one", this._values = (s = e.values) == null ? void 0 : s.map((i) => new W(this, i)), this.matcher = e.matcher ?? Ee, this.renderItem = e.renderItem ?? Ce, this.name = e.name;
|
|
356
357
|
}
|
|
357
358
|
updateTableColumnDef(t) {
|
|
358
359
|
t.enableColumnFilter = !0, t.filterFn = this.getReactTableFilterFn();
|
|
@@ -389,7 +390,7 @@ class Fe {
|
|
|
389
390
|
get values() {
|
|
390
391
|
return this._values === void 0 && (this._values = wt(
|
|
391
392
|
Array.from(this.getTableColumn().getFacetedUniqueValues().keys()).flatMap((t) => t).filter((t) => t != null)
|
|
392
|
-
).map((t) => new
|
|
393
|
+
).map((t) => new W(this, t))), this._values;
|
|
393
394
|
}
|
|
394
395
|
getArrayValue() {
|
|
395
396
|
const t = this.getValue();
|
|
@@ -421,11 +422,11 @@ class Fe {
|
|
|
421
422
|
}
|
|
422
423
|
class Le {
|
|
423
424
|
constructor(t, e) {
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
425
|
+
n(this, "list");
|
|
426
|
+
n(this, "property");
|
|
427
|
+
n(this, "name");
|
|
428
|
+
n(this, "direction");
|
|
429
|
+
n(this, "defaultEnabled");
|
|
429
430
|
this.list = t, this.property = e.property, this.name = e.name, this.direction = e.direction ?? "asc", this.defaultEnabled = e.defaultEnabled ?? !1;
|
|
430
431
|
}
|
|
431
432
|
updateTableColumnDef(t) {
|
|
@@ -453,12 +454,12 @@ class Le {
|
|
|
453
454
|
return `${this.getTableColumn().id}:${this.direction}`;
|
|
454
455
|
}
|
|
455
456
|
}
|
|
456
|
-
class
|
|
457
|
+
class P {
|
|
457
458
|
constructor(t, e, s = {}) {
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
459
|
+
n(this, "list");
|
|
460
|
+
n(this, "table");
|
|
461
|
+
n(this, "sortingState");
|
|
462
|
+
n(this, "updateSortingState");
|
|
462
463
|
this.list = t;
|
|
463
464
|
const i = this.list.sorting.filter(
|
|
464
465
|
(c) => c.defaultEnabled !== !1
|
|
@@ -468,10 +469,10 @@ class B {
|
|
|
468
469
|
this.sortingState = o, this.updateSortingState = l, this.table = this.useReactTable(e, s);
|
|
469
470
|
}
|
|
470
471
|
static useNew(t, e, s = {}) {
|
|
471
|
-
return new
|
|
472
|
+
return new P(t, e, s);
|
|
472
473
|
}
|
|
473
474
|
useReactTable(t, e = {}) {
|
|
474
|
-
const s = this.list.loader.useData(), i =
|
|
475
|
+
const s = this.list.loader.useData(), i = Nt({
|
|
475
476
|
data: s,
|
|
476
477
|
state: {
|
|
477
478
|
sorting: this.sortingState
|
|
@@ -485,8 +486,8 @@ class B {
|
|
|
485
486
|
getCoreRowModel: Rt(),
|
|
486
487
|
getSortedRowModel: Mt(),
|
|
487
488
|
getFilteredRowModel: zt(),
|
|
488
|
-
getPaginationRowModel:
|
|
489
|
-
getFacetedUniqueValues:
|
|
489
|
+
getPaginationRowModel: Ut(),
|
|
490
|
+
getFacetedUniqueValues: $t(),
|
|
490
491
|
onSortingChange: (o) => {
|
|
491
492
|
this.handleSortingStateUpdate(o);
|
|
492
493
|
},
|
|
@@ -530,17 +531,17 @@ class B {
|
|
|
530
531
|
), Array.from(t.values());
|
|
531
532
|
}
|
|
532
533
|
}
|
|
533
|
-
class
|
|
534
|
+
class x {
|
|
534
535
|
constructor() {
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
536
|
+
n(this, "dataBatches", []);
|
|
537
|
+
n(this, "prevDataBatches", []);
|
|
538
|
+
n(this, "batchLoadingStates", ["void"]);
|
|
539
|
+
Bt(this, {
|
|
539
540
|
prevDataBatches: !1,
|
|
540
541
|
useMergedData: !1,
|
|
541
542
|
useIsLoading: !1,
|
|
542
|
-
dataBatches:
|
|
543
|
-
batchLoadingStates:
|
|
543
|
+
dataBatches: $.shallow,
|
|
544
|
+
batchLoadingStates: $.shallow,
|
|
544
545
|
mergedData: O,
|
|
545
546
|
isLoading: O,
|
|
546
547
|
reset: F.bound,
|
|
@@ -549,7 +550,7 @@ class P {
|
|
|
549
550
|
});
|
|
550
551
|
}
|
|
551
552
|
static useNew() {
|
|
552
|
-
return bt(new
|
|
553
|
+
return bt(new x()).current;
|
|
553
554
|
}
|
|
554
555
|
reset() {
|
|
555
556
|
this.batchLoadingStates = [], this.dataBatches = [];
|
|
@@ -576,17 +577,17 @@ class P {
|
|
|
576
577
|
const Te = [];
|
|
577
578
|
class D {
|
|
578
579
|
constructor(t, e = {}) {
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
580
|
+
n(this, "list");
|
|
581
|
+
n(this, "dataSource");
|
|
582
|
+
n(this, "manualSorting");
|
|
583
|
+
n(this, "manualFiltering");
|
|
584
|
+
n(this, "manualPagination");
|
|
585
|
+
n(this, "loaderState");
|
|
585
586
|
var c;
|
|
586
587
|
const { source: s } = e;
|
|
587
588
|
this.dataSource = s ?? { staticData: Te };
|
|
588
589
|
const i = "manualPagination" in this.dataSource ? this.dataSource.manualPagination : void 0, o = "manualFiltering" in this.dataSource ? this.dataSource.manualFiltering : void 0, l = "manualSorting" in this.dataSource ? this.dataSource.manualSorting : void 0;
|
|
589
|
-
this.list = t, this.loaderState =
|
|
590
|
+
this.list = t, this.loaderState = x.useNew(), this.manualPagination = i ?? !1, this.manualFiltering = o ?? this.manualPagination, this.manualSorting = l ?? this.manualPagination, this.list.filters.forEach((u) => u.onFilterUpdated(() => this.reset())), (c = this.list.search) == null || c.onUpdated(() => this.reset());
|
|
590
591
|
}
|
|
591
592
|
static useNew(t, e = {}) {
|
|
592
593
|
return new D(t, e);
|
|
@@ -675,10 +676,10 @@ class D {
|
|
|
675
676
|
}
|
|
676
677
|
class Ie {
|
|
677
678
|
constructor(t, e) {
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
679
|
+
n(this, "list");
|
|
680
|
+
n(this, "render");
|
|
681
|
+
n(this, "textFieldProps");
|
|
682
|
+
n(this, "onUpdateCallbacks", /* @__PURE__ */ new Set());
|
|
682
683
|
this.list = t, this.render = e.render, this.textFieldProps = e.textFieldProps;
|
|
683
684
|
}
|
|
684
685
|
get value() {
|
|
@@ -702,12 +703,12 @@ class Ie {
|
|
|
702
703
|
}
|
|
703
704
|
const E = class E {
|
|
704
705
|
constructor(t, e = {}) {
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
706
|
+
n(this, "list");
|
|
707
|
+
n(this, "textValue");
|
|
708
|
+
n(this, "href");
|
|
709
|
+
n(this, "onAction");
|
|
710
|
+
n(this, "fallback");
|
|
711
|
+
n(this, "renderFn");
|
|
711
712
|
const { onAction: s, fallback: i, textValue: o, href: l, renderFn: c } = e;
|
|
712
713
|
this.list = t, this.textValue = o, this.renderFn = c, this.href = l, this.onAction = s, this.fallback = i;
|
|
713
714
|
}
|
|
@@ -715,18 +716,18 @@ const E = class E {
|
|
|
715
716
|
return (this.renderFn ?? E.fallbackRenderItemFn)(t);
|
|
716
717
|
}
|
|
717
718
|
};
|
|
718
|
-
|
|
719
|
-
let I = E, ke = class
|
|
719
|
+
n(E, "fallbackRenderItemFn", (t) => Y("pre", void 0, JSON.stringify(t)));
|
|
720
|
+
let I = E, ke = class rt {
|
|
720
721
|
constructor(t) {
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
722
|
+
n(this, "filters");
|
|
723
|
+
n(this, "itemView");
|
|
724
|
+
n(this, "search");
|
|
725
|
+
n(this, "sorting");
|
|
726
|
+
n(this, "items");
|
|
727
|
+
n(this, "reactTable");
|
|
728
|
+
n(this, "batches");
|
|
729
|
+
n(this, "loader");
|
|
730
|
+
n(this, "hasAction");
|
|
730
731
|
const {
|
|
731
732
|
itemView: e,
|
|
732
733
|
filters: s = [],
|
|
@@ -735,14 +736,14 @@ let I = E, ke = class nt {
|
|
|
735
736
|
hasAction: l,
|
|
736
737
|
onChange: c
|
|
737
738
|
} = t;
|
|
738
|
-
this.items = new ve(this), this.filters = s.map((u) => new Fe(this, u)), this.sorting = i.map((u) => new Le(this, u)), this.search = t.search ? new Ie(this, t.search) : void 0, this.itemView = new I(this, e), this.batches = new ye(this, o), this.loader = D.useNew(this, t.loader), this.reactTable =
|
|
739
|
+
this.items = new ve(this), this.filters = s.map((u) => new Fe(this, u)), this.sorting = i.map((u) => new Le(this, u)), this.search = t.search ? new Ie(this, t.search) : void 0, this.itemView = new I(this, e), this.batches = new ye(this, o), this.loader = D.useNew(this, t.loader), this.reactTable = P.useNew(this, c, {
|
|
739
740
|
manualFiltering: this.loader.manualFiltering,
|
|
740
741
|
manualPagination: this.loader.manualPagination,
|
|
741
742
|
manualSorting: this.loader.manualSorting
|
|
742
743
|
}), this.hasAction = l;
|
|
743
744
|
}
|
|
744
745
|
static useNew(t) {
|
|
745
|
-
return new
|
|
746
|
+
return new rt(t);
|
|
746
747
|
}
|
|
747
748
|
get isFiltered() {
|
|
748
749
|
return this.filters.some((t) => t.isActive()) || !!this.search && this.search.isSet;
|
|
@@ -765,16 +766,16 @@ let I = E, ke = class nt {
|
|
|
765
766
|
return !this.loader.useIsLoading() && this.items.entries.length === 0;
|
|
766
767
|
}
|
|
767
768
|
};
|
|
768
|
-
const Ae = "flow--list--items",
|
|
769
|
+
const Ae = "flow--list--items", Be = "flow--list--items--is-loading", J = {
|
|
769
770
|
items: Ae,
|
|
770
|
-
isLoading:
|
|
771
|
-
},
|
|
772
|
-
item:
|
|
773
|
-
hasAction:
|
|
771
|
+
isLoading: Be
|
|
772
|
+
}, Pe = "flow--list--items--item", xe = "flow--list--items--item--has-action", k = {
|
|
773
|
+
item: Pe,
|
|
774
|
+
hasAction: xe
|
|
774
775
|
}, De = (a) => {
|
|
775
776
|
const { data: t, children: e } = a, s = m(), i = s.itemView, o = i.onAction, l = i.textValue ? i.textValue(t) : void 0, c = o ? () => o(t) : void 0, u = i.href ? i.href(t) : void 0, d = s.hasAction || !!c || !!u, b = C(k.item, d && k.hasAction);
|
|
776
|
-
return /* @__PURE__ */
|
|
777
|
-
|
|
777
|
+
return /* @__PURE__ */ r.createElement(
|
|
778
|
+
B.GridListItem,
|
|
778
779
|
{
|
|
779
780
|
className: b,
|
|
780
781
|
onAction: c,
|
|
@@ -783,39 +784,33 @@ const Ae = "flow--list--items", xe = "flow--list--items--is-loading", W = {
|
|
|
783
784
|
},
|
|
784
785
|
e ?? i.render(t)
|
|
785
786
|
);
|
|
786
|
-
},
|
|
787
|
+
}, Ve = (a) => /* @__PURE__ */ r.createElement(B.GridListItem, { textValue: "-", className: k.item }, a.children), Ne = () => {
|
|
787
788
|
const a = v(g);
|
|
788
|
-
return /* @__PURE__ */
|
|
789
|
-
}, Re = "
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
},
|
|
793
|
-
const {
|
|
794
|
-
|
|
795
|
-
}, $e = () => /* @__PURE__ */ n.createElement(st, null, /* @__PURE__ */ n.createElement(et, null, /* @__PURE__ */ n.createElement(J, { width: "200px" })), /* @__PURE__ */ n.createElement(f, null, /* @__PURE__ */ n.createElement(J, { width: "300px" }))), Ue = () => {
|
|
796
|
-
const t = m().itemView.fallback ?? /* @__PURE__ */ n.createElement($e, null);
|
|
797
|
-
return Array.from(Array(5)).map((e, s) => /* @__PURE__ */ n.createElement(Ne, { key: s }, St(t)));
|
|
798
|
-
}, Oe = (a) => {
|
|
799
|
-
const { className: t, ...e } = a, s = m(), i = s.loader.useIsLoading(), o = s.loader.useIsInitiallyLoading(), l = s.useIsEmpty(), c = s.items.entries.map((d) => /* @__PURE__ */ n.createElement(De, { key: d.id, data: d.data })), u = C(
|
|
800
|
-
W.items,
|
|
789
|
+
return /* @__PURE__ */ r.createElement(Ot, null, /* @__PURE__ */ r.createElement(qt, null), /* @__PURE__ */ r.createElement(et, null, a.format("list.noResult.heading")), /* @__PURE__ */ r.createElement(f, null, a.format("list.noResult.text")));
|
|
790
|
+
}, Re = () => /* @__PURE__ */ r.createElement(st, null, /* @__PURE__ */ r.createElement(et, null, /* @__PURE__ */ r.createElement(K, { width: "200px" })), /* @__PURE__ */ r.createElement(f, null, /* @__PURE__ */ r.createElement(K, { width: "300px" }))), Me = () => {
|
|
791
|
+
const t = m().itemView.fallback ?? /* @__PURE__ */ r.createElement(Re, null);
|
|
792
|
+
return Array.from(Array(5)).map((e, s) => /* @__PURE__ */ r.createElement(Ve, { key: s }, St(t)));
|
|
793
|
+
}, ze = (a) => {
|
|
794
|
+
const { className: t, ...e } = a, s = m(), i = s.loader.useIsLoading(), o = s.loader.useIsInitiallyLoading(), l = s.useIsEmpty(), c = s.items.entries.map((d) => /* @__PURE__ */ r.createElement(De, { key: d.id, data: d.data })), u = C(
|
|
795
|
+
J.items,
|
|
801
796
|
t,
|
|
802
|
-
i &&
|
|
797
|
+
i && J.isLoading
|
|
803
798
|
);
|
|
804
|
-
return l ? /* @__PURE__ */
|
|
805
|
-
},
|
|
806
|
-
footer:
|
|
807
|
-
},
|
|
799
|
+
return l ? /* @__PURE__ */ r.createElement(Ne, null) : /* @__PURE__ */ r.createElement("div", { "aria-hidden": o, "aria-busy": i }, /* @__PURE__ */ r.createElement(B.GridList, { className: u, ...e }, o ? /* @__PURE__ */ r.createElement(Me, null) : c));
|
|
800
|
+
}, nt = (a) => null, Ue = () => nt, ot = (a) => null, $e = () => ot, lt = (a) => null, Oe = () => lt, ct = (a) => null, qe = () => ct, ut = (a) => null, He = () => ut, Ke = "flow--list--footer", Ge = {
|
|
801
|
+
footer: Ke
|
|
802
|
+
}, je = (a) => {
|
|
808
803
|
const t = v(g), e = m(), s = e.batches, i = e.loader.useIsInitiallyLoading(), o = e.useIsEmpty(), l = s.getTotalItemsCount(), c = s.getVisibleItemsCount();
|
|
809
804
|
if (o)
|
|
810
805
|
return null;
|
|
811
|
-
const u = i ? /* @__PURE__ */
|
|
806
|
+
const u = i ? /* @__PURE__ */ r.createElement(Gt, { width: "200px" }) : t.format("list.paginationInfo", {
|
|
812
807
|
visibleItemsCount: c,
|
|
813
808
|
totalItemsCount: l
|
|
814
809
|
});
|
|
815
|
-
return /* @__PURE__ */
|
|
816
|
-
},
|
|
810
|
+
return /* @__PURE__ */ r.createElement(f, { ...a }, u);
|
|
811
|
+
}, We = (a) => {
|
|
817
812
|
const t = v(g), e = m(), s = e.loader.useIsLoading(), i = e.loader.useIsInitiallyLoading();
|
|
818
|
-
return !e.batches.hasNextBatch() && !s ? null : /* @__PURE__ */
|
|
813
|
+
return !e.batches.hasNextBatch() && !s ? null : /* @__PURE__ */ r.createElement(
|
|
819
814
|
p,
|
|
820
815
|
{
|
|
821
816
|
isPending: s && !i,
|
|
@@ -827,19 +822,19 @@ const Ae = "flow--list--items", xe = "flow--list--items--is-loading", W = {
|
|
|
827
822
|
},
|
|
828
823
|
t.format("list.showMore")
|
|
829
824
|
);
|
|
830
|
-
},
|
|
825
|
+
}, Je = () => /* @__PURE__ */ r.createElement("div", { className: Ge.footer }, /* @__PURE__ */ r.createElement(je, null), /* @__PURE__ */ r.createElement(We, null));
|
|
831
826
|
function dt(a) {
|
|
832
827
|
return null;
|
|
833
828
|
}
|
|
834
|
-
const
|
|
835
|
-
var
|
|
836
|
-
const { children: t, batchSize: e, onChange: s, ...i } = a, o = (
|
|
829
|
+
const Ye = () => dt, Qe = It("List", (a) => {
|
|
830
|
+
var V, N, R, M, z;
|
|
831
|
+
const { children: t, batchSize: e, onChange: s, ...i } = a, o = (V = S(
|
|
837
832
|
t,
|
|
838
|
-
|
|
839
|
-
)) == null ? void 0 :
|
|
833
|
+
nt
|
|
834
|
+
)) == null ? void 0 : V.props, l = (N = S(
|
|
840
835
|
t,
|
|
841
836
|
Ht
|
|
842
|
-
)) == null ? void 0 :
|
|
837
|
+
)) == null ? void 0 : N.props, c = (R = S(t, ut)) == null ? void 0 : R.props, u = {
|
|
843
838
|
source: o ? {
|
|
844
839
|
...o,
|
|
845
840
|
asyncLoader: o.children
|
|
@@ -852,7 +847,7 @@ const Ze = () => dt, _e = It("List", (a) => {
|
|
|
852
847
|
}, d = (M = S(t, dt)) == null ? void 0 : M.props, b = (z = S(t, ct)) == null ? void 0 : z.props, ht = ke.useNew({
|
|
853
848
|
onChange: s,
|
|
854
849
|
loader: u,
|
|
855
|
-
filters:
|
|
850
|
+
filters: G(t, ot).map(
|
|
856
851
|
(y) => ({
|
|
857
852
|
...y.props,
|
|
858
853
|
renderItem: y.props.children
|
|
@@ -862,7 +857,7 @@ const Ze = () => dt, _e = It("List", (a) => {
|
|
|
862
857
|
render: d.children,
|
|
863
858
|
textFieldProps: d
|
|
864
859
|
} : void 0,
|
|
865
|
-
sorting:
|
|
860
|
+
sorting: G(t, lt).map((y) => y.props),
|
|
866
861
|
itemView: b ? {
|
|
867
862
|
...b,
|
|
868
863
|
renderFn: b.children
|
|
@@ -872,41 +867,41 @@ const Ze = () => dt, _e = It("List", (a) => {
|
|
|
872
867
|
},
|
|
873
868
|
hasAction: !!a.onAction
|
|
874
869
|
});
|
|
875
|
-
return /* @__PURE__ */
|
|
870
|
+
return /* @__PURE__ */ r.createElement(
|
|
876
871
|
it.Provider,
|
|
877
872
|
{
|
|
878
873
|
value: {
|
|
879
874
|
list: ht
|
|
880
875
|
}
|
|
881
876
|
},
|
|
882
|
-
/* @__PURE__ */
|
|
883
|
-
/* @__PURE__ */
|
|
877
|
+
/* @__PURE__ */ r.createElement(se, null),
|
|
878
|
+
/* @__PURE__ */ r.createElement("div", { className: be.list }, /* @__PURE__ */ r.createElement(pe, null), /* @__PURE__ */ r.createElement(ze, { ...i }), /* @__PURE__ */ r.createElement(Je, null))
|
|
884
879
|
);
|
|
885
|
-
}),
|
|
886
|
-
List:
|
|
887
|
-
Filter:
|
|
888
|
-
Search:
|
|
889
|
-
Sorting:
|
|
890
|
-
Item:
|
|
880
|
+
}), Xe = () => Qe, Ms = () => ({
|
|
881
|
+
List: Xe(),
|
|
882
|
+
Filter: $e(),
|
|
883
|
+
Search: Ye(),
|
|
884
|
+
Sorting: Oe(),
|
|
885
|
+
Item: qe(),
|
|
891
886
|
ItemView: st,
|
|
892
|
-
StaticData:
|
|
893
|
-
LoaderAsync:
|
|
887
|
+
StaticData: He(),
|
|
888
|
+
LoaderAsync: Ue(),
|
|
894
889
|
LoaderAsyncResource: Kt()
|
|
895
890
|
});
|
|
896
891
|
export {
|
|
897
|
-
|
|
892
|
+
Qe as List,
|
|
898
893
|
ot as ListFilter,
|
|
899
894
|
ct as ListItem,
|
|
900
895
|
st as ListItemView,
|
|
901
|
-
|
|
896
|
+
nt as ListLoaderAsync,
|
|
902
897
|
lt as ListSorting,
|
|
903
898
|
ut as ListStaticData,
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
899
|
+
Xe as TypedList,
|
|
900
|
+
$e as TypedListFilter,
|
|
901
|
+
qe as TypedListItem,
|
|
902
|
+
Ue as TypedListLoaderAsync,
|
|
903
|
+
Oe as TypedListSorting,
|
|
904
|
+
He as TypedListStaticData,
|
|
905
|
+
Ms as typedList,
|
|
911
906
|
m as useList
|
|
912
907
|
};
|