albinasoft-ui-package 1.1.30 → 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
|
+
}
|
|
@@ -100,6 +100,10 @@ var CustomSelect = function (_a) {
|
|
|
100
100
|
}
|
|
101
101
|
setInputValue("");
|
|
102
102
|
};
|
|
103
|
+
var clearSelection = function (e) {
|
|
104
|
+
e.stopPropagation();
|
|
105
|
+
onChange("");
|
|
106
|
+
};
|
|
103
107
|
var filteredOptions = options.filter(function (option) {
|
|
104
108
|
return option.label.toLowerCase().includes(inputValue.toLowerCase());
|
|
105
109
|
});
|
|
@@ -128,8 +132,9 @@ var CustomSelect = function (_a) {
|
|
|
128
132
|
e.stopPropagation();
|
|
129
133
|
toggleValue(val);
|
|
130
134
|
} })));
|
|
131
|
-
})) : (react_1.default.createElement("span", { className: "placeholder" }, placeholder))) : selectedValue ? (react_1.default.createElement("span", { className: "badge bg-primary" },
|
|
132
|
-
react_1.default.createElement("span", null, (_b = options.find(function (opt) { return opt.value === selectedValue; })) === null || _b === void 0 ? void 0 : _b.label)
|
|
135
|
+
})) : (react_1.default.createElement("span", { className: "placeholder" }, placeholder))) : selectedValue ? (react_1.default.createElement("span", { className: "badge bg-primary d-inline-flex align-items-center" },
|
|
136
|
+
react_1.default.createElement("span", null, (_b = options.find(function (opt) { return opt.value === selectedValue; })) === null || _b === void 0 ? void 0 : _b.label),
|
|
137
|
+
react_1.default.createElement(fa_1.FaTimes, { className: "ms-1", style: { cursor: "pointer" }, onClick: clearSelection }))) : (react_1.default.createElement("span", { className: "placeholder" }, placeholder))),
|
|
133
138
|
react_1.default.createElement("input", { type: "text", name: name, value: Array.isArray(value) ? value.join(",") : value, required: required, onInvalid: handleInvalid, onInput: handleInput, style: {
|
|
134
139
|
position: "absolute",
|
|
135
140
|
left: "-9999px",
|
|
@@ -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;
|