@ltht-react/timeline 1.0.104 → 1.0.106
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/README.md +19 -19
- package/lib/atoms/timeline-author.d.ts +8 -8
- package/lib/atoms/timeline-author.js +65 -65
- package/lib/atoms/timeline-description.d.ts +8 -8
- package/lib/atoms/timeline-description.js +43 -43
- package/lib/atoms/timeline-status.d.ts +3 -3
- package/lib/atoms/timeline-status.js +5 -5
- package/lib/atoms/timeline-time.d.ts +8 -8
- package/lib/atoms/timeline-time.js +39 -39
- package/lib/atoms/timeline-title-redacted.d.ts +3 -3
- package/lib/atoms/timeline-title-redacted.js +16 -16
- package/lib/atoms/timeline-title.d.ts +8 -8
- package/lib/atoms/timeline-title.js +32 -32
- package/lib/constants.d.ts +2 -2
- package/lib/constants.js +4 -4
- package/lib/index.d.ts +5 -5
- package/lib/index.js +10 -10
- package/lib/molecules/timeline-item-redacted.d.ts +11 -11
- package/lib/molecules/timeline-item-redacted.js +42 -42
- package/lib/molecules/timeline-item.d.ts +15 -15
- package/lib/molecules/timeline-item.js +69 -69
- package/lib/organisms/timeline.d.ts +9 -9
- package/lib/organisms/timeline.js +196 -196
- package/package.json +8 -8
- package/lib/methods.d.ts +0 -3
- package/lib/methods.js +0 -8
- package/lib/methods.js.map +0 -1
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
-
return cooked;
|
|
5
|
-
};
|
|
6
|
-
var __assign = (this && this.__assign) || function () {
|
|
7
|
-
__assign = Object.assign || function(t) {
|
|
8
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
-
s = arguments[i];
|
|
10
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
-
t[p] = s[p];
|
|
12
|
-
}
|
|
13
|
-
return t;
|
|
14
|
-
};
|
|
15
|
-
return __assign.apply(this, arguments);
|
|
16
|
-
};
|
|
17
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
18
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
19
|
-
};
|
|
20
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
22
|
-
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
23
|
-
var styles_1 = require("@ltht-react/styles");
|
|
24
|
-
var hooks_1 = require("@ltht-react/hooks");
|
|
25
|
-
var utils_1 = require("@ltht-react/utils");
|
|
26
|
-
var timeline_title_redacted_1 = __importDefault(require("../atoms/timeline-title-redacted"));
|
|
27
|
-
var StyledTimelineItem = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n padding: 0.5rem;\n"], ["\n background-color: ", ";\n padding: 0.5rem;\n"])), function (_a) {
|
|
28
|
-
var isSelected = _a.isSelected;
|
|
29
|
-
return (isSelected ? styles_1.HIGHLIGHT_GREEN.VALUE : styles_1.TRANSLUCENT_DARK_BLUE);
|
|
30
|
-
});
|
|
31
|
-
var StyledTimelineItemTop = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n color: black;\n padding-bottom: 0.25rem;\n"], ["\n display: flex;\n color: black;\n padding-bottom: 0.25rem;\n"])));
|
|
32
|
-
var StyledTitle = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-grow: 1;\n color: black;\n font-size: ", ";\n font-weight: bold;\n"], ["\n flex-grow: 1;\n color: black;\n font-size: ", ";\n font-weight: bold;\n"])), function (_a) {
|
|
33
|
-
var isMobile = _a.isMobile;
|
|
34
|
-
return (isMobile ? 'medium' : 'large');
|
|
35
|
-
});
|
|
36
|
-
var TimelineItemRedacted = function () {
|
|
37
|
-
var width = hooks_1.useWindowSize().width;
|
|
38
|
-
var isMobile = utils_1.isMobileView(width);
|
|
39
|
-
return (jsx_runtime_1.jsx(StyledTimelineItem, __assign({ isSelected: false }, { children: jsx_runtime_1.jsx(StyledTimelineItemTop, { children: jsx_runtime_1.jsx(StyledTitle, __assign({ isMobile: isMobile }, { children: jsx_runtime_1.jsx(timeline_title_redacted_1.default, {}, void 0) }), void 0) }, void 0) }), void 0));
|
|
40
|
-
};
|
|
41
|
-
exports.default = TimelineItemRedacted;
|
|
42
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __assign = (this && this.__assign) || function () {
|
|
7
|
+
__assign = Object.assign || function(t) {
|
|
8
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
+
s = arguments[i];
|
|
10
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
+
t[p] = s[p];
|
|
12
|
+
}
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
return __assign.apply(this, arguments);
|
|
16
|
+
};
|
|
17
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
18
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
19
|
+
};
|
|
20
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
22
|
+
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
23
|
+
var styles_1 = require("@ltht-react/styles");
|
|
24
|
+
var hooks_1 = require("@ltht-react/hooks");
|
|
25
|
+
var utils_1 = require("@ltht-react/utils");
|
|
26
|
+
var timeline_title_redacted_1 = __importDefault(require("../atoms/timeline-title-redacted"));
|
|
27
|
+
var StyledTimelineItem = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n padding: 0.5rem;\n"], ["\n background-color: ", ";\n padding: 0.5rem;\n"])), function (_a) {
|
|
28
|
+
var isSelected = _a.isSelected;
|
|
29
|
+
return (isSelected ? styles_1.HIGHLIGHT_GREEN.VALUE : styles_1.TRANSLUCENT_DARK_BLUE);
|
|
30
|
+
});
|
|
31
|
+
var StyledTimelineItemTop = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n color: black;\n padding-bottom: 0.25rem;\n"], ["\n display: flex;\n color: black;\n padding-bottom: 0.25rem;\n"])));
|
|
32
|
+
var StyledTitle = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-grow: 1;\n color: black;\n font-size: ", ";\n font-weight: bold;\n"], ["\n flex-grow: 1;\n color: black;\n font-size: ", ";\n font-weight: bold;\n"])), function (_a) {
|
|
33
|
+
var isMobile = _a.isMobile;
|
|
34
|
+
return (isMobile ? 'medium' : 'large');
|
|
35
|
+
});
|
|
36
|
+
var TimelineItemRedacted = function () {
|
|
37
|
+
var width = hooks_1.useWindowSize().width;
|
|
38
|
+
var isMobile = utils_1.isMobileView(width);
|
|
39
|
+
return (jsx_runtime_1.jsx(StyledTimelineItem, __assign({ isSelected: false }, { children: jsx_runtime_1.jsx(StyledTimelineItemTop, { children: jsx_runtime_1.jsx(StyledTitle, __assign({ isMobile: isMobile }, { children: jsx_runtime_1.jsx(timeline_title_redacted_1.default, {}, void 0) }), void 0) }, void 0) }), void 0));
|
|
40
|
+
};
|
|
41
|
+
exports.default = TimelineItemRedacted;
|
|
42
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
43
43
|
//# sourceMappingURL=timeline-item-redacted.js.map
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { AuditEvent, DocumentReference, Maybe, QuestionnaireResponse, TimelineDomainResourceType } from '@ltht-react/types';
|
|
3
|
-
declare const TimelineItem: FC<IProps>;
|
|
4
|
-
interface IProps {
|
|
5
|
-
timelineItem: Maybe<ITimelineItem>;
|
|
6
|
-
domainResourceType: TimelineDomainResourceType;
|
|
7
|
-
}
|
|
8
|
-
export interface ITimelineItem {
|
|
9
|
-
domainResource?: Maybe<AuditEvent | QuestionnaireResponse | DocumentReference>;
|
|
10
|
-
clickHandler?(): void;
|
|
11
|
-
clickPrompt?: string;
|
|
12
|
-
isSelected: boolean | undefined;
|
|
13
|
-
deselectPrompt?: string;
|
|
14
|
-
}
|
|
15
|
-
export default TimelineItem;
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { AuditEvent, DocumentReference, Maybe, QuestionnaireResponse, TimelineDomainResourceType } from '@ltht-react/types';
|
|
3
|
+
declare const TimelineItem: FC<IProps>;
|
|
4
|
+
interface IProps {
|
|
5
|
+
timelineItem: Maybe<ITimelineItem>;
|
|
6
|
+
domainResourceType: TimelineDomainResourceType;
|
|
7
|
+
}
|
|
8
|
+
export interface ITimelineItem {
|
|
9
|
+
domainResource?: Maybe<AuditEvent | QuestionnaireResponse | DocumentReference>;
|
|
10
|
+
clickHandler?(): void;
|
|
11
|
+
clickPrompt?: string;
|
|
12
|
+
isSelected: boolean | undefined;
|
|
13
|
+
deselectPrompt?: string;
|
|
14
|
+
}
|
|
15
|
+
export default TimelineItem;
|
|
@@ -1,70 +1,70 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
-
return cooked;
|
|
5
|
-
};
|
|
6
|
-
var __assign = (this && this.__assign) || function () {
|
|
7
|
-
__assign = Object.assign || function(t) {
|
|
8
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
-
s = arguments[i];
|
|
10
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
-
t[p] = s[p];
|
|
12
|
-
}
|
|
13
|
-
return t;
|
|
14
|
-
};
|
|
15
|
-
return __assign.apply(this, arguments);
|
|
16
|
-
};
|
|
17
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
18
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
19
|
-
};
|
|
20
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
|
-
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
22
|
-
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
23
|
-
var banner_1 = __importDefault(require("@ltht-react/banner"));
|
|
24
|
-
var icon_1 = require("@ltht-react/icon");
|
|
25
|
-
var styles_1 = require("@ltht-react/styles");
|
|
26
|
-
var hooks_1 = require("@ltht-react/hooks");
|
|
27
|
-
var utils_1 = require("@ltht-react/utils");
|
|
28
|
-
var timeline_description_1 = __importDefault(require("../atoms/timeline-description"));
|
|
29
|
-
var timeline_author_1 = __importDefault(require("../atoms/timeline-author"));
|
|
30
|
-
var timeline_status_1 = __importDefault(require("../atoms/timeline-status"));
|
|
31
|
-
var timeline_title_1 = __importDefault(require("../atoms/timeline-title"));
|
|
32
|
-
var timeline_time_1 = __importDefault(require("../atoms/timeline-time"));
|
|
33
|
-
var StyledTimelineItem = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n padding: 0.5rem;\n"], ["\n background-color: ", ";\n padding: 0.5rem;\n"])), function (_a) {
|
|
34
|
-
var isSelected = _a.isSelected;
|
|
35
|
-
return (isSelected ? styles_1.HIGHLIGHT_GREEN.VALUE : styles_1.TRANSLUCENT_DARK_BLUE);
|
|
36
|
-
});
|
|
37
|
-
var StyledTimelineItemLeft = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex-grow: 1;\n"], ["\n flex-grow: 1;\n"])));
|
|
38
|
-
var StyledTimelineItemRight = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n text-align: right;\n"], ["\n text-align: right;\n"])));
|
|
39
|
-
var StyledTimelineTime = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: black;\n"], ["\n color: black;\n"])));
|
|
40
|
-
var StyledTimelineItemTop = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n color: black;\n padding-bottom: 0.25rem;\n"], ["\n display: flex;\n color: black;\n padding-bottom: 0.25rem;\n"])));
|
|
41
|
-
var StyledTimelineItemMiddle = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: black;\n padding-bottom: 1rem;\n"], ["\n color: black;\n padding-bottom: 1rem;\n"])));
|
|
42
|
-
var StyledTimelineItemBottom = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: grey;\n display: flex;\n"], ["\n color: grey;\n display: flex;\n"])));
|
|
43
|
-
var StyledTitle = styled_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n flex-grow: 1;\n color: black;\n font-size: ", ";\n font-weight: bold;\n"], ["\n flex-grow: 1;\n color: black;\n font-size: ", ";\n font-weight: bold;\n"])), function (_a) {
|
|
44
|
-
var isMobile = _a.isMobile;
|
|
45
|
-
return (isMobile ? 'medium' : 'large');
|
|
46
|
-
});
|
|
47
|
-
var StyledDescription = styled_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n color: black;\n font-size: small;\n"], ["\n color: black;\n font-size: small;\n"])));
|
|
48
|
-
var StyledStatus = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n text-align: right;\n"], ["\n text-align: right;\n"])));
|
|
49
|
-
var StyledBanner = styled_1.default(banner_1.default)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n margin: -0.5rem;\n margin-top: 0.5rem;\n"], ["\n margin: -0.5rem;\n margin-top: 0.5rem;\n"])));
|
|
50
|
-
var StyledBannerContent = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""])));
|
|
51
|
-
var TimelineItem = function (_a) {
|
|
52
|
-
var _b;
|
|
53
|
-
var timelineItem = _a.timelineItem, domainResourceType = _a.domainResourceType;
|
|
54
|
-
var width = hooks_1.useWindowSize().width;
|
|
55
|
-
var isMobile = utils_1.isMobileView(width);
|
|
56
|
-
if (!(timelineItem === null || timelineItem === void 0 ? void 0 : timelineItem.domainResource)) {
|
|
57
|
-
return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
|
|
58
|
-
}
|
|
59
|
-
var itemKey = "timelineItem_" + timelineItem.domainResource.id;
|
|
60
|
-
return (jsx_runtime_1.jsxs(StyledTimelineItem, __assign({ isSelected: (_b = timelineItem.isSelected) !== null && _b !== void 0 ? _b : false }, { children: [jsx_runtime_1.jsxs(StyledTimelineItemTop, { children: [jsx_runtime_1.jsx(StyledTitle, __assign({ isMobile: isMobile }, { children: jsx_runtime_1.jsx(timeline_title_1.default, { domainResource: timelineItem.domainResource, domainResourceType: domainResourceType }, void 0) }), void 0),
|
|
61
|
-
isMobile && (jsx_runtime_1.jsx(StyledTimelineTime, { children: jsx_runtime_1.jsx(timeline_time_1.default, { domainResource: timelineItem.domainResource, domainResourceType: domainResourceType }, void 0) }, void 0))] }, void 0),
|
|
62
|
-
jsx_runtime_1.jsx(StyledTimelineItemMiddle, { children: jsx_runtime_1.jsx(StyledDescription, { children: jsx_runtime_1.jsx(timeline_description_1.default, { domainResource: timelineItem.domainResource, domainResourceType: domainResourceType }, void 0) }, void 0) }, void 0),
|
|
63
|
-
jsx_runtime_1.jsxs(StyledTimelineItemBottom, { children: [jsx_runtime_1.jsx(StyledTimelineItemLeft, { children: jsx_runtime_1.jsx(timeline_author_1.default, { domainResource: timelineItem.domainResource, domainResourceType: domainResourceType }, void 0) }, void 0),
|
|
64
|
-
jsx_runtime_1.jsx(StyledTimelineItemRight, { children: jsx_runtime_1.jsx(StyledStatus, { children: jsx_runtime_1.jsx(timeline_status_1.default, {}, void 0) }, void 0) }, void 0)] }, void 0),
|
|
65
|
-
timelineItem.clickHandler && !timelineItem.isSelected && (jsx_runtime_1.jsx(StyledBanner, __assign({ type: "info", onClick: timelineItem.clickHandler }, { children: timelineItem.clickPrompt && jsx_runtime_1.jsx(StyledBannerContent, { children: timelineItem.clickPrompt }, void 0) }), void 0)),
|
|
66
|
-
timelineItem.clickHandler && timelineItem.isSelected && (jsx_runtime_1.jsx(StyledBanner, __assign({ type: "highlight", icon: jsx_runtime_1.jsx(icon_1.InfoCircleIcon, { status: "info", size: "medium" }, void 0), onClick: timelineItem.clickHandler }, { children: timelineItem.deselectPrompt && jsx_runtime_1.jsx(StyledBannerContent, { children: timelineItem.deselectPrompt }, void 0) }), void 0))] }), itemKey));
|
|
67
|
-
};
|
|
68
|
-
exports.default = TimelineItem;
|
|
69
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
var __assign = (this && this.__assign) || function () {
|
|
7
|
+
__assign = Object.assign || function(t) {
|
|
8
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
+
s = arguments[i];
|
|
10
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
+
t[p] = s[p];
|
|
12
|
+
}
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
return __assign.apply(this, arguments);
|
|
16
|
+
};
|
|
17
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
18
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
19
|
+
};
|
|
20
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
|
+
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
22
|
+
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
23
|
+
var banner_1 = __importDefault(require("@ltht-react/banner"));
|
|
24
|
+
var icon_1 = require("@ltht-react/icon");
|
|
25
|
+
var styles_1 = require("@ltht-react/styles");
|
|
26
|
+
var hooks_1 = require("@ltht-react/hooks");
|
|
27
|
+
var utils_1 = require("@ltht-react/utils");
|
|
28
|
+
var timeline_description_1 = __importDefault(require("../atoms/timeline-description"));
|
|
29
|
+
var timeline_author_1 = __importDefault(require("../atoms/timeline-author"));
|
|
30
|
+
var timeline_status_1 = __importDefault(require("../atoms/timeline-status"));
|
|
31
|
+
var timeline_title_1 = __importDefault(require("../atoms/timeline-title"));
|
|
32
|
+
var timeline_time_1 = __importDefault(require("../atoms/timeline-time"));
|
|
33
|
+
var StyledTimelineItem = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n padding: 0.5rem;\n"], ["\n background-color: ", ";\n padding: 0.5rem;\n"])), function (_a) {
|
|
34
|
+
var isSelected = _a.isSelected;
|
|
35
|
+
return (isSelected ? styles_1.HIGHLIGHT_GREEN.VALUE : styles_1.TRANSLUCENT_DARK_BLUE);
|
|
36
|
+
});
|
|
37
|
+
var StyledTimelineItemLeft = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n flex-grow: 1;\n"], ["\n flex-grow: 1;\n"])));
|
|
38
|
+
var StyledTimelineItemRight = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n text-align: right;\n"], ["\n text-align: right;\n"])));
|
|
39
|
+
var StyledTimelineTime = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: black;\n"], ["\n color: black;\n"])));
|
|
40
|
+
var StyledTimelineItemTop = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n color: black;\n padding-bottom: 0.25rem;\n"], ["\n display: flex;\n color: black;\n padding-bottom: 0.25rem;\n"])));
|
|
41
|
+
var StyledTimelineItemMiddle = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: black;\n padding-bottom: 1rem;\n"], ["\n color: black;\n padding-bottom: 1rem;\n"])));
|
|
42
|
+
var StyledTimelineItemBottom = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: grey;\n display: flex;\n"], ["\n color: grey;\n display: flex;\n"])));
|
|
43
|
+
var StyledTitle = styled_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n flex-grow: 1;\n color: black;\n font-size: ", ";\n font-weight: bold;\n"], ["\n flex-grow: 1;\n color: black;\n font-size: ", ";\n font-weight: bold;\n"])), function (_a) {
|
|
44
|
+
var isMobile = _a.isMobile;
|
|
45
|
+
return (isMobile ? 'medium' : 'large');
|
|
46
|
+
});
|
|
47
|
+
var StyledDescription = styled_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n color: black;\n font-size: small;\n"], ["\n color: black;\n font-size: small;\n"])));
|
|
48
|
+
var StyledStatus = styled_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n text-align: right;\n"], ["\n text-align: right;\n"])));
|
|
49
|
+
var StyledBanner = styled_1.default(banner_1.default)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n margin: -0.5rem;\n margin-top: 0.5rem;\n"], ["\n margin: -0.5rem;\n margin-top: 0.5rem;\n"])));
|
|
50
|
+
var StyledBannerContent = styled_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""])));
|
|
51
|
+
var TimelineItem = function (_a) {
|
|
52
|
+
var _b;
|
|
53
|
+
var timelineItem = _a.timelineItem, domainResourceType = _a.domainResourceType;
|
|
54
|
+
var width = hooks_1.useWindowSize().width;
|
|
55
|
+
var isMobile = utils_1.isMobileView(width);
|
|
56
|
+
if (!(timelineItem === null || timelineItem === void 0 ? void 0 : timelineItem.domainResource)) {
|
|
57
|
+
return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, {}, void 0);
|
|
58
|
+
}
|
|
59
|
+
var itemKey = "timelineItem_" + timelineItem.domainResource.id;
|
|
60
|
+
return (jsx_runtime_1.jsxs(StyledTimelineItem, __assign({ isSelected: (_b = timelineItem.isSelected) !== null && _b !== void 0 ? _b : false }, { children: [jsx_runtime_1.jsxs(StyledTimelineItemTop, { children: [jsx_runtime_1.jsx(StyledTitle, __assign({ isMobile: isMobile }, { children: jsx_runtime_1.jsx(timeline_title_1.default, { domainResource: timelineItem.domainResource, domainResourceType: domainResourceType }, void 0) }), void 0),
|
|
61
|
+
isMobile && (jsx_runtime_1.jsx(StyledTimelineTime, { children: jsx_runtime_1.jsx(timeline_time_1.default, { domainResource: timelineItem.domainResource, domainResourceType: domainResourceType }, void 0) }, void 0))] }, void 0),
|
|
62
|
+
jsx_runtime_1.jsx(StyledTimelineItemMiddle, { children: jsx_runtime_1.jsx(StyledDescription, { children: jsx_runtime_1.jsx(timeline_description_1.default, { domainResource: timelineItem.domainResource, domainResourceType: domainResourceType }, void 0) }, void 0) }, void 0),
|
|
63
|
+
jsx_runtime_1.jsxs(StyledTimelineItemBottom, { children: [jsx_runtime_1.jsx(StyledTimelineItemLeft, { children: jsx_runtime_1.jsx(timeline_author_1.default, { domainResource: timelineItem.domainResource, domainResourceType: domainResourceType }, void 0) }, void 0),
|
|
64
|
+
jsx_runtime_1.jsx(StyledTimelineItemRight, { children: jsx_runtime_1.jsx(StyledStatus, { children: jsx_runtime_1.jsx(timeline_status_1.default, {}, void 0) }, void 0) }, void 0)] }, void 0),
|
|
65
|
+
timelineItem.clickHandler && !timelineItem.isSelected && (jsx_runtime_1.jsx(StyledBanner, __assign({ type: "info", onClick: timelineItem.clickHandler }, { children: timelineItem.clickPrompt && jsx_runtime_1.jsx(StyledBannerContent, { children: timelineItem.clickPrompt }, void 0) }), void 0)),
|
|
66
|
+
timelineItem.clickHandler && timelineItem.isSelected && (jsx_runtime_1.jsx(StyledBanner, __assign({ type: "highlight", icon: jsx_runtime_1.jsx(icon_1.InfoCircleIcon, { status: "info", size: "medium" }, void 0), onClick: timelineItem.clickHandler }, { children: timelineItem.deselectPrompt && jsx_runtime_1.jsx(StyledBannerContent, { children: timelineItem.deselectPrompt }, void 0) }), void 0))] }), itemKey));
|
|
67
|
+
};
|
|
68
|
+
exports.default = TimelineItem;
|
|
69
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
|
|
70
70
|
//# sourceMappingURL=timeline-item.js.map
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { Maybe, TimelineDomainResourceType } from '@ltht-react/types';
|
|
3
|
-
import { ITimelineItem } from '../molecules/timeline-item';
|
|
4
|
-
declare const Timeline: FC<IProps>;
|
|
5
|
-
interface IProps {
|
|
6
|
-
timelineItems: Maybe<ITimelineItem>[];
|
|
7
|
-
domainResourceType: TimelineDomainResourceType;
|
|
8
|
-
}
|
|
9
|
-
export default Timeline;
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { Maybe, TimelineDomainResourceType } from '@ltht-react/types';
|
|
3
|
+
import { ITimelineItem } from '../molecules/timeline-item';
|
|
4
|
+
declare const Timeline: FC<IProps>;
|
|
5
|
+
interface IProps {
|
|
6
|
+
timelineItems: Maybe<ITimelineItem>[];
|
|
7
|
+
domainResourceType: TimelineDomainResourceType;
|
|
8
|
+
}
|
|
9
|
+
export default Timeline;
|