@object-ui/plugin-timeline 17.1.0 → 17.3.0
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/CHANGELOG.md +118 -0
- package/dist/ObjectTimeline.d.ts +7 -3
- package/dist/ObjectTimeline.d.ts.map +1 -1
- package/dist/index.js +83 -85
- package/dist/index.umd.cjs +1 -1
- package/package.json +13 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,123 @@
|
|
|
1
1
|
# @object-ui/plugin-timeline
|
|
2
2
|
|
|
3
|
+
## 17.3.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [18cd432]
|
|
8
|
+
- Updated dependencies [532cf8b]
|
|
9
|
+
- Updated dependencies [680080a]
|
|
10
|
+
- Updated dependencies [a7651e6]
|
|
11
|
+
- Updated dependencies [d915c47]
|
|
12
|
+
- Updated dependencies [b71fc92]
|
|
13
|
+
- Updated dependencies [65516ba]
|
|
14
|
+
- Updated dependencies [94c5b7c]
|
|
15
|
+
- Updated dependencies [ca0fa8f]
|
|
16
|
+
- Updated dependencies [34595eb]
|
|
17
|
+
- Updated dependencies [3889ffb]
|
|
18
|
+
- Updated dependencies [5781fb1]
|
|
19
|
+
- Updated dependencies [7e2406a]
|
|
20
|
+
- Updated dependencies [9e9e9a9]
|
|
21
|
+
- Updated dependencies [56409c2]
|
|
22
|
+
- Updated dependencies [042e09d]
|
|
23
|
+
- Updated dependencies [9cbcbf4]
|
|
24
|
+
- Updated dependencies [85c4c9c]
|
|
25
|
+
- Updated dependencies [fd54c3e]
|
|
26
|
+
- Updated dependencies [4eeb932]
|
|
27
|
+
- Updated dependencies [5c856ec]
|
|
28
|
+
- Updated dependencies [23018cc]
|
|
29
|
+
- Updated dependencies [53811d1]
|
|
30
|
+
- Updated dependencies [68b6a28]
|
|
31
|
+
- Updated dependencies [0554e88]
|
|
32
|
+
- Updated dependencies [d915c47]
|
|
33
|
+
- Updated dependencies [f44d872]
|
|
34
|
+
- Updated dependencies [28b2e65]
|
|
35
|
+
- Updated dependencies [509104a]
|
|
36
|
+
- Updated dependencies [825bbe3]
|
|
37
|
+
- Updated dependencies [6195841]
|
|
38
|
+
- Updated dependencies [5dd0127]
|
|
39
|
+
- Updated dependencies [06632e9]
|
|
40
|
+
- Updated dependencies [a415684]
|
|
41
|
+
- Updated dependencies [a4cff5b]
|
|
42
|
+
- Updated dependencies [175bd79]
|
|
43
|
+
- Updated dependencies [5af2852]
|
|
44
|
+
- Updated dependencies [f833d3a]
|
|
45
|
+
- Updated dependencies [a6ec93d]
|
|
46
|
+
- Updated dependencies [2a9513d]
|
|
47
|
+
- Updated dependencies [71be406]
|
|
48
|
+
- Updated dependencies [d22ae31]
|
|
49
|
+
- Updated dependencies [c7ed4c3]
|
|
50
|
+
- Updated dependencies [2409e1d]
|
|
51
|
+
- Updated dependencies [789fe3e]
|
|
52
|
+
- Updated dependencies [8d8094a]
|
|
53
|
+
- @object-ui/core@17.3.0
|
|
54
|
+
- @object-ui/components@17.3.0
|
|
55
|
+
- @object-ui/types@17.3.0
|
|
56
|
+
- @object-ui/i18n@17.3.0
|
|
57
|
+
- @object-ui/react@17.3.0
|
|
58
|
+
- @object-ui/mobile@17.3.0
|
|
59
|
+
|
|
60
|
+
## 17.2.0
|
|
61
|
+
|
|
62
|
+
### Minor Changes
|
|
63
|
+
|
|
64
|
+
- 5cb75b3: fix(timeline,list): the timeline honours `timeline.dateField`, not just `timeline.startDateField` (#3129)
|
|
65
|
+
|
|
66
|
+
`dateField` is the pre-#2231 alias for `startDateField`. `@object-ui/types`
|
|
67
|
+
declares it on the nested config (`ListViewTimelineConfig`), and both
|
|
68
|
+
`ObjectView` read-sites (app-shell and plugin-view) resolve it — but the two
|
|
69
|
+
read-sites that actually drive the axis did not:
|
|
70
|
+
|
|
71
|
+
- `ObjectTimeline` consulted the alias only on the FLAT prop (`schema.dateField`),
|
|
72
|
+
never on the nested `schema.timeline`.
|
|
73
|
+
- `ListView` resolved it out of `options.timeline` but not out of the
|
|
74
|
+
spec-canonical `schema.timeline` — including in the capability gate, so such a
|
|
75
|
+
view could fail to offer the Timeline option at all.
|
|
76
|
+
|
|
77
|
+
So a view authored as `timeline: { dateField: 'start_date' }` — the spec nesting
|
|
78
|
+
with the legacy key — fell through to the caller's default (`created_at` /
|
|
79
|
+
`due_date`). That field is normally absent from the `$select` projection, so
|
|
80
|
+
every record came back without it and the timeline rendered all of them under
|
|
81
|
+
**No date** — while the configured date was sitting in the row untouched. That
|
|
82
|
+
also explains why widening the view's projection changed nothing: the projection
|
|
83
|
+
already carried the right field; the renderer was reading a different one.
|
|
84
|
+
|
|
85
|
+
Both read-sites now resolve the alias in the same precedence position they
|
|
86
|
+
already use for `options.timeline.dateField`. The spec key still wins wherever
|
|
87
|
+
both appear. Observable rendering change (records move out of "No date" into
|
|
88
|
+
real date buckets), hence `minor`.
|
|
89
|
+
|
|
90
|
+
### Patch Changes
|
|
91
|
+
|
|
92
|
+
- Updated dependencies [4ae0ac4]
|
|
93
|
+
- Updated dependencies [696e3c1]
|
|
94
|
+
- Updated dependencies [bca45cc]
|
|
95
|
+
- Updated dependencies [a889e31]
|
|
96
|
+
- Updated dependencies [09d30a4]
|
|
97
|
+
- Updated dependencies [4bf612c]
|
|
98
|
+
- Updated dependencies [335041c]
|
|
99
|
+
- Updated dependencies [b414983]
|
|
100
|
+
- Updated dependencies [256f8cc]
|
|
101
|
+
- Updated dependencies [d9668a7]
|
|
102
|
+
- Updated dependencies [4b470b9]
|
|
103
|
+
- Updated dependencies [cb82705]
|
|
104
|
+
- Updated dependencies [f572849]
|
|
105
|
+
- Updated dependencies [f6e8d78]
|
|
106
|
+
- Updated dependencies [ea96284]
|
|
107
|
+
- Updated dependencies [d3584c6]
|
|
108
|
+
- Updated dependencies [a8ad6c0]
|
|
109
|
+
- Updated dependencies [444457c]
|
|
110
|
+
- Updated dependencies [850033c]
|
|
111
|
+
- Updated dependencies [022e4c3]
|
|
112
|
+
- Updated dependencies [009e25d]
|
|
113
|
+
- Updated dependencies [726b89c]
|
|
114
|
+
- @object-ui/types@17.2.0
|
|
115
|
+
- @object-ui/components@17.2.0
|
|
116
|
+
- @object-ui/core@17.2.0
|
|
117
|
+
- @object-ui/react@17.2.0
|
|
118
|
+
- @object-ui/i18n@17.2.0
|
|
119
|
+
- @object-ui/mobile@17.2.0
|
|
120
|
+
|
|
3
121
|
## 17.1.0
|
|
4
122
|
|
|
5
123
|
### Patch Changes
|
package/dist/ObjectTimeline.d.ts
CHANGED
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
import { DataSource, TimelineSchema,
|
|
2
|
+
import { DataSource, TimelineSchema, ListViewTimelineConfig } from '@object-ui/types';
|
|
3
3
|
export interface ObjectTimelineProps {
|
|
4
4
|
schema: TimelineSchema & {
|
|
5
5
|
objectName?: string;
|
|
6
|
-
/**
|
|
7
|
-
|
|
6
|
+
/**
|
|
7
|
+
* Spec-compliant nested timeline config. Typed as `ListViewTimelineConfig`
|
|
8
|
+
* — the spec shape plus the legacy `dateField` alias that `@object-ui/types`
|
|
9
|
+
* has always declared on it, and that this renderer now actually reads.
|
|
10
|
+
*/
|
|
11
|
+
timeline?: ListViewTimelineConfig;
|
|
8
12
|
/** @deprecated Use timeline.titleField instead */
|
|
9
13
|
titleField?: string;
|
|
10
14
|
/** @deprecated Use timeline.startDateField instead */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ObjectTimeline.d.ts","sourceRoot":"","sources":["../src/ObjectTimeline.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"ObjectTimeline.d.ts","sourceRoot":"","sources":["../src/ObjectTimeline.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAoD,MAAM,OAAO,CAAC;AACzE,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAmD3F,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,cAAc,GAAG;QACvB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB;;;;WAIG;QACH,QAAQ,CAAC,EAAE,sBAAsB,CAAC;QAClC,kDAAkD;QAClD,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,sDAAsD;QACtD,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,sDAAsD;QACtD,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,oDAAoD;QACpD,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,oDAAoD;QACpD,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,kDAAkD;QAClD,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,6CAA6C;QAC7C,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;QAE/D,OAAO,CAAC,EAAE;YACR,KAAK,CAAC,EAAE,MAAM,CAAC;YACf,IAAI,CAAC,EAAE,MAAM,CAAC;YACd,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,OAAO,CAAC,EAAE,MAAM,CAAC;SAClB,CAAA;KACF,CAAC;IACF,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;CACrC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAyVxD,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -4,11 +4,11 @@ import { NavigationOverlay as a, cn as o, cva as s, renderChildren as c } from "
|
|
|
4
4
|
import { jsx as l, jsxs as u } from "react/jsx-runtime";
|
|
5
5
|
import { ComponentRegistry as d, buildExpandFields as f, extractRecords as p } from "@object-ui/core";
|
|
6
6
|
import { useDataScope as m, useNavigationOverlay as h, useObjectLabel as g, useSchemaContext as _ } from "@object-ui/react";
|
|
7
|
-
import { usePullToRefresh as
|
|
8
|
-
import { z as
|
|
9
|
-
import { createSafeTranslation as
|
|
7
|
+
import { usePullToRefresh as ee } from "@object-ui/mobile";
|
|
8
|
+
import { z as v } from "zod";
|
|
9
|
+
import { createSafeTranslation as y } from "@object-ui/i18n";
|
|
10
10
|
//#region src/renderer.tsx
|
|
11
|
-
var
|
|
11
|
+
var b = /* @__PURE__ */ new Set([
|
|
12
12
|
"hour",
|
|
13
13
|
"day",
|
|
14
14
|
"week",
|
|
@@ -16,11 +16,11 @@ var x = /* @__PURE__ */ new Set([
|
|
|
16
16
|
"quarter",
|
|
17
17
|
"year"
|
|
18
18
|
]);
|
|
19
|
-
function
|
|
19
|
+
function x(e) {
|
|
20
20
|
let t = e.scale ?? e.timeScale;
|
|
21
|
-
return typeof t == "string" &&
|
|
21
|
+
return typeof t == "string" && b.has(t) ? t : "month";
|
|
22
22
|
}
|
|
23
|
-
function
|
|
23
|
+
function S(e, t, n) {
|
|
24
24
|
let r = [], i = new Date(t), a = new Date(n);
|
|
25
25
|
if (Number.isNaN(i.getTime()) || Number.isNaN(a.getTime()) || i > a) return r;
|
|
26
26
|
let o = new Date(i);
|
|
@@ -49,30 +49,28 @@ function C(e, t, n) {
|
|
|
49
49
|
case "year":
|
|
50
50
|
for (o.setMonth(0, 1); o <= a;) r.push(String(o.getFullYear())), o.setFullYear(o.getFullYear() + 1);
|
|
51
51
|
break;
|
|
52
|
-
default:
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
})), o.setMonth(o.getMonth() + 1);
|
|
57
|
-
break;
|
|
52
|
+
default: for (; o <= a;) r.push(o.toLocaleDateString("en-US", {
|
|
53
|
+
month: "short",
|
|
54
|
+
year: "numeric"
|
|
55
|
+
})), o.setMonth(o.getMonth() + 1);
|
|
58
56
|
}
|
|
59
57
|
return r;
|
|
60
58
|
}
|
|
61
|
-
function
|
|
59
|
+
function C(e) {
|
|
62
60
|
let t = e.flatMap((e) => (e.items || []).flatMap((e) => [e.startDate, e.endDate])), n = Math.min(...t.map((e) => new Date(e).getTime())), r = Math.max(...t.map((e) => new Date(e).getTime()));
|
|
63
61
|
return {
|
|
64
62
|
minDate: new Date(n).toISOString().split("T")[0],
|
|
65
63
|
maxDate: new Date(r).toISOString().split("T")[0]
|
|
66
64
|
};
|
|
67
65
|
}
|
|
68
|
-
function
|
|
66
|
+
function w(e, t, n, r) {
|
|
69
67
|
let i = new Date(e).getTime(), a = new Date(t).getTime(), o = new Date(n).getTime(), s = new Date(r).getTime() - o, c = i - o, l = a - i;
|
|
70
68
|
return {
|
|
71
69
|
start: c / s * 100,
|
|
72
70
|
width: l / s * 100
|
|
73
71
|
};
|
|
74
72
|
}
|
|
75
|
-
function
|
|
73
|
+
function T(e, t) {
|
|
76
74
|
let n = new Date(e);
|
|
77
75
|
return t === "short" ? n.toLocaleDateString() : t === "long" ? n.toLocaleDateString("en-US", {
|
|
78
76
|
year: "numeric",
|
|
@@ -80,7 +78,7 @@ function E(e, t) {
|
|
|
80
78
|
day: "numeric"
|
|
81
79
|
}) : n.toISOString().split("T")[0];
|
|
82
80
|
}
|
|
83
|
-
function
|
|
81
|
+
function E({ label: e, color: t }) {
|
|
84
82
|
let n = t ? {
|
|
85
83
|
backgroundColor: `${t}22`,
|
|
86
84
|
color: t,
|
|
@@ -92,7 +90,7 @@ function D({ label: e, color: t }) {
|
|
|
92
90
|
children: e
|
|
93
91
|
});
|
|
94
92
|
}
|
|
95
|
-
function
|
|
93
|
+
function D(e) {
|
|
96
94
|
let t = [];
|
|
97
95
|
for (let n of e) {
|
|
98
96
|
let e = n.group == null ? "" : String(n.group), r = t[t.length - 1];
|
|
@@ -103,14 +101,14 @@ function O(e) {
|
|
|
103
101
|
}
|
|
104
102
|
return t;
|
|
105
103
|
}
|
|
106
|
-
var
|
|
104
|
+
var O = ({ schema: e, className: t, ...n }) => {
|
|
107
105
|
let { variant: r = "vertical", items: i = [], dateFormat: a = "short", onItemClick: s } = e;
|
|
108
106
|
if (r === "vertical") {
|
|
109
|
-
let e =
|
|
107
|
+
let e = D(i), r = e.some((e) => e.key !== ""), d = (e, t) => {
|
|
110
108
|
let n = e.color ? {
|
|
111
109
|
backgroundColor: `${e.color}33`,
|
|
112
110
|
borderColor: e.color
|
|
113
|
-
} : void 0, r = e.time ?
|
|
111
|
+
} : void 0, r = e.time ? T(e.time, a) : e.startDate ? T(e.startDate, a) : "", i = e.endDate && e.endDate !== e.startDate ? T(e.endDate, a) : "", d = Array.isArray(e.meta) ? e.meta : [];
|
|
114
112
|
return /* @__PURE__ */ u(I, {
|
|
115
113
|
density: "compact",
|
|
116
114
|
className: o(e.className, s && "cursor-pointer"),
|
|
@@ -137,7 +135,7 @@ var k = ({ schema: e, className: t, ...n }) => {
|
|
|
137
135
|
}),
|
|
138
136
|
d.length > 0 && /* @__PURE__ */ l("div", {
|
|
139
137
|
className: "flex flex-wrap gap-1.5 mt-1 mb-1",
|
|
140
|
-
children: d.map((e) => /* @__PURE__ */ l(
|
|
138
|
+
children: d.map((e) => /* @__PURE__ */ l(E, {
|
|
141
139
|
label: e.label,
|
|
142
140
|
color: e.color
|
|
143
141
|
}, e.key))
|
|
@@ -191,7 +189,7 @@ var k = ({ schema: e, className: t, ...n }) => {
|
|
|
191
189
|
children: [
|
|
192
190
|
e.time && /* @__PURE__ */ l(V, {
|
|
193
191
|
dateTime: e.time,
|
|
194
|
-
children:
|
|
192
|
+
children: T(e.time, a)
|
|
195
193
|
}),
|
|
196
194
|
e.title && /* @__PURE__ */ l(B, { children: e.title }),
|
|
197
195
|
e.description && /* @__PURE__ */ l(H, {
|
|
@@ -205,7 +203,7 @@ var k = ({ schema: e, className: t, ...n }) => {
|
|
|
205
203
|
}, t))
|
|
206
204
|
});
|
|
207
205
|
if (r === "gantt") {
|
|
208
|
-
let r =
|
|
206
|
+
let r = C(i), c = e.minDate || r.minDate, d = e.maxDate || r.maxDate, f = S(x(e), c, d);
|
|
209
207
|
return /* @__PURE__ */ u(G, {
|
|
210
208
|
className: o("overflow-x-auto [-webkit-overflow-scrolling:touch]", t),
|
|
211
209
|
...n,
|
|
@@ -232,13 +230,13 @@ var k = ({ schema: e, className: t, ...n }) => {
|
|
|
232
230
|
children: i.map((e, t) => /* @__PURE__ */ l(Y, {
|
|
233
231
|
className: "relative",
|
|
234
232
|
children: (e.items || []).map((n, r) => {
|
|
235
|
-
let i =
|
|
233
|
+
let i = w(n.startDate, n.endDate, c, d);
|
|
236
234
|
return /* @__PURE__ */ l(Z, {
|
|
237
235
|
start: i.start,
|
|
238
236
|
width: i.width,
|
|
239
237
|
variant: n.variant || "default",
|
|
240
238
|
onClick: () => s?.(n, e, t, r),
|
|
241
|
-
title: `${n.title || ""}\n${
|
|
239
|
+
title: `${n.title || ""}\n${T(n.startDate, a)} - ${T(n.endDate, a)}`,
|
|
242
240
|
children: /* @__PURE__ */ l(Q, { children: n.title })
|
|
243
241
|
}, r);
|
|
244
242
|
})
|
|
@@ -249,7 +247,7 @@ var k = ({ schema: e, className: t, ...n }) => {
|
|
|
249
247
|
}
|
|
250
248
|
return null;
|
|
251
249
|
};
|
|
252
|
-
d.register("timeline",
|
|
250
|
+
d.register("timeline", O, {
|
|
253
251
|
namespace: "plugin-timeline",
|
|
254
252
|
label: "Timeline",
|
|
255
253
|
category: "data-display",
|
|
@@ -444,7 +442,7 @@ d.register("timeline", k, {
|
|
|
444
442
|
}
|
|
445
443
|
}
|
|
446
444
|
});
|
|
447
|
-
var
|
|
445
|
+
var k = y({
|
|
448
446
|
"timeline.bucket.overdue": "Overdue",
|
|
449
447
|
"timeline.bucket.today": "Today",
|
|
450
448
|
"timeline.bucket.tomorrow": "Tomorrow",
|
|
@@ -463,25 +461,25 @@ var ee = b({
|
|
|
463
461
|
translateOptions: (e, t, n) => n,
|
|
464
462
|
fieldLabel: (e, t, n) => n
|
|
465
463
|
};
|
|
466
|
-
function
|
|
464
|
+
function j() {
|
|
467
465
|
return g() ?? A;
|
|
468
466
|
}
|
|
469
|
-
var
|
|
470
|
-
title:
|
|
471
|
-
date:
|
|
472
|
-
description:
|
|
473
|
-
variant:
|
|
474
|
-
}),
|
|
475
|
-
mapping:
|
|
476
|
-
objectName:
|
|
477
|
-
titleField:
|
|
478
|
-
dateField:
|
|
479
|
-
startDateField:
|
|
480
|
-
endDateField:
|
|
481
|
-
descriptionField:
|
|
482
|
-
groupByField:
|
|
483
|
-
colorField:
|
|
484
|
-
scale:
|
|
467
|
+
var M = v.object({
|
|
468
|
+
title: v.string().optional(),
|
|
469
|
+
date: v.string().optional(),
|
|
470
|
+
description: v.string().optional(),
|
|
471
|
+
variant: v.string().optional()
|
|
472
|
+
}), te = v.object({
|
|
473
|
+
mapping: M.optional(),
|
|
474
|
+
objectName: v.string().optional(),
|
|
475
|
+
titleField: v.string().optional(),
|
|
476
|
+
dateField: v.string().optional(),
|
|
477
|
+
startDateField: v.string().optional(),
|
|
478
|
+
endDateField: v.string().optional(),
|
|
479
|
+
descriptionField: v.string().optional(),
|
|
480
|
+
groupByField: v.string().optional(),
|
|
481
|
+
colorField: v.string().optional(),
|
|
482
|
+
scale: v.enum([
|
|
485
483
|
"hour",
|
|
486
484
|
"day",
|
|
487
485
|
"week",
|
|
@@ -490,12 +488,12 @@ var j = y.object({
|
|
|
490
488
|
"year"
|
|
491
489
|
]).optional()
|
|
492
490
|
}), N = ({ schema: e, dataSource: o, className: s, onRowClick: c, onItemClick: d, ...g }) => {
|
|
493
|
-
let [_,
|
|
491
|
+
let [_, v] = i([]), [y, b] = i(() => {
|
|
494
492
|
let t = Array.isArray(e.items) && e.items.length > 0, n = Array.isArray(g.data) && g.data.length > 0;
|
|
495
493
|
return !t && !n && !!e.objectName;
|
|
496
|
-
}), [
|
|
494
|
+
}), [x, S] = i(null), [C, w] = i(0), [T, E] = i(null), D = e.timeline;
|
|
497
495
|
n(() => {
|
|
498
|
-
let t =
|
|
496
|
+
let t = te.safeParse(e);
|
|
499
497
|
t.success || console.warn("[ObjectTimeline] Invalid timeline configuration:", t.error.format());
|
|
500
498
|
}, [e]);
|
|
501
499
|
let A = m(e.bind);
|
|
@@ -504,7 +502,7 @@ var j = y.object({
|
|
|
504
502
|
return (async () => {
|
|
505
503
|
if (!(!o || typeof o.getObjectSchema != "function" || !e.objectName)) try {
|
|
506
504
|
let n = await o.getObjectSchema(e.objectName);
|
|
507
|
-
t &&
|
|
505
|
+
t && E(n);
|
|
508
506
|
} catch (e) {
|
|
509
507
|
console.warn("Failed to fetch object def for ObjectTimeline", e);
|
|
510
508
|
}
|
|
@@ -514,40 +512,40 @@ var j = y.object({
|
|
|
514
512
|
}, [e.objectName, o]), n(() => {
|
|
515
513
|
e.objectName && !A && !e.items && !g.data ? (async () => {
|
|
516
514
|
if (!o || typeof o.find != "function" || !e.objectName) {
|
|
517
|
-
|
|
515
|
+
b(!1);
|
|
518
516
|
return;
|
|
519
517
|
}
|
|
520
|
-
|
|
518
|
+
b(!0);
|
|
521
519
|
try {
|
|
522
|
-
let t = f(
|
|
520
|
+
let t = f(T?.fields), n = await o.find(e.objectName, {
|
|
523
521
|
options: { $top: 100 },
|
|
524
522
|
...t.length > 0 ? { $expand: t } : {}
|
|
525
|
-
}));
|
|
526
|
-
|
|
523
|
+
}), r = p(n);
|
|
524
|
+
v(r);
|
|
527
525
|
} catch (e) {
|
|
528
|
-
console.error(e),
|
|
526
|
+
console.error(e), S(e);
|
|
529
527
|
} finally {
|
|
530
|
-
|
|
528
|
+
b(!1);
|
|
531
529
|
}
|
|
532
|
-
})() :
|
|
530
|
+
})() : b(!1);
|
|
533
531
|
}, [
|
|
534
532
|
e.objectName,
|
|
535
533
|
o,
|
|
536
534
|
A,
|
|
537
535
|
e.items,
|
|
538
536
|
g.data,
|
|
539
|
-
|
|
540
|
-
|
|
537
|
+
C,
|
|
538
|
+
T
|
|
541
539
|
]);
|
|
542
|
-
let
|
|
540
|
+
let M = g.data || A || _, { t: N } = k(), { fieldOptionLabel: P } = j(), F = D?.titleField ?? e.mapping?.title ?? e.titleField ?? "name", I = D?.startDateField ?? D?.dateField ?? e.mapping?.date ?? e.startDateField ?? e.dateField ?? "date", L = D?.endDateField ?? e.endDateField ?? I, R = e.mapping?.description ?? e.descriptionField ?? "description", z = e.mapping?.variant ?? "variant", B = D?.groupByField ?? e.groupByField, V = D?.colorField ?? e.colorField, H = r(() => {
|
|
543
541
|
if (e.items) return e.items;
|
|
544
|
-
if (!
|
|
545
|
-
let t =
|
|
542
|
+
if (!M || !Array.isArray(M)) return [];
|
|
543
|
+
let t = T?.fields ?? {}, n = e.objectName || "", r = (e) => {
|
|
546
544
|
if (!e || !t[e]?.options) return {};
|
|
547
545
|
let n = {};
|
|
548
546
|
for (let r of t[e].options) r && r.value != null && (n[String(r.value)] = r);
|
|
549
547
|
return n;
|
|
550
|
-
}, i = r(V), a = Array.isArray(
|
|
548
|
+
}, i = r(V), a = Array.isArray(D?.metaFields) ? D.metaFields.filter((e) => typeof e == "string" && e) : ["status", "priority"].filter((e) => t[e]), o = {};
|
|
551
549
|
for (let e of a) o[e] = r(e);
|
|
552
550
|
let s = (e) => {
|
|
553
551
|
if (e == null || e === "") return;
|
|
@@ -562,7 +560,7 @@ var j = y.object({
|
|
|
562
560
|
label: i?.label ? P(n, e, String(t), i.label) : String(t),
|
|
563
561
|
color: i?.color
|
|
564
562
|
};
|
|
565
|
-
}, l =
|
|
563
|
+
}, l = M.map((e) => {
|
|
566
564
|
let t = e[I], r = e[L], i = V ? e[V] : void 0, l = B ? e[B] : void 0, u = [];
|
|
567
565
|
if (n) for (let t of a) {
|
|
568
566
|
let n = c(t, e[t], o[t] || {});
|
|
@@ -607,8 +605,8 @@ var j = y.object({
|
|
|
607
605
|
}));
|
|
608
606
|
}, [
|
|
609
607
|
e.items,
|
|
610
|
-
|
|
611
|
-
|
|
608
|
+
M,
|
|
609
|
+
T,
|
|
612
610
|
e.objectName,
|
|
613
611
|
F,
|
|
614
612
|
I,
|
|
@@ -619,31 +617,31 @@ var j = y.object({
|
|
|
619
617
|
B,
|
|
620
618
|
N,
|
|
621
619
|
P
|
|
622
|
-
]),
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
620
|
+
]), U = t(async () => {
|
|
621
|
+
w((e) => e + 1);
|
|
622
|
+
}, []), { ref: W, isRefreshing: G, pullDistance: K } = ee({
|
|
623
|
+
onRefresh: U,
|
|
626
624
|
enabled: !!e.objectName && !!o
|
|
627
|
-
}),
|
|
625
|
+
}), q = h({
|
|
628
626
|
navigation: e.navigation,
|
|
629
627
|
objectName: e.objectName,
|
|
630
628
|
onRowClick: c ?? d
|
|
631
|
-
}),
|
|
629
|
+
}), J = D?.scale ?? e.scale, Y = {
|
|
632
630
|
...e,
|
|
633
631
|
items: H || [],
|
|
634
632
|
className: s || e.className,
|
|
635
|
-
...
|
|
633
|
+
...J ? { timeScale: J } : {},
|
|
636
634
|
onItemClick: (e) => {
|
|
637
635
|
let t = e._data || e;
|
|
638
|
-
|
|
636
|
+
q.handleClick(t), d?.(t);
|
|
639
637
|
}
|
|
640
638
|
};
|
|
641
|
-
return
|
|
639
|
+
return x ? /* @__PURE__ */ u("div", {
|
|
642
640
|
className: "p-4 text-destructive",
|
|
643
641
|
"data-testid": "timeline-error",
|
|
644
642
|
role: "alert",
|
|
645
|
-
children: ["Error loading timeline: ",
|
|
646
|
-
}) :
|
|
643
|
+
children: ["Error loading timeline: ", x.message]
|
|
644
|
+
}) : y && (!H || H.length === 0) ? /* @__PURE__ */ u("div", {
|
|
647
645
|
className: "flex flex-col h-full min-h-[200px] p-4 gap-3",
|
|
648
646
|
"data-testid": "timeline-loading",
|
|
649
647
|
role: "status",
|
|
@@ -666,17 +664,17 @@ var j = y.object({
|
|
|
666
664
|
})]
|
|
667
665
|
}, e))]
|
|
668
666
|
}) : /* @__PURE__ */ u("div", {
|
|
669
|
-
ref:
|
|
667
|
+
ref: W,
|
|
670
668
|
className: "relative overflow-auto h-full min-w-0",
|
|
671
669
|
children: [
|
|
672
|
-
|
|
670
|
+
K > 0 && /* @__PURE__ */ l("div", {
|
|
673
671
|
className: "flex items-center justify-center text-xs text-muted-foreground",
|
|
674
|
-
style: { height:
|
|
675
|
-
children:
|
|
672
|
+
style: { height: K },
|
|
673
|
+
children: G ? "Refreshing…" : "Pull to refresh"
|
|
676
674
|
}),
|
|
677
|
-
/* @__PURE__ */ l(
|
|
678
|
-
|
|
679
|
-
...
|
|
675
|
+
/* @__PURE__ */ l(O, { schema: Y }),
|
|
676
|
+
q.isOverlay && /* @__PURE__ */ l(a, {
|
|
677
|
+
...q,
|
|
680
678
|
title: "Timeline Item",
|
|
681
679
|
children: (e) => /* @__PURE__ */ l("div", {
|
|
682
680
|
className: "space-y-3",
|
|
@@ -873,4 +871,4 @@ d.register("object-timeline", $, {
|
|
|
873
871
|
}]
|
|
874
872
|
});
|
|
875
873
|
//#endregion
|
|
876
|
-
export { N as ObjectTimeline, $ as ObjectTimelineRenderer,
|
|
874
|
+
export { N as ObjectTimeline, $ as ObjectTimelineRenderer, b as TIMELINE_SCALES, P as Timeline, z as TimelineContent, H as TimelineDescription, G as TimelineGantt, Z as TimelineGanttBar, Q as TimelineGanttBarContent, J as TimelineGanttGrid, K as TimelineGanttHeader, X as TimelineGanttLabel, Y as TimelineGanttRow, q as TimelineGanttRowLabels, U as TimelineHorizontal, W as TimelineHorizontalItem, I as TimelineItem, R as TimelineMarker, O as TimelineRenderer, V as TimelineTime, B as TimelineTitle, S as generateTimeScaleHeaders, x as resolveTimelineScale, F as timelineItemVariants, L as timelineMarkerVariants };
|
package/dist/index.umd.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("@object-ui/components"),require("react/jsx-runtime"),require("@object-ui/core"),require("@object-ui/react"),require("@object-ui/mobile"),require("zod"),require("@object-ui/i18n")):typeof define==`function`&&define.amd?define([`exports`,`react`,`@object-ui/components`,`react/jsx-runtime`,`@object-ui/core`,`@object-ui/react`,`@object-ui/mobile`,`zod`,`@object-ui/i18n`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ObjectUIPluginTimeline={},e.React,e.ObjectUIComponents,e.react_jsx_runtime,e.ObjectUICore,e.ObjectUIReact,e.ObjectUIMobile,e.zod,e._object_ui_i18n))})(this,function(e,t,n,r,i,a,o,s,c){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var l=Object.create,u=Object.defineProperty,d=Object.getOwnPropertyDescriptor,f=Object.getOwnPropertyNames,p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,h=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=f(t),a=0,o=i.length,s;a<o;a++)s=i[a],!m.call(e,s)&&s!==n&&u(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=d(t,s))||r.enumerable});return e};t=((e,t,n)=>(n=e==null?{}:l(p(e)),h(t||!e||!e.__esModule?u(n,`default`,{value:e,enumerable:!0}):n,e)))(t,1);var g=new Set([`hour`,`day`,`week`,`month`,`quarter`,`year`]);function _(e){let t=e.scale??e.timeScale;return typeof t==`string`&&g.has(t)?t:`month`}function v(e,t,n){let r=[],i=new Date(t),a=new Date(n);if(Number.isNaN(i.getTime())||Number.isNaN(a.getTime())||i>a)return r;let o=new Date(i);switch(e){case`hour`:for(;o<=a;)r.push(o.toLocaleString(`en-US`,{month:`short`,day:`numeric`,hour:`numeric`})),o.setHours(o.getHours()+1);break;case`day`:for(;o<=a;)r.push(o.toLocaleDateString(`en-US`,{month:`short`,day:`numeric`})),o.setDate(o.getDate()+1);break;case`week`:{let e=1;for(;o<=a;)r.push(`Week ${e++}`),o.setDate(o.getDate()+7);break}case`quarter`:for(o.setMonth(Math.floor(o.getMonth()/3)*3,1);o<=a;)r.push(`Q${Math.floor(o.getMonth()/3)+1} ${o.getFullYear()}`),o.setMonth(o.getMonth()+3);break;case`year`:for(o.setMonth(0,1);o<=a;)r.push(String(o.getFullYear())),o.setFullYear(o.getFullYear()+1);break;default:for(;o<=a;)r.push(o.toLocaleDateString(`en-US`,{month:`short`,year:`numeric`})),o.setMonth(o.getMonth()+1);break}return r}function y(e){let t=e.flatMap(e=>(e.items||[]).flatMap(e=>[e.startDate,e.endDate])),n=Math.min(...t.map(e=>new Date(e).getTime())),r=Math.max(...t.map(e=>new Date(e).getTime()));return{minDate:new Date(n).toISOString().split(`T`)[0],maxDate:new Date(r).toISOString().split(`T`)[0]}}function b(e,t,n,r){let i=new Date(e).getTime(),a=new Date(t).getTime(),o=new Date(n).getTime(),s=new Date(r).getTime()-o,c=i-o,l=a-i;return{start:c/s*100,width:l/s*100}}function x(e,t){let n=new Date(e);return t===`short`?n.toLocaleDateString():t===`long`?n.toLocaleDateString(`en-US`,{year:`numeric`,month:`long`,day:`numeric`}):n.toISOString().split(`T`)[0]}function S({label:e,color:t}){let i=t?{backgroundColor:`${t}22`,color:t,borderColor:`${t}55`}:void 0;return(0,r.jsx)(`span`,{className:(0,n.cn)(`inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium`,!t&&`bg-muted text-muted-foreground border-transparent`),style:i,children:e})}function C(e){let t=[];for(let n of e){let e=n.group==null?``:String(n.group),r=t[t.length-1];r&&r.key===e?r.items.push(n):t.push({key:e,items:[n]})}return t}var w=({schema:e,className:t,...i})=>{let{variant:a=`vertical`,items:o=[],dateFormat:s=`short`,onItemClick:c}=e;if(a===`vertical`){let e=C(o),a=e.some(e=>e.key!==``),l=(e,t)=>{let i=e.color?{backgroundColor:`${e.color}33`,borderColor:e.color}:void 0,a=e.time?x(e.time,s):e.startDate?x(e.startDate,s):``,o=e.endDate&&e.endDate!==e.startDate?x(e.endDate,s):``,l=Array.isArray(e.meta)?e.meta:[];return(0,r.jsxs)(N,{density:`compact`,className:(0,n.cn)(e.className,c&&`cursor-pointer`),onClick:()=>c?.(e),children:[(0,r.jsx)(F,{variant:e.color?`default`:e.variant||`default`,style:i,children:e.icon&&(0,r.jsx)(`span`,{className:`text-xs`,children:e.icon})}),(0,r.jsxs)(I,{children:[(a||o)&&(0,r.jsxs)(R,{dateTime:e.time||e.startDate,className:`!mb-1 text-xs`,children:[a,o&&(0,r.jsxs)(`span`,{className:`text-muted-foreground/70`,children:[` → `,o]})]}),e.title&&(0,r.jsx)(L,{className:`text-sm sm:text-base mb-1`,children:e.title}),l.length>0&&(0,r.jsx)(`div`,{className:`flex flex-wrap gap-1.5 mt-1 mb-1`,children:l.map(e=>(0,r.jsx)(S,{label:e.label,color:e.color},e.key))}),e.description&&(0,r.jsx)(z,{className:`text-sm text-muted-foreground line-clamp-2 sm:line-clamp-none`,children:e.description}),e.content&&(0,n.renderChildren)(e.content)]})]},t)};return a?(0,r.jsx)(`div`,{className:(0,n.cn)(`px-4 sm:px-6 py-2`,t),...i,children:e.map((e,t)=>(0,r.jsxs)(`section`,{className:`mb-4`,children:[(0,r.jsxs)(`header`,{className:`sticky top-0 z-10 -mx-4 sm:-mx-6 px-4 sm:px-6 py-1.5 backdrop-blur bg-background/90 text-xs font-semibold uppercase tracking-wide text-muted-foreground border-b`,children:[(0,r.jsx)(`span`,{children:e.key}),(0,r.jsx)(`span`,{className:`ml-2 text-muted-foreground/60 font-normal normal-case`,children:e.items.length})]}),(0,r.jsx)(j,{className:`mt-3`,children:e.items.map((e,n)=>l(e,`${t}-${n}`))})]},`${e.key}-${t}`))}):(0,r.jsx)(j,{className:t,...i,children:o.map((e,t)=>l(e,t))})}if(a===`horizontal`)return(0,r.jsx)(B,{className:(0,n.cn)(`overflow-x-auto [-webkit-overflow-scrolling:touch]`,t),...i,children:o.map((e,t)=>(0,r.jsxs)(V,{className:(0,n.cn)(e.className,c&&`cursor-pointer`),onClick:()=>c?.(e),children:[(0,r.jsxs)(`div`,{className:`flex flex-col items-center`,children:[(0,r.jsx)(F,{variant:e.variant||`default`,children:e.icon&&(0,r.jsx)(`span`,{className:`text-xs`,children:e.icon})}),(0,r.jsxs)(`div`,{className:`mt-4 text-center`,children:[e.time&&(0,r.jsx)(R,{dateTime:e.time,children:x(e.time,s)}),e.title&&(0,r.jsx)(L,{children:e.title}),e.description&&(0,r.jsx)(z,{className:`text-center line-clamp-2 sm:line-clamp-none`,children:e.description}),e.content&&(0,n.renderChildren)(e.content)]})]}),t<o.length-1&&(0,r.jsx)(`div`,{className:`absolute left-full w-16 border-t-2 border-gray-200 top-3`})]},t))});if(a===`gantt`){let a=y(o),l=e.minDate||a.minDate,u=e.maxDate||a.maxDate,d=v(_(e),l,u);return(0,r.jsxs)(H,{className:(0,n.cn)(`overflow-x-auto [-webkit-overflow-scrolling:touch]`,t),...i,children:[(0,r.jsxs)(U,{children:[(0,r.jsx)(W,{className:`flex items-center px-2 sm:px-4 py-2 sm:py-3`,children:(0,r.jsx)(`span`,{className:`font-semibold text-xs sm:text-sm`,children:e.rowLabel||`Items`})}),(0,r.jsx)(G,{children:(0,r.jsx)(`div`,{className:`flex h-full`,children:d.map((e,t)=>(0,r.jsx)(`div`,{className:`flex-1 px-1 sm:px-2 py-2 sm:py-3 border-r text-xs font-medium text-center`,children:e},t))})})]}),(0,r.jsx)(`div`,{children:(0,r.jsxs)(`div`,{className:`flex`,children:[(0,r.jsx)(W,{children:o.map((e,t)=>(0,r.jsx)(K,{children:(0,r.jsx)(q,{title:e.label,className:`truncate`,children:e.label})},t))}),(0,r.jsx)(G,{className:`relative`,children:o.map((e,t)=>(0,r.jsx)(K,{className:`relative`,children:(e.items||[]).map((n,i)=>{let a=b(n.startDate,n.endDate,l,u);return(0,r.jsx)(J,{start:a.start,width:a.width,variant:n.variant||`default`,onClick:()=>c?.(n,e,t,i),title:`${n.title||``}\n${x(n.startDate,s)} - ${x(n.endDate,s)}`,children:(0,r.jsx)(Y,{children:n.title})},i)})},t))})]})})]})}return null};i.ComponentRegistry.register(`timeline`,w,{namespace:`plugin-timeline`,label:`Timeline`,category:`data-display`,inputs:[{name:`variant`,type:`enum`,enum:[`vertical`,`horizontal`,`gantt`],label:`Timeline Variant`,defaultValue:`vertical`},{name:`items`,type:`array`,label:`Timeline Items`,description:`For vertical/horizontal: Array of { time, title, description, variant, icon, content }. For gantt: Array of { label, items: [{ title, startDate, endDate, variant }] }`},{name:`dateFormat`,type:`enum`,enum:[`short`,`long`,`iso`],label:`Date Format`,defaultValue:`short`},{name:`timeScale`,type:`enum`,enum:[`day`,`week`,`month`],label:`Time Scale (Gantt only)`,defaultValue:`month`},{name:`rowLabel`,type:`string`,label:`Row Label (Gantt only)`,defaultValue:`Items`},{name:`minDate`,type:`string`,label:`Min Date (Gantt only)`,description:`Override auto-calculated min date (YYYY-MM-DD)`},{name:`maxDate`,type:`string`,label:`Max Date (Gantt only)`,description:`Override auto-calculated max date (YYYY-MM-DD)`},{name:`className`,type:`string`,label:`CSS Class`}],defaultProps:{variant:`vertical`,dateFormat:`short`,items:[{time:`2024-01-15`,title:`Project Started`,description:`Kickoff meeting and initial planning`,variant:`success`,icon:`🚀`},{time:`2024-02-01`,title:`First Milestone`,description:`Completed initial design phase`,variant:`info`,icon:`🎨`},{time:`2024-03-15`,title:`Beta Release`,description:`Released beta version to testers`,variant:`warning`,icon:`⚡`},{time:`2024-04-01`,title:`Launch`,description:`Official product launch`,variant:`success`,icon:`🎉`}]},examples:{vertical:{variant:`vertical`,dateFormat:`long`,items:[{time:`2024-01-15`,title:`Project Started`,description:`Kickoff meeting and initial planning`,variant:`success`},{time:`2024-02-01`,title:`First Milestone`,description:`Completed initial design phase`,variant:`info`}]},horizontal:{variant:`horizontal`,dateFormat:`short`,items:[{time:`2024-01-01`,title:`Q1`,description:`First quarter`,variant:`default`},{time:`2024-04-01`,title:`Q2`,description:`Second quarter`,variant:`info`},{time:`2024-07-01`,title:`Q3`,description:`Third quarter`,variant:`warning`},{time:`2024-10-01`,title:`Q4`,description:`Fourth quarter`,variant:`success`}]},gantt:{variant:`gantt`,dateFormat:`short`,timeScale:`month`,rowLabel:`Projects`,items:[{label:`Backend Development`,items:[{title:`API Design`,startDate:`2024-01-01`,endDate:`2024-01-31`,variant:`success`},{title:`Implementation`,startDate:`2024-02-01`,endDate:`2024-03-31`,variant:`info`}]},{label:`Frontend Development`,items:[{title:`UI Design`,startDate:`2024-01-15`,endDate:`2024-02-15`,variant:`warning`},{title:`Component Dev`,startDate:`2024-02-15`,endDate:`2024-04-15`,variant:`default`}]},{label:`Testing`,items:[{title:`QA Phase`,startDate:`2024-03-01`,endDate:`2024-04-30`,variant:`danger`}]}]}}});var T=(0,c.createSafeTranslation)({"timeline.bucket.overdue":`Overdue`,"timeline.bucket.today":`Today`,"timeline.bucket.tomorrow":`Tomorrow`,"timeline.bucket.thisWeek":`This week`,"timeline.bucket.nextWeek":`Next week`,"timeline.bucket.later":`Later`,"timeline.bucket.noDate":`No date`,"timeline.bucket.unassigned":`Unassigned`,"timeline.relative.today":`Today`,"timeline.relative.tomorrow":`Tomorrow`,"timeline.relative.yesterday":`Yesterday`,"timeline.relative.inDays":`In {{n}} days`,"timeline.relative.daysAgo":`{{n}} days ago`},`timeline.bucket.today`),E={fieldOptionLabel:(e,t,n,r)=>r,translateOptions:(e,t,n)=>n,fieldLabel:(e,t,n)=>n};function D(){return(0,a.useObjectLabel)()??E}var O=s.z.object({title:s.z.string().optional(),date:s.z.string().optional(),description:s.z.string().optional(),variant:s.z.string().optional()}),k=s.z.object({mapping:O.optional(),objectName:s.z.string().optional(),titleField:s.z.string().optional(),dateField:s.z.string().optional(),startDateField:s.z.string().optional(),endDateField:s.z.string().optional(),descriptionField:s.z.string().optional(),groupByField:s.z.string().optional(),colorField:s.z.string().optional(),scale:s.z.enum([`hour`,`day`,`week`,`month`,`quarter`,`year`]).optional()}),A=({schema:e,dataSource:s,className:c,onRowClick:l,onItemClick:u,...d})=>{let[f,p]=(0,t.useState)([]),[m,h]=(0,t.useState)(()=>{let t=Array.isArray(e.items)&&e.items.length>0,n=Array.isArray(d.data)&&d.data.length>0;return!t&&!n&&!!e.objectName}),[g,_]=(0,t.useState)(null),[v,y]=(0,t.useState)(0),[b,x]=(0,t.useState)(null),S=e.timeline;(0,t.useEffect)(()=>{let t=k.safeParse(e);t.success||console.warn(`[ObjectTimeline] Invalid timeline configuration:`,t.error.format())},[e]);let C=(0,a.useDataScope)(e.bind);(0,t.useEffect)(()=>{let t=!0;return(async()=>{if(!(!s||typeof s.getObjectSchema!=`function`||!e.objectName))try{let n=await s.getObjectSchema(e.objectName);t&&x(n)}catch(e){console.warn(`Failed to fetch object def for ObjectTimeline`,e)}})(),()=>{t=!1}},[e.objectName,s]),(0,t.useEffect)(()=>{e.objectName&&!C&&!e.items&&!d.data?(async()=>{if(!s||typeof s.find!=`function`||!e.objectName){h(!1);return}h(!0);try{let t=(0,i.buildExpandFields)(b?.fields),n=(0,i.extractRecords)(await s.find(e.objectName,{options:{$top:100},...t.length>0?{$expand:t}:{}}));p(n)}catch(e){console.error(e),_(e)}finally{h(!1)}})():h(!1)},[e.objectName,s,C,e.items,d.data,v,b]);let E=d.data||C||f,{t:O}=T(),{fieldOptionLabel:A}=D(),j=S?.titleField??e.mapping?.title??e.titleField??`name`,M=S?.startDateField??e.mapping?.date??e.startDateField??e.dateField??`date`,N=S?.endDateField??e.endDateField??M,P=e.mapping?.description??e.descriptionField??`description`,F=e.mapping?.variant??`variant`,I=S?.groupByField??e.groupByField,L=S?.colorField??e.colorField,R=(0,t.useMemo)(()=>{if(e.items)return e.items;if(!E||!Array.isArray(E))return[];let t=b?.fields??{},n=e.objectName||``,r=e=>{if(!e||!t[e]?.options)return{};let n={};for(let r of t[e].options)r&&r.value!=null&&(n[String(r.value)]=r);return n},i=r(L),a=Array.isArray(S?.metaFields)?S.metaFields.filter(e=>typeof e==`string`&&e):[`status`,`priority`].filter(e=>t[e]),o={};for(let e of a)o[e]=r(e);let s=e=>{if(e==null||e===``)return;let t=i[String(e)];if(t?.color)return String(t.color);let n=String(e);if(/^#([0-9a-f]{3}){1,2}$/i.test(n)||n.startsWith(`rgb`)||n.startsWith(`hsl`))return n},c=(e,t,r)=>{if(t==null||t===``)return null;let i=r[String(t)];return{label:i?.label?A(n,e,String(t),i.label):String(t),color:i?.color}},l=E.map(e=>{let t=e[M],r=e[N],i=L?e[L]:void 0,l=I?e[I]:void 0,u=[];if(n)for(let t of a){let n=c(t,e[t],o[t]||{});n&&u.push({key:t,label:n.label,color:n.color})}return{title:e[j],time:t,startDate:t,endDate:r,description:e[P],variant:e[F]||`default`,color:s(i),group:l,meta:u,_data:e}});l.sort((e,t)=>(e.startDate?new Date(e.startDate).getTime():1/0)-(t.startDate?new Date(t.startDate).getTime():1/0));let u=new Date,d=e=>new Date(e.getFullYear(),e.getMonth(),e.getDate()).getTime(),f=d(u),p=864e5,m=f-(u.getDay()+6)%7*p+7*p,h=m+7*p,g=e=>{if(!e)return O(`timeline.bucket.noDate`);let t=d(new Date(e));return Number.isNaN(t)?O(`timeline.bucket.noDate`):t<f?O(`timeline.bucket.overdue`):t===f?O(`timeline.bucket.today`):t===f+p?O(`timeline.bucket.tomorrow`):O(t<m?`timeline.bucket.thisWeek`:t<h?`timeline.bucket.nextWeek`:`timeline.bucket.later`)};if(I&&!l.every(e=>e.group==null||e.group===``)){let e=r(I);return l.map(t=>{let n=c(I,t.group,e);return{...t,group:n?n.label:t.group!=null&&t.group!==``?String(t.group):O(`timeline.bucket.unassigned`)}})}return l.map(e=>({...e,group:g(e.startDate)}))},[e.items,E,b,e.objectName,j,M,N,P,F,L,I,O,A]),{ref:z,isRefreshing:B,pullDistance:V}=(0,o.usePullToRefresh)({onRefresh:(0,t.useCallback)(async()=>{y(e=>e+1)},[]),enabled:!!e.objectName&&!!s}),H=(0,a.useNavigationOverlay)({navigation:e.navigation,objectName:e.objectName,onRowClick:l??u}),U=S?.scale??e.scale,W={...e,items:R||[],className:c||e.className,...U?{timeScale:U}:{},onItemClick:e=>{let t=e._data||e;H.handleClick(t),u?.(t)}};return g?(0,r.jsxs)(`div`,{className:`p-4 text-destructive`,"data-testid":`timeline-error`,role:`alert`,children:[`Error loading timeline: `,g.message]}):m&&(!R||R.length===0)?(0,r.jsxs)(`div`,{className:`flex flex-col h-full min-h-[200px] p-4 gap-3`,"data-testid":`timeline-loading`,role:`status`,"aria-live":`polite`,"aria-busy":`true`,children:[(0,r.jsx)(`span`,{className:`sr-only`,children:`Loading timeline…`}),[0,1,2,3].map(e=>(0,r.jsxs)(`div`,{className:`flex items-start gap-3`,style:{opacity:Math.max(.3,1-e*.18)},children:[(0,r.jsx)(`div`,{className:`h-3 w-3 rounded-full bg-muted/70 animate-pulse mt-1.5 shrink-0`}),(0,r.jsxs)(`div`,{className:`flex-1 space-y-2`,children:[(0,r.jsx)(`div`,{className:`h-4 w-1/3 rounded bg-muted/70 animate-pulse`}),(0,r.jsx)(`div`,{className:`h-3 w-2/3 rounded bg-muted/50 animate-pulse`})]})]},e))]}):(0,r.jsxs)(`div`,{ref:z,className:`relative overflow-auto h-full min-w-0`,children:[V>0&&(0,r.jsx)(`div`,{className:`flex items-center justify-center text-xs text-muted-foreground`,style:{height:V},children:B?`Refreshing…`:`Pull to refresh`}),(0,r.jsx)(w,{schema:W}),H.isOverlay&&(0,r.jsx)(n.NavigationOverlay,{...H,title:`Timeline Item`,children:e=>(0,r.jsx)(`div`,{className:`space-y-3`,children:Object.entries(e).map(([e,t])=>(0,r.jsxs)(`div`,{className:`flex flex-col`,children:[(0,r.jsx)(`span`,{className:`text-xs font-medium text-muted-foreground uppercase tracking-wide`,children:e.replace(/_/g,` `)}),(0,r.jsx)(`span`,{className:`text-sm`,children:String(t??`—`)})]},e))})})]})},j=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`ol`,{ref:i,className:(0,n.cn)(`relative ml-3 border-l border-gray-200`,e),...t}));j.displayName=`Timeline`;var M=(0,n.cva)(`ml-6`,{variants:{density:{default:`mb-10`,compact:`mb-3`,comfortable:`mb-6`}},defaultVariants:{density:`default`}}),N=t.forwardRef(({className:e,density:t,...i},a)=>(0,r.jsx)(`li`,{ref:a,className:(0,n.cn)(M({density:t}),e),...i}));N.displayName=`TimelineItem`;var P=(0,n.cva)(`absolute -left-3 w-6 h-6 rounded-full border-2 flex items-center justify-center`,{variants:{variant:{default:`bg-blue-200 border-blue-400`,success:`bg-emerald-200 border-emerald-500`,warning:`bg-amber-200 border-amber-500`,danger:`bg-red-200 border-red-500`,info:`bg-purple-200 border-purple-500`,todo:`bg-slate-200 border-slate-400`,"in-progress":`bg-blue-200 border-blue-500`,done:`bg-emerald-200 border-emerald-500`}},defaultVariants:{variant:`default`}}),F=t.forwardRef(({className:e,variant:t=`default`,...i},a)=>(0,r.jsx)(`div`,{ref:a,className:(0,n.cn)(P({variant:t}),e),...i}));F.displayName=`TimelineMarker`;var I=t.forwardRef(({className:e,...t},n)=>(0,r.jsx)(`div`,{ref:n,className:e,...t}));I.displayName=`TimelineContent`;var L=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`h3`,{ref:i,className:(0,n.cn)(`font-semibold text-lg mb-1`,e),...t}));L.displayName=`TimelineTitle`;var R=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`time`,{ref:i,className:(0,n.cn)(`text-sm font-normal text-gray-500 mb-2 block`,e),...t}));R.displayName=`TimelineTime`;var z=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`p`,{ref:i,className:(0,n.cn)(`text-base text-gray-700`,e),...t}));z.displayName=`TimelineDescription`;var B=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`div`,{ref:i,className:(0,n.cn)(`relative flex overflow-x-auto py-8`,e),...t}));B.displayName=`TimelineHorizontal`;var V=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`div`,{ref:i,className:(0,n.cn)(`shrink-0 w-64 relative`,e),...t}));V.displayName=`TimelineHorizontalItem`;var H=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`div`,{ref:i,className:(0,n.cn)(`relative w-full border rounded-lg overflow-hidden`,e),...t}));H.displayName=`TimelineGantt`;var U=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`div`,{ref:i,className:(0,n.cn)(`flex border-b bg-gray-50`,e),...t}));U.displayName=`TimelineGanttHeader`;var W=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`div`,{ref:i,className:(0,n.cn)(`w-48 border-r bg-white`,e),...t}));W.displayName=`TimelineGanttRowLabels`;var G=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`div`,{ref:i,className:(0,n.cn)(`flex-1 overflow-x-auto`,e),...t}));G.displayName=`TimelineGanttGrid`;var K=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`div`,{ref:i,className:(0,n.cn)(`flex items-center border-b min-h-12`,e),...t}));K.displayName=`TimelineGanttRow`;var q=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`div`,{ref:i,className:(0,n.cn)(`px-4 py-2 font-medium text-sm truncate`,e),...t}));q.displayName=`TimelineGanttLabel`;var J=t.forwardRef(({className:e,start:t=0,width:i=100,variant:a=`default`,...o},s)=>(0,r.jsx)(`div`,{ref:s,className:(0,n.cn)(`absolute h-8 rounded-md transition-colors cursor-pointer`,{default:`bg-blue-500 hover:bg-blue-600`,success:`bg-green-500 hover:bg-green-600`,warning:`bg-yellow-500 hover:bg-yellow-600`,danger:`bg-red-500 hover:bg-red-600`,info:`bg-purple-500 hover:bg-purple-600`}[a],e),style:{left:`${t}%`,width:`${i}%`},...o}));J.displayName=`TimelineGanttBar`;var Y=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`div`,{ref:i,className:(0,n.cn)(`px-2 py-1 text-white text-xs font-medium truncate`,e),...t}));Y.displayName=`TimelineGanttBarContent`;var X=({schema:e,...t})=>{let{dataSource:n}=(0,a.useSchemaContext)()||{};return(0,r.jsx)(A,{schema:e,dataSource:n,...t})};i.ComponentRegistry.register(`object-timeline`,X,{namespace:`plugin-timeline`,label:`Object Timeline`,category:`view`,inputs:[{name:`objectName`,type:`string`,label:`Object Name`,required:!0},{name:`variant`,type:`enum`,enum:[`vertical`,`horizontal`,`gantt`],defaultValue:`vertical`}]}),i.ComponentRegistry.register(`timeline`,X,{namespace:`view`,label:`Timeline View`,category:`view`,inputs:[{name:`objectName`,type:`string`,label:`Object Name`,required:!0},{name:`variant`,type:`enum`,enum:[`vertical`,`horizontal`,`gantt`],defaultValue:`vertical`}]}),e.ObjectTimeline=A,e.ObjectTimelineRenderer=X,e.TIMELINE_SCALES=g,e.Timeline=j,e.TimelineContent=I,e.TimelineDescription=z,e.TimelineGantt=H,e.TimelineGanttBar=J,e.TimelineGanttBarContent=Y,e.TimelineGanttGrid=G,e.TimelineGanttHeader=U,e.TimelineGanttLabel=q,e.TimelineGanttRow=K,e.TimelineGanttRowLabels=W,e.TimelineHorizontal=B,e.TimelineHorizontalItem=V,e.TimelineItem=N,e.TimelineMarker=F,e.TimelineRenderer=w,e.TimelineTime=R,e.TimelineTitle=L,e.generateTimeScaleHeaders=v,e.resolveTimelineScale=_,e.timelineItemVariants=M,e.timelineMarkerVariants=P});
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("@object-ui/components"),require("react/jsx-runtime"),require("@object-ui/core"),require("@object-ui/react"),require("@object-ui/mobile"),require("zod"),require("@object-ui/i18n")):typeof define==`function`&&define.amd?define([`exports`,`react`,`@object-ui/components`,`react/jsx-runtime`,`@object-ui/core`,`@object-ui/react`,`@object-ui/mobile`,`zod`,`@object-ui/i18n`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.ObjectUIPluginTimeline={},e.React,e.ObjectUIComponents,e.react_jsx_runtime,e.ObjectUICore,e.ObjectUIReact,e.ObjectUIMobile,e.zod,e._object_ui_i18n))})(this,function(e,t,n,r,i,a,o,s,c){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var l=Object.create,u=Object.defineProperty,d=Object.getOwnPropertyDescriptor,f=Object.getOwnPropertyNames,p=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty,h=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=f(t),a=0,o=i.length,s;a<o;a++)s=i[a],!m.call(e,s)&&s!==n&&u(e,s,{get:(e=>t[e]).bind(null,s),enumerable:!(r=d(t,s))||r.enumerable});return e};t=((e,t,n)=>(n=e==null?{}:l(p(e)),h(t||!e||!e.__esModule||!m.call(e,`default`)?u(n,`default`,{value:e,enumerable:!0}):n,e)))(t,1);var g=new Set([`hour`,`day`,`week`,`month`,`quarter`,`year`]);function _(e){let t=e.scale??e.timeScale;return typeof t==`string`&&g.has(t)?t:`month`}function v(e,t,n){let r=[],i=new Date(t),a=new Date(n);if(Number.isNaN(i.getTime())||Number.isNaN(a.getTime())||i>a)return r;let o=new Date(i);switch(e){case`hour`:for(;o<=a;)r.push(o.toLocaleString(`en-US`,{month:`short`,day:`numeric`,hour:`numeric`})),o.setHours(o.getHours()+1);break;case`day`:for(;o<=a;)r.push(o.toLocaleDateString(`en-US`,{month:`short`,day:`numeric`})),o.setDate(o.getDate()+1);break;case`week`:{let e=1;for(;o<=a;)r.push(`Week ${e++}`),o.setDate(o.getDate()+7);break}case`quarter`:for(o.setMonth(Math.floor(o.getMonth()/3)*3,1);o<=a;)r.push(`Q${Math.floor(o.getMonth()/3)+1} ${o.getFullYear()}`),o.setMonth(o.getMonth()+3);break;case`year`:for(o.setMonth(0,1);o<=a;)r.push(String(o.getFullYear())),o.setFullYear(o.getFullYear()+1);break;default:for(;o<=a;)r.push(o.toLocaleDateString(`en-US`,{month:`short`,year:`numeric`})),o.setMonth(o.getMonth()+1)}return r}function y(e){let t=e.flatMap(e=>(e.items||[]).flatMap(e=>[e.startDate,e.endDate])),n=Math.min(...t.map(e=>new Date(e).getTime())),r=Math.max(...t.map(e=>new Date(e).getTime()));return{minDate:new Date(n).toISOString().split(`T`)[0],maxDate:new Date(r).toISOString().split(`T`)[0]}}function b(e,t,n,r){let i=new Date(e).getTime(),a=new Date(t).getTime(),o=new Date(n).getTime(),s=new Date(r).getTime()-o,c=i-o,l=a-i;return{start:c/s*100,width:l/s*100}}function x(e,t){let n=new Date(e);return t===`short`?n.toLocaleDateString():t===`long`?n.toLocaleDateString(`en-US`,{year:`numeric`,month:`long`,day:`numeric`}):n.toISOString().split(`T`)[0]}function S({label:e,color:t}){let i=t?{backgroundColor:`${t}22`,color:t,borderColor:`${t}55`}:void 0;return(0,r.jsx)(`span`,{className:(0,n.cn)(`inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium`,!t&&`bg-muted text-muted-foreground border-transparent`),style:i,children:e})}function C(e){let t=[];for(let n of e){let e=n.group==null?``:String(n.group),r=t[t.length-1];r&&r.key===e?r.items.push(n):t.push({key:e,items:[n]})}return t}var w=({schema:e,className:t,...i})=>{let{variant:a=`vertical`,items:o=[],dateFormat:s=`short`,onItemClick:c}=e;if(a===`vertical`){let e=C(o),a=e.some(e=>e.key!==``),l=(e,t)=>{let i=e.color?{backgroundColor:`${e.color}33`,borderColor:e.color}:void 0,a=e.time?x(e.time,s):e.startDate?x(e.startDate,s):``,o=e.endDate&&e.endDate!==e.startDate?x(e.endDate,s):``,l=Array.isArray(e.meta)?e.meta:[];return(0,r.jsxs)(N,{density:`compact`,className:(0,n.cn)(e.className,c&&`cursor-pointer`),onClick:()=>c?.(e),children:[(0,r.jsx)(F,{variant:e.color?`default`:e.variant||`default`,style:i,children:e.icon&&(0,r.jsx)(`span`,{className:`text-xs`,children:e.icon})}),(0,r.jsxs)(I,{children:[(a||o)&&(0,r.jsxs)(R,{dateTime:e.time||e.startDate,className:`!mb-1 text-xs`,children:[a,o&&(0,r.jsxs)(`span`,{className:`text-muted-foreground/70`,children:[` → `,o]})]}),e.title&&(0,r.jsx)(L,{className:`text-sm sm:text-base mb-1`,children:e.title}),l.length>0&&(0,r.jsx)(`div`,{className:`flex flex-wrap gap-1.5 mt-1 mb-1`,children:l.map(e=>(0,r.jsx)(S,{label:e.label,color:e.color},e.key))}),e.description&&(0,r.jsx)(z,{className:`text-sm text-muted-foreground line-clamp-2 sm:line-clamp-none`,children:e.description}),e.content&&(0,n.renderChildren)(e.content)]})]},t)};return a?(0,r.jsx)(`div`,{className:(0,n.cn)(`px-4 sm:px-6 py-2`,t),...i,children:e.map((e,t)=>(0,r.jsxs)(`section`,{className:`mb-4`,children:[(0,r.jsxs)(`header`,{className:`sticky top-0 z-10 -mx-4 sm:-mx-6 px-4 sm:px-6 py-1.5 backdrop-blur bg-background/90 text-xs font-semibold uppercase tracking-wide text-muted-foreground border-b`,children:[(0,r.jsx)(`span`,{children:e.key}),(0,r.jsx)(`span`,{className:`ml-2 text-muted-foreground/60 font-normal normal-case`,children:e.items.length})]}),(0,r.jsx)(j,{className:`mt-3`,children:e.items.map((e,n)=>l(e,`${t}-${n}`))})]},`${e.key}-${t}`))}):(0,r.jsx)(j,{className:t,...i,children:o.map((e,t)=>l(e,t))})}if(a===`horizontal`)return(0,r.jsx)(B,{className:(0,n.cn)(`overflow-x-auto [-webkit-overflow-scrolling:touch]`,t),...i,children:o.map((e,t)=>(0,r.jsxs)(V,{className:(0,n.cn)(e.className,c&&`cursor-pointer`),onClick:()=>c?.(e),children:[(0,r.jsxs)(`div`,{className:`flex flex-col items-center`,children:[(0,r.jsx)(F,{variant:e.variant||`default`,children:e.icon&&(0,r.jsx)(`span`,{className:`text-xs`,children:e.icon})}),(0,r.jsxs)(`div`,{className:`mt-4 text-center`,children:[e.time&&(0,r.jsx)(R,{dateTime:e.time,children:x(e.time,s)}),e.title&&(0,r.jsx)(L,{children:e.title}),e.description&&(0,r.jsx)(z,{className:`text-center line-clamp-2 sm:line-clamp-none`,children:e.description}),e.content&&(0,n.renderChildren)(e.content)]})]}),t<o.length-1&&(0,r.jsx)(`div`,{className:`absolute left-full w-16 border-t-2 border-gray-200 top-3`})]},t))});if(a===`gantt`){let a=y(o),l=e.minDate||a.minDate,u=e.maxDate||a.maxDate,d=v(_(e),l,u);return(0,r.jsxs)(H,{className:(0,n.cn)(`overflow-x-auto [-webkit-overflow-scrolling:touch]`,t),...i,children:[(0,r.jsxs)(U,{children:[(0,r.jsx)(W,{className:`flex items-center px-2 sm:px-4 py-2 sm:py-3`,children:(0,r.jsx)(`span`,{className:`font-semibold text-xs sm:text-sm`,children:e.rowLabel||`Items`})}),(0,r.jsx)(G,{children:(0,r.jsx)(`div`,{className:`flex h-full`,children:d.map((e,t)=>(0,r.jsx)(`div`,{className:`flex-1 px-1 sm:px-2 py-2 sm:py-3 border-r text-xs font-medium text-center`,children:e},t))})})]}),(0,r.jsx)(`div`,{children:(0,r.jsxs)(`div`,{className:`flex`,children:[(0,r.jsx)(W,{children:o.map((e,t)=>(0,r.jsx)(K,{children:(0,r.jsx)(q,{title:e.label,className:`truncate`,children:e.label})},t))}),(0,r.jsx)(G,{className:`relative`,children:o.map((e,t)=>(0,r.jsx)(K,{className:`relative`,children:(e.items||[]).map((n,i)=>{let a=b(n.startDate,n.endDate,l,u);return(0,r.jsx)(J,{start:a.start,width:a.width,variant:n.variant||`default`,onClick:()=>c?.(n,e,t,i),title:`${n.title||``}\n${x(n.startDate,s)} - ${x(n.endDate,s)}`,children:(0,r.jsx)(Y,{children:n.title})},i)})},t))})]})})]})}return null};i.ComponentRegistry.register(`timeline`,w,{namespace:`plugin-timeline`,label:`Timeline`,category:`data-display`,inputs:[{name:`variant`,type:`enum`,enum:[`vertical`,`horizontal`,`gantt`],label:`Timeline Variant`,defaultValue:`vertical`},{name:`items`,type:`array`,label:`Timeline Items`,description:`For vertical/horizontal: Array of { time, title, description, variant, icon, content }. For gantt: Array of { label, items: [{ title, startDate, endDate, variant }] }`},{name:`dateFormat`,type:`enum`,enum:[`short`,`long`,`iso`],label:`Date Format`,defaultValue:`short`},{name:`timeScale`,type:`enum`,enum:[`day`,`week`,`month`],label:`Time Scale (Gantt only)`,defaultValue:`month`},{name:`rowLabel`,type:`string`,label:`Row Label (Gantt only)`,defaultValue:`Items`},{name:`minDate`,type:`string`,label:`Min Date (Gantt only)`,description:`Override auto-calculated min date (YYYY-MM-DD)`},{name:`maxDate`,type:`string`,label:`Max Date (Gantt only)`,description:`Override auto-calculated max date (YYYY-MM-DD)`},{name:`className`,type:`string`,label:`CSS Class`}],defaultProps:{variant:`vertical`,dateFormat:`short`,items:[{time:`2024-01-15`,title:`Project Started`,description:`Kickoff meeting and initial planning`,variant:`success`,icon:`🚀`},{time:`2024-02-01`,title:`First Milestone`,description:`Completed initial design phase`,variant:`info`,icon:`🎨`},{time:`2024-03-15`,title:`Beta Release`,description:`Released beta version to testers`,variant:`warning`,icon:`⚡`},{time:`2024-04-01`,title:`Launch`,description:`Official product launch`,variant:`success`,icon:`🎉`}]},examples:{vertical:{variant:`vertical`,dateFormat:`long`,items:[{time:`2024-01-15`,title:`Project Started`,description:`Kickoff meeting and initial planning`,variant:`success`},{time:`2024-02-01`,title:`First Milestone`,description:`Completed initial design phase`,variant:`info`}]},horizontal:{variant:`horizontal`,dateFormat:`short`,items:[{time:`2024-01-01`,title:`Q1`,description:`First quarter`,variant:`default`},{time:`2024-04-01`,title:`Q2`,description:`Second quarter`,variant:`info`},{time:`2024-07-01`,title:`Q3`,description:`Third quarter`,variant:`warning`},{time:`2024-10-01`,title:`Q4`,description:`Fourth quarter`,variant:`success`}]},gantt:{variant:`gantt`,dateFormat:`short`,timeScale:`month`,rowLabel:`Projects`,items:[{label:`Backend Development`,items:[{title:`API Design`,startDate:`2024-01-01`,endDate:`2024-01-31`,variant:`success`},{title:`Implementation`,startDate:`2024-02-01`,endDate:`2024-03-31`,variant:`info`}]},{label:`Frontend Development`,items:[{title:`UI Design`,startDate:`2024-01-15`,endDate:`2024-02-15`,variant:`warning`},{title:`Component Dev`,startDate:`2024-02-15`,endDate:`2024-04-15`,variant:`default`}]},{label:`Testing`,items:[{title:`QA Phase`,startDate:`2024-03-01`,endDate:`2024-04-30`,variant:`danger`}]}]}}});var T=(0,c.createSafeTranslation)({"timeline.bucket.overdue":`Overdue`,"timeline.bucket.today":`Today`,"timeline.bucket.tomorrow":`Tomorrow`,"timeline.bucket.thisWeek":`This week`,"timeline.bucket.nextWeek":`Next week`,"timeline.bucket.later":`Later`,"timeline.bucket.noDate":`No date`,"timeline.bucket.unassigned":`Unassigned`,"timeline.relative.today":`Today`,"timeline.relative.tomorrow":`Tomorrow`,"timeline.relative.yesterday":`Yesterday`,"timeline.relative.inDays":`In {{n}} days`,"timeline.relative.daysAgo":`{{n}} days ago`},`timeline.bucket.today`),E={fieldOptionLabel:(e,t,n,r)=>r,translateOptions:(e,t,n)=>n,fieldLabel:(e,t,n)=>n};function D(){return(0,a.useObjectLabel)()??E}var O=s.z.object({title:s.z.string().optional(),date:s.z.string().optional(),description:s.z.string().optional(),variant:s.z.string().optional()}),k=s.z.object({mapping:O.optional(),objectName:s.z.string().optional(),titleField:s.z.string().optional(),dateField:s.z.string().optional(),startDateField:s.z.string().optional(),endDateField:s.z.string().optional(),descriptionField:s.z.string().optional(),groupByField:s.z.string().optional(),colorField:s.z.string().optional(),scale:s.z.enum([`hour`,`day`,`week`,`month`,`quarter`,`year`]).optional()}),A=({schema:e,dataSource:s,className:c,onRowClick:l,onItemClick:u,...d})=>{let[f,p]=(0,t.useState)([]),[m,h]=(0,t.useState)(()=>{let t=Array.isArray(e.items)&&e.items.length>0,n=Array.isArray(d.data)&&d.data.length>0;return!t&&!n&&!!e.objectName}),[g,_]=(0,t.useState)(null),[v,y]=(0,t.useState)(0),[b,x]=(0,t.useState)(null),S=e.timeline;(0,t.useEffect)(()=>{let t=k.safeParse(e);t.success||console.warn(`[ObjectTimeline] Invalid timeline configuration:`,t.error.format())},[e]);let C=(0,a.useDataScope)(e.bind);(0,t.useEffect)(()=>{let t=!0;return(async()=>{if(!(!s||typeof s.getObjectSchema!=`function`||!e.objectName))try{let n=await s.getObjectSchema(e.objectName);t&&x(n)}catch(e){console.warn(`Failed to fetch object def for ObjectTimeline`,e)}})(),()=>{t=!1}},[e.objectName,s]),(0,t.useEffect)(()=>{e.objectName&&!C&&!e.items&&!d.data?(async()=>{if(!s||typeof s.find!=`function`||!e.objectName){h(!1);return}h(!0);try{let t=(0,i.buildExpandFields)(b?.fields),n=await s.find(e.objectName,{options:{$top:100},...t.length>0?{$expand:t}:{}}),r=(0,i.extractRecords)(n);p(r)}catch(e){console.error(e),_(e)}finally{h(!1)}})():h(!1)},[e.objectName,s,C,e.items,d.data,v,b]);let E=d.data||C||f,{t:O}=T(),{fieldOptionLabel:A}=D(),j=S?.titleField??e.mapping?.title??e.titleField??`name`,M=S?.startDateField??S?.dateField??e.mapping?.date??e.startDateField??e.dateField??`date`,N=S?.endDateField??e.endDateField??M,P=e.mapping?.description??e.descriptionField??`description`,F=e.mapping?.variant??`variant`,I=S?.groupByField??e.groupByField,L=S?.colorField??e.colorField,R=(0,t.useMemo)(()=>{if(e.items)return e.items;if(!E||!Array.isArray(E))return[];let t=b?.fields??{},n=e.objectName||``,r=e=>{if(!e||!t[e]?.options)return{};let n={};for(let r of t[e].options)r&&r.value!=null&&(n[String(r.value)]=r);return n},i=r(L),a=Array.isArray(S?.metaFields)?S.metaFields.filter(e=>typeof e==`string`&&e):[`status`,`priority`].filter(e=>t[e]),o={};for(let e of a)o[e]=r(e);let s=e=>{if(e==null||e===``)return;let t=i[String(e)];if(t?.color)return String(t.color);let n=String(e);if(/^#([0-9a-f]{3}){1,2}$/i.test(n)||n.startsWith(`rgb`)||n.startsWith(`hsl`))return n},c=(e,t,r)=>{if(t==null||t===``)return null;let i=r[String(t)];return{label:i?.label?A(n,e,String(t),i.label):String(t),color:i?.color}},l=E.map(e=>{let t=e[M],r=e[N],i=L?e[L]:void 0,l=I?e[I]:void 0,u=[];if(n)for(let t of a){let n=c(t,e[t],o[t]||{});n&&u.push({key:t,label:n.label,color:n.color})}return{title:e[j],time:t,startDate:t,endDate:r,description:e[P],variant:e[F]||`default`,color:s(i),group:l,meta:u,_data:e}});l.sort((e,t)=>(e.startDate?new Date(e.startDate).getTime():1/0)-(t.startDate?new Date(t.startDate).getTime():1/0));let u=new Date,d=e=>new Date(e.getFullYear(),e.getMonth(),e.getDate()).getTime(),f=d(u),p=864e5,m=f-(u.getDay()+6)%7*p+7*p,h=m+7*p,g=e=>{if(!e)return O(`timeline.bucket.noDate`);let t=d(new Date(e));return Number.isNaN(t)?O(`timeline.bucket.noDate`):t<f?O(`timeline.bucket.overdue`):t===f?O(`timeline.bucket.today`):t===f+p?O(`timeline.bucket.tomorrow`):O(t<m?`timeline.bucket.thisWeek`:t<h?`timeline.bucket.nextWeek`:`timeline.bucket.later`)};if(I&&!l.every(e=>e.group==null||e.group===``)){let e=r(I);return l.map(t=>{let n=c(I,t.group,e);return{...t,group:n?n.label:t.group!=null&&t.group!==``?String(t.group):O(`timeline.bucket.unassigned`)}})}return l.map(e=>({...e,group:g(e.startDate)}))},[e.items,E,b,e.objectName,j,M,N,P,F,L,I,O,A]),z=(0,t.useCallback)(async()=>{y(e=>e+1)},[]),{ref:B,isRefreshing:V,pullDistance:H}=(0,o.usePullToRefresh)({onRefresh:z,enabled:!!e.objectName&&!!s}),U=(0,a.useNavigationOverlay)({navigation:e.navigation,objectName:e.objectName,onRowClick:l??u}),W=S?.scale??e.scale,G={...e,items:R||[],className:c||e.className,...W?{timeScale:W}:{},onItemClick:e=>{let t=e._data||e;U.handleClick(t),u?.(t)}};return g?(0,r.jsxs)(`div`,{className:`p-4 text-destructive`,"data-testid":`timeline-error`,role:`alert`,children:[`Error loading timeline: `,g.message]}):m&&(!R||R.length===0)?(0,r.jsxs)(`div`,{className:`flex flex-col h-full min-h-[200px] p-4 gap-3`,"data-testid":`timeline-loading`,role:`status`,"aria-live":`polite`,"aria-busy":`true`,children:[(0,r.jsx)(`span`,{className:`sr-only`,children:`Loading timeline…`}),[0,1,2,3].map(e=>(0,r.jsxs)(`div`,{className:`flex items-start gap-3`,style:{opacity:Math.max(.3,1-e*.18)},children:[(0,r.jsx)(`div`,{className:`h-3 w-3 rounded-full bg-muted/70 animate-pulse mt-1.5 shrink-0`}),(0,r.jsxs)(`div`,{className:`flex-1 space-y-2`,children:[(0,r.jsx)(`div`,{className:`h-4 w-1/3 rounded bg-muted/70 animate-pulse`}),(0,r.jsx)(`div`,{className:`h-3 w-2/3 rounded bg-muted/50 animate-pulse`})]})]},e))]}):(0,r.jsxs)(`div`,{ref:B,className:`relative overflow-auto h-full min-w-0`,children:[H>0&&(0,r.jsx)(`div`,{className:`flex items-center justify-center text-xs text-muted-foreground`,style:{height:H},children:V?`Refreshing…`:`Pull to refresh`}),(0,r.jsx)(w,{schema:G}),U.isOverlay&&(0,r.jsx)(n.NavigationOverlay,{...U,title:`Timeline Item`,children:e=>(0,r.jsx)(`div`,{className:`space-y-3`,children:Object.entries(e).map(([e,t])=>(0,r.jsxs)(`div`,{className:`flex flex-col`,children:[(0,r.jsx)(`span`,{className:`text-xs font-medium text-muted-foreground uppercase tracking-wide`,children:e.replace(/_/g,` `)}),(0,r.jsx)(`span`,{className:`text-sm`,children:String(t??`—`)})]},e))})})]})},j=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`ol`,{ref:i,className:(0,n.cn)(`relative ml-3 border-l border-gray-200`,e),...t}));j.displayName=`Timeline`;var M=(0,n.cva)(`ml-6`,{variants:{density:{default:`mb-10`,compact:`mb-3`,comfortable:`mb-6`}},defaultVariants:{density:`default`}}),N=t.forwardRef(({className:e,density:t,...i},a)=>(0,r.jsx)(`li`,{ref:a,className:(0,n.cn)(M({density:t}),e),...i}));N.displayName=`TimelineItem`;var P=(0,n.cva)(`absolute -left-3 w-6 h-6 rounded-full border-2 flex items-center justify-center`,{variants:{variant:{default:`bg-blue-200 border-blue-400`,success:`bg-emerald-200 border-emerald-500`,warning:`bg-amber-200 border-amber-500`,danger:`bg-red-200 border-red-500`,info:`bg-purple-200 border-purple-500`,todo:`bg-slate-200 border-slate-400`,"in-progress":`bg-blue-200 border-blue-500`,done:`bg-emerald-200 border-emerald-500`}},defaultVariants:{variant:`default`}}),F=t.forwardRef(({className:e,variant:t=`default`,...i},a)=>(0,r.jsx)(`div`,{ref:a,className:(0,n.cn)(P({variant:t}),e),...i}));F.displayName=`TimelineMarker`;var I=t.forwardRef(({className:e,...t},n)=>(0,r.jsx)(`div`,{ref:n,className:e,...t}));I.displayName=`TimelineContent`;var L=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`h3`,{ref:i,className:(0,n.cn)(`font-semibold text-lg mb-1`,e),...t}));L.displayName=`TimelineTitle`;var R=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`time`,{ref:i,className:(0,n.cn)(`text-sm font-normal text-gray-500 mb-2 block`,e),...t}));R.displayName=`TimelineTime`;var z=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`p`,{ref:i,className:(0,n.cn)(`text-base text-gray-700`,e),...t}));z.displayName=`TimelineDescription`;var B=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`div`,{ref:i,className:(0,n.cn)(`relative flex overflow-x-auto py-8`,e),...t}));B.displayName=`TimelineHorizontal`;var V=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`div`,{ref:i,className:(0,n.cn)(`shrink-0 w-64 relative`,e),...t}));V.displayName=`TimelineHorizontalItem`;var H=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`div`,{ref:i,className:(0,n.cn)(`relative w-full border rounded-lg overflow-hidden`,e),...t}));H.displayName=`TimelineGantt`;var U=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`div`,{ref:i,className:(0,n.cn)(`flex border-b bg-gray-50`,e),...t}));U.displayName=`TimelineGanttHeader`;var W=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`div`,{ref:i,className:(0,n.cn)(`w-48 border-r bg-white`,e),...t}));W.displayName=`TimelineGanttRowLabels`;var G=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`div`,{ref:i,className:(0,n.cn)(`flex-1 overflow-x-auto`,e),...t}));G.displayName=`TimelineGanttGrid`;var K=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`div`,{ref:i,className:(0,n.cn)(`flex items-center border-b min-h-12`,e),...t}));K.displayName=`TimelineGanttRow`;var q=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`div`,{ref:i,className:(0,n.cn)(`px-4 py-2 font-medium text-sm truncate`,e),...t}));q.displayName=`TimelineGanttLabel`;var J=t.forwardRef(({className:e,start:t=0,width:i=100,variant:a=`default`,...o},s)=>(0,r.jsx)(`div`,{ref:s,className:(0,n.cn)(`absolute h-8 rounded-md transition-colors cursor-pointer`,{default:`bg-blue-500 hover:bg-blue-600`,success:`bg-green-500 hover:bg-green-600`,warning:`bg-yellow-500 hover:bg-yellow-600`,danger:`bg-red-500 hover:bg-red-600`,info:`bg-purple-500 hover:bg-purple-600`}[a],e),style:{left:`${t}%`,width:`${i}%`},...o}));J.displayName=`TimelineGanttBar`;var Y=t.forwardRef(({className:e,...t},i)=>(0,r.jsx)(`div`,{ref:i,className:(0,n.cn)(`px-2 py-1 text-white text-xs font-medium truncate`,e),...t}));Y.displayName=`TimelineGanttBarContent`;var X=({schema:e,...t})=>{let{dataSource:n}=(0,a.useSchemaContext)()||{};return(0,r.jsx)(A,{schema:e,dataSource:n,...t})};i.ComponentRegistry.register(`object-timeline`,X,{namespace:`plugin-timeline`,label:`Object Timeline`,category:`view`,inputs:[{name:`objectName`,type:`string`,label:`Object Name`,required:!0},{name:`variant`,type:`enum`,enum:[`vertical`,`horizontal`,`gantt`],defaultValue:`vertical`}]}),i.ComponentRegistry.register(`timeline`,X,{namespace:`view`,label:`Timeline View`,category:`view`,inputs:[{name:`objectName`,type:`string`,label:`Object Name`,required:!0},{name:`variant`,type:`enum`,enum:[`vertical`,`horizontal`,`gantt`],defaultValue:`vertical`}]}),e.ObjectTimeline=A,e.ObjectTimelineRenderer=X,e.TIMELINE_SCALES=g,e.Timeline=j,e.TimelineContent=I,e.TimelineDescription=z,e.TimelineGantt=H,e.TimelineGanttBar=J,e.TimelineGanttBarContent=Y,e.TimelineGanttGrid=G,e.TimelineGanttHeader=U,e.TimelineGanttLabel=q,e.TimelineGanttRow=K,e.TimelineGanttRowLabels=W,e.TimelineHorizontal=B,e.TimelineHorizontalItem=V,e.TimelineItem=N,e.TimelineMarker=F,e.TimelineRenderer=w,e.TimelineTime=R,e.TimelineTitle=L,e.generateTimeScaleHeaders=v,e.resolveTimelineScale=_,e.timelineItemVariants=M,e.timelineMarkerVariants=P});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@object-ui/plugin-timeline",
|
|
3
|
-
"version": "17.
|
|
3
|
+
"version": "17.3.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"description": "Timeline component plugin for Object UI",
|
|
@@ -24,28 +24,28 @@
|
|
|
24
24
|
}
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@objectstack/spec": "^17.0.0-rc.
|
|
27
|
+
"@objectstack/spec": "^17.0.0-rc.2",
|
|
28
28
|
"class-variance-authority": "^0.7.1",
|
|
29
29
|
"zod": "^4.4.3",
|
|
30
|
-
"@object-ui/components": "17.
|
|
31
|
-
"@object-ui/core": "17.
|
|
32
|
-
"@object-ui/i18n": "17.
|
|
33
|
-
"@object-ui/mobile": "17.
|
|
34
|
-
"@object-ui/react": "17.
|
|
35
|
-
"@object-ui/types": "17.
|
|
30
|
+
"@object-ui/components": "17.3.0",
|
|
31
|
+
"@object-ui/core": "17.3.0",
|
|
32
|
+
"@object-ui/i18n": "17.3.0",
|
|
33
|
+
"@object-ui/mobile": "17.3.0",
|
|
34
|
+
"@object-ui/react": "17.3.0",
|
|
35
|
+
"@object-ui/types": "17.3.0"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"react": "^18.0.0 || ^19.0.0",
|
|
39
39
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@types/react": "19.2.
|
|
43
|
-
"@types/react-dom": "19.2.
|
|
44
|
-
"@vitejs/plugin-react": "^6.0.
|
|
42
|
+
"@types/react": "19.2.18",
|
|
43
|
+
"@types/react-dom": "19.2.4",
|
|
44
|
+
"@vitejs/plugin-react": "^6.0.5",
|
|
45
45
|
"typescript": "^6.0.3",
|
|
46
|
-
"vite": "^8.
|
|
46
|
+
"vite": "^8.2.0",
|
|
47
47
|
"vite-plugin-dts": "^5.0.3",
|
|
48
|
-
"@object-ui/data-objectstack": "17.
|
|
48
|
+
"@object-ui/data-objectstack": "17.3.0"
|
|
49
49
|
},
|
|
50
50
|
"keywords": [
|
|
51
51
|
"objectui",
|