@mittwald/flow-react-components 0.1.0-alpha.213 → 0.1.0-alpha.215
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 +308 -291
- package/dist/types/components/List/model/filter/Filter.d.ts +3 -1
- package/dist/types/components/List/model/filter/FilterValue.d.ts +1 -1
- package/dist/types/components/List/model/filter/types.d.ts +1 -0
- package/dist/types/components/List/model/search/Search.d.ts +3 -0
- package/dist/types/components/List/model/search/types.d.ts +1 -0
- package/package.json +4 -4
package/dist/List.js
CHANGED
|
@@ -1,66 +1,65 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var r = (a, e, t) =>
|
|
6
|
-
import n, { createContext as
|
|
3
|
+
var ze = Object.defineProperty;
|
|
4
|
+
var Ue = (a, e, t) => e in a ? ze(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
|
|
5
|
+
var r = (a, e, t) => Ue(a, typeof e != "symbol" ? e + "" : e, t);
|
|
6
|
+
import n, { createContext as Oe, useContext as He, createElement as me, useState as O, useEffect as k, useRef as qe, cloneElement as Ke } from "react";
|
|
7
7
|
import "./propsContext-DzAKlmhS.js";
|
|
8
|
-
import { P as
|
|
8
|
+
import { P as Ge } from "./PropsContextProvider-C6Z4XGp6.js";
|
|
9
9
|
import "@react-aria/utils";
|
|
10
|
-
import { isShallowEqual as
|
|
11
|
-
import { d as
|
|
10
|
+
import { isShallowEqual as je, unique as _e, times as We } from "remeda";
|
|
11
|
+
import { d as Je } from "./dynamic-ClpUSmEt.js";
|
|
12
12
|
import { B as w } from "./Button-DQtavSbo.js";
|
|
13
13
|
import "@tabler/icons-react";
|
|
14
14
|
import "./Icon-DPoIVASu.js";
|
|
15
|
-
import { I as
|
|
15
|
+
import { I as Ye } from "./IconContextMenu-jwoVcLvd.js";
|
|
16
16
|
import { a as B, C as H } from "./ContextMenuTrigger-DOCNHDwJ.js";
|
|
17
17
|
import { M as q } from "./MenuItem-DcfYvfPJ.js";
|
|
18
18
|
import { useLocalizedStringFormatter as y } from "react-aria";
|
|
19
|
-
import { TunnelProvider as
|
|
19
|
+
import { TunnelProvider as Qe, TunnelExit as ie } from "@mittwald/react-tunnel";
|
|
20
20
|
import v from "clsx";
|
|
21
|
-
import { g as
|
|
22
|
-
import { f as
|
|
23
|
-
import { R as
|
|
21
|
+
import { g as Xe } from "./getContainerBreakpointSizeClassName-BrcFDcCY.js";
|
|
22
|
+
import { f as Ze } from "./flowComponent-DHPUcYyM.js";
|
|
23
|
+
import { R as et } from "./Render-BdlTa7Qb.js";
|
|
24
24
|
import { T as E } from "./Text-Sd5q3Yme.js";
|
|
25
25
|
import { I as he } from "./IconChevronDown--OxZLX8L.js";
|
|
26
|
-
import { I as
|
|
27
|
-
import { makeObservable as
|
|
26
|
+
import { I as tt } from "./IconClose-BFwPT_IX.js";
|
|
27
|
+
import { makeObservable as st, observable as ne, computed as re, action as D } from "mobx";
|
|
28
28
|
import "./context-Cf7tqFtF.js";
|
|
29
|
-
import { u as
|
|
30
|
-
import { S as
|
|
29
|
+
import { u as at } from "./useOnChange-C1Quwyuz.js";
|
|
30
|
+
import { S as it } from "./SearchField-DstUFmq4.js";
|
|
31
31
|
import { H as K } from "./Heading-BEC6iPfF.js";
|
|
32
|
-
import { S as
|
|
33
|
-
import { I as
|
|
34
|
-
import { getProperty as
|
|
35
|
-
import {
|
|
36
|
-
import {
|
|
37
|
-
import
|
|
38
|
-
import be from "invariant";
|
|
32
|
+
import { S as nt } from "./Section-DTR9rFAc.js";
|
|
33
|
+
import { I as rt } from "./IconSettings-CisOFpPV.js";
|
|
34
|
+
import { getProperty as ot } from "dot-prop";
|
|
35
|
+
import { hash as pe } from "object-code";
|
|
36
|
+
import { useReactTable as lt, getCoreRowModel as ct, getSortedRowModel as dt, getFilteredRowModel as ut, getPaginationRowModel as mt, getFacetedUniqueValues as ht } from "@tanstack/react-table";
|
|
37
|
+
import ge from "invariant";
|
|
39
38
|
import { getAsyncResource as oe } from "@mittwald/react-use-promise";
|
|
40
39
|
import { u as le } from "./useSelector-DpU7_HMO.js";
|
|
41
40
|
import * as G from "react-aria-components";
|
|
42
|
-
import { I as
|
|
43
|
-
import { I as
|
|
41
|
+
import { I as pt } from "./IllustratedMessage-B3MHD01M.js";
|
|
42
|
+
import { I as gt } from "./IconSearch-C7VQTAqK.js";
|
|
44
43
|
import { S as A } from "./SkeletonText-B5ZghZhO.js";
|
|
45
|
-
import { d as
|
|
46
|
-
import { ListLoaderAsyncResource as ft, TypedListLoaderAsyncResource as
|
|
47
|
-
import { S as
|
|
48
|
-
import { T as fe, d as
|
|
49
|
-
const
|
|
50
|
-
view:
|
|
51
|
-
title:
|
|
52
|
-
topContent:
|
|
53
|
-
content:
|
|
54
|
-
action:
|
|
55
|
-
avatar:
|
|
56
|
-
text:
|
|
44
|
+
import { d as f, a as I } from "./deepFindOfType-6pG0fH7S.js";
|
|
45
|
+
import { ListLoaderAsyncResource as ft, TypedListLoaderAsyncResource as bt } from "./List/ListLoaderAsyncResource.js";
|
|
46
|
+
import { S as St } from "./Skeleton-CKLaTmDR.js";
|
|
47
|
+
import { T as fe, d as be, c as Se, a as we, e as ve, b as ye } from "./TableRow-K-cWiurd.js";
|
|
48
|
+
const wt = "flow--list--items--item--view", vt = "flow--list--items--item--view--title", yt = "flow--list--items--item--view--top-content", Et = "flow--list--items--item--view--content", Tt = "flow--list--items--item--view--action", Ft = "flow--list--items--item--view--avatar", Ct = "flow--list--items--item--view--text", It = "flow--list--items--item--view--heading", m = {
|
|
49
|
+
view: wt,
|
|
50
|
+
title: vt,
|
|
51
|
+
topContent: yt,
|
|
52
|
+
content: Et,
|
|
53
|
+
action: Tt,
|
|
54
|
+
avatar: Ft,
|
|
55
|
+
text: Ct,
|
|
57
56
|
heading: It,
|
|
58
57
|
"container-breakpoint-size-xs": "flow--list--items--item--view--container-breakpoint-size-xs",
|
|
59
58
|
"container-breakpoint-size-s": "flow--list--items--item--view--container-breakpoint-size-s",
|
|
60
59
|
"container-breakpoint-size-m": "flow--list--items--item--view--container-breakpoint-size-m",
|
|
61
60
|
"container-breakpoint-size-l": "flow--list--items--item--view--container-breakpoint-size-l",
|
|
62
61
|
"container-breakpoint-size-xl": "flow--list--items--item--view--container-breakpoint-size-xl"
|
|
63
|
-
},
|
|
62
|
+
}, b = { "de-DE": {
|
|
64
63
|
"list.noResult.heading": "Keine Suchergebnisse gefunden",
|
|
65
64
|
"list.noResult.text": "Deine Suche ergab keine Ergebnisse. Bitte passe die Suchanfrage oder deine Filter an.",
|
|
66
65
|
"list.options": "Optionen",
|
|
@@ -86,8 +85,8 @@ const vt = "flow--list--items--item--view", yt = "flow--list--items--item--view-
|
|
|
86
85
|
"list.settings.viewMode.table": "Table",
|
|
87
86
|
"list.showMore": "Show more",
|
|
88
87
|
"list.sorting": "Sorting"
|
|
89
|
-
} },
|
|
90
|
-
const { className: e, children: t } = a, s = y(
|
|
88
|
+
} }, Lt = (a) => {
|
|
89
|
+
const { className: e, children: t } = a, s = y(b);
|
|
91
90
|
return /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(
|
|
92
91
|
w,
|
|
93
92
|
{
|
|
@@ -95,69 +94,69 @@ const vt = "flow--list--items--item--view", yt = "flow--list--items--item--view-
|
|
|
95
94
|
className: e,
|
|
96
95
|
"aria-label": s.format("list.options")
|
|
97
96
|
},
|
|
98
|
-
/* @__PURE__ */ n.createElement(
|
|
97
|
+
/* @__PURE__ */ n.createElement(Ye, null)
|
|
99
98
|
), t);
|
|
100
|
-
},
|
|
99
|
+
}, Pt = (a) => a === "top" ? m.topContent : a === "bottom" ? m.content : m.topContent, Ee = (a) => {
|
|
101
100
|
const { children: e, className: t, containerBreakpointSize: s = "m" } = a, i = {
|
|
102
101
|
ContextMenu: {
|
|
103
|
-
wrapWith: /* @__PURE__ */ n.createElement(
|
|
102
|
+
wrapWith: /* @__PURE__ */ n.createElement(Lt, { className: m.action }),
|
|
104
103
|
placement: "bottom end"
|
|
105
104
|
},
|
|
106
105
|
Button: {
|
|
107
|
-
className:
|
|
106
|
+
className: m.action
|
|
108
107
|
},
|
|
109
108
|
ActionGroup: {
|
|
110
|
-
className:
|
|
109
|
+
className: m.action,
|
|
111
110
|
ignoreBreakpoint: !0
|
|
112
111
|
},
|
|
113
112
|
Content: {
|
|
114
|
-
className:
|
|
113
|
+
className: Je((l) => Pt(l.slot)),
|
|
115
114
|
tunnelId: "topContent"
|
|
116
115
|
},
|
|
117
116
|
Avatar: {
|
|
118
|
-
className:
|
|
117
|
+
className: m.avatar,
|
|
119
118
|
tunnelId: "title"
|
|
120
119
|
},
|
|
121
120
|
Heading: {
|
|
122
|
-
className:
|
|
121
|
+
className: m.heading,
|
|
123
122
|
level: 5,
|
|
124
123
|
tunnelId: "title"
|
|
125
124
|
},
|
|
126
125
|
Text: {
|
|
127
|
-
className:
|
|
126
|
+
className: m.text,
|
|
128
127
|
tunnelId: "title"
|
|
129
128
|
},
|
|
130
129
|
Link: {
|
|
131
130
|
unstyled: !0
|
|
132
131
|
}
|
|
133
132
|
}, o = v(
|
|
134
|
-
|
|
133
|
+
m.view,
|
|
135
134
|
t,
|
|
136
|
-
|
|
135
|
+
m[Xe(s)]
|
|
137
136
|
);
|
|
138
|
-
return /* @__PURE__ */ n.createElement("div", { className: o }, /* @__PURE__ */ n.createElement(
|
|
139
|
-
},
|
|
137
|
+
return /* @__PURE__ */ n.createElement("div", { className: o }, /* @__PURE__ */ n.createElement(Ge, { props: i }, /* @__PURE__ */ n.createElement(Qe, null, e, /* @__PURE__ */ n.createElement("div", { className: m.title }, /* @__PURE__ */ n.createElement(ie, { id: "title" })), /* @__PURE__ */ n.createElement(ie, { id: "topContent" }))));
|
|
138
|
+
}, Te = Oe({}), h = () => He(Te).list, kt = () => h().loader.getLoaderInvocationHooks().map((e, t) => /* @__PURE__ */ n.createElement(et, { key: t }, () => {
|
|
140
139
|
e();
|
|
141
|
-
})),
|
|
140
|
+
})), At = (a) => {
|
|
142
141
|
const { sorting: e } = a;
|
|
143
142
|
return /* @__PURE__ */ n.createElement(q, { id: e.id }, e.name);
|
|
144
143
|
}, $ = (a) => {
|
|
145
144
|
const { children: e, locales: t, variables: s } = a;
|
|
146
145
|
return y(t).format(e, s);
|
|
147
|
-
},
|
|
148
|
-
const a = h(), e = a.visibleSorting.map((i) => /* @__PURE__ */ n.createElement(
|
|
146
|
+
}, Vt = () => {
|
|
147
|
+
const a = h(), e = a.visibleSorting.map((i) => /* @__PURE__ */ n.createElement(At, { sorting: i, key: i.id }));
|
|
149
148
|
if (e.length === 0)
|
|
150
149
|
return null;
|
|
151
150
|
const t = a.visibleSorting.find((i) => i.isSorted()), s = /* @__PURE__ */ n.createElement(E, null, t ? /* @__PURE__ */ n.createElement(
|
|
152
151
|
$,
|
|
153
152
|
{
|
|
154
|
-
locales:
|
|
153
|
+
locales: b,
|
|
155
154
|
variables: {
|
|
156
155
|
property: t.name ?? t.property
|
|
157
156
|
}
|
|
158
157
|
},
|
|
159
158
|
"list.setSorting"
|
|
160
|
-
) : /* @__PURE__ */ n.createElement($, { locales:
|
|
159
|
+
) : /* @__PURE__ */ n.createElement($, { locales: b }, "list.sorting"));
|
|
161
160
|
return /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(w, { variant: "soft", size: "s", color: "secondary" }, s, /* @__PURE__ */ n.createElement(he, null)), /* @__PURE__ */ n.createElement(
|
|
162
161
|
H,
|
|
163
162
|
{
|
|
@@ -169,7 +168,7 @@ const vt = "flow--list--items--item--view", yt = "flow--list--items--item--view-
|
|
|
169
168
|
},
|
|
170
169
|
e
|
|
171
170
|
));
|
|
172
|
-
},
|
|
171
|
+
}, Bt = (a) => {
|
|
173
172
|
const { filter: e } = a, { values: t, mode: s, name: i, property: o } = e, l = t.map((d) => /* @__PURE__ */ n.createElement(
|
|
174
173
|
q,
|
|
175
174
|
{
|
|
@@ -189,15 +188,15 @@ const vt = "flow--list--items--item--view", yt = "flow--list--items--item--view-
|
|
|
189
188
|
},
|
|
190
189
|
l
|
|
191
190
|
));
|
|
192
|
-
},
|
|
193
|
-
header:
|
|
194
|
-
pickerListAndSearch:
|
|
195
|
-
pickerList:
|
|
196
|
-
searchField:
|
|
197
|
-
},
|
|
198
|
-
activeFilters:
|
|
199
|
-
clearButton:
|
|
200
|
-
},
|
|
191
|
+
}, Mt = "flow--list--header", xt = "flow--list--header--picker-list-and-search", Rt = "flow--list--header--picker-list", Nt = "flow--list--header--search-field", L = {
|
|
192
|
+
header: Mt,
|
|
193
|
+
pickerListAndSearch: xt,
|
|
194
|
+
pickerList: Rt,
|
|
195
|
+
searchField: Nt
|
|
196
|
+
}, Dt = "flow--list--header--active-filters", $t = "flow--list--header--active-filters--clear-button", ce = {
|
|
197
|
+
activeFilters: Dt,
|
|
198
|
+
clearButton: $t
|
|
199
|
+
}, zt = () => {
|
|
201
200
|
const a = h(), e = a.filters.flatMap(
|
|
202
201
|
(t) => t.values.filter((s) => s.isActive).map((s) => /* @__PURE__ */ n.createElement(
|
|
203
202
|
w,
|
|
@@ -208,7 +207,7 @@ const vt = "flow--list--items--item--view", yt = "flow--list--items--item--view-
|
|
|
208
207
|
onPress: () => s.deactivate()
|
|
209
208
|
},
|
|
210
209
|
/* @__PURE__ */ n.createElement(E, null, s.render()),
|
|
211
|
-
/* @__PURE__ */ n.createElement(
|
|
210
|
+
/* @__PURE__ */ n.createElement(tt, null)
|
|
212
211
|
))
|
|
213
212
|
);
|
|
214
213
|
return e.length <= 0 ? null : /* @__PURE__ */ n.createElement("div", { className: ce.activeFilters }, e, /* @__PURE__ */ n.createElement(
|
|
@@ -219,39 +218,39 @@ const vt = "flow--list--items--item--view", yt = "flow--list--items--item--view-
|
|
|
219
218
|
variant: "plain",
|
|
220
219
|
onPress: () => a.clearFilters()
|
|
221
220
|
},
|
|
222
|
-
/* @__PURE__ */ n.createElement($, { locales:
|
|
221
|
+
/* @__PURE__ */ n.createElement($, { locales: b }, "list.resetAll")
|
|
223
222
|
));
|
|
224
|
-
},
|
|
223
|
+
}, Ut = (a) => {
|
|
225
224
|
const { className: e, onChange: t, value: s, ...i } = a, [o, l] = O(s ?? "");
|
|
226
|
-
|
|
225
|
+
at(s, () => {
|
|
227
226
|
l(s ?? "");
|
|
228
227
|
}, [o]);
|
|
229
228
|
const c = () => {
|
|
230
229
|
t(void 0), l("");
|
|
231
|
-
}, d = (
|
|
232
|
-
|
|
230
|
+
}, d = (u) => {
|
|
231
|
+
u.key === "Enter" ? o.trim() === "" ? t(void 0) : t(o) : u.key === "Escape" && c();
|
|
233
232
|
};
|
|
234
233
|
return /* @__PURE__ */ n.createElement(
|
|
235
|
-
|
|
234
|
+
it,
|
|
236
235
|
{
|
|
237
236
|
className: e,
|
|
238
237
|
value: o,
|
|
239
238
|
onKeyUp: d,
|
|
240
|
-
onChange: (
|
|
239
|
+
onChange: (u) => l(u),
|
|
241
240
|
onClear: c,
|
|
242
241
|
...i
|
|
243
242
|
}
|
|
244
243
|
);
|
|
245
|
-
},
|
|
246
|
-
const { className: e, search: t } = a, s = t.render ??
|
|
247
|
-
return
|
|
244
|
+
}, Ot = (a) => {
|
|
245
|
+
const { className: e, search: t } = a, s = t.render ?? Ut;
|
|
246
|
+
return me(s, {
|
|
248
247
|
className: e,
|
|
249
248
|
value: t.value,
|
|
250
249
|
onChange: t.setValue.bind(t),
|
|
251
250
|
...t.textFieldProps
|
|
252
251
|
});
|
|
253
|
-
},
|
|
254
|
-
const a = y(
|
|
252
|
+
}, Ht = () => {
|
|
253
|
+
const a = y(b), e = h(), t = e.viewMode, s = [];
|
|
255
254
|
return e.itemView && s.push("list"), e.table && s.push("table"), s.length <= 1 ? null : /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(
|
|
256
255
|
w,
|
|
257
256
|
{
|
|
@@ -259,8 +258,8 @@ const vt = "flow--list--items--item--view", yt = "flow--list--items--item--view-
|
|
|
259
258
|
color: "secondary",
|
|
260
259
|
"aria-label": a.format("list.settings")
|
|
261
260
|
},
|
|
262
|
-
/* @__PURE__ */ n.createElement(
|
|
263
|
-
), /* @__PURE__ */ n.createElement(H, { selectionMode: "single", selectedKeys: [t] }, /* @__PURE__ */ n.createElement(
|
|
261
|
+
/* @__PURE__ */ n.createElement(rt, null)
|
|
262
|
+
), /* @__PURE__ */ n.createElement(H, { selectionMode: "single", selectedKeys: [t] }, /* @__PURE__ */ n.createElement(nt, null, /* @__PURE__ */ n.createElement(K, null, a.format("list.settings.viewMode")), s.map((i) => /* @__PURE__ */ n.createElement(
|
|
264
263
|
q,
|
|
265
264
|
{
|
|
266
265
|
id: i,
|
|
@@ -271,16 +270,16 @@ const vt = "flow--list--items--item--view", yt = "flow--list--items--item--view-
|
|
|
271
270
|
},
|
|
272
271
|
a.format(`list.settings.viewMode.${i}`)
|
|
273
272
|
)))));
|
|
274
|
-
}
|
|
273
|
+
}, qt = (a) => {
|
|
275
274
|
const { className: e } = a, t = h();
|
|
276
275
|
if (t.filters.length === 0 && t.visibleSorting.length === 0 && !t.search)
|
|
277
276
|
return null;
|
|
278
|
-
const s = t.filters.map((i) => /* @__PURE__ */ n.createElement(
|
|
279
|
-
return /* @__PURE__ */ n.createElement("div", { className: v(e,
|
|
280
|
-
},
|
|
281
|
-
list:
|
|
277
|
+
const s = t.filters.map((i) => /* @__PURE__ */ n.createElement(Bt, { key: i.property, filter: i }));
|
|
278
|
+
return /* @__PURE__ */ n.createElement("div", { className: v(e, L.header) }, /* @__PURE__ */ n.createElement("div", { className: L.pickerListAndSearch }, /* @__PURE__ */ n.createElement("div", { className: L.pickerList }, /* @__PURE__ */ n.createElement(Vt, null), s), t.search && /* @__PURE__ */ n.createElement(Ot, { className: L.searchField, search: t.search }), /* @__PURE__ */ n.createElement(Ht, null)), /* @__PURE__ */ n.createElement(zt, null));
|
|
279
|
+
}, Kt = "flow--list", Gt = {
|
|
280
|
+
list: Kt
|
|
282
281
|
};
|
|
283
|
-
let
|
|
282
|
+
let jt = class Fe {
|
|
284
283
|
constructor(e, t, s) {
|
|
285
284
|
r(this, "id");
|
|
286
285
|
r(this, "data");
|
|
@@ -288,19 +287,19 @@ let _t = class Ce {
|
|
|
288
287
|
this.collection = e, this.id = t, this.data = s;
|
|
289
288
|
}
|
|
290
289
|
static fromRow(e, t) {
|
|
291
|
-
return new
|
|
290
|
+
return new Fe(e, t.id, t.original);
|
|
292
291
|
}
|
|
293
292
|
};
|
|
294
|
-
class
|
|
293
|
+
class _t {
|
|
295
294
|
constructor(e) {
|
|
296
295
|
r(this, "list");
|
|
297
296
|
this.list = e;
|
|
298
297
|
}
|
|
299
298
|
get entries() {
|
|
300
|
-
return this.list.reactTable.table.getRowModel().rows.map((e) =>
|
|
299
|
+
return this.list.reactTable.table.getRowModel().rows.map((e) => jt.fromRow(this, e));
|
|
301
300
|
}
|
|
302
301
|
}
|
|
303
|
-
class
|
|
302
|
+
class Wt {
|
|
304
303
|
constructor(e, t = {}) {
|
|
305
304
|
r(this, "batchSize");
|
|
306
305
|
r(this, "list");
|
|
@@ -347,7 +346,7 @@ class Jt {
|
|
|
347
346
|
}
|
|
348
347
|
}
|
|
349
348
|
}
|
|
350
|
-
const
|
|
349
|
+
const Jt = "$";
|
|
351
350
|
class de {
|
|
352
351
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
353
352
|
constructor(e, t) {
|
|
@@ -356,10 +355,10 @@ class de {
|
|
|
356
355
|
this.filter = e, this.value = t;
|
|
357
356
|
}
|
|
358
357
|
equals(e) {
|
|
359
|
-
return
|
|
358
|
+
return je(this.value, e.value);
|
|
360
359
|
}
|
|
361
360
|
get id() {
|
|
362
|
-
return `${this.filter.property}@@${
|
|
361
|
+
return `${this.filter.property}@@${pe(this.value)}`;
|
|
363
362
|
}
|
|
364
363
|
get isActive() {
|
|
365
364
|
return this.filter.isValueActive(this);
|
|
@@ -374,8 +373,8 @@ class de {
|
|
|
374
373
|
this.filter.deactivateValue(this);
|
|
375
374
|
}
|
|
376
375
|
}
|
|
377
|
-
const
|
|
378
|
-
class
|
|
376
|
+
const Yt = (a, e) => a === e, Qt = (a) => String(a);
|
|
377
|
+
class Xt {
|
|
379
378
|
constructor(e, t) {
|
|
380
379
|
r(this, "_values");
|
|
381
380
|
r(this, "_valuesFromTableState");
|
|
@@ -386,15 +385,30 @@ class Zt {
|
|
|
386
385
|
r(this, "renderItem");
|
|
387
386
|
r(this, "name");
|
|
388
387
|
r(this, "onFilterUpdateCallbacks", /* @__PURE__ */ new Set());
|
|
388
|
+
r(this, "defaultSelectedValues");
|
|
389
389
|
var s;
|
|
390
|
-
this.list = e, this.property = t.property, this.mode = t.mode ?? "one", this._values = (s = t.values) == null ? void 0 : s.map((i) => new de(this, i)), this.matcher = t.matcher ??
|
|
390
|
+
this.list = e, this.property = t.property, this.mode = t.mode ?? "one", this._values = (s = t.values) == null ? void 0 : s.map((i) => new de(this, i)), this.matcher = t.matcher ?? Yt, this.renderItem = t.renderItem ?? Qt, this.name = t.name, this.defaultSelectedValues = t.defaultSelected ? this.values.filter(
|
|
391
|
+
(i) => {
|
|
392
|
+
var o;
|
|
393
|
+
return (o = t.defaultSelected) == null ? void 0 : o.some((l) => l === i.value);
|
|
394
|
+
}
|
|
395
|
+
) : [];
|
|
396
|
+
}
|
|
397
|
+
updateInitialState(e) {
|
|
398
|
+
e.columnFilters = [
|
|
399
|
+
...e.columnFilters ?? [],
|
|
400
|
+
...this.defaultSelectedValues.map((t) => ({
|
|
401
|
+
id: t.filter.property,
|
|
402
|
+
value: t
|
|
403
|
+
}))
|
|
404
|
+
];
|
|
391
405
|
}
|
|
392
406
|
updateTableColumnDef(e) {
|
|
393
407
|
e.enableColumnFilter = !0, e.filterFn = this.getReactTableFilterFn();
|
|
394
408
|
}
|
|
395
409
|
getReactTableFilterFn() {
|
|
396
410
|
return (e, t, s) => {
|
|
397
|
-
const i = this.property, o = i.startsWith(
|
|
411
|
+
const i = this.property, o = i.startsWith(Jt) ? e.original : ot(e.original, i);
|
|
398
412
|
return this.checkFilterMatches(o, s);
|
|
399
413
|
};
|
|
400
414
|
}
|
|
@@ -422,7 +436,7 @@ class Zt {
|
|
|
422
436
|
return ((e = this.getTableColumnFilter()) == null ? void 0 : e.value) ?? null;
|
|
423
437
|
}
|
|
424
438
|
getValuesFromTableState() {
|
|
425
|
-
return
|
|
439
|
+
return _e(
|
|
426
440
|
Array.from(this.getTableColumn().getFacetedUniqueValues().keys()).flatMap((e) => e).filter((e) => e != null)
|
|
427
441
|
).map((e) => new de(this, e));
|
|
428
442
|
}
|
|
@@ -468,7 +482,7 @@ class Zt {
|
|
|
468
482
|
this.onFilterUpdateCallbacks.add(e);
|
|
469
483
|
}
|
|
470
484
|
}
|
|
471
|
-
class
|
|
485
|
+
class Zt {
|
|
472
486
|
constructor(e, t) {
|
|
473
487
|
r(this, "list");
|
|
474
488
|
r(this, "property");
|
|
@@ -520,32 +534,38 @@ class j {
|
|
|
520
534
|
return new j(e, t, s);
|
|
521
535
|
}
|
|
522
536
|
useReactTable(e, t = {}) {
|
|
523
|
-
|
|
537
|
+
var l;
|
|
538
|
+
const s = this.list.loader.useData(), i = {
|
|
539
|
+
pagination: {
|
|
540
|
+
pageSize: this.list.batches.batchSize
|
|
541
|
+
},
|
|
542
|
+
columnFilters: []
|
|
543
|
+
};
|
|
544
|
+
for (const c of this.list.filters)
|
|
545
|
+
c.updateInitialState(i);
|
|
546
|
+
(l = this.list.search) == null || l.updateInitialState(i);
|
|
547
|
+
const o = lt({
|
|
524
548
|
data: s,
|
|
525
549
|
state: {
|
|
526
550
|
sorting: this.sortingState
|
|
527
551
|
},
|
|
528
552
|
getRowId: this.list.getItemId,
|
|
529
|
-
initialState:
|
|
530
|
-
pagination: {
|
|
531
|
-
pageSize: this.list.batches.batchSize
|
|
532
|
-
}
|
|
533
|
-
},
|
|
553
|
+
initialState: i,
|
|
534
554
|
columns: this.getTableColumnDefs(),
|
|
535
|
-
getCoreRowModel:
|
|
536
|
-
getSortedRowModel:
|
|
555
|
+
getCoreRowModel: ct(),
|
|
556
|
+
getSortedRowModel: dt(),
|
|
537
557
|
getFilteredRowModel: ut(),
|
|
538
|
-
getPaginationRowModel:
|
|
539
|
-
getFacetedUniqueValues:
|
|
540
|
-
onSortingChange: (
|
|
541
|
-
this.handleSortingStateUpdate(
|
|
558
|
+
getPaginationRowModel: mt(),
|
|
559
|
+
getFacetedUniqueValues: ht(),
|
|
560
|
+
onSortingChange: (c) => {
|
|
561
|
+
this.handleSortingStateUpdate(c);
|
|
542
562
|
},
|
|
543
563
|
globalFilterFn: "auto",
|
|
544
564
|
...t
|
|
545
565
|
});
|
|
546
566
|
return k(() => {
|
|
547
567
|
e && e(this.list);
|
|
548
|
-
}, [this.list, e,
|
|
568
|
+
}, [this.list, e, o]), o;
|
|
549
569
|
}
|
|
550
570
|
handleSortingStateUpdate(e) {
|
|
551
571
|
const t = typeof e == "function" ? e(this.sortingState) : e, s = this.list.sorting.filter(
|
|
@@ -558,7 +578,7 @@ class j {
|
|
|
558
578
|
}
|
|
559
579
|
getTableColumn(e) {
|
|
560
580
|
const t = this.table.getColumn(e);
|
|
561
|
-
return
|
|
581
|
+
return ge(!!t, `Column #${e} is not defined`), t;
|
|
562
582
|
}
|
|
563
583
|
getTableColumnDefs() {
|
|
564
584
|
const e = /* @__PURE__ */ new Map(), t = (s) => {
|
|
@@ -585,7 +605,7 @@ class _ {
|
|
|
585
605
|
r(this, "dataBatches", []);
|
|
586
606
|
r(this, "prevDataBatches", []);
|
|
587
607
|
r(this, "batchLoadingStates", ["void"]);
|
|
588
|
-
|
|
608
|
+
st(this, {
|
|
589
609
|
prevDataBatches: !1,
|
|
590
610
|
useMergedData: !1,
|
|
591
611
|
useIsLoading: !1,
|
|
@@ -599,7 +619,7 @@ class _ {
|
|
|
599
619
|
});
|
|
600
620
|
}
|
|
601
621
|
static useNew() {
|
|
602
|
-
return
|
|
622
|
+
return qe(new _()).current;
|
|
603
623
|
}
|
|
604
624
|
reset() {
|
|
605
625
|
this.batchLoadingStates = [], this.dataBatches = [];
|
|
@@ -623,7 +643,7 @@ class _ {
|
|
|
623
643
|
return le(() => this.isLoading);
|
|
624
644
|
}
|
|
625
645
|
}
|
|
626
|
-
const
|
|
646
|
+
const es = [];
|
|
627
647
|
class W {
|
|
628
648
|
constructor(e, t = {}) {
|
|
629
649
|
r(this, "list");
|
|
@@ -634,7 +654,7 @@ class W {
|
|
|
634
654
|
r(this, "loaderState");
|
|
635
655
|
var c;
|
|
636
656
|
const { source: s } = t;
|
|
637
|
-
this.dataSource = s ?? { staticData:
|
|
657
|
+
this.dataSource = s ?? { staticData: es };
|
|
638
658
|
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;
|
|
639
659
|
this.list = e, this.loaderState = _.useNew(), this.manualPagination = i ?? !1, this.manualFiltering = o ?? this.manualPagination, this.manualSorting = l ?? this.manualPagination, this.list.filters.forEach((d) => d.onFilterUpdated(() => this.reset())), (c = this.list.search) == null || c.onUpdated(() => this.reset());
|
|
640
660
|
}
|
|
@@ -654,7 +674,7 @@ class W {
|
|
|
654
674
|
return this.loaderState.useMergedData();
|
|
655
675
|
}
|
|
656
676
|
getLoaderInvocationHooks() {
|
|
657
|
-
return
|
|
677
|
+
return We(this.list.batches.getBatchIndex() + 1, (t) => t).map((t) => () => {
|
|
658
678
|
this.useLoadBatch(t);
|
|
659
679
|
});
|
|
660
680
|
}
|
|
@@ -713,7 +733,7 @@ class W {
|
|
|
713
733
|
[t.staticData]
|
|
714
734
|
);
|
|
715
735
|
if ("asyncLoader" in t) {
|
|
716
|
-
const i = t.asyncLoader, o = t.dependencies, l = o ?
|
|
736
|
+
const i = t.asyncLoader, o = t.dependencies, l = o ? pe(o).toString() : void 0;
|
|
717
737
|
return oe(i, [s], {
|
|
718
738
|
loaderId: l
|
|
719
739
|
});
|
|
@@ -725,13 +745,14 @@ class W {
|
|
|
725
745
|
throw new Error("Unknown data source");
|
|
726
746
|
}
|
|
727
747
|
}
|
|
728
|
-
class
|
|
748
|
+
class ts {
|
|
729
749
|
constructor(e, t) {
|
|
730
750
|
r(this, "list");
|
|
731
751
|
r(this, "render");
|
|
732
752
|
r(this, "textFieldProps");
|
|
733
753
|
r(this, "onUpdateCallbacks", /* @__PURE__ */ new Set());
|
|
734
|
-
this
|
|
754
|
+
r(this, "defaultValue");
|
|
755
|
+
this.list = e, this.render = t.render, this.textFieldProps = t.textFieldProps, this.defaultValue = t.defaultValue;
|
|
735
756
|
}
|
|
736
757
|
get value() {
|
|
737
758
|
return this.list.reactTable.searchString;
|
|
@@ -742,8 +763,11 @@ class ss {
|
|
|
742
763
|
callOnUpdateCallbacks() {
|
|
743
764
|
this.onUpdateCallbacks.forEach((e) => e());
|
|
744
765
|
}
|
|
766
|
+
updateInitialState(e) {
|
|
767
|
+
e.globalFilter = this.defaultValue;
|
|
768
|
+
}
|
|
745
769
|
setValue(e) {
|
|
746
|
-
e === void 0 || e.trim() === "" ? this.list.reactTable.table.getState().globalFilter && (this.list.reactTable.table.
|
|
770
|
+
e === void 0 || e.trim() === "" ? this.list.reactTable.table.getState().globalFilter && (this.list.reactTable.table.setGlobalFilter(void 0), this.callOnUpdateCallbacks()) : (this.list.reactTable.table.setGlobalFilter(e), this.callOnUpdateCallbacks());
|
|
747
771
|
}
|
|
748
772
|
clear() {
|
|
749
773
|
this.setValue(void 0);
|
|
@@ -766,22 +790,22 @@ const V = class V {
|
|
|
766
790
|
return (this.renderFn ?? V.fallbackRenderItemFn)(e);
|
|
767
791
|
}
|
|
768
792
|
};
|
|
769
|
-
r(V, "fallbackRenderItemFn", (e) =>
|
|
770
|
-
let z = V,
|
|
793
|
+
r(V, "fallbackRenderItemFn", (e) => me("pre", void 0, JSON.stringify(e)));
|
|
794
|
+
let z = V, ss = class {
|
|
771
795
|
constructor(e, t = {}) {
|
|
772
796
|
r(this, "tableHeader");
|
|
773
797
|
r(this, "componentProps");
|
|
774
798
|
this.tableHeader = e, this.componentProps = t;
|
|
775
799
|
}
|
|
776
|
-
},
|
|
800
|
+
}, as = class {
|
|
777
801
|
constructor(e, t = {}) {
|
|
778
802
|
r(this, "table");
|
|
779
803
|
r(this, "componentProps");
|
|
780
804
|
r(this, "columns");
|
|
781
805
|
const { columns: s = [], ...i } = t;
|
|
782
|
-
this.table = e, this.columns = s.map((o) => new
|
|
806
|
+
this.table = e, this.columns = s.map((o) => new ss(this, o)), this.componentProps = i;
|
|
783
807
|
}
|
|
784
|
-
},
|
|
808
|
+
}, is = class {
|
|
785
809
|
constructor(e, t = {}) {
|
|
786
810
|
r(this, "row");
|
|
787
811
|
r(this, "renderFn");
|
|
@@ -789,32 +813,32 @@ let z = V, as = class {
|
|
|
789
813
|
const { renderFn: s, ...i } = t;
|
|
790
814
|
this.row = e, this.renderFn = s, this.componentProps = i;
|
|
791
815
|
}
|
|
792
|
-
},
|
|
816
|
+
}, ns = class {
|
|
793
817
|
constructor(e, t = {}) {
|
|
794
818
|
r(this, "tableBody");
|
|
795
819
|
r(this, "cells");
|
|
796
820
|
r(this, "componentProps");
|
|
797
821
|
const { cells: s = [], ...i } = t;
|
|
798
|
-
this.tableBody = e, this.cells = s.map((o) => new
|
|
822
|
+
this.tableBody = e, this.cells = s.map((o) => new is(this, o)), this.componentProps = i;
|
|
799
823
|
}
|
|
800
|
-
},
|
|
824
|
+
}, rs = class {
|
|
801
825
|
constructor(e, t = {}) {
|
|
802
826
|
r(this, "table");
|
|
803
827
|
r(this, "componentProps");
|
|
804
828
|
r(this, "row");
|
|
805
829
|
const { row: s, ...i } = t;
|
|
806
|
-
this.table = e, this.row = new
|
|
830
|
+
this.table = e, this.row = new ns(this, s), this.componentProps = i;
|
|
807
831
|
}
|
|
808
|
-
},
|
|
832
|
+
}, os = class {
|
|
809
833
|
constructor(e, t = {}) {
|
|
810
834
|
r(this, "list");
|
|
811
835
|
r(this, "header");
|
|
812
836
|
r(this, "body");
|
|
813
837
|
r(this, "componentProps");
|
|
814
838
|
const { header: s, body: i, ...o } = t;
|
|
815
|
-
this.list = e, this.header = new
|
|
839
|
+
this.list = e, this.header = new as(this, s), this.body = new rs(this, i), this.componentProps = o;
|
|
816
840
|
}
|
|
817
|
-
},
|
|
841
|
+
}, ls = class Ce {
|
|
818
842
|
constructor(e) {
|
|
819
843
|
r(this, "filters");
|
|
820
844
|
r(this, "itemView");
|
|
@@ -838,13 +862,13 @@ let z = V, as = class {
|
|
|
838
862
|
batchesController: l,
|
|
839
863
|
onChange: c,
|
|
840
864
|
loader: d,
|
|
841
|
-
search:
|
|
842
|
-
onAction:
|
|
865
|
+
search: u,
|
|
866
|
+
onAction: p,
|
|
843
867
|
getItemId: T,
|
|
844
868
|
defaultViewMode: M,
|
|
845
869
|
...C
|
|
846
870
|
} = e;
|
|
847
|
-
this.items = new
|
|
871
|
+
this.items = new _t(this), this.filters = i.map((S) => new Xt(this, S)), this.sorting = o.map((S) => new Zt(this, S)), this.search = u ? new ts(this, u) : void 0, this.itemView = t ? new z(this, t) : void 0, this.table = s ? new os(this, s) : void 0, this.batches = new Wt(this, l), this.componentProps = C, this.loader = W.useNew(this, d), this.onAction = p, this.getItemId = T, this.reactTable = j.useNew(this, c, {
|
|
848
872
|
manualFiltering: this.loader.manualFiltering,
|
|
849
873
|
manualPagination: this.loader.manualPagination,
|
|
850
874
|
manualSorting: this.loader.manualSorting
|
|
@@ -855,7 +879,7 @@ let z = V, as = class {
|
|
|
855
879
|
}, [this.filters]);
|
|
856
880
|
}
|
|
857
881
|
static useNew(e) {
|
|
858
|
-
return new
|
|
882
|
+
return new Ce(e);
|
|
859
883
|
}
|
|
860
884
|
get isFiltered() {
|
|
861
885
|
return this.filters.some((e) => e.isActive()) || !!this.search && this.search.isSet;
|
|
@@ -865,7 +889,7 @@ let z = V, as = class {
|
|
|
865
889
|
}
|
|
866
890
|
getSorting(e) {
|
|
867
891
|
const t = this.sorting.find((s) => s.id === e);
|
|
868
|
-
return
|
|
892
|
+
return ge(!!t, `Could not get Sorting (ID: ${e})`), t;
|
|
869
893
|
}
|
|
870
894
|
clearSorting() {
|
|
871
895
|
return this.sorting.forEach((e) => e.clear());
|
|
@@ -878,26 +902,26 @@ let z = V, as = class {
|
|
|
878
902
|
return !this.loader.useIsLoading() && this.items.entries.length === 0;
|
|
879
903
|
}
|
|
880
904
|
};
|
|
881
|
-
const
|
|
882
|
-
items:
|
|
883
|
-
isLoading:
|
|
884
|
-
}, us = "flow--list--items--item",
|
|
905
|
+
const cs = "flow--list--items", ds = "flow--list--items--is-loading", ue = {
|
|
906
|
+
items: cs,
|
|
907
|
+
isLoading: ds
|
|
908
|
+
}, us = "flow--list--items--item", ms = "flow--list--items--item--is-selected", hs = "flow--list--items--item--has-action", P = {
|
|
885
909
|
item: us,
|
|
886
|
-
isSelected:
|
|
887
|
-
hasAction:
|
|
888
|
-
},
|
|
910
|
+
isSelected: ms,
|
|
911
|
+
hasAction: hs
|
|
912
|
+
}, ps = (a) => {
|
|
889
913
|
const { id: e, data: t, children: s } = a, o = h().itemView;
|
|
890
914
|
if (!o)
|
|
891
915
|
return null;
|
|
892
|
-
const l = o.list.onAction, c = o.textValue ? o.textValue(t) : void 0, d = o.href ? o.href(t) : void 0,
|
|
916
|
+
const l = o.list.onAction, c = o.textValue ? o.textValue(t) : void 0, d = o.href ? o.href(t) : void 0, u = !!l || !!d;
|
|
893
917
|
return /* @__PURE__ */ n.createElement(
|
|
894
918
|
G.GridListItem,
|
|
895
919
|
{
|
|
896
920
|
id: e,
|
|
897
|
-
className: (
|
|
921
|
+
className: (p) => v(
|
|
898
922
|
P.item,
|
|
899
|
-
|
|
900
|
-
|
|
923
|
+
u && P.hasAction,
|
|
924
|
+
p.isSelected && P.isSelected
|
|
901
925
|
),
|
|
902
926
|
onAction: () => l && l(t),
|
|
903
927
|
textValue: c,
|
|
@@ -905,18 +929,18 @@ const ds = "flow--list--items", ms = "flow--list--items--is-loading", me = {
|
|
|
905
929
|
},
|
|
906
930
|
s ?? o.render(t)
|
|
907
931
|
);
|
|
908
|
-
},
|
|
909
|
-
const a = y(
|
|
910
|
-
return /* @__PURE__ */ n.createElement(
|
|
911
|
-
}, fs = () => /* @__PURE__ */ n.createElement(
|
|
932
|
+
}, gs = (a) => /* @__PURE__ */ n.createElement(G.GridListItem, { textValue: "-", className: P.item }, a.children), U = () => {
|
|
933
|
+
const a = y(b);
|
|
934
|
+
return /* @__PURE__ */ n.createElement(pt, null, /* @__PURE__ */ n.createElement(gt, null), /* @__PURE__ */ n.createElement(K, null, a.format("list.noResult.heading")), /* @__PURE__ */ n.createElement(E, null, a.format("list.noResult.text")));
|
|
935
|
+
}, fs = () => /* @__PURE__ */ n.createElement(Ee, null, /* @__PURE__ */ n.createElement(K, null, /* @__PURE__ */ n.createElement(A, { width: "200px" })), /* @__PURE__ */ n.createElement(E, null, /* @__PURE__ */ n.createElement(A, { width: "300px" }))), bs = () => {
|
|
912
936
|
var t;
|
|
913
937
|
const e = ((t = h().itemView) == null ? void 0 : t.fallback) ?? /* @__PURE__ */ n.createElement(fs, null);
|
|
914
|
-
return Array.from(Array(5)).map((s, i) => /* @__PURE__ */ n.createElement(
|
|
915
|
-
},
|
|
938
|
+
return Array.from(Array(5)).map((s, i) => /* @__PURE__ */ n.createElement(gs, { key: i }, Ke(e)));
|
|
939
|
+
}, Ss = () => {
|
|
916
940
|
const a = h(), e = a.loader.useIsLoading(), t = a.loader.useIsInitiallyLoading();
|
|
917
941
|
if (!a.itemView)
|
|
918
942
|
return null;
|
|
919
|
-
const s = a.items.entries.map((o) => /* @__PURE__ */ n.createElement(
|
|
943
|
+
const s = a.items.entries.map((o) => /* @__PURE__ */ n.createElement(ps, { key: o.id, data: o.data, id: o.id })), i = v(ue.items, e && ue.isLoading);
|
|
920
944
|
return /* @__PURE__ */ n.createElement("div", { "aria-hidden": t, "aria-busy": e }, /* @__PURE__ */ n.createElement(
|
|
921
945
|
G.GridList,
|
|
922
946
|
{
|
|
@@ -924,21 +948,21 @@ const ds = "flow--list--items", ms = "flow--list--items--is-loading", me = {
|
|
|
924
948
|
...a.componentProps,
|
|
925
949
|
renderEmptyState: () => /* @__PURE__ */ n.createElement(U, null)
|
|
926
950
|
},
|
|
927
|
-
t ? /* @__PURE__ */ n.createElement(
|
|
951
|
+
t ? /* @__PURE__ */ n.createElement(bs, null) : s
|
|
928
952
|
));
|
|
929
|
-
}, Ie = (a) => null,
|
|
930
|
-
footer:
|
|
953
|
+
}, Ie = (a) => null, ws = () => Ie, Le = (a) => null, vs = () => Le, Pe = (a) => null, ys = () => Pe, ke = (a) => null, Es = () => ke, Ae = (a) => null, Ts = () => Ae, Fs = "flow--list--footer", Cs = {
|
|
954
|
+
footer: Fs
|
|
931
955
|
}, Is = (a) => {
|
|
932
|
-
const e = y(
|
|
956
|
+
const e = y(b), t = h(), s = t.batches, i = t.loader.useIsInitiallyLoading(), o = t.useIsEmpty(), l = s.getTotalItemsCount(), c = s.getVisibleItemsCount();
|
|
933
957
|
if (o)
|
|
934
958
|
return null;
|
|
935
|
-
const d = i ? /* @__PURE__ */ n.createElement(
|
|
959
|
+
const d = i ? /* @__PURE__ */ n.createElement(St, { width: "200px" }) : e.format("list.paginationInfo", {
|
|
936
960
|
visibleItemsCount: c,
|
|
937
961
|
totalItemsCount: l
|
|
938
962
|
});
|
|
939
963
|
return /* @__PURE__ */ n.createElement(E, { ...a }, d);
|
|
940
|
-
},
|
|
941
|
-
const e = y(
|
|
964
|
+
}, Ls = (a) => {
|
|
965
|
+
const e = y(b), t = h(), s = t.loader.useIsLoading(), i = t.loader.useIsInitiallyLoading();
|
|
942
966
|
return !t.batches.hasNextBatch() && !s ? null : /* @__PURE__ */ n.createElement(
|
|
943
967
|
w,
|
|
944
968
|
{
|
|
@@ -951,22 +975,22 @@ const ds = "flow--list--items", ms = "flow--list--items--is-loading", me = {
|
|
|
951
975
|
},
|
|
952
976
|
e.format("list.showMore")
|
|
953
977
|
);
|
|
954
|
-
},
|
|
955
|
-
function
|
|
978
|
+
}, Ps = () => /* @__PURE__ */ n.createElement("div", { className: Cs.footer }, /* @__PURE__ */ n.createElement(Is, null), /* @__PURE__ */ n.createElement(Ls, null));
|
|
979
|
+
function Ve(a) {
|
|
956
980
|
return null;
|
|
957
981
|
}
|
|
958
|
-
const
|
|
959
|
-
table:
|
|
960
|
-
isLoading:
|
|
961
|
-
row:
|
|
962
|
-
isSelected:
|
|
963
|
-
hasAction:
|
|
964
|
-
},
|
|
982
|
+
const ks = () => Ve, Be = (a) => null, Me = (a) => null, xe = (a) => null, As = (a) => /* @__PURE__ */ n.createElement(fe, { ...a }, /* @__PURE__ */ n.createElement(be, null, /* @__PURE__ */ n.createElement(Se, null, /* @__PURE__ */ n.createElement(A, { width: "100%" }))), /* @__PURE__ */ n.createElement(we, null, Array.from(Array(5)).map((e, t) => /* @__PURE__ */ n.createElement(ve, { key: t }, /* @__PURE__ */ n.createElement(ye, null, /* @__PURE__ */ n.createElement(A, { width: "100%" })))))), Vs = "flow--list--table", Bs = "flow--list--table--is-loading", Ms = "flow--list--table--row", xs = "flow--list--table--is-selected", Rs = "flow--list--table--has-action", F = {
|
|
983
|
+
table: Vs,
|
|
984
|
+
isLoading: Bs,
|
|
985
|
+
row: Ms,
|
|
986
|
+
isSelected: xs,
|
|
987
|
+
hasAction: Rs
|
|
988
|
+
}, Ns = () => {
|
|
965
989
|
const a = h(), e = a.table, t = a.useIsEmpty(), s = a.loader.useIsLoading(), i = a.loader.useIsInitiallyLoading();
|
|
966
990
|
if (!e)
|
|
967
991
|
return null;
|
|
968
992
|
if (i)
|
|
969
|
-
return /* @__PURE__ */ n.createElement(
|
|
993
|
+
return /* @__PURE__ */ n.createElement(As, { ...e.componentProps });
|
|
970
994
|
if (t)
|
|
971
995
|
return /* @__PURE__ */ n.createElement(U, null);
|
|
972
996
|
const o = e.list.onAction, l = v(
|
|
@@ -981,9 +1005,9 @@ const As = () => Be, Me = (a) => null, xe = (a) => null, Re = (a) => null, Vs =
|
|
|
981
1005
|
...e.componentProps,
|
|
982
1006
|
className: l
|
|
983
1007
|
},
|
|
984
|
-
/* @__PURE__ */ n.createElement(
|
|
1008
|
+
/* @__PURE__ */ n.createElement(be, { ...e.header.componentProps }, e.header.columns.map((c, d) => /* @__PURE__ */ n.createElement(Se, { key: d, ...c.componentProps }))),
|
|
985
1009
|
/* @__PURE__ */ n.createElement(
|
|
986
|
-
|
|
1010
|
+
we,
|
|
987
1011
|
{
|
|
988
1012
|
...e.body.componentProps,
|
|
989
1013
|
renderEmptyState: () => /* @__PURE__ */ n.createElement(U, null)
|
|
@@ -991,137 +1015,130 @@ const As = () => Be, Me = (a) => null, xe = (a) => null, Re = (a) => null, Vs =
|
|
|
991
1015
|
a.items.entries.map((c) => {
|
|
992
1016
|
var d;
|
|
993
1017
|
return /* @__PURE__ */ n.createElement(
|
|
994
|
-
|
|
1018
|
+
ve,
|
|
995
1019
|
{
|
|
996
|
-
className: (
|
|
1020
|
+
className: (u) => v(
|
|
997
1021
|
F.row,
|
|
998
1022
|
o && F.hasAction,
|
|
999
1023
|
e.body.row.componentProps.className,
|
|
1000
|
-
|
|
1024
|
+
u.isSelected && F.isSelected
|
|
1001
1025
|
),
|
|
1002
1026
|
key: c.id,
|
|
1003
1027
|
onAction: o ? () => o(c.data) : void 0,
|
|
1004
1028
|
...e.body.row.componentProps
|
|
1005
1029
|
},
|
|
1006
|
-
(d = e.body.row) == null ? void 0 : d.cells.map((
|
|
1030
|
+
(d = e.body.row) == null ? void 0 : d.cells.map((u, p) => /* @__PURE__ */ n.createElement(ye, { key: p, ...u.componentProps }, u.renderFn ? u.renderFn(c.data) : void 0))
|
|
1007
1031
|
);
|
|
1008
1032
|
})
|
|
1009
1033
|
)
|
|
1010
1034
|
);
|
|
1011
|
-
},
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1035
|
+
}, Re = (a) => null, Ne = (a) => null, De = (a) => null, Ds = Ze("List", (a) => {
|
|
1036
|
+
var J, Y, Q, X, Z, ee, te, se, ae;
|
|
1037
|
+
const { children: e, batchSize: t, onChange: s, refProp: i, ...o } = a, l = (J = f(
|
|
1038
|
+
e,
|
|
1039
|
+
Ie
|
|
1040
|
+
)) == null ? void 0 : J.props, c = (Y = f(
|
|
1041
|
+
e,
|
|
1042
|
+
ft
|
|
1043
|
+
)) == null ? void 0 : Y.props, d = (Q = f(e, Ae)) == null ? void 0 : Q.props, u = {
|
|
1044
|
+
source: l ? {
|
|
1045
|
+
...l,
|
|
1046
|
+
asyncLoader: l.children
|
|
1047
|
+
} : c ? {
|
|
1048
|
+
...c,
|
|
1049
|
+
asyncResourceFactory: c.children
|
|
1050
|
+
} : d ? {
|
|
1051
|
+
staticData: d.data
|
|
1052
|
+
} : void 0
|
|
1053
|
+
}, p = (X = f(e, Ve)) == null ? void 0 : X.props, T = (Z = f(e, ke)) == null ? void 0 : Z.props, M = (ee = f(e, Re)) == null ? void 0 : ee.props, C = I(e, Be).map(
|
|
1054
|
+
(g) => ({
|
|
1055
|
+
...g.props,
|
|
1056
|
+
name: g.props.children
|
|
1057
|
+
})
|
|
1058
|
+
), x = I(e, xe).map(
|
|
1059
|
+
(g) => ({
|
|
1060
|
+
...g.props,
|
|
1061
|
+
renderFn: g.props.children
|
|
1062
|
+
})
|
|
1063
|
+
), R = (te = f(e, Me)) == null ? void 0 : te.props, S = (se = f(e, Ne)) == null ? void 0 : se.props, $e = (ae = f(e, De)) == null ? void 0 : ae.props, N = ls.useNew({
|
|
1064
|
+
onChange: s,
|
|
1065
|
+
loader: u,
|
|
1066
|
+
filters: I(e, Le).map(
|
|
1067
|
+
(g) => ({
|
|
1068
|
+
...g.props,
|
|
1069
|
+
renderItem: g.props.children
|
|
1043
1070
|
})
|
|
1044
|
-
),
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
),
|
|
1060
|
-
itemView: T ? {
|
|
1061
|
-
...T,
|
|
1062
|
-
renderFn: T.children
|
|
1063
|
-
} : void 0,
|
|
1064
|
-
table: C.length > 0 ? {
|
|
1065
|
-
header: {
|
|
1066
|
-
...S,
|
|
1067
|
-
columns: C
|
|
1068
|
-
},
|
|
1069
|
-
body: {
|
|
1070
|
-
...ze,
|
|
1071
|
-
row: {
|
|
1072
|
-
...R,
|
|
1073
|
-
cells: x
|
|
1074
|
-
}
|
|
1075
|
-
},
|
|
1076
|
-
...M
|
|
1077
|
-
} : void 0,
|
|
1078
|
-
batchesController: {
|
|
1079
|
-
batchSize: t
|
|
1071
|
+
),
|
|
1072
|
+
search: p ? {
|
|
1073
|
+
render: p.children,
|
|
1074
|
+
textFieldProps: p,
|
|
1075
|
+
defaultValue: p.defaultValue
|
|
1076
|
+
} : void 0,
|
|
1077
|
+
sorting: I(e, Pe).map((g) => g.props),
|
|
1078
|
+
itemView: T ? {
|
|
1079
|
+
...T,
|
|
1080
|
+
renderFn: T.children
|
|
1081
|
+
} : void 0,
|
|
1082
|
+
table: C.length > 0 ? {
|
|
1083
|
+
header: {
|
|
1084
|
+
...S,
|
|
1085
|
+
columns: C
|
|
1080
1086
|
},
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
value: {
|
|
1087
|
-
list: N
|
|
1087
|
+
body: {
|
|
1088
|
+
...$e,
|
|
1089
|
+
row: {
|
|
1090
|
+
...R,
|
|
1091
|
+
cells: x
|
|
1088
1092
|
}
|
|
1089
1093
|
},
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1094
|
+
...M
|
|
1095
|
+
} : void 0,
|
|
1096
|
+
batchesController: {
|
|
1097
|
+
batchSize: t
|
|
1098
|
+
},
|
|
1099
|
+
...o
|
|
1100
|
+
});
|
|
1101
|
+
return /* @__PURE__ */ n.createElement(
|
|
1102
|
+
Te.Provider,
|
|
1103
|
+
{
|
|
1104
|
+
value: {
|
|
1105
|
+
list: N
|
|
1106
|
+
}
|
|
1107
|
+
},
|
|
1108
|
+
/* @__PURE__ */ n.createElement(kt, null),
|
|
1109
|
+
/* @__PURE__ */ n.createElement("div", { className: Gt.list, ref: i }, /* @__PURE__ */ n.createElement(qt, null), N.viewMode === "list" && /* @__PURE__ */ n.createElement(Ss, null), N.viewMode === "table" && /* @__PURE__ */ n.createElement(Ns, null), /* @__PURE__ */ n.createElement(Ps, null))
|
|
1110
|
+
);
|
|
1111
|
+
}), $s = () => Ds, Ma = () => ({
|
|
1112
|
+
List: $s(),
|
|
1113
|
+
Filter: vs(),
|
|
1114
|
+
Search: ks(),
|
|
1115
|
+
Sorting: ys(),
|
|
1116
|
+
Item: Es(),
|
|
1117
|
+
ItemView: Ee,
|
|
1118
|
+
TableHeader: Ne,
|
|
1119
|
+
TableColumn: Be,
|
|
1120
|
+
TableBody: De,
|
|
1121
|
+
TableRow: Me,
|
|
1122
|
+
TableCell: xe,
|
|
1123
|
+
Table: Re,
|
|
1124
|
+
StaticData: Ts(),
|
|
1125
|
+
LoaderAsync: ws(),
|
|
1126
|
+
LoaderAsyncResource: bt()
|
|
1110
1127
|
});
|
|
1111
1128
|
export {
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1129
|
+
Ds as List,
|
|
1130
|
+
Le as ListFilter,
|
|
1131
|
+
ke as ListItem,
|
|
1132
|
+
Ee as ListItemView,
|
|
1116
1133
|
Ie as ListLoaderAsync,
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1134
|
+
Pe as ListSorting,
|
|
1135
|
+
Ae as ListStaticData,
|
|
1136
|
+
$s as TypedList,
|
|
1137
|
+
vs as TypedListFilter,
|
|
1138
|
+
Es as TypedListItem,
|
|
1139
|
+
ws as TypedListLoaderAsync,
|
|
1140
|
+
ys as TypedListSorting,
|
|
1141
|
+
Ts as TypedListStaticData,
|
|
1142
|
+
Ma as typedList,
|
|
1126
1143
|
h as useList
|
|
1127
1144
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ColumnDef, ColumnFilter } from '@tanstack/react-table';
|
|
1
|
+
import { ColumnDef, ColumnFilter, InitialTableState } from '@tanstack/react-table';
|
|
2
2
|
import { default as List } from '../List';
|
|
3
3
|
import { FilterMatcher, FilterMode, FilterShape } from './types';
|
|
4
4
|
import { PropertyName, PropertyValueRenderMethod } from '../types';
|
|
@@ -13,7 +13,9 @@ export declare class Filter<T, TProp extends PropertyName<T>, TMatchValue> {
|
|
|
13
13
|
readonly renderItem: PropertyValueRenderMethod<TMatchValue>;
|
|
14
14
|
readonly name?: string;
|
|
15
15
|
private onFilterUpdateCallbacks;
|
|
16
|
+
private readonly defaultSelectedValues;
|
|
16
17
|
constructor(list: List<T>, shape: FilterShape<T, TProp, TMatchValue>);
|
|
18
|
+
updateInitialState(initialState: InitialTableState): void;
|
|
17
19
|
updateTableColumnDef(def: ColumnDef<T>): void;
|
|
18
20
|
private getReactTableFilterFn;
|
|
19
21
|
private checkFilterMatches;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Filter } from './Filter';
|
|
2
2
|
export declare class FilterValue {
|
|
3
|
-
|
|
3
|
+
readonly filter: Filter<unknown, string, unknown>;
|
|
4
4
|
readonly value: unknown;
|
|
5
5
|
constructor(filter: Filter<any, any, any>, value: unknown);
|
|
6
6
|
equals(otherValue: FilterValue): boolean;
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
import { default as List } from '../List';
|
|
2
2
|
import { SearchFieldRenderComponent, SearchShape, SearchValue } from './types';
|
|
3
|
+
import { InitialTableState } from '@tanstack/react-table';
|
|
3
4
|
export declare class Search<T> {
|
|
4
5
|
readonly list: List<T>;
|
|
5
6
|
readonly render?: SearchFieldRenderComponent;
|
|
6
7
|
readonly textFieldProps: SearchShape<T>["textFieldProps"];
|
|
7
8
|
private onUpdateCallbacks;
|
|
9
|
+
private readonly defaultValue?;
|
|
8
10
|
constructor(list: List<T>, searchShape: SearchShape<T>);
|
|
9
11
|
get value(): SearchValue;
|
|
10
12
|
get isSet(): boolean;
|
|
11
13
|
private callOnUpdateCallbacks;
|
|
14
|
+
updateInitialState(initialState: InitialTableState): void;
|
|
12
15
|
setValue(value: SearchValue): void;
|
|
13
16
|
clear(): void;
|
|
14
17
|
onUpdated(cb: () => unknown): void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "0.1.0-alpha.
|
|
3
|
+
"version": "0.1.0-alpha.215",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://mittwald.github.io/flow",
|
|
@@ -301,7 +301,7 @@
|
|
|
301
301
|
"@chakra-ui/live-region": "^2.1.0",
|
|
302
302
|
"@internationalized/date": "^3.5.5",
|
|
303
303
|
"@internationalized/string-compiler": "^3.2.4",
|
|
304
|
-
"@mittwald/react-tunnel": "^0.1.0-alpha.
|
|
304
|
+
"@mittwald/react-tunnel": "^0.1.0-alpha.215",
|
|
305
305
|
"@mittwald/react-use-promise": "^2.4.0",
|
|
306
306
|
"@react-aria/utils": "^3.25.2",
|
|
307
307
|
"@react-types/shared": "^3.24.1",
|
|
@@ -327,7 +327,7 @@
|
|
|
327
327
|
},
|
|
328
328
|
"devDependencies": {
|
|
329
329
|
"@faker-js/faker": "^8.4.1",
|
|
330
|
-
"@mittwald/flow-design-tokens": "^0.1.0-alpha.
|
|
330
|
+
"@mittwald/flow-design-tokens": "^0.1.0-alpha.215",
|
|
331
331
|
"@mittwald/react-use-promise": "^2.4.0",
|
|
332
332
|
"@nx/storybook": "^19.6.4",
|
|
333
333
|
"@storybook/addon-a11y": "^8.2.9",
|
|
@@ -405,5 +405,5 @@
|
|
|
405
405
|
"optional": true
|
|
406
406
|
}
|
|
407
407
|
},
|
|
408
|
-
"gitHead": "
|
|
408
|
+
"gitHead": "507e9bf585c25bb42c3f79828c207f1419bba26f"
|
|
409
409
|
}
|