schummar-table 0.51.7 → 0.51.10
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/csvExporter.cjs +35 -2
- package/dist/csvExporter.cjs.map +1 -0
- package/dist/csvExporter.d.cts +3 -5
- package/dist/csvExporter.d.ts +3 -5
- package/dist/csvExporter.js +35 -2
- package/dist/csvExporter.js.map +1 -0
- package/dist/excelExporter.cjs +1 -4
- package/dist/excelExporter.cjs.map +1 -1
- package/dist/excelExporter.d.cts +1 -2
- package/dist/excelExporter.d.ts +2 -4
- package/dist/excelExporter.js +1 -2
- package/dist/excelExporter.js.map +1 -1
- package/dist/{exporter-ZZesPOOU.d.cts → exporter-BT2ehIIU.d.cts} +1 -1
- package/dist/{exporter-zK7PhTrL.d.ts → exporter-BT2ehIIU.d.ts} +1 -1
- package/dist/index.cjs +674 -743
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +67 -113
- package/dist/index.d.ts +67 -112
- package/dist/index.js +521 -583
- package/dist/index.js.map +1 -1
- package/dist/mui4Theme.cjs +24 -28
- package/dist/mui4Theme.cjs.map +1 -1
- package/dist/mui4Theme.d.cts +4 -11
- package/dist/mui4Theme.d.ts +4 -11
- package/dist/mui4Theme.js +14 -15
- package/dist/mui4Theme.js.map +1 -1
- package/dist/mui5Theme.cjs +24 -28
- package/dist/mui5Theme.cjs.map +1 -1
- package/dist/mui5Theme.d.cts +4 -11
- package/dist/mui5Theme.d.ts +4 -11
- package/dist/mui5Theme.js +14 -15
- package/dist/mui5Theme.js.map +1 -1
- package/dist/{chunk-Bp6m_JJh.js → rolldown-runtime-D7D4PA-g.js} +4 -4
- package/dist/{tableSettings-CCjCl2iG.js → tableSettings-BxTiw4tQ.js} +30 -27
- package/dist/tableSettings-BxTiw4tQ.js.map +1 -0
- package/dist/{tableSettings-D1MSPxbQ.cjs → tableSettings-PwnSZTD3.cjs} +139 -104
- package/dist/tableSettings-PwnSZTD3.cjs.map +1 -0
- package/dist/{types-1gz-mJJm.d.cts → types-dBWLcfCt.d.ts} +80 -12
- package/dist/{types-CJOB-Acy.d.ts → types-ikcaSVnB.d.cts} +80 -12
- package/package.json +48 -42
- package/dist/chunk-pbleEpgJ.cjs +0 -44
- package/dist/csvExporter-BGoiph1b.cjs +0 -41
- package/dist/csvExporter-BGoiph1b.cjs.map +0 -1
- package/dist/csvExporter-CqTylAk9.js +0 -35
- package/dist/csvExporter-CqTylAk9.js.map +0 -1
- package/dist/tableSettings-CCjCl2iG.js.map +0 -1
- package/dist/tableSettings-D1MSPxbQ.cjs.map +0 -1
package/dist/index.cjs
CHANGED
|
@@ -1,21 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
const require_tableSettings = require(
|
|
3
|
-
require('./csvExporter-BGoiph1b.cjs');
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
const require_tableSettings = require("./tableSettings-PwnSZTD3.cjs");
|
|
4
3
|
let react = require("react");
|
|
5
|
-
react = require_chunk.__toESM(react);
|
|
6
4
|
let immer = require("immer");
|
|
7
|
-
|
|
8
|
-
let
|
|
9
|
-
__emotion_react = require_chunk.__toESM(__emotion_react);
|
|
10
|
-
let __emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
|
|
11
|
-
__emotion_react_jsx_runtime = require_chunk.__toESM(__emotion_react_jsx_runtime);
|
|
5
|
+
let _emotion_react = require("@emotion/react");
|
|
6
|
+
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
|
|
12
7
|
let nanoid = require("nanoid");
|
|
13
|
-
nanoid = require_chunk.__toESM(nanoid);
|
|
14
8
|
let temporal_polyfill = require("temporal-polyfill");
|
|
15
|
-
temporal_polyfill = require_chunk.__toESM(temporal_polyfill);
|
|
16
9
|
let date_fns = require("date-fns");
|
|
17
|
-
date_fns = require_chunk.__toESM(date_fns);
|
|
18
|
-
|
|
19
10
|
//#region src/misc/tableContext.ts
|
|
20
11
|
const TableContext = (0, react.createContext)(null);
|
|
21
12
|
const TableResetContext = (0, react.createContext)(() => void 0);
|
|
@@ -30,7 +21,6 @@ function useColumnContext() {
|
|
|
30
21
|
if (value === null) throw new Error("No column context available");
|
|
31
22
|
return value;
|
|
32
23
|
}
|
|
33
|
-
|
|
34
24
|
//#endregion
|
|
35
25
|
//#region src/theme/defaultTheme/defaultColors.ts
|
|
36
26
|
const defaultColors = {
|
|
@@ -54,13 +44,12 @@ const defaultColors = {
|
|
|
54
44
|
border: "#777",
|
|
55
45
|
borderLight: "#eee"
|
|
56
46
|
};
|
|
57
|
-
|
|
58
47
|
//#endregion
|
|
59
48
|
//#region src/components/spinnner.tsx
|
|
60
|
-
function Spinner({ className
|
|
61
|
-
return /* @__PURE__ */ (0,
|
|
62
|
-
className
|
|
63
|
-
css:
|
|
49
|
+
function Spinner({ className }) {
|
|
50
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
51
|
+
className,
|
|
52
|
+
css: _emotion_react.css`
|
|
64
53
|
display: inline-block;
|
|
65
54
|
position: relative;
|
|
66
55
|
width: 1em;
|
|
@@ -97,24 +86,23 @@ function Spinner({ className: className$2 }) {
|
|
|
97
86
|
}
|
|
98
87
|
`,
|
|
99
88
|
children: [
|
|
100
|
-
/* @__PURE__ */ (0,
|
|
101
|
-
/* @__PURE__ */ (0,
|
|
102
|
-
/* @__PURE__ */ (0,
|
|
89
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {}),
|
|
90
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {}),
|
|
91
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {})
|
|
103
92
|
]
|
|
104
93
|
});
|
|
105
94
|
}
|
|
106
|
-
|
|
107
95
|
//#endregion
|
|
108
96
|
//#region src/theme/defaultTheme/badge.tsx
|
|
109
97
|
const Badge = ({ badgeContent, children }) => {
|
|
110
|
-
return /* @__PURE__ */ (0,
|
|
98
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("span", {
|
|
111
99
|
css: {
|
|
112
100
|
display: "inline-flex",
|
|
113
101
|
position: "relative",
|
|
114
102
|
flexShrink: 0,
|
|
115
103
|
verticalAlign: "middle"
|
|
116
104
|
},
|
|
117
|
-
children: [children, /* @__PURE__ */ (0,
|
|
105
|
+
children: [children, /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
|
|
118
106
|
css: [{
|
|
119
107
|
top: 0,
|
|
120
108
|
right: 0,
|
|
@@ -142,11 +130,10 @@ const Badge = ({ badgeContent, children }) => {
|
|
|
142
130
|
})]
|
|
143
131
|
});
|
|
144
132
|
};
|
|
145
|
-
|
|
146
133
|
//#endregion
|
|
147
134
|
//#region src/theme/defaultTheme/button.tsx
|
|
148
|
-
const Button = ({ startIcon, children, variant = "text"
|
|
149
|
-
return /* @__PURE__ */ (0,
|
|
135
|
+
const Button = ({ startIcon, children, variant = "text", ...props }) => {
|
|
136
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("button", {
|
|
150
137
|
css: [
|
|
151
138
|
{
|
|
152
139
|
padding: `var(--spacing) calc(var(--spacing) * 2)`,
|
|
@@ -176,17 +163,16 @@ const Button = ({ startIcon, children, variant = "text",...props }) => {
|
|
|
176
163
|
}
|
|
177
164
|
],
|
|
178
165
|
...props,
|
|
179
|
-
children: [startIcon && /* @__PURE__ */ (0,
|
|
166
|
+
children: [startIcon && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
|
|
180
167
|
css: { marginRight: `calc(var(--spacing) * 2)` },
|
|
181
168
|
children: startIcon
|
|
182
|
-
}), /* @__PURE__ */ (0,
|
|
169
|
+
}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", { children })]
|
|
183
170
|
});
|
|
184
171
|
};
|
|
185
|
-
|
|
186
172
|
//#endregion
|
|
187
173
|
//#region src/theme/defaultTheme/checkbox.tsx
|
|
188
|
-
const Checkbox = ({ className
|
|
189
|
-
return /* @__PURE__ */ (0,
|
|
174
|
+
const Checkbox = ({ className, ...props }) => {
|
|
175
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("label", {
|
|
190
176
|
css: [{
|
|
191
177
|
padding: "calc(var(--spacing) * 1.8)",
|
|
192
178
|
display: "flex",
|
|
@@ -197,11 +183,11 @@ const Checkbox = ({ className: className$2,...props }) => {
|
|
|
197
183
|
margin: 0
|
|
198
184
|
}
|
|
199
185
|
}, props.disabled && { color: "rgba(0, 0, 0, 0.26)" }],
|
|
200
|
-
className
|
|
201
|
-
children: [/* @__PURE__ */ (0,
|
|
186
|
+
className,
|
|
187
|
+
children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("input", {
|
|
202
188
|
type: "checkbox",
|
|
203
189
|
...props
|
|
204
|
-
}), props.checked ? /* @__PURE__ */ (0,
|
|
190
|
+
}), props.checked ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("svg", {
|
|
205
191
|
css: {
|
|
206
192
|
fontSize: "1.25rem",
|
|
207
193
|
width: "1em",
|
|
@@ -211,8 +197,8 @@ const Checkbox = ({ className: className$2,...props }) => {
|
|
|
211
197
|
focusable: "false",
|
|
212
198
|
viewBox: "0 0 24 24",
|
|
213
199
|
"aria-hidden": "true",
|
|
214
|
-
children: /* @__PURE__ */ (0,
|
|
215
|
-
}) : /* @__PURE__ */ (0,
|
|
200
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", { d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" })
|
|
201
|
+
}) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("svg", {
|
|
216
202
|
css: {
|
|
217
203
|
fontSize: "1.25rem",
|
|
218
204
|
width: "1em",
|
|
@@ -222,15 +208,14 @@ const Checkbox = ({ className: className$2,...props }) => {
|
|
|
222
208
|
focusable: "false",
|
|
223
209
|
viewBox: "0 0 24 24",
|
|
224
210
|
"aria-hidden": "true",
|
|
225
|
-
children: /* @__PURE__ */ (0,
|
|
211
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" })
|
|
226
212
|
})]
|
|
227
213
|
});
|
|
228
214
|
};
|
|
229
|
-
|
|
230
215
|
//#endregion
|
|
231
216
|
//#region src/theme/defaultTheme/iconButton.tsx
|
|
232
217
|
const IconButton = (props) => {
|
|
233
|
-
return /* @__PURE__ */ (0,
|
|
218
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("button", {
|
|
234
219
|
css: {
|
|
235
220
|
padding: "var(--spacing)",
|
|
236
221
|
borderRadius: "50%",
|
|
@@ -248,12 +233,11 @@ const IconButton = (props) => {
|
|
|
248
233
|
...props
|
|
249
234
|
});
|
|
250
235
|
};
|
|
251
|
-
|
|
252
236
|
//#endregion
|
|
253
237
|
//#region src/theme/defaultTheme/textField.tsx
|
|
254
|
-
const TextField = ({ startIcon, endIcon, className
|
|
255
|
-
return /* @__PURE__ */ (0,
|
|
256
|
-
className
|
|
238
|
+
const TextField = ({ startIcon, endIcon, className, inputRef, onBlur, ...props }) => {
|
|
239
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
240
|
+
className,
|
|
257
241
|
css: [{
|
|
258
242
|
flex: 1,
|
|
259
243
|
display: "flex",
|
|
@@ -267,7 +251,7 @@ const TextField = ({ startIcon, endIcon, className: className$2, inputRef, onBlu
|
|
|
267
251
|
}],
|
|
268
252
|
children: [
|
|
269
253
|
startIcon,
|
|
270
|
-
/* @__PURE__ */ (0,
|
|
254
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("input", {
|
|
271
255
|
ref: inputRef,
|
|
272
256
|
...props,
|
|
273
257
|
value: props.value ?? "",
|
|
@@ -289,7 +273,6 @@ const TextField = ({ startIcon, endIcon, className: className$2, inputRef, onBlu
|
|
|
289
273
|
]
|
|
290
274
|
});
|
|
291
275
|
};
|
|
292
|
-
|
|
293
276
|
//#endregion
|
|
294
277
|
//#region src/theme/defaultTheme/defaultComponents.ts
|
|
295
278
|
const defaultComponents = {
|
|
@@ -301,179 +284,162 @@ const defaultComponents = {
|
|
|
301
284
|
TextField,
|
|
302
285
|
Spinner
|
|
303
286
|
};
|
|
304
|
-
|
|
305
287
|
//#endregion
|
|
306
288
|
//#region src/theme/defaultTheme/defaultIcons.tsx
|
|
307
|
-
const IconDefaultStyle = (0,
|
|
289
|
+
const IconDefaultStyle = (0, _emotion_react.css)({
|
|
308
290
|
width: "1.5em",
|
|
309
291
|
height: "1.5em",
|
|
310
292
|
color: "inherit"
|
|
311
293
|
});
|
|
312
294
|
function Icon(svg) {
|
|
313
295
|
return function IconComponent(props) {
|
|
314
|
-
return /* @__PURE__ */ (0,
|
|
296
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_emotion_react.ClassNames, { children: ({ css }) => (0, react.cloneElement)(svg, {
|
|
315
297
|
...props,
|
|
316
|
-
className: css
|
|
298
|
+
className: css(IconDefaultStyle, props.className)
|
|
317
299
|
}) });
|
|
318
300
|
};
|
|
319
301
|
}
|
|
320
|
-
const Settings = Icon(/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("svg", {
|
|
321
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
322
|
-
height: "24px",
|
|
323
|
-
viewBox: "0 0 24 24",
|
|
324
|
-
width: "24px",
|
|
325
|
-
fill: "currentColor",
|
|
326
|
-
children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("path", {
|
|
327
|
-
d: "M0 0h24v24H0V0z",
|
|
328
|
-
fill: "none"
|
|
329
|
-
}), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("path", { d: "M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z" })]
|
|
330
|
-
}));
|
|
331
|
-
const Export$1 = Icon(/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("svg", {
|
|
332
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
333
|
-
enableBackground: "new 0 0 24 24",
|
|
334
|
-
height: "24px",
|
|
335
|
-
viewBox: "0 0 24 24",
|
|
336
|
-
width: "24px",
|
|
337
|
-
fill: "currentColor",
|
|
338
|
-
children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("rect", {
|
|
339
|
-
fill: "none",
|
|
340
|
-
height: "24",
|
|
341
|
-
width: "24"
|
|
342
|
-
}) }), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("path", { d: "M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z" }) })]
|
|
343
|
-
}));
|
|
344
|
-
const Clipboard = Icon(/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("svg", {
|
|
345
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
346
|
-
height: "24px",
|
|
347
|
-
viewBox: "0 0 24 24",
|
|
348
|
-
width: "24px",
|
|
349
|
-
fill: "currentColor",
|
|
350
|
-
children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("path", {
|
|
351
|
-
d: "M0 0h24v24H0V0z",
|
|
352
|
-
fill: "none"
|
|
353
|
-
}), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" })]
|
|
354
|
-
}));
|
|
355
|
-
const ChevronRight = Icon(/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("svg", {
|
|
356
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
357
|
-
height: "24px",
|
|
358
|
-
viewBox: "0 0 24 24",
|
|
359
|
-
width: "24px",
|
|
360
|
-
fill: "currentColor",
|
|
361
|
-
children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("path", {
|
|
362
|
-
d: "M0 0h24v24H0V0z",
|
|
363
|
-
fill: "none"
|
|
364
|
-
}), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z" })]
|
|
365
|
-
}));
|
|
366
|
-
const Search = Icon(/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("svg", {
|
|
367
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
368
|
-
height: "24px",
|
|
369
|
-
viewBox: "0 0 24 24",
|
|
370
|
-
width: "24px",
|
|
371
|
-
fill: "currentColor",
|
|
372
|
-
children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("path", {
|
|
373
|
-
d: "M0 0h24v24H0V0z",
|
|
374
|
-
fill: "none"
|
|
375
|
-
}), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" })]
|
|
376
|
-
}));
|
|
377
|
-
const Clear = Icon(/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("svg", {
|
|
378
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
379
|
-
height: "24px",
|
|
380
|
-
viewBox: "0 0 24 24",
|
|
381
|
-
width: "24px",
|
|
382
|
-
fill: "currentColor",
|
|
383
|
-
children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("path", {
|
|
384
|
-
d: "M0 0h24v24H0V0z",
|
|
385
|
-
fill: "none"
|
|
386
|
-
}), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" })]
|
|
387
|
-
}));
|
|
388
|
-
const ArrowDropDown = Icon(/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("svg", {
|
|
389
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
390
|
-
height: "24px",
|
|
391
|
-
viewBox: "0 0 24 24",
|
|
392
|
-
width: "24px",
|
|
393
|
-
fill: "currentColor",
|
|
394
|
-
children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("path", {
|
|
395
|
-
d: "M0 0h24v24H0V0z",
|
|
396
|
-
fill: "none"
|
|
397
|
-
}), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("path", { d: "M7 10l5 5 5-5H7z" })]
|
|
398
|
-
}));
|
|
399
|
-
const FilterList = Icon(/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("svg", {
|
|
400
|
-
viewBox: "0 0 24 24",
|
|
401
|
-
children: /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("path", {
|
|
402
|
-
fill: "currentColor",
|
|
403
|
-
d: "M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z"
|
|
404
|
-
})
|
|
405
|
-
}));
|
|
406
|
-
const ArrowUpward = Icon(/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsxs)("svg", {
|
|
407
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
408
|
-
height: "24px",
|
|
409
|
-
viewBox: "0 0 24 24",
|
|
410
|
-
width: "24px",
|
|
411
|
-
fill: "currentColor",
|
|
412
|
-
children: [/* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("path", {
|
|
413
|
-
d: "M0 0h24v24H0V0z",
|
|
414
|
-
fill: "none"
|
|
415
|
-
}), /* @__PURE__ */ (0, __emotion_react_jsx_runtime.jsx)("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" })]
|
|
416
|
-
}));
|
|
417
|
-
const defaultIcons = {
|
|
418
|
-
Settings,
|
|
419
|
-
Export: Export$1,
|
|
420
|
-
Clipboard,
|
|
421
|
-
ChevronRight,
|
|
422
|
-
Search,
|
|
423
|
-
Clear,
|
|
424
|
-
ArrowDropDown,
|
|
425
|
-
FilterList,
|
|
426
|
-
ArrowUpward
|
|
427
|
-
};
|
|
428
|
-
|
|
429
|
-
//#endregion
|
|
430
|
-
//#region src/theme/defaultTheme/defaultTexts.tsx
|
|
431
|
-
const defaultTexts = {
|
|
432
|
-
selectColumns: "Select visible columns",
|
|
433
|
-
showAllColumns: "Show all",
|
|
434
|
-
hideAllColumns: "Hide all",
|
|
435
|
-
noResults: "No results",
|
|
436
|
-
exportTitle: "Export",
|
|
437
|
-
exportCopy: "To clipboard",
|
|
438
|
-
exportDownload: "Download",
|
|
439
|
-
today: "Today",
|
|
440
|
-
thisWeek: "This week",
|
|
441
|
-
thisMonth: "This month",
|
|
442
|
-
thisYear: "This year",
|
|
443
|
-
lastSevenDays: "Last 7 days",
|
|
444
|
-
lastThirtyDays: "Last 30 days",
|
|
445
|
-
clearFilters: "Clear all filters",
|
|
446
|
-
reset: "Reset",
|
|
447
|
-
loading: "Loading",
|
|
448
|
-
deselectAll: "Deselect all",
|
|
449
|
-
resetAll: "Reset table state",
|
|
450
|
-
rangeMin: "Min",
|
|
451
|
-
rangeMax: "Max",
|
|
452
|
-
calendarWeek: "Wk"
|
|
453
|
-
};
|
|
454
|
-
|
|
455
302
|
//#endregion
|
|
456
303
|
//#region src/theme/defaultTheme/index.tsx
|
|
457
304
|
const defaultTableTheme = {
|
|
458
|
-
text:
|
|
305
|
+
text: {
|
|
306
|
+
selectColumns: "Select visible columns",
|
|
307
|
+
showAllColumns: "Show all",
|
|
308
|
+
hideAllColumns: "Hide all",
|
|
309
|
+
noResults: "No results",
|
|
310
|
+
exportTitle: "Export",
|
|
311
|
+
exportCopy: "To clipboard",
|
|
312
|
+
exportDownload: "Download",
|
|
313
|
+
today: "Today",
|
|
314
|
+
thisWeek: "This week",
|
|
315
|
+
thisMonth: "This month",
|
|
316
|
+
thisYear: "This year",
|
|
317
|
+
lastSevenDays: "Last 7 days",
|
|
318
|
+
lastThirtyDays: "Last 30 days",
|
|
319
|
+
clearFilters: "Clear all filters",
|
|
320
|
+
reset: "Reset",
|
|
321
|
+
loading: "Loading",
|
|
322
|
+
deselectAll: "Deselect all",
|
|
323
|
+
resetAll: "Reset table state",
|
|
324
|
+
rangeMin: "Min",
|
|
325
|
+
rangeMax: "Max",
|
|
326
|
+
calendarWeek: "Wk"
|
|
327
|
+
},
|
|
459
328
|
components: defaultComponents,
|
|
460
|
-
icons:
|
|
329
|
+
icons: {
|
|
330
|
+
Settings: Icon(/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("svg", {
|
|
331
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
332
|
+
height: "24px",
|
|
333
|
+
viewBox: "0 0 24 24",
|
|
334
|
+
width: "24px",
|
|
335
|
+
fill: "currentColor",
|
|
336
|
+
children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", {
|
|
337
|
+
d: "M0 0h24v24H0V0z",
|
|
338
|
+
fill: "none"
|
|
339
|
+
}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", { d: "M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z" })]
|
|
340
|
+
})),
|
|
341
|
+
Export: Icon(/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("svg", {
|
|
342
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
343
|
+
enableBackground: "new 0 0 24 24",
|
|
344
|
+
height: "24px",
|
|
345
|
+
viewBox: "0 0 24 24",
|
|
346
|
+
width: "24px",
|
|
347
|
+
fill: "currentColor",
|
|
348
|
+
children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("rect", {
|
|
349
|
+
fill: "none",
|
|
350
|
+
height: "24",
|
|
351
|
+
width: "24"
|
|
352
|
+
}) }), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", { d: "M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z" }) })]
|
|
353
|
+
})),
|
|
354
|
+
Clipboard: Icon(/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("svg", {
|
|
355
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
356
|
+
height: "24px",
|
|
357
|
+
viewBox: "0 0 24 24",
|
|
358
|
+
width: "24px",
|
|
359
|
+
fill: "currentColor",
|
|
360
|
+
children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", {
|
|
361
|
+
d: "M0 0h24v24H0V0z",
|
|
362
|
+
fill: "none"
|
|
363
|
+
}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" })]
|
|
364
|
+
})),
|
|
365
|
+
ChevronRight: Icon(/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("svg", {
|
|
366
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
367
|
+
height: "24px",
|
|
368
|
+
viewBox: "0 0 24 24",
|
|
369
|
+
width: "24px",
|
|
370
|
+
fill: "currentColor",
|
|
371
|
+
children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", {
|
|
372
|
+
d: "M0 0h24v24H0V0z",
|
|
373
|
+
fill: "none"
|
|
374
|
+
}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z" })]
|
|
375
|
+
})),
|
|
376
|
+
Search: Icon(/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("svg", {
|
|
377
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
378
|
+
height: "24px",
|
|
379
|
+
viewBox: "0 0 24 24",
|
|
380
|
+
width: "24px",
|
|
381
|
+
fill: "currentColor",
|
|
382
|
+
children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", {
|
|
383
|
+
d: "M0 0h24v24H0V0z",
|
|
384
|
+
fill: "none"
|
|
385
|
+
}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" })]
|
|
386
|
+
})),
|
|
387
|
+
Clear: Icon(/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("svg", {
|
|
388
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
389
|
+
height: "24px",
|
|
390
|
+
viewBox: "0 0 24 24",
|
|
391
|
+
width: "24px",
|
|
392
|
+
fill: "currentColor",
|
|
393
|
+
children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", {
|
|
394
|
+
d: "M0 0h24v24H0V0z",
|
|
395
|
+
fill: "none"
|
|
396
|
+
}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" })]
|
|
397
|
+
})),
|
|
398
|
+
ArrowDropDown: Icon(/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("svg", {
|
|
399
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
400
|
+
height: "24px",
|
|
401
|
+
viewBox: "0 0 24 24",
|
|
402
|
+
width: "24px",
|
|
403
|
+
fill: "currentColor",
|
|
404
|
+
children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", {
|
|
405
|
+
d: "M0 0h24v24H0V0z",
|
|
406
|
+
fill: "none"
|
|
407
|
+
}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", { d: "M7 10l5 5 5-5H7z" })]
|
|
408
|
+
})),
|
|
409
|
+
FilterList: Icon(/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("svg", {
|
|
410
|
+
viewBox: "0 0 24 24",
|
|
411
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", {
|
|
412
|
+
fill: "currentColor",
|
|
413
|
+
d: "M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z"
|
|
414
|
+
})
|
|
415
|
+
})),
|
|
416
|
+
ArrowUpward: Icon(/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("svg", {
|
|
417
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
418
|
+
height: "24px",
|
|
419
|
+
viewBox: "0 0 24 24",
|
|
420
|
+
width: "24px",
|
|
421
|
+
fill: "currentColor",
|
|
422
|
+
children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", {
|
|
423
|
+
d: "M0 0h24v24H0V0z",
|
|
424
|
+
fill: "none"
|
|
425
|
+
}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("path", { d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z" })]
|
|
426
|
+
}))
|
|
427
|
+
},
|
|
461
428
|
colors: defaultColors,
|
|
462
429
|
spacing: "5px"
|
|
463
430
|
};
|
|
464
|
-
|
|
465
431
|
//#endregion
|
|
466
432
|
//#region src/hooks/useTableMemo.tsx
|
|
467
433
|
const TableMemoContext = (0, react.createContext)(void 0);
|
|
468
434
|
function TableMemoContextProvider({ children }) {
|
|
469
|
-
return /* @__PURE__ */ (0,
|
|
435
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TableMemoContext.Provider, {
|
|
470
436
|
value: (0, react.useMemo)(() => /* @__PURE__ */ new Map(), []),
|
|
471
437
|
children
|
|
472
438
|
});
|
|
473
439
|
}
|
|
474
440
|
function useTableMemo() {
|
|
475
441
|
const contextCache = (0, react.useContext)(TableMemoContext);
|
|
476
|
-
const localCache = (0, react.useRef)();
|
|
442
|
+
const localCache = (0, react.useRef)(void 0);
|
|
477
443
|
const memoCache = contextCache ?? (localCache.current ??= /* @__PURE__ */ new Map());
|
|
478
444
|
return (key, function_) => {
|
|
479
445
|
let deps;
|
|
@@ -490,7 +456,6 @@ function useTableMemo() {
|
|
|
490
456
|
return cachedValue[0];
|
|
491
457
|
};
|
|
492
458
|
}
|
|
493
|
-
|
|
494
459
|
//#endregion
|
|
495
460
|
//#region src/hooks/useTheme.ts
|
|
496
461
|
const emptyStore = new require_tableSettings.Store(void 0);
|
|
@@ -498,7 +463,7 @@ function useTheme(selector) {
|
|
|
498
463
|
const { theme: contextTableTheme = {} } = (0, react.useContext)(require_tableSettings.TableSettingsContext);
|
|
499
464
|
const table = (0, react.useContext)(TableContext);
|
|
500
465
|
const columnId = (0, react.useContext)(ColumnContext);
|
|
501
|
-
const memo
|
|
466
|
+
const memo = useTableMemo();
|
|
502
467
|
const _globalTableTheme = require_tableSettings.globalTableTheme.useState();
|
|
503
468
|
const process = (t) => {
|
|
504
469
|
const rowClass = t.classes?.row;
|
|
@@ -511,15 +476,15 @@ function useTheme(selector) {
|
|
|
511
476
|
...t,
|
|
512
477
|
classes: {
|
|
513
478
|
...t.classes,
|
|
514
|
-
row: rowClass instanceof Function || Array.isArray(rowClass) ? memo
|
|
515
|
-
cell: cellClass instanceof Function || Array.isArray(cellClass) ? memo
|
|
516
|
-
details: detailsClass instanceof Function || Array.isArray(detailsClass) ? memo
|
|
479
|
+
row: rowClass instanceof Function || Array.isArray(rowClass) ? memo("theme.classes.row", rowClass) : rowClass,
|
|
480
|
+
cell: cellClass instanceof Function || Array.isArray(cellClass) ? memo("theme.classes.cell", cellClass) : cellClass,
|
|
481
|
+
details: detailsClass instanceof Function || Array.isArray(detailsClass) ? memo("theme.classes.details", detailsClass) : detailsClass
|
|
517
482
|
},
|
|
518
483
|
styles: {
|
|
519
484
|
...t.styles,
|
|
520
|
-
row: rowStyles instanceof Function || Array.isArray(rowStyles) ? memo
|
|
521
|
-
cell: cellStyles instanceof Function || Array.isArray(cellStyles) ? memo
|
|
522
|
-
details: detailsStyles instanceof Function || Array.isArray(detailsStyles) ? memo
|
|
485
|
+
row: rowStyles instanceof Function || Array.isArray(rowStyles) ? memo("theme.styles.row", rowStyles) : rowStyles,
|
|
486
|
+
cell: cellStyles instanceof Function || Array.isArray(cellStyles) ? memo("theme.styles.cell", cellStyles) : cellStyles,
|
|
487
|
+
details: detailsStyles instanceof Function || Array.isArray(detailsStyles) ? memo("theme.styles.details", detailsStyles) : detailsStyles
|
|
523
488
|
},
|
|
524
489
|
text: { ...t.text }
|
|
525
490
|
};
|
|
@@ -534,14 +499,15 @@ function useTheme(selector) {
|
|
|
534
499
|
colors: state.props.colors,
|
|
535
500
|
spacing: state.props.spacing
|
|
536
501
|
};
|
|
537
|
-
const column = state.activeColumns.find((column
|
|
538
|
-
|
|
502
|
+
const column = state.activeColumns.find((column) => column.id === columnId);
|
|
503
|
+
const columnsTheme = {
|
|
539
504
|
classes: column?.classes,
|
|
540
505
|
styles: column?.styles
|
|
541
|
-
}
|
|
506
|
+
};
|
|
507
|
+
const theme = require_tableSettings.mergeThemes(defaultTableTheme, _globalTableTheme, contextTableTheme, localTheme, columnsTheme);
|
|
508
|
+
return selector(process(theme));
|
|
542
509
|
}) ?? emptyStore.useState() ?? selector(process(require_tableSettings.mergeThemes(defaultTableTheme, _globalTableTheme, contextTableTheme)));
|
|
543
510
|
}
|
|
544
|
-
|
|
545
511
|
//#endregion
|
|
546
512
|
//#region src/theme/useCssVariables.ts
|
|
547
513
|
function useCssVariables() {
|
|
@@ -564,7 +530,6 @@ function useCssVariables() {
|
|
|
564
530
|
};
|
|
565
531
|
});
|
|
566
532
|
}
|
|
567
|
-
|
|
568
533
|
//#endregion
|
|
569
534
|
//#region src/components/filterControl.tsx
|
|
570
535
|
const FilterControlContext = (0, react.createContext)({
|
|
@@ -574,18 +539,18 @@ const FilterControlContext = (0, react.createContext)({
|
|
|
574
539
|
function FilterControl() {
|
|
575
540
|
const table = useTableContext();
|
|
576
541
|
const columnId = useColumnContext();
|
|
577
|
-
const Popover
|
|
542
|
+
const Popover = useTheme((t) => t.components.Popover);
|
|
578
543
|
const classes = useTheme((t) => t.classes);
|
|
579
544
|
const styles = useTheme((t) => t.styles);
|
|
580
|
-
const IconButton
|
|
581
|
-
const FilterList
|
|
582
|
-
const ArrowDropDown
|
|
545
|
+
const IconButton = useTheme((t) => t.components.IconButton);
|
|
546
|
+
const FilterList = useTheme((t) => t.icons.FilterList);
|
|
547
|
+
const ArrowDropDown = useTheme((t) => t.icons.ArrowDropDown);
|
|
583
548
|
const cssVariables = useCssVariables();
|
|
584
549
|
const [anchor, setAnchor] = (0, react.useState)(null);
|
|
585
550
|
const isActive = table.useState((state) => {
|
|
586
|
-
const filter
|
|
551
|
+
const filter = state.filters.get(columnId);
|
|
587
552
|
const filterValue = state.filterValues.get(columnId);
|
|
588
|
-
return filter
|
|
553
|
+
return filter !== void 0 && filterValue !== void 0 && filter.isActive(filterValue);
|
|
589
554
|
});
|
|
590
555
|
const filterClassNames = table.useState((state) => {
|
|
591
556
|
return state.filters.get(columnId)?.classNames;
|
|
@@ -602,12 +567,12 @@ function FilterControl() {
|
|
|
602
567
|
function close() {
|
|
603
568
|
setAnchor(null);
|
|
604
569
|
}
|
|
605
|
-
return /* @__PURE__ */ (0,
|
|
570
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(FilterControlContext.Provider, {
|
|
606
571
|
value: {
|
|
607
572
|
isActive: !!anchor,
|
|
608
573
|
close
|
|
609
574
|
},
|
|
610
|
-
children: [/* @__PURE__ */ (0,
|
|
575
|
+
children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(IconButton, {
|
|
611
576
|
onClick: (event) => setAnchor(event.currentTarget),
|
|
612
577
|
onContextMenu: (event) => {
|
|
613
578
|
reset();
|
|
@@ -615,32 +580,31 @@ function FilterControl() {
|
|
|
615
580
|
return false;
|
|
616
581
|
},
|
|
617
582
|
css: [{ color: "#b0bac9" }, isActive && { color: "var(--primaryMain) !important" }],
|
|
618
|
-
children: isActive ? /* @__PURE__ */ (0,
|
|
619
|
-
}), /* @__PURE__ */ (0,
|
|
583
|
+
children: isActive ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterList, {}) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ArrowDropDown, {})
|
|
584
|
+
}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
620
585
|
onPointerDown: (event) => {
|
|
621
586
|
event.stopPropagation();
|
|
622
587
|
},
|
|
623
588
|
onPointerMove: (event) => {
|
|
624
589
|
event.stopPropagation();
|
|
625
590
|
},
|
|
626
|
-
children: /* @__PURE__ */ (0,
|
|
591
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_emotion_react.ClassNames, { children: ({ css, cx }) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Popover, {
|
|
627
592
|
open: true,
|
|
628
593
|
hidden: !anchor,
|
|
629
594
|
onClose: close,
|
|
630
595
|
anchorEl: anchor ?? document.body,
|
|
631
596
|
css: [cssVariables, styles?.popover],
|
|
632
|
-
className: cx
|
|
633
|
-
backdropClassName: cx
|
|
597
|
+
className: cx(classes?.popover, filterClassNames?.popover),
|
|
598
|
+
backdropClassName: cx(classes?.popoverBackdrop, filterClassNames?.popoverBackdrop, css(styles?.popoverBackdrop)),
|
|
634
599
|
children: filter
|
|
635
600
|
}) })
|
|
636
601
|
})]
|
|
637
602
|
});
|
|
638
603
|
}
|
|
639
|
-
|
|
640
604
|
//#endregion
|
|
641
605
|
//#region src/components/autoFocusTextField.tsx
|
|
642
606
|
function AutoFocusTextField(props) {
|
|
643
|
-
const TextField
|
|
607
|
+
const TextField = useTheme((t) => t.components.TextField);
|
|
644
608
|
const ref = (0, react.useRef)(null);
|
|
645
609
|
const { isActive } = (0, react.useContext)(FilterControlContext);
|
|
646
610
|
(0, react.useLayoutEffect)(() => {
|
|
@@ -648,7 +612,7 @@ function AutoFocusTextField(props) {
|
|
|
648
612
|
ref.current?.focus();
|
|
649
613
|
});
|
|
650
614
|
}, [isActive]);
|
|
651
|
-
return /* @__PURE__ */ (0,
|
|
615
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TextField, {
|
|
652
616
|
...props,
|
|
653
617
|
inputRef: ref,
|
|
654
618
|
css: { input: {
|
|
@@ -657,7 +621,6 @@ function AutoFocusTextField(props) {
|
|
|
657
621
|
} }
|
|
658
622
|
});
|
|
659
623
|
}
|
|
660
|
-
|
|
661
624
|
//#endregion
|
|
662
625
|
//#region src/misc/debounce.ts
|
|
663
626
|
function debounce(function_, ms) {
|
|
@@ -689,7 +652,6 @@ function debounce(function_, ms) {
|
|
|
689
652
|
}
|
|
690
653
|
});
|
|
691
654
|
}
|
|
692
|
-
|
|
693
655
|
//#endregion
|
|
694
656
|
//#region src/hooks/useFilter.ts
|
|
695
657
|
function useFilter(impl) {
|
|
@@ -730,17 +692,17 @@ function useFilter(impl) {
|
|
|
730
692
|
(0, react.useLayoutEffect)(() => {
|
|
731
693
|
implRef.current = impl;
|
|
732
694
|
});
|
|
733
|
-
const delayedUpdate = (0, react.useMemo)(() => debounce((value
|
|
734
|
-
const { value: controlledValue, onChange
|
|
695
|
+
const delayedUpdate = (0, react.useMemo)(() => debounce((value) => {
|
|
696
|
+
const { value: controlledValue, onChange } = implRef.current;
|
|
735
697
|
if (controlledValue === void 0) table.update((state) => {
|
|
736
|
-
state.filterValues.set(columnId, value
|
|
698
|
+
state.filterValues.set(columnId, value);
|
|
737
699
|
});
|
|
738
|
-
onChange
|
|
700
|
+
onChange?.(value);
|
|
739
701
|
setDirtyValue(void 0);
|
|
740
702
|
}, 500), [table]);
|
|
741
|
-
function onChange(value
|
|
742
|
-
setDirtyValue(value
|
|
743
|
-
delayedUpdate(value
|
|
703
|
+
function onChange(value) {
|
|
704
|
+
setDirtyValue(value);
|
|
705
|
+
delayedUpdate(value);
|
|
744
706
|
}
|
|
745
707
|
(0, react.useEffect)(() => delayedUpdate.flush(), [delayedUpdate]);
|
|
746
708
|
const context = (0, react.useContext)(FilterControlContext);
|
|
@@ -751,7 +713,6 @@ function useFilter(impl) {
|
|
|
751
713
|
...context
|
|
752
714
|
};
|
|
753
715
|
}
|
|
754
|
-
|
|
755
716
|
//#endregion
|
|
756
717
|
//#region src/components/filterDialog.tsx
|
|
757
718
|
var filterDialog_default = (0, react.forwardRef)(FilterDialog);
|
|
@@ -760,19 +721,19 @@ function FilterDialog(_props, ref) {
|
|
|
760
721
|
const columnId = useColumnContext();
|
|
761
722
|
const classes = useTheme((t) => t.classes);
|
|
762
723
|
const styles = useTheme((t) => t.styles);
|
|
763
|
-
const IconButton
|
|
764
|
-
const FilterList
|
|
724
|
+
const IconButton = useTheme((t) => t.components.IconButton);
|
|
725
|
+
const FilterList = useTheme((t) => t.icons.FilterList);
|
|
765
726
|
const filter = table.useState((state) => state.activeColumns.find((column) => column.id === columnId)?.filter);
|
|
766
727
|
const label = table.useState((state) => {
|
|
767
728
|
return state.activeColumns.find((column) => column.id === columnId)?.header ?? null;
|
|
768
729
|
});
|
|
769
730
|
const isActive = table.useState((state) => {
|
|
770
|
-
const filter
|
|
731
|
+
const filter = state.filters.get(columnId);
|
|
771
732
|
const filterValue = state.filterValues.get(columnId);
|
|
772
|
-
return filter
|
|
733
|
+
return filter !== void 0 && filterValue !== void 0 && filter.isActive(filterValue);
|
|
773
734
|
});
|
|
774
735
|
const { close } = (0, react.useContext)(FilterControlContext);
|
|
775
|
-
return /* @__PURE__ */ (0,
|
|
736
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("dialog", {
|
|
776
737
|
ref,
|
|
777
738
|
onClick: close,
|
|
778
739
|
className: classes?.dialog,
|
|
@@ -782,9 +743,9 @@ function FilterDialog(_props, ref) {
|
|
|
782
743
|
borderRadius: 4,
|
|
783
744
|
"::backdrop": { backgroundColor: "rgba(0, 0, 0, 0.7)" }
|
|
784
745
|
}, styles?.dialog],
|
|
785
|
-
children: /* @__PURE__ */ (0,
|
|
746
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
786
747
|
onClick: (e) => e.stopPropagation(),
|
|
787
|
-
children: [/* @__PURE__ */ (0,
|
|
748
|
+
children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
788
749
|
css: {
|
|
789
750
|
position: "relative",
|
|
790
751
|
padding: 10,
|
|
@@ -794,8 +755,8 @@ function FilterDialog(_props, ref) {
|
|
|
794
755
|
gap: 10
|
|
795
756
|
},
|
|
796
757
|
children: [
|
|
797
|
-
/* @__PURE__ */ (0,
|
|
798
|
-
/* @__PURE__ */ (0,
|
|
758
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterList, { css: { color: isActive ? "var(--primaryMain)" : "#b0bac9" } }),
|
|
759
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
799
760
|
css: {
|
|
800
761
|
whiteSpace: "nowrap",
|
|
801
762
|
overflow: "hidden",
|
|
@@ -804,7 +765,7 @@ function FilterDialog(_props, ref) {
|
|
|
804
765
|
},
|
|
805
766
|
children: label
|
|
806
767
|
}),
|
|
807
|
-
/* @__PURE__ */ (0,
|
|
768
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(IconButton, {
|
|
808
769
|
onClick: close,
|
|
809
770
|
css: {
|
|
810
771
|
position: "absolute",
|
|
@@ -818,29 +779,28 @@ function FilterDialog(_props, ref) {
|
|
|
818
779
|
children: "✕"
|
|
819
780
|
})
|
|
820
781
|
]
|
|
821
|
-
}), /* @__PURE__ */ (0,
|
|
782
|
+
}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
822
783
|
css: { overflow: "auto" },
|
|
823
784
|
children: filter
|
|
824
785
|
})]
|
|
825
786
|
})
|
|
826
787
|
});
|
|
827
788
|
}
|
|
828
|
-
|
|
829
789
|
//#endregion
|
|
830
790
|
//#region src/components/nestedFilterControl.tsx
|
|
831
791
|
function NestedFilterControl() {
|
|
832
792
|
const table = useTableContext();
|
|
833
793
|
const columnId = useColumnContext();
|
|
834
|
-
const Button
|
|
835
|
-
const FilterList
|
|
794
|
+
const Button = useTheme((t) => t.components.Button);
|
|
795
|
+
const FilterList = useTheme((t) => t.icons.FilterList);
|
|
836
796
|
const dialog = (0, react.useRef)(null);
|
|
837
797
|
const label = table.useState((state) => {
|
|
838
798
|
return state.activeColumns.find((column) => column.id === columnId)?.header ?? null;
|
|
839
799
|
});
|
|
840
800
|
const isActive = table.useState((state) => {
|
|
841
|
-
const filter
|
|
801
|
+
const filter = state.filters.get(columnId);
|
|
842
802
|
const filterValue = state.filterValues.get(columnId);
|
|
843
|
-
return filter
|
|
803
|
+
return filter !== void 0 && filterValue !== void 0 && filter.isActive(filterValue);
|
|
844
804
|
});
|
|
845
805
|
const filter = table.useState((state) => state.activeColumns.find((column) => column.id === columnId)?.filter);
|
|
846
806
|
(0, react.useEffect)(() => () => {
|
|
@@ -859,39 +819,38 @@ function NestedFilterControl() {
|
|
|
859
819
|
dialog.current?.close();
|
|
860
820
|
parentContext.close();
|
|
861
821
|
}
|
|
862
|
-
return /* @__PURE__ */ (0,
|
|
822
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(FilterControlContext.Provider, {
|
|
863
823
|
value: {
|
|
864
824
|
isActive: true,
|
|
865
825
|
close
|
|
866
826
|
},
|
|
867
|
-
children: [/* @__PURE__ */ (0,
|
|
827
|
+
children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Button, {
|
|
868
828
|
onClick: () => dialog.current?.showModal(),
|
|
869
829
|
onContextMenu: (event) => {
|
|
870
830
|
reset();
|
|
871
831
|
event.preventDefault();
|
|
872
832
|
return false;
|
|
873
833
|
},
|
|
874
|
-
startIcon: /* @__PURE__ */ (0,
|
|
834
|
+
startIcon: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterList, { css: { color: isActive ? "var(--primaryMain)" : "#b0bac9" } }),
|
|
875
835
|
css: {
|
|
876
836
|
width: "100%",
|
|
877
837
|
color: isActive ? "var(--primaryMain)" : "var(--color-text)"
|
|
878
838
|
},
|
|
879
839
|
children: label
|
|
880
|
-
}), /* @__PURE__ */ (0,
|
|
840
|
+
}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
881
841
|
onPointerDown: (event) => {
|
|
882
842
|
event.stopPropagation();
|
|
883
843
|
},
|
|
884
844
|
onPointerMove: (event) => {
|
|
885
845
|
event.stopPropagation();
|
|
886
846
|
},
|
|
887
|
-
children: /* @__PURE__ */ (0,
|
|
847
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(filterDialog_default, { ref: dialog })
|
|
888
848
|
})]
|
|
889
849
|
});
|
|
890
850
|
}
|
|
891
|
-
|
|
892
851
|
//#endregion
|
|
893
852
|
//#region src/components/combinedFilter.tsx
|
|
894
|
-
function CombinedFilter({ columnIds: inputColumnIds
|
|
853
|
+
function CombinedFilter({ columnIds: inputColumnIds, ...props }) {
|
|
895
854
|
const table = useTableContext();
|
|
896
855
|
const columnIds = table.useState((state) => {
|
|
897
856
|
return inputColumnIds ?? state.activeColumns.filter((column) => column.filter !== void 0 && !state.visibleColumns.some((c) => c.id === column.id)).map((column) => column.id);
|
|
@@ -923,12 +882,11 @@ function CombinedFilter({ columnIds: inputColumnIds,...props }) {
|
|
|
923
882
|
}
|
|
924
883
|
}
|
|
925
884
|
});
|
|
926
|
-
return /* @__PURE__ */ (0,
|
|
885
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { children: columnIds.map((columnId) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ColumnContext.Provider, {
|
|
927
886
|
value: columnId,
|
|
928
|
-
children: /* @__PURE__ */ (0,
|
|
887
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(NestedFilterControl, {})
|
|
929
888
|
}, columnId)) });
|
|
930
889
|
}
|
|
931
|
-
|
|
932
890
|
//#endregion
|
|
933
891
|
//#region src/misc/defaults.ts
|
|
934
892
|
function defaults(first, ...more) {
|
|
@@ -938,7 +896,6 @@ function defaults(first, ...more) {
|
|
|
938
896
|
return copy;
|
|
939
897
|
}, first);
|
|
940
898
|
}
|
|
941
|
-
|
|
942
899
|
//#endregion
|
|
943
900
|
//#region src/vendor/dayzed/utils.ts
|
|
944
901
|
/**
|
|
@@ -1009,7 +966,8 @@ function addMonth({ calendars, offset, maxDate }) {
|
|
|
1009
966
|
function isBackDisabled({ calendars, minDate }) {
|
|
1010
967
|
if (!minDate) return false;
|
|
1011
968
|
const { firstDayOfMonth } = calendars[0];
|
|
1012
|
-
|
|
969
|
+
const firstDayOfMonthMinusOne = (0, date_fns.addDays)(firstDayOfMonth, -1);
|
|
970
|
+
if ((0, date_fns.isBefore)(firstDayOfMonthMinusOne, minDate)) return true;
|
|
1013
971
|
return false;
|
|
1014
972
|
}
|
|
1015
973
|
/**
|
|
@@ -1023,7 +981,8 @@ function isBackDisabled({ calendars, minDate }) {
|
|
|
1023
981
|
function isForwardDisabled({ calendars, maxDate }) {
|
|
1024
982
|
if (!maxDate) return false;
|
|
1025
983
|
const { lastDayOfMonth } = calendars[calendars.length - 1];
|
|
1026
|
-
|
|
984
|
+
const lastDayOfMonthPlusOne = (0, date_fns.addDays)(lastDayOfMonth, 1);
|
|
985
|
+
if ((0, date_fns.isBefore)(maxDate, lastDayOfMonthPlusOne)) return true;
|
|
1027
986
|
return false;
|
|
1028
987
|
}
|
|
1029
988
|
/**
|
|
@@ -1276,7 +1235,6 @@ function isSelectable(minDate, maxDate, date) {
|
|
|
1276
1235
|
if (minDate && (0, date_fns.isBefore)(date, minDate) || maxDate && (0, date_fns.isBefore)(maxDate, date)) return false;
|
|
1277
1236
|
return true;
|
|
1278
1237
|
}
|
|
1279
|
-
|
|
1280
1238
|
//#endregion
|
|
1281
1239
|
//#region src/vendor/dayzed/dayzed.ts
|
|
1282
1240
|
function isOffsetControlled(propOffset) {
|
|
@@ -1285,7 +1243,7 @@ function isOffsetControlled(propOffset) {
|
|
|
1285
1243
|
function getOffset(prop, state) {
|
|
1286
1244
|
return isOffsetControlled(prop) ? prop : state;
|
|
1287
1245
|
}
|
|
1288
|
-
function getDateProps(onDateSelected, { onClick, dateObj = requiredProp("getDateProps", "dateObj")
|
|
1246
|
+
function getDateProps(onDateSelected, { onClick, dateObj = requiredProp("getDateProps", "dateObj"), ...rest } = {}) {
|
|
1289
1247
|
return {
|
|
1290
1248
|
onClick: composeEventHandlers(onClick, (event) => {
|
|
1291
1249
|
onDateSelected?.(dateObj, event);
|
|
@@ -1297,7 +1255,7 @@ function getDateProps(onDateSelected, { onClick, dateObj = requiredProp("getDate
|
|
|
1297
1255
|
...rest
|
|
1298
1256
|
};
|
|
1299
1257
|
}
|
|
1300
|
-
function getBackProps({ minDate, offsetMonth, handleOffsetChanged }, { onClick, offset = 1, calendars = requiredProp("getBackProps", "calendars")
|
|
1258
|
+
function getBackProps({ minDate, offsetMonth, handleOffsetChanged }, { onClick, offset = 1, calendars = requiredProp("getBackProps", "calendars"), ...rest } = {}) {
|
|
1301
1259
|
return {
|
|
1302
1260
|
onClick: composeEventHandlers(onClick, () => {
|
|
1303
1261
|
handleOffsetChanged(offsetMonth - subtractMonth({
|
|
@@ -1314,7 +1272,7 @@ function getBackProps({ minDate, offsetMonth, handleOffsetChanged }, { onClick,
|
|
|
1314
1272
|
...rest
|
|
1315
1273
|
};
|
|
1316
1274
|
}
|
|
1317
|
-
function getForwardProps({ maxDate, offsetMonth, handleOffsetChanged }, { onClick, offset = 1, calendars = requiredProp("getForwardProps", "calendars")
|
|
1275
|
+
function getForwardProps({ maxDate, offsetMonth, handleOffsetChanged }, { onClick, offset = 1, calendars = requiredProp("getForwardProps", "calendars"), ...rest } = {}) {
|
|
1318
1276
|
return {
|
|
1319
1277
|
onClick: composeEventHandlers(onClick, () => {
|
|
1320
1278
|
handleOffsetChanged(offsetMonth + addMonth({
|
|
@@ -1362,7 +1320,6 @@ function useDayzed({ date = /* @__PURE__ */ new Date(), maxDate, minDate, months
|
|
|
1362
1320
|
})
|
|
1363
1321
|
};
|
|
1364
1322
|
}
|
|
1365
|
-
|
|
1366
1323
|
//#endregion
|
|
1367
1324
|
//#region src/hooks/useLatestRef.ts
|
|
1368
1325
|
function useLatestRef(value) {
|
|
@@ -1372,7 +1329,6 @@ function useLatestRef(value) {
|
|
|
1372
1329
|
}, [value]);
|
|
1373
1330
|
return latestValue;
|
|
1374
1331
|
}
|
|
1375
|
-
|
|
1376
1332
|
//#endregion
|
|
1377
1333
|
//#region src/components/dateInput.tsx
|
|
1378
1334
|
const className$1 = "schummar-table-date-input";
|
|
@@ -1399,11 +1355,11 @@ function DateInput({ value, onChange, locale }) {
|
|
|
1399
1355
|
const id = (0, react.useMemo)(() => (0, nanoid.nanoid)(), []);
|
|
1400
1356
|
const [localValue, setLocalValue] = (0, react.useState)();
|
|
1401
1357
|
const latestValue = useLatestRef(value);
|
|
1402
|
-
const commit = (0, react.useMemo)(() => debounce((localValue
|
|
1403
|
-
if (value
|
|
1404
|
-
const date = buildDate(localValue
|
|
1358
|
+
const commit = (0, react.useMemo)(() => debounce((localValue = {}, value, onChange) => {
|
|
1359
|
+
if (value !== latestValue.current) return;
|
|
1360
|
+
const date = buildDate(localValue, value ?? void 0);
|
|
1405
1361
|
setLocalValue(void 0);
|
|
1406
|
-
onChange
|
|
1362
|
+
onChange(isNaN(date.getTime()) ? null : date);
|
|
1407
1363
|
}, 100), []);
|
|
1408
1364
|
const format = (0, react.useMemo)(() => new Intl.DateTimeFormat(locale, {
|
|
1409
1365
|
day: "2-digit",
|
|
@@ -1417,12 +1373,12 @@ function DateInput({ value, onChange, locale }) {
|
|
|
1417
1373
|
parts = format.formatToParts(defaultDate$1);
|
|
1418
1374
|
}
|
|
1419
1375
|
const isEmpty = !value;
|
|
1420
|
-
return /* @__PURE__ */ (0,
|
|
1376
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
1421
1377
|
css: {
|
|
1422
1378
|
display: "flex",
|
|
1423
1379
|
alignItems: "baseline"
|
|
1424
1380
|
},
|
|
1425
|
-
children: parts.map(({ type, value: partValue }, index) => /* @__PURE__ */ (0,
|
|
1381
|
+
children: parts.map(({ type, value: partValue }, index) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react.Fragment, { children: isIncludedType$1(type) ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("input", {
|
|
1426
1382
|
className: `${className$1}-${id}`,
|
|
1427
1383
|
css: {
|
|
1428
1384
|
boxSizing: "content-box",
|
|
@@ -1460,16 +1416,15 @@ function DateInput({ value, onChange, locale }) {
|
|
|
1460
1416
|
onBlur: () => {
|
|
1461
1417
|
commit(localValue, value, onChange);
|
|
1462
1418
|
}
|
|
1463
|
-
}) : type === "literal" ? /* @__PURE__ */ (0,
|
|
1419
|
+
}) : type === "literal" ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", { children: partValue }) : null }, index))
|
|
1464
1420
|
});
|
|
1465
1421
|
}
|
|
1466
|
-
|
|
1467
1422
|
//#endregion
|
|
1468
1423
|
//#region src/components/text.tsx
|
|
1469
1424
|
function Text({ id }) {
|
|
1470
|
-
|
|
1425
|
+
const text = useTheme((t) => t.text[id]);
|
|
1426
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_emotion_react_jsx_runtime.Fragment, { children: text });
|
|
1471
1427
|
}
|
|
1472
|
-
|
|
1473
1428
|
//#endregion
|
|
1474
1429
|
//#region src/components/timeInput.tsx
|
|
1475
1430
|
const className = "schummar-table-time-input";
|
|
@@ -1496,11 +1451,11 @@ function TimeInput({ value, onChange, locale, showSeconds = true }) {
|
|
|
1496
1451
|
const id = (0, react.useMemo)(() => (0, nanoid.nanoid)(), []);
|
|
1497
1452
|
const [localValue, setLocalValue] = (0, react.useState)();
|
|
1498
1453
|
const latestValue = useLatestRef(value);
|
|
1499
|
-
const commit = (0, react.useMemo)(() => debounce((localValue
|
|
1500
|
-
if (value
|
|
1501
|
-
const date = buildTime(localValue
|
|
1454
|
+
const commit = (0, react.useMemo)(() => debounce((localValue = {}, value, onChange) => {
|
|
1455
|
+
if (value !== latestValue.current) return;
|
|
1456
|
+
const date = buildTime(localValue, value ?? void 0);
|
|
1502
1457
|
setLocalValue(void 0);
|
|
1503
|
-
onChange
|
|
1458
|
+
onChange(isNaN(date.getTime()) ? null : date);
|
|
1504
1459
|
}, 100), []);
|
|
1505
1460
|
const format = (0, react.useMemo)(() => new Intl.DateTimeFormat(locale, {
|
|
1506
1461
|
hour: "2-digit",
|
|
@@ -1514,12 +1469,12 @@ function TimeInput({ value, onChange, locale, showSeconds = true }) {
|
|
|
1514
1469
|
parts = format.formatToParts(defaultDate);
|
|
1515
1470
|
}
|
|
1516
1471
|
const isEmpty = !value;
|
|
1517
|
-
return /* @__PURE__ */ (0,
|
|
1472
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
1518
1473
|
css: {
|
|
1519
1474
|
display: "flex",
|
|
1520
1475
|
alignItems: "baseline"
|
|
1521
1476
|
},
|
|
1522
|
-
children: parts.map(({ type, value: partValue }, index) => /* @__PURE__ */ (0,
|
|
1477
|
+
children: parts.map(({ type, value: partValue }, index) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react.Fragment, { children: isIncludedType(type) ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("input", {
|
|
1523
1478
|
className: `${className}-${id}`,
|
|
1524
1479
|
css: {
|
|
1525
1480
|
boxSizing: "content-box",
|
|
@@ -1557,16 +1512,15 @@ function TimeInput({ value, onChange, locale, showSeconds = true }) {
|
|
|
1557
1512
|
onBlur: () => {
|
|
1558
1513
|
commit(localValue, value, onChange);
|
|
1559
1514
|
}
|
|
1560
|
-
}) : type === "literal" ? /* @__PURE__ */ (0,
|
|
1515
|
+
}) : type === "literal" ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", { children: partValue }) : null }, index))
|
|
1561
1516
|
});
|
|
1562
1517
|
}
|
|
1563
|
-
|
|
1564
1518
|
//#endregion
|
|
1565
1519
|
//#region src/components/datePicker.tsx
|
|
1566
1520
|
const DatePickerContext = (0, react.createContext)({});
|
|
1567
|
-
function DatePickerProvider({ children
|
|
1521
|
+
function DatePickerProvider({ children, ...props }) {
|
|
1568
1522
|
const value = (0, react.useMemo)(() => props, [JSON.stringify(props)]);
|
|
1569
|
-
return /* @__PURE__ */ (0,
|
|
1523
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(DatePickerContext.Provider, {
|
|
1570
1524
|
value,
|
|
1571
1525
|
children
|
|
1572
1526
|
});
|
|
@@ -1595,8 +1549,7 @@ const lastDays = (days) => {
|
|
|
1595
1549
|
};
|
|
1596
1550
|
const today = () => lastDays(1);
|
|
1597
1551
|
const thisWeek = (delta = 0, firstDayOfWeek = 1) => {
|
|
1598
|
-
const
|
|
1599
|
-
const min = new Date(now);
|
|
1552
|
+
const min = /* @__PURE__ */ new Date(/* @__PURE__ */ new Date());
|
|
1600
1553
|
let diff = min.getDay() - firstDayOfWeek;
|
|
1601
1554
|
if (diff < 0) diff += 7;
|
|
1602
1555
|
min.setDate(min.getDate() - diff + delta * 7);
|
|
@@ -1608,8 +1561,7 @@ const thisWeek = (delta = 0, firstDayOfWeek = 1) => {
|
|
|
1608
1561
|
};
|
|
1609
1562
|
};
|
|
1610
1563
|
const thisMonth = (delta = 0) => {
|
|
1611
|
-
const
|
|
1612
|
-
const min = new Date(now);
|
|
1564
|
+
const min = /* @__PURE__ */ new Date(/* @__PURE__ */ new Date());
|
|
1613
1565
|
min.setDate(1);
|
|
1614
1566
|
min.setMonth(min.getMonth() + delta);
|
|
1615
1567
|
const max = new Date(min);
|
|
@@ -1621,8 +1573,7 @@ const thisMonth = (delta = 0) => {
|
|
|
1621
1573
|
};
|
|
1622
1574
|
};
|
|
1623
1575
|
const thisYear = (delta = 0) => {
|
|
1624
|
-
const
|
|
1625
|
-
const min = new Date(now);
|
|
1576
|
+
const min = /* @__PURE__ */ new Date(/* @__PURE__ */ new Date());
|
|
1626
1577
|
min.setDate(1);
|
|
1627
1578
|
min.setMonth(0);
|
|
1628
1579
|
min.setFullYear(min.getFullYear() + delta);
|
|
@@ -1640,27 +1591,27 @@ const getCalendarWeek = (date) => {
|
|
|
1640
1591
|
};
|
|
1641
1592
|
const commonQuickOptions = {
|
|
1642
1593
|
today: {
|
|
1643
|
-
label: /* @__PURE__ */ (0,
|
|
1594
|
+
label: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Text, { id: "today" }),
|
|
1644
1595
|
value: today
|
|
1645
1596
|
},
|
|
1646
1597
|
thisWeek: {
|
|
1647
|
-
label: /* @__PURE__ */ (0,
|
|
1598
|
+
label: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Text, { id: "thisWeek" }),
|
|
1648
1599
|
value: (props) => thisWeek(0, props.firstDayOfWeek)
|
|
1649
1600
|
},
|
|
1650
1601
|
thisMonth: {
|
|
1651
|
-
label: /* @__PURE__ */ (0,
|
|
1602
|
+
label: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Text, { id: "thisMonth" }),
|
|
1652
1603
|
value: () => thisMonth()
|
|
1653
1604
|
},
|
|
1654
1605
|
thisYear: {
|
|
1655
|
-
label: /* @__PURE__ */ (0,
|
|
1606
|
+
label: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Text, { id: "thisYear" }),
|
|
1656
1607
|
value: () => thisYear()
|
|
1657
1608
|
},
|
|
1658
1609
|
lastSevenDays: {
|
|
1659
|
-
label: /* @__PURE__ */ (0,
|
|
1610
|
+
label: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Text, { id: "lastSevenDays" }),
|
|
1660
1611
|
value: () => lastDays(7)
|
|
1661
1612
|
},
|
|
1662
1613
|
lastThirtyDays: {
|
|
1663
|
-
label: /* @__PURE__ */ (0,
|
|
1614
|
+
label: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Text, { id: "lastThirtyDays" }),
|
|
1664
1615
|
value: () => lastDays(30)
|
|
1665
1616
|
}
|
|
1666
1617
|
};
|
|
@@ -1689,19 +1640,19 @@ function getValueForComparison(value) {
|
|
|
1689
1640
|
}
|
|
1690
1641
|
function DatePicker(props) {
|
|
1691
1642
|
const { value, rangeSelect, locale, firstDayOfWeek = 1, defaultDateInView, quickOptions = ["today", "thisWeek"], noReset, minDate, maxDate, showCalendarWeek, blockedRanges = [], showTime } = defaults(props, (0, react.useContext)(DatePickerContext));
|
|
1692
|
-
function onChange(value
|
|
1693
|
-
if (value
|
|
1694
|
-
else if (value
|
|
1695
|
-
min: dateClamp(value
|
|
1696
|
-
max: dateClamp(value
|
|
1643
|
+
function onChange(value, source) {
|
|
1644
|
+
if (value instanceof Date) value = dateClamp(value, minDate, maxDate);
|
|
1645
|
+
else if (value) value = {
|
|
1646
|
+
min: dateClamp(value.min, minDate, maxDate),
|
|
1647
|
+
max: dateClamp(value.max, minDate, maxDate)
|
|
1697
1648
|
};
|
|
1698
|
-
props.onChange(value
|
|
1649
|
+
props.onChange(value, source);
|
|
1699
1650
|
}
|
|
1700
|
-
const Button
|
|
1701
|
-
const IconButton
|
|
1702
|
-
const ChevronRight
|
|
1651
|
+
const Button = useTheme((t) => t.components.Button);
|
|
1652
|
+
const IconButton = useTheme((t) => t.components.IconButton);
|
|
1653
|
+
const ChevronRight = useTheme((t) => t.icons.ChevronRight);
|
|
1703
1654
|
const cssVariables = useCssVariables();
|
|
1704
|
-
function getDayCssStyles({ disabled, prevMonth, nextMonth, today
|
|
1655
|
+
function getDayCssStyles({ disabled, prevMonth, nextMonth, today, blocked, selected, preSelected }) {
|
|
1705
1656
|
return [
|
|
1706
1657
|
{
|
|
1707
1658
|
padding: 10,
|
|
@@ -1712,7 +1663,7 @@ function DatePicker(props) {
|
|
|
1712
1663
|
color: "inherit"
|
|
1713
1664
|
},
|
|
1714
1665
|
(prevMonth || nextMonth) && { color: "var(--date-picker-disemphasized, #bdbdbd)" },
|
|
1715
|
-
today
|
|
1666
|
+
today && { outline: "1px solid var(--secondaryMain)" },
|
|
1716
1667
|
blocked && {
|
|
1717
1668
|
background: "var(--blockedMain)",
|
|
1718
1669
|
color: "var(--blockedContrastText)"
|
|
@@ -1752,27 +1703,27 @@ function DatePicker(props) {
|
|
|
1752
1703
|
const min = dirty ? dirty.min : value instanceof Date ? value : value?.min;
|
|
1753
1704
|
const max = dirty ? dirty.max : value instanceof Date ? value : value?.max;
|
|
1754
1705
|
const resolvedQuickOptions = [...quickOptions, ...noReset ? [] : [{
|
|
1755
|
-
label: /* @__PURE__ */ (0,
|
|
1706
|
+
label: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Text, { id: "reset" }),
|
|
1756
1707
|
value: null
|
|
1757
1708
|
}]].map((option, index) => {
|
|
1758
|
-
if (option instanceof Function) return option((value
|
|
1709
|
+
if (option instanceof Function) return option((value) => {
|
|
1759
1710
|
setDirty(void 0);
|
|
1760
|
-
onChange(value
|
|
1711
|
+
onChange(value, "quickOption");
|
|
1761
1712
|
});
|
|
1762
|
-
const { label, value
|
|
1763
|
-
return /* @__PURE__ */ (0,
|
|
1713
|
+
const { label, value } = typeof option === "string" ? commonQuickOptions[option] : option;
|
|
1714
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Button, {
|
|
1764
1715
|
variant: "text",
|
|
1765
1716
|
type: "button",
|
|
1766
1717
|
css: { color: "inherit" },
|
|
1767
1718
|
onClick: () => {
|
|
1768
1719
|
setDirty(void 0);
|
|
1769
|
-
if (value
|
|
1770
|
-
else onChange(value
|
|
1720
|
+
if (value instanceof Function) onChange(value(props), "quickOption");
|
|
1721
|
+
else onChange(value, "quickOption");
|
|
1771
1722
|
},
|
|
1772
1723
|
children: label
|
|
1773
1724
|
}, index);
|
|
1774
1725
|
});
|
|
1775
|
-
const { calendars, getBackProps
|
|
1726
|
+
const { calendars, getBackProps, getForwardProps, getDateProps } = useDayzed({
|
|
1776
1727
|
onDateSelected: () => void 0,
|
|
1777
1728
|
firstDayOfWeek,
|
|
1778
1729
|
showOutsideDays: true,
|
|
@@ -1795,23 +1746,25 @@ function DatePicker(props) {
|
|
|
1795
1746
|
(0, react.useEffect)(() => {
|
|
1796
1747
|
if (!rangeSelect) setDirty(void 0);
|
|
1797
1748
|
}, [rangeSelect]);
|
|
1798
|
-
function set(source, min
|
|
1749
|
+
function set(source, min, max, edit) {
|
|
1799
1750
|
if (!rangeSelect) {
|
|
1800
|
-
onChange(min
|
|
1751
|
+
onChange(min ?? null, source);
|
|
1801
1752
|
return;
|
|
1802
1753
|
}
|
|
1803
|
-
if (min
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
1754
|
+
if (min && max && min > max) {
|
|
1755
|
+
if (edit === "min") max = min;
|
|
1756
|
+
else if (edit === "max") min = max;
|
|
1757
|
+
else [min, max] = [max, min];
|
|
1758
|
+
}
|
|
1759
|
+
if (!min === !max) {
|
|
1807
1760
|
setDirty(void 0);
|
|
1808
|
-
onChange(min
|
|
1809
|
-
min
|
|
1810
|
-
max: endOfDay(max
|
|
1761
|
+
onChange(min && max ? {
|
|
1762
|
+
min,
|
|
1763
|
+
max: endOfDay(max)
|
|
1811
1764
|
} : null, source);
|
|
1812
1765
|
} else setDirty({
|
|
1813
|
-
min
|
|
1814
|
-
max
|
|
1766
|
+
min,
|
|
1767
|
+
max
|
|
1815
1768
|
});
|
|
1816
1769
|
}
|
|
1817
1770
|
const formatMonth = (0, react.useMemo)(() => {
|
|
@@ -1822,10 +1775,10 @@ function DatePicker(props) {
|
|
|
1822
1775
|
const { format } = new Intl.DateTimeFormat(locale, { year: "numeric" });
|
|
1823
1776
|
return (year) => format(new Date(year, 0, 1));
|
|
1824
1777
|
}, [locale]);
|
|
1825
|
-
return /* @__PURE__ */ (0,
|
|
1778
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
1826
1779
|
css: [cssVariables, { color: "var(--table-text-color)" }],
|
|
1827
1780
|
children: [
|
|
1828
|
-
/* @__PURE__ */ (0,
|
|
1781
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
1829
1782
|
css: {
|
|
1830
1783
|
display: "grid",
|
|
1831
1784
|
gridAutoFlow: "column",
|
|
@@ -1838,29 +1791,29 @@ function DatePicker(props) {
|
|
|
1838
1791
|
alignItems: "center"
|
|
1839
1792
|
}
|
|
1840
1793
|
},
|
|
1841
|
-
children: [/* @__PURE__ */ (0,
|
|
1794
|
+
children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(DateInput, {
|
|
1842
1795
|
value: min ?? null,
|
|
1843
1796
|
onChange: (newMin) => set("input", newMin ?? void 0, max, "min"),
|
|
1844
1797
|
locale
|
|
1845
|
-
}), showTime && /* @__PURE__ */ (0,
|
|
1798
|
+
}), showTime && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TimeInput, {
|
|
1846
1799
|
value: min ?? null,
|
|
1847
1800
|
onChange: (newMin) => set("input", newMin ?? void 0, max, "min"),
|
|
1848
1801
|
locale,
|
|
1849
1802
|
showSeconds: typeof showTime === "boolean" ? true : showTime.showSeconds
|
|
1850
|
-
})] }), rangeSelect && /* @__PURE__ */ (0,
|
|
1803
|
+
})] }), rangeSelect && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [" - ", /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(DateInput, {
|
|
1851
1804
|
value: max ?? null,
|
|
1852
1805
|
onChange: (newMax) => set("input", min, newMax ?? void 0, "max"),
|
|
1853
1806
|
locale
|
|
1854
|
-
}), showTime && /* @__PURE__ */ (0,
|
|
1807
|
+
}), showTime && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TimeInput, {
|
|
1855
1808
|
value: max ?? null,
|
|
1856
1809
|
onChange: (newMax) => set("input", min, newMax ?? void 0, "max"),
|
|
1857
1810
|
locale,
|
|
1858
1811
|
showSeconds: typeof showTime === "boolean" ? true : showTime.showSeconds
|
|
1859
1812
|
})] })] })]
|
|
1860
1813
|
}),
|
|
1861
|
-
calendars.map(({ month, year, weeks }) => /* @__PURE__ */ (0,
|
|
1814
|
+
calendars.map(({ month, year, weeks }) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
1862
1815
|
css: { display: "grid" },
|
|
1863
|
-
children: [/* @__PURE__ */ (0,
|
|
1816
|
+
children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
1864
1817
|
css: {
|
|
1865
1818
|
margin: "calc(var(--spacing) * 4) 0",
|
|
1866
1819
|
display: "grid",
|
|
@@ -1869,12 +1822,12 @@ function DatePicker(props) {
|
|
|
1869
1822
|
alignItems: "center"
|
|
1870
1823
|
},
|
|
1871
1824
|
children: [
|
|
1872
|
-
/* @__PURE__ */ (0,
|
|
1825
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(IconButton, {
|
|
1873
1826
|
type: "button",
|
|
1874
|
-
...getBackProps
|
|
1875
|
-
children: /* @__PURE__ */ (0,
|
|
1827
|
+
...getBackProps({ calendars }),
|
|
1828
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ChevronRight, { css: { transform: "rotate3d(0, 0, 1, 180deg)" } })
|
|
1876
1829
|
}),
|
|
1877
|
-
/* @__PURE__ */ (0,
|
|
1830
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
1878
1831
|
css: { display: "flex" },
|
|
1879
1832
|
children: [
|
|
1880
1833
|
formatMonth(month),
|
|
@@ -1882,28 +1835,28 @@ function DatePicker(props) {
|
|
|
1882
1835
|
formatYear(year)
|
|
1883
1836
|
]
|
|
1884
1837
|
}),
|
|
1885
|
-
/* @__PURE__ */ (0,
|
|
1838
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(IconButton, {
|
|
1886
1839
|
type: "button",
|
|
1887
|
-
...getForwardProps
|
|
1888
|
-
children: /* @__PURE__ */ (0,
|
|
1840
|
+
...getForwardProps({ calendars }),
|
|
1841
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ChevronRight, {})
|
|
1889
1842
|
})
|
|
1890
1843
|
]
|
|
1891
|
-
}), /* @__PURE__ */ (0,
|
|
1844
|
+
}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
1892
1845
|
css: {
|
|
1893
1846
|
justifySelf: "center",
|
|
1894
1847
|
display: "grid",
|
|
1895
1848
|
gridTemplateColumns: "repeat(8, max-content)"
|
|
1896
1849
|
},
|
|
1897
1850
|
children: [
|
|
1898
|
-
showCalendarWeek ? /* @__PURE__ */ (0,
|
|
1851
|
+
showCalendarWeek ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
1899
1852
|
css: {
|
|
1900
1853
|
justifySelf: "center",
|
|
1901
1854
|
padding: 10,
|
|
1902
1855
|
borderRight: "1px solid var(--date-picker-separator, var(--table-border, #bdbdbd))"
|
|
1903
1856
|
},
|
|
1904
|
-
children: /* @__PURE__ */ (0,
|
|
1905
|
-
}) : /* @__PURE__ */ (0,
|
|
1906
|
-
weekDays.map((_v, weekDay) => /* @__PURE__ */ (0,
|
|
1857
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Text, { id: "calendarWeek" })
|
|
1858
|
+
}) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {}),
|
|
1859
|
+
weekDays.map((_v, weekDay) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
1907
1860
|
css: {
|
|
1908
1861
|
justifySelf: "center",
|
|
1909
1862
|
padding: 10
|
|
@@ -1914,7 +1867,7 @@ function DatePicker(props) {
|
|
|
1914
1867
|
const weekStart = week[0];
|
|
1915
1868
|
const weekEnd = week[6];
|
|
1916
1869
|
const weekDisabled = !rangeSelect || minDate && weekEnd.date < minDate || maxDate && weekStart.date > maxDate;
|
|
1917
|
-
return /* @__PURE__ */ (0,
|
|
1870
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(react.Fragment, { children: [showCalendarWeek ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("button", {
|
|
1918
1871
|
type: "button",
|
|
1919
1872
|
css: {
|
|
1920
1873
|
padding: 10,
|
|
@@ -1935,10 +1888,10 @@ function DatePicker(props) {
|
|
|
1935
1888
|
}),
|
|
1936
1889
|
onPointerOut: () => !weekDisabled && setHovered(void 0),
|
|
1937
1890
|
children: getCalendarWeek(weekEnd.date)
|
|
1938
|
-
}) : /* @__PURE__ */ (0,
|
|
1939
|
-
if (!dateObject) return /* @__PURE__ */ (0,
|
|
1891
|
+
}) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {}), week.map((dateObject, dayIndex) => {
|
|
1892
|
+
if (!dateObject) return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {}, dayIndex);
|
|
1940
1893
|
const { prevMonth, nextMonth, date } = dateObject;
|
|
1941
|
-
const today
|
|
1894
|
+
const today = startOfDay(date).getTime() === now.getTime();
|
|
1942
1895
|
const disabled = minDate && date < minDate || maxDate && date > maxDate;
|
|
1943
1896
|
const selected = date.getTime() === min?.getTime() || min && max && dateIntersect(date, {
|
|
1944
1897
|
min,
|
|
@@ -1951,22 +1904,24 @@ function DatePicker(props) {
|
|
|
1951
1904
|
min: hovered.max,
|
|
1952
1905
|
max: min
|
|
1953
1906
|
}));
|
|
1954
|
-
|
|
1907
|
+
const blocked = blockedRanges.some((range) => dateIntersect(date, range));
|
|
1908
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("button", {
|
|
1955
1909
|
type: "button",
|
|
1956
1910
|
css: getDayCssStyles({
|
|
1957
1911
|
disabled,
|
|
1958
1912
|
prevMonth,
|
|
1959
1913
|
nextMonth,
|
|
1960
|
-
today
|
|
1961
|
-
blocked
|
|
1914
|
+
today,
|
|
1915
|
+
blocked,
|
|
1962
1916
|
selected,
|
|
1963
1917
|
preSelected
|
|
1964
1918
|
}),
|
|
1965
|
-
...getDateProps
|
|
1919
|
+
...getDateProps({ dateObj: dateObject }),
|
|
1966
1920
|
onClick: () => {
|
|
1967
|
-
if (dirty)
|
|
1968
|
-
|
|
1969
|
-
|
|
1921
|
+
if (dirty) {
|
|
1922
|
+
if (min) set("calendar", min, date);
|
|
1923
|
+
else set("calendar", date, max);
|
|
1924
|
+
} else set("calendar", date);
|
|
1970
1925
|
},
|
|
1971
1926
|
onPointerOver: () => setHovered({
|
|
1972
1927
|
min: date,
|
|
@@ -1981,7 +1936,7 @@ function DatePicker(props) {
|
|
|
1981
1936
|
]
|
|
1982
1937
|
})]
|
|
1983
1938
|
}, `${month}${year}`)),
|
|
1984
|
-
/* @__PURE__ */ (0,
|
|
1939
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
1985
1940
|
css: {
|
|
1986
1941
|
marginTop: "var(--spacing)",
|
|
1987
1942
|
display: "grid",
|
|
@@ -1993,7 +1948,6 @@ function DatePicker(props) {
|
|
|
1993
1948
|
]
|
|
1994
1949
|
});
|
|
1995
1950
|
}
|
|
1996
|
-
|
|
1997
1951
|
//#endregion
|
|
1998
1952
|
//#region src/components/dateFilter.tsx
|
|
1999
1953
|
function convertDate(x) {
|
|
@@ -2015,7 +1969,7 @@ function convertDateOrArray(x) {
|
|
|
2015
1969
|
if (Array.isArray(x)) return x.map(convertDateOrRange).filter(Boolean);
|
|
2016
1970
|
return convertDateOrRange(x);
|
|
2017
1971
|
}
|
|
2018
|
-
function DateFilter({ locale, firstDayOfWeek, defaultDateInView, quickOptions, singleSelect, filterBy = convertDateOrArray, minDate, maxDate, showCalendarWeek, showTime
|
|
1972
|
+
function DateFilter({ locale, firstDayOfWeek, defaultDateInView, quickOptions, singleSelect, filterBy = convertDateOrArray, minDate, maxDate, showCalendarWeek, showTime, ...props }) {
|
|
2019
1973
|
const { value = null, onChange, close } = useFilter({
|
|
2020
1974
|
...props,
|
|
2021
1975
|
filterBy,
|
|
@@ -2023,20 +1977,20 @@ function DateFilter({ locale, firstDayOfWeek, defaultDateInView, quickOptions, s
|
|
|
2023
1977
|
isActive(filterValue) {
|
|
2024
1978
|
return !!filterValue;
|
|
2025
1979
|
},
|
|
2026
|
-
test(filterValue, value
|
|
2027
|
-
return dateIntersect(filterValue, value
|
|
1980
|
+
test(filterValue, value) {
|
|
1981
|
+
return dateIntersect(filterValue, value);
|
|
2028
1982
|
}
|
|
2029
1983
|
});
|
|
2030
|
-
return /* @__PURE__ */ (0,
|
|
1984
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
2031
1985
|
css: {
|
|
2032
1986
|
padding: "calc(var(--spacing) * 2)",
|
|
2033
1987
|
display: "grid"
|
|
2034
1988
|
},
|
|
2035
|
-
children: /* @__PURE__ */ (0,
|
|
1989
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(DatePicker, {
|
|
2036
1990
|
rangeSelect: !singleSelect,
|
|
2037
1991
|
value,
|
|
2038
|
-
onChange: (value
|
|
2039
|
-
onChange(value
|
|
1992
|
+
onChange: (value, source) => {
|
|
1993
|
+
onChange(value);
|
|
2040
1994
|
if (source !== "input") close();
|
|
2041
1995
|
},
|
|
2042
1996
|
locale,
|
|
@@ -2050,10 +2004,9 @@ function DateFilter({ locale, firstDayOfWeek, defaultDateInView, quickOptions, s
|
|
|
2050
2004
|
})
|
|
2051
2005
|
});
|
|
2052
2006
|
}
|
|
2053
|
-
|
|
2054
2007
|
//#endregion
|
|
2055
2008
|
//#region src/misc/helpers.ts
|
|
2056
|
-
var helpers_exports = /* @__PURE__ */
|
|
2009
|
+
var helpers_exports = /* @__PURE__ */ require_tableSettings.__exportAll({
|
|
2057
2010
|
asNumber: () => asNumber,
|
|
2058
2011
|
asNumberOrArray: () => asNumberOrArray,
|
|
2059
2012
|
asString: () => asString,
|
|
@@ -2071,8 +2024,8 @@ var helpers_exports = /* @__PURE__ */ require_chunk.__export({
|
|
|
2071
2024
|
subStringMatch: () => subStringMatch,
|
|
2072
2025
|
uniq: () => uniq
|
|
2073
2026
|
});
|
|
2074
|
-
const flatMap = (array, flatMap
|
|
2075
|
-
return [...array].flatMap(flatMap
|
|
2027
|
+
const flatMap = (array, flatMap) => {
|
|
2028
|
+
return [...array].flatMap(flatMap);
|
|
2076
2029
|
};
|
|
2077
2030
|
const orderBy = (array, selectors = [], direction = [], locale, options) => {
|
|
2078
2031
|
if (selectors.length === 0) selectors = [(t) => t];
|
|
@@ -2083,7 +2036,11 @@ const orderBy = (array, selectors = [], direction = [], locale, options) => {
|
|
|
2083
2036
|
const _direction = direction[i] === "desc" ? -1 : 1;
|
|
2084
2037
|
const _locale = locale?.[i];
|
|
2085
2038
|
const _options = options?.[i];
|
|
2086
|
-
if (typeof _a === "string" && typeof _b === "string")
|
|
2039
|
+
if (typeof _a === "string" && typeof _b === "string") {
|
|
2040
|
+
const result = _a.localeCompare(_b, _locale, _options);
|
|
2041
|
+
if (result !== 0) return result * _direction;
|
|
2042
|
+
continue;
|
|
2043
|
+
}
|
|
2087
2044
|
if (_a > _b) return _direction;
|
|
2088
2045
|
if (_a < _b) return -_direction;
|
|
2089
2046
|
}
|
|
@@ -2147,12 +2104,11 @@ const castArray = (a) => Array.isArray(a) ? a : [a];
|
|
|
2147
2104
|
const cx = (...classNames) => classNames.flatMap((entry) => {
|
|
2148
2105
|
if (!entry) return [];
|
|
2149
2106
|
if (typeof entry === "string") return [entry];
|
|
2150
|
-
return Object.entries(entry).filter(([, predicate]) => predicate).map(([className
|
|
2107
|
+
return Object.entries(entry).filter(([, predicate]) => predicate).map(([className]) => className);
|
|
2151
2108
|
}).join(" ");
|
|
2152
2109
|
function isTruthy(x) {
|
|
2153
2110
|
return !!x;
|
|
2154
2111
|
}
|
|
2155
|
-
|
|
2156
2112
|
//#endregion
|
|
2157
2113
|
//#region src/components/numberField.tsx
|
|
2158
2114
|
const Pattern = /^-?\d*(?:[.,]\d*)?$/;
|
|
@@ -2162,14 +2118,14 @@ const printNumber = (value, locale) => {
|
|
|
2162
2118
|
};
|
|
2163
2119
|
const parseNumber = (value) => {
|
|
2164
2120
|
if (value === "") return null;
|
|
2165
|
-
const asNumber
|
|
2166
|
-
return Number.isNaN(asNumber
|
|
2121
|
+
const asNumber = Number(value.replace(",", "."));
|
|
2122
|
+
return Number.isNaN(asNumber) ? null : asNumber;
|
|
2167
2123
|
};
|
|
2168
|
-
function NumberField({ value: commitedValue = null, onChange
|
|
2124
|
+
function NumberField({ value: commitedValue = null, onChange, ...textFieldProps }) {
|
|
2169
2125
|
const locale = useTheme((t) => t.locale);
|
|
2170
|
-
const TextField
|
|
2126
|
+
const TextField = useTheme((t) => t.components.TextField);
|
|
2171
2127
|
const [value = printNumber(commitedValue, locale), setValue] = (0, react.useState)();
|
|
2172
|
-
return /* @__PURE__ */ (0,
|
|
2128
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TextField, {
|
|
2173
2129
|
value,
|
|
2174
2130
|
onChange: (event) => {
|
|
2175
2131
|
if (Pattern.test(event.target.value)) setValue(event.target.value);
|
|
@@ -2185,10 +2141,9 @@ function NumberField({ value: commitedValue = null, onChange,...textFieldProps }
|
|
|
2185
2141
|
} }
|
|
2186
2142
|
});
|
|
2187
2143
|
}
|
|
2188
|
-
|
|
2189
2144
|
//#endregion
|
|
2190
2145
|
//#region src/components/rangeFilter.tsx
|
|
2191
|
-
function RangeFilter({ min, max, filterBy = asNumberOrArray
|
|
2146
|
+
function RangeFilter({ min, max, filterBy = asNumberOrArray, ...props }) {
|
|
2192
2147
|
const rangeMinText = useTheme((t) => t.text.rangeMin);
|
|
2193
2148
|
const rangeMaxText = useTheme((t) => t.text.rangeMax);
|
|
2194
2149
|
const table = useTableContext();
|
|
@@ -2198,16 +2153,17 @@ function RangeFilter({ min, max, filterBy = asNumberOrArray,...props }) {
|
|
|
2198
2153
|
if (typeof min === "number" && typeof max === "number") return [min, max];
|
|
2199
2154
|
const column = state.activeColumns.find((c) => c.id === columnId);
|
|
2200
2155
|
if (!column) return [0, 100];
|
|
2201
|
-
let minValue
|
|
2202
|
-
let maxValue
|
|
2156
|
+
let minValue;
|
|
2157
|
+
let maxValue;
|
|
2203
2158
|
for (const item of state.items) {
|
|
2204
|
-
const
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
|
|
2159
|
+
const columnValue = column.value(item.value);
|
|
2160
|
+
const numberValues = castArray(filterByFunction(columnValue, item.value)).filter((value) => value !== null);
|
|
2161
|
+
for (const value of numberValues) {
|
|
2162
|
+
minValue = Math.min(minValue ?? value, value);
|
|
2163
|
+
maxValue = Math.max(maxValue ?? value, value);
|
|
2208
2164
|
}
|
|
2209
2165
|
}
|
|
2210
|
-
return [min ?? minValue
|
|
2166
|
+
return [min ?? minValue, max ?? maxValue];
|
|
2211
2167
|
});
|
|
2212
2168
|
const { value, onChange } = useFilter({
|
|
2213
2169
|
...props,
|
|
@@ -2216,20 +2172,20 @@ function RangeFilter({ min, max, filterBy = asNumberOrArray,...props }) {
|
|
|
2216
2172
|
isActive(filterValue) {
|
|
2217
2173
|
return !!filterValue;
|
|
2218
2174
|
},
|
|
2219
|
-
test(filterValue, value
|
|
2175
|
+
test(filterValue, value) {
|
|
2220
2176
|
if (!filterValue || filterValue[0] === null && filterValue[1] === null) return true;
|
|
2221
|
-
const min
|
|
2222
|
-
const max
|
|
2223
|
-
return value
|
|
2177
|
+
const min = filterValue[0] ?? Number.NEGATIVE_INFINITY;
|
|
2178
|
+
const max = filterValue[1] ?? Number.POSITIVE_INFINITY;
|
|
2179
|
+
return value !== null && value >= min && value <= max;
|
|
2224
2180
|
}
|
|
2225
2181
|
});
|
|
2226
|
-
return /* @__PURE__ */ (0,
|
|
2182
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
2227
2183
|
css: {
|
|
2228
2184
|
padding: `calc(var(--spacing) * 2)`,
|
|
2229
2185
|
display: "grid",
|
|
2230
2186
|
gap: "1em"
|
|
2231
2187
|
},
|
|
2232
|
-
children: /* @__PURE__ */ (0,
|
|
2188
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
2233
2189
|
css: {
|
|
2234
2190
|
display: "flex",
|
|
2235
2191
|
gap: "1em",
|
|
@@ -2237,13 +2193,13 @@ function RangeFilter({ min, max, filterBy = asNumberOrArray,...props }) {
|
|
|
2237
2193
|
"& > *": { width: "10em" }
|
|
2238
2194
|
},
|
|
2239
2195
|
children: [
|
|
2240
|
-
/* @__PURE__ */ (0,
|
|
2196
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(NumberField, {
|
|
2241
2197
|
value: value?.[0],
|
|
2242
2198
|
onChange: (newMin) => onChange(normalize(newMin, value?.[1], "min", {
|
|
2243
2199
|
min,
|
|
2244
2200
|
max
|
|
2245
2201
|
})),
|
|
2246
|
-
startIcon: /* @__PURE__ */ (0,
|
|
2202
|
+
startIcon: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
|
|
2247
2203
|
css: { margin: "0 calc(var(--spacing) * 2)" },
|
|
2248
2204
|
children: rangeMinText
|
|
2249
2205
|
}),
|
|
@@ -2251,13 +2207,13 @@ function RangeFilter({ min, max, filterBy = asNumberOrArray,...props }) {
|
|
|
2251
2207
|
css: { alignItems: "baseline" }
|
|
2252
2208
|
}),
|
|
2253
2209
|
"-",
|
|
2254
|
-
/* @__PURE__ */ (0,
|
|
2210
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(NumberField, {
|
|
2255
2211
|
value: value?.[1],
|
|
2256
2212
|
onChange: (newMax) => onChange(normalize(value?.[0], newMax, "max", {
|
|
2257
2213
|
min,
|
|
2258
2214
|
max
|
|
2259
2215
|
})),
|
|
2260
|
-
startIcon: /* @__PURE__ */ (0,
|
|
2216
|
+
startIcon: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
|
|
2261
2217
|
css: { margin: "0 calc(var(--spacing) * 2)" },
|
|
2262
2218
|
children: rangeMaxText
|
|
2263
2219
|
}),
|
|
@@ -2271,18 +2227,19 @@ function RangeFilter({ min, max, filterBy = asNumberOrArray,...props }) {
|
|
|
2271
2227
|
function normalize(min, max, changed, limits) {
|
|
2272
2228
|
min ??= null;
|
|
2273
2229
|
max ??= null;
|
|
2274
|
-
if (min !== null && max !== null && min > max)
|
|
2275
|
-
|
|
2230
|
+
if (min !== null && max !== null && min > max) {
|
|
2231
|
+
if (changed === "min") max = min;
|
|
2232
|
+
else min = max;
|
|
2233
|
+
}
|
|
2276
2234
|
return min !== null || max !== null ? [clamp(min, limits.min, limits.max), clamp(max, limits.min, limits.max)] : null;
|
|
2277
2235
|
}
|
|
2278
2236
|
function clamp(value, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY) {
|
|
2279
2237
|
return value === null ? null : Math.min(Math.max(value, min), max);
|
|
2280
2238
|
}
|
|
2281
|
-
|
|
2282
2239
|
//#endregion
|
|
2283
2240
|
//#region src/components/formControlLabel.tsx
|
|
2284
2241
|
function FormControlLabel({ control, label, disabled }) {
|
|
2285
|
-
return /* @__PURE__ */ (0,
|
|
2242
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("label", {
|
|
2286
2243
|
css: [{
|
|
2287
2244
|
display: "flex",
|
|
2288
2245
|
alignItems: "center",
|
|
@@ -2290,16 +2247,15 @@ function FormControlLabel({ control, label, disabled }) {
|
|
|
2290
2247
|
userSelect: "none",
|
|
2291
2248
|
"& > *": { cursor: "pointer" }
|
|
2292
2249
|
}, disabled && { color: "rgba(0, 0, 0, 0.26)" }],
|
|
2293
|
-
children: [control, /* @__PURE__ */ (0,
|
|
2250
|
+
children: [control, /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
|
|
2294
2251
|
css: { marginLeft: "var(--spacing)" },
|
|
2295
2252
|
children: label
|
|
2296
2253
|
})]
|
|
2297
2254
|
});
|
|
2298
2255
|
}
|
|
2299
|
-
|
|
2300
2256
|
//#endregion
|
|
2301
2257
|
//#region src/components/virtualList.tsx
|
|
2302
|
-
function VirtualList({ virtual = true, items, children
|
|
2258
|
+
function VirtualList({ virtual = true, items, children, ...props }) {
|
|
2303
2259
|
const container = (0, react.useRef)(null);
|
|
2304
2260
|
const [, setId] = (0, react.useState)({});
|
|
2305
2261
|
const throttleScroll = (typeof virtual === "boolean" ? void 0 : virtual)?.throttleScroll ?? 16;
|
|
@@ -2319,7 +2275,7 @@ function VirtualList({ virtual = true, items, children,...props }) {
|
|
|
2319
2275
|
virtual,
|
|
2320
2276
|
throttleScroll
|
|
2321
2277
|
]);
|
|
2322
|
-
if (!virtual) return /* @__PURE__ */ (0,
|
|
2278
|
+
if (!virtual) return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
2323
2279
|
...props,
|
|
2324
2280
|
css: {
|
|
2325
2281
|
overflowY: "auto",
|
|
@@ -2333,7 +2289,7 @@ function VirtualList({ virtual = true, items, children,...props }) {
|
|
|
2333
2289
|
const to = container.current?.clientHeight ? Math.min(items.length, Math.ceil((container.current.scrollTop + container.current.clientHeight + (overscanBottom ?? overscan)) / itemHeight)) : 1;
|
|
2334
2290
|
const before = from * itemHeight;
|
|
2335
2291
|
const after = (items.length - to) * itemHeight;
|
|
2336
|
-
return /* @__PURE__ */ (0,
|
|
2292
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
2337
2293
|
...props,
|
|
2338
2294
|
onScroll: (event) => {
|
|
2339
2295
|
update();
|
|
@@ -2345,12 +2301,12 @@ function VirtualList({ virtual = true, items, children,...props }) {
|
|
|
2345
2301
|
display: "grid"
|
|
2346
2302
|
},
|
|
2347
2303
|
children: [
|
|
2348
|
-
/* @__PURE__ */ (0,
|
|
2304
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
2349
2305
|
"data-virtual-before": true,
|
|
2350
2306
|
style: { height: before }
|
|
2351
2307
|
}),
|
|
2352
2308
|
items.slice(from, to).map((item, index) => children(item, index + from)),
|
|
2353
|
-
/* @__PURE__ */ (0,
|
|
2309
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
2354
2310
|
"data-virtual-after": true,
|
|
2355
2311
|
style: { height: after }
|
|
2356
2312
|
})
|
|
@@ -2362,7 +2318,6 @@ function averageItemHeight(container) {
|
|
|
2362
2318
|
const heights = Array.from(container.children).slice(1, -1).map((child) => child.clientHeight);
|
|
2363
2319
|
return heights.reduce((a, b) => a + b, 0) / heights.length;
|
|
2364
2320
|
}
|
|
2365
|
-
|
|
2366
2321
|
//#endregion
|
|
2367
2322
|
//#region src/components/selectFilter.tsx
|
|
2368
2323
|
function toggle(set, value, singleSelect) {
|
|
@@ -2371,11 +2326,11 @@ function toggle(set, value, singleSelect) {
|
|
|
2371
2326
|
else newSet.add(value);
|
|
2372
2327
|
return newSet;
|
|
2373
2328
|
}
|
|
2374
|
-
function SelectFilter({ options: providedOptions, stringValue = asString, render = stringValue, singleSelect, hideSearchField, hideResetButton
|
|
2375
|
-
const IconButton
|
|
2376
|
-
const Checkbox
|
|
2377
|
-
const Search
|
|
2378
|
-
const Clear
|
|
2329
|
+
function SelectFilter({ options: providedOptions, stringValue = asString, render = stringValue, singleSelect, hideSearchField, hideResetButton, virtual, ...props }) {
|
|
2330
|
+
const IconButton = useTheme((t) => t.components.IconButton);
|
|
2331
|
+
const Checkbox = useTheme((t) => t.components.Checkbox);
|
|
2332
|
+
const Search = useTheme((t) => t.icons.Search);
|
|
2333
|
+
const Clear = useTheme((t) => t.icons.Clear);
|
|
2379
2334
|
const deselectAll = useTheme((t) => t.text.deselectAll);
|
|
2380
2335
|
const noResults = useTheme((t) => t.text.noResults);
|
|
2381
2336
|
const table = useTableContext();
|
|
@@ -2386,13 +2341,13 @@ function SelectFilter({ options: providedOptions, stringValue = asString, render
|
|
|
2386
2341
|
isActive(filterValue) {
|
|
2387
2342
|
return filterValue.size > 0;
|
|
2388
2343
|
},
|
|
2389
|
-
test(filterValue, value
|
|
2390
|
-
return filterValue.has(value
|
|
2344
|
+
test(filterValue, value) {
|
|
2345
|
+
return filterValue.has(value);
|
|
2391
2346
|
}
|
|
2392
2347
|
});
|
|
2393
2348
|
const options = table.useState((state) => {
|
|
2394
2349
|
if (providedOptions) return uniq(providedOptions);
|
|
2395
|
-
const column = state.activeColumns.find((column
|
|
2350
|
+
const column = state.activeColumns.find((column) => column.id === columnId);
|
|
2396
2351
|
if (!column) return [];
|
|
2397
2352
|
return orderBy(uniq(flatMap(state.items, (item) => castArray(filterBy(column.value(item.value), item.value)))));
|
|
2398
2353
|
});
|
|
@@ -2400,11 +2355,11 @@ function SelectFilter({ options: providedOptions, stringValue = asString, render
|
|
|
2400
2355
|
const filtered = options.filter((option) => !query || stringValue(option).toLowerCase().includes(query.toLowerCase()));
|
|
2401
2356
|
const delayedValue = (0, react.useMemo)(() => value, [isActive]);
|
|
2402
2357
|
const ordered = filtered.filter((option) => delayedValue.has(option)).concat(filtered.filter((option) => !delayedValue.has(option)));
|
|
2403
|
-
const Button
|
|
2358
|
+
const Button = useTheme((t) => t.components.Button);
|
|
2404
2359
|
(0, react.useEffect)(() => {
|
|
2405
2360
|
setQuery("");
|
|
2406
2361
|
}, [isActive]);
|
|
2407
|
-
return /* @__PURE__ */ (0,
|
|
2362
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
2408
2363
|
css: {
|
|
2409
2364
|
padding: "calc(var(--spacing) * 2)",
|
|
2410
2365
|
display: "grid",
|
|
@@ -2412,16 +2367,16 @@ function SelectFilter({ options: providedOptions, stringValue = asString, render
|
|
|
2412
2367
|
gap: "var(--spacing)"
|
|
2413
2368
|
},
|
|
2414
2369
|
children: [
|
|
2415
|
-
!hideSearchField && /* @__PURE__ */ (0,
|
|
2370
|
+
!hideSearchField && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(AutoFocusTextField, {
|
|
2416
2371
|
value: query,
|
|
2417
2372
|
onChange: (event) => setQuery(event.target.value),
|
|
2418
|
-
endIcon: /* @__PURE__ */ (0,
|
|
2373
|
+
endIcon: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(IconButton, {
|
|
2419
2374
|
onClick: () => setQuery(""),
|
|
2420
|
-
children: !query ? /* @__PURE__ */ (0,
|
|
2375
|
+
children: !query ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Search, {}) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Clear, {})
|
|
2421
2376
|
}),
|
|
2422
2377
|
css: { marginBottom: "var(--spacing)" }
|
|
2423
2378
|
}),
|
|
2424
|
-
!hideResetButton && /* @__PURE__ */ (0,
|
|
2379
|
+
!hideResetButton && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Button, {
|
|
2425
2380
|
disabled: value.size === 0,
|
|
2426
2381
|
onClick: () => onChange(/* @__PURE__ */ new Set()),
|
|
2427
2382
|
variant: "outlined",
|
|
@@ -2433,8 +2388,9 @@ function SelectFilter({ options: providedOptions, stringValue = asString, render
|
|
|
2433
2388
|
},
|
|
2434
2389
|
children: deselectAll
|
|
2435
2390
|
}),
|
|
2436
|
-
/* @__PURE__ */ (0,
|
|
2391
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(VirtualList, {
|
|
2437
2392
|
items: ordered,
|
|
2393
|
+
virtual,
|
|
2438
2394
|
css: {
|
|
2439
2395
|
width: "20em",
|
|
2440
2396
|
maxWidth: "100%",
|
|
@@ -2443,22 +2399,21 @@ function SelectFilter({ options: providedOptions, stringValue = asString, render
|
|
|
2443
2399
|
display: "grid",
|
|
2444
2400
|
gridTemplateColumns: "minmax(0, 1fr)"
|
|
2445
2401
|
},
|
|
2446
|
-
children: (option, index) => /* @__PURE__ */ (0,
|
|
2447
|
-
control: /* @__PURE__ */ (0,
|
|
2402
|
+
children: (option, index) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FormControlLabel, {
|
|
2403
|
+
control: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Checkbox, {
|
|
2448
2404
|
checked: value.has(option),
|
|
2449
2405
|
onChange: () => onChange(toggle(value, option, singleSelect))
|
|
2450
2406
|
}),
|
|
2451
2407
|
label: render(option)
|
|
2452
2408
|
}, index)
|
|
2453
2409
|
}),
|
|
2454
|
-
ordered.length === 0 && /* @__PURE__ */ (0,
|
|
2410
|
+
ordered.length === 0 && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
|
|
2455
2411
|
css: { textAlign: "center" },
|
|
2456
2412
|
children: noResults
|
|
2457
2413
|
})
|
|
2458
2414
|
]
|
|
2459
2415
|
});
|
|
2460
2416
|
}
|
|
2461
|
-
|
|
2462
2417
|
//#endregion
|
|
2463
2418
|
//#region src/hooks/useTableRef.ts
|
|
2464
2419
|
function useTableRef(table, ref) {
|
|
@@ -2497,7 +2452,6 @@ function useTableRef(table, ref) {
|
|
|
2497
2452
|
}
|
|
2498
2453
|
}), [table]);
|
|
2499
2454
|
}
|
|
2500
|
-
|
|
2501
2455
|
//#endregion
|
|
2502
2456
|
//#region src/misc/queue.ts
|
|
2503
2457
|
var Queue = class {
|
|
@@ -2531,7 +2485,6 @@ var Queue = class {
|
|
|
2531
2485
|
this.isRunning = false;
|
|
2532
2486
|
}
|
|
2533
2487
|
};
|
|
2534
|
-
|
|
2535
2488
|
//#endregion
|
|
2536
2489
|
//#region src/internalState/tableStateStorage.ts
|
|
2537
2490
|
const KEYS = [
|
|
@@ -2545,22 +2498,22 @@ const KEYS = [
|
|
|
2545
2498
|
];
|
|
2546
2499
|
const storageName = (id) => `schummar-table_state-v1_${id}`;
|
|
2547
2500
|
function stringify(value) {
|
|
2548
|
-
function prepare(value
|
|
2549
|
-
if (value
|
|
2550
|
-
if (value
|
|
2551
|
-
if (value
|
|
2552
|
-
if (Array.isArray(value
|
|
2553
|
-
if (value
|
|
2554
|
-
return value
|
|
2501
|
+
function prepare(value) {
|
|
2502
|
+
if (value instanceof Date) return { __date: value.toJSON() };
|
|
2503
|
+
if (value instanceof Set) return { __set: Array.from(value).map(prepare) };
|
|
2504
|
+
if (value instanceof Map) return { __map: Array.from(value.entries()).map((entry) => entry.map(prepare)) };
|
|
2505
|
+
if (Array.isArray(value)) return value.map(prepare);
|
|
2506
|
+
if (value instanceof Object) return Object.fromEntries(Object.entries(value).map(([k, v]) => [k, prepare(v)]));
|
|
2507
|
+
return value;
|
|
2555
2508
|
}
|
|
2556
2509
|
return JSON.stringify(prepare(value));
|
|
2557
2510
|
}
|
|
2558
2511
|
function parse(value) {
|
|
2559
|
-
return JSON.parse(value, (_key, value
|
|
2560
|
-
if (value
|
|
2561
|
-
if (value
|
|
2562
|
-
if (value
|
|
2563
|
-
return value
|
|
2512
|
+
return JSON.parse(value, (_key, value) => {
|
|
2513
|
+
if (value instanceof Object && "__date" in value) return new Date(value.__date);
|
|
2514
|
+
if (value instanceof Object && "__set" in value) return new Set(value.__set);
|
|
2515
|
+
if (value instanceof Object && "__map" in value) return new Map(value.__map);
|
|
2516
|
+
return value;
|
|
2564
2517
|
});
|
|
2565
2518
|
}
|
|
2566
2519
|
function useTableStateStorage(table) {
|
|
@@ -2581,23 +2534,25 @@ function useTableStateStorage(table) {
|
|
|
2581
2534
|
const data = parse(json);
|
|
2582
2535
|
table.getState().props.debug?.("load", json, data);
|
|
2583
2536
|
function applyUpdate(state, key) {
|
|
2584
|
-
if ((!include || include.includes(key)) && !exclude?.includes(key) && key in data)
|
|
2585
|
-
|
|
2586
|
-
|
|
2587
|
-
|
|
2588
|
-
|
|
2537
|
+
if ((!include || include.includes(key)) && !exclude?.includes(key) && key in data) {
|
|
2538
|
+
if (key === "filterValues") for (const [id, value] of data[key]) {
|
|
2539
|
+
const filter = state.filters.get(id);
|
|
2540
|
+
if (filter && (filter.persist ?? filter.value === void 0)) {
|
|
2541
|
+
state.filterValues.set(id, value);
|
|
2542
|
+
state.filters.get(id)?.onChange?.(value);
|
|
2543
|
+
}
|
|
2589
2544
|
}
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
|
|
2594
|
-
|
|
2545
|
+
else {
|
|
2546
|
+
if (key === "expanded" || key === "hiddenColumns" || key === "selection" || key === "sort") {
|
|
2547
|
+
if (state.props[key] !== void 0) return;
|
|
2548
|
+
state.props[`on${key.slice(0, 1).toUpperCase() + key.slice(1)}Change`]?.(data[key]);
|
|
2549
|
+
}
|
|
2550
|
+
state[key] = data[key];
|
|
2595
2551
|
}
|
|
2596
|
-
state[key] = data[key];
|
|
2597
2552
|
}
|
|
2598
2553
|
}
|
|
2599
2554
|
table.update((state) => {
|
|
2600
|
-
for (const key of KEYS.filter((key
|
|
2555
|
+
for (const key of KEYS.filter((key) => key !== "filterValues")) applyUpdate(state, key);
|
|
2601
2556
|
});
|
|
2602
2557
|
await new Promise((resolve) => {
|
|
2603
2558
|
setTimeout(resolve);
|
|
@@ -2619,12 +2574,14 @@ function useTableStateStorage(table) {
|
|
|
2619
2574
|
if (!state.props.persist) return;
|
|
2620
2575
|
const { storage, id, include, exclude } = state.props.persist;
|
|
2621
2576
|
const data = {};
|
|
2622
|
-
for (const key of KEYS) if ((!include || include.includes(key)) && !exclude?.includes(key))
|
|
2623
|
-
|
|
2624
|
-
|
|
2625
|
-
|
|
2626
|
-
|
|
2627
|
-
|
|
2577
|
+
for (const key of KEYS) if ((!include || include.includes(key)) && !exclude?.includes(key)) {
|
|
2578
|
+
if (key === "filterValues") {
|
|
2579
|
+
data[key] = /* @__PURE__ */ new Map();
|
|
2580
|
+
for (const [id, value] of state.filterValues) if (state.filters.get(id)?.persist ?? state.filters.get(id)?.value === void 0) data.filterValues.set(id, value);
|
|
2581
|
+
} else {
|
|
2582
|
+
if ((key === "expanded" || key === "hiddenColumns" || key === "selection" || key === "sort") && state.props[key] !== void 0) continue;
|
|
2583
|
+
data[key] = state[key];
|
|
2584
|
+
}
|
|
2628
2585
|
}
|
|
2629
2586
|
return {
|
|
2630
2587
|
storage,
|
|
@@ -2652,22 +2609,21 @@ function useTableStateStorage(table) {
|
|
|
2652
2609
|
}
|
|
2653
2610
|
return [isHydrated, clear];
|
|
2654
2611
|
}
|
|
2655
|
-
|
|
2656
2612
|
//#endregion
|
|
2657
2613
|
//#region src/internalState/calcItems.ts
|
|
2658
2614
|
function calcItems(state) {
|
|
2659
|
-
(0, react.useEffect)(() => state.addReaction((state
|
|
2660
|
-
state
|
|
2661
|
-
state
|
|
2662
|
-
state
|
|
2663
|
-
state
|
|
2664
|
-
state
|
|
2665
|
-
state
|
|
2666
|
-
state
|
|
2667
|
-
state
|
|
2668
|
-
state
|
|
2669
|
-
state
|
|
2670
|
-
state
|
|
2615
|
+
(0, react.useEffect)(() => state.addReaction((state) => [
|
|
2616
|
+
state.props.items,
|
|
2617
|
+
state.props.id,
|
|
2618
|
+
state.props.parentId,
|
|
2619
|
+
state.props.revealFiltered,
|
|
2620
|
+
state.props.externalSort,
|
|
2621
|
+
state.props.locale,
|
|
2622
|
+
state.sort,
|
|
2623
|
+
state.filters,
|
|
2624
|
+
state.filterValues,
|
|
2625
|
+
state.activeColumns,
|
|
2626
|
+
state.expanded
|
|
2671
2627
|
], ([items = [], id, parentId, revealFiltered, externalSort, locale, sort, filters, filterValues, activeColumns], draft) => {
|
|
2672
2628
|
const tableItems = items.map((item) => ({
|
|
2673
2629
|
id: id(item),
|
|
@@ -2678,14 +2634,14 @@ function calcItems(state) {
|
|
|
2678
2634
|
let sorted;
|
|
2679
2635
|
if (sort.length === 0 || externalSort) sorted = tableItems;
|
|
2680
2636
|
else {
|
|
2681
|
-
const selectors = flatMap(sort, (sort
|
|
2682
|
-
const column = activeColumns.find((column
|
|
2637
|
+
const selectors = flatMap(sort, (sort) => {
|
|
2638
|
+
const column = activeColumns.find((column) => column.id === sort.columnId);
|
|
2683
2639
|
if (!column) return [];
|
|
2684
2640
|
return column.sortBy.map((sortBy) => ({
|
|
2685
2641
|
selector: (item) => sortBy(column.value(item), item),
|
|
2686
|
-
direction: sort
|
|
2687
|
-
locale: sort
|
|
2688
|
-
options: sort
|
|
2642
|
+
direction: sort.direction,
|
|
2643
|
+
locale: sort.locale ?? locale,
|
|
2644
|
+
options: sort.options
|
|
2689
2645
|
}));
|
|
2690
2646
|
}).filter(Boolean);
|
|
2691
2647
|
sorted = orderBy(tableItems, selectors.map((x) => (item) => x.selector(item.value)), selectors.map((x) => x.direction), selectors.map((x) => x.locale), selectors.map((x) => x.options));
|
|
@@ -2695,8 +2651,8 @@ function calcItems(state) {
|
|
|
2695
2651
|
for (const item of sorted) (item.parentId !== void 0 && item.parentId !== null ? lookup.get(item.parentId) : void 0)?.children.push(item);
|
|
2696
2652
|
const allItems = new Array();
|
|
2697
2653
|
const allItemsById = /* @__PURE__ */ new Map();
|
|
2698
|
-
const traverse = (items
|
|
2699
|
-
for (const item of items
|
|
2654
|
+
const traverse = (items) => {
|
|
2655
|
+
for (const item of items) {
|
|
2700
2656
|
allItems.push(item);
|
|
2701
2657
|
allItemsById.set(item.id, item);
|
|
2702
2658
|
traverse(item.children);
|
|
@@ -2713,12 +2669,13 @@ function calcItems(state) {
|
|
|
2713
2669
|
if (!filter || filter.external) return true;
|
|
2714
2670
|
const filterValue = filterValues.get(column.id);
|
|
2715
2671
|
if (filterValue === void 0 || !filter.isActive(filterValue)) return true;
|
|
2716
|
-
|
|
2672
|
+
const value = (filter.filterBy ?? ((x) => x))(column.value(item.value), item.value);
|
|
2673
|
+
return castArray(value).some((value) => filter.test(filterValue, value));
|
|
2717
2674
|
});
|
|
2718
2675
|
if (isActive && item.parentId !== void 0 && item.parentId !== null) {
|
|
2719
2676
|
activeSet.add(item.parentId);
|
|
2720
|
-
if (revealFiltered && Array.from(filters.entries()).some(([id
|
|
2721
|
-
const filterValue = filterValues.get(id
|
|
2677
|
+
if (revealFiltered && Array.from(filters.entries()).some(([id, filter]) => {
|
|
2678
|
+
const filterValue = filterValues.get(id);
|
|
2722
2679
|
return !!filter && filterValue !== void 0 && filter.isActive(filterValue);
|
|
2723
2680
|
})) {
|
|
2724
2681
|
expandedChanged ||= !draft.expanded.has(item.parentId);
|
|
@@ -2737,23 +2694,20 @@ function calcItems(state) {
|
|
|
2737
2694
|
});
|
|
2738
2695
|
}, { runNow: true }), [state]);
|
|
2739
2696
|
}
|
|
2740
|
-
|
|
2741
2697
|
//#endregion
|
|
2742
2698
|
//#region src/exporters/serializer.ts
|
|
2743
2699
|
function defaultSerializer(x) {
|
|
2744
2700
|
if (x instanceof Date || typeof x === "number" || typeof x === "string") return x;
|
|
2745
2701
|
return JSON.stringify(x) ?? "";
|
|
2746
2702
|
}
|
|
2747
|
-
|
|
2748
2703
|
//#endregion
|
|
2749
2704
|
//#region src/misc/overrides.ts
|
|
2750
|
-
function overrides(first, ...overrides
|
|
2751
|
-
return overrides
|
|
2705
|
+
function overrides(first, ...overrides) {
|
|
2706
|
+
return overrides.reduce((result, source) => {
|
|
2752
2707
|
for (const [key, value] of Object.entries(source ?? {})) if (value !== void 0) result[key] = value;
|
|
2753
2708
|
return result;
|
|
2754
2709
|
}, { ...first });
|
|
2755
2710
|
}
|
|
2756
|
-
|
|
2757
2711
|
//#endregion
|
|
2758
2712
|
//#region src/internalState/calcProps.ts
|
|
2759
2713
|
const defaultProps = {
|
|
@@ -2797,28 +2751,28 @@ function calc(props, cache) {
|
|
|
2797
2751
|
});
|
|
2798
2752
|
const globalDefaults = props.defaultColumnProps;
|
|
2799
2753
|
const mapColumn = ({ id: _id, header, exportHeader, footer, value, renderCell, exportCell, sortBy, disableSort, hidden, classes, styles, filter, width, displaySize }, index) => {
|
|
2800
|
-
const id
|
|
2801
|
-
const cacheKey = typeof id
|
|
2802
|
-
const defaults
|
|
2754
|
+
const id = _id ?? index;
|
|
2755
|
+
const cacheKey = typeof id === "string" ? `s${id}` : `n${id}`;
|
|
2756
|
+
const defaults = {
|
|
2803
2757
|
...globalDefaults,
|
|
2804
|
-
...columnProps?.(id
|
|
2758
|
+
...columnProps?.(id)
|
|
2805
2759
|
};
|
|
2806
2760
|
return {
|
|
2807
|
-
id
|
|
2808
|
-
header: header ?? defaults
|
|
2809
|
-
exportHeader: exportHeader ?? defaults
|
|
2810
|
-
footer: footer ?? defaults
|
|
2761
|
+
id,
|
|
2762
|
+
header: header ?? defaults?.header ?? null,
|
|
2763
|
+
exportHeader: exportHeader ?? defaults?.exportHeader ?? id,
|
|
2764
|
+
footer: footer ?? defaults?.footer ?? null,
|
|
2811
2765
|
value: cache(`columns.${cacheKey}.value`, value),
|
|
2812
|
-
renderCell: cache(`columns.${cacheKey}.renderCell`, renderCell ?? defaults
|
|
2813
|
-
exportCell: exportCell ?? defaults
|
|
2814
|
-
sortBy: (sortBy ?? defaults
|
|
2815
|
-
disableSort: disableSort ?? defaults
|
|
2816
|
-
hidden: hidden ?? defaults
|
|
2817
|
-
classes: classes ?? defaults
|
|
2818
|
-
styles: styles ?? defaults
|
|
2819
|
-
filter: filter ?? defaults
|
|
2820
|
-
width: width ?? defaults
|
|
2821
|
-
displaySize: (displaySize ?? defaults
|
|
2766
|
+
renderCell: cache(`columns.${cacheKey}.renderCell`, renderCell ?? defaults?.renderCell ?? asString),
|
|
2767
|
+
exportCell: exportCell ?? defaults?.exportCell ?? defaultSerializer,
|
|
2768
|
+
sortBy: (sortBy ?? defaults?.sortBy ?? [(v) => typeof v === "number" || v instanceof Date ? v : v === null || v === void 0 ? "" : String(v)]).map((function_, i) => cache(`columns.${cacheKey}.sortBy.${i}`, function_)),
|
|
2769
|
+
disableSort: disableSort ?? defaults?.disableSort ?? props.disableSort ?? false,
|
|
2770
|
+
hidden: hidden ?? defaults?.hidden,
|
|
2771
|
+
classes: classes ?? defaults?.classes,
|
|
2772
|
+
styles: styles ?? defaults?.styles,
|
|
2773
|
+
filter: filter ?? defaults?.filter,
|
|
2774
|
+
width: width ?? defaults?.width,
|
|
2775
|
+
displaySize: (displaySize ?? defaults.displaySize) !== void 0 ? castArray(displaySize ?? defaults.displaySize) : void 0
|
|
2822
2776
|
};
|
|
2823
2777
|
};
|
|
2824
2778
|
const columns = inputColumns?.filter((x) => !!x).map(mapColumn);
|
|
@@ -2826,7 +2780,7 @@ function calc(props, cache) {
|
|
|
2826
2780
|
const wrapCell = props.wrapCell && cache("wrapCell", props.wrapCell);
|
|
2827
2781
|
const rowAction = props.rowAction instanceof Function || Array.isArray(props.rowAction) ? cache("rowAction", props.rowAction) : props.rowAction;
|
|
2828
2782
|
const rowDetails = props.rowDetails instanceof Function || Array.isArray(props.rowDetails) ? cache("rowDetails", props.rowDetails) : props.rowDetails;
|
|
2829
|
-
const displaySizeOverrides = props.displaySizeOverrides && Object.fromEntries(Object.entries(props.displaySizeOverrides ?? {}).map(([size, overrides
|
|
2783
|
+
const displaySizeOverrides = props.displaySizeOverrides && Object.fromEntries(Object.entries(props.displaySizeOverrides ?? {}).map(([size, overrides]) => [size, overrides && calc(overrides, cache)]));
|
|
2830
2784
|
return {
|
|
2831
2785
|
...props,
|
|
2832
2786
|
id,
|
|
@@ -2849,15 +2803,14 @@ function calc(props, cache) {
|
|
|
2849
2803
|
displaySizeOverrides
|
|
2850
2804
|
};
|
|
2851
2805
|
}
|
|
2852
|
-
|
|
2853
2806
|
//#endregion
|
|
2854
2807
|
//#region src/internalState/cleanupState.ts
|
|
2855
2808
|
function cleanupState(state) {
|
|
2856
|
-
(0, react.useEffect)(() => state.addReaction((state
|
|
2857
|
-
state
|
|
2858
|
-
state
|
|
2859
|
-
state
|
|
2860
|
-
state
|
|
2809
|
+
(0, react.useEffect)(() => state.addReaction((state) => [
|
|
2810
|
+
state.props.columns,
|
|
2811
|
+
state.itemsById,
|
|
2812
|
+
state.activeItemsById,
|
|
2813
|
+
state.activeColumns
|
|
2861
2814
|
], ([columns, itemsById, activeItemsById, activeColumns], draft) => {
|
|
2862
2815
|
const columnIds = new Set(columns.map((column) => column.id));
|
|
2863
2816
|
const activeColumnIds = new Set(activeColumns.map((column) => column.id));
|
|
@@ -2891,25 +2844,23 @@ function cleanupState(state) {
|
|
|
2891
2844
|
}
|
|
2892
2845
|
}, { runNow: true }), [state]);
|
|
2893
2846
|
}
|
|
2894
|
-
|
|
2895
2847
|
//#endregion
|
|
2896
2848
|
//#region src/internalState/filterColumns.ts
|
|
2897
2849
|
function filterColumns(state) {
|
|
2898
|
-
(0, react.useEffect)(() => state.addReaction((state
|
|
2899
|
-
state
|
|
2900
|
-
state
|
|
2901
|
-
state
|
|
2902
|
-
state
|
|
2850
|
+
(0, react.useEffect)(() => state.addReaction((state) => [
|
|
2851
|
+
state.props.columns,
|
|
2852
|
+
state.hiddenColumns,
|
|
2853
|
+
state.columnOrder,
|
|
2854
|
+
state.displaySize
|
|
2903
2855
|
], ([columns, hiddenColumns, columnOrder, displaySize], draft) => {
|
|
2904
2856
|
draft.activeColumns = orderBy(columns.filter((column) => !(column.hidden ?? hiddenColumns.has(column.id))), [(column) => columnOrder.indexOf(column.id)]);
|
|
2905
2857
|
draft.visibleColumns = draft.activeColumns.filter((column) => displaySize === void 0 || column.displaySize === void 0 || column.displaySize.includes(displaySize));
|
|
2906
2858
|
}, { runNow: true }), [state]);
|
|
2907
|
-
(0, react.useEffect)(() => state.addReaction((state
|
|
2859
|
+
(0, react.useEffect)(() => state.addReaction((state) => new Set(state.visibleColumns.map((column) => column.id)), (_, draft) => {
|
|
2908
2860
|
draft.rowHeights.clear();
|
|
2909
2861
|
draft.rowHeightsKey = Math.random();
|
|
2910
2862
|
}, { runNow: false }), [state]);
|
|
2911
2863
|
}
|
|
2912
|
-
|
|
2913
2864
|
//#endregion
|
|
2914
2865
|
//#region src/internalState/normalizeExpanded.ts
|
|
2915
2866
|
function normalizeExpanded(table) {
|
|
@@ -2943,7 +2894,6 @@ function normalizeExpanded(table) {
|
|
|
2943
2894
|
if (hasChanged) state.props.onExpandedChange?.(new Set(expanded));
|
|
2944
2895
|
}, { runNow: true }), [table]);
|
|
2945
2896
|
}
|
|
2946
|
-
|
|
2947
2897
|
//#endregion
|
|
2948
2898
|
//#region src/internalState/syncSelections.ts
|
|
2949
2899
|
function syncSelections(table) {
|
|
@@ -2963,7 +2913,6 @@ function syncSelections(table) {
|
|
|
2963
2913
|
}
|
|
2964
2914
|
}, { runNow: true }), [table]);
|
|
2965
2915
|
}
|
|
2966
|
-
|
|
2967
2916
|
//#endregion
|
|
2968
2917
|
//#region src/internalState/watchDisplaySize.ts
|
|
2969
2918
|
function watchDisplaySize(state) {
|
|
@@ -2977,22 +2926,21 @@ function watchDisplaySize(state) {
|
|
|
2977
2926
|
document.defaultView?.addEventListener("resize", onResize);
|
|
2978
2927
|
return () => document.defaultView?.removeEventListener("resize", onResize);
|
|
2979
2928
|
}, [state]);
|
|
2980
|
-
(0, react.useEffect)(() => state.addReaction((state
|
|
2981
|
-
displaySizePx: state
|
|
2982
|
-
displaySize: state
|
|
2929
|
+
(0, react.useEffect)(() => state.addReaction((state) => ({
|
|
2930
|
+
displaySizePx: state.displaySizePx,
|
|
2931
|
+
displaySize: state.props.displaySize
|
|
2983
2932
|
}), ({ displaySizePx, displaySize }, draft) => {
|
|
2984
2933
|
if (displaySizePx === void 0) return;
|
|
2985
2934
|
if (typeof displaySize === "object") draft.displaySize = Object.entries(displaySize).find(([, maxWidth]) => maxWidth !== void 0 && maxWidth >= displaySizePx)?.[0];
|
|
2986
2935
|
else draft.displaySize = displaySize;
|
|
2987
2936
|
}), [state]);
|
|
2988
|
-
(0, react.useEffect)(() => state.addReaction((state
|
|
2989
|
-
props: state
|
|
2990
|
-
displaySize: state
|
|
2937
|
+
(0, react.useEffect)(() => state.addReaction((state) => ({
|
|
2938
|
+
props: state.normalizedProps,
|
|
2939
|
+
displaySize: state.displaySize
|
|
2991
2940
|
}), ({ props, displaySize }, draft) => {
|
|
2992
2941
|
draft.props = (0, immer.castDraft)(overrides(props, displaySize ? props.displaySizeOverrides?.[displaySize] : void 0));
|
|
2993
2942
|
}), [state]);
|
|
2994
2943
|
}
|
|
2995
|
-
|
|
2996
2944
|
//#endregion
|
|
2997
2945
|
//#region src/internalState/useTableState.ts
|
|
2998
2946
|
function useTableState(_props) {
|
|
@@ -3038,30 +2986,29 @@ function useTableState(_props) {
|
|
|
3038
2986
|
cleanupState(state);
|
|
3039
2987
|
watchDisplaySize(state);
|
|
3040
2988
|
(0, react.useEffect)(() => {
|
|
3041
|
-
state.update((state
|
|
3042
|
-
state
|
|
3043
|
-
if (props.sort) state
|
|
3044
|
-
if (props.selection) state
|
|
3045
|
-
if (props.expanded) state
|
|
3046
|
-
if (props.hiddenColumns) state
|
|
3047
|
-
for (const column of props.columns) if (!state
|
|
2989
|
+
state.update((state) => {
|
|
2990
|
+
state.normalizedProps = (0, immer.castDraft)(props);
|
|
2991
|
+
if (props.sort) state.sort = props.sort;
|
|
2992
|
+
if (props.selection) state.selection = props.selection;
|
|
2993
|
+
if (props.expanded) state.expanded = props.expanded;
|
|
2994
|
+
if (props.hiddenColumns) state.hiddenColumns = props.hiddenColumns;
|
|
2995
|
+
for (const column of props.columns) if (!state.columnOrder.includes(column.id)) {
|
|
3048
2996
|
const index = props.columns.indexOf(column);
|
|
3049
|
-
state
|
|
2997
|
+
state.columnOrder.splice(index, 0, column.id);
|
|
3050
2998
|
}
|
|
3051
2999
|
});
|
|
3052
3000
|
}, [state, props]);
|
|
3053
3001
|
return [state, reset];
|
|
3054
3002
|
}
|
|
3055
|
-
|
|
3056
3003
|
//#endregion
|
|
3057
3004
|
//#region src/components/clearFiltersButton.tsx
|
|
3058
3005
|
function ClearFiltersButton() {
|
|
3059
|
-
const Button
|
|
3006
|
+
const Button = useTheme((t) => t.components.Button);
|
|
3060
3007
|
const textClearFilters = useTheme((t) => t.text.clearFilters);
|
|
3061
3008
|
const table = useTableContext();
|
|
3062
|
-
return /* @__PURE__ */ (0,
|
|
3009
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
3063
3010
|
css: require_tableSettings.defaultClasses.clearFiltersButton,
|
|
3064
|
-
children: /* @__PURE__ */ (0,
|
|
3011
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Button, {
|
|
3065
3012
|
variant: "outlined",
|
|
3066
3013
|
onClick: () => {
|
|
3067
3014
|
table.update((state) => {
|
|
@@ -3075,7 +3022,6 @@ function ClearFiltersButton() {
|
|
|
3075
3022
|
})
|
|
3076
3023
|
});
|
|
3077
3024
|
}
|
|
3078
|
-
|
|
3079
3025
|
//#endregion
|
|
3080
3026
|
//#region src/components/columnFooter.tsx
|
|
3081
3027
|
function ColumnFooter() {
|
|
@@ -3090,7 +3036,7 @@ function ColumnFooter() {
|
|
|
3090
3036
|
const content = table.useState((state) => {
|
|
3091
3037
|
return state.activeColumns.find((column) => column.id === columnId)?.footer;
|
|
3092
3038
|
});
|
|
3093
|
-
return /* @__PURE__ */ (0,
|
|
3039
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
3094
3040
|
className: cx(classes, columnClasses),
|
|
3095
3041
|
css: [
|
|
3096
3042
|
require_tableSettings.defaultClasses.footerCell,
|
|
@@ -3103,7 +3049,6 @@ function ColumnFooter() {
|
|
|
3103
3049
|
children: content
|
|
3104
3050
|
});
|
|
3105
3051
|
}
|
|
3106
|
-
|
|
3107
3052
|
//#endregion
|
|
3108
3053
|
//#region src/components/resizeHandle.tsx
|
|
3109
3054
|
function ResizeHandle() {
|
|
@@ -3137,7 +3082,7 @@ function ResizeHandle() {
|
|
|
3137
3082
|
});
|
|
3138
3083
|
}
|
|
3139
3084
|
if (!enabled) return null;
|
|
3140
|
-
return /* @__PURE__ */ (0,
|
|
3085
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ResizeHandleView, {
|
|
3141
3086
|
enabled,
|
|
3142
3087
|
onPointerDown: enabled ? onPointerDown : void 0,
|
|
3143
3088
|
onPointerMove: enabled ? onPointerMove : void 0,
|
|
@@ -3145,11 +3090,11 @@ function ResizeHandle() {
|
|
|
3145
3090
|
onDoubleClick: enabled ? onDoubleClick : void 0
|
|
3146
3091
|
});
|
|
3147
3092
|
}
|
|
3148
|
-
function ResizeHandleView({ enabled
|
|
3149
|
-
const className
|
|
3093
|
+
function ResizeHandleView({ enabled, ...props }) {
|
|
3094
|
+
const className = useTheme((theme) => theme.classes?.columnDivider);
|
|
3150
3095
|
const styles = useTheme((theme) => theme.styles?.columnDivider);
|
|
3151
|
-
return /* @__PURE__ */ (0,
|
|
3152
|
-
className
|
|
3096
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
3097
|
+
className,
|
|
3153
3098
|
css: [{
|
|
3154
3099
|
alignSelf: "stretch",
|
|
3155
3100
|
padding: "0 5px",
|
|
@@ -3168,24 +3113,23 @@ function ResizeHandleView({ enabled,...props }) {
|
|
|
3168
3113
|
...props
|
|
3169
3114
|
});
|
|
3170
3115
|
}
|
|
3171
|
-
|
|
3172
3116
|
//#endregion
|
|
3173
3117
|
//#region src/components/sortComponent.tsx
|
|
3174
3118
|
function SortComponent({ children }) {
|
|
3175
3119
|
const table = useTableContext();
|
|
3176
3120
|
const columnId = useColumnContext();
|
|
3177
|
-
const Badge
|
|
3178
|
-
const ArrowUpward
|
|
3121
|
+
const Badge = useTheme((t) => t.components.Badge);
|
|
3122
|
+
const ArrowUpward = useTheme((t) => t.icons.ArrowUpward);
|
|
3179
3123
|
const { direction, index, sortDisabled } = table.useState((state) => {
|
|
3180
|
-
const index
|
|
3181
|
-
const column = state.activeColumns.find((column
|
|
3124
|
+
const index = state.sort.findIndex((s) => s.columnId === columnId) ?? -1;
|
|
3125
|
+
const column = state.activeColumns.find((column) => column.id === columnId);
|
|
3182
3126
|
return {
|
|
3183
|
-
direction: state.sort[index
|
|
3184
|
-
index: index
|
|
3127
|
+
direction: state.sort[index]?.direction,
|
|
3128
|
+
index: index >= 0 && state.sort.length > 1 ? index + 1 : void 0,
|
|
3185
3129
|
sortDisabled: column?.disableSort ?? state.props.disableSort
|
|
3186
3130
|
};
|
|
3187
3131
|
});
|
|
3188
|
-
function toggle
|
|
3132
|
+
function toggle(event, off) {
|
|
3189
3133
|
if (sortDisabled) return;
|
|
3190
3134
|
const { props: { sort: controlledSort, onSortChange } } = table.getState();
|
|
3191
3135
|
const newDirection = direction === "asc" ? "desc" : "asc";
|
|
@@ -3201,7 +3145,7 @@ function SortComponent({ children }) {
|
|
|
3201
3145
|
event.preventDefault();
|
|
3202
3146
|
return false;
|
|
3203
3147
|
}
|
|
3204
|
-
return /* @__PURE__ */ (0,
|
|
3148
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
3205
3149
|
css: {
|
|
3206
3150
|
userSelect: "none",
|
|
3207
3151
|
display: "grid",
|
|
@@ -3213,11 +3157,11 @@ function SortComponent({ children }) {
|
|
|
3213
3157
|
textOverflow: "ellipsis"
|
|
3214
3158
|
}
|
|
3215
3159
|
},
|
|
3216
|
-
onClick: (event) => toggle
|
|
3217
|
-
onContextMenu: (event) => toggle
|
|
3218
|
-
children: [/* @__PURE__ */ (0,
|
|
3160
|
+
onClick: (event) => toggle(event),
|
|
3161
|
+
onContextMenu: (event) => toggle(event, true),
|
|
3162
|
+
children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { children }), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Badge, {
|
|
3219
3163
|
badgeContent: sortDisabled ? 0 : index,
|
|
3220
|
-
children: /* @__PURE__ */ (0,
|
|
3164
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
|
|
3221
3165
|
css: [
|
|
3222
3166
|
{
|
|
3223
3167
|
transition: "all 300ms",
|
|
@@ -3226,12 +3170,11 @@ function SortComponent({ children }) {
|
|
|
3226
3170
|
!direction && { opacity: 0 },
|
|
3227
3171
|
direction === "desc" && { transform: "rotate3d(0, 0, 1, 180deg)" }
|
|
3228
3172
|
],
|
|
3229
|
-
children: /* @__PURE__ */ (0,
|
|
3173
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ArrowUpward, {})
|
|
3230
3174
|
})
|
|
3231
3175
|
})]
|
|
3232
3176
|
});
|
|
3233
3177
|
}
|
|
3234
|
-
|
|
3235
3178
|
//#endregion
|
|
3236
3179
|
//#region src/components/columnHeader.tsx
|
|
3237
3180
|
const ColumnHeaderContext = new require_tableSettings.StoreScope({ items: /* @__PURE__ */ new Map() });
|
|
@@ -3245,7 +3188,7 @@ function ColumnHeader({ index }) {
|
|
|
3245
3188
|
const classes = useTheme((theme) => theme.classes?.headerCell);
|
|
3246
3189
|
const styles = useTheme((theme) => theme.styles?.headerCell);
|
|
3247
3190
|
const { header, columnClasses, columnStyles } = table.useState((state) => {
|
|
3248
|
-
const column = state.activeColumns.find((column
|
|
3191
|
+
const column = state.activeColumns.find((column) => column.id === columnId);
|
|
3249
3192
|
return {
|
|
3250
3193
|
header: column?.header,
|
|
3251
3194
|
columnClasses: column?.classes?.headerCell,
|
|
@@ -3253,8 +3196,8 @@ function ColumnHeader({ index }) {
|
|
|
3253
3196
|
};
|
|
3254
3197
|
});
|
|
3255
3198
|
const store = ColumnHeaderContext.useStore();
|
|
3256
|
-
const draggingStart = (0, react.useRef)();
|
|
3257
|
-
const clone = (0, react.useRef)();
|
|
3199
|
+
const draggingStart = (0, react.useRef)(void 0);
|
|
3200
|
+
const clone = (0, react.useRef)(void 0);
|
|
3258
3201
|
(0, react.useEffect)(() => {
|
|
3259
3202
|
const div = ref.current;
|
|
3260
3203
|
if (!div) return;
|
|
@@ -3313,24 +3256,24 @@ function ColumnHeader({ index }) {
|
|
|
3313
3256
|
div.style.color = "rgba(0, 0, 0, 0.2)";
|
|
3314
3257
|
}
|
|
3315
3258
|
clone.current.style.left = `${draggingStart.current.bounds.left + event.clientX - draggingStart.current.mouseX}px`;
|
|
3316
|
-
const index
|
|
3259
|
+
const index = state.columnOrder.indexOf(columnId);
|
|
3317
3260
|
const targetIndex = calcTargetIndex(div.offsetLeft + event.clientX - draggingStart.current.mouseX);
|
|
3318
|
-
const columns = table.getState().columnOrder.map((id, index
|
|
3261
|
+
const columns = table.getState().columnOrder.map((id, index) => ({
|
|
3319
3262
|
id,
|
|
3320
|
-
index
|
|
3263
|
+
index,
|
|
3321
3264
|
width: store.getState().items.get(id)?.offsetWidth ?? 0
|
|
3322
3265
|
}));
|
|
3323
3266
|
state.columnOrder.forEach((id, i) => {
|
|
3324
3267
|
let offset = 0;
|
|
3325
|
-
if (i === index
|
|
3326
|
-
if (targetIndex > index
|
|
3327
|
-
else if (targetIndex < index
|
|
3328
|
-
} else if (i >= targetIndex && i < index
|
|
3329
|
-
else if (i > index
|
|
3268
|
+
if (i === index) {
|
|
3269
|
+
if (targetIndex > index) offset = columns.slice(index + 1, targetIndex + 1).reduce((sum, col) => sum + col.width, 0);
|
|
3270
|
+
else if (targetIndex < index) offset = -columns.slice(targetIndex, index).reduce((sum, col) => sum + col.width, 0);
|
|
3271
|
+
} else if (i >= targetIndex && i < index) offset = div.offsetWidth;
|
|
3272
|
+
else if (i > index && i <= targetIndex) offset = -div.offsetWidth;
|
|
3330
3273
|
state.columnStyleOverride.set(id, {
|
|
3331
3274
|
transition: "transform 500ms",
|
|
3332
3275
|
transform: `translate3d(${offset}px, 0, 0)`,
|
|
3333
|
-
zIndex: i === index
|
|
3276
|
+
zIndex: i === index ? 1 : void 0
|
|
3334
3277
|
});
|
|
3335
3278
|
});
|
|
3336
3279
|
});
|
|
@@ -3339,9 +3282,9 @@ function ColumnHeader({ index }) {
|
|
|
3339
3282
|
table.update((state) => {
|
|
3340
3283
|
const div = ref.current;
|
|
3341
3284
|
if (!div || draggingStart.current === void 0) return;
|
|
3342
|
-
const index
|
|
3285
|
+
const index = state.columnOrder.indexOf(columnId);
|
|
3343
3286
|
const targetIndex = calcTargetIndex(div.offsetLeft + event.clientX - draggingStart.current.mouseX);
|
|
3344
|
-
state.columnOrder.splice(index
|
|
3287
|
+
state.columnOrder.splice(index, 1);
|
|
3345
3288
|
state.columnOrder.splice(targetIndex, 0, columnId);
|
|
3346
3289
|
clone.current?.remove();
|
|
3347
3290
|
div.style.color = "";
|
|
@@ -3350,7 +3293,7 @@ function ColumnHeader({ index }) {
|
|
|
3350
3293
|
clone.current = void 0;
|
|
3351
3294
|
});
|
|
3352
3295
|
}
|
|
3353
|
-
return /* @__PURE__ */ (0,
|
|
3296
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
3354
3297
|
ref,
|
|
3355
3298
|
className: cx(classes, columnClasses),
|
|
3356
3299
|
css: [
|
|
@@ -3371,22 +3314,21 @@ function ColumnHeader({ index }) {
|
|
|
3371
3314
|
onPointerMove: enabled ? onPointerMove : void 0,
|
|
3372
3315
|
onPointerUp: enabled ? onPointerUp : void 0,
|
|
3373
3316
|
children: [
|
|
3374
|
-
/* @__PURE__ */ (0,
|
|
3375
|
-
/* @__PURE__ */ (0,
|
|
3376
|
-
/* @__PURE__ */ (0,
|
|
3377
|
-
/* @__PURE__ */ (0,
|
|
3317
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(SortComponent, { children: header }),
|
|
3318
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { css: { flex: 1 } }),
|
|
3319
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterControl, {}),
|
|
3320
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ResizeHandle, {})
|
|
3378
3321
|
]
|
|
3379
3322
|
});
|
|
3380
3323
|
}
|
|
3381
|
-
|
|
3382
3324
|
//#endregion
|
|
3383
3325
|
//#region src/components/columnSelection.tsx
|
|
3384
3326
|
function ColumnSelection() {
|
|
3385
|
-
const IconButton
|
|
3386
|
-
const Popover
|
|
3387
|
-
const Checkbox
|
|
3388
|
-
const Button
|
|
3389
|
-
const Settings
|
|
3327
|
+
const IconButton = useTheme((t) => t.components.IconButton);
|
|
3328
|
+
const Popover = useTheme((t) => t.components.Popover);
|
|
3329
|
+
const Checkbox = useTheme((t) => t.components.Checkbox);
|
|
3330
|
+
const Button = useTheme((t) => t.components.Button);
|
|
3331
|
+
const Settings = useTheme((t) => t.icons.Settings);
|
|
3390
3332
|
const selectColumns = useTheme((t) => t.text.selectColumns);
|
|
3391
3333
|
const resetAll = useTheme((t) => t.text.resetAll);
|
|
3392
3334
|
const showAll = useTheme((t) => t.text.showAllColumns);
|
|
@@ -3398,57 +3340,57 @@ function ColumnSelection() {
|
|
|
3398
3340
|
const columns = table.useState((state) => orderBy(state.props.columns.filter((column) => state.displaySize === void 0 || column.displaySize === void 0 || column.displaySize.includes(state.displaySize)), [(column) => state.columnOrder.indexOf(column.id)]));
|
|
3399
3341
|
const hiddenColumns = table.useState((state) => state.hiddenColumns);
|
|
3400
3342
|
const [anchorElement, setAnchorElement] = (0, react.useState)(null);
|
|
3401
|
-
const toggle
|
|
3343
|
+
const toggle = (column, state) => {
|
|
3402
3344
|
const { props: { hiddenColumns: controlledHiddenColumns, onHiddenColumnsChange } } = table.getState();
|
|
3403
3345
|
const newValue = new Set(hiddenColumns);
|
|
3404
|
-
for (const columnId of column ? [column.id] : columns.map((column
|
|
3346
|
+
for (const columnId of column ? [column.id] : columns.map((column) => column.id)) if (state ?? hiddenColumns.has(columnId)) newValue.delete(columnId);
|
|
3405
3347
|
else newValue.add(columnId);
|
|
3406
|
-
if (!controlledHiddenColumns) table.update((state
|
|
3407
|
-
state
|
|
3348
|
+
if (!controlledHiddenColumns) table.update((state) => {
|
|
3349
|
+
state.hiddenColumns = newValue;
|
|
3408
3350
|
});
|
|
3409
3351
|
onHiddenColumnsChange?.(newValue);
|
|
3410
3352
|
};
|
|
3411
3353
|
const allVisible = columns.every((column) => !hiddenColumns.has(column.id));
|
|
3412
|
-
return /* @__PURE__ */ (0,
|
|
3354
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(IconButton, {
|
|
3413
3355
|
onClick: (event) => setAnchorElement(anchorElement ? null : event.currentTarget),
|
|
3414
|
-
children: /* @__PURE__ */ (0,
|
|
3415
|
-
}), /* @__PURE__ */ (0,
|
|
3356
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Settings, {})
|
|
3357
|
+
}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Popover, {
|
|
3416
3358
|
anchorEl: anchorElement,
|
|
3417
3359
|
open: !!anchorElement,
|
|
3418
3360
|
onClose: () => setAnchorElement(null),
|
|
3419
3361
|
css: cssVariables,
|
|
3420
3362
|
className: classes?.popover,
|
|
3421
3363
|
backdropClassName: classes?.popoverBackdrop,
|
|
3422
|
-
children: /* @__PURE__ */ (0,
|
|
3364
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
3423
3365
|
css: {
|
|
3424
3366
|
padding: `calc(var(--spacing) * 2)`,
|
|
3425
3367
|
display: "grid"
|
|
3426
3368
|
},
|
|
3427
3369
|
children: [
|
|
3428
|
-
/* @__PURE__ */ (0,
|
|
3370
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
3429
3371
|
css: { marginBottom: "var(--spacing)" },
|
|
3430
3372
|
children: selectColumns
|
|
3431
3373
|
}),
|
|
3432
|
-
/* @__PURE__ */ (0,
|
|
3374
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
3433
3375
|
css: {
|
|
3434
3376
|
margin: "0.5em 0",
|
|
3435
3377
|
display: "flex",
|
|
3436
3378
|
gap: "0.5em"
|
|
3437
3379
|
},
|
|
3438
|
-
children: [/* @__PURE__ */ (0,
|
|
3380
|
+
children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Button, {
|
|
3439
3381
|
variant: "outlined",
|
|
3440
|
-
onClick: () => toggle
|
|
3382
|
+
onClick: () => toggle(void 0, !allVisible),
|
|
3441
3383
|
children: allVisible ? hideAll : showAll
|
|
3442
|
-
}), /* @__PURE__ */ (0,
|
|
3384
|
+
}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Button, {
|
|
3443
3385
|
variant: "outlined",
|
|
3444
3386
|
onClick: reset,
|
|
3445
3387
|
children: resetAll
|
|
3446
3388
|
})]
|
|
3447
3389
|
}),
|
|
3448
|
-
columns.map((column) => /* @__PURE__ */ (0,
|
|
3449
|
-
control: /* @__PURE__ */ (0,
|
|
3390
|
+
columns.map((column) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FormControlLabel, {
|
|
3391
|
+
control: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Checkbox, {
|
|
3450
3392
|
checked: !(column.hidden ?? hiddenColumns.has(column.id)),
|
|
3451
|
-
onChange: () => toggle
|
|
3393
|
+
onChange: () => toggle(column),
|
|
3452
3394
|
disabled: column.hidden !== void 0
|
|
3453
3395
|
}),
|
|
3454
3396
|
label: column.header
|
|
@@ -3457,17 +3399,16 @@ function ColumnSelection() {
|
|
|
3457
3399
|
})
|
|
3458
3400
|
})] });
|
|
3459
3401
|
}
|
|
3460
|
-
|
|
3461
3402
|
//#endregion
|
|
3462
3403
|
//#region src/components/export.tsx
|
|
3463
3404
|
function Export() {
|
|
3464
3405
|
const { exporters: contextExporters } = (0, react.useContext)(require_tableSettings.TableSettingsContext);
|
|
3465
3406
|
const table = useTableContext();
|
|
3466
|
-
const Button
|
|
3467
|
-
const IconButton
|
|
3468
|
-
const Popover
|
|
3407
|
+
const Button = useTheme((t) => t.components.Button);
|
|
3408
|
+
const IconButton = useTheme((t) => t.components.IconButton);
|
|
3409
|
+
const Popover = useTheme((t) => t.components.Popover);
|
|
3469
3410
|
const ExportIcon = useTheme((t) => t.icons.Export);
|
|
3470
|
-
const Clipboard
|
|
3411
|
+
const Clipboard = useTheme((t) => t.icons.Clipboard);
|
|
3471
3412
|
const exportTitle = useTheme((t) => t.text.exportTitle);
|
|
3472
3413
|
const exportCopy = useTheme((t) => t.text.exportCopy);
|
|
3473
3414
|
const exportDownload = useTheme((t) => t.text.exportDownload);
|
|
@@ -3505,17 +3446,17 @@ function Export() {
|
|
|
3505
3446
|
URL.revokeObjectURL(url);
|
|
3506
3447
|
}
|
|
3507
3448
|
}
|
|
3508
|
-
return /* @__PURE__ */ (0,
|
|
3449
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(IconButton, {
|
|
3509
3450
|
onClick: (event) => setAnchor(anchor ? null : event.currentTarget),
|
|
3510
|
-
children: /* @__PURE__ */ (0,
|
|
3511
|
-
}), /* @__PURE__ */ (0,
|
|
3451
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ExportIcon, { css: !!anchor && { color: "var(--primaryMain)" } })
|
|
3452
|
+
}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Popover, {
|
|
3512
3453
|
open: !!anchor,
|
|
3513
3454
|
onClose: () => setAnchor(null),
|
|
3514
3455
|
anchorEl: anchor,
|
|
3515
3456
|
css: cssVariables,
|
|
3516
3457
|
className: classes?.popover,
|
|
3517
3458
|
backdropClassName: classes?.popoverBackdrop,
|
|
3518
|
-
children: /* @__PURE__ */ (0,
|
|
3459
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
3519
3460
|
css: {
|
|
3520
3461
|
padding: `calc(var(--spacing) * 2)`,
|
|
3521
3462
|
display: "grid",
|
|
@@ -3523,11 +3464,11 @@ function Export() {
|
|
|
3523
3464
|
gap: "var(--spacing)",
|
|
3524
3465
|
"& > *": { justifyContent: "start" }
|
|
3525
3466
|
},
|
|
3526
|
-
children: [/* @__PURE__ */ (0,
|
|
3467
|
+
children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
3527
3468
|
css: { marginBottom: "var(--spacing)" },
|
|
3528
3469
|
children: exportTitle
|
|
3529
|
-
}), exporters.map((entry, index) => /* @__PURE__ */ (0,
|
|
3530
|
-
startIcon: entry.action === "copy" ? /* @__PURE__ */ (0,
|
|
3470
|
+
}), exporters.map((entry, index) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(Button, {
|
|
3471
|
+
startIcon: entry.action === "copy" ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Clipboard, {}) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ExportIcon, {}),
|
|
3531
3472
|
onClick: () => execute(entry),
|
|
3532
3473
|
children: [
|
|
3533
3474
|
entry.action === "copy" ? exportCopy : exportDownload,
|
|
@@ -3539,7 +3480,6 @@ function Export() {
|
|
|
3539
3480
|
})
|
|
3540
3481
|
})] });
|
|
3541
3482
|
}
|
|
3542
|
-
|
|
3543
3483
|
//#endregion
|
|
3544
3484
|
//#region src/misc/calcClassNames.ts
|
|
3545
3485
|
function calcClassNames(classes, item, index) {
|
|
@@ -3556,22 +3496,21 @@ function calcCss(styles, item, index) {
|
|
|
3556
3496
|
index % 2 === 1 && styles?.oddCell
|
|
3557
3497
|
];
|
|
3558
3498
|
}
|
|
3559
|
-
|
|
3560
3499
|
//#endregion
|
|
3561
3500
|
//#region src/components/cell.tsx
|
|
3562
3501
|
const defaultWrapCell = (content) => {
|
|
3563
|
-
if (typeof content === "string") return /* @__PURE__ */ (0,
|
|
3502
|
+
if (typeof content === "string") return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
|
|
3564
3503
|
css: require_tableSettings.defaultClasses.text,
|
|
3565
3504
|
title: content,
|
|
3566
3505
|
children: content
|
|
3567
3506
|
});
|
|
3568
3507
|
return content;
|
|
3569
3508
|
};
|
|
3570
|
-
const Cell = (0, react.memo)(function Cell
|
|
3509
|
+
const Cell = (0, react.memo)(function Cell({ itemId, rowIndex }) {
|
|
3571
3510
|
const table = useTableContext();
|
|
3572
3511
|
const columnId = useColumnContext();
|
|
3573
3512
|
const column = table.useState((state) => {
|
|
3574
|
-
const col = state.activeColumns.find((column
|
|
3513
|
+
const col = state.activeColumns.find((column) => column.id === columnId);
|
|
3575
3514
|
return col && {
|
|
3576
3515
|
value: col.value,
|
|
3577
3516
|
renderCell: col.renderCell
|
|
@@ -3583,25 +3522,24 @@ const Cell = (0, react.memo)(function Cell$1({ itemId, rowIndex }) {
|
|
|
3583
3522
|
(0, react.useLayoutEffect)(() => {
|
|
3584
3523
|
table.getState().props.debugRender?.("render cell", itemId, columnId);
|
|
3585
3524
|
});
|
|
3586
|
-
const className
|
|
3525
|
+
const className = useTheme((t) => cx(...calcClassNames(t.classes, item?.value, rowIndex)));
|
|
3587
3526
|
const styles = useTheme((t) => calcCss(t.styles, item?.value, rowIndex));
|
|
3588
3527
|
if (!column || !item) return null;
|
|
3589
3528
|
const content = column.renderCell(column.value(item.value), item.value);
|
|
3590
|
-
return /* @__PURE__ */ (0,
|
|
3591
|
-
className
|
|
3529
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
3530
|
+
className,
|
|
3592
3531
|
css: [require_tableSettings.defaultClasses.cell, styles],
|
|
3593
3532
|
style: columnStyleOverride,
|
|
3594
3533
|
children: wrapCell(content, column.value(item.value), item.value, rowIndex)
|
|
3595
3534
|
});
|
|
3596
3535
|
});
|
|
3597
|
-
|
|
3598
3536
|
//#endregion
|
|
3599
3537
|
//#region src/components/details.tsx
|
|
3600
|
-
const Details = (0, react.forwardRef)(function Details
|
|
3538
|
+
const Details = (0, react.forwardRef)(function Details({ itemId, rowIndex }, ref) {
|
|
3601
3539
|
const table = useTableContext();
|
|
3602
3540
|
const classes = useTheme((t) => t.classes);
|
|
3603
3541
|
const styles = useTheme((t) => t.styles);
|
|
3604
|
-
const { details, className
|
|
3542
|
+
const { details, className, css } = table.useState((state) => {
|
|
3605
3543
|
const item = state.activeItemsById.get(itemId);
|
|
3606
3544
|
return {
|
|
3607
3545
|
details: state.expanded.has(itemId) ? state.props.rowDetails instanceof Function ? item ? state.props.rowDetails(item.value, rowIndex) : null : state.props.rowDetails : void 0,
|
|
@@ -3609,24 +3547,23 @@ const Details = (0, react.forwardRef)(function Details$1({ itemId, rowIndex }, r
|
|
|
3609
3547
|
css: styles?.details instanceof Function ? styles.details(item?.value, rowIndex) : styles?.details
|
|
3610
3548
|
};
|
|
3611
3549
|
});
|
|
3612
|
-
return details ? /* @__PURE__ */ (0,
|
|
3550
|
+
return details ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
3613
3551
|
ref,
|
|
3614
|
-
className
|
|
3615
|
-
css: [require_tableSettings.defaultClasses.details, css
|
|
3552
|
+
className,
|
|
3553
|
+
css: [require_tableSettings.defaultClasses.details, css],
|
|
3616
3554
|
children: details
|
|
3617
3555
|
}) : null;
|
|
3618
3556
|
});
|
|
3619
|
-
|
|
3620
3557
|
//#endregion
|
|
3621
3558
|
//#region src/components/expandControl.tsx
|
|
3622
3559
|
function ExpandControl({ itemId, hasDeferredChildren }) {
|
|
3623
|
-
const IconButton
|
|
3624
|
-
const Spinner
|
|
3625
|
-
const ChevronRight
|
|
3560
|
+
const IconButton = useTheme((t) => t.components.IconButton);
|
|
3561
|
+
const Spinner = useTheme((t) => t.components.Spinner);
|
|
3562
|
+
const ChevronRight = useTheme((t) => t.icons.ChevronRight);
|
|
3626
3563
|
const table = useTableContext();
|
|
3627
3564
|
const isExpanded = table.useState((state) => state.expanded.has(itemId));
|
|
3628
3565
|
const hasChildren = table.useState((state) => !!state.activeItemsById.get(itemId)?.children.length);
|
|
3629
|
-
function toggle
|
|
3566
|
+
function toggle(e) {
|
|
3630
3567
|
e.preventDefault();
|
|
3631
3568
|
e.stopPropagation();
|
|
3632
3569
|
const { props: { expanded: controlledExpanded, expandOnlyOne, onExpandedChange }, expanded, activeItemsById } = table.getState();
|
|
@@ -3646,30 +3583,29 @@ function ExpandControl({ itemId, hasDeferredChildren }) {
|
|
|
3646
3583
|
state.expanded = newExpanded;
|
|
3647
3584
|
});
|
|
3648
3585
|
}
|
|
3649
|
-
if (isExpanded && hasDeferredChildren && !hasChildren) return /* @__PURE__ */ (0,
|
|
3650
|
-
return /* @__PURE__ */ (0,
|
|
3651
|
-
onClick: toggle
|
|
3652
|
-
children: /* @__PURE__ */ (0,
|
|
3586
|
+
if (isExpanded && hasDeferredChildren && !hasChildren) return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Spinner, { css: { margin: "0 var(--spacing)" } });
|
|
3587
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(IconButton, {
|
|
3588
|
+
onClick: toggle,
|
|
3589
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
|
|
3653
3590
|
css: {
|
|
3654
3591
|
display: "inline-flex",
|
|
3655
3592
|
transition: "all 300ms",
|
|
3656
3593
|
transform: isExpanded ? "rotate3d(0, 0, 1, 90deg)" : "rotate3d(0, 0, 1, 0deg)"
|
|
3657
3594
|
},
|
|
3658
|
-
children: /* @__PURE__ */ (0,
|
|
3595
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ChevronRight, {})
|
|
3659
3596
|
})
|
|
3660
3597
|
});
|
|
3661
3598
|
}
|
|
3662
|
-
|
|
3663
3599
|
//#endregion
|
|
3664
3600
|
//#region src/components/selectComponent.tsx
|
|
3665
3601
|
function SelectComponent({ itemId }) {
|
|
3666
3602
|
const table = useTableContext();
|
|
3667
|
-
const Checkbox
|
|
3668
|
-
const isSelected
|
|
3603
|
+
const Checkbox = useTheme((t) => t.components.Checkbox);
|
|
3604
|
+
const isSelected = table.useState((state) => {
|
|
3669
3605
|
const itemIds = itemId ? [itemId] : Array.from(state.activeItemsById.keys());
|
|
3670
|
-
return state.activeItemsById.size > 0 && itemIds.every((itemId
|
|
3606
|
+
return state.activeItemsById.size > 0 && itemIds.every((itemId) => state.selection.has(itemId));
|
|
3671
3607
|
});
|
|
3672
|
-
function toggle
|
|
3608
|
+
function toggle(event) {
|
|
3673
3609
|
const mouseEvent = event.nativeEvent;
|
|
3674
3610
|
const { activeItems, activeItemsById, lastSelectedId, selection, props: { selectSyncChildren, selection: controlledSelection, onSelectionChange } } = table.getState();
|
|
3675
3611
|
let range;
|
|
@@ -3682,9 +3618,9 @@ function SelectComponent({ itemId }) {
|
|
|
3682
3618
|
range = item ? [item] : activeItems;
|
|
3683
3619
|
}
|
|
3684
3620
|
const newSelection = new Set(selection);
|
|
3685
|
-
for (const item of range) if (isSelected
|
|
3621
|
+
for (const item of range) if (isSelected) newSelection.delete(item.id);
|
|
3686
3622
|
else newSelection.add(item.id);
|
|
3687
|
-
if (selectSyncChildren && isSelected
|
|
3623
|
+
if (selectSyncChildren && isSelected) {
|
|
3688
3624
|
for (const ancestor of getAncestors(activeItemsById, ...range)) newSelection.delete(ancestor);
|
|
3689
3625
|
for (const descendant of getDescendants(...range)) newSelection.delete(descendant);
|
|
3690
3626
|
}
|
|
@@ -3696,41 +3632,40 @@ function SelectComponent({ itemId }) {
|
|
|
3696
3632
|
state.lastSelectedId = itemId;
|
|
3697
3633
|
});
|
|
3698
3634
|
}
|
|
3699
|
-
return /* @__PURE__ */ (0,
|
|
3635
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Checkbox, {
|
|
3700
3636
|
css: {
|
|
3701
3637
|
justifySelf: "start",
|
|
3702
3638
|
color: "#c9cfda"
|
|
3703
3639
|
},
|
|
3704
|
-
checked: isSelected
|
|
3705
|
-
onChange: toggle
|
|
3640
|
+
checked: isSelected,
|
|
3641
|
+
onChange: toggle
|
|
3706
3642
|
});
|
|
3707
3643
|
}
|
|
3708
|
-
|
|
3709
3644
|
//#endregion
|
|
3710
3645
|
//#region src/components/row.tsx
|
|
3711
|
-
const Row = (0, react.memo)(function Row
|
|
3646
|
+
const Row = (0, react.memo)(function Row({ itemId, rowIndex, rowHeightsKey }) {
|
|
3712
3647
|
const table = useTableContext();
|
|
3713
3648
|
const divRef = (0, react.useRef)(null);
|
|
3714
3649
|
const detailsDivRef = (0, react.useRef)(null);
|
|
3715
3650
|
const classes = useTheme((t) => t.classes);
|
|
3716
3651
|
const styles = useTheme((t) => t.styles);
|
|
3717
3652
|
const item = table.useState((state) => state.activeItemsById.get(itemId));
|
|
3718
|
-
const wrapRow = table.useState((state) => state.props.wrapRow) ?? ((props) => /* @__PURE__ */ (0,
|
|
3653
|
+
const wrapRow = table.useState((state) => state.props.wrapRow) ?? ((props) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { ...props }));
|
|
3719
3654
|
const rowClassName = classes?.row instanceof Function ? classes.row(item?.value, rowIndex) : classes?.row;
|
|
3720
3655
|
const rowStyles = styles?.row instanceof Function ? styles.row(item?.value, rowIndex) : styles?.row;
|
|
3721
3656
|
const subgrid = table.useState((state) => state.props.subgrid);
|
|
3722
3657
|
const { cellClassName, css_, indent, hasChildren, hasDeferredChildren, columnIds, enableSelection, rowAction, hasDetails } = table.useState((state) => {
|
|
3723
|
-
const item
|
|
3658
|
+
const item = state.activeItemsById.get(itemId);
|
|
3724
3659
|
return {
|
|
3725
|
-
cellClassName: cx(...calcClassNames(classes, item
|
|
3726
|
-
css_: calcCss(styles, item
|
|
3727
|
-
indent: item
|
|
3728
|
-
hasChildren: !!item
|
|
3729
|
-
hasDeferredChildren: item
|
|
3660
|
+
cellClassName: cx(...calcClassNames(classes, item?.value, rowIndex)),
|
|
3661
|
+
css_: calcCss(styles, item?.value, rowIndex),
|
|
3662
|
+
indent: item ? getAncestors(state.activeItemsById, item).size : 0,
|
|
3663
|
+
hasChildren: !!item?.children.length,
|
|
3664
|
+
hasDeferredChildren: item && state.props.hasDeferredChildren?.(item.value),
|
|
3730
3665
|
columnIds: state.visibleColumns.map((column) => column.id),
|
|
3731
3666
|
enableSelection: state.props.enableSelection,
|
|
3732
|
-
rowAction: state.props.rowAction instanceof Function ? item
|
|
3733
|
-
hasDetails: state.props.rowDetails instanceof Function ? item
|
|
3667
|
+
rowAction: state.props.rowAction instanceof Function ? item ? state.props.rowAction(item.value, rowIndex) : null : state.props.rowAction,
|
|
3668
|
+
hasDetails: state.props.rowDetails instanceof Function ? item ? !!state.props.rowDetails(item.value, rowIndex) : null : !!state.props.rowDetails
|
|
3734
3669
|
};
|
|
3735
3670
|
});
|
|
3736
3671
|
(0, react.useLayoutEffect)(() => {
|
|
@@ -3762,19 +3697,19 @@ const Row = (0, react.memo)(function Row$1({ itemId, rowIndex, rowHeightsKey })
|
|
|
3762
3697
|
table.getState().props.debugRender?.("render row", itemId);
|
|
3763
3698
|
});
|
|
3764
3699
|
if (!item) return null;
|
|
3765
|
-
return /* @__PURE__ */ (0,
|
|
3766
|
-
className: cx
|
|
3700
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_emotion_react.ClassNames, { children: ({ css, cx }) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(_emotion_react_jsx_runtime.Fragment, { children: wrapRow({
|
|
3701
|
+
className: cx(css([subgrid ? {
|
|
3767
3702
|
gridColumn: `1 / -1`,
|
|
3768
3703
|
display: "grid",
|
|
3769
3704
|
gridTemplateColumns: "subgrid"
|
|
3770
3705
|
} : { display: "contents" }, rowStyles]), rowClassName),
|
|
3771
|
-
children: /* @__PURE__ */ (0,
|
|
3772
|
-
/* @__PURE__ */ (0,
|
|
3706
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [
|
|
3707
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
3773
3708
|
className: cellClassName,
|
|
3774
3709
|
css: [require_tableSettings.defaultClasses.cellFill, css_],
|
|
3775
3710
|
ref: divRef
|
|
3776
3711
|
}),
|
|
3777
|
-
/* @__PURE__ */ (0,
|
|
3712
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
3778
3713
|
className: cellClassName,
|
|
3779
3714
|
css: [
|
|
3780
3715
|
require_tableSettings.defaultClasses.cell,
|
|
@@ -3782,27 +3717,27 @@ const Row = (0, react.memo)(function Row$1({ itemId, rowIndex, rowHeightsKey })
|
|
|
3782
3717
|
css_
|
|
3783
3718
|
],
|
|
3784
3719
|
children: [
|
|
3785
|
-
indent > 0 && /* @__PURE__ */ (0,
|
|
3786
|
-
enableSelection && /* @__PURE__ */ (0,
|
|
3787
|
-
(hasChildren || hasDeferredChildren || hasDetails) && /* @__PURE__ */ (0,
|
|
3720
|
+
indent > 0 && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { css: { width: indent * 20 } }),
|
|
3721
|
+
enableSelection && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(SelectComponent, { itemId }),
|
|
3722
|
+
(hasChildren || hasDeferredChildren || hasDetails) && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ExpandControl, {
|
|
3788
3723
|
itemId,
|
|
3789
3724
|
hasDeferredChildren
|
|
3790
3725
|
}),
|
|
3791
3726
|
rowAction
|
|
3792
3727
|
]
|
|
3793
3728
|
}),
|
|
3794
|
-
columnIds.map((columnId) => /* @__PURE__ */ (0,
|
|
3729
|
+
columnIds.map((columnId) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ColumnContext.Provider, {
|
|
3795
3730
|
value: columnId,
|
|
3796
|
-
children: /* @__PURE__ */ (0,
|
|
3731
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Cell, {
|
|
3797
3732
|
itemId,
|
|
3798
3733
|
rowIndex
|
|
3799
3734
|
})
|
|
3800
3735
|
}, columnId)),
|
|
3801
|
-
/* @__PURE__ */ (0,
|
|
3736
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
3802
3737
|
className: cellClassName,
|
|
3803
3738
|
css: [require_tableSettings.defaultClasses.cellFill, css_]
|
|
3804
3739
|
}),
|
|
3805
|
-
/* @__PURE__ */ (0,
|
|
3740
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Details, {
|
|
3806
3741
|
ref: detailsDivRef,
|
|
3807
3742
|
itemId,
|
|
3808
3743
|
rowIndex
|
|
@@ -3810,7 +3745,6 @@ const Row = (0, react.memo)(function Row$1({ itemId, rowIndex, rowHeightsKey })
|
|
|
3810
3745
|
] })
|
|
3811
3746
|
}, item.value, rowIndex) }) });
|
|
3812
3747
|
});
|
|
3813
|
-
|
|
3814
3748
|
//#endregion
|
|
3815
3749
|
//#region src/components/virtualized.tsx
|
|
3816
3750
|
const findScrollRoot = (x) => {
|
|
@@ -3824,19 +3758,19 @@ const relativeOffset = (x, y) => {
|
|
|
3824
3758
|
if (x.offsetParent instanceof HTMLElement) return relativeOffset(x.offsetParent, y) + x.offsetTop;
|
|
3825
3759
|
return 0;
|
|
3826
3760
|
};
|
|
3827
|
-
function Virtualized({ header, footer, children
|
|
3761
|
+
function Virtualized({ header, footer, children, ...props }) {
|
|
3828
3762
|
const table = useTableContext();
|
|
3829
3763
|
const virtual = table.useState((state) => state.props.virtual);
|
|
3830
3764
|
const probeRef = (0, react.useRef)(null);
|
|
3831
3765
|
const [, setId] = (0, react.useState)({});
|
|
3832
3766
|
const { itemIds = [], from = 0, to, before = 0, after = 0 } = table.useState((state) => {
|
|
3833
|
-
const itemIds
|
|
3767
|
+
const itemIds = state.activeItems.map((item) => item.id);
|
|
3834
3768
|
const root = probeRef.current && findScrollRoot(probeRef.current);
|
|
3835
|
-
if (!state.props.virtual) return { itemIds
|
|
3769
|
+
if (!state.props.virtual) return { itemIds };
|
|
3836
3770
|
if (!probeRef.current || !root || !document.contains(root)) return {};
|
|
3837
3771
|
const { rowHeight, initalRowHeight, overscan = 100, overscanTop, overscanBottom } = (state.props.virtual instanceof Object ? state.props.virtual : void 0) ?? {};
|
|
3838
3772
|
let totalHeight = 0;
|
|
3839
|
-
const rowHeights = itemIds
|
|
3773
|
+
const rowHeights = itemIds.map((itemId, index) => {
|
|
3840
3774
|
const h = rowHeight ?? state.rowHeights.get(itemId) ?? initalRowHeight ?? (index === 0 ? 100 : totalHeight / index);
|
|
3841
3775
|
totalHeight += h;
|
|
3842
3776
|
return h;
|
|
@@ -3845,26 +3779,26 @@ function Virtualized({ header, footer, children,...props }) {
|
|
|
3845
3779
|
const headerHeight = probeRef.current.offsetTop;
|
|
3846
3780
|
const topOfTable = root.scrollTop - probeOffset + headerHeight;
|
|
3847
3781
|
const bottomOfTable = topOfTable + root.clientHeight - headerHeight;
|
|
3848
|
-
let from
|
|
3849
|
-
let to
|
|
3850
|
-
let before
|
|
3851
|
-
let after
|
|
3782
|
+
let from = 0;
|
|
3783
|
+
let to = itemIds.length;
|
|
3784
|
+
let before = 0;
|
|
3785
|
+
let after = 0;
|
|
3852
3786
|
for (const h of rowHeights) {
|
|
3853
|
-
if (before
|
|
3854
|
-
from
|
|
3855
|
-
before
|
|
3787
|
+
if (before + h > topOfTable - (overscanTop ?? overscan)) break;
|
|
3788
|
+
from++;
|
|
3789
|
+
before += h;
|
|
3856
3790
|
}
|
|
3857
3791
|
for (const h of rowHeights.reverse()) {
|
|
3858
|
-
if (after
|
|
3859
|
-
to
|
|
3860
|
-
after
|
|
3792
|
+
if (after + h > totalHeight - bottomOfTable - (overscanBottom ?? overscan)) break;
|
|
3793
|
+
to--;
|
|
3794
|
+
after += h;
|
|
3861
3795
|
}
|
|
3862
3796
|
return {
|
|
3863
|
-
itemIds: itemIds
|
|
3864
|
-
from
|
|
3865
|
-
to
|
|
3866
|
-
before
|
|
3867
|
-
after
|
|
3797
|
+
itemIds: itemIds.slice(from, to),
|
|
3798
|
+
from,
|
|
3799
|
+
to,
|
|
3800
|
+
before,
|
|
3801
|
+
after
|
|
3868
3802
|
};
|
|
3869
3803
|
}, { throttle: 16 });
|
|
3870
3804
|
const throttleScroll = (typeof virtual === "boolean" ? void 0 : virtual)?.throttleScroll ?? 16;
|
|
@@ -3882,11 +3816,11 @@ function Virtualized({ header, footer, children,...props }) {
|
|
|
3882
3816
|
(0, react.useLayoutEffect)(() => {
|
|
3883
3817
|
table.getState().props.debugRender?.(`Virtualized render ${from} to ${to}`);
|
|
3884
3818
|
});
|
|
3885
|
-
return /* @__PURE__ */ (0,
|
|
3819
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
3886
3820
|
...props,
|
|
3887
3821
|
children: [
|
|
3888
3822
|
header,
|
|
3889
|
-
virtual && /* @__PURE__ */ (0,
|
|
3823
|
+
virtual && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
3890
3824
|
style: {
|
|
3891
3825
|
gridColumn: "1 / -1",
|
|
3892
3826
|
height: before
|
|
@@ -3894,7 +3828,7 @@ function Virtualized({ header, footer, children,...props }) {
|
|
|
3894
3828
|
ref: probeRef
|
|
3895
3829
|
}),
|
|
3896
3830
|
children(itemIds, from),
|
|
3897
|
-
virtual && /* @__PURE__ */ (0,
|
|
3831
|
+
virtual && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { style: {
|
|
3898
3832
|
gridColumn: "1 / -1",
|
|
3899
3833
|
height: after
|
|
3900
3834
|
} }),
|
|
@@ -3902,12 +3836,11 @@ function Virtualized({ header, footer, children,...props }) {
|
|
|
3902
3836
|
]
|
|
3903
3837
|
});
|
|
3904
3838
|
}
|
|
3905
|
-
|
|
3906
3839
|
//#endregion
|
|
3907
3840
|
//#region src/components/table.tsx
|
|
3908
3841
|
const Table = (0, react.forwardRef)(_Table);
|
|
3909
3842
|
function _Table(props, ref) {
|
|
3910
|
-
return /* @__PURE__ */ (0,
|
|
3843
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TableMemoContextProvider, { children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TableWithState, {
|
|
3911
3844
|
props,
|
|
3912
3845
|
tableRef: ref
|
|
3913
3846
|
}) });
|
|
@@ -3923,11 +3856,11 @@ function TableWithState({ props, tableRef }) {
|
|
|
3923
3856
|
(0, react.useLayoutEffect)(() => {
|
|
3924
3857
|
table.getState().props.debugRender?.("render table");
|
|
3925
3858
|
});
|
|
3926
|
-
return /* @__PURE__ */ (0,
|
|
3859
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TableContext.Provider, {
|
|
3927
3860
|
value: table,
|
|
3928
|
-
children: /* @__PURE__ */ (0,
|
|
3861
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TableResetContext.Provider, {
|
|
3929
3862
|
value: reset,
|
|
3930
|
-
children: /* @__PURE__ */ (0,
|
|
3863
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TableLoadingState, { isHydrated })
|
|
3931
3864
|
})
|
|
3932
3865
|
});
|
|
3933
3866
|
}
|
|
@@ -3938,9 +3871,9 @@ function TableLoadingState({ isHydrated }) {
|
|
|
3938
3871
|
const handle = setTimeout(() => setShowLoading(true), 500);
|
|
3939
3872
|
return () => clearTimeout(handle);
|
|
3940
3873
|
});
|
|
3941
|
-
return /* @__PURE__ */ (0,
|
|
3874
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [!isHydrated && showLoading && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { children: loadingText }), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(TableInner, { hidden: !isHydrated })] });
|
|
3942
3875
|
}
|
|
3943
|
-
const TableInner = (0, react.memo)(function TableInner
|
|
3876
|
+
const TableInner = (0, react.memo)(function TableInner({ hidden }) {
|
|
3944
3877
|
const table = useTableContext();
|
|
3945
3878
|
const fullWidth = table.useState((state) => state.props.fullWidth);
|
|
3946
3879
|
const visibleColumns = table.useState((state) => state.visibleColumns.map((column) => ({
|
|
@@ -3972,7 +3905,7 @@ const TableInner = (0, react.memo)(function TableInner$1({ hidden }) {
|
|
|
3972
3905
|
(0, react.useLayoutEffect)(() => {
|
|
3973
3906
|
table.getState().props.debugRender?.("render table inner");
|
|
3974
3907
|
});
|
|
3975
|
-
return /* @__PURE__ */ (0,
|
|
3908
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Virtualized, {
|
|
3976
3909
|
className: classes?.table,
|
|
3977
3910
|
css: [
|
|
3978
3911
|
cssVariables,
|
|
@@ -3986,8 +3919,8 @@ const TableInner = (0, react.memo)(function TableInner$1({ hidden }) {
|
|
|
3986
3919
|
...visibleColumns.map((column) => columnWidths.get(column.id) ?? column.width ?? "max-content"),
|
|
3987
3920
|
fullWidth === "left" || fullWidth === true ? "auto" : "0"
|
|
3988
3921
|
].join(" ") },
|
|
3989
|
-
header: /* @__PURE__ */ (0,
|
|
3990
|
-
/* @__PURE__ */ (0,
|
|
3922
|
+
header: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [
|
|
3923
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
3991
3924
|
className: classes?.headerCell,
|
|
3992
3925
|
css: [
|
|
3993
3926
|
{
|
|
@@ -4000,7 +3933,7 @@ const TableInner = (0, react.memo)(function TableInner$1({ hidden }) {
|
|
|
4000
3933
|
styles?.headerCell
|
|
4001
3934
|
]
|
|
4002
3935
|
}),
|
|
4003
|
-
/* @__PURE__ */ (0,
|
|
3936
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
|
|
4004
3937
|
className: classes?.headerCell,
|
|
4005
3938
|
css: [
|
|
4006
3939
|
{
|
|
@@ -4013,17 +3946,17 @@ const TableInner = (0, react.memo)(function TableInner$1({ hidden }) {
|
|
|
4013
3946
|
styles?.headerCell
|
|
4014
3947
|
],
|
|
4015
3948
|
children: [
|
|
4016
|
-
enableSelection && /* @__PURE__ */ (0,
|
|
4017
|
-
enableColumnSelection && /* @__PURE__ */ (0,
|
|
4018
|
-
enableExport && /* @__PURE__ */ (0,
|
|
4019
|
-
(enableSelection || enableColumnSelection || enableExport) && /* @__PURE__ */ (0,
|
|
3949
|
+
enableSelection && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(SelectComponent, {}),
|
|
3950
|
+
enableColumnSelection && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ColumnSelection, {}),
|
|
3951
|
+
enableExport && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Export, {}),
|
|
3952
|
+
(enableSelection || enableColumnSelection || enableExport) && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { css: { flex: 1 } }), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ResizeHandleView, {})] })
|
|
4020
3953
|
]
|
|
4021
3954
|
}),
|
|
4022
|
-
/* @__PURE__ */ (0,
|
|
3955
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ColumnHeaderContext.Provider, { children: visibleColumns.map((column, index) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ColumnContext.Provider, {
|
|
4023
3956
|
value: column.id,
|
|
4024
|
-
children: /* @__PURE__ */ (0,
|
|
3957
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ColumnHeader, { index })
|
|
4025
3958
|
}, column.id)) }),
|
|
4026
|
-
/* @__PURE__ */ (0,
|
|
3959
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
4027
3960
|
className: classes?.headerCell,
|
|
4028
3961
|
css: [
|
|
4029
3962
|
{
|
|
@@ -4037,8 +3970,8 @@ const TableInner = (0, react.memo)(function TableInner$1({ hidden }) {
|
|
|
4037
3970
|
]
|
|
4038
3971
|
})
|
|
4039
3972
|
] }),
|
|
4040
|
-
footer: /* @__PURE__ */ (0,
|
|
4041
|
-
/* @__PURE__ */ (0,
|
|
3973
|
+
footer: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [enableClearFiltersButton && hasActiveFilters && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ClearFiltersButton, {}), hasFooter && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [
|
|
3974
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
4042
3975
|
className: classes?.footerCell,
|
|
4043
3976
|
css: [
|
|
4044
3977
|
{ gridColumn: 1 },
|
|
@@ -4048,7 +3981,7 @@ const TableInner = (0, react.memo)(function TableInner$1({ hidden }) {
|
|
|
4048
3981
|
styles?.footerCell
|
|
4049
3982
|
]
|
|
4050
3983
|
}),
|
|
4051
|
-
/* @__PURE__ */ (0,
|
|
3984
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
4052
3985
|
className: classes?.footerCell,
|
|
4053
3986
|
css: [
|
|
4054
3987
|
require_tableSettings.defaultClasses.footerFill,
|
|
@@ -4057,11 +3990,11 @@ const TableInner = (0, react.memo)(function TableInner$1({ hidden }) {
|
|
|
4057
3990
|
styles?.footerCell
|
|
4058
3991
|
]
|
|
4059
3992
|
}),
|
|
4060
|
-
visibleColumns.map((column) => /* @__PURE__ */ (0,
|
|
3993
|
+
visibleColumns.map((column) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ColumnContext.Provider, {
|
|
4061
3994
|
value: column.id,
|
|
4062
|
-
children: /* @__PURE__ */ (0,
|
|
3995
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ColumnFooter, {})
|
|
4063
3996
|
}, column.id)),
|
|
4064
|
-
/* @__PURE__ */ (0,
|
|
3997
|
+
/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
4065
3998
|
className: classes?.footerCell,
|
|
4066
3999
|
css: [
|
|
4067
4000
|
require_tableSettings.defaultClasses.footerFill,
|
|
@@ -4071,29 +4004,28 @@ const TableInner = (0, react.memo)(function TableInner$1({ hidden }) {
|
|
|
4071
4004
|
]
|
|
4072
4005
|
})
|
|
4073
4006
|
] })] }),
|
|
4074
|
-
children: (itemIds, startIndex) => itemIds.map((itemId, index) => /* @__PURE__ */ (0,
|
|
4007
|
+
children: (itemIds, startIndex) => itemIds.map((itemId, index) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Row, {
|
|
4075
4008
|
itemId,
|
|
4076
4009
|
rowIndex: startIndex + index,
|
|
4077
4010
|
rowHeightsKey
|
|
4078
4011
|
}, itemId))
|
|
4079
4012
|
});
|
|
4080
4013
|
});
|
|
4081
|
-
|
|
4082
4014
|
//#endregion
|
|
4083
4015
|
//#region src/components/textFilter.tsx
|
|
4084
4016
|
function substringCompare(itemValue, filterValue) {
|
|
4085
4017
|
return itemValue.toLowerCase().includes(filterValue.toLowerCase());
|
|
4086
4018
|
}
|
|
4087
4019
|
function prefixCompare(itemValue, filterValue) {
|
|
4088
|
-
return itemValue.toLowerCase().
|
|
4020
|
+
return itemValue.toLowerCase().startsWith(filterValue.toLowerCase());
|
|
4089
4021
|
}
|
|
4090
4022
|
function exactCompare(itemValue, filterValue) {
|
|
4091
4023
|
return itemValue.toLowerCase() === filterValue.toLowerCase();
|
|
4092
4024
|
}
|
|
4093
|
-
function TextFilter({ compare = substringCompare, filterBy = asStringOrArray, placeholder
|
|
4094
|
-
const IconButton
|
|
4095
|
-
const Search
|
|
4096
|
-
const Clear
|
|
4025
|
+
function TextFilter({ compare = substringCompare, filterBy = asStringOrArray, placeholder, ...props }) {
|
|
4026
|
+
const IconButton = useTheme((t) => t.components.IconButton);
|
|
4027
|
+
const Search = useTheme((t) => t.icons.Search);
|
|
4028
|
+
const Clear = useTheme((t) => t.icons.Clear);
|
|
4097
4029
|
const { value = "", onChange, close } = useFilter({
|
|
4098
4030
|
...props,
|
|
4099
4031
|
filterBy,
|
|
@@ -4101,30 +4033,29 @@ function TextFilter({ compare = substringCompare, filterBy = asStringOrArray, pl
|
|
|
4101
4033
|
isActive(filterValue) {
|
|
4102
4034
|
return !!filterValue;
|
|
4103
4035
|
},
|
|
4104
|
-
test(filterValue, value
|
|
4105
|
-
return compare(value
|
|
4036
|
+
test(filterValue, value) {
|
|
4037
|
+
return compare(value, filterValue);
|
|
4106
4038
|
}
|
|
4107
4039
|
});
|
|
4108
|
-
return /* @__PURE__ */ (0,
|
|
4040
|
+
return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
|
|
4109
4041
|
css: {
|
|
4110
4042
|
padding: `calc(var(--spacing) * 2)`,
|
|
4111
4043
|
display: "grid"
|
|
4112
4044
|
},
|
|
4113
|
-
children: /* @__PURE__ */ (0,
|
|
4045
|
+
children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(AutoFocusTextField, {
|
|
4114
4046
|
value,
|
|
4115
4047
|
onChange: (event) => onChange(event.target.value),
|
|
4116
4048
|
onKeyUp: (event) => {
|
|
4117
4049
|
if (event.key === "Enter") close();
|
|
4118
4050
|
},
|
|
4119
|
-
endIcon: /* @__PURE__ */ (0,
|
|
4051
|
+
endIcon: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(IconButton, {
|
|
4120
4052
|
onClick: () => onChange(""),
|
|
4121
|
-
children: !value ? /* @__PURE__ */ (0,
|
|
4053
|
+
children: !value ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Search, {}) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Clear, {})
|
|
4122
4054
|
}),
|
|
4123
4055
|
placeholder
|
|
4124
4056
|
})
|
|
4125
4057
|
});
|
|
4126
4058
|
}
|
|
4127
|
-
|
|
4128
4059
|
//#endregion
|
|
4129
4060
|
//#region src/misc/textMatch.ts
|
|
4130
4061
|
const textMatch = (text, query) => {
|
|
@@ -4143,7 +4074,6 @@ const termMatch = (text, query) => {
|
|
|
4143
4074
|
}
|
|
4144
4075
|
return true;
|
|
4145
4076
|
};
|
|
4146
|
-
|
|
4147
4077
|
//#endregion
|
|
4148
4078
|
exports.AutoFocusTextField = AutoFocusTextField;
|
|
4149
4079
|
exports.ColumnContext = ColumnContext;
|
|
@@ -4166,11 +4096,11 @@ exports.dateIntersect = dateIntersect;
|
|
|
4166
4096
|
exports.endOfDay = endOfDay;
|
|
4167
4097
|
exports.exactCompare = exactCompare;
|
|
4168
4098
|
exports.getCalendarWeek = getCalendarWeek;
|
|
4169
|
-
Object.defineProperty(exports,
|
|
4170
|
-
|
|
4171
|
-
|
|
4172
|
-
|
|
4173
|
-
|
|
4099
|
+
Object.defineProperty(exports, "helpers", {
|
|
4100
|
+
enumerable: true,
|
|
4101
|
+
get: function() {
|
|
4102
|
+
return helpers_exports;
|
|
4103
|
+
}
|
|
4174
4104
|
});
|
|
4175
4105
|
exports.lastDays = lastDays;
|
|
4176
4106
|
exports.mergeThemes = require_tableSettings.mergeThemes;
|
|
@@ -4187,4 +4117,5 @@ exports.useColumnContext = useColumnContext;
|
|
|
4187
4117
|
exports.useFilter = useFilter;
|
|
4188
4118
|
exports.useTableContext = useTableContext;
|
|
4189
4119
|
exports.useTheme = useTheme;
|
|
4120
|
+
|
|
4190
4121
|
//# sourceMappingURL=index.cjs.map
|