@ltht-react/diagnosis-summary 2.0.96 → 2.0.98
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FC, HTMLAttributes } from 'react';
|
|
1
|
+
import { FC, HTMLAttributes, ReactElement } from 'react';
|
|
2
2
|
import { Condition } from '@ltht-react/types';
|
|
3
3
|
import { ButtonProps } from '@ltht-react/button';
|
|
4
4
|
declare const DiagnosisSummary: FC<Props>;
|
|
@@ -10,6 +10,7 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
|
10
10
|
isReadOnly: boolean;
|
|
11
11
|
dateOnlyView?: boolean;
|
|
12
12
|
controls?: ButtonProps[];
|
|
13
|
+
tags?: ReactElement[];
|
|
13
14
|
canExtendDiagnosis?: boolean;
|
|
14
15
|
}
|
|
15
16
|
export default DiagnosisSummary;
|
|
@@ -30,6 +30,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
30
30
|
};
|
|
31
31
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
32
32
|
var jsx_runtime_1 = require("react/jsx-runtime");
|
|
33
|
+
var react_1 = require("react");
|
|
33
34
|
var styled_1 = __importDefault(require("@emotion/styled"));
|
|
34
35
|
var types_1 = require("@ltht-react/types");
|
|
35
36
|
var type_summary_1 = require("@ltht-react/type-summary");
|
|
@@ -42,19 +43,19 @@ var diagnosis_redacted_1 = __importDefault(require("../molecules/diagnosis-redac
|
|
|
42
43
|
var StyledTitle = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-block;\n"], ["\n display: inline-block;\n"])));
|
|
43
44
|
var StyledSummary = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n"], ["\n display: flex;\n justify-content: center;\n"])));
|
|
44
45
|
var StyledDescription = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex-grow: 1;\n"], ["\n flex-grow: 1;\n"])));
|
|
45
|
-
var StyledLeftContainer = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: row;\n\n ", " {\n flex-direction: column;\n }\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: row;\n\n ", " {\n flex-direction: column;\n }\n"])), styles_1.MOBILE_MAXIMUM_MEDIA_QUERY);
|
|
46
|
-
var
|
|
47
|
-
var StyledButton = (0, styled_1.default)(button_1.Button)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n
|
|
46
|
+
var StyledLeftContainer = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n flex-grow: 1;\n flex-direction: row;\n gap: 0.3rem;\n\n ", " {\n flex-direction: column;\n }\n"], ["\n display: flex;\n flex-grow: 1;\n flex-direction: row;\n gap: 0.3rem;\n\n ", " {\n flex-direction: column;\n }\n"])), styles_1.MOBILE_MAXIMUM_MEDIA_QUERY);
|
|
47
|
+
var StyledResponsiveContainer = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n margin: 0 10px 0 10px;\n flex-direction: column;\n gap: 0.3rem;\n align-items: center;\n justify-content: center;\n\n ", " {\n margin: 0;\n flex-flow: row wrap;\n justify-content: start;\n\n & > * {\n width: fit-content;\n }\n }\n\n ", " {\n margin: 0;\n flex-direction: column wrap;\n\n & > * {\n width: 100%;\n max-width: 200px;\n display: flex;\n justify-content: center;\n }\n }\n"], ["\n display: flex;\n margin: 0 10px 0 10px;\n flex-direction: column;\n gap: 0.3rem;\n align-items: center;\n justify-content: center;\n\n ", " {\n margin: 0;\n flex-flow: row wrap;\n justify-content: start;\n\n & > * {\n width: fit-content;\n }\n }\n\n ", " {\n margin: 0;\n flex-direction: column wrap;\n\n & > * {\n width: 100%;\n max-width: 200px;\n display: flex;\n justify-content: center;\n }\n }\n"])), styles_1.MOBILE_MAXIMUM_MEDIA_QUERY, styles_1.SMALL_SCREEN_MAXIMUM_MEDIA_QUERY);
|
|
48
|
+
var StyledButton = (0, styled_1.default)(button_1.Button)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n font-size: 0.8em !important;\n padding: 1px 5px;\n\n ", " {\n width: fit-content;\n }\n\n ", " {\n width: 100%;\n max-width: 200px;\n }\n"], ["\n font-size: 0.8em !important;\n padding: 1px 5px;\n\n ", " {\n width: fit-content;\n }\n\n ", " {\n width: 100%;\n max-width: 200px;\n }\n"])), styles_1.MOBILE_MAXIMUM_MEDIA_QUERY, styles_1.SMALL_SCREEN_MAXIMUM_MEDIA_QUERY);
|
|
48
49
|
var StyledDate = styled_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n text-align: left;\n width: 15%;\n"], ["\n text-align: left;\n width: 15%;\n"])));
|
|
49
50
|
var IconButtonWrapper = (0, styled_1.default)(button_1.Button)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n margin-right: 0.5rem;\n display: inline-block !important;\n margin-left: 0.5rem;\n width: auto;\n"], ["\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n margin-right: 0.5rem;\n display: inline-block !important;\n margin-left: 0.5rem;\n width: auto;\n"])));
|
|
50
51
|
var IconWrapper = styled_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n margin-left: 0.5rem;\n display: inline-block;\n"], ["\n margin-left: 0.5rem;\n display: inline-block;\n"])));
|
|
51
52
|
var DiagnosisSummary = function (_a) {
|
|
52
|
-
var condition = _a.condition, extendedTemplateDisplayName = _a.extendedTemplateDisplayName, extensionTemplateDisplayName = _a.extensionTemplateDisplayName, extensionClickHandler = _a.extensionClickHandler, _b = _a.isReadOnly, isReadOnly = _b === void 0 ? false : _b, _c = _a.dateOnlyView, dateOnlyView = _c === void 0 ? false : _c, _d = _a.canExtendDiagnosis, canExtendDiagnosis = _d === void 0 ? false : _d, _e = _a.controls, controls = _e === void 0 ? [] : _e, rest = __rest(_a, ["condition", "extendedTemplateDisplayName", "extensionTemplateDisplayName", "extensionClickHandler", "isReadOnly", "dateOnlyView", "canExtendDiagnosis", "controls"]);
|
|
53
|
+
var condition = _a.condition, extendedTemplateDisplayName = _a.extendedTemplateDisplayName, extensionTemplateDisplayName = _a.extensionTemplateDisplayName, extensionClickHandler = _a.extensionClickHandler, _b = _a.isReadOnly, isReadOnly = _b === void 0 ? false : _b, _c = _a.dateOnlyView, dateOnlyView = _c === void 0 ? false : _c, _d = _a.canExtendDiagnosis, canExtendDiagnosis = _d === void 0 ? false : _d, _e = _a.controls, controls = _e === void 0 ? [] : _e, _f = _a.tags, tags = _f === void 0 ? [] : _f, rest = __rest(_a, ["condition", "extendedTemplateDisplayName", "extensionTemplateDisplayName", "extensionClickHandler", "isReadOnly", "dateOnlyView", "canExtendDiagnosis", "controls", "tags"]);
|
|
53
54
|
if (condition.metadata.isRedacted) {
|
|
54
55
|
return ((0, jsx_runtime_1.jsx)(StyledSummary, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(diagnosis_redacted_1.default, { condition: condition }) })));
|
|
55
56
|
}
|
|
56
57
|
var enteredInError = condition.verificationStatus === types_1.ConditionVerificationStatus.EnteredInError;
|
|
57
|
-
return ((0, jsx_runtime_1.jsxs)(StyledSummary, __assign({}, rest, { children: [(0, jsx_runtime_1.jsxs)(StyledLeftContainer, { children: [(0, jsx_runtime_1.jsxs)(StyledDescription, { children: [(0, jsx_runtime_1.jsx)(StyledTitle, { children: (0, jsx_runtime_1.jsx)(diagnosis_title_1.default, { enteredInError: enteredInError, condition: condition }) }), extensionTemplateDisplayName && !isReadOnly && canExtendDiagnosis && !enteredInError && ((0, jsx_runtime_1.jsx)(IconButtonWrapper, { onClick: extensionClickHandler, type: "button", styling: { buttonStyle: 'clear' }, value: "", icon: (0, jsx_runtime_1.jsx)(icon_1.default, { type: "folder-plus", size: "medium" }), iconPlacement: "center", iconColour: styles_1.BTN_COLOURS.PRIMARY.VALUE, title: "This diagnosis can be extended further using form '".concat(extensionTemplateDisplayName, "' by clicking here") })), extendedTemplateDisplayName && ((0, jsx_runtime_1.jsx)(IconWrapper, { children: (0, jsx_runtime_1.jsx)(icon_1.default, { type: "comment", size: "medium", title: "This diagnosis has been extended beyond standard diagnosis with form '".concat(extendedTemplateDisplayName, "'.\n To view these extra details, click into the full diagnosis detail or edit the existing form.") }) }))] }), !isReadOnly && controls.length > 0 && ((0, jsx_runtime_1.jsx)(
|
|
58
|
+
return ((0, jsx_runtime_1.jsxs)(StyledSummary, __assign({}, rest, { children: [(0, jsx_runtime_1.jsxs)(StyledLeftContainer, { children: [(0, jsx_runtime_1.jsxs)(StyledDescription, { children: [(0, jsx_runtime_1.jsx)(StyledTitle, { children: (0, jsx_runtime_1.jsx)(diagnosis_title_1.default, { enteredInError: enteredInError, condition: condition }) }), extensionTemplateDisplayName && !isReadOnly && canExtendDiagnosis && !enteredInError && ((0, jsx_runtime_1.jsx)(IconButtonWrapper, { onClick: extensionClickHandler, type: "button", styling: { buttonStyle: 'clear' }, value: "", icon: (0, jsx_runtime_1.jsx)(icon_1.default, { type: "folder-plus", size: "medium" }), iconPlacement: "center", iconColour: styles_1.BTN_COLOURS.PRIMARY.VALUE, title: "This diagnosis can be extended further using form '".concat(extensionTemplateDisplayName, "' by clicking here") })), extendedTemplateDisplayName && ((0, jsx_runtime_1.jsx)(IconWrapper, { children: (0, jsx_runtime_1.jsx)(icon_1.default, { type: "comment", size: "medium", title: "This diagnosis has been extended beyond standard diagnosis with form '".concat(extendedTemplateDisplayName, "'.\n To view these extra details, click into the full diagnosis detail or edit the existing form.") }) }))] }), tags.length > 0 && ((0, jsx_runtime_1.jsx)(StyledResponsiveContainer, { children: tags === null || tags === void 0 ? void 0 : tags.map(function (tag, index) { return (tag.key ? tag : (0, react_1.cloneElement)(tag, { key: index })); }) })), !isReadOnly && controls.length > 0 && ((0, jsx_runtime_1.jsx)(StyledResponsiveContainer, { children: controls.map(function (props, index) { return ((0, jsx_runtime_1.jsx)(StyledButton, __assign({}, props), index)); }) }))] }), (0, jsx_runtime_1.jsxs)(StyledDate, { children: [(0, jsx_runtime_1.jsx)(type_summary_1.DateSummary, { enteredInError: enteredInError, datetime: condition === null || condition === void 0 ? void 0 : condition.assertedDate, dateOnlyView: dateOnlyView }), (0, jsx_runtime_1.jsx)(diagnosis_onset_estimated_1.default, { enteredInError: enteredInError, condition: condition })] })] })));
|
|
58
59
|
};
|
|
59
60
|
exports.default = DiagnosisSummary;
|
|
60
61
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"diagnosis-summary.js","sourceRoot":"","sources":["../../src/organisms/diagnosis-summary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"diagnosis-summary.js","sourceRoot":"","sources":["../../src/organisms/diagnosis-summary.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ltht-react/diagnosis-summary",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.98",
|
|
4
4
|
"description": "ltht-react clinical DiagnosisSummary component.",
|
|
5
5
|
"author": "LTHT",
|
|
6
6
|
"homepage": "",
|
|
@@ -28,15 +28,15 @@
|
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@emotion/react": "^11.0.0",
|
|
30
30
|
"@emotion/styled": "^11.0.0",
|
|
31
|
-
"@ltht-react/button": "^2.0.
|
|
32
|
-
"@ltht-react/hooks": "^2.0.
|
|
33
|
-
"@ltht-react/icon": "^2.0.
|
|
34
|
-
"@ltht-react/list": "^2.0.
|
|
35
|
-
"@ltht-react/styles": "^2.0.
|
|
36
|
-
"@ltht-react/type-summary": "^2.0.
|
|
37
|
-
"@ltht-react/types": "^2.0.
|
|
38
|
-
"@ltht-react/utils": "^2.0.
|
|
31
|
+
"@ltht-react/button": "^2.0.98",
|
|
32
|
+
"@ltht-react/hooks": "^2.0.98",
|
|
33
|
+
"@ltht-react/icon": "^2.0.98",
|
|
34
|
+
"@ltht-react/list": "^2.0.98",
|
|
35
|
+
"@ltht-react/styles": "^2.0.98",
|
|
36
|
+
"@ltht-react/type-summary": "^2.0.98",
|
|
37
|
+
"@ltht-react/types": "^2.0.98",
|
|
38
|
+
"@ltht-react/utils": "^2.0.98",
|
|
39
39
|
"react": "^18.2.0"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "1dfa2fd2a1c954fc768632ad1c29075f4a72a5bd"
|
|
42
42
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FC, HTMLAttributes } from 'react'
|
|
1
|
+
import { cloneElement, FC, HTMLAttributes, ReactElement } from 'react'
|
|
2
2
|
import styled from '@emotion/styled'
|
|
3
3
|
|
|
4
4
|
import { Condition, ConditionVerificationStatus } from '@ltht-react/types'
|
|
@@ -25,43 +25,55 @@ const StyledLeftContainer = styled.div`
|
|
|
25
25
|
display: flex;
|
|
26
26
|
flex-grow: 1;
|
|
27
27
|
flex-direction: row;
|
|
28
|
+
gap: 0.3rem;
|
|
28
29
|
|
|
29
30
|
${MOBILE_MAXIMUM_MEDIA_QUERY} {
|
|
30
31
|
flex-direction: column;
|
|
31
32
|
}
|
|
32
33
|
`
|
|
33
|
-
const
|
|
34
|
+
const StyledResponsiveContainer = styled.div`
|
|
34
35
|
display: flex;
|
|
35
|
-
margin:
|
|
36
|
+
margin: 0 10px 0 10px;
|
|
36
37
|
flex-direction: column;
|
|
38
|
+
gap: 0.3rem;
|
|
39
|
+
align-items: center;
|
|
40
|
+
justify-content: center;
|
|
37
41
|
|
|
38
42
|
${MOBILE_MAXIMUM_MEDIA_QUERY} {
|
|
39
|
-
margin:
|
|
43
|
+
margin: 0;
|
|
40
44
|
flex-flow: row wrap;
|
|
45
|
+
justify-content: start;
|
|
46
|
+
|
|
47
|
+
& > * {
|
|
48
|
+
width: fit-content;
|
|
49
|
+
}
|
|
41
50
|
}
|
|
42
51
|
|
|
43
52
|
${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
|
|
44
|
-
margin:
|
|
45
|
-
flex-direction: column;
|
|
53
|
+
margin: 0;
|
|
54
|
+
flex-direction: column wrap;
|
|
55
|
+
|
|
56
|
+
& > * {
|
|
57
|
+
width: 100%;
|
|
58
|
+
max-width: 200px;
|
|
59
|
+
display: flex;
|
|
60
|
+
justify-content: center;
|
|
61
|
+
}
|
|
46
62
|
}
|
|
47
63
|
`
|
|
48
64
|
const StyledButton = styled(Button)`
|
|
49
|
-
margin: 2px 0 2px 0;
|
|
50
65
|
font-size: 0.8em !important;
|
|
51
66
|
padding: 1px 5px;
|
|
52
67
|
|
|
53
68
|
${MOBILE_MAXIMUM_MEDIA_QUERY} {
|
|
54
|
-
margin: 2px 5px 2px 0;
|
|
55
69
|
width: fit-content;
|
|
56
70
|
}
|
|
57
71
|
|
|
58
72
|
${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
|
|
59
|
-
margin: 2px 0 2px 0;
|
|
60
73
|
width: 100%;
|
|
61
74
|
max-width: 200px;
|
|
62
75
|
}
|
|
63
76
|
`
|
|
64
|
-
|
|
65
77
|
const StyledDate = styled.div`
|
|
66
78
|
text-align: left;
|
|
67
79
|
width: 15%;
|
|
@@ -90,6 +102,7 @@ const DiagnosisSummary: FC<Props> = ({
|
|
|
90
102
|
dateOnlyView = false,
|
|
91
103
|
canExtendDiagnosis = false,
|
|
92
104
|
controls = [],
|
|
105
|
+
tags = [],
|
|
93
106
|
...rest
|
|
94
107
|
}) => {
|
|
95
108
|
if (condition.metadata.isRedacted) {
|
|
@@ -133,12 +146,18 @@ const DiagnosisSummary: FC<Props> = ({
|
|
|
133
146
|
)}
|
|
134
147
|
</StyledDescription>
|
|
135
148
|
|
|
149
|
+
{tags.length > 0 && (
|
|
150
|
+
<StyledResponsiveContainer>
|
|
151
|
+
{tags?.map((tag, index) => (tag.key ? tag : cloneElement(tag, { key: index })))}
|
|
152
|
+
</StyledResponsiveContainer>
|
|
153
|
+
)}
|
|
154
|
+
|
|
136
155
|
{!isReadOnly && controls.length > 0 && (
|
|
137
|
-
<
|
|
156
|
+
<StyledResponsiveContainer>
|
|
138
157
|
{controls.map((props, index) => (
|
|
139
158
|
<StyledButton key={index} {...props} />
|
|
140
159
|
))}
|
|
141
|
-
</
|
|
160
|
+
</StyledResponsiveContainer>
|
|
142
161
|
)}
|
|
143
162
|
</StyledLeftContainer>
|
|
144
163
|
<StyledDate>
|
|
@@ -157,6 +176,7 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
|
157
176
|
isReadOnly: boolean
|
|
158
177
|
dateOnlyView?: boolean
|
|
159
178
|
controls?: ButtonProps[]
|
|
179
|
+
tags?: ReactElement[]
|
|
160
180
|
canExtendDiagnosis?: boolean
|
|
161
181
|
}
|
|
162
182
|
|