Skip to content
This repository has been archived by the owner on May 22, 2024. It is now read-only.

[clinical-result] Add doc example for header/cell #877

Merged
merged 5 commits into from
Jul 14, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/terra-clinical-result/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,9 @@
* Changed
* Changed ResultTimeHeaderCell to remove the `<time>` html tag for the date and time. This was causing issues and technically does not have full screen reader support.

* Added
* Added site documentation for Flowsheet, Time Header, and Name Header cells usage.

## 1.18.0 - (June 22, 2023)

* Added
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useRef, useState, useEffect } from 'react';
import React, { useRef, useState, useLayoutEffect } from 'react';
Copy link
Contributor Author

@RayGunY RayGunY Jul 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixes in this file are related to the flicker defect being dealt with in this PR: #881

Adding them to this PR because otherwise we'll have the same issue. Same things with the flowsheet css file.

import PropTypes from 'prop-types';
import classNames from 'classnames';
import classNamesBind from 'classnames/bind';
Expand Down Expand Up @@ -354,7 +354,7 @@ const createFlowsheetResultCellDisplay = (resultDataSet, hideUnit, numericOverfl
);
compositeCell.push(endDisplay);

return compositeCell;
return <div className={cx('combined-display')}>{compositeCell}</div>;
}

const additionalResultsStackDisplay = (
Expand All @@ -364,7 +364,7 @@ const createFlowsheetResultCellDisplay = (resultDataSet, hideUnit, numericOverfl
);
compositeCell.push(additionalResultsStackDisplay);

return compositeCell;
return <div className={cx('combined-display')}>{compositeCell}</div>;
}

if (hasAccessoryIcons) {
Expand All @@ -377,7 +377,7 @@ const createFlowsheetResultCellDisplay = (resultDataSet, hideUnit, numericOverfl
compositeCell.push(endAccessoryIconsDisplay);
}

return compositeCell;
return <div className={cx('combined-display')}>{compositeCell}</div>;
};

const FlowsheetResultCell = (props) => {
Expand All @@ -394,7 +394,7 @@ const FlowsheetResultCell = (props) => {
const [contentWidth, setContentWidth] = useState(null);
const [numericOverflow, setNumericOverflow] = useState(false);

useEffect(() => {
useLayoutEffect(() => {
if (!containerDiv.current || !resultDataSet[0]) {
return;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,18 @@
padding: 0;
}

.combined-display {
display: flex;
flex: 1 1 100%;
margin: 0;
max-width: 100%; // Needed for IE10 truncation
padding: 0;
}

.primary-display {
align-items: center;
display: flex;
flex: 1 1 100%;
float: left;
height: var(--terra-clinical-result-flowsheet-cell-primary-display-height, 1.78571em); // Must use ems for font scaling
margin: 0;
margin-left: var(--terra-clinical-result-flowsheet-cell-interpretation-icon-reserved-space-margin-left, 1.1875em); // Must use ems for font scaling
Expand All @@ -38,7 +45,6 @@
.end-display {
display: flex;
flex: 0 0 auto;
float: right;
height: var(--terra-clinical-result-flowsheet-cell-end-display-height, 1.78571em); // Must use ems for font scaling
min-width: 0;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ import ClinicalResult from 'terra-clinical-result/lib/index';

## Examples
<DefaultResult title="Default Clinical Result" />
<DecoratedResult title="Modifiied Clinical Result with Comments" />
<DecoratedResult title="Modified Clinical Result with Comments" />
<UnverifiedResult title="Unverified Clinical Result with Hide Unit of Measure" />
<ExtraDisplaysResult title="Clinical Result with additional displays" />
<InterpretationResults title="Clinical Results with Intrepretation" />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import KnownAndPartialNoData from '../example/flowsheet-result-cell/FlowsheetRes
import KnownErrorAndPartialError from '../example/flowsheet-result-cell/FlowsheetResultCellKnownErrorAndPartialError?dev-site-example';
import NumericOverflow from '../example/flowsheet-result-cell/FlowsheetResultCellNumericOverflow?dev-site-example';
import StatusEnteredInError from '../example/flowsheet-result-cell/FlowsheetResultCellStatusEnteredInError?dev-site-example';
import SemanticStyleCell from '../example/flowsheet-result-cell/FlowsheetResultCellSemanticTableExample?dev-site-example';
import SemanticPaddingStyleCell from '../example/flowsheet-result-cell/FlowsheetResultCellPaddingStyleSemanticExample?dev-site-example';

import FlowsheetResultCellProps from 'terra-clinical-result/src/flowsheet-result-cell/FlowsheetResultCell?dev-site-props-table';

Expand Down Expand Up @@ -79,6 +81,8 @@ import { FlowsheetResultCell } from 'terra-clinical-result/lib/index';
title="Uncharted Result as 'Entered In Error'"
description="Display for when the result status has been set to 'entered-in-error'"
/>
<SemanticStyleCell title="Flowsheet Result Cell in Semantic Table" />
<SemanticPaddingStyleCell title="Flowsheet Result Cell Padding Styles in Semantic Table" />

## Flowsheet Result Cell Props
<FlowsheetResultCellProps />
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Badge } from 'terra-clinical-result/package.json?dev-site-package';

import Default from '../example/result-name-header-cell/ResultNameHeaderCell?dev-site-example';
import FlowsheetExample from '../example/result-name-header-cell/ResultNameHeaderFlowsheetExample?dev-site-example';
import SemanticStyleHeaderNameCell from '../example/result-name-header-cell/ResultNameHeaderCellSemanticTableExample?dev-site-example';

import ResultNameHeaderProps from 'terra-clinical-result/src/result-name-header-cell/ResultNameHeaderCell?dev-site-props-table';

Expand Down Expand Up @@ -38,6 +39,7 @@ import { ResultNameHeaderCell } from 'terra-clinical-result/lib/index';
## Examples
<Default />
<FlowsheetExample title="Result Name Header Cells in Sample Flowsheet"/>
<SemanticStyleHeaderNameCell title="Result Name Header Cell in Semantic Table"/>

## Result Name Header Cell Props
<ResultNameHeaderProps />
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { Badge } from 'terra-clinical-result/package.json?dev-site-package';

import Default from '../example/result-time-header-cell/ResultTimeHeaderCell?dev-site-example';
import FlowsheetExample from '../example/result-time-header-cell/ResultTimeHeaderFlowsheetExample?dev-site-example';
import SemanticStyleHeaderTimeCell from '../example/result-time-header-cell/ResultTimeHeaderCellSemanticTableExample?dev-site-example';

import ResultTimeHeaderProps from 'terra-clinical-result/src/result-time-header-cell/ResultTimeHeaderCell?dev-site-props-table';

Expand Down Expand Up @@ -38,6 +39,7 @@ import { ResultTimeHeaderCell } from 'terra-clinical-result/lib/index';
## Examples
<Default />
<FlowsheetExample title="Result Time Header Cells in Sample Flowsheet"/>
<SemanticStyleHeaderTimeCell title="Result Time Header Cell in Semantic Table"/>

## Result Time Header Cell Props
<ResultTimeHeaderProps />
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
import React from 'react';
import { FlowsheetResultCell, ResultNameHeaderCell } from 'terra-clinical-result/lib/index';
import Table, {
Header,
Row,
Body,
} from 'terra-html-table';

const multipleResultBPValues = [
{
id: '1602328271-1',
systolic: {
eventId: '1602328271-1.1',
result: {
value: '111',
unit: 'mmHg',
},
interpretation: 'high',
isModified: true,
hasComment: true,
},
diastolic: {
eventId: '1602328271-1.2',
result: {
value: '77',
unit: 'mmHg',
},
interpretation: 'low',
isModified: true,
hasComment: true,
},
},
{
id: '1602328271-2',
systolic: {
eventId: '1602328271-2.1',
result: {
value: '111',
unit: 'mmHg',
},
interpretation: 'high',
isModified: true,
hasComment: true,
},
diastolic: {
eventId: '1602328271-2.2',
result: {
value: '77',
unit: 'mmHg',
},
interpretation: 'low',
isModified: true,
hasComment: true,
},
},
{
id: '1602328271-3',
systolic: {
eventId: '1602328271-3.1',
result: {
value: '111',
unit: 'mmHg',
},
isModified: true,
hasComment: true,
},
diastolic: {
eventId: '1602328271-3.2',
result: {
value: '77',
unit: 'mmHg',
},
isModified: true,
hasComment: true,
},
},
];

const unverifiedResultValue = [
{
eventId: '1602328271',
result: {
value: '101.1',
unit: 'degC',
},
isNumeric: true,
isUnverified: true,
},
];

export default () => (
<Table>
<Header>
<ResultNameHeaderCell key="padding" resultName="Padding Type" />
<ResultNameHeaderCell key="bp" resultName="Blood Pressure Result" />
<ResultNameHeaderCell key="temp" resultName="Unverified Temperature Result" />
</Header>
<Body>
<Row>
{/* This example cell shows results with no padding style */}
<FlowsheetResultCell key="padding" resultDataSet={[{ id: 1, result: { value: 'None' } }]} paddingStyle="none" />
<FlowsheetResultCell key="bp" resultDataSet={multipleResultBPValues} hideUnit paddingStyle="none" />
<FlowsheetResultCell key="temp" resultDataSet={unverifiedResultValue} hideUnit paddingStyle="none" />
</Row>
<Row>
{/* This example cell shows results with a compact padding style */}
<FlowsheetResultCell key="padding" resultDataSet={[{ id: 3, result: { value: 'Compact' } }]} paddingStyle="compact" />
<FlowsheetResultCell key="bp" resultDataSet={multipleResultBPValues} hideUnit paddingStyle="compact" />
<FlowsheetResultCell key="temp" resultDataSet={unverifiedResultValue} hideUnit paddingStyle="compact" />
</Row>
<Row>
{/* This example cell shows results with a standard padding style */}
<FlowsheetResultCell key="padding" resultDataSet={[{ id: 5, result: { value: 'Standard' } }]} paddingStyle="standard" />
<FlowsheetResultCell key="bp" resultDataSet={multipleResultBPValues} hideUnit paddingStyle="standard" />
<FlowsheetResultCell key="temp" resultDataSet={unverifiedResultValue} hideUnit paddingStyle="standard" />
</Row>
</Body>
</Table>
);
Loading