npm - fhir-react - Versions diffs - 0.3.7 → 0.3.10 - Mend

fhir-react 0.3.7 → 0.3.10

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 (179) hide show

package/src/components/resources/Procedure/Procedure.js CHANGED Viewed

@@ -14,8 +14,7 @@ import _has from 'lodash/has';
 import { isNotEmptyArray } from '../../../utils';
 import { Value } from '../../ui';
-const Procedure = props => {
-  const { fhirResource, fhirIcons } = props;
+const Procedure = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
   const display =
     _get(fhirResource, 'code.coding[0].display') ||
     _get(fhirResource, 'code.text');
@@ -125,6 +124,8 @@ const Procedure = props => {
           />
         }
         bodyContent={<Body tableData={tableData} />}
+        onClick={onClick}
+        rawOnClick={rawOnClick}
       />
     </Root>
   );

package/src/components/resources/Procedure/Procedure.stories.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 import Procedure from './Procedure';
@@ -14,39 +14,47 @@ import r4Example3 from '../../../fixtures/r4/resources/procedure/example3.json';
 import fhirIcons from '../../../fixtures/example-icons';
 import ProcedureIcon from '../../../assets/containers/Procedure/procedure.svg';
-export default { title: 'Procedure' };
+export default {
+  title: 'Procedure',
+  component: Procedure,
+  argTypes: {
+    ...defaultArgTypes,
+  },
+};
+const Template = args => <Procedure {...args} />;
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', example1);
-  return (
-    <Procedure
-      fhirResource={fhirResource}
-      fhirIcons={require('../../../assets/containers/Procedure/procedure.svg')}
-    />
-  );
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirResource: example1,
+  fhirIcons: require('../../../assets/containers/Procedure/procedure.svg'),
 };
-export const ExampleOfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return <Procedure fhirResource={fhirResource} fhirIcons={ProcedureIcon} />;
+export const ExampleOfSTU3 = Template.bind({});
+ExampleOfSTU3.args = {
+  fhirResource: stu3Example1,
+  fhirIcons: ProcedureIcon,
 };
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return <Procedure fhirResource={fhirResource} fhirIcons={fhirIcons} />;
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirResource: stu3Example2,
+  fhirIcons: fhirIcons,
 };
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return <Procedure fhirResource={fhirResource} fhirIcons={false} />;
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirResource: r4Example1,
+  fhirIcons: false,
 };
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return <Procedure fhirResource={fhirResource} fhirIcons={'random text'} />;
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirResource: r4Example2,
+  fhirIcons: 'random text',
 };
-export const Example3OfR4 = () => {
-  const fhirResource = object('Resource', r4Example3);
-  return <Procedure fhirResource={fhirResource} />;
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirResource: r4Example3,
 };

package/src/components/resources/Procedure/Procedure.test.js CHANGED Viewed

@@ -3,7 +3,7 @@ import React from 'react';
 import dstu2Example1 from '../../../fixtures/dstu2/resources/procedure/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/procedure/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/procedure/example3.json';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 import stu3Example1 from '../../../fixtures/stu3/resources/procedure/example1.json';
 import fhirIcons from '../../../fixtures/example-icons';
 import fhirVersions from '../fhirResourceVersions';
@@ -168,4 +168,33 @@ describe('Procedure should render component correctly', () => {
       'Eerste neo-adjuvante',
     );
   });
+  it('should fire custom onClick function', () => {
+    const defaultProps = { fhirResource: r4Example3 };
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Procedure {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).not.toEqual('collapse');
+    expect(onClick).toHaveBeenCalled();
+  });
+  it('should not fire custom onClick function', () => {
+    const defaultProps = { fhirResource: r4Example3 };
+    const onClick = 'test';
+    const { getByRole } = render(
+      <Procedure {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });

package/src/components/resources/Questionnaire/Group.js ADDED Viewed

@@ -0,0 +1,53 @@
+import _get from 'lodash/get';
+import { MissingValue } from '../../ui';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Questions from './Questions';
+import { getQuestionText } from './getQuestionText';
+const Group = ({ data, prepareItems, isChild = false }) => {
+  if (!Array.isArray(data) || data.length === 0) {
+    return null;
+  }
+  return data.map(prepareItems).map((item, i) => {
+    const text = getQuestionText(item);
+    let nestedItems = _get(item, 'item', []);
+    nestedItems = nestedItems.map(prepareItems);
+    const isGroup = _get(item, 'isGroup');
+    return (
+      <ul
+        key={`questionnaire-item-${i}`}
+        className="fhir-resource__Questionnaire-list"
+      >
+        <li
+          className={
+            isChild
+              ? 'fhir-resource__Questionnaire-list-title-question'
+              : 'fhir-resource__Questionnaire-list-title'
+          }
+          data-testid={`linkId-${item.linkId}`}
+        >
+          {text ? text : <MissingValue />}
+        </li>
+        {!isGroup && (
+          <li>
+            <Questions questions={nestedItems} prepareItems={prepareItems} />
+          </li>
+        )}
+        {isGroup && (
+          <li>
+            <Group data={nestedItems} prepareItems={prepareItems} isChild />
+          </li>
+        )}
+      </ul>
+    );
+  });
+};
+Group.propTypes = {
+  data: PropTypes.array,
+  prepareItems: PropTypes.func.isRequired,
+};
+export default Group;

package/src/components/resources/Questionnaire/Items.js ADDED Viewed

@@ -0,0 +1,45 @@
+import fhirVersions from '../fhirResourceVersions';
+import _get from 'lodash/get';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Group from './Group';
+const Items = ({ fhirVersion, data }) => {
+  if (fhirVersion === fhirVersions.DSTU2) {
+    const prepareItems = item => ({
+      ...item,
+      item: _get(item, 'question') || _get(item, 'group') || [],
+      isGroup: !!_get(item, 'group'),
+    });
+    return <Group data={data} prepareItems={prepareItems} />;
+  }
+  if (fhirVersion === fhirVersions.STU3) {
+    const prepareItems = item => ({
+      ...item,
+      isGroup: _get(item, 'type') === 'group',
+    });
+    return <Group data={data} prepareItems={prepareItems} />;
+  }
+  if (fhirVersion === fhirVersions.R4) {
+    const prepareItems = item => ({
+      ...item,
+      isGroup: _get(item, 'type') === 'group',
+    });
+    return <Group data={data} prepareItems={prepareItems} />;
+  }
+  return null;
+};
+Items.propTypes = {
+  data: PropTypes.array,
+  fhirVersion: PropTypes.oneOf([
+    fhirVersions.DSTU2,
+    fhirVersions.STU3,
+    fhirVersions.R4,
+  ]).isRequired,
+};
+export default Items;

package/src/components/resources/Questionnaire/Questionnaire.css CHANGED Viewed

@@ -1,21 +1,41 @@
 .fhir-resource__Questionnaire-list {
   list-style: none;
-  border: 1px solid #f0f0f0;
   padding: 2px;
   margin: 2px;
 }
 .fhir-resource__Questionnaire-list-title {
-  background-color: #f6f6f6;
-  padding: 2px 2px 4px 2px;
+  padding: 2px 2px 8px 2px;
+  font-weight: bold;
+}
+.fhir-resource__Questionnaire-list-title-question {
+  background: #f8f9fa;
+  align-items: center;
+  margin-bottom: 56px;
+  padding-left: 16px;
+  border-radius: 4px;
+  color: #adb5bd;
 }
 .fhir-resource__Questionnaire-questions-list {
   list-style: none;
+  padding-left: 0;
+  display: block;
+  color: #adb5bd;
 }
 .fhir-resource__Questionnaire-questions-list li {
-  border-bottom: 1px solid #f5f5f5;
+  display: block;
+  margin-bottom: 56px;
+}
+.fhir-resource__Questionnaire-questions-list-element {
+  background: #f8f9fa;
+  border-radius: 4px;
+  width: 100%;
+  padding-left: 16px;
+  margin-bottom: 56px;
 }
 .fhir-resource__Questionnaire-questions-list li:last-child {
@@ -24,7 +44,6 @@
 .fhir-resource__Questionnaire-questions-list-item-details {
   font-size: 80%;
-  color: #606060;
 }
 .fhir-resource__Questionnaire-questions-list-item-details-el {

package/src/components/resources/Questionnaire/Questionnaire.js CHANGED Viewed

@@ -2,164 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
-import { Root, Header, Title, Badge, BadgeSecondary, Body } from '../../ui';
+import { Root, Header, Badge, Body, Value } from '../../ui';
 import Date from '../../datatypes/Date';
 import Coding from '../../datatypes/Coding';
 import './Questionnaire.css';
-import Reference from '../../datatypes/Reference/Reference';
 import fhirVersions from '../fhirResourceVersions';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
-const getQuestionText = item => {
-  let text = _get(item, 'text');
-  if (!text) {
-    // DSTU2
-    const groupConcept = _get(item, 'concept.0');
-    if (groupConcept) {
-      text = <Coding fhirData={groupConcept} />;
-    }
-    // STU3 & R4
-    const groupCode = _get(item, 'code.0');
-    if (!text && groupCode) {
-      text = <Coding fhirData={groupCode} />;
-    }
-  }
-  return text;
-};
-const Questions = props => {
-  const { questions, prepareItems } = props;
-  if (!Array.isArray(questions) || questions.length === 0) {
-    return null;
-  }
-  return (
-    <ul className="fhir-resource__Questionnaire-questions-list">
-      {questions.map((item, i) => {
-        const hasLinkId = item.linkId;
-        let type = _get(item, 'type');
-        if (type === 'group') {
-          type = '';
-        }
-        const options = _get(item, 'options');
-        const text = getQuestionText(item);
-        const hasDetails = type || options;
-        return (
-          <li key={`item-${i}`} data-testid={`linkId-${item.linkId}`}>
-            {hasLinkId && <Badge>{item.linkId}</Badge>}
-            {text}
-            {hasDetails && (
-              <div className="fhir-resource__Questionnaire-questions-list-item-details">
-                {type && (
-                  <div className="fhir-resource__Questionnaire-questions-list-item-details-el">
-                    Type: {type}
-                  </div>
-                )}
-                {options && (
-                  <div className="fhir-resource__Questionnaire-questions-list-item-details-el">
-                    Options: <Reference fhirData={options} />
-                  </div>
-                )}
-              </div>
-            )}
-            {item.item && (
-              <Group data={item.item} prepareItems={prepareItems} />
-            )}
-          </li>
-        );
-      })}
-    </ul>
-  );
-};
-Questions.propTypes = {
-  questions: PropTypes.array,
-  prepareItems: PropTypes.func.isRequired,
-};
-const Group = props => {
-  const { data, prepareItems } = props;
-  if (!Array.isArray(data) || data.length === 0) {
-    return null;
-  }
-  return data.map(prepareItems).map((item, i) => {
-    const linkId = _get(item, 'linkId', '');
-    const text = getQuestionText(item);
-    let nestedItems = _get(item, 'item', []);
-    nestedItems = nestedItems.map(prepareItems);
-    const isGroup = _get(item, 'isGroup');
-    return (
-      <ul key={`item-${i}`} className="fhir-resource__Questionnaire-list">
-        <li
-          className="fhir-resource__Questionnaire-list-title"
-          data-testid={`linkId-${item.linkId}`}
-        >
-          <Badge>{linkId}</Badge>
-          <span>{text}</span>
-        </li>
-        {!isGroup && (
-          <li>
-            {<Questions questions={nestedItems} prepareItems={prepareItems} />}
-          </li>
-        )}
-        {isGroup && (
-          <li>
-            <Group data={nestedItems} prepareItems={prepareItems} />
-          </li>
-        )}
-      </ul>
-    );
-  });
-};
-Group.propTypes = {
-  data: PropTypes.array,
-  prepareItems: PropTypes.func.isRequired,
-};
-const Items = props => {
-  const { fhirVersion, data } = props;
-  if (fhirVersion === fhirVersions.DSTU2) {
-    const prepareItems = item => ({
-      ...item,
-      item: _get(item, 'question') || _get(item, 'group') || [],
-      isGroup: !!_get(item, 'group'),
-    });
-    return <Group data={data} prepareItems={prepareItems} />;
-  }
-  if (fhirVersion === fhirVersions.STU3) {
-    const prepareItems = item => ({
-      ...item,
-      isGroup: _get(item, 'type') === 'group',
-    });
-    return <Group data={data} prepareItems={prepareItems} />;
-  }
-  if (fhirVersion === fhirVersions.R4) {
-    const prepareItems = item => ({
-      ...item,
-      isGroup: _get(item, 'type') === 'group',
-    });
-    return <Group data={data} prepareItems={prepareItems} />;
-  }
-  return null;
-};
-Items.propTypes = {
-  data: PropTypes.array,
-  fhirVersion: PropTypes.oneOf([
-    fhirVersions.DSTU2,
-    fhirVersions.STU3,
-    fhirVersions.R4,
-  ]).isRequired,
-};
+import Items from './Items';
+import Accordion from '../../containers/Accordion';
 const commonDTO = fhirResource => {
   const status = _get(fhirResource, 'status');
@@ -224,8 +75,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
-const Questionnaire = props => {
-  const { fhirResource, fhirVersion } = props;
+const Questionnaire = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
   try {
@@ -238,22 +94,34 @@ const Questionnaire = props => {
   return (
     <Root name="Questionnaire">
-      <Header>
-        <Title>{title}</Title>
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {dateTime && (
-          <BadgeSecondary data-testid="dateTime">
-            <Date fhirData={dateTime} />
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {rootItems && (
-          <div className="overflow-auto">
-            <Items fhirVersion={fhirVersion} data={rootItems} />
-          </div>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="Questionnaire"
+            title={title}
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            additionalContent={
+              dateTime && (
+                <Value label="On" data-testid="dateTime">
+                  <Date fhirData={dateTime} isBlack />
+                </Value>
+              )
+            }
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={
+          <Body>
+            {rootItems && (
+              <div className="overflow-auto">
+                <Items fhirVersion={fhirVersion} data={rootItems} />
+              </div>
+            )}
+          </Body>
+        }
+        onClick={onClick}
+        rawOnClick={rawOnClick}
+      />
     </Root>
   );
 };

package/src/components/resources/Questionnaire/Questionnaire.stories.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 import Questionnaire from './Questionnaire';
 import fhirVersions from '../fhirResourceVersions';
@@ -15,75 +15,68 @@ import r4Example1 from '../../../fixtures/r4/resources/questionnaire/example1.js
 import r4Example2 from '../../../fixtures/r4/resources/questionnaire/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/questionnaire/example3.json';
-export default { title: 'Questionnaire' };
+import fhirIcons from '../../../fixtures/example-icons';
+import QuestionnaireIcon from '../../../assets/containers/Questionnaire/questionnaire.svg';
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return (
-    <Questionnaire
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-    />
-  );
+export default {
+  title: 'Questionnaire',
+  component: Questionnaire,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
-export const Example2OfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example2);
-  return (
-    <Questionnaire
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-    />
-  );
+const Template = args => <Questionnaire {...args} />;
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example1,
+  fhirIcons: require('../../../assets/containers/Questionnaire/questionnaire.svg'),
+};
+export const Example2OfDSTU2 = Template.bind({});
+Example2OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example2,
+  fhirIcons: QuestionnaireIcon,
 };
-export const Example3OfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example3);
-  return (
-    <Questionnaire
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.DSTU2}
-    />
-  );
+export const Example3OfDSTU2 = Template.bind({});
+Example3OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example3,
+  fhirIcons: fhirIcons,
 };
-export const Example1OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <Questionnaire
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-    />
-  );
+export const Example1OfSTU3 = Template.bind({});
+Example1OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: false,
 };
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return (
-    <Questionnaire
-      fhirResource={fhirResource}
-      fhirVersion={fhirVersions.STU3}
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example2,
+  fhirIcons: 'random text',
 };
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <Questionnaire fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
 };
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return (
-    <Questionnaire fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example2,
 };
-export const Example3OfR4 = () => {
-  const fhirResource = object('Resource', r4Example3);
-  return (
-    <Questionnaire fhirResource={fhirResource} fhirVersion={fhirVersions.R4} />
-  );
+export const Example3OfR4 = Template.bind({});
+Example3OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example3,
 };