@ltht-react/diagnosis-summary 2.0.157 → 2.0.158

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.
Files changed (16) hide show
  1. package/README.md +22 -22
  2. package/lib/atoms/diagnosis-title.d.ts +1 -0
  3. package/lib/atoms/diagnosis-title.js +5 -4
  4. package/lib/atoms/diagnosis-title.js.map +1 -1
  5. package/lib/organisms/diagnosis-summary.d.ts +3 -2
  6. package/lib/organisms/diagnosis-summary.js +2 -2
  7. package/lib/organisms/diagnosis-summary.js.map +1 -1
  8. package/package.json +11 -10
  9. package/src/atoms/diagnosis-category.tsx +31 -31
  10. package/src/atoms/diagnosis-data-source.tsx +45 -45
  11. package/src/atoms/diagnosis-onset-estimated.tsx +40 -40
  12. package/src/atoms/diagnosis-title.tsx +72 -70
  13. package/src/constants.ts +5 -5
  14. package/src/index.tsx +3 -3
  15. package/src/molecules/diagnosis-redacted.tsx +31 -31
  16. package/src/organisms/diagnosis-summary.tsx +252 -249
package/README.md CHANGED
@@ -1,22 +1,22 @@
1
- # DiagnosisSummary
2
-
3
- <!-- STORY -->
4
-
5
- ### Import
6
-
7
- ```js
8
- import DiagnosisSummary from '@ltht-react/diagnosis-summary'
9
- ```
10
-
11
- ### Usage
12
-
13
- ```jsx
14
- <DiagnosisSummary title="Conditions" conditions={conditions} clickHandler={handleCLick} />
15
- ```
16
-
17
- ### Properties
18
-
19
- | Prop | Required | Default | Type | Description |
20
- | :------------- | :------- | :-------- | :---------- | :------------------------------------------------------------ |
21
- | `conditions` | Yes | | Condition[] | Array of conditions to display |
22
- | `clickHandler` | No | undefined | Function | Callback click handler containing the selected condition item |
1
+ # DiagnosisSummary
2
+
3
+ <!-- STORY -->
4
+
5
+ ### Import
6
+
7
+ ```js
8
+ import DiagnosisSummary from '@ltht-react/diagnosis-summary'
9
+ ```
10
+
11
+ ### Usage
12
+
13
+ ```jsx
14
+ <DiagnosisSummary title="Conditions" conditions={conditions} clickHandler={handleCLick} />
15
+ ```
16
+
17
+ ### Properties
18
+
19
+ | Prop | Required | Default | Type | Description |
20
+ | :------------- | :------- | :-------- | :---------- | :------------------------------------------------------------ |
21
+ | `conditions` | Yes | | Condition[] | Array of conditions to display |
22
+ | `clickHandler` | No | undefined | Function | Callback click handler containing the selected condition item |
package/lib/atoms/diagnosis-title.d.ts CHANGED
@@ -5,5 +5,6 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
5
5
  condition: Condition;
6
6
  enteredInError: boolean;
7
7
  systemExclusionsFilter?: string[];
8
+ isRichText?: boolean;
8
9
  }
9
10
  export default DiagnosisTitle;
package/lib/atoms/diagnosis-title.js CHANGED
@@ -10,6 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
10
10
  var jsx_runtime_1 = require("react/jsx-runtime");
11
11
  var styled_1 = __importDefault(require("@emotion/styled"));
12
12
  var utils_1 = require("@ltht-react/utils");
13
+ var html_react_parser_1 = __importDefault(require("html-react-parser"));
13
14
  var styles_1 = require("@ltht-react/styles");
14
15
  var constants_1 = require("../constants");
15
16
  var StyledConditionTitle = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n text-align: left;\n text-decoration: ", ";\n"], ["\n color: ", ";\n text-align: left;\n text-decoration: ", ";\n"])), styles_1.TEXT_COLOURS.PRIMARY, function (_a) {
@@ -17,15 +18,15 @@ var StyledConditionTitle = styled_1.default.div(templateObject_1 || (templateObj
17
18
  return (enteredInError ? 'line-through' : 'none');
18
19
  });
19
20
  var DiagnosisTitle = function (_a) {
20
- var condition = _a.condition, enteredInError = _a.enteredInError, systemExclusionsFilter = _a.systemExclusionsFilter;
21
+ var condition = _a.condition, enteredInError = _a.enteredInError, systemExclusionsFilter = _a.systemExclusionsFilter, _b = _a.isRichText, isRichText = _b === void 0 ? false : _b;
21
22
  var snippetTagText = extractSnippetTagDisplayValue(condition);
22
23
  if (snippetTagText) {
23
- return renderTitle(snippetTagText, enteredInError);
24
+ return renderTitle(snippetTagText, enteredInError, isRichText);
24
25
  }
25
26
  var conditionText = extractConditionOrFallbackText(condition, systemExclusionsFilter);
26
27
  var conditionStatusText = extractConditionStatusText(condition);
27
28
  var title = conditionStatusText ? "".concat(conditionText, ", ").concat(conditionStatusText) : conditionText;
28
- return renderTitle(title, enteredInError);
29
+ return renderTitle(title, enteredInError, isRichText);
29
30
  };
30
31
  var extractConditionOrFallbackText = function (condition, systemExclusionsFilter) {
31
32
  if (!(condition === null || condition === void 0 ? void 0 : condition.code)) {
@@ -45,7 +46,7 @@ var extractConditionStatusText = function (condition) {
45
46
  return (0, utils_1.titleCase)(statusParts.join(', '));
46
47
  };
47
48
  var extractSnippetTagDisplayValue = function (condition) { var _a, _b; return (_b = (_a = condition === null || condition === void 0 ? void 0 : condition.metadata.tag) === null || _a === void 0 ? void 0 : _a.find(function (coding) { return (coding === null || coding === void 0 ? void 0 : coding.system) === constants_1.SNIPPET_HOVER_TEXT; })) === null || _b === void 0 ? void 0 : _b.display; };
48
- var renderTitle = function (title, enteredInError) { return ((0, jsx_runtime_1.jsx)(StyledConditionTitle, { enteredInError: enteredInError, children: title })); };
49
+ var renderTitle = function (title, enteredInError, isRichText) { return ((0, jsx_runtime_1.jsx)(StyledConditionTitle, { enteredInError: enteredInError, children: isRichText ? (0, html_react_parser_1.default)(title) : title })); };
49
50
  exports.default = DiagnosisTitle;
50
51
  var templateObject_1;
51
52
  //# sourceMappingURL=diagnosis-title.js.map
package/lib/atoms/diagnosis-title.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"diagnosis-title.js","sourceRoot":"","sources":["../../src/atoms/diagnosis-title.tsx"],"names":[],"mappings":";;;;;;;;;;AACA,2DAAoC;AACpC,2CAA4E;AAE5E,6CAAiD;AAEjD,0CAAiD;AAEjD,IAAM,oBAAoB,GAAG,gBAAM,CAAC,GAAG,sIAAoB,aAChD,EAAoB,6CAEV,EAAkE,KACtF,KAHU,qBAAY,CAAC,OAAO,EAEV,UAAC,EAAkB;QAAhB,cAAc,oBAAA;IAAO,OAAA,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC;AAA1C,CAA0C,CACtF,CAAA;AAED,IAAM,cAAc,GAAc,UAAC,EAAqD;QAAnD,SAAS,eAAA,EAAE,cAAc,oBAAA,EAAE,sBAAsB,4BAAA;IACpF,IAAM,cAAc,GAAG,6BAA6B,CAAC,SAAS,CAAC,CAAA;IAE/D,IAAI,cAAc,EAAE,CAAC;QACnB,OAAO,WAAW,CAAC,cAAc,EAAE,cAAc,CAAC,CAAA;IACpD,CAAC;IAED,IAAM,aAAa,GAAG,8BAA8B,CAAC,SAAS,EAAE,sBAAsB,CAAC,CAAA;IACvF,IAAM,mBAAmB,GAAG,0BAA0B,CAAC,SAAS,CAAC,CAAA;IACjE,IAAM,KAAK,GAAG,mBAAmB,CAAC,CAAC,CAAC,UAAG,aAAa,eAAK,mBAAmB,CAAE,CAAC,CAAC,CAAC,aAAa,CAAA;IAE9F,OAAO,WAAW,CAAC,KAAK,EAAE,cAAc,CAAC,CAAA;AAC3C,CAAC,CAAA;AAED,IAAM,8BAA8B,GAAG,UAAC,SAAoB,EAAE,sBAAiC;IAC7F,IAAI,CAAC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,IAAI,CAAA,EAAE,CAAC;QACrB,OAAO,IAAA,iBAAS,EAAC,mBAAmB,CAAC,CAAA;IACvC,CAAC;IAED,IAAM,cAAc,GAAG,IAAA,qCAA6B,EAAC,SAAS,CAAC,IAAI,EAAE,sBAAsB,CAAC,CAAA;IAE5F,OAAO,IAAA,iBAAS,EAAC,cAAc,IAAI,mBAAmB,CAAC,CAAA;AACzD,CAAC,CAAA;AAED,IAAM,0BAA0B,GAAG,UAAC,SAAoB;IACtD,IAAM,WAAW,GAAa,EAAE,CAAA;IAEhC,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,cAAc,EAAE,CAAC;QAC9B,WAAW,CAAC,IAAI,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,cAAc,CAAC,CAAA;IAC7C,CAAC;IAED,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,kBAAkB,EAAE,CAAC;QAClC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAA;IAChD,CAAC;IAED,OAAO,IAAA,iBAAS,EAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;AAC1C,CAAC,CAAA;AAED,IAAM,6BAA6B,GAAG,UAAC,SAAoB,gBACzD,OAAA,MAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,CAAC,GAAG,0CAAE,IAAI,CAAC,UAAC,MAAM,IAAK,OAAA,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,MAAK,8BAAkB,EAArC,CAAqC,CAAC,0CAAE,OAAO,CAAA,EAAA,CAAA;AAE3F,IAAM,WAAW,GAAG,UAAC,KAAa,EAAE,cAAuB,IAAK,OAAA,CAC9D,uBAAC,oBAAoB,IAAC,cAAc,EAAE,cAAc,YAAG,KAAK,GAAwB,CACrF,EAF+D,CAE/D,CAAA;AAYD,kBAAe,cAAc,CAAA"}
1
+ {"version":3,"file":"diagnosis-title.js","sourceRoot":"","sources":["../../src/atoms/diagnosis-title.tsx"],"names":[],"mappings":"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"}
package/lib/organisms/diagnosis-summary.d.ts CHANGED
@@ -4,8 +4,8 @@ import { ButtonProps } from '@ltht-react/button';
4
4
  declare const DiagnosisSummary: FC<Props>;
5
5
  interface Props extends HTMLAttributes<HTMLDivElement> {
6
6
  condition: Condition;
7
- extendedTemplateDisplayName?: string | undefined;
8
- extensionTemplateDisplayName?: string | undefined;
7
+ extendedTemplateDisplayName?: string;
8
+ extensionTemplateDisplayName?: string;
9
9
  isReadOnly?: boolean;
10
10
  dateOnlyView?: boolean;
11
11
  displaySource?: boolean;
@@ -14,5 +14,6 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
14
14
  canExtendDiagnosis?: boolean;
15
15
  extensionClickHandler?(): void;
16
16
  systemExclusionsFilter?: string[];
17
+ isRichText?: boolean;
17
18
  }
18
19
  export default DiagnosisSummary;
package/lib/organisms/diagnosis-summary.js CHANGED
@@ -53,12 +53,12 @@ var StyledDate = styled_1.default.div(templateObject_9 || (templateObject_9 = __
53
53
  var IconButtonWrapper = (0, styled_1.default)(button_1.Button)(templateObject_10 || (templateObject_10 = __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 padding: 0 5px;\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 padding: 0 5px;\n"])));
54
54
  var IconWrapper = styled_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n margin-left: 0.5rem;\n display: inline-block;\n"], ["\n margin-left: 0.5rem;\n display: inline-block;\n"])));
55
55
  var DiagnosisSummary = function (_a) {
56
- 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.displaySource, displaySource = _e === void 0 ? false : _e, _f = _a.controls, controls = _f === void 0 ? [] : _f, _g = _a.tags, tags = _g === void 0 ? [] : _g, _h = _a.systemExclusionsFilter, systemExclusionsFilter = _h === void 0 ? [] : _h, rest = __rest(_a, ["condition", "extendedTemplateDisplayName", "extensionTemplateDisplayName", "extensionClickHandler", "isReadOnly", "dateOnlyView", "canExtendDiagnosis", "displaySource", "controls", "tags", "systemExclusionsFilter"]);
56
+ 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.displaySource, displaySource = _e === void 0 ? false : _e, _f = _a.controls, controls = _f === void 0 ? [] : _f, _g = _a.tags, tags = _g === void 0 ? [] : _g, _h = _a.systemExclusionsFilter, systemExclusionsFilter = _h === void 0 ? [] : _h, _j = _a.isRichText, isRichText = _j === void 0 ? false : _j, rest = __rest(_a, ["condition", "extendedTemplateDisplayName", "extensionTemplateDisplayName", "extensionClickHandler", "isReadOnly", "dateOnlyView", "canExtendDiagnosis", "displaySource", "controls", "tags", "systemExclusionsFilter", "isRichText"]);
57
57
  if (condition.metadata.isRedacted) {
58
58
  return ((0, jsx_runtime_1.jsx)(StyledSummary, __assign({}, rest, { children: (0, jsx_runtime_1.jsx)(diagnosis_redacted_1.default, { condition: condition }) })));
59
59
  }
60
60
  var enteredInError = condition.verificationStatus === types_1.ConditionVerificationStatus.EnteredInError;
61
- return ((0, jsx_runtime_1.jsxs)(StyledSummary, __assign({}, rest, { children: [(0, jsx_runtime_1.jsxs)(StyledTitleAndDateContainer, { children: [(0, jsx_runtime_1.jsxs)(StyledDescription, { children: [(0, jsx_runtime_1.jsxs)(StyledTitle, { children: [(0, jsx_runtime_1.jsx)(diagnosis_title_1.default, { enteredInError: enteredInError, condition: condition, systemExclusionsFilter: systemExclusionsFilter }), 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.") }) }))] }), displaySource && (0, jsx_runtime_1.jsx)(diagnosis_data_source_1.default, { condition: condition, enteredInError: enteredInError })] }), (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 })] })] }), !isReadOnly && (controls.length > 0 || tags.length > 0) && ((0, jsx_runtime_1.jsxs)(StyledButtonAndTagContainer, { children: [(0, jsx_runtime_1.jsx)(StyledResponsiveButtonContainer, { children: controls.map(function (props, index) { return ((0, jsx_runtime_1.jsx)(StyledButton, __assign({}, props), index)); }) }), (0, jsx_runtime_1.jsx)(StyledResponsiveTagContainer, { children: tags === null || tags === void 0 ? void 0 : tags.map(function (tag, index) { return (tag.key ? tag : (0, react_1.cloneElement)(tag, { key: index })); }) })] }))] })));
61
+ return ((0, jsx_runtime_1.jsxs)(StyledSummary, __assign({}, rest, { children: [(0, jsx_runtime_1.jsxs)(StyledTitleAndDateContainer, { children: [(0, jsx_runtime_1.jsxs)(StyledDescription, { children: [(0, jsx_runtime_1.jsxs)(StyledTitle, { children: [(0, jsx_runtime_1.jsx)(diagnosis_title_1.default, { enteredInError: enteredInError, condition: condition, systemExclusionsFilter: systemExclusionsFilter, isRichText: isRichText }), 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.") }) }))] }), displaySource && (0, jsx_runtime_1.jsx)(diagnosis_data_source_1.default, { condition: condition, enteredInError: enteredInError })] }), (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 })] })] }), !isReadOnly && (controls.length > 0 || tags.length > 0) && ((0, jsx_runtime_1.jsxs)(StyledButtonAndTagContainer, { children: [(0, jsx_runtime_1.jsx)(StyledResponsiveButtonContainer, { children: controls.map(function (props, index) { return ((0, jsx_runtime_1.jsx)(StyledButton, __assign({}, props), index)); }) }), (0, jsx_runtime_1.jsx)(StyledResponsiveTagContainer, { children: tags === null || tags === void 0 ? void 0 : tags.map(function (tag, index) { return (tag.key ? tag : (0, react_1.cloneElement)(tag, { key: index })); }) })] }))] })));
62
62
  };
63
63
  exports.default = DiagnosisSummary;
64
64
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
package/lib/organisms/diagnosis-summary.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"diagnosis-summary.js","sourceRoot":"","sources":["../../src/organisms/diagnosis-summary.tsx"],"names":[],"mappings":"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"}
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.157",
3
+ "version": "2.0.158",
4
4
  "description": "ltht-react clinical DiagnosisSummary component.",
5
5
  "author": "LTHT",
6
6
  "homepage": "",
@@ -28,15 +28,16 @@
28
28
  "dependencies": {
29
29
  "@emotion/react": "^11.0.0",
30
30
  "@emotion/styled": "^11.0.0",
31
- "@ltht-react/button": "^2.0.157",
32
- "@ltht-react/hooks": "^2.0.157",
33
- "@ltht-react/icon": "^2.0.157",
34
- "@ltht-react/list": "^2.0.157",
35
- "@ltht-react/styles": "^2.0.157",
36
- "@ltht-react/type-summary": "^2.0.157",
37
- "@ltht-react/types": "^2.0.157",
38
- "@ltht-react/utils": "^2.0.157",
31
+ "@ltht-react/button": "^2.0.158",
32
+ "@ltht-react/hooks": "^2.0.158",
33
+ "@ltht-react/icon": "^2.0.158",
34
+ "@ltht-react/list": "^2.0.158",
35
+ "@ltht-react/styles": "^2.0.158",
36
+ "@ltht-react/type-summary": "^2.0.158",
37
+ "@ltht-react/types": "^2.0.158",
38
+ "@ltht-react/utils": "^2.0.158",
39
+ "html-react-parser": "^5.0.6",
39
40
  "react": "^18.2.0"
40
41
  },
41
- "gitHead": "21869e098a2ce54845ba38dc840a398aab38d122"
42
+ "gitHead": "19509b3e59930ce4e174820852c6c16279d37baa"
42
43
  }
package/src/atoms/diagnosis-category.tsx CHANGED
@@ -1,31 +1,31 @@
1
- import { FC, HTMLAttributes } from 'react'
2
- import styled from '@emotion/styled'
3
-
4
- import { TEXT_COLOURS } from '@ltht-react/styles'
5
- import { Condition } from '@ltht-react/types'
6
- import { codeableConceptDisplaySummary } from '@ltht-react/utils'
7
-
8
- const StyledConditionCategory = styled.div<IStyledDescription>`
9
- color: ${TEXT_COLOURS.SECONDARY.VALUE};
10
- text-align: left;
11
- font-size: smaller;
12
- padding-top: 0.25rem;
13
- text-decoration: ${({ enteredInError }) => (enteredInError ? 'line-through' : 'none')};
14
- `
15
-
16
- const DiagnosisCategory: FC<Props> = ({ condition, enteredInError, ...rest }) => (
17
- <StyledConditionCategory enteredInError={enteredInError} {...rest}>
18
- {codeableConceptDisplaySummary(condition.severity)}
19
- </StyledConditionCategory>
20
- )
21
-
22
- interface Props extends HTMLAttributes<HTMLDivElement> {
23
- condition: Condition
24
- enteredInError: boolean
25
- }
26
-
27
- interface IStyledDescription {
28
- enteredInError: boolean
29
- }
30
-
31
- export default DiagnosisCategory
1
+ import { FC, HTMLAttributes } from 'react'
2
+ import styled from '@emotion/styled'
3
+
4
+ import { TEXT_COLOURS } from '@ltht-react/styles'
5
+ import { Condition } from '@ltht-react/types'
6
+ import { codeableConceptDisplaySummary } from '@ltht-react/utils'
7
+
8
+ const StyledConditionCategory = styled.div<IStyledDescription>`
9
+ color: ${TEXT_COLOURS.SECONDARY.VALUE};
10
+ text-align: left;
11
+ font-size: smaller;
12
+ padding-top: 0.25rem;
13
+ text-decoration: ${({ enteredInError }) => (enteredInError ? 'line-through' : 'none')};
14
+ `
15
+
16
+ const DiagnosisCategory: FC<Props> = ({ condition, enteredInError, ...rest }) => (
17
+ <StyledConditionCategory enteredInError={enteredInError} {...rest}>
18
+ {codeableConceptDisplaySummary(condition.severity)}
19
+ </StyledConditionCategory>
20
+ )
21
+
22
+ interface Props extends HTMLAttributes<HTMLDivElement> {
23
+ condition: Condition
24
+ enteredInError: boolean
25
+ }
26
+
27
+ interface IStyledDescription {
28
+ enteredInError: boolean
29
+ }
30
+
31
+ export default DiagnosisCategory
package/src/atoms/diagnosis-data-source.tsx CHANGED
@@ -1,45 +1,45 @@
1
- import { FC, HTMLAttributes } from 'react'
2
- import styled from '@emotion/styled'
3
-
4
- import { TEXT_COLOURS } from '@ltht-react/styles'
5
- import { Condition } from '@ltht-react/types'
6
-
7
- const StyledConditionStatus = styled.div<IStyledDescription>`
8
- color: ${TEXT_COLOURS.SECONDARY.VALUE};
9
- text-align: left;
10
- font-size: smaller;
11
- text-decoration: ${({ enteredInError }) => (enteredInError ? 'line-through' : 'none')};
12
- `
13
-
14
- const extractDataSourceDisplayNames = (condition: Condition) => {
15
- const dataSourceDisplayNames: string[] = []
16
-
17
- condition?.metadata?.dataSources?.forEach((dataSource, _) => {
18
- if (dataSource?.display) {
19
- dataSourceDisplayNames.push(dataSource.display)
20
- }
21
- })
22
-
23
- return dataSourceDisplayNames.join(', ')
24
- }
25
-
26
- const DiagnosisDataSource: FC<Props> = ({ condition, enteredInError, ...rest }) => {
27
- const dataSourceDisplayNames = extractDataSourceDisplayNames(condition)
28
-
29
- return (
30
- <StyledConditionStatus enteredInError={enteredInError} {...rest}>
31
- {dataSourceDisplayNames ? `Source: ${dataSourceDisplayNames}` : `Source: Unknown`}
32
- </StyledConditionStatus>
33
- )
34
- }
35
-
36
- interface Props extends HTMLAttributes<HTMLDivElement> {
37
- condition: Condition
38
- enteredInError: boolean
39
- }
40
-
41
- interface IStyledDescription {
42
- enteredInError: boolean
43
- }
44
-
45
- export default DiagnosisDataSource
1
+ import { FC, HTMLAttributes } from 'react'
2
+ import styled from '@emotion/styled'
3
+
4
+ import { TEXT_COLOURS } from '@ltht-react/styles'
5
+ import { Condition } from '@ltht-react/types'
6
+
7
+ const StyledConditionStatus = styled.div<IStyledDescription>`
8
+ color: ${TEXT_COLOURS.SECONDARY.VALUE};
9
+ text-align: left;
10
+ font-size: smaller;
11
+ text-decoration: ${({ enteredInError }) => (enteredInError ? 'line-through' : 'none')};
12
+ `
13
+
14
+ const extractDataSourceDisplayNames = (condition: Condition) => {
15
+ const dataSourceDisplayNames: string[] = []
16
+
17
+ condition?.metadata?.dataSources?.forEach((dataSource, _) => {
18
+ if (dataSource?.display) {
19
+ dataSourceDisplayNames.push(dataSource.display)
20
+ }
21
+ })
22
+
23
+ return dataSourceDisplayNames.join(', ')
24
+ }
25
+
26
+ const DiagnosisDataSource: FC<Props> = ({ condition, enteredInError, ...rest }) => {
27
+ const dataSourceDisplayNames = extractDataSourceDisplayNames(condition)
28
+
29
+ return (
30
+ <StyledConditionStatus enteredInError={enteredInError} {...rest}>
31
+ {dataSourceDisplayNames ? `Source: ${dataSourceDisplayNames}` : `Source: Unknown`}
32
+ </StyledConditionStatus>
33
+ )
34
+ }
35
+
36
+ interface Props extends HTMLAttributes<HTMLDivElement> {
37
+ condition: Condition
38
+ enteredInError: boolean
39
+ }
40
+
41
+ interface IStyledDescription {
42
+ enteredInError: boolean
43
+ }
44
+
45
+ export default DiagnosisDataSource
package/src/atoms/diagnosis-onset-estimated.tsx CHANGED
@@ -1,40 +1,40 @@
1
- import { FC, HTMLAttributes } from 'react'
2
- import styled from '@emotion/styled'
3
-
4
- import { TEXT_COLOURS } from '@ltht-react/styles'
5
- import { Condition } from '@ltht-react/types'
6
-
7
- import { getBooleanExtension } from '@ltht-react/utils'
8
-
9
- const StyledOnsetEstimated = styled.div<IStyledDescription>`
10
- color: ${TEXT_COLOURS.INFO};
11
- font-size: x-small;
12
- white-space: pre-wrap;
13
- display: inline-block;
14
- text-align: right;
15
- text-decoration: ${({ enteredInError }) => (enteredInError ? 'line-through' : 'none')};
16
- `
17
-
18
- const DiagnosisOnsetEstimated: FC<Props> = ({ condition, enteredInError, ...rest }) => {
19
- const onsetDateEstimated = getBooleanExtension(
20
- condition.extension,
21
- 'https://fhir.leedsth.nhs.uk/ValueSet/diagnosis-onset-date-estimated-1'
22
- )
23
-
24
- return (
25
- <StyledOnsetEstimated enteredInError={enteredInError} {...rest}>
26
- {onsetDateEstimated ? '(estimated)' : ''}
27
- </StyledOnsetEstimated>
28
- )
29
- }
30
-
31
- interface Props extends HTMLAttributes<HTMLDivElement> {
32
- condition: Condition
33
- enteredInError: boolean
34
- }
35
-
36
- interface IStyledDescription {
37
- enteredInError: boolean
38
- }
39
-
40
- export default DiagnosisOnsetEstimated
1
+ import { FC, HTMLAttributes } from 'react'
2
+ import styled from '@emotion/styled'
3
+
4
+ import { TEXT_COLOURS } from '@ltht-react/styles'
5
+ import { Condition } from '@ltht-react/types'
6
+
7
+ import { getBooleanExtension } from '@ltht-react/utils'
8
+
9
+ const StyledOnsetEstimated = styled.div<IStyledDescription>`
10
+ color: ${TEXT_COLOURS.INFO};
11
+ font-size: x-small;
12
+ white-space: pre-wrap;
13
+ display: inline-block;
14
+ text-align: right;
15
+ text-decoration: ${({ enteredInError }) => (enteredInError ? 'line-through' : 'none')};
16
+ `
17
+
18
+ const DiagnosisOnsetEstimated: FC<Props> = ({ condition, enteredInError, ...rest }) => {
19
+ const onsetDateEstimated = getBooleanExtension(
20
+ condition.extension,
21
+ 'https://fhir.leedsth.nhs.uk/ValueSet/diagnosis-onset-date-estimated-1'
22
+ )
23
+
24
+ return (
25
+ <StyledOnsetEstimated enteredInError={enteredInError} {...rest}>
26
+ {onsetDateEstimated ? '(estimated)' : ''}
27
+ </StyledOnsetEstimated>
28
+ )
29
+ }
30
+
31
+ interface Props extends HTMLAttributes<HTMLDivElement> {
32
+ condition: Condition
33
+ enteredInError: boolean
34
+ }
35
+
36
+ interface IStyledDescription {
37
+ enteredInError: boolean
38
+ }
39
+
40
+ export default DiagnosisOnsetEstimated
package/src/atoms/diagnosis-title.tsx CHANGED
@@ -1,70 +1,72 @@
1
- import { FC, HTMLAttributes } from 'react'
2
- import styled from '@emotion/styled'
3
- import { titleCase, codeableConceptDisplaySummary } from '@ltht-react/utils'
4
-
5
- import { TEXT_COLOURS } from '@ltht-react/styles'
6
- import { Condition } from '@ltht-react/types'
7
- import { SNIPPET_HOVER_TEXT } from '../constants'
8
-
9
- const StyledConditionTitle = styled.div<IStyledDescription>`
10
- color: ${TEXT_COLOURS.PRIMARY};
11
- text-align: left;
12
- text-decoration: ${({ enteredInError }) => (enteredInError ? 'line-through' : 'none')};
13
- `
14
-
15
- const DiagnosisTitle: FC<Props> = ({ condition, enteredInError, systemExclusionsFilter }) => {
16
- const snippetTagText = extractSnippetTagDisplayValue(condition)
17
-
18
- if (snippetTagText) {
19
- return renderTitle(snippetTagText, enteredInError)
20
- }
21
-
22
- const conditionText = extractConditionOrFallbackText(condition, systemExclusionsFilter)
23
- const conditionStatusText = extractConditionStatusText(condition)
24
- const title = conditionStatusText ? `${conditionText}, ${conditionStatusText}` : conditionText
25
-
26
- return renderTitle(title, enteredInError)
27
- }
28
-
29
- const extractConditionOrFallbackText = (condition: Condition, systemExclusionsFilter?: string[]): string => {
30
- if (!condition?.code) {
31
- return titleCase('Unknown Condition')
32
- }
33
-
34
- const diagnosisTitle = codeableConceptDisplaySummary(condition.code, systemExclusionsFilter)
35
-
36
- return titleCase(diagnosisTitle || 'Unknown Condition')
37
- }
38
-
39
- const extractConditionStatusText = (condition: Condition): string => {
40
- const statusParts: string[] = []
41
-
42
- if (condition?.clinicalStatus) {
43
- statusParts.push(condition?.clinicalStatus)
44
- }
45
-
46
- if (condition?.verificationStatus) {
47
- statusParts.push(condition.verificationStatus)
48
- }
49
-
50
- return titleCase(statusParts.join(', '))
51
- }
52
-
53
- const extractSnippetTagDisplayValue = (condition: Condition) =>
54
- condition?.metadata.tag?.find((coding) => coding?.system === SNIPPET_HOVER_TEXT)?.display
55
-
56
- const renderTitle = (title: string, enteredInError: boolean) => (
57
- <StyledConditionTitle enteredInError={enteredInError}>{title}</StyledConditionTitle>
58
- )
59
-
60
- interface Props extends HTMLAttributes<HTMLDivElement> {
61
- condition: Condition
62
- enteredInError: boolean
63
- systemExclusionsFilter?: string[]
64
- }
65
-
66
- interface IStyledDescription {
67
- enteredInError: boolean
68
- }
69
-
70
- export default DiagnosisTitle
1
+ import { FC, HTMLAttributes } from 'react'
2
+ import styled from '@emotion/styled'
3
+ import { titleCase, codeableConceptDisplaySummary } from '@ltht-react/utils'
4
+ import parseHtml from 'html-react-parser'
5
+
6
+ import { TEXT_COLOURS } from '@ltht-react/styles'
7
+ import { Condition } from '@ltht-react/types'
8
+ import { SNIPPET_HOVER_TEXT } from '../constants'
9
+
10
+ const StyledConditionTitle = styled.div<IStyledDescription>`
11
+ color: ${TEXT_COLOURS.PRIMARY};
12
+ text-align: left;
13
+ text-decoration: ${({ enteredInError }) => (enteredInError ? 'line-through' : 'none')};
14
+ `
15
+
16
+ const DiagnosisTitle: FC<Props> = ({ condition, enteredInError, systemExclusionsFilter, isRichText = false }) => {
17
+ const snippetTagText = extractSnippetTagDisplayValue(condition)
18
+
19
+ if (snippetTagText) {
20
+ return renderTitle(snippetTagText, enteredInError, isRichText)
21
+ }
22
+
23
+ const conditionText = extractConditionOrFallbackText(condition, systemExclusionsFilter)
24
+ const conditionStatusText = extractConditionStatusText(condition)
25
+ const title = conditionStatusText ? `${conditionText}, ${conditionStatusText}` : conditionText
26
+
27
+ return renderTitle(title, enteredInError, isRichText)
28
+ }
29
+
30
+ const extractConditionOrFallbackText = (condition: Condition, systemExclusionsFilter?: string[]): string => {
31
+ if (!condition?.code) {
32
+ return titleCase('Unknown Condition')
33
+ }
34
+
35
+ const diagnosisTitle = codeableConceptDisplaySummary(condition.code, systemExclusionsFilter)
36
+
37
+ return titleCase(diagnosisTitle || 'Unknown Condition')
38
+ }
39
+
40
+ const extractConditionStatusText = (condition: Condition): string => {
41
+ const statusParts: string[] = []
42
+
43
+ if (condition?.clinicalStatus) {
44
+ statusParts.push(condition?.clinicalStatus)
45
+ }
46
+
47
+ if (condition?.verificationStatus) {
48
+ statusParts.push(condition.verificationStatus)
49
+ }
50
+
51
+ return titleCase(statusParts.join(', '))
52
+ }
53
+
54
+ const extractSnippetTagDisplayValue = (condition: Condition) =>
55
+ condition?.metadata.tag?.find((coding) => coding?.system === SNIPPET_HOVER_TEXT)?.display
56
+
57
+ const renderTitle = (title: string, enteredInError: boolean, isRichText?: boolean) => (
58
+ <StyledConditionTitle enteredInError={enteredInError}>{isRichText ? parseHtml(title) : title}</StyledConditionTitle>
59
+ )
60
+
61
+ interface Props extends HTMLAttributes<HTMLDivElement> {
62
+ condition: Condition
63
+ enteredInError: boolean
64
+ systemExclusionsFilter?: string[]
65
+ isRichText?: boolean
66
+ }
67
+
68
+ interface IStyledDescription {
69
+ enteredInError: boolean
70
+ }
71
+
72
+ export default DiagnosisTitle
package/src/constants.ts CHANGED
@@ -1,5 +1,5 @@
1
- const SNIPPET_HOVER_TEXT = 'https://leedsth.nhs.uk/cds/snippet-hover-text'
2
- const EXTENSION_TEMPLATE_DISPLAY_NAME = 'https://leedsth.nhs.uk/cds/extension-template-display-name'
3
- const EXTENSION_TEMPLATE_VERSION = 'https://leedsth.nhs.uk/cds/extension-template-version'
4
-
5
- export { EXTENSION_TEMPLATE_DISPLAY_NAME, EXTENSION_TEMPLATE_VERSION, SNIPPET_HOVER_TEXT }
1
+ const SNIPPET_HOVER_TEXT = 'https://leedsth.nhs.uk/cds/snippet-hover-text'
2
+ const EXTENSION_TEMPLATE_DISPLAY_NAME = 'https://leedsth.nhs.uk/cds/extension-template-display-name'
3
+ const EXTENSION_TEMPLATE_VERSION = 'https://leedsth.nhs.uk/cds/extension-template-version'
4
+
5
+ export { EXTENSION_TEMPLATE_DISPLAY_NAME, EXTENSION_TEMPLATE_VERSION, SNIPPET_HOVER_TEXT }
package/src/index.tsx CHANGED
@@ -1,3 +1,3 @@
1
- import DiagnosisSummary from './organisms/diagnosis-summary'
2
-
3
- export default DiagnosisSummary
1
+ import DiagnosisSummary from './organisms/diagnosis-summary'
2
+
3
+ export default DiagnosisSummary
package/src/molecules/diagnosis-redacted.tsx CHANGED
@@ -1,31 +1,31 @@
1
- import { FC } from 'react'
2
- import styled from '@emotion/styled'
3
-
4
- import { Condition } from '@ltht-react/types'
5
- import { DateSummary, RedactedDescription } from '@ltht-react/type-summary'
6
-
7
- const StyledRedactedDescription = styled.div`
8
- flex-grow: 1;
9
- text-align: left;
10
- `
11
-
12
- const StyledDateSummary = styled.div`
13
- text-align: right;
14
- `
15
-
16
- const DiagnosisRedacted: FC<Props> = ({ condition }) => (
17
- <>
18
- <StyledRedactedDescription>
19
- <RedactedDescription />
20
- </StyledRedactedDescription>
21
- <StyledDateSummary>
22
- <DateSummary datetime={condition?.onset?.dateTime} />
23
- </StyledDateSummary>
24
- </>
25
- )
26
-
27
- interface Props {
28
- condition?: Condition | null
29
- }
30
-
31
- export default DiagnosisRedacted
1
+ import { FC } from 'react'
2
+ import styled from '@emotion/styled'
3
+
4
+ import { Condition } from '@ltht-react/types'
5
+ import { DateSummary, RedactedDescription } from '@ltht-react/type-summary'
6
+
7
+ const StyledRedactedDescription = styled.div`
8
+ flex-grow: 1;
9
+ text-align: left;
10
+ `
11
+
12
+ const StyledDateSummary = styled.div`
13
+ text-align: right;
14
+ `
15
+
16
+ const DiagnosisRedacted: FC<Props> = ({ condition }) => (
17
+ <>
18
+ <StyledRedactedDescription>
19
+ <RedactedDescription />
20
+ </StyledRedactedDescription>
21
+ <StyledDateSummary>
22
+ <DateSummary datetime={condition?.onset?.dateTime} />
23
+ </StyledDateSummary>
24
+ </>
25
+ )
26
+
27
+ interface Props {
28
+ condition?: Condition | null
29
+ }
30
+
31
+ export default DiagnosisRedacted
package/src/organisms/diagnosis-summary.tsx CHANGED
@@ -1,249 +1,252 @@
1
- import { cloneElement, FC, HTMLAttributes, ReactElement } from 'react'
2
- import styled from '@emotion/styled'
3
-
4
- import { Condition, ConditionVerificationStatus } from '@ltht-react/types'
5
- import { DateSummary } from '@ltht-react/type-summary'
6
- import Icon from '@ltht-react/icon'
7
- import { Button, ButtonProps } from '@ltht-react/button'
8
-
9
- import { BTN_COLOURS, SMALL_SCREEN_MAXIMUM_MEDIA_QUERY, TABLET_MINIMUM_MEDIA_QUERY } from '@ltht-react/styles'
10
- import Title from '../atoms/diagnosis-title'
11
- import OnsetDateEstimated from '../atoms/diagnosis-onset-estimated'
12
- import Redacted from '../molecules/diagnosis-redacted'
13
- import DiagnosisDataSource from '../atoms/diagnosis-data-source'
14
-
15
- const StyledTitle = styled.div`
16
- display: flex;
17
- `
18
-
19
- const StyledSummary = styled.div`
20
- display: flex;
21
- justify-content: center;
22
- flex-direction: column;
23
- `
24
-
25
- const StyledDescription = styled.div`
26
- flex-grow: 1;
27
- `
28
-
29
- const StyledTitleAndDateContainer = styled.div`
30
- display: flex;
31
- flex-grow: 1;
32
- flex-direction: row;
33
- gap: 5px;
34
-
35
- ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
36
- flex-flow: column nowrap;
37
- align-items: flex-start;
38
- div {
39
- text-align: left;
40
- }
41
- }
42
- `
43
-
44
- const StyledButtonAndTagContainer = styled.div`
45
- display: flex;
46
- flex-grow: 1;
47
- flex-direction: row;
48
- gap: 5px;
49
- margin-top: 5px;
50
-
51
- ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
52
- flex-direction: row;
53
- justify-content: space-between;
54
- }
55
- `
56
-
57
- const StyledResponsiveButtonContainer = styled.div`
58
- display: flex;
59
- margin-right: auto;
60
- flex-flow: row wrap;
61
- gap: 5px;
62
- height: fit-content;
63
- flex-grow: 1;
64
-
65
- & > * {
66
- height: 1.2rem;
67
- padding: 0 5px;
68
-
69
- ${TABLET_MINIMUM_MEDIA_QUERY} {
70
- font-size: 0.8rem !important;
71
- }
72
- }
73
-
74
- ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
75
- margin: 0;
76
- flex-direction: column;
77
-
78
- span {
79
- width: 100%;
80
- max-width: 10rem;
81
- }
82
- }
83
- `
84
-
85
- const StyledResponsiveTagContainer = styled.div`
86
- display: flex;
87
- margin-left: auto;
88
- flex-flow: row wrap;
89
- gap: 5px;
90
- height: fit-content;
91
- justify-content: flex-end;
92
- flex-grow: 1;
93
-
94
- & > * {
95
- display: flex;
96
- align-items: center;
97
- height: 1.2rem;
98
- margin: 0 !important;
99
- font-size: 0.8rem !important;
100
- padding: 0 10px;
101
- justify-content: center;
102
-
103
- ${TABLET_MINIMUM_MEDIA_QUERY} {
104
- font-size: 0.8rem !important;
105
- }
106
- }
107
-
108
- ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
109
- flex-direction: column;
110
- margin: 0;
111
-
112
- & > * {
113
- margin: 0;
114
- width: 100%;
115
- max-width: 10rem;
116
- padding: 0 10px;
117
- }
118
- }
119
- `
120
-
121
- const StyledButton = styled(Button)`
122
- padding: 0 5px;
123
- width: fit-content;
124
-
125
- ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
126
- width: 100%;
127
- max-width: 10rem;
128
- }
129
- `
130
- const StyledDate = styled.div`
131
- display: flex;
132
- flex-flow: column nowrap;
133
- text-align: right;
134
- min-width: 6rem;
135
- justify-content: start;
136
- `
137
- const IconButtonWrapper = styled(Button)`
138
- -webkit-box-align: center;
139
- align-items: center;
140
- -webkit-box-pack: center;
141
- justify-content: center;
142
- margin-right: 0.5rem;
143
- display: inline-block !important;
144
- margin-left: 0.5rem;
145
- width: auto;
146
- padding: 0 5px;
147
- `
148
- const IconWrapper = styled.div`
149
- margin-left: 0.5rem;
150
- display: inline-block;
151
- `
152
-
153
- const DiagnosisSummary: FC<Props> = ({
154
- condition,
155
- extendedTemplateDisplayName,
156
- extensionTemplateDisplayName,
157
- extensionClickHandler,
158
- isReadOnly = false,
159
- dateOnlyView = false,
160
- canExtendDiagnosis = false,
161
- displaySource = false,
162
- controls = [],
163
- tags = [],
164
- systemExclusionsFilter = [],
165
- ...rest
166
- }) => {
167
- if (condition.metadata.isRedacted) {
168
- return (
169
- <StyledSummary {...rest}>
170
- <Redacted condition={condition} />
171
- </StyledSummary>
172
- )
173
- }
174
-
175
- const enteredInError = condition.verificationStatus === ConditionVerificationStatus.EnteredInError
176
-
177
- return (
178
- <StyledSummary {...rest}>
179
- <StyledTitleAndDateContainer>
180
- <StyledDescription>
181
- <StyledTitle>
182
- <Title
183
- enteredInError={enteredInError}
184
- condition={condition}
185
- systemExclusionsFilter={systemExclusionsFilter}
186
- />
187
- {extensionTemplateDisplayName && !isReadOnly && canExtendDiagnosis && !enteredInError && (
188
- <IconButtonWrapper
189
- onClick={extensionClickHandler}
190
- type="button"
191
- styling={{ buttonStyle: 'clear' }}
192
- value=""
193
- icon={<Icon type="folder-plus" size="medium" />}
194
- iconPlacement="center"
195
- iconColour={BTN_COLOURS.PRIMARY.VALUE}
196
- title={`This diagnosis can be extended further using form '${extensionTemplateDisplayName}' by clicking here`}
197
- />
198
- )}
199
- {extendedTemplateDisplayName && (
200
- <IconWrapper>
201
- <Icon
202
- type="comment"
203
- size="medium"
204
- title={`This diagnosis has been extended beyond standard diagnosis with form '${extendedTemplateDisplayName}'.
205
- To view these extra details, click into the full diagnosis detail or edit the existing form.`}
206
- />
207
- </IconWrapper>
208
- )}
209
- </StyledTitle>
210
- {displaySource && <DiagnosisDataSource condition={condition} enteredInError={enteredInError} />}
211
- </StyledDescription>
212
- <StyledDate>
213
- <DateSummary enteredInError={enteredInError} datetime={condition?.assertedDate} dateOnlyView={dateOnlyView} />
214
- <OnsetDateEstimated enteredInError={enteredInError} condition={condition} />
215
- </StyledDate>
216
- </StyledTitleAndDateContainer>
217
-
218
- {!isReadOnly && (controls.length > 0 || tags.length > 0) && (
219
- <StyledButtonAndTagContainer>
220
- <StyledResponsiveButtonContainer>
221
- {controls.map((props, index) => (
222
- <StyledButton key={index} {...props} />
223
- ))}
224
- </StyledResponsiveButtonContainer>
225
-
226
- <StyledResponsiveTagContainer>
227
- {tags?.map((tag, index) => (tag.key ? tag : cloneElement(tag, { key: index })))}
228
- </StyledResponsiveTagContainer>
229
- </StyledButtonAndTagContainer>
230
- )}
231
- </StyledSummary>
232
- )
233
- }
234
-
235
- interface Props extends HTMLAttributes<HTMLDivElement> {
236
- condition: Condition
237
- extendedTemplateDisplayName?: string | undefined
238
- extensionTemplateDisplayName?: string | undefined
239
- isReadOnly?: boolean
240
- dateOnlyView?: boolean
241
- displaySource?: boolean
242
- controls?: ButtonProps[]
243
- tags?: ReactElement[]
244
- canExtendDiagnosis?: boolean
245
- extensionClickHandler?(): void
246
- systemExclusionsFilter?: string[]
247
- }
248
-
249
- export default DiagnosisSummary
1
+ import { cloneElement, FC, HTMLAttributes, ReactElement } from 'react'
2
+ import styled from '@emotion/styled'
3
+
4
+ import { Condition, ConditionVerificationStatus } from '@ltht-react/types'
5
+ import { DateSummary } from '@ltht-react/type-summary'
6
+ import Icon from '@ltht-react/icon'
7
+ import { Button, ButtonProps } from '@ltht-react/button'
8
+
9
+ import { BTN_COLOURS, SMALL_SCREEN_MAXIMUM_MEDIA_QUERY, TABLET_MINIMUM_MEDIA_QUERY } from '@ltht-react/styles'
10
+ import Title from '../atoms/diagnosis-title'
11
+ import OnsetDateEstimated from '../atoms/diagnosis-onset-estimated'
12
+ import Redacted from '../molecules/diagnosis-redacted'
13
+ import DiagnosisDataSource from '../atoms/diagnosis-data-source'
14
+
15
+ const StyledTitle = styled.div`
16
+ display: flex;
17
+ `
18
+
19
+ const StyledSummary = styled.div`
20
+ display: flex;
21
+ justify-content: center;
22
+ flex-direction: column;
23
+ `
24
+
25
+ const StyledDescription = styled.div`
26
+ flex-grow: 1;
27
+ `
28
+
29
+ const StyledTitleAndDateContainer = styled.div`
30
+ display: flex;
31
+ flex-grow: 1;
32
+ flex-direction: row;
33
+ gap: 5px;
34
+
35
+ ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
36
+ flex-flow: column nowrap;
37
+ align-items: flex-start;
38
+ div {
39
+ text-align: left;
40
+ }
41
+ }
42
+ `
43
+
44
+ const StyledButtonAndTagContainer = styled.div`
45
+ display: flex;
46
+ flex-grow: 1;
47
+ flex-direction: row;
48
+ gap: 5px;
49
+ margin-top: 5px;
50
+
51
+ ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
52
+ flex-direction: row;
53
+ justify-content: space-between;
54
+ }
55
+ `
56
+
57
+ const StyledResponsiveButtonContainer = styled.div`
58
+ display: flex;
59
+ margin-right: auto;
60
+ flex-flow: row wrap;
61
+ gap: 5px;
62
+ height: fit-content;
63
+ flex-grow: 1;
64
+
65
+ & > * {
66
+ height: 1.2rem;
67
+ padding: 0 5px;
68
+
69
+ ${TABLET_MINIMUM_MEDIA_QUERY} {
70
+ font-size: 0.8rem !important;
71
+ }
72
+ }
73
+
74
+ ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
75
+ margin: 0;
76
+ flex-direction: column;
77
+
78
+ span {
79
+ width: 100%;
80
+ max-width: 10rem;
81
+ }
82
+ }
83
+ `
84
+
85
+ const StyledResponsiveTagContainer = styled.div`
86
+ display: flex;
87
+ margin-left: auto;
88
+ flex-flow: row wrap;
89
+ gap: 5px;
90
+ height: fit-content;
91
+ justify-content: flex-end;
92
+ flex-grow: 1;
93
+
94
+ & > * {
95
+ display: flex;
96
+ align-items: center;
97
+ height: 1.2rem;
98
+ margin: 0 !important;
99
+ font-size: 0.8rem !important;
100
+ padding: 0 10px;
101
+ justify-content: center;
102
+
103
+ ${TABLET_MINIMUM_MEDIA_QUERY} {
104
+ font-size: 0.8rem !important;
105
+ }
106
+ }
107
+
108
+ ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
109
+ flex-direction: column;
110
+ margin: 0;
111
+
112
+ & > * {
113
+ margin: 0;
114
+ width: 100%;
115
+ max-width: 10rem;
116
+ padding: 0 10px;
117
+ }
118
+ }
119
+ `
120
+
121
+ const StyledButton = styled(Button)`
122
+ padding: 0 5px;
123
+ width: fit-content;
124
+
125
+ ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
126
+ width: 100%;
127
+ max-width: 10rem;
128
+ }
129
+ `
130
+ const StyledDate = styled.div`
131
+ display: flex;
132
+ flex-flow: column nowrap;
133
+ text-align: right;
134
+ min-width: 6rem;
135
+ justify-content: start;
136
+ `
137
+ const IconButtonWrapper = styled(Button)`
138
+ -webkit-box-align: center;
139
+ align-items: center;
140
+ -webkit-box-pack: center;
141
+ justify-content: center;
142
+ margin-right: 0.5rem;
143
+ display: inline-block !important;
144
+ margin-left: 0.5rem;
145
+ width: auto;
146
+ padding: 0 5px;
147
+ `
148
+ const IconWrapper = styled.div`
149
+ margin-left: 0.5rem;
150
+ display: inline-block;
151
+ `
152
+
153
+ const DiagnosisSummary: FC<Props> = ({
154
+ condition,
155
+ extendedTemplateDisplayName,
156
+ extensionTemplateDisplayName,
157
+ extensionClickHandler,
158
+ isReadOnly = false,
159
+ dateOnlyView = false,
160
+ canExtendDiagnosis = false,
161
+ displaySource = false,
162
+ controls = [],
163
+ tags = [],
164
+ systemExclusionsFilter = [],
165
+ isRichText = false,
166
+ ...rest
167
+ }) => {
168
+ if (condition.metadata.isRedacted) {
169
+ return (
170
+ <StyledSummary {...rest}>
171
+ <Redacted condition={condition} />
172
+ </StyledSummary>
173
+ )
174
+ }
175
+
176
+ const enteredInError = condition.verificationStatus === ConditionVerificationStatus.EnteredInError
177
+
178
+ return (
179
+ <StyledSummary {...rest}>
180
+ <StyledTitleAndDateContainer>
181
+ <StyledDescription>
182
+ <StyledTitle>
183
+ <Title
184
+ enteredInError={enteredInError}
185
+ condition={condition}
186
+ systemExclusionsFilter={systemExclusionsFilter}
187
+ isRichText={isRichText}
188
+ />
189
+ {extensionTemplateDisplayName && !isReadOnly && canExtendDiagnosis && !enteredInError && (
190
+ <IconButtonWrapper
191
+ onClick={extensionClickHandler}
192
+ type="button"
193
+ styling={{ buttonStyle: 'clear' }}
194
+ value=""
195
+ icon={<Icon type="folder-plus" size="medium" />}
196
+ iconPlacement="center"
197
+ iconColour={BTN_COLOURS.PRIMARY.VALUE}
198
+ title={`This diagnosis can be extended further using form '${extensionTemplateDisplayName}' by clicking here`}
199
+ />
200
+ )}
201
+ {extendedTemplateDisplayName && (
202
+ <IconWrapper>
203
+ <Icon
204
+ type="comment"
205
+ size="medium"
206
+ title={`This diagnosis has been extended beyond standard diagnosis with form '${extendedTemplateDisplayName}'.
207
+ To view these extra details, click into the full diagnosis detail or edit the existing form.`}
208
+ />
209
+ </IconWrapper>
210
+ )}
211
+ </StyledTitle>
212
+ {displaySource && <DiagnosisDataSource condition={condition} enteredInError={enteredInError} />}
213
+ </StyledDescription>
214
+ <StyledDate>
215
+ <DateSummary enteredInError={enteredInError} datetime={condition?.assertedDate} dateOnlyView={dateOnlyView} />
216
+ <OnsetDateEstimated enteredInError={enteredInError} condition={condition} />
217
+ </StyledDate>
218
+ </StyledTitleAndDateContainer>
219
+
220
+ {!isReadOnly && (controls.length > 0 || tags.length > 0) && (
221
+ <StyledButtonAndTagContainer>
222
+ <StyledResponsiveButtonContainer>
223
+ {controls.map((props, index) => (
224
+ <StyledButton key={index} {...props} />
225
+ ))}
226
+ </StyledResponsiveButtonContainer>
227
+
228
+ <StyledResponsiveTagContainer>
229
+ {tags?.map((tag, index) => (tag.key ? tag : cloneElement(tag, { key: index })))}
230
+ </StyledResponsiveTagContainer>
231
+ </StyledButtonAndTagContainer>
232
+ )}
233
+ </StyledSummary>
234
+ )
235
+ }
236
+
237
+ interface Props extends HTMLAttributes<HTMLDivElement> {
238
+ condition: Condition
239
+ extendedTemplateDisplayName?: string
240
+ extensionTemplateDisplayName?: string
241
+ isReadOnly?: boolean
242
+ dateOnlyView?: boolean
243
+ displaySource?: boolean
244
+ controls?: ButtonProps[]
245
+ tags?: ReactElement[]
246
+ canExtendDiagnosis?: boolean
247
+ extensionClickHandler?(): void
248
+ systemExclusionsFilter?: string[]
249
+ isRichText?: boolean
250
+ }
251
+
252
+ export default DiagnosisSummary