pixelize-design-library 2.3.11 → 2.3.13
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/.cursor/modules/data-display/MODULE.md +1 -0
- package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts +2 -2
- package/dist/Components/NoteTextArea/NoteTextAreaProps.d.ts.map +1 -1
- package/dist/Components/Timeline/Timeline.d.ts +1 -1
- package/dist/Components/Timeline/Timeline.d.ts.map +1 -1
- package/dist/Components/Timeline/Timeline.js +39 -13
- package/dist/Components/Timeline/TimelineProps.d.ts +17 -0
- package/dist/Components/Timeline/TimelineProps.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -12,6 +12,7 @@ Tag, Timeline, Reorder, Divider, Trail.
|
|
|
12
12
|
|
|
13
13
|
## Key rules
|
|
14
14
|
|
|
15
|
+
- Timeline: each event card renders its manual notes from `event.notes` (`TimelineNote[]` — `title`, `note`, `attachments[]`, `created_by`, `created_at`). Adding a note is event-scoped via the per-card "Add note" button → `onAddNote(note, title, files, event, index)`; the consumer persists it against `event.logs_id` and re-supplies it back in `event.notes`. Attachments show as links opening `attachment.url`.
|
|
15
16
|
- Trail includes editable cell demos
|
|
16
17
|
- Tag styling lives in `Tag.styles.tsx` (Chakra component theme), not hardcoded in `Tag.tsx`
|
|
17
18
|
- Tag sizes: `xs | sm | md | lg`; variants: `solid | outline | subtle`
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { LegacyRef } from "react";
|
|
2
2
|
export type NoteTextAreaProps = {
|
|
3
|
-
width
|
|
3
|
+
width?: number | string;
|
|
4
4
|
handleSubmit: (noteValue: string, titleValue: string, file: File[], resetState: void) => void;
|
|
5
5
|
value?: string;
|
|
6
6
|
title?: string;
|
|
7
7
|
file?: File[];
|
|
8
8
|
isEditable?: boolean;
|
|
9
9
|
handleCancel?: (isActive: boolean) => void;
|
|
10
|
-
saveButtonLoading
|
|
10
|
+
saveButtonLoading?: boolean;
|
|
11
11
|
maxFileSize?: number;
|
|
12
12
|
maxFilesSizeError?: string;
|
|
13
13
|
maxNoteWordCount?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NoteTextAreaProps.d.ts","sourceRoot":"","sources":["../../../src/Components/NoteTextArea/NoteTextAreaProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"NoteTextAreaProps.d.ts","sourceRoot":"","sources":["../../../src/Components/NoteTextArea/NoteTextAreaProps.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,YAAY,EAAE,CACZ,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,IAAI,EAAE,EACZ,UAAU,EAAE,IAAI,KACb,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,GAAG,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { TimelineProps } from "./TimelineProps";
|
|
2
|
-
declare const Timeline: ({ timelineEvents, onEventClick }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const Timeline: ({ timelineEvents, onEventClick, onAddNote, showAddNote }: TimelineProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default Timeline;
|
|
4
4
|
//# sourceMappingURL=Timeline.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/Components/Timeline/Timeline.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Timeline.d.ts","sourceRoot":"","sources":["../../../src/Components/Timeline/Timeline.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAkB,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAMhE,QAAA,MAAM,QAAQ,GAAI,0DAAkE,aAAa,4CA2oBhG,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -1,15 +1,21 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
7
|
const react_1 = require("@chakra-ui/react");
|
|
5
8
|
const lucide_react_1 = require("lucide-react");
|
|
6
9
|
const useCustomTheme_1 = require("../../Theme/useCustomTheme");
|
|
7
10
|
const functions_1 = require("../../Utils/functions");
|
|
8
|
-
const
|
|
11
|
+
const NoteTextArea_1 = __importDefault(require("../NoteTextArea/NoteTextArea"));
|
|
12
|
+
const react_2 = require("react");
|
|
13
|
+
const Timeline = ({ timelineEvents, onEventClick, onAddNote, showAddNote = false }) => {
|
|
9
14
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
10
15
|
const theme = (0, useCustomTheme_1.useCustomTheme)();
|
|
11
16
|
const colors = (_a = theme.colors) !== null && _a !== void 0 ? _a : {};
|
|
12
17
|
const isMobile = (0, react_1.useBreakpointValue)({ base: true, md: false });
|
|
18
|
+
const [activeNoteEventIndex, setActiveNoteEventIndex] = (0, react_2.useState)(null);
|
|
13
19
|
const formatTimestamp = (timestamp, type) => {
|
|
14
20
|
if (typeof timestamp === "string" && !timestamp.match(/^\d+$/)) {
|
|
15
21
|
const date = new Date(timestamp);
|
|
@@ -139,18 +145,36 @@ const Timeline = ({ timelineEvents, onEventClick }) => {
|
|
|
139
145
|
// The colored event card (shared by both the desktop "tree" and mobile rail).
|
|
140
146
|
// `accent` decides which edge carries the colored bar (pointing toward the spine).
|
|
141
147
|
const EventCard = ({ event, index, accent, }) => {
|
|
142
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
|
|
148
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3;
|
|
143
149
|
const scale = getEventScale(event.title);
|
|
144
150
|
const changes = parseChanges(event.changes);
|
|
145
151
|
const clickable = typeof onEventClick === "function";
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
152
|
+
const isActiveNote = activeNoteEventIndex === index;
|
|
153
|
+
const [isHovered, setIsHovered] = (0, react_2.useState)(false);
|
|
154
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.Box, { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", zIndex: 1, bg: (_a = colors.white) !== null && _a !== void 0 ? _a : "#fff", border: `0.063rem solid ${(_c = (_b = colors.boxborder) === null || _b === void 0 ? void 0 : _b[300]) !== null && _c !== void 0 ? _c : (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200]}`, borderInlineStartWidth: accent === "left" ? "0.1875rem" : undefined, borderInlineEndWidth: accent === "right" ? "0.1875rem" : undefined, borderInlineStartColor: accent === "left" ? scale === null || scale === void 0 ? void 0 : scale[400] : undefined, borderInlineEndColor: accent === "right" ? scale === null || scale === void 0 ? void 0 : scale[400] : undefined, borderRadius: "0.625rem", px: 3.5, py: 2.5, transition: "all 0.15s ease", cursor: clickable ? "pointer" : "default", onClick: clickable ? () => onEventClick(event, index) : undefined, _hover: {
|
|
155
|
+
borderColor: (_e = scale === null || scale === void 0 ? void 0 : scale[300]) !== null && _e !== void 0 ? _e : (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[300],
|
|
156
|
+
boxShadow: (_g = theme.shadows) === null || _g === void 0 ? void 0 : _g.md,
|
|
157
|
+
transform: clickable ? "translateY(-1px)" : undefined,
|
|
158
|
+
}, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, flexWrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.8125rem", fontWeight: 600, color: (_j = (_h = colors.text) === null || _h === void 0 ? void 0 : _h[800]) !== null && _j !== void 0 ? _j : (_k = colors.gray) === null || _k === void 0 ? void 0 : _k[800], noOfLines: 1, children: event.action_from }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", fontSize: "0.6875rem", fontWeight: 600, lineHeight: "1", textTransform: "capitalize", color: (_l = scale === null || scale === void 0 ? void 0 : scale[700]) !== null && _l !== void 0 ? _l : scale === null || scale === void 0 ? void 0 : scale[600], bg: scale === null || scale === void 0 ? void 0 : scale[50], border: `0.063rem solid ${(_m = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _m !== void 0 ? _m : (_o = colors.gray) === null || _o === void 0 ? void 0 : _o[200]}`, borderRadius: "full", px: 2, py: 1, children: event.title })] }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", color: (_p = colors.gray) === null || _p === void 0 ? void 0 : _p[500], whiteSpace: "nowrap", children: formatTimestamp(event.created_at, "time") })] }), changes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 1, mt: 2, children: changes.map((c, i) => {
|
|
159
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
160
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, fontSize: "0.6875rem", lineHeight: "1.4", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, color: (_b = (_a = colors.text) === null || _a === void 0 ? void 0 : _a[700]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[700], children: (0, functions_1.toWords)(c.field) }), c.from !== null && c.from !== undefined && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[500], bg: (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[50], borderRadius: "0.25rem", px: 1.5, textDecoration: "line-through", maxW: "10rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.from) }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[400], display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { size: 11 }) })] })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_j = (_h = (_g = colors.semantic) === null || _g === void 0 ? void 0 : _g.success) === null || _h === void 0 ? void 0 : _h[700]) !== null && _j !== void 0 ? _j : (_k = colors.green) === null || _k === void 0 ? void 0 : _k[700], bg: (_o = (_m = (_l = colors.semantic) === null || _l === void 0 ? void 0 : _l.success) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : (_p = colors.green) === null || _p === void 0 ? void 0 : _p[50], borderRadius: "0.25rem", px: 1.5, maxW: "12rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: String(c.to) })] }, `${c.field}-${i}`));
|
|
161
|
+
}) })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", gap: 2, mt: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip, { label: (0, functions_1.toWords)(event.action_by), placement: "top", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "1.25rem", minW: "1.25rem", borderRadius: "full", bg: (_s = (_r = (_q = colors.primary) === null || _q === void 0 ? void 0 : _q.opacity) === null || _r === void 0 ? void 0 : _r[16]) !== null && _s !== void 0 ? _s : (_t = colors.primary) === null || _t === void 0 ? void 0 : _t[50], color: (_u = colors.primary) === null || _u === void 0 ? void 0 : _u[600], fontSize: "0.5625rem", fontWeight: 700, children: initials((0, functions_1.toWords)(event.action_by)) }) }), (0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "0.6875rem", color: (_v = colors.gray) === null || _v === void 0 ? void 0 : _v[500], children: ["by", " ", (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_x = (_w = colors.text) === null || _w === void 0 ? void 0 : _w[700]) !== null && _x !== void 0 ? _x : (_y = colors.gray) === null || _y === void 0 ? void 0 : _y[700], fontWeight: 500, children: (0, functions_1.toWords)(event.action_by) })] })] }), showAddNote && (isHovered || isActiveNote) && ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", onClick: (e) => {
|
|
162
|
+
e.stopPropagation();
|
|
163
|
+
setActiveNoteEventIndex(isActiveNote ? null : index);
|
|
164
|
+
}, px: 2, py: 1, borderRadius: "0.375rem", fontSize: "0.75rem", fontWeight: 600, color: (_z = colors.primary) === null || _z === void 0 ? void 0 : _z[700], bg: "transparent", cursor: "pointer", _hover: {
|
|
165
|
+
bg: (_0 = colors.primary) === null || _0 === void 0 ? void 0 : _0[50],
|
|
166
|
+
}, children: isActiveNote ? "Hide note" : "Add note" }))] }), event.notes && event.notes.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { direction: "column", gap: 2, mt: 2, pt: 2, borderTop: `0.063rem solid ${(_2 = (_1 = colors.gray) === null || _1 === void 0 ? void 0 : _1[100]) !== null && _2 !== void 0 ? _2 : (_3 = colors.boxborder) === null || _3 === void 0 ? void 0 : _3[200]}`, children: event.notes.map((note, noteIndex) => {
|
|
167
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
168
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.Box, { bg: (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[50], border: `0.063rem solid ${(_c = (_b = colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors.gray) === null || _d === void 0 ? void 0 : _d[200]}`, borderRadius: "0.5rem", px: 2.5, py: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1.5, mb: note.note ? 1 : 0, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", color: (_e = colors.primary) === null || _e === void 0 ? void 0 : _e[500], display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.StickyNote, { size: 12 }) }), note.title && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", fontWeight: 700, color: (_g = (_f = colors.text) === null || _f === void 0 ? void 0 : _f[800]) !== null && _g !== void 0 ? _g : (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[800], noOfLines: 1, children: note.title }))] }), note.note && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.6875rem", color: (_k = (_j = colors.text) === null || _j === void 0 ? void 0 : _j[700]) !== null && _k !== void 0 ? _k : (_l = colors.gray) === null || _l === void 0 ? void 0 : _l[700], whiteSpace: "pre-wrap", children: note.note })), note.attachments && note.attachments.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.Flex, { wrap: "wrap", gap: 1.5, mt: 1.5, children: note.attachments.map((att, attIndex) => {
|
|
169
|
+
var _a, _b, _c;
|
|
170
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { as: "a", href: att.url, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), align: "center", gap: 1, px: 1.5, py: 0.5, borderRadius: "full", bg: (_a = colors.primary) === null || _a === void 0 ? void 0 : _a[50], color: (_b = colors.primary) === null || _b === void 0 ? void 0 : _b[700], fontSize: "0.625rem", maxW: "100%", _hover: { bg: (_c = colors.primary) === null || _c === void 0 ? void 0 : _c[100] }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Paperclip, { size: 10 }), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "span", noOfLines: 1, maxW: "9rem", children: att.name || "attachment" })] }, attIndex));
|
|
171
|
+
}) })), (note.created_by || note.created_at) && ((0, jsx_runtime_1.jsxs)(react_1.Text, { fontSize: "0.625rem", color: (_m = colors.gray) === null || _m === void 0 ? void 0 : _m[500], mt: 1, children: [note.created_by ? (0, functions_1.toWords)(note.created_by) : "", note.created_by && note.created_at ? " · " : "", note.created_at
|
|
172
|
+
? formatTimestamp(note.created_at, "time")
|
|
173
|
+
: ""] }))] }, (_o = note.log_note_id) !== null && _o !== void 0 ? _o : noteIndex));
|
|
174
|
+
}) }))] }), isActiveNote && ((0, jsx_runtime_1.jsx)(react_1.Box, { mt: 2, children: (0, jsx_runtime_1.jsx)(NoteTextArea_1.default, { handleSubmit: (note, title, files) => {
|
|
175
|
+
onAddNote === null || onAddNote === void 0 ? void 0 : onAddNote(note, title, files, event, index);
|
|
176
|
+
setActiveNoteEventIndex(null);
|
|
177
|
+
}, handleCancel: () => setActiveNoteEventIndex(null) }) }))] }));
|
|
154
178
|
};
|
|
155
179
|
const NODE = "1.875rem"; // 30px node, centered on the spine
|
|
156
180
|
const NODE_RADIUS = "0.9375rem";
|
|
@@ -159,12 +183,13 @@ const Timeline = ({ timelineEvents, onEventClick }) => {
|
|
|
159
183
|
// Mobile: single left rail (alternating doesn't read well on narrow widths)
|
|
160
184
|
// -------------------------------------------------------------------------
|
|
161
185
|
if (isMobile) {
|
|
162
|
-
return ((0, jsx_runtime_1.jsx)(react_1.Box, { maxW: "100%", px: 2, py: 2, children: Object.keys(groupedEvents).map((date) => {
|
|
186
|
+
return ((0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", maxW: "100%", px: 2, py: 2, children: Object.keys(groupedEvents).map((date) => {
|
|
163
187
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
164
188
|
return ((0, jsx_runtime_1.jsxs)(react_1.Box, { mb: 2, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 3, mb: 4, mt: 2, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "0.75rem", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.02em", color: (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[500], bg: (_b = colors.gray) === null || _b === void 0 ? void 0 : _b[50], border: `0.063rem solid ${(_d = (_c = colors.boxborder) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]}`, borderRadius: "full", px: 3, py: 1, whiteSpace: "nowrap", children: date }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", h: "0.063rem", bg: (_g = (_f = colors.boxborder) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[200] })] }), (0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", left: NODE_RADIUS, top: "0.5rem", bottom: "0.5rem", w: "0.1875rem", borderRadius: "full", bg: (_k = (_j = colors.gray) === null || _j === void 0 ? void 0 : _j[300]) !== null && _k !== void 0 ? _k : (_l = colors.boxborder) === null || _l === void 0 ? void 0 : _l[400], transform: "translateX(-50%)" }), groupedEvents[date].map((event, index) => {
|
|
165
189
|
var _a, _b, _c, _d;
|
|
166
190
|
const scale = getEventScale(event.title);
|
|
167
|
-
|
|
191
|
+
const globalIndex = timelineEvents.indexOf(event);
|
|
192
|
+
return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "flex-start", gap: 3, mb: index === groupedEvents[date].length - 1 ? 0 : 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: NODE, minW: NODE, borderRadius: "full", bg: scale === null || scale === void 0 ? void 0 : scale[50], color: scale === null || scale === void 0 ? void 0 : scale[600], border: `0.125rem solid ${(_a = colors.white) !== null && _a !== void 0 ? _a : "#fff"}`, boxShadow: `0 0 0 0.063rem ${(_b = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[200]}`, zIndex: 1, children: getIcon(event, 14) }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", minW: 0, children: (0, jsx_runtime_1.jsx)(EventCard, { event: event, index: globalIndex, accent: "left" }) })] }, `${(_d = event.logs_id) !== null && _d !== void 0 ? _d : date}-${index}`));
|
|
168
193
|
})] })] }, date));
|
|
169
194
|
}) }));
|
|
170
195
|
}
|
|
@@ -177,9 +202,10 @@ const Timeline = ({ timelineEvents, onEventClick }) => {
|
|
|
177
202
|
var _a, _b, _c, _d, _e, _f;
|
|
178
203
|
const isLeft = index % 2 === 0;
|
|
179
204
|
const scale = getEventScale(event.title);
|
|
205
|
+
const globalIndex = timelineEvents.indexOf(event);
|
|
180
206
|
return ((0, jsx_runtime_1.jsxs)(react_1.Box, { position: "relative", mb: index === groupedEvents[date].length - 1 ? 0 : 5, minH: NODE, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { position: "absolute", top: "1.375rem", h: "0.125rem", w: "0.8125rem", bg: (_a = scale === null || scale === void 0 ? void 0 : scale[300]) !== null && _a !== void 0 ? _a : (_b = colors.gray) === null || _b === void 0 ? void 0 : _b[300], left: isLeft
|
|
181
207
|
? `calc(50% - ${SPINE_GAP})`
|
|
182
|
-
: `calc(50% + ${NODE_RADIUS})`, zIndex: 0 }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", left: "50%", top: "0.5rem", transform: "translateX(-50%)", align: "center", justify: "center", boxSize: NODE, borderRadius: "full", bg: scale === null || scale === void 0 ? void 0 : scale[50], color: scale === null || scale === void 0 ? void 0 : scale[600], border: `0.125rem solid ${(_c = colors.white) !== null && _c !== void 0 ? _c : "#fff"}`, boxShadow: `0 0 0 0.063rem ${(_d = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]}`, zIndex: 2, children: getIcon(event, 15) }), (0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", zIndex: 1, w: `calc(50% - ${SPINE_GAP})`, ml: isLeft ? 0 : `calc(50% + ${SPINE_GAP})`, children: (0, jsx_runtime_1.jsx)(EventCard, { event: event, index:
|
|
208
|
+
: `calc(50% + ${NODE_RADIUS})`, zIndex: 0 }), (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "absolute", left: "50%", top: "0.5rem", transform: "translateX(-50%)", align: "center", justify: "center", boxSize: NODE, borderRadius: "full", bg: scale === null || scale === void 0 ? void 0 : scale[50], color: scale === null || scale === void 0 ? void 0 : scale[600], border: `0.125rem solid ${(_c = colors.white) !== null && _c !== void 0 ? _c : "#fff"}`, boxShadow: `0 0 0 0.063rem ${(_d = scale === null || scale === void 0 ? void 0 : scale[200]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[200]}`, zIndex: 2, children: getIcon(event, 15) }), (0, jsx_runtime_1.jsx)(react_1.Box, { position: "relative", zIndex: 1, w: `calc(50% - ${SPINE_GAP})`, ml: isLeft ? 0 : `calc(50% + ${SPINE_GAP})`, children: (0, jsx_runtime_1.jsx)(EventCard, { event: event, index: globalIndex, accent: isLeft ? "right" : "left" }) })] }, `${(_f = event.logs_id) !== null && _f !== void 0 ? _f : date}-${index}`));
|
|
183
209
|
})] }, date));
|
|
184
210
|
})] }));
|
|
185
211
|
};
|
|
@@ -2,12 +2,28 @@ export interface TimelineProps {
|
|
|
2
2
|
events?: TimelineEvent[];
|
|
3
3
|
timelineEvents: TimelineEvents[];
|
|
4
4
|
onEventClick?: (event: TimelineEvents, index: number) => void;
|
|
5
|
+
onAddNote?: (note: string, title: string, files: File[], event: TimelineEvents, index: number) => void;
|
|
6
|
+
showAddNote?: boolean;
|
|
5
7
|
}
|
|
6
8
|
export interface TimelineEvent {
|
|
7
9
|
title: string;
|
|
8
10
|
description: string;
|
|
9
11
|
time: string;
|
|
10
12
|
}
|
|
13
|
+
export interface TimelineNoteAttachment {
|
|
14
|
+
url: string;
|
|
15
|
+
name?: string;
|
|
16
|
+
size?: number | null;
|
|
17
|
+
}
|
|
18
|
+
export interface TimelineNote {
|
|
19
|
+
log_note_id: number;
|
|
20
|
+
logs_id?: number;
|
|
21
|
+
title?: string | null;
|
|
22
|
+
note?: string | null;
|
|
23
|
+
attachments?: TimelineNoteAttachment[] | null;
|
|
24
|
+
created_at?: number | string | null;
|
|
25
|
+
created_by?: string | null;
|
|
26
|
+
}
|
|
11
27
|
export interface TimelineEvents {
|
|
12
28
|
logs_id: number;
|
|
13
29
|
title: string;
|
|
@@ -17,5 +33,6 @@ export interface TimelineEvents {
|
|
|
17
33
|
action_by: string;
|
|
18
34
|
created_at: number;
|
|
19
35
|
changes: unknown;
|
|
36
|
+
notes?: TimelineNote[] | null;
|
|
20
37
|
}
|
|
21
38
|
//# sourceMappingURL=TimelineProps.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimelineProps.d.ts","sourceRoot":"","sources":["../../../src/Components/Timeline/TimelineProps.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,cAAc,EAAE,cAAc,EAAE,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"TimelineProps.d.ts","sourceRoot":"","sources":["../../../src/Components/Timeline/TimelineProps.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,cAAc,EAAE,cAAc,EAAE,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvG,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,sBAAsB;IACrC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,sBAAsB,EAAE,GAAG,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;CAC/B"}
|