@ltht-react/flag-detail 2.0.84 → 2.0.85

package/lib/index.d.ts

@@ -1,8 +1,10 @@
 import { FC } from 'react';
 import { Flag } from '@ltht-react/types';
+import { ButtonProps } from '@ltht-react/button';
 import { CollapsibleDetailCollectionProps } from '@ltht-react/type-detail';
 declare const FlagDetail: FC<Props>;
 interface Props extends CollapsibleDetailCollectionProps {
     flag: Flag;
+    controls?: ButtonProps[];
 }
 export default FlagDetail;

package/lib/index.js

@@ -1,12 +1,40 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_1 = __importDefault(require("@emotion/styled"));
 var types_1 = require("@ltht-react/types");
 var utils_1 = require("@ltht-react/utils");
+var button_1 = require("@ltht-react/button");
+var styles_1 = require("@ltht-react/styles");
 var type_detail_1 = require("@ltht-react/type-detail");
+var StyledControlsContainer = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  margin: auto 10px auto 10px;\n  flex-direction: column;\n\n  ", " {\n    margin: 10px 0 0 0;\n    flex-flow: row wrap;\n  }\n\n  ", " {\n    margin: 10px 5px 0 0;\n    flex-direction: column;\n  }\n"], ["\n  display: flex;\n  margin: auto 10px auto 10px;\n  flex-direction: column;\n\n  ", " {\n    margin: 10px 0 0 0;\n    flex-flow: row wrap;\n  }\n\n  ", " {\n    margin: 10px 5px 0 0;\n    flex-direction: column;\n  }\n"])), styles_1.MOBILE_MAXIMUM_MEDIA_QUERY, styles_1.SMALL_SCREEN_MAXIMUM_MEDIA_QUERY);
+var StyledButton = (0, styled_1.default)(button_1.Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 2px 0 2px 0;\n  font-size: 0.8em !important;\n  padding: 1px 5px;\n\n  ", " {\n    margin: 2px 5px 2px 0;\n    width: fit-content;\n  }\n\n  ", " {\n    margin: 2px 0 2px 0;\n    width: 100%;\n    max-width: 200px;\n  }\n"], ["\n  margin: 2px 0 2px 0;\n  font-size: 0.8em !important;\n  padding: 1px 5px;\n\n  ", " {\n    margin: 2px 5px 2px 0;\n    width: fit-content;\n  }\n\n  ", " {\n    margin: 2px 0 2px 0;\n    width: 100%;\n    max-width: 200px;\n  }\n"])), styles_1.MOBILE_MAXIMUM_MEDIA_QUERY, styles_1.SMALL_SCREEN_MAXIMUM_MEDIA_QUERY);
 var FlagDetail = function (_a) {
-    var flag = _a.flag, _b = _a.viewType, viewType = _b === void 0 ? types_1.DetailViewType.Compact : _b;
-    return ((0, jsx_runtime_1.jsxs)(type_detail_1.CollapsibleDetailCollection, { viewType: viewType, children: [(0, jsx_runtime_1.jsx)(type_detail_1.CodeableConceptDetail, { term: "Code", concept: flag === null || flag === void 0 ? void 0 : flag.code }), (0, jsx_runtime_1.jsx)(type_detail_1.StringDetail, { term: "Status", description: flag.status.toString() }), (0, jsx_runtime_1.jsx)(type_detail_1.CodeableConceptDetail, { term: "Category", concept: flag === null || flag === void 0 ? void 0 : flag.category }), (0, jsx_runtime_1.jsx)(type_detail_1.PeriodDetail, { period: flag === null || flag === void 0 ? void 0 : flag.period }), (0, jsx_runtime_1.jsx)(type_detail_1.NarrativeDetail, { narrative: flag === null || flag === void 0 ? void 0 : flag.text }), (0, jsx_runtime_1.jsx)(type_detail_1.StringDetail, { term: "Advice", description: (0, utils_1.getStringExtension)(flag === null || flag === void 0 ? void 0 : flag.extension, 'https://leedsth.nhs.uk/alert/advice'), parse: false }), (0, jsx_runtime_1.jsx)(type_detail_1.ResourceReferenceDetail, { term: "Author", resourceReference: flag === null || flag === void 0 ? void 0 : flag.author })] }));
+    var flag = _a.flag, _b = _a.controls, controls = _b === void 0 ? [] : _b, _c = _a.viewType, viewType = _c === void 0 ? types_1.DetailViewType.Compact : _c;
+    var buttons = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+    if (controls.length) {
+        buttons = ((0, jsx_runtime_1.jsx)(StyledControlsContainer, { children: controls.map(function (props, index) { return ((0, jsx_runtime_1.jsx)(StyledButton, __assign({}, props), index)); }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(type_detail_1.CollapsibleDetailCollection, { viewType: viewType, children: [(0, jsx_runtime_1.jsx)(type_detail_1.CodeableConceptDetail, { term: "Code", concept: flag === null || flag === void 0 ? void 0 : flag.code }), (0, jsx_runtime_1.jsx)(type_detail_1.StringDetail, { term: "Status", description: flag.status.toString() }), (0, jsx_runtime_1.jsx)(type_detail_1.CodeableConceptDetail, { term: "Category", concept: flag === null || flag === void 0 ? void 0 : flag.category }), (0, jsx_runtime_1.jsx)(type_detail_1.PeriodDetail, { period: flag === null || flag === void 0 ? void 0 : flag.period }), (0, jsx_runtime_1.jsx)(type_detail_1.NarrativeDetail, { narrative: flag === null || flag === void 0 ? void 0 : flag.text }), (0, jsx_runtime_1.jsx)(type_detail_1.StringDetail, { term: "Advice", description: (0, utils_1.getStringExtension)(flag === null || flag === void 0 ? void 0 : flag.extension, 'https://leedsth.nhs.uk/alert/advice'), parse: false }), buttons, (0, jsx_runtime_1.jsx)(type_detail_1.ResourceReferenceDetail, { term: "Author", resourceReference: flag === null || flag === void 0 ? void 0 : flag.author })] }));
 };
 exports.default = FlagDetail;
+var templateObject_1, templateObject_2;
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;AACA,2CAAwD;AACxD,2CAAsD;AAEtD,uDAQgC;AAEhC,IAAM,UAAU,GAAc,UAAC,EAA2C;QAAzC,IAAI,UAAA,EAAE,gBAAiC,EAAjC,QAAQ,mBAAG,sBAAc,CAAC,OAAO,KAAA;IAAO,OAAA,CAC7E,wBAAC,yCAA2B,IAAC,QAAQ,EAAE,QAAQ,aAC7C,uBAAC,mCAAqB,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,GAAI,EAC1D,uBAAC,0BAAY,IAAC,IAAI,EAAC,QAAQ,EAAC,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAI,EACnE,uBAAC,mCAAqB,IAAC,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,GAAI,EAClE,uBAAC,0BAAY,IAAC,MAAM,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,GAAI,EACtC,uBAAC,6BAAe,IAAC,SAAS,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,GAAI,EAC1C,uBAAC,0BAAY,IACX,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,IAAA,0BAAkB,EAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,EAAE,qCAAqC,CAAC,EACvF,KAAK,EAAE,KAAK,GACZ,EACF,uBAAC,qCAAuB,IAAC,IAAI,EAAC,QAAQ,EAAC,iBAAiB,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,GAAI,IAC9C,CAC/B;AAd8E,CAc9E,CAAA;AAMD,kBAAe,UAAU,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AACA,2DAAoC;AACpC,2CAAwD;AACxD,2CAAsD;AACtD,6CAAwD;AACxD,6CAAiG;AAEjG,uDAQgC;AAEhC,IAAM,uBAAuB,GAAG,gBAAM,CAAC,GAAG,iSAAA,qFAKtC,EAA0B,kEAK1B,EAAgC,mEAInC,KATG,mCAA0B,EAK1B,yCAAgC,CAInC,CAAA;AACD,IAAM,YAAY,GAAG,IAAA,gBAAM,EAAC,eAAM,CAAC,8SAAA,qFAK/B,EAA0B,oEAK1B,EAAgC,8EAKnC,KAVG,mCAA0B,EAK1B,yCAAgC,CAKnC,CAAA;AAED,IAAM,UAAU,GAAc,UAAC,EAA0D;QAAxD,IAAI,UAAA,EAAE,gBAAa,EAAb,QAAQ,mBAAG,EAAE,KAAA,EAAE,gBAAiC,EAAjC,QAAQ,mBAAG,sBAAc,CAAC,OAAO,KAAA;IACrF,IAAI,OAAO,GAAG,kDAAK,CAAA;IACnB,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;QACpB,OAAO,GAAG,CACR,uBAAC,uBAAuB,cACrB,QAAQ,CAAC,GAAG,CAAC,UAAC,KAAK,EAAE,KAAK,IAAK,OAAA,CAC9B,uBAAC,YAAY,eAAiB,KAAK,GAAhB,KAAK,CAAe,CACxC,EAF+B,CAE/B,CAAC,GACsB,CAC3B,CAAA;IACH,CAAC;IAED,OAAO,CACL,wBAAC,yCAA2B,IAAC,QAAQ,EAAE,QAAQ,aAC7C,uBAAC,mCAAqB,IAAC,IAAI,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,GAAI,EAC1D,uBAAC,0BAAY,IAAC,IAAI,EAAC,QAAQ,EAAC,WAAW,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAI,EACnE,uBAAC,mCAAqB,IAAC,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,GAAI,EAClE,uBAAC,0BAAY,IAAC,MAAM,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,GAAI,EACtC,uBAAC,6BAAe,IAAC,SAAS,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,GAAI,EAC1C,uBAAC,0BAAY,IACX,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,IAAA,0BAAkB,EAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,EAAE,qCAAqC,CAAC,EACvF,KAAK,EAAE,KAAK,GACZ,EACD,OAAO,EACR,uBAAC,qCAAuB,IAAC,IAAI,EAAC,QAAQ,EAAC,iBAAiB,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,GAAI,IAC9C,CAC/B,CAAA;AACH,CAAC,CAAA;AAOD,kBAAe,UAAU,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ltht-react/flag-detail",
-  "version": "2.0.84",
+  "version": "2.0.85",
   "description": "ltht-react clinical FlagDetail component.",
   "author": "LTHT",
   "homepage": "",
@@ -28,11 +28,12 @@
   "dependencies": {
     "@emotion/react": "^11.0.0",
     "@emotion/styled": "^11.0.0",
-    "@ltht-react/styles": "^2.0.84",
-    "@ltht-react/type-detail": "^2.0.84",
-    "@ltht-react/types": "^2.0.84",
-    "@ltht-react/utils": "^2.0.84",
+    "@ltht-react/button": "^2.0.85",
+    "@ltht-react/styles": "^2.0.85",
+    "@ltht-react/type-detail": "^2.0.85",
+    "@ltht-react/types": "^2.0.85",
+    "@ltht-react/utils": "^2.0.85",
     "react": "^18.2.0"
   },
-  "gitHead": "429098bc66ac3e7bb44fb61c62df6a0dffe891b4"
+  "gitHead": "cb0f8ea64ce25abb0b9a1ee934a930e84ca588ae"
 }

package/src/index.tsx

@@ -1,6 +1,9 @@
 import { FC } from 'react'
+import styled from '@emotion/styled'
 import { DetailViewType, Flag } from '@ltht-react/types'
 import { getStringExtension } from '@ltht-react/utils'
+import { Button, ButtonProps } from '@ltht-react/button'
+import { MOBILE_MAXIMUM_MEDIA_QUERY, SMALL_SCREEN_MAXIMUM_MEDIA_QUERY } from '@ltht-react/styles'
 
 import {
   CodeableConceptDetail,
@@ -12,24 +15,71 @@ import {
   CollapsibleDetailCollection,
 } from '@ltht-react/type-detail'
 
-const FlagDetail: FC<Props> = ({ flag, viewType = DetailViewType.Compact }) => (
-  <CollapsibleDetailCollection viewType={viewType}>
-    <CodeableConceptDetail term="Code" concept={flag?.code} />
-    <StringDetail term="Status" description={flag.status.toString()} />
-    <CodeableConceptDetail term="Category" concept={flag?.category} />
-    <PeriodDetail period={flag?.period} />
-    <NarrativeDetail narrative={flag?.text} />
-    <StringDetail
-      term="Advice"
-      description={getStringExtension(flag?.extension, 'https://leedsth.nhs.uk/alert/advice')}
-      parse={false}
-    />
-    <ResourceReferenceDetail term="Author" resourceReference={flag?.author} />
-  </CollapsibleDetailCollection>
-)
+const StyledControlsContainer = styled.div`
+  display: flex;
+  margin: auto 10px auto 10px;
+  flex-direction: column;
+
+  ${MOBILE_MAXIMUM_MEDIA_QUERY} {
+    margin: 10px 0 0 0;
+    flex-flow: row wrap;
+  }
+
+  ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
+    margin: 10px 5px 0 0;
+    flex-direction: column;
+  }
+`
+const StyledButton = styled(Button)`
+  margin: 2px 0 2px 0;
+  font-size: 0.8em !important;
+  padding: 1px 5px;
+
+  ${MOBILE_MAXIMUM_MEDIA_QUERY} {
+    margin: 2px 5px 2px 0;
+    width: fit-content;
+  }
+
+  ${SMALL_SCREEN_MAXIMUM_MEDIA_QUERY} {
+    margin: 2px 0 2px 0;
+    width: 100%;
+    max-width: 200px;
+  }
+`
+
+const FlagDetail: FC<Props> = ({ flag, controls = [], viewType = DetailViewType.Compact }) => {
+  let buttons = <></>
+  if (controls.length) {
+    buttons = (
+      <StyledControlsContainer>
+        {controls.map((props, index) => (
+          <StyledButton key={index} {...props} />
+        ))}
+      </StyledControlsContainer>
+    )
+  }
+
+  return (
+    <CollapsibleDetailCollection viewType={viewType}>
+      <CodeableConceptDetail term="Code" concept={flag?.code} />
+      <StringDetail term="Status" description={flag.status.toString()} />
+      <CodeableConceptDetail term="Category" concept={flag?.category} />
+      <PeriodDetail period={flag?.period} />
+      <NarrativeDetail narrative={flag?.text} />
+      <StringDetail
+        term="Advice"
+        description={getStringExtension(flag?.extension, 'https://leedsth.nhs.uk/alert/advice')}
+        parse={false}
+      />
+      {buttons}
+      <ResourceReferenceDetail term="Author" resourceReference={flag?.author} />
+    </CollapsibleDetailCollection>
+  )
+}
 
 interface Props extends CollapsibleDetailCollectionProps {
   flag: Flag
+  controls?: ButtonProps[]
 }
 
 export default FlagDetail