initial structure for components rewrite
This commit is contained in:
Rodrigo Antinarelli authored and James A. Petts committed
1 parent
944afe4a3e
commit
c391c007ff
284 files changed
+68087
-17215
No files matched your search
@@ -1,218 +0,0 @@
|
||||
import './MeasurementTable.styl';
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import { withTranslation } from '../../contextProviders';
|
||||
|
||||
import { Icon } from './../../elements/Icon';
|
||||
import { MeasurementTableItem } from './MeasurementTableItem.js';
|
||||
import { OverlayTrigger } from './../overlayTrigger';
|
||||
import PropTypes from 'prop-types';
|
||||
import { ScrollableArea } from './../../ScrollableArea/ScrollableArea.js';
|
||||
import { TableList } from './../tableList';
|
||||
import { Tooltip } from './../tooltip';
|
||||
|
||||
class MeasurementTable extends Component {
|
||||
static propTypes = {
|
||||
measurementCollection: PropTypes.array.isRequired,
|
||||
timepoints: PropTypes.array.isRequired,
|
||||
overallWarnings: PropTypes.object.isRequired,
|
||||
readOnly: PropTypes.bool,
|
||||
onItemClick: PropTypes.func,
|
||||
onRelabelClick: PropTypes.func,
|
||||
onDeleteClick: PropTypes.func,
|
||||
onEditDescriptionClick: PropTypes.func,
|
||||
selectedMeasurementNumber: PropTypes.number,
|
||||
t: PropTypes.func,
|
||||
saveFunction: PropTypes.func,
|
||||
onSaveComplete: PropTypes.func,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
overallWarnings: {
|
||||
warningList: [],
|
||||
},
|
||||
readOnly: false,
|
||||
};
|
||||
|
||||
state = {
|
||||
selectedKey: null,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { overallWarnings, saveFunction, t } = this.props;
|
||||
const hasOverallWarnings = overallWarnings.warningList.length > 0;
|
||||
|
||||
return (
|
||||
<div className="measurementTable">
|
||||
<div className="measurementTableHeader">
|
||||
{hasOverallWarnings && (
|
||||
<OverlayTrigger
|
||||
key={'overwall-warning'}
|
||||
placement="left"
|
||||
overlay={
|
||||
<Tooltip
|
||||
placement="left"
|
||||
className="in tooltip-warning"
|
||||
id="tooltip-left"
|
||||
style={{}}
|
||||
>
|
||||
<div className="warningTitle">
|
||||
{t('Criteria nonconformities')}
|
||||
</div>
|
||||
<div className="warningContent">
|
||||
{this.getWarningContent()}
|
||||
</div>
|
||||
</Tooltip>
|
||||
}
|
||||
>
|
||||
<span className="warning-status">
|
||||
<span className="warning-border">
|
||||
<Icon name="exclamation-triangle" />
|
||||
</span>
|
||||
</span>
|
||||
</OverlayTrigger>
|
||||
)}
|
||||
{this.getTimepointsHeader()}
|
||||
</div>
|
||||
<ScrollableArea>
|
||||
<div>{this.getMeasurementsGroups()}</div>
|
||||
</ScrollableArea>
|
||||
<div className="measurementTableFooter">
|
||||
{saveFunction && (
|
||||
<button
|
||||
onClick={this.saveFunction}
|
||||
className="saveBtn"
|
||||
data-cy="save-measurements-btn"
|
||||
>
|
||||
<Icon name="save" width="14px" height="14px" />
|
||||
Save measurements
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
saveFunction = async event => {
|
||||
const { saveFunction, onSaveComplete } = this.props;
|
||||
if (saveFunction) {
|
||||
try {
|
||||
const result = await saveFunction();
|
||||
if (onSaveComplete) {
|
||||
onSaveComplete({
|
||||
title: 'STOW SR',
|
||||
message: result.message,
|
||||
type: 'success',
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
if (onSaveComplete) {
|
||||
onSaveComplete({
|
||||
title: 'STOW SR',
|
||||
message: error.message,
|
||||
type: 'error',
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
getMeasurementsGroups = () => {
|
||||
return this.props.measurementCollection.map((measureGroup, index) => {
|
||||
return (
|
||||
<TableList
|
||||
key={index}
|
||||
customHeader={this.getCustomHeader(measureGroup)}
|
||||
>
|
||||
{this.getMeasurements(measureGroup)}
|
||||
</TableList>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
getMeasurements = measureGroup => {
|
||||
const selectedKey = this.props.selectedMeasurementNumber
|
||||
? this.props.selectedMeasurementNumber
|
||||
: this.state.selectedKey;
|
||||
return measureGroup.measurements.map((measurement, index) => {
|
||||
const key = measurement.measurementNumber;
|
||||
const itemIndex = measurement.itemNumber || index + 1;
|
||||
const itemClass =
|
||||
selectedKey === key && !this.props.readOnly ? 'selected' : '';
|
||||
|
||||
return (
|
||||
<MeasurementTableItem
|
||||
key={key}
|
||||
itemIndex={itemIndex}
|
||||
itemClass={itemClass}
|
||||
measurementData={measurement}
|
||||
onItemClick={this.onItemClick}
|
||||
onRelabel={this.props.onRelabelClick}
|
||||
onDelete={this.props.onDeleteClick}
|
||||
onEditDescription={this.props.onEditDescriptionClick}
|
||||
/>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
onItemClick = (event, measurementData) => {
|
||||
if (this.props.readOnly) return;
|
||||
|
||||
this.setState({
|
||||
selectedKey: measurementData.measurementNumber,
|
||||
});
|
||||
|
||||
if (this.props.onItemClick) {
|
||||
this.props.onItemClick(event, measurementData);
|
||||
}
|
||||
};
|
||||
|
||||
getCustomHeader = measureGroup => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className="tableListHeaderTitle">
|
||||
{this.props.t(measureGroup.groupName)}
|
||||
</div>
|
||||
{measureGroup.maxMeasurements && (
|
||||
<div className="maxMeasurements">
|
||||
{this.props.t('MAX')} {measureGroup.maxMeasurements}
|
||||
</div>
|
||||
)}
|
||||
<div className="numberOfItems">{measureGroup.measurements.length}</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
getTimepointsHeader = () => {
|
||||
const { timepoints, t } = this.props;
|
||||
|
||||
return timepoints.map((timepoint, index) => {
|
||||
return (
|
||||
<div key={index} className="measurementTableHeaderItem">
|
||||
<div className="timepointLabel">{t(timepoint.key)}</div>
|
||||
<div className="timepointDate">{timepoint.date}</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
getWarningContent = () => {
|
||||
const { warningList = '' } = this.props.overallWarnings;
|
||||
|
||||
if (Array.isArray(warningList)) {
|
||||
const listedWarnings = warningList.map((warn, index) => {
|
||||
return <li key={index}>{warn}</li>;
|
||||
});
|
||||
|
||||
return <ol>{listedWarnings}</ol>;
|
||||
} else {
|
||||
return <React.Fragment>{warningList}</React.Fragment>;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const connectedComponent = withTranslation(['MeasurementTable', 'Common'])(
|
||||
MeasurementTable
|
||||
);
|
||||
export { connectedComponent as MeasurementTable };
|
||||
export default connectedComponent;
|
||||
@@ -1,116 +0,0 @@
|
||||
.measurementTable
|
||||
background-color: var(--primary-background-color)
|
||||
height: 100%
|
||||
width: 100%
|
||||
display: flex
|
||||
flex-direction: column
|
||||
|
||||
.maxMeasurements
|
||||
border-radius: 3px
|
||||
color: var(--primary-background-color)
|
||||
font-size: 12px
|
||||
font-weight: 500
|
||||
height: 19px
|
||||
line-height: 17px
|
||||
margin-top: 22px
|
||||
margin-right: 15px
|
||||
padding: 2px 6px 0
|
||||
text-transform: uppercase
|
||||
transition: all 0.3s ease
|
||||
background-color: var(--default-color)
|
||||
|
||||
.measurementTableHeader
|
||||
padding-left: 45px
|
||||
|
||||
.measurementTableHeaderItem
|
||||
display: inline-block
|
||||
margin-top: 9px
|
||||
margin-left: 9px
|
||||
padding-left: 9px
|
||||
width: 90px
|
||||
font-size: 14px
|
||||
line-height: 20px
|
||||
border-left: 1px solid var(--text-secondary-color)
|
||||
color: var(--text-primary-color)
|
||||
|
||||
.timepointLabel
|
||||
color: var(--text-secondary-color)
|
||||
font-size: 12px
|
||||
|
||||
.warning-status
|
||||
display: block
|
||||
position: absolute
|
||||
width: 50px
|
||||
height: 40px
|
||||
padding-left: 7px
|
||||
left: 15px
|
||||
top: 7px
|
||||
|
||||
.warning-border
|
||||
display: block
|
||||
border: 2px solid #e29e4a
|
||||
border-radius: 36px
|
||||
padding: 6px 7px
|
||||
width: 40px
|
||||
height: 40px
|
||||
|
||||
svg
|
||||
color: #e29e4a
|
||||
width: 22px
|
||||
height: 20px
|
||||
pointer-events: inherit
|
||||
|
||||
.measurementTableFooter
|
||||
padding: 10px
|
||||
color: #fff
|
||||
text-align: center
|
||||
z-index: 1
|
||||
|
||||
.saveBtn
|
||||
border: 1px solid var(--ui-border-color-active)
|
||||
border-radius: 25px
|
||||
background-color: var(--active-color)
|
||||
color: var(--ui-gray-dark)
|
||||
line-height: 25px
|
||||
padding: 0 20px
|
||||
outline: none
|
||||
cursor: pointer
|
||||
|
||||
&:hover, &:active
|
||||
background-color: var(--ui-sky-blue)
|
||||
|
||||
svg
|
||||
margin-right: 4px
|
||||
position: relative
|
||||
top: 2px
|
||||
|
||||
.tooltip-warning
|
||||
&.in
|
||||
opacity 1
|
||||
|
||||
.tooltip-inner
|
||||
padding: 0
|
||||
|
||||
.warningTitle
|
||||
text-align: left
|
||||
background-color: var(--ui-gray-darkest)
|
||||
padding: 7px 15px
|
||||
border-top-left-radius: 7px
|
||||
border-top-right-radius: 7px
|
||||
|
||||
.warningContent
|
||||
text-align center
|
||||
background-color: var(--ui-gray)
|
||||
border-bottom-left-radius: 7px
|
||||
border-bottom-right-radius: 7px
|
||||
|
||||
ol
|
||||
margin-top: auto
|
||||
padding-inline-start: 20px
|
||||
padding-top: 10px
|
||||
padding-bottom: 10px
|
||||
padding-left: 25px
|
||||
text-align: left
|
||||
|
||||
li
|
||||
padding-right: 10px
|
||||
@@ -1,165 +0,0 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { withTranslation } from '../../contextProviders';
|
||||
|
||||
import { Icon } from './../../elements/Icon';
|
||||
import { OverlayTrigger } from './../overlayTrigger';
|
||||
import { Tooltip } from './../tooltip';
|
||||
import { TableListItem } from './../tableList/TableListItem.js';
|
||||
|
||||
import './MeasurementTableItem.styl';
|
||||
|
||||
class MeasurementTableItem extends Component {
|
||||
static propTypes = {
|
||||
measurementData: PropTypes.object.isRequired,
|
||||
onItemClick: PropTypes.func.isRequired,
|
||||
onRelabel: PropTypes.func,
|
||||
onDelete: PropTypes.func,
|
||||
onEditDescription: PropTypes.func,
|
||||
itemClass: PropTypes.string,
|
||||
itemIndex: PropTypes.number,
|
||||
t: PropTypes.func,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { warningTitle = '', hasWarnings } = this.props.measurementData;
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
{hasWarnings ? (
|
||||
<OverlayTrigger
|
||||
key={this.props.itemIndex}
|
||||
placement="left"
|
||||
overlay={
|
||||
<Tooltip
|
||||
placement="left"
|
||||
className="in tooltip-warning"
|
||||
id="tooltip-left"
|
||||
>
|
||||
<div className="warningTitle">{this.props.t(warningTitle)}</div>
|
||||
<div className="warningContent">{this.getWarningContent()}</div>
|
||||
</Tooltip>
|
||||
}
|
||||
>
|
||||
<div>{this.getTableListItem()}</div>
|
||||
</OverlayTrigger>
|
||||
) : (
|
||||
<React.Fragment>{this.getTableListItem()}</React.Fragment>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
getActionButton = (btnLabel, onClickCallback) => {
|
||||
return (
|
||||
<button key={btnLabel} className="btnAction" onClick={onClickCallback}>
|
||||
<span style={{ marginRight: '4px' }}>
|
||||
<Icon name="edit" width="14px" height="14px" />
|
||||
</span>
|
||||
{this.props.t(btnLabel)}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
getTableListItem = () => {
|
||||
const hasWarningClass = this.props.measurementData.hasWarnings
|
||||
? 'hasWarnings'
|
||||
: '';
|
||||
|
||||
const actionButtons = [];
|
||||
|
||||
if (typeof this.props.onRelabel === 'function') {
|
||||
const relabelButton = this.getActionButton(
|
||||
'Relabel',
|
||||
this.onRelabelClick
|
||||
);
|
||||
actionButtons.push(relabelButton);
|
||||
}
|
||||
if (typeof this.props.onEditDescription === 'function') {
|
||||
const descriptionButton = this.getActionButton(
|
||||
'Description',
|
||||
this.onEditDescriptionClick
|
||||
);
|
||||
actionButtons.push(descriptionButton);
|
||||
}
|
||||
if (typeof this.props.onDelete === 'function') {
|
||||
const deleteButton = this.getActionButton('Delete', this.onDeleteClick);
|
||||
actionButtons.push(deleteButton);
|
||||
}
|
||||
|
||||
return (
|
||||
<TableListItem
|
||||
itemKey={this.props.measurementData.measurementNumber}
|
||||
itemClass={`measurementItem ${this.props.itemClass} ${hasWarningClass}`}
|
||||
itemIndex={this.props.itemIndex}
|
||||
onItemClick={this.onItemClick}
|
||||
>
|
||||
<div>
|
||||
<div className="measurementLocation">
|
||||
{this.props.t(this.props.measurementData.label, {
|
||||
keySeparator: '>',
|
||||
nsSeparator: '|',
|
||||
})}
|
||||
</div>
|
||||
<div className="displayTexts">{this.getDataDisplayText()}</div>
|
||||
<div className="rowActions">{actionButtons}</div>
|
||||
</div>
|
||||
</TableListItem>
|
||||
);
|
||||
};
|
||||
|
||||
onItemClick = event => {
|
||||
this.props.onItemClick(event, this.props.measurementData);
|
||||
};
|
||||
|
||||
onRelabelClick = event => {
|
||||
// Prevent onItemClick from firing
|
||||
event.stopPropagation();
|
||||
|
||||
this.props.onRelabel(event, this.props.measurementData);
|
||||
};
|
||||
|
||||
onEditDescriptionClick = event => {
|
||||
// Prevent onItemClick from firing
|
||||
event.stopPropagation();
|
||||
|
||||
this.props.onEditDescription(event, this.props.measurementData);
|
||||
};
|
||||
|
||||
onDeleteClick = event => {
|
||||
// Prevent onItemClick from firing
|
||||
event.stopPropagation();
|
||||
|
||||
this.props.onDelete(event, this.props.measurementData);
|
||||
};
|
||||
|
||||
getDataDisplayText = () => {
|
||||
return this.props.measurementData.data.map((data, index) => {
|
||||
return (
|
||||
<div key={`displayText_${index}`} className="measurementDisplayText">
|
||||
{data.displayText ? data.displayText : '...'}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
getWarningContent = () => {
|
||||
const { warningList = '' } = this.props.measurementData;
|
||||
|
||||
if (Array.isArray(warningList)) {
|
||||
const listedWarnings = warningList.map((warn, index) => {
|
||||
return <li key={index}>{warn}</li>;
|
||||
});
|
||||
|
||||
return <ol>{listedWarnings}</ol>;
|
||||
} else {
|
||||
return <React.Fragment>{warningList}</React.Fragment>;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const connectedComponent = withTranslation('MeasurementTable')(
|
||||
MeasurementTableItem
|
||||
);
|
||||
export { connectedComponent as MeasurementTableItem };
|
||||
export default connectedComponent;
|
||||
@@ -1,49 +0,0 @@
|
||||
---
|
||||
name: Measurement Table
|
||||
menu: Components
|
||||
route: /components/measurement-table
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz'
|
||||
import { State } from 'react-powerplug'
|
||||
import { MeasurementTable } from './../index.js'
|
||||
import NameSpace from '../../../__docs__/NameSpace'
|
||||
//
|
||||
import measurements from './measurements.js'
|
||||
import timepoints from './timepoints.js'
|
||||
import warnings from './warnings.js'
|
||||
|
||||
# Measurement Table
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<State
|
||||
initial={{
|
||||
// Spelling error: overwallWarnings
|
||||
overwallWarnings: warnings,
|
||||
timepoints,
|
||||
measurementCollection: measurements,
|
||||
}}
|
||||
>
|
||||
{({ state, setState }) => (
|
||||
<div style={{ height: '340px' }}>
|
||||
<MeasurementTable
|
||||
{...state}
|
||||
onItemClick={() => alert('onItemClick')}
|
||||
onRelabelClick={() => alert('onRelabelClick')}
|
||||
onDeleteClick={() => alert('onDeleteClick')}
|
||||
onEditDescriptionClick={() => alert('onEditDescriptionClick')}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</State>
|
||||
</Playground>
|
||||
|
||||
## API
|
||||
|
||||
<Props of={MeasurementTable} />
|
||||
|
||||
## Translation Namespace
|
||||
|
||||
<NameSpace name="MeasurementTable" />
|
||||
@@ -1,93 +0,0 @@
|
||||
export default [
|
||||
{
|
||||
maxMeasurements: 5,
|
||||
groupName: 'Targets',
|
||||
measurements: [
|
||||
{
|
||||
measurementId: '123',
|
||||
measurementNumber: '123',
|
||||
itemNumber: 1,
|
||||
label: 'Chest Wall Posterior',
|
||||
hasWarnings: true,
|
||||
warningTitle: 'Criteria nonconformities',
|
||||
isSplitLesion: false,
|
||||
warningList: [
|
||||
'All measurements should have a location',
|
||||
'Nodal lesions must be >= 15mm short axis AND >= double the acquisition slice thickness by CT and MR',
|
||||
],
|
||||
data: [
|
||||
{
|
||||
displayText: '25.7 x 12.9',
|
||||
},
|
||||
{
|
||||
displayText: '24.7 x 11.5',
|
||||
},
|
||||
{},
|
||||
],
|
||||
},
|
||||
{
|
||||
measurementId: '124',
|
||||
measurementNumber: '124',
|
||||
itemNumber: 2,
|
||||
label: 'Bone Extremity',
|
||||
data: [
|
||||
{
|
||||
displayText: '24.7 x 11.1',
|
||||
},
|
||||
{
|
||||
displayText: '21.2 x 10.9',
|
||||
},
|
||||
{},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
maxMeasurements: 3,
|
||||
groupName: 'NonTargets',
|
||||
measurements: [
|
||||
{
|
||||
measurementId: '125',
|
||||
measurementNumber: '125',
|
||||
itemNumber: 1,
|
||||
label: 'Chest Wall Single Site',
|
||||
data: [
|
||||
{
|
||||
displayText: 'MD',
|
||||
},
|
||||
{
|
||||
displayText: 'NM',
|
||||
},
|
||||
{},
|
||||
],
|
||||
},
|
||||
{
|
||||
measurementId: '126',
|
||||
measurementNumber: '126',
|
||||
itemNumber: 2,
|
||||
label: 'Extremity Multiple Sites',
|
||||
data: [
|
||||
{
|
||||
displayText: 'CR',
|
||||
},
|
||||
{},
|
||||
{},
|
||||
],
|
||||
},
|
||||
{
|
||||
measurementId: '127',
|
||||
measurementNumber: '127',
|
||||
label: 'Extremity Site',
|
||||
data: [
|
||||
{
|
||||
displayText: 'CR',
|
||||
},
|
||||
{},
|
||||
{
|
||||
displayText: 'NM',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@@ -1,14 +0,0 @@
|
||||
export default [
|
||||
{
|
||||
label: 'Follow-up 2',
|
||||
date: '20-Dec-18',
|
||||
},
|
||||
{
|
||||
label: 'Follow-up 1',
|
||||
date: '15-Jun-18',
|
||||
},
|
||||
{
|
||||
label: 'Baseline',
|
||||
date: '10-Apr-18',
|
||||
},
|
||||
];
|
||||
@@ -1,6 +0,0 @@
|
||||
export default {
|
||||
warningList: [
|
||||
'All measurements should have a location',
|
||||
'Nodal lesions must be >= 15mm short axis AND >= double the acquisition slice thickness by CT and MR',
|
||||
],
|
||||
};
|
||||
@@ -1,2 +0,0 @@
|
||||
export { MeasurementTable } from './MeasurementTable.js';
|
||||
export { MeasurementTableItem } from './MeasurementTableItem.js';
|
||||
Reference in new issue
Block a user