albinasoft-ui-package 1.1.31 → 1.1.32
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.
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
.timeline-item {
|
|
2
|
+
position: relative;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.timeline-line {
|
|
6
|
+
position: absolute;
|
|
7
|
+
left: 1.15rem;
|
|
8
|
+
top: 2rem;
|
|
9
|
+
height: calc(100% - 2rem);
|
|
10
|
+
width: 0.15rem;
|
|
11
|
+
background-color: var(--bs-body-color);
|
|
12
|
+
z-index: 0;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.timeline-dots {
|
|
16
|
+
position: absolute;
|
|
17
|
+
top: 0.25rem !important;
|
|
18
|
+
left: -0.025rem !important;
|
|
19
|
+
width: 2rem;
|
|
20
|
+
height: 2rem;
|
|
21
|
+
border-radius: 50%;
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
z-index: 1;
|
|
24
|
+
background-color: white;
|
|
25
|
+
border-width: 2px;
|
|
26
|
+
border-style: solid;
|
|
27
|
+
display: flex;
|
|
28
|
+
align-items: center;
|
|
29
|
+
justify-content: center;
|
|
30
|
+
font-size: 0.9rem;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.expandable-content {
|
|
34
|
+
max-height: 0;
|
|
35
|
+
opacity: 0;
|
|
36
|
+
overflow: hidden;
|
|
37
|
+
transition: all 0.4s ease-in-out;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.expandable-content.expanded {
|
|
41
|
+
max-height: 10000px;
|
|
42
|
+
opacity: 1;
|
|
43
|
+
}
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import "../assets/css/custom-timeline.css";
|
|
2
3
|
export interface AdditionalInfo {
|
|
3
4
|
time: string;
|
|
4
5
|
description: React.ReactNode;
|
|
5
6
|
}
|
|
6
|
-
interface TimelineElement {
|
|
7
|
+
export interface TimelineElement {
|
|
7
8
|
title: string;
|
|
8
9
|
mainTime: string;
|
|
9
10
|
description?: string;
|
|
10
11
|
additionalInfos?: AdditionalInfo[];
|
|
11
12
|
dotColor?: DotColor;
|
|
13
|
+
elements?: TimelineElement[];
|
|
12
14
|
}
|
|
13
15
|
interface CustomTimelineProps {
|
|
14
16
|
timelineElements: TimelineElement[];
|
|
@@ -22,14 +22,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
22
22
|
__setModuleDefault(result, mod);
|
|
23
23
|
return result;
|
|
24
24
|
};
|
|
25
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
-
};
|
|
28
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
26
|
exports.DotColor = exports.CustomTimeline = void 0;
|
|
30
|
-
var react_1 =
|
|
27
|
+
var react_1 = __importStar(require("react"));
|
|
31
28
|
var fa_1 = require("react-icons/fa");
|
|
32
29
|
var CustomText_1 = __importStar(require("./CustomText"));
|
|
30
|
+
require("../assets/css/custom-timeline.css");
|
|
33
31
|
var DotColor;
|
|
34
32
|
(function (DotColor) {
|
|
35
33
|
DotColor["PRIMARY"] = "border-primary text-primary";
|
|
@@ -44,19 +42,39 @@ var DotColor;
|
|
|
44
42
|
exports.DotColor = DotColor;
|
|
45
43
|
var CustomTimeline = function (_a) {
|
|
46
44
|
var timelineElements = _a.timelineElements;
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
45
|
+
var _b = (0, react_1.useState)(new Set()), expandedItems = _b[0], setExpandedItems = _b[1];
|
|
46
|
+
var toggleItem = function (key) {
|
|
47
|
+
setExpandedItems(function (prev) {
|
|
48
|
+
var newSet = new Set(prev);
|
|
49
|
+
newSet.has(key) ? newSet.delete(key) : newSet.add(key);
|
|
50
|
+
return newSet;
|
|
51
|
+
});
|
|
52
|
+
};
|
|
53
|
+
var renderTimelineElements = function (elements, level, parentKey) {
|
|
54
|
+
if (level === void 0) { level = 0; }
|
|
55
|
+
if (parentKey === void 0) { parentKey = ""; }
|
|
56
|
+
return (react_1.default.createElement("ul", { className: "list-inline p-0 m-0 w-100 ms-".concat(level * 3) }, elements.map(function (element, index) {
|
|
57
|
+
var _a;
|
|
58
|
+
var key = parentKey ? "".concat(parentKey, ".").concat(index) : "".concat(index);
|
|
59
|
+
var isExpanded = expandedItems.has(key);
|
|
60
|
+
return (react_1.default.createElement("li", { key: key, className: "w-100 mb-3 position-relative ps-4 timeline-item" },
|
|
61
|
+
react_1.default.createElement("div", { className: "timeline-line" }),
|
|
62
|
+
react_1.default.createElement("div", { className: "timeline-dots ".concat(element.dotColor || DotColor.PRIMARY), onClick: function () { return toggleItem(key); } }, isExpanded ? react_1.default.createElement(fa_1.FaChevronDown, null) : react_1.default.createElement(fa_1.FaChevronRight, null)),
|
|
63
|
+
react_1.default.createElement("div", { className: "ms-3 mt-2" },
|
|
64
|
+
react_1.default.createElement(CustomText_1.default, { value: element.title, textType: CustomText_1.TextType.HEADING, lineHeight: CustomText_1.LineHeight.XXS })),
|
|
65
|
+
react_1.default.createElement("div", { className: "expandable-content ms-3 ".concat(isExpanded ? "expanded" : "collapsed") },
|
|
66
|
+
react_1.default.createElement(CustomText_1.default, { value: element.mainTime, textType: CustomText_1.TextType.PARAGRAPH, fontSize: CustomText_1.FontSize.XXS, lineHeight: CustomText_1.LineHeight.M, italic: true }),
|
|
67
|
+
element.description && (react_1.default.createElement("div", { className: "mb-2" },
|
|
68
|
+
react_1.default.createElement(CustomText_1.default, { value: element.description, textType: CustomText_1.TextType.PARAGRAPH, fontSize: CustomText_1.FontSize.XS, lineHeight: CustomText_1.LineHeight.XXS }))), (_a = element.additionalInfos) === null || _a === void 0 ? void 0 :
|
|
69
|
+
_a.map(function (info, infoIndex) { return (react_1.default.createElement("div", { key: infoIndex, className: "alert alert-secondary d-flex align-items-center gap-3 me-5" },
|
|
70
|
+
react_1.default.createElement(fa_1.FaInfoCircle, { size: 24, className: "flex-shrink-0" }),
|
|
71
|
+
react_1.default.createElement("div", { className: "flex-grow-1" },
|
|
72
|
+
react_1.default.createElement(CustomText_1.default, { value: info.time, textType: CustomText_1.TextType.PARAGRAPH, fontSize: CustomText_1.FontSize.XXS, lineHeight: CustomText_1.LineHeight.M, italic: true }),
|
|
73
|
+
typeof info.description === "string" ? (react_1.default.createElement(CustomText_1.default, { value: info.description, textType: CustomText_1.TextType.PARAGRAPH, fontSize: CustomText_1.FontSize.XS, lineHeight: CustomText_1.LineHeight.XXS })) : (info.description)))); }),
|
|
74
|
+
element.elements && renderTimelineElements(element.elements, level + 1, key))));
|
|
75
|
+
})));
|
|
76
|
+
};
|
|
77
|
+
return (react_1.default.createElement("div", { className: "iq-timeline0 m-0 d-flex align-items-center justify-content-between position-relative" }, renderTimelineElements(timelineElements)));
|
|
60
78
|
};
|
|
61
79
|
exports.CustomTimeline = CustomTimeline;
|
|
62
80
|
exports.default = CustomTimeline;
|