@mittwald/flow-react-components 0.1.0-alpha.173 → 0.1.0-alpha.174
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/List.js +57 -62
- package/dist/styles.css +1 -1
- package/package.json +4 -4
package/dist/List.js
CHANGED
|
@@ -39,9 +39,9 @@ import { d as E, a as U } from "./deepFindOfType-6pG0fH7S.js";
|
|
|
39
39
|
import { ListLoaderAsyncResource as Bt } from "./List/ListLoaderAsyncResource.js";
|
|
40
40
|
import { I as At } from "./InlineCode-BT-PKxVv.js";
|
|
41
41
|
import "react-children-utilities";
|
|
42
|
-
const Q = et({}), g = () => at(Q).list,
|
|
42
|
+
const Q = et({}), g = () => at(Q).list, Dt = () => g().loader.getLoaderInvocationHooks().map((t, e) => /* @__PURE__ */ n.createElement(rt, { key: e }, () => {
|
|
43
43
|
t();
|
|
44
|
-
})),
|
|
44
|
+
})), Nt = (s) => {
|
|
45
45
|
const { sorting: t } = s;
|
|
46
46
|
return /* @__PURE__ */ n.createElement(J, { id: t.getTableColumn().id }, t.name);
|
|
47
47
|
}, h = { "de-DE": {
|
|
@@ -68,7 +68,7 @@ const Q = et({}), g = () => at(Q).list, Nt = () => g().loader.getLoaderInvocatio
|
|
|
68
68
|
const { children: t, locales: e, variables: a } = s;
|
|
69
69
|
return v(e).format(t, a);
|
|
70
70
|
}, Pt = () => {
|
|
71
|
-
const s = g(), t = s.sorting.map((i) => /* @__PURE__ */ n.createElement(
|
|
71
|
+
const s = g(), t = s.sorting.map((i) => /* @__PURE__ */ n.createElement(Nt, { sorting: i, key: i.getTableColumn().id }));
|
|
72
72
|
if (s.sorting.length === 0)
|
|
73
73
|
return null;
|
|
74
74
|
const e = s.sorting.find((i) => i.isSorted()), a = /* @__PURE__ */ n.createElement(y, null, e ? /* @__PURE__ */ n.createElement(
|
|
@@ -404,7 +404,7 @@ class A {
|
|
|
404
404
|
), Array.from(t.values());
|
|
405
405
|
}
|
|
406
406
|
}
|
|
407
|
-
class
|
|
407
|
+
class D {
|
|
408
408
|
constructor() {
|
|
409
409
|
o(this, "dataBatches", []);
|
|
410
410
|
o(this, "prevDataBatches", []);
|
|
@@ -420,7 +420,7 @@ class N {
|
|
|
420
420
|
});
|
|
421
421
|
}
|
|
422
422
|
static useNew() {
|
|
423
|
-
return nt(new
|
|
423
|
+
return nt(new D()).current;
|
|
424
424
|
}
|
|
425
425
|
reset() {
|
|
426
426
|
this.batchLoadingStates = [], this.dataBatches = [];
|
|
@@ -445,7 +445,7 @@ class N {
|
|
|
445
445
|
}
|
|
446
446
|
}
|
|
447
447
|
const Yt = [];
|
|
448
|
-
class
|
|
448
|
+
class N {
|
|
449
449
|
constructor(t, e = {}) {
|
|
450
450
|
o(this, "list");
|
|
451
451
|
o(this, "dataSource");
|
|
@@ -456,10 +456,10 @@ class D {
|
|
|
456
456
|
const { source: a } = e;
|
|
457
457
|
this.dataSource = a ?? { staticData: Yt };
|
|
458
458
|
const i = "manualPagination" in this.dataSource ? this.dataSource.manualPagination : void 0, r = "manualFiltering" in this.dataSource ? this.dataSource.manualFiltering : void 0, l = "manualSorting" in this.dataSource ? this.dataSource.manualSorting : void 0;
|
|
459
|
-
this.list = t, this.loaderState =
|
|
459
|
+
this.list = t, this.loaderState = D.useNew(), this.manualPagination = i ?? !1, this.manualFiltering = r ?? this.manualPagination, this.manualSorting = l ?? this.manualPagination, this.list.filters.forEach((u) => u.onFilterUpdated(() => this.reset()));
|
|
460
460
|
}
|
|
461
461
|
static useNew(t, e = {}) {
|
|
462
|
-
return new
|
|
462
|
+
return new N(t, e);
|
|
463
463
|
}
|
|
464
464
|
reset() {
|
|
465
465
|
this.loaderState.reset();
|
|
@@ -549,7 +549,7 @@ let Gt = class X {
|
|
|
549
549
|
o(this, "batches");
|
|
550
550
|
o(this, "loader");
|
|
551
551
|
const { render: e, filters: a = [], sorting: i = [], batchesController: r } = t;
|
|
552
|
-
this.render = e, this.items = B.useNew(this), this.filters = a.map((l) => new jt(this, l)), this.sorting = i.map((l) => new Jt(this, l)), this.batches = new qt(this, r), this.loader =
|
|
552
|
+
this.render = e, this.items = B.useNew(this), this.filters = a.map((l) => new jt(this, l)), this.sorting = i.map((l) => new Jt(this, l)), this.batches = new qt(this, r), this.loader = N.useNew(this, t.loader), this.reactTable = A.useNew(this, {
|
|
553
553
|
manualFiltering: this.loader.manualFiltering,
|
|
554
554
|
manualPagination: this.loader.manualPagination,
|
|
555
555
|
manualSorting: this.loader.manualSorting
|
|
@@ -578,7 +578,7 @@ let Gt = class X {
|
|
|
578
578
|
const Qt = "flow--list--items--item-list", Xt = "flow--list--items--is-loading", K = {
|
|
579
579
|
itemList: Qt,
|
|
580
580
|
isLoading: Xt
|
|
581
|
-
}, Zt = "flow--list--items--item", _t = "flow--list--items--title", te = "flow--list--items--top-content", ee = "flow--list--items--content", ae = "flow--list--items--action", se = "flow--list--items--avatar", ne = "flow--list--items--text", ie = "flow--list--items--
|
|
581
|
+
}, Zt = "flow--list--items--item", _t = "flow--list--items--title", te = "flow--list--items--top-content", ee = "flow--list--items--content", ae = "flow--list--items--action", se = "flow--list--items--avatar", ne = "flow--list--items--text", ie = "flow--list--items--heading", m = {
|
|
582
582
|
item: Zt,
|
|
583
583
|
title: _t,
|
|
584
584
|
topContent: te,
|
|
@@ -586,14 +586,13 @@ const Qt = "flow--list--items--item-list", Xt = "flow--list--items--is-loading",
|
|
|
586
586
|
action: ae,
|
|
587
587
|
avatar: se,
|
|
588
588
|
text: ne,
|
|
589
|
-
|
|
590
|
-
heading: re,
|
|
589
|
+
heading: ie,
|
|
591
590
|
"container-breakpoint-size-xs": "flow--list--items--container-breakpoint-size-xs",
|
|
592
591
|
"container-breakpoint-size-s": "flow--list--items--container-breakpoint-size-s",
|
|
593
592
|
"container-breakpoint-size-m": "flow--list--items--container-breakpoint-size-m",
|
|
594
593
|
"container-breakpoint-size-l": "flow--list--items--container-breakpoint-size-l",
|
|
595
594
|
"container-breakpoint-size-xl": "flow--list--items--container-breakpoint-size-xl"
|
|
596
|
-
},
|
|
595
|
+
}, re = (s) => {
|
|
597
596
|
const { className: t, children: e } = s, a = v(h);
|
|
598
597
|
return /* @__PURE__ */ n.createElement(T, null, /* @__PURE__ */ n.createElement(
|
|
599
598
|
p,
|
|
@@ -604,7 +603,7 @@ const Qt = "flow--list--items--item-list", Xt = "flow--list--items--is-loading",
|
|
|
604
603
|
},
|
|
605
604
|
/* @__PURE__ */ n.createElement(wt, null)
|
|
606
605
|
), e);
|
|
607
|
-
},
|
|
606
|
+
}, oe = (s) => s === "top" ? m.topContent : s === "bottom" ? m.content : m.topContent, Z = (s) => {
|
|
608
607
|
const {
|
|
609
608
|
children: t,
|
|
610
609
|
href: e,
|
|
@@ -613,50 +612,49 @@ const Qt = "flow--list--items--item-list", Xt = "flow--list--items--is-loading",
|
|
|
613
612
|
...r
|
|
614
613
|
} = s, l = {
|
|
615
614
|
ContextMenu: {
|
|
616
|
-
wrapWith: /* @__PURE__ */ n.createElement(
|
|
615
|
+
wrapWith: /* @__PURE__ */ n.createElement(re, { className: m.action }),
|
|
617
616
|
placement: "bottom end"
|
|
618
617
|
},
|
|
619
618
|
Button: {
|
|
620
|
-
className:
|
|
619
|
+
className: m.action
|
|
621
620
|
},
|
|
622
621
|
Content: {
|
|
623
|
-
className: Ft((c) =>
|
|
622
|
+
className: Ft((c) => oe(c.slot)),
|
|
624
623
|
tunnelId: "topContent"
|
|
625
624
|
},
|
|
626
625
|
Avatar: {
|
|
627
|
-
className:
|
|
626
|
+
className: m.avatar,
|
|
628
627
|
tunnelId: "title"
|
|
629
628
|
},
|
|
630
629
|
Heading: {
|
|
631
|
-
className:
|
|
632
|
-
level:
|
|
630
|
+
className: m.heading,
|
|
631
|
+
level: 5,
|
|
633
632
|
tunnelId: "title"
|
|
634
633
|
},
|
|
635
634
|
Text: {
|
|
636
|
-
className:
|
|
637
|
-
tunnelId: "title"
|
|
638
|
-
},
|
|
639
|
-
StatusBadge: {
|
|
640
|
-
className: u.statusBadge,
|
|
635
|
+
className: m.text,
|
|
641
636
|
tunnelId: "title"
|
|
642
637
|
},
|
|
643
638
|
Link: {
|
|
644
639
|
unstyled: !0
|
|
645
640
|
}
|
|
646
|
-
},
|
|
647
|
-
|
|
641
|
+
}, u = k(
|
|
642
|
+
m.item,
|
|
648
643
|
a,
|
|
649
|
-
|
|
650
|
-
), d = (c) => e ? /* @__PURE__ */ n.createElement(Tt, { unstyled: !0, ...r, className:
|
|
651
|
-
return /* @__PURE__ */ n.createElement(d, null, /* @__PURE__ */ n.createElement(It, { props: l }, /* @__PURE__ */ n.createElement(Lt, null, t, /* @__PURE__ */ n.createElement("div", { className:
|
|
652
|
-
}, b = () => /* @__PURE__ */ n.createElement(Z, null, /* @__PURE__ */ n.createElement(G, { height: "3rem" })),
|
|
653
|
-
const { className: t } = s, e = g(), a = e.loader.useIsLoading(), i = e.loader.useIsInitiallyLoading(), r = e.useIsEmpty(), l = v(h),
|
|
644
|
+
m[kt(i)]
|
|
645
|
+
), d = (c) => e ? /* @__PURE__ */ n.createElement(Tt, { unstyled: !0, ...r, className: u, href: e }, c.children) : /* @__PURE__ */ n.createElement("div", { className: u }, c.children);
|
|
646
|
+
return /* @__PURE__ */ n.createElement(d, null, /* @__PURE__ */ n.createElement(It, { props: l }, /* @__PURE__ */ n.createElement(Lt, null, t, /* @__PURE__ */ n.createElement("div", { className: m.title }, /* @__PURE__ */ n.createElement(O, { id: "title" })), /* @__PURE__ */ n.createElement(O, { id: "topContent" }))));
|
|
647
|
+
}, b = () => /* @__PURE__ */ n.createElement(Z, null, /* @__PURE__ */ n.createElement(G, { height: "3rem" })), le = (s) => {
|
|
648
|
+
const { className: t } = s, e = g(), a = e.loader.useIsLoading(), i = e.loader.useIsInitiallyLoading(), r = e.useIsEmpty(), l = v(h), u = e.items.entries.map((c) => /* @__PURE__ */ n.createElement(it, { key: c.id }, c.render())), d = k(
|
|
654
649
|
K.itemList,
|
|
655
650
|
t,
|
|
656
651
|
a && K.isLoading
|
|
657
652
|
);
|
|
658
|
-
return r ? /* @__PURE__ */ n.createElement(vt, null, /* @__PURE__ */ n.createElement(Ct, null), /* @__PURE__ */ n.createElement(Et, null, l.format("list.noResult.heading")), /* @__PURE__ */ n.createElement(y, null, l.format("list.noResult.text"))) : /* @__PURE__ */ n.createElement("div", { className: d }, i ?
|
|
659
|
-
},
|
|
653
|
+
return r ? /* @__PURE__ */ n.createElement(vt, null, /* @__PURE__ */ n.createElement(Ct, null), /* @__PURE__ */ n.createElement(Et, null, l.format("list.noResult.heading")), /* @__PURE__ */ n.createElement(y, null, l.format("list.noResult.text"))) : /* @__PURE__ */ n.createElement("div", { className: d }, i ? ce : u);
|
|
654
|
+
}, ce = /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(b, null), /* @__PURE__ */ n.createElement(b, null), /* @__PURE__ */ n.createElement(b, null), /* @__PURE__ */ n.createElement(b, null), /* @__PURE__ */ n.createElement(b, null));
|
|
655
|
+
function ue(s) {
|
|
656
|
+
return null;
|
|
657
|
+
}
|
|
660
658
|
function me(s) {
|
|
661
659
|
return null;
|
|
662
660
|
}
|
|
@@ -669,25 +667,22 @@ function he(s) {
|
|
|
669
667
|
function ge(s) {
|
|
670
668
|
return null;
|
|
671
669
|
}
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
}
|
|
675
|
-
const
|
|
676
|
-
footer: fe
|
|
677
|
-
}, Se = (s) => {
|
|
678
|
-
const t = v(h), e = g(), a = e.batches, i = e.isFiltered() && !e.loader.manualFiltering, r = e.loader.useIsInitiallyLoading(), l = e.useIsEmpty(), m = a.getTotalItemsCount() ?? 0, d = a.getFilteredItemsCount() ?? 0, c = a.getVisibleItemsCount() ?? 0;
|
|
670
|
+
const pe = "flow--list--footer", fe = {
|
|
671
|
+
footer: pe
|
|
672
|
+
}, be = (s) => {
|
|
673
|
+
const t = v(h), e = g(), a = e.batches, i = e.isFiltered() && !e.loader.manualFiltering, r = e.loader.useIsInitiallyLoading(), l = e.useIsEmpty(), u = a.getTotalItemsCount() ?? 0, d = a.getFilteredItemsCount() ?? 0, c = a.getVisibleItemsCount() ?? 0;
|
|
679
674
|
if (l)
|
|
680
675
|
return null;
|
|
681
676
|
const C = r ? /* @__PURE__ */ n.createElement(G, { width: "200px" }) : i ? t.format("list.paginationInfoFiltered", {
|
|
682
677
|
visibleItemsCount: c,
|
|
683
678
|
filteredItemsCount: d,
|
|
684
|
-
totalItemsCount:
|
|
679
|
+
totalItemsCount: u
|
|
685
680
|
}) : t.format("list.paginationInfo", {
|
|
686
681
|
visibleItemsCount: c,
|
|
687
|
-
totalItemsCount:
|
|
682
|
+
totalItemsCount: u
|
|
688
683
|
});
|
|
689
684
|
return /* @__PURE__ */ n.createElement(y, { ...s }, C);
|
|
690
|
-
},
|
|
685
|
+
}, Se = (s) => {
|
|
691
686
|
const t = v(h), e = g(), a = e.loader.useIsLoading(), i = e.loader.useIsInitiallyLoading();
|
|
692
687
|
return !e.batches.hasNextBatch() && !a ? null : /* @__PURE__ */ n.createElement(
|
|
693
688
|
p,
|
|
@@ -701,13 +696,13 @@ const fe = "flow--list--footer", be = {
|
|
|
701
696
|
},
|
|
702
697
|
t.format("list.showMore")
|
|
703
698
|
);
|
|
704
|
-
},
|
|
705
|
-
function
|
|
699
|
+
}, ye = () => /* @__PURE__ */ n.createElement("div", { className: fe.footer }, /* @__PURE__ */ n.createElement(be, null), /* @__PURE__ */ n.createElement(Se, null)), ve = (s) => /* @__PURE__ */ n.createElement(Z, null, /* @__PURE__ */ n.createElement(At, null, JSON.stringify(s.data)));
|
|
700
|
+
function na(s) {
|
|
706
701
|
var C, P, R, z;
|
|
707
|
-
const { children: t, batchSize: e, ...a } = s, i = (C = E(t,
|
|
702
|
+
const { children: t, batchSize: e, ...a } = s, i = (C = E(t, ue)) == null ? void 0 : C.props, r = (P = E(
|
|
708
703
|
t,
|
|
709
704
|
Bt
|
|
710
|
-
)) == null ? void 0 : P.props, l = (R = E(t,
|
|
705
|
+
)) == null ? void 0 : P.props, l = (R = E(t, ge)) == null ? void 0 : R.props, u = {
|
|
711
706
|
source: i ? {
|
|
712
707
|
...i,
|
|
713
708
|
asyncLoader: i.children
|
|
@@ -717,11 +712,11 @@ function ia(s) {
|
|
|
717
712
|
} : l ? {
|
|
718
713
|
staticData: l.data
|
|
719
714
|
} : void 0
|
|
720
|
-
}, d = (f) => /* @__PURE__ */ n.createElement(
|
|
721
|
-
loader:
|
|
722
|
-
filters: U(t,
|
|
723
|
-
sorting: U(t,
|
|
724
|
-
render: ((z = E(t,
|
|
715
|
+
}, d = (f) => /* @__PURE__ */ n.createElement(ve, { data: f }), c = Gt.useNew({
|
|
716
|
+
loader: u,
|
|
717
|
+
filters: U(t, me).map((f) => f.props),
|
|
718
|
+
sorting: U(t, de).map((f) => f.props),
|
|
719
|
+
render: ((z = E(t, he)) == null ? void 0 : z.props.children) ?? d,
|
|
725
720
|
...a,
|
|
726
721
|
batchesController: {
|
|
727
722
|
batchSize: e
|
|
@@ -734,17 +729,17 @@ function ia(s) {
|
|
|
734
729
|
list: c
|
|
735
730
|
}
|
|
736
731
|
},
|
|
737
|
-
/* @__PURE__ */ n.createElement(
|
|
738
|
-
/* @__PURE__ */ n.createElement("div", { className: Ht.list }, /* @__PURE__ */ n.createElement(Ot, null), /* @__PURE__ */ n.createElement(
|
|
732
|
+
/* @__PURE__ */ n.createElement(Dt, null),
|
|
733
|
+
/* @__PURE__ */ n.createElement("div", { className: Ht.list }, /* @__PURE__ */ n.createElement(Ot, null), /* @__PURE__ */ n.createElement(le, null), /* @__PURE__ */ n.createElement(ye, null))
|
|
739
734
|
);
|
|
740
735
|
}
|
|
741
736
|
export {
|
|
742
|
-
|
|
743
|
-
|
|
737
|
+
na as List,
|
|
738
|
+
me as ListFilter,
|
|
744
739
|
Z as ListItem,
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
740
|
+
he as ListItemView,
|
|
741
|
+
ue as ListLoaderAsync,
|
|
742
|
+
de as ListSorting,
|
|
743
|
+
ge as ListStaticData,
|
|
744
|
+
na as default
|
|
750
745
|
};
|