feat: responsive study list (#1068)
* feat: 🎸 Load spinner when selecting gcloud store. Add key on td * feat: 🎸 Code review. Translate loading study status * feat: 🎸 Code review. Minor code refactoring * fix: add missing study and index declerations * Newer version of react-dates (calendar input component) * Add useMedia hook * Add useDebounce hook * Export hooks for consumption * Pull search filter into own component * StudyListWithData to StudyListRoute * Rename pagination component * Rename Toolbar * CustomeDateRangePicker to plain ol' css * Remove unused styles * Misc * Magic to make our "OR" filters work * Play w/ Mobile styles * Fix pagination pushing out max width for viewport * Tidy up small and medium templates * Remove unecessary nesting * Better mobile header and logo styles * Fix studyList font size * Remove unused code * hookup on click * Fix table search selectors * Cypress uses medium width * Remove irrelevant test * Fix primary sort * Fix sort for our smaller displays * fix study list sometimes longer than specified rowsPerPage * Simplify date picker styles * restore study date filters * Fix about table styling * fix take value for search * Fix header sizing for viewer and list route * Remove dead code * Restore isLoading * Update platform/ui/src/components/studyList/StudyList.styl Co-Authored-By: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com> * Attempt first usage of translations w/ hooks * Pull from react-i18n library * Fit presets on to a single line * add no results message * Show error message in studyList table * Update input selectors for e2e tests * Make sure messages span all columns * fix test selector for table results * Skip hover for result rows * fix imports * Date filtering w/ config * Default export * Pushed to PageComponent * Remove DropZone This previously only worked for null/undefined studies. I'm unable to trigger the state by testing the data. This "might" have happened when using a fresh/empty PACS; but even an empty array of studies would not show
This commit is contained in:
Danny BrownandRodrigo Antinarelli authored and GitHub committed
1 parent
70532a6cc6
commit
2cdef4b984
35 files changed
+1814
-1347
No files matched your search
@@ -16,7 +16,12 @@ import { QuickSwitch } from './quickSwitch';
|
||||
import { RoundedButtonGroup } from './roundedButtonGroup';
|
||||
import { SelectTree } from './selectTree';
|
||||
import { SimpleDialog } from './simpleDialog';
|
||||
import { StudyList } from './studyList';
|
||||
import {
|
||||
PageToolbar,
|
||||
StudyList,
|
||||
TableSearchFilter,
|
||||
TablePagination,
|
||||
} from './studyList';
|
||||
import { ToolbarSection } from './toolbarSection';
|
||||
import { Tooltip } from './tooltip';
|
||||
|
||||
@@ -32,12 +37,15 @@ export {
|
||||
OverlayTrigger,
|
||||
QuickSwitch,
|
||||
RoundedButtonGroup,
|
||||
PageToolbar,
|
||||
SelectTree,
|
||||
SimpleDialog,
|
||||
StudyBrowser,
|
||||
StudyList,
|
||||
TableList,
|
||||
TableListItem,
|
||||
TableSearchFilter,
|
||||
TablePagination,
|
||||
ThumbnailEntry,
|
||||
ToolbarSection,
|
||||
Tooltip,
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
/* NOTE: the order of these styles DO matter */
|
||||
|
||||
/* Will edit everything selected including everything between a range of dates */
|
||||
.CalendarDay__selected_span {
|
||||
background: var(--table-text-secondary-color);
|
||||
color: #fff;
|
||||
border-color: #e4e7e7;
|
||||
}
|
||||
|
||||
/* Will edit selected date or the endpoints of a range of dates */
|
||||
.CalendarDay__selected {
|
||||
background: var(--table-text-secondary-color);
|
||||
color: #fff;
|
||||
border-color: #e4e7e7;
|
||||
}
|
||||
|
||||
/* Will edit when hovered over. _span style also has this property */
|
||||
.CalendarDay__selected:hover {
|
||||
background: var(--table-text-secondary-color);
|
||||
color: #fff;
|
||||
border-color: #e4e7e7;
|
||||
}
|
||||
|
||||
/* Will edit when the second date (end date) in a range of dates
|
||||
is not yet selected. Edits the dates between your mouse and said date */
|
||||
.CalendarDay__hovered_span:hover,
|
||||
.CalendarDay__hovered_span {
|
||||
background: var(--table-text-secondary-color);
|
||||
color: #fff;
|
||||
border-color: #e4e7e7;
|
||||
}
|
||||
|
||||
/* EXTERIOR INPUT STYLE */
|
||||
/* Container - placement */
|
||||
.DateRangePicker {
|
||||
height: 40px;
|
||||
margin: 0 5px 20px 5px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
width: 100%;
|
||||
}
|
||||
/* Container - visual */
|
||||
.DateRangePickerInput {
|
||||
width: calc(100% - 10px); /* Just use padding? */
|
||||
background-color: var(--input-background-color);
|
||||
border-color: var(--input-background-color);
|
||||
color: var(--input-placeholder-color);
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.DateRangePickerInput.DateRangePickerInput__withBorder {
|
||||
border-radius: 4px;
|
||||
background-color: var(--input-background-color);
|
||||
}
|
||||
|
||||
/* Input Container */
|
||||
.DateInput {
|
||||
width: 97px;
|
||||
height: 38px;
|
||||
border-radius: 4px;
|
||||
background-color: var(--input-background-color);
|
||||
}
|
||||
|
||||
/* Actual Input Element */
|
||||
.DateInput > .DateInput_input {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
color: var(--input-placeholder-color);
|
||||
height: 38px;
|
||||
font-size: 10pt;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* PRESETS */
|
||||
.PresetDateRangePicker_panel {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.PresetDateRangePicker_button {
|
||||
margin: 0;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
@@ -2,13 +2,12 @@
|
||||
// https://github.com/airbnb/react-dates#initialize
|
||||
import 'react-dates/initialize';
|
||||
import 'react-dates/lib/css/_datepicker.css';
|
||||
import './CustomDateRangePicker.css';
|
||||
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { DateRangePicker } from 'react-dates';
|
||||
|
||||
import './CustomDateRangePicker.styl';
|
||||
|
||||
export default class CustomDateRangePicker extends React.Component {
|
||||
static propTypes = {
|
||||
presets: PropTypes.arrayOf(
|
||||
@@ -85,15 +84,13 @@ export default class CustomDateRangePicker extends React.Component {
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<DateRangePicker
|
||||
{...dateRangePickerProps}
|
||||
startDate={this.state.startDate}
|
||||
endDate={this.state.endDate}
|
||||
renderCalendarInfo={this.renderDatePresets}
|
||||
onDatesChange={this.onDatesChange}
|
||||
/>
|
||||
</div>
|
||||
<DateRangePicker
|
||||
{...dateRangePickerProps}
|
||||
startDate={this.state.startDate}
|
||||
endDate={this.state.endDate}
|
||||
renderCalendarInfo={this.renderDatePresets}
|
||||
onDatesChange={this.onDatesChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,84 +0,0 @@
|
||||
.CalendarDay__selected_span {
|
||||
background: var(--calendar-main-color);
|
||||
color: var(--calendar-day-color);
|
||||
border: 1px solid;
|
||||
border-color: var(--calendar-day-border-color);
|
||||
}
|
||||
|
||||
.CalendarDay__default:hover {
|
||||
color: var(--calendar-main-color);
|
||||
}
|
||||
|
||||
.CalendarDay__selected_span:active, .CalendarDay__selected_span:hover {
|
||||
background: var(--calendar-day-active-hover-background-color);
|
||||
border-color: var(--calendar-day-border-color);
|
||||
color: var(--calendar-day-color);
|
||||
}
|
||||
|
||||
.CalendarDay__selected {
|
||||
background: var(--calendar-main-color);
|
||||
color: var(--calendar-day-color);
|
||||
border-color: var(--calendar-day-border-color);
|
||||
}
|
||||
|
||||
.CalendarDay__selected:hover {
|
||||
background: var(--calendar-main-color);
|
||||
color: var(--calendar-day-color);
|
||||
border-color: var(--calendar-day-border-color);
|
||||
}
|
||||
|
||||
.CalendarDay__hovered_span:hover,
|
||||
.CalendarDay__hovered_span {
|
||||
background: var(--calendar-main-color);
|
||||
color: var(--calendar-day-color);
|
||||
border-color:var(--calendar-day-color);
|
||||
}
|
||||
|
||||
.DateInput {
|
||||
width: 97px
|
||||
}
|
||||
|
||||
.DateInput_input {
|
||||
background-color: var(--input-background-color)
|
||||
border-color: var(--input-background-color)
|
||||
color: var(--input-placeholder-color)
|
||||
height: 38px
|
||||
font-size: 10pt
|
||||
}
|
||||
|
||||
.DateRangePickerInput {
|
||||
background-color: var(--input-background-color)
|
||||
border-color: var(--input-background-color)
|
||||
color: var(--input-placeholder-color)
|
||||
height: 40px
|
||||
}
|
||||
|
||||
.PresetDateRangePicker_panel: {
|
||||
padding: 0 22px 11px 22px;
|
||||
}
|
||||
|
||||
.PresetDateRangePicker_button {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
textAlign: center;
|
||||
background: none;
|
||||
border: 2px solid var(--calendar-main-color);
|
||||
color: var(--calendar-main-color);
|
||||
padding: 4px 12px;
|
||||
marginRight: 8;
|
||||
font: inherit;
|
||||
fontWeight: 700;
|
||||
lineHeight: normal;
|
||||
overflow: visible;
|
||||
boxSizing: border-box;
|
||||
cursor: pointer;
|
||||
|
||||
:active: {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.PresetDateRangePicker_button__selected: {
|
||||
color: var(--calendar-day-color);
|
||||
background: var(--calendar-main-color);
|
||||
};
|
||||
+2
-4
@@ -1,11 +1,9 @@
|
||||
import './StudyListToolbar.styl';
|
||||
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
import { Icon } from './../../elements/Icon';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
class StudylistToolbar extends PureComponent {
|
||||
class PageToolbar extends PureComponent {
|
||||
static propTypes = {
|
||||
onImport: PropTypes.func,
|
||||
};
|
||||
@@ -37,4 +35,4 @@ class StudylistToolbar extends PureComponent {
|
||||
}
|
||||
}
|
||||
|
||||
export { StudylistToolbar };
|
||||
export { PageToolbar };
|
||||
@@ -1,64 +1,63 @@
|
||||
.pagination-area
|
||||
color: var(--text-secondary-color);
|
||||
font-size: 13px
|
||||
font-weight: normal !important
|
||||
display: flex;
|
||||
color: var(--text-secondary-color);
|
||||
font-size: 13px
|
||||
font-weight: normal !important
|
||||
|
||||
label
|
||||
font-weight: normal
|
||||
|
||||
select
|
||||
margin: 5px
|
||||
background-color: var(--primary-background-color)
|
||||
color: white
|
||||
|
||||
.row
|
||||
display: flex;
|
||||
|
||||
.rows-dropdown
|
||||
width: 25%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
|
||||
.pagination-buttons
|
||||
width: 75%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
|
||||
.form-group
|
||||
margin-bottom: 15px;
|
||||
|
||||
.rows-per-page label.wrapperLabel
|
||||
display: inline-table !important
|
||||
margin: 0 4px
|
||||
|
||||
select
|
||||
margin: 0px 4px 0px 4px
|
||||
width: 42px
|
||||
|
||||
.page-buttons
|
||||
margin: 0
|
||||
text-align: right
|
||||
label
|
||||
font-weight: normal
|
||||
ul.pagination-control
|
||||
margin: 0
|
||||
|
||||
li
|
||||
display: table-cell
|
||||
padding: 5px 2px
|
||||
select
|
||||
margin: 5px
|
||||
background-color: var(--primary-background-color)
|
||||
color: white
|
||||
|
||||
|
||||
.rows-dropdown
|
||||
width: 25%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
|
||||
.pagination-buttons
|
||||
width: 75%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
|
||||
.form-group
|
||||
margin-bottom: 15px;
|
||||
|
||||
.rows-per-page label.wrapperLabel
|
||||
display: inline-table !important
|
||||
margin: 0 4px
|
||||
|
||||
select
|
||||
margin: 0px 4px 0px 4px
|
||||
width: 42px
|
||||
|
||||
.page-buttons
|
||||
margin: 0
|
||||
text-align: right
|
||||
font-weight: normal
|
||||
ul.pagination-control
|
||||
margin: 0
|
||||
|
||||
li
|
||||
display: table-cell
|
||||
padding: 5px 2px
|
||||
|
||||
button
|
||||
padding: 4px 8px
|
||||
background-color: var(--primary-background-color)
|
||||
border-color: var(--ui-gray)
|
||||
color: var(--ui-gray-darkest)
|
||||
color: white
|
||||
text-decoration: none
|
||||
|
||||
&:hover:enabled
|
||||
color: var(--active-color)
|
||||
|
||||
.active
|
||||
button
|
||||
padding: 4px 8px
|
||||
background-color: var(--primary-background-color)
|
||||
border-color: var(--ui-gray)
|
||||
color: var(--ui-gray-darkest)
|
||||
background-color: var(--ui-gray)
|
||||
border-color: #ddd
|
||||
color: white
|
||||
text-decoration: none
|
||||
|
||||
&:hover:enabled
|
||||
color: var(--active-color)
|
||||
|
||||
.active
|
||||
button
|
||||
background-color: var(--ui-gray)
|
||||
border-color: #ddd
|
||||
color: white
|
||||
@@ -1,484 +1,397 @@
|
||||
import './StudyList.styl';
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import CustomDateRangePicker from './CustomDateRangePicker.js';
|
||||
import { Icon } from './../../elements/Icon';
|
||||
import { PaginationArea } from './PaginationArea.js';
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import TableSearchFilter from './TableSearchFilter.js';
|
||||
import useMedia from '../../hooks/useMedia.js';
|
||||
import PropTypes from 'prop-types';
|
||||
import ColorHash from './internal/color-hash.js';
|
||||
import { StudyListLoadingText } from './StudyListLoadingText.js';
|
||||
import { StudylistToolbar } from './StudyListToolbar.js';
|
||||
import { isInclusivelyBeforeDay } from 'react-dates';
|
||||
import moment from 'moment';
|
||||
import debounce from 'lodash.debounce';
|
||||
import isEqual from 'lodash.isequal';
|
||||
import { withTranslation } from '../../utils/LanguageProvider';
|
||||
|
||||
const today = moment();
|
||||
const lastWeek = moment().subtract(7, 'day');
|
||||
const lastMonth = moment().subtract(1, 'month');
|
||||
function getPaginationFragment(
|
||||
props,
|
||||
searchData,
|
||||
nextPageCb,
|
||||
prevPageCb,
|
||||
changeRowsPerPageCb
|
||||
) {
|
||||
return (
|
||||
<PaginationArea
|
||||
pageOptions={props.pageOptions}
|
||||
currentPage={searchData.currentPage}
|
||||
nextPageFunc={nextPageCb}
|
||||
prevPageFunc={prevPageCb}
|
||||
onRowsPerPageChange={changeRowsPerPageCb}
|
||||
rowsPerPage={searchData.rowsPerPage}
|
||||
recordCount={props.studies.length}
|
||||
/>
|
||||
);
|
||||
}
|
||||
const colorHash = new ColorHash();
|
||||
|
||||
function getTableMeta(translate) {
|
||||
return {
|
||||
patientName: {
|
||||
displayText: translate('PatientName'),
|
||||
sort: 0,
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @param {*} props
|
||||
* @returns
|
||||
*/
|
||||
function StudyList(props) {
|
||||
const {
|
||||
isLoading,
|
||||
hasError,
|
||||
studies,
|
||||
sort,
|
||||
onSort: handleSort,
|
||||
filterValues,
|
||||
onFilterChange: handleFilterChange,
|
||||
onSelectItem: handleSelectItem,
|
||||
t,
|
||||
//
|
||||
studyListDateFilterNumDays,
|
||||
} = props;
|
||||
|
||||
const largeTableMeta = [
|
||||
{
|
||||
displayText: t('PatientName'),
|
||||
fieldName: 'patientName',
|
||||
inputType: 'text',
|
||||
size: 330,
|
||||
},
|
||||
patientId: {
|
||||
displayText: translate('MRN'),
|
||||
sort: 0,
|
||||
{
|
||||
displayText: t('MRN'),
|
||||
fieldName: 'patientId',
|
||||
inputType: 'text',
|
||||
size: 378,
|
||||
},
|
||||
accessionNumber: {
|
||||
displayText: translate('AccessionNumber'),
|
||||
sort: 0,
|
||||
{
|
||||
displayText: t('AccessionNumber'),
|
||||
fieldName: 'accessionNumber',
|
||||
inputType: 'text',
|
||||
size: 180,
|
||||
},
|
||||
studyDate: {
|
||||
displayText: translate('StudyDate'),
|
||||
{
|
||||
displayText: t('StudyDate'),
|
||||
fieldName: 'studyDate',
|
||||
inputType: 'date-range',
|
||||
sort: 0,
|
||||
},
|
||||
modalities: {
|
||||
displayText: translate('Modality'),
|
||||
sort: 0,
|
||||
},
|
||||
studyDescription: {
|
||||
displayText: translate('StudyDescription'),
|
||||
sort: 0,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function getNoListFragment(translate, studies, error, loading) {
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="loading">
|
||||
<StudyListLoadingText />
|
||||
</div>
|
||||
);
|
||||
} else if (error) {
|
||||
return (
|
||||
<div className="notFound">
|
||||
{translate('There was an error fetching studies')}
|
||||
</div>
|
||||
);
|
||||
} else if (!studies.length) {
|
||||
return <div className="notFound">{translate('No matching results')}</div>;
|
||||
}
|
||||
}
|
||||
|
||||
class StudyList extends Component {
|
||||
static propTypes = {
|
||||
studies: PropTypes.array.isRequired,
|
||||
onSelectItem: PropTypes.func.isRequired,
|
||||
onSearch: PropTypes.func.isRequired,
|
||||
currentPage: PropTypes.number,
|
||||
rowsPerPage: PropTypes.number,
|
||||
studyListDateFilterNumDays: PropTypes.number,
|
||||
studyListFunctionsEnabled: PropTypes.bool,
|
||||
defaultSort: PropTypes.shape({
|
||||
field: PropTypes.string.isRequired,
|
||||
order: PropTypes.oneOf(['desc', 'asc']).isRequired,
|
||||
}),
|
||||
onImport: PropTypes.func,
|
||||
pageOptions: PropTypes.array,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
currentPage: 0,
|
||||
rowsPerPage: 25,
|
||||
studyListDateFilterNumDays: 7,
|
||||
};
|
||||
|
||||
static studyDatePresets = [
|
||||
{
|
||||
text: 'Today',
|
||||
start: today,
|
||||
end: today,
|
||||
size: 300,
|
||||
},
|
||||
{
|
||||
text: 'Last 7 days',
|
||||
start: lastWeek,
|
||||
end: today,
|
||||
displayText: t('Modality'),
|
||||
fieldName: 'modalities',
|
||||
inputType: 'text',
|
||||
size: 114,
|
||||
},
|
||||
{
|
||||
text: 'Last 30 days',
|
||||
start: lastMonth,
|
||||
end: today,
|
||||
displayText: t('StudyDescription'),
|
||||
fieldName: 'studyDescription',
|
||||
inputType: 'text',
|
||||
size: 335,
|
||||
},
|
||||
];
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
const mediumTableMeta = [
|
||||
{
|
||||
displayText: 'Patient / MRN',
|
||||
fieldName: 'patientNameOrId',
|
||||
inputType: 'text',
|
||||
size: 250,
|
||||
},
|
||||
{
|
||||
displayText: 'Description',
|
||||
fieldName: 'accessionOrModalityOrDescription',
|
||||
inputType: 'text',
|
||||
size: 350,
|
||||
},
|
||||
{
|
||||
displayText: t('StudyDate'),
|
||||
fieldName: 'studyDate',
|
||||
inputType: 'date-range',
|
||||
size: 300,
|
||||
},
|
||||
];
|
||||
|
||||
const sortData = {
|
||||
field: undefined,
|
||||
order: undefined,
|
||||
};
|
||||
const smallTableMeta = [
|
||||
{
|
||||
displayText: 'Search',
|
||||
fieldName: 'allFields',
|
||||
inputType: 'text',
|
||||
size: 100,
|
||||
},
|
||||
];
|
||||
|
||||
// init from props
|
||||
if (props.defaultSort) {
|
||||
sortData.field = props.defaultSort.field;
|
||||
// todo: -1, 0, 1?
|
||||
sortData.order = props.defaultSort.order; // asc, desc
|
||||
}
|
||||
const tableMeta = useMedia(
|
||||
['(min-width: 1750px)', '(min-width: 1000px)', '(min-width: 768px)'],
|
||||
[largeTableMeta, mediumTableMeta, smallTableMeta],
|
||||
smallTableMeta
|
||||
);
|
||||
|
||||
this.defaultStartDate = moment().subtract(
|
||||
this.props.studyListDateFilterNumDays,
|
||||
'days'
|
||||
);
|
||||
this.defaultEndDate = moment();
|
||||
const totalSize = tableMeta
|
||||
.map(field => field.size)
|
||||
.reduce((prev, next) => prev + next);
|
||||
|
||||
this.state = {
|
||||
loading: false,
|
||||
error: false,
|
||||
searchData: {
|
||||
sortData,
|
||||
currentPage: this.props.currentPage,
|
||||
rowsPerPage: this.props.rowsPerPage,
|
||||
studyDateFrom: this.defaultStartDate,
|
||||
studyDateTo: this.defaultEndDate,
|
||||
},
|
||||
highlightedItem: '',
|
||||
};
|
||||
return (
|
||||
<table className="table table--striped table--hoverable">
|
||||
<colgroup>
|
||||
{tableMeta.map((field, i) => {
|
||||
const size = field.size;
|
||||
const percentWidth = (size / totalSize) * 100.0;
|
||||
|
||||
this.getChangeHandler = this.getChangeHandler.bind(this);
|
||||
this.getBlurHandler = this.getBlurHandler.bind(this);
|
||||
this.onInputKeydown = this.onInputKeydown.bind(this);
|
||||
this.nextPage = this.nextPage.bind(this);
|
||||
this.prevPage = this.prevPage.bind(this);
|
||||
this.onRowsPerPageChange = this.onRowsPerPageChange.bind(this);
|
||||
this.delayedSearch = debounce(this.search, 250);
|
||||
}
|
||||
|
||||
getChangeHandler(key) {
|
||||
return event => {
|
||||
this.delayedSearch.cancel();
|
||||
this.setSearchData(key, event.target.value, this.delayedSearch);
|
||||
};
|
||||
}
|
||||
|
||||
getBlurHandler(key) {
|
||||
return event => {
|
||||
this.delayedSearch.cancel();
|
||||
this.setSearchData(key, event.target.value);
|
||||
};
|
||||
}
|
||||
|
||||
setSearchData(key, value) {
|
||||
const searchData = { ...this.state.searchData };
|
||||
searchData[key] = value;
|
||||
|
||||
if (!isEqual(searchData[key], this.state.searchData[key])) {
|
||||
this.setState({ ...this.state, searchData });
|
||||
}
|
||||
}
|
||||
|
||||
setSearchDataBatch(keyValues) {
|
||||
const searchData = { ...this.state.searchData };
|
||||
|
||||
Object.keys(keyValues).forEach(key => {
|
||||
searchData[key] = keyValues[key];
|
||||
});
|
||||
|
||||
this.setState({ searchData });
|
||||
}
|
||||
|
||||
async onInputKeydown(event) {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
this.delayedSearch.cancel();
|
||||
// reset the page because user is doing a new search
|
||||
this.setSearchData('currentPage', 0);
|
||||
}
|
||||
}
|
||||
|
||||
async search() {
|
||||
try {
|
||||
this.setState({ loading: true, error: false });
|
||||
await this.props.onSearch(this.state.searchData);
|
||||
} catch (error) {
|
||||
this.setState({ error: true });
|
||||
throw new Error(error);
|
||||
} finally {
|
||||
this.setState({ loading: false });
|
||||
}
|
||||
}
|
||||
|
||||
nextPage(currentPage) {
|
||||
currentPage = currentPage + 1;
|
||||
this.delayedSearch.cancel();
|
||||
this.setSearchData('currentPage', currentPage);
|
||||
}
|
||||
|
||||
prevPage(currentPage) {
|
||||
currentPage = currentPage - 1;
|
||||
this.delayedSearch.cancel();
|
||||
this.setSearchData('currentPage', currentPage);
|
||||
}
|
||||
|
||||
onRowsPerPageChange(rowsPerPage) {
|
||||
this.delayedSearch.cancel();
|
||||
this.setSearchDataBatch({ rowsPerPage, currentPage: 0 });
|
||||
}
|
||||
|
||||
onSortClick(field) {
|
||||
return () => {
|
||||
let order;
|
||||
const sort = this.state.searchData.sortData;
|
||||
const isSortedField = sort.field === field;
|
||||
|
||||
if (isSortedField) {
|
||||
if (sort.order === 'asc') {
|
||||
order = 'desc';
|
||||
} else {
|
||||
order = undefined;
|
||||
field = undefined;
|
||||
}
|
||||
} else {
|
||||
order = 'asc';
|
||||
}
|
||||
|
||||
this.delayedSearch.cancel();
|
||||
this.setSearchData('sortData', { field, order });
|
||||
};
|
||||
}
|
||||
|
||||
onHighlightItem(studyItemUid) {
|
||||
this.setState({ highlightedItem: studyItemUid });
|
||||
}
|
||||
|
||||
getTableRow(study, index) {
|
||||
const trKey = `trStudy${index}${study.studyInstanceUid}`;
|
||||
|
||||
if (!study) {
|
||||
return;
|
||||
}
|
||||
|
||||
const getTableCell = (
|
||||
study,
|
||||
studyKey,
|
||||
emptyValue = '',
|
||||
emptyClass = ''
|
||||
) => {
|
||||
const componentKey = `td${studyKey}`;
|
||||
const isValidValue = study && typeof study[studyKey] === 'string';
|
||||
let className = emptyClass;
|
||||
let value = emptyValue;
|
||||
|
||||
if (isValidValue) {
|
||||
className = studyKey;
|
||||
value = study[studyKey];
|
||||
}
|
||||
|
||||
return (
|
||||
<td key={componentKey} className={className}>
|
||||
{value}
|
||||
</td>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={trKey}
|
||||
className={
|
||||
this.state.highlightedItem === study.studyInstanceUid
|
||||
? 'studylistStudy noselect active'
|
||||
: 'studylistStudy noselect'
|
||||
}
|
||||
onMouseDown={event => {
|
||||
// middle/wheel click
|
||||
if (event.button === 1) {
|
||||
this.props.onSelectItem(study.studyInstanceUid);
|
||||
}
|
||||
}}
|
||||
onClick={() => {
|
||||
this.onHighlightItem(study.studyInstanceUid);
|
||||
this.props.onSelectItem(study.studyInstanceUid);
|
||||
}}
|
||||
>
|
||||
{getTableCell(
|
||||
study,
|
||||
'patientName',
|
||||
`(${this.props.t('Empty')})`,
|
||||
'emptyCell'
|
||||
return <col key={i} style={{ width: `${percentWidth}%` }} />;
|
||||
})}
|
||||
</colgroup>
|
||||
<thead className="table-head">
|
||||
<tr className="filters">
|
||||
<TableSearchFilter
|
||||
meta={tableMeta}
|
||||
values={filterValues}
|
||||
onSort={handleSort}
|
||||
onValueChange={handleFilterChange}
|
||||
sortFieldName={sort.fieldName}
|
||||
sortDirection={sort.direction}
|
||||
studyListDateFilterNumDays={studyListDateFilterNumDays}
|
||||
/>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="table-body" data-cy="study-list-results">
|
||||
{/* I'm not in love with this approach, but it's the quickest way for now
|
||||
*
|
||||
* - Display different content based on loading, empty, results state
|
||||
*
|
||||
* This is not ideal because it create a jump in focus. For loading especially,
|
||||
* We should keep our current results visible while we load the new ones.
|
||||
*/}
|
||||
{/* LOADING */}
|
||||
{isLoading && (
|
||||
<tr className="no-hover">
|
||||
<td colspan={tableMeta.length}>
|
||||
<StudyListLoadingText />
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{getTableCell(study, 'patientId')}
|
||||
{getTableCell(study, 'accessionNumber')}
|
||||
{getTableCell(study, 'studyDate')}
|
||||
{getTableCell(study, 'modalities')}
|
||||
{getTableCell(study, 'studyDescription')}
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
componentDidUpdate(previousProps, previousState) {
|
||||
if (!isEqual(previousState.searchData, this.state.searchData)) {
|
||||
this.search();
|
||||
}
|
||||
}
|
||||
|
||||
renderTableBody(noListFragment) {
|
||||
return !noListFragment && this.props.studies
|
||||
? this.props.studies.map(this.getTableRow.bind(this))
|
||||
: null;
|
||||
}
|
||||
|
||||
render() {
|
||||
const tableMeta = getTableMeta(this.props.t);
|
||||
|
||||
// Apply sort
|
||||
const sortedFieldName = this.state.searchData.sortData.field;
|
||||
const sortedField = tableMeta[sortedFieldName];
|
||||
|
||||
if (sortedField) {
|
||||
const sortOrder = this.state.searchData.sortData.order;
|
||||
sortedField.sort = sortOrder === 'asc' ? 1 : 2;
|
||||
}
|
||||
|
||||
// Sort Icons
|
||||
const sortIcons = ['sort', 'sort-up', 'sort-down'];
|
||||
const noListFragment = getNoListFragment(
|
||||
this.props.t,
|
||||
this.props.studies,
|
||||
this.state.error,
|
||||
this.props.loading || this.state.loading
|
||||
);
|
||||
const tableBody = this.renderTableBody(noListFragment);
|
||||
const studiesNum = (this.props.studies && this.props.studies.length) || 0;
|
||||
|
||||
return (
|
||||
<div className="StudyList">
|
||||
<div className="studyListToolbar clearfix">
|
||||
<div className="header pull-left">{this.props.t('StudyList')}</div>
|
||||
<div className="studyCount pull-right">{studiesNum}</div>
|
||||
<div className="pull-right">
|
||||
{this.props.studyListFunctionsEnabled ? (
|
||||
<StudylistToolbar onImport={this.props.onImport} />
|
||||
) : null}
|
||||
</div>
|
||||
{this.props.children}
|
||||
</div>
|
||||
<div className="theadBackground" />
|
||||
<div id="studyListContainer">
|
||||
<table id="tblStudyList" className="studylistResult table noselect">
|
||||
<thead>
|
||||
<tr>
|
||||
{Object.keys(tableMeta).map((fieldName, i) => {
|
||||
const field = tableMeta[fieldName];
|
||||
|
||||
return (
|
||||
<React.Fragment key={i}>
|
||||
<th className={fieldName}>
|
||||
<div
|
||||
id={`_${fieldName}`}
|
||||
className="display-text"
|
||||
onClick={this.onSortClick(fieldName)}
|
||||
>
|
||||
<span>{field.displayText}</span>
|
||||
<Icon
|
||||
name={sortIcons[field.sort]}
|
||||
style={{ fontSize: '12px' }}
|
||||
/>
|
||||
</div>
|
||||
{!field.inputType && (
|
||||
<input
|
||||
type="text"
|
||||
className="form-control studylist-search"
|
||||
id={fieldName}
|
||||
value={this.state[fieldName]}
|
||||
onKeyDown={this.onInputKeydown}
|
||||
onChange={this.getChangeHandler(fieldName)}
|
||||
onBlur={this.getBlurHandler(fieldName)}
|
||||
/>
|
||||
)}
|
||||
{field.inputType === 'date-range' && (
|
||||
<div style={{ display: 'block' }}>
|
||||
<CustomDateRangePicker
|
||||
presets={StudyList.studyDatePresets}
|
||||
showClearDates={true}
|
||||
startDateId="studyListStartDate"
|
||||
endDateId="studyListEndDate"
|
||||
startDate={this.defaultStartDate}
|
||||
endDate={this.defaultEndDate}
|
||||
hideKeyboardShortcutsPanel={true}
|
||||
anchorDirection="left"
|
||||
isOutsideRange={day =>
|
||||
!isInclusivelyBeforeDay(day, moment())
|
||||
}
|
||||
onDatesChange={({
|
||||
startDate,
|
||||
endDate,
|
||||
preset = false,
|
||||
}) => {
|
||||
if (
|
||||
startDate &&
|
||||
endDate &&
|
||||
(this.state.focusedInput === 'endDate' ||
|
||||
preset)
|
||||
) {
|
||||
this.setSearchDataBatch({
|
||||
studyDateFrom: startDate.toDate(),
|
||||
studyDateTo: endDate.toDate(),
|
||||
});
|
||||
this.setState({ focusedInput: false });
|
||||
} else if (!startDate && !endDate) {
|
||||
this.setSearchDataBatch({
|
||||
studyDateFrom: null,
|
||||
studyDateTo: null,
|
||||
});
|
||||
}
|
||||
}}
|
||||
focusedInput={this.state.focusedInput}
|
||||
onFocusChange={focusedInput => {
|
||||
this.setState({ focusedInput });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</th>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="studyListData">{tableBody}</tbody>
|
||||
</table>
|
||||
|
||||
{noListFragment
|
||||
? noListFragment
|
||||
: getPaginationFragment(
|
||||
this.props,
|
||||
this.state.searchData,
|
||||
this.nextPage,
|
||||
this.prevPage,
|
||||
this.onRowsPerPageChange
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
{!isLoading && hasError && (
|
||||
<tr className="no-hover">
|
||||
<td colspan={tableMeta.length}>
|
||||
<div className="notFound">
|
||||
{t('There was an error fetching studies')}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{/* EMPTY */}
|
||||
{!isLoading && !studies.length && (
|
||||
<tr className="no-hover">
|
||||
<td colspan={tableMeta.length}>
|
||||
<div className="notFound">{t('No matching results')}</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{!isLoading &&
|
||||
studies.map((study, index) => (
|
||||
<TableRow
|
||||
key={`${study.studyInstanceUid}-${index}`}
|
||||
onClick={studyInstanceUid => handleSelectItem(studyInstanceUid)}
|
||||
accessionNumber={study.accessionNumber || ''}
|
||||
modalities={study.modalities}
|
||||
patientId={study.patientId || ''}
|
||||
patientName={study.patientName || ''}
|
||||
studyDate={study.studyDate}
|
||||
studyDescription={study.studyDescription || ''}
|
||||
studyInstanceUid={study.studyInstanceUid}
|
||||
t={t}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
}
|
||||
|
||||
StudyList.propTypes = {
|
||||
isLoading: PropTypes.bool.isRequired,
|
||||
hasError: PropTypes.bool.isRequired,
|
||||
studies: PropTypes.array.isRequired,
|
||||
onSelectItem: PropTypes.func.isRequired,
|
||||
// ~~ SORT
|
||||
sort: PropTypes.shape({
|
||||
fieldName: PropTypes.string,
|
||||
direction: PropTypes.oneOf(['desc', 'asc', null]),
|
||||
}).isRequired,
|
||||
onSort: PropTypes.func.isRequired,
|
||||
// ~~ FILTERS
|
||||
filterValues: PropTypes.shape({
|
||||
patientName: PropTypes.string.isRequired,
|
||||
patientId: PropTypes.string.isRequired,
|
||||
accessionNumber: PropTypes.string.isRequired,
|
||||
studyDate: PropTypes.string.isRequired,
|
||||
modalities: PropTypes.string.isRequired,
|
||||
studyDescription: PropTypes.string.isRequired,
|
||||
patientNameOrId: PropTypes.string.isRequired,
|
||||
accessionOrModalityOrDescription: PropTypes.string.isRequired,
|
||||
allFields: PropTypes.string.isRequired,
|
||||
}).isRequired,
|
||||
onFilterChange: PropTypes.func.isRequired,
|
||||
//
|
||||
studyListDateFilterNumDays: PropTypes.number,
|
||||
};
|
||||
|
||||
StudyList.defaultProps = {};
|
||||
|
||||
function TableRow(props) {
|
||||
const {
|
||||
accessionNumber,
|
||||
isHighlighted,
|
||||
modalities,
|
||||
patientId,
|
||||
patientName,
|
||||
studyDate,
|
||||
studyDescription,
|
||||
studyInstanceUid,
|
||||
onClick: handleClick,
|
||||
t,
|
||||
} = props;
|
||||
|
||||
const largeRowTemplate = (
|
||||
<tr
|
||||
onClick={() => handleClick(studyInstanceUid)}
|
||||
className={classNames({ active: isHighlighted })}
|
||||
>
|
||||
<td className={classNames({ emptyCell: !patientName })}>
|
||||
{patientName || `(${t('Empty')})`}
|
||||
</td>
|
||||
<td>{patientId}</td>
|
||||
<td>{accessionNumber}</td>
|
||||
<td>{studyDate}</td>
|
||||
<td>{modalities}</td>
|
||||
<td>{studyDescription}</td>
|
||||
</tr>
|
||||
);
|
||||
|
||||
const mediumRowTemplate = (
|
||||
<tr
|
||||
onClick={() => handleClick(studyInstanceUid)}
|
||||
className={classNames({ active: isHighlighted })}
|
||||
>
|
||||
<td className={classNames({ emptyCell: !patientName })}>
|
||||
{patientName || `(${t('Empty')})`}
|
||||
<div style={{ color: '#60656f' }}>{patientId}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
{/* DESCRIPTION */}
|
||||
<div
|
||||
className="hide-xs"
|
||||
style={{
|
||||
whiteSpace: 'pre-wrap',
|
||||
flexGrow: 1,
|
||||
}}
|
||||
>
|
||||
{studyDescription}
|
||||
</div>
|
||||
|
||||
{/* MODALITY & ACCESSION */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
minWidth: '80px',
|
||||
maxWidth: '100px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: colorHash.hex(modalities),
|
||||
borderRadius: '16px',
|
||||
padding: '2px 8px 0px 8px',
|
||||
fontWeight: 500,
|
||||
marginBottom: '4px',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
aria-label={modalities}
|
||||
title={modalities}
|
||||
>
|
||||
{modalities}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
aria-label={accessionNumber}
|
||||
title={accessionNumber}
|
||||
>
|
||||
{accessionNumber}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
{/* DATE */}
|
||||
<td style={{ textAlign: 'center' }}>{studyDate}</td>
|
||||
</tr>
|
||||
);
|
||||
|
||||
const smallRowTemplate = (
|
||||
<tr
|
||||
onClick={() => handleClick(studyInstanceUid)}
|
||||
className={classNames({ active: isHighlighted })}
|
||||
>
|
||||
<td style={{ position: 'relative', overflow: 'hidden' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
{/* NAME AND ID */}
|
||||
<div
|
||||
className={classNames({ emptyCell: !patientName })}
|
||||
style={{ width: '150px', minWidth: '150px' }}
|
||||
>
|
||||
<div style={{ fontWeight: 500, paddingTop: '3px' }}>
|
||||
{patientName || `(${t('Empty')})`}
|
||||
</div>
|
||||
<div style={{ color: '#60656f' }}>{patientId}</div>
|
||||
</div>
|
||||
|
||||
{/* DESCRIPTION */}
|
||||
<div
|
||||
className="hide-xs"
|
||||
style={{
|
||||
whiteSpace: 'pre-wrap',
|
||||
flexGrow: 1,
|
||||
paddingLeft: '35px',
|
||||
}}
|
||||
>
|
||||
{studyDescription}
|
||||
</div>
|
||||
|
||||
{/* MODALITY & DATE */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
minWidth: '80px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: colorHash.hex(modalities),
|
||||
borderRadius: '16px',
|
||||
padding: '2px 8px 0px 8px',
|
||||
fontWeight: 500,
|
||||
marginBottom: '4px',
|
||||
}}
|
||||
>
|
||||
{modalities}
|
||||
</div>
|
||||
<div>{studyDate}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
|
||||
const rowTemplate = useMedia(
|
||||
['(min-width: 1750px)', '(min-width: 1000px)', '(min-width: 768px)'],
|
||||
[largeRowTemplate, mediumRowTemplate, smallRowTemplate],
|
||||
smallRowTemplate
|
||||
);
|
||||
|
||||
return rowTemplate;
|
||||
}
|
||||
|
||||
TableRow.propTypes = {
|
||||
accessionNumber: PropTypes.string.isRequired,
|
||||
isHighlighted: PropTypes.bool,
|
||||
modalities: PropTypes.string.isRequired,
|
||||
patientId: PropTypes.string.isRequired,
|
||||
patientName: PropTypes.string.isRequired,
|
||||
studyDate: PropTypes.string.isRequired,
|
||||
studyDescription: PropTypes.string.isRequired,
|
||||
studyInstanceUid: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
TableRow.defaultProps = {
|
||||
isHighlighted: false,
|
||||
};
|
||||
|
||||
const connectedComponent = withTranslation('StudyList')(StudyList);
|
||||
export { connectedComponent as StudyList };
|
||||
@@ -4,6 +4,7 @@
|
||||
$study-list-padding = 8%;
|
||||
$study-list-toolbar-height = 75px;
|
||||
$body-cell-height = 40px;
|
||||
$body-cell-top-bottom-padding = 16px;
|
||||
|
||||
$tablePaddingMediumScreen = 5px
|
||||
$tablePaddingBigScreen = 3%
|
||||
@@ -20,21 +21,41 @@ placeholder-color(c)
|
||||
&:-ms-input-placeholder
|
||||
color: c
|
||||
|
||||
.DateRangePicker
|
||||
height: 40px
|
||||
margin: 0 5px 20px 5px
|
||||
cursor: pointer
|
||||
border: none
|
||||
position: block
|
||||
.study-list-header
|
||||
.addNewStudy
|
||||
margin: 0 10px
|
||||
|
||||
.studyListToolbar
|
||||
label
|
||||
font-weight: 400
|
||||
cursor: pointer
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin-bottom: 5px;
|
||||
|
||||
input
|
||||
width: 0.1px;
|
||||
height: 0.1px
|
||||
opacity: 0
|
||||
overflow: hidden
|
||||
position: absolute
|
||||
z-index: -1
|
||||
|
||||
color: var(--text-secondary-color)
|
||||
|
||||
&:hover
|
||||
color: var(--hover-color)
|
||||
|
||||
&:active
|
||||
color: var(--active-color)
|
||||
|
||||
.study-list-header
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: var(--ui-gray-darker)
|
||||
height: $study-list-toolbar-height
|
||||
margin-bottom: 2px
|
||||
padding: 0 $study-list-padding
|
||||
|
||||
&>div
|
||||
display: inline-block
|
||||
line-height: $study-list-toolbar-height
|
||||
|
||||
.header
|
||||
font-size: 22px
|
||||
@@ -42,17 +63,20 @@ placeholder-color(c)
|
||||
color: var(--table-text-secondary-color)
|
||||
line-height: $study-list-toolbar-height
|
||||
|
||||
.studylistToolbar
|
||||
height: $study-list-toolbar-height
|
||||
line-height: $study-list-toolbar-height
|
||||
.actions
|
||||
display: flex;
|
||||
|
||||
.studyCount
|
||||
.study-count
|
||||
color: var(--large-numbers-color)
|
||||
font-size: 40px
|
||||
font-weight: 100
|
||||
line-height: $study-list-toolbar-height
|
||||
|
||||
.theadBackground
|
||||
/*
|
||||
* Dark gray background with blue border
|
||||
* Spans width of page to create a distinct area for table filters
|
||||
*/
|
||||
.table-head-background
|
||||
height: 121px
|
||||
position: absolute
|
||||
width: 100%
|
||||
@@ -76,20 +100,110 @@ placeholder-color(c)
|
||||
height: 1px
|
||||
z-index: 2
|
||||
|
||||
#studyListContainer
|
||||
|
||||
.study-list-container
|
||||
width: 100%
|
||||
padding: 0 $study-list-padding
|
||||
position: absolute
|
||||
z-index: 2
|
||||
|
||||
.loading
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
table.table
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
|
||||
.loading-text
|
||||
color: var(--table-text-secondary-color)
|
||||
font-size: 30px
|
||||
width: fit-content;
|
||||
> tbody tr
|
||||
padding: 5px
|
||||
background-color: black
|
||||
|
||||
/* Striped Variant */
|
||||
&.table--striped > tbody tr:nth-child(even)
|
||||
background-color: var(--ui-gray-darker)
|
||||
|
||||
/* Hover Variant */
|
||||
&.table--hoverable > tbody tr
|
||||
&:hover, &:active, &.active
|
||||
background-color: var(--table-hover-color)
|
||||
&.no-hover
|
||||
&:hover, &:active, &.active
|
||||
background-color: var(--ui-gray-darker)
|
||||
|
||||
.study-list-container > table.table > tr
|
||||
height: 20px
|
||||
|
||||
.study-list-container > table.table > thead
|
||||
::-webkit-datetime-edit-year-field:not([aria-valuenow]),
|
||||
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
|
||||
::-webkit-datetime-edit-day-field:not([aria-valuenow])
|
||||
color: transparent
|
||||
|
||||
.study-list-container > table.table > thead > tr > th
|
||||
padding: 0;
|
||||
border-bottom: 1px solid var(--ui-border-color-active);
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-top: 0;
|
||||
|
||||
.study-list-container > table.table > tbody > tr > td
|
||||
padding: $body-cell-top-bottom-padding 8px;
|
||||
height: $body-cell-height
|
||||
color: var(--table-text-primary-color)
|
||||
font-weight: 300
|
||||
word-wrap: break-word;
|
||||
|
||||
&.emptyCell
|
||||
color: var(--ui-gray-light)
|
||||
|
||||
.study-list-container > table.table > thead > tr > th.studyDate
|
||||
min-width: 230px
|
||||
|
||||
.study-list-container
|
||||
.filters
|
||||
label
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
min-width: 95px;
|
||||
margin: 0 auto;
|
||||
color: var(--table-text-primary-color);
|
||||
font-weight: 400;
|
||||
padding: 20px;
|
||||
user-select: none;
|
||||
font-size: 15px;
|
||||
|
||||
&:hover
|
||||
color: var(--active-color);
|
||||
|
||||
&.active, &:active
|
||||
color: var(--active-color);
|
||||
i
|
||||
margin: 0 5px;
|
||||
|
||||
input
|
||||
height: 40px
|
||||
margin: 0 5px 20px 5px
|
||||
padding: 0 20px
|
||||
cursor: pointer
|
||||
border: none
|
||||
background-color: var(--input-background-color)
|
||||
color: var(--input-placeholder-color)
|
||||
font-size: 10pt
|
||||
font-weight: normal
|
||||
border-radius: 4px
|
||||
width: calc(100% - 10px); /* Just use padding? */
|
||||
transition(all 0.15s ease)
|
||||
placeholder-color(var(--input-placeholder-color))
|
||||
|
||||
&:active, &:hover
|
||||
background-color: var(--input-background-color)
|
||||
|
||||
.loading-text
|
||||
color: var(--table-text-secondary-color)
|
||||
text-align: center;
|
||||
font-size: 30px
|
||||
|
||||
.notFound
|
||||
color: var(--table-text-secondary-color)
|
||||
@@ -97,191 +211,22 @@ placeholder-color(c)
|
||||
font-weight: 200
|
||||
text-align: center
|
||||
|
||||
table#tblStudyList
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 20px;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
@media only screen and (max-width: 768px)
|
||||
.study-list-header
|
||||
padding: 0 16px;
|
||||
|
||||
> tr
|
||||
height: 20px
|
||||
.study-list-container
|
||||
padding: 0;
|
||||
|
||||
> thead
|
||||
white-space: nowrap
|
||||
.study-list-container > table.table > thead > tr > th
|
||||
padding: 0 13px;
|
||||
|
||||
tr
|
||||
th
|
||||
padding: 0
|
||||
border-bottom: 1px solid var(--ui-border-color-active);
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-top: 0;
|
||||
.study-list-container > table.table > tbody > tr > td
|
||||
padding: 8px;
|
||||
|
||||
&.studyDate
|
||||
min-width: 230px
|
||||
.study-list-container .filters label
|
||||
padding: 8px;
|
||||
|
||||
.display-text
|
||||
display: inline-block
|
||||
cursor: pointer
|
||||
width: 100%
|
||||
min-width: 95px
|
||||
margin: 0 auto
|
||||
color: var(--table-text-primary-color)
|
||||
font-weight: 400
|
||||
padding: 20px
|
||||
-webkit-user-select: none
|
||||
-moz-user-select: none
|
||||
-ms-user-select: none
|
||||
user-select: none
|
||||
|
||||
span
|
||||
font-size: 15px
|
||||
float: left
|
||||
|
||||
i
|
||||
margin: 0 5px
|
||||
|
||||
&:hover
|
||||
color: var(--active-color)
|
||||
|
||||
&.active, &:active
|
||||
color: var(--active-color)
|
||||
|
||||
input.studylist-search
|
||||
height: 40px
|
||||
margin: 0 5px 20px 5px
|
||||
padding: 0 20px
|
||||
cursor: pointer
|
||||
border: none
|
||||
background-color: var(--input-background-color)
|
||||
color: var(--input-placeholder-color)
|
||||
font-size: 10pt
|
||||
font-weight: normal
|
||||
width: calc(100% - 10px)
|
||||
border-radius: 4px
|
||||
|
||||
transition(all 0.15s ease)
|
||||
placeholder-color(var(--input-placeholder-color))
|
||||
|
||||
&.invisible
|
||||
visibility: hidden
|
||||
|
||||
&:active, &:hover
|
||||
background-color: var(--input-background-color)
|
||||
|
||||
::-webkit-datetime-edit-year-field:not([aria-valuenow]),
|
||||
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
|
||||
::-webkit-datetime-edit-day-field:not([aria-valuenow])
|
||||
color: transparent
|
||||
|
||||
> tbody
|
||||
tr
|
||||
padding: 5px
|
||||
background-color: black
|
||||
|
||||
&:nth-child(even)
|
||||
background-color: var(--ui-gray-darker)
|
||||
|
||||
td
|
||||
padding: 8px;
|
||||
height: $body-cell-height
|
||||
line-height: $body-cell-height
|
||||
color: var(--table-text-primary-color)
|
||||
font-weight: 300
|
||||
border-top: 1px solid var(--ui-gray-lighter)
|
||||
border-bottom: 1px solid var(--ui-gray-lighter)
|
||||
white-space: nowrap
|
||||
transition(all 0.1s ease)
|
||||
|
||||
&.emptyCell
|
||||
color: #516873
|
||||
|
||||
&.emptyValue
|
||||
color: var(--ui-gray-light)
|
||||
|
||||
&:hover, &:active, &.active
|
||||
background-color: var(--table-hover-color)
|
||||
color: var(--text-primary-color)
|
||||
|
||||
td
|
||||
// This selector is necessary to override bootstrap's 'table' class
|
||||
border-top: 1px solid var(--ui-gray-lighter)
|
||||
border-bottom: 1px solid var(--ui-gray-lighter)
|
||||
background-color: var(--table-hover-color)
|
||||
|
||||
@media only screen and (max-width: 1362px)
|
||||
#studyListContainer
|
||||
padding: 0 $tablePaddingLargeScreen
|
||||
|
||||
table#tblStudyList
|
||||
thead,
|
||||
tbody
|
||||
tr
|
||||
th,
|
||||
td
|
||||
&:first-child
|
||||
padding-left: $tablePaddingLargeScreen
|
||||
|
||||
&:last-child
|
||||
padding-right: $tablePaddingLargeScreen
|
||||
|
||||
@media only screen and (max-width: 1161px)
|
||||
#studyListContainer
|
||||
padding: 0 $tablePaddingBigWidth
|
||||
|
||||
table#tblStudyList
|
||||
thead,
|
||||
tbody
|
||||
tr
|
||||
th,
|
||||
td
|
||||
&:first-child
|
||||
padding-left: $tablePaddingBigScreen
|
||||
|
||||
&:last-child
|
||||
padding-right: $tablePaddingBigScreen
|
||||
|
||||
@media only screen and (max-width: 1069px)
|
||||
.theadBackground
|
||||
height: 101px
|
||||
|
||||
.studylist-pagination > .row
|
||||
margin-right: 0;
|
||||
|
||||
.studyListToolbar
|
||||
padding: 0 $tablePaddingMediumScreen
|
||||
|
||||
#studyListContainer
|
||||
padding: 0
|
||||
|
||||
table#tblStudyList
|
||||
thead > tr > th
|
||||
|
||||
&:first-child
|
||||
padding-left: $tablePaddingMediumScreen
|
||||
|
||||
&:last-child
|
||||
padding-right: $tablePaddingMediumScreen
|
||||
|
||||
input.worklist-search
|
||||
padding: 10px
|
||||
|
||||
.display-text
|
||||
padding: 10px 5px
|
||||
|
||||
i
|
||||
width: auto
|
||||
|
||||
tbody > tr > td
|
||||
|
||||
&:first-child
|
||||
padding-left: $tablePaddingMediumScreen
|
||||
|
||||
&:last-child
|
||||
padding-right: $tablePaddingMediumScreen
|
||||
|
||||
.worklistPagination
|
||||
.row
|
||||
margin-left: 0
|
||||
margin-right: 0
|
||||
@media only screen and (max-width: 500px)
|
||||
.hide-xs
|
||||
display: none;
|
||||
@@ -1,5 +1,6 @@
|
||||
import { Icon } from './../../elements/Icon';
|
||||
import React from 'react';
|
||||
import { Icon } from './../../elements/Icon';
|
||||
// TODO: useTranslation
|
||||
import { withTranslation } from '../../utils/LanguageProvider';
|
||||
|
||||
function StudyListLoadingText({ t: translate }) {
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
.studyListToolbar
|
||||
.addNewStudy
|
||||
margin: 0 10px
|
||||
|
||||
label
|
||||
font-weight: 400
|
||||
cursor: pointer
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin-bottom: 5px;
|
||||
|
||||
input
|
||||
width: 0.1px;
|
||||
height: 0.1px
|
||||
opacity: 0
|
||||
overflow: hidden
|
||||
position: absolute
|
||||
z-index: -1
|
||||
|
||||
color: var(--text-secondary-color)
|
||||
|
||||
&:hover
|
||||
color: var(--hover-color)
|
||||
|
||||
&:active
|
||||
color: var(--active-color)
|
||||
+10
-15
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
||||
import './PaginationArea.styl';
|
||||
import { withTranslation } from '../../utils/LanguageProvider';
|
||||
|
||||
class PaginationArea extends PureComponent {
|
||||
class TablePagination extends PureComponent {
|
||||
static defaultProps = {
|
||||
pageOptions: [5, 10, 25, 50, 100],
|
||||
rowsPerPage: 25,
|
||||
@@ -11,7 +11,8 @@ class PaginationArea extends PureComponent {
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
pageOptions: PropTypes.array.isRequired,
|
||||
/* Values to show in "rows per page" select dropdown */
|
||||
pageOptions: PropTypes.array,
|
||||
rowsPerPage: PropTypes.number.isRequired,
|
||||
currentPage: PropTypes.number.isRequired,
|
||||
nextPageFunc: PropTypes.func,
|
||||
@@ -89,17 +90,11 @@ class PaginationArea extends PureComponent {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div name="paginationArea">
|
||||
<div className="pagination-area">
|
||||
<div className="row">
|
||||
<div className="rows-dropdown">
|
||||
{this.renderRowsPerPageDropdown()}
|
||||
</div>
|
||||
<div className="pagination-buttons">
|
||||
<div className="form-inline form-group page-number pull-right">
|
||||
{this.renderPaginationButtons()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pagination-area">
|
||||
<div className="rows-dropdown">{this.renderRowsPerPageDropdown()}</div>
|
||||
<div className="pagination-buttons">
|
||||
<div className="form-inline form-group page-number pull-right">
|
||||
{this.renderPaginationButtons()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -107,5 +102,5 @@ class PaginationArea extends PureComponent {
|
||||
}
|
||||
}
|
||||
|
||||
const connectedComponent = withTranslation('Common')(PaginationArea);
|
||||
export { connectedComponent as PaginationArea };
|
||||
const connectedComponent = withTranslation('Common')(TablePagination);
|
||||
export { connectedComponent as TablePagination };
|
||||
@@ -0,0 +1,122 @@
|
||||
import React, { useState } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import moment from 'moment';
|
||||
import { isInclusivelyBeforeDay } from 'react-dates';
|
||||
import CustomDateRangePicker from './CustomDateRangePicker.js';
|
||||
import { Icon } from './../../elements/Icon';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
|
||||
|
||||
function TableSearchFilter(props) {
|
||||
const {
|
||||
meta,
|
||||
values,
|
||||
onSort,
|
||||
onValueChange,
|
||||
sortFieldName,
|
||||
sortDirection,
|
||||
// TODO: Rename
|
||||
studyListDateFilterNumDays
|
||||
} = props;
|
||||
const [focusedInput, setFocusedInput] = useState(null);
|
||||
const [t] = useTranslation(); // 'Common'?
|
||||
|
||||
const sortIcons = ['sort', 'sort-up', 'sort-down'];
|
||||
const sortIconForSortField =
|
||||
sortDirection === 'asc' ? sortIcons[1] : sortIcons[2];
|
||||
//
|
||||
const today = moment();
|
||||
const lastWeek = moment().subtract(7, 'day');
|
||||
const lastMonth = moment().subtract(1, 'month');
|
||||
const defaultStartDate = moment().subtract(studyListDateFilterNumDays, 'days');
|
||||
const defaultEndDate = today;
|
||||
const studyDatePresets = [
|
||||
{
|
||||
text: t('Today'),
|
||||
start: today,
|
||||
end: today,
|
||||
},
|
||||
{
|
||||
text: t('Last 7 days'),
|
||||
start: lastWeek,
|
||||
end: today,
|
||||
},
|
||||
{
|
||||
text: t('Last 30 days'),
|
||||
start: lastMonth,
|
||||
end: today,
|
||||
},
|
||||
];
|
||||
|
||||
return meta.map((field, i) => {
|
||||
const { displayText, fieldName, inputType } = field;
|
||||
const isSortField = sortFieldName === fieldName;
|
||||
const sortIcon = isSortField ? sortIconForSortField : sortIcons[0];
|
||||
|
||||
return (
|
||||
<th key={`${fieldName}-${i}`}>
|
||||
<label
|
||||
htmlFor={`filter-${fieldName}`}
|
||||
onClick={() => onSort(fieldName)}
|
||||
>
|
||||
{`${displayText} `}
|
||||
<Icon name={sortIcon} style={{ fontSize: '12px' }} />
|
||||
</label>
|
||||
{inputType === 'text' && (
|
||||
<input
|
||||
type="text"
|
||||
id={`filter-${fieldName}`}
|
||||
className="form-control studylist-search"
|
||||
value={values[fieldName]}
|
||||
onChange={e => onValueChange(fieldName, e.target.value)}
|
||||
/>
|
||||
)}
|
||||
{inputType === 'date-range' && (
|
||||
// https://github.com/airbnb/react-dates
|
||||
<CustomDateRangePicker
|
||||
// Required
|
||||
startDate={studyListDateFilterNumDays ? defaultStartDate : null}
|
||||
startDateId="start-date"
|
||||
endDate={studyListDateFilterNumDays ? defaultEndDate : null}
|
||||
endDateId="end-date"
|
||||
// TODO: We need a dynamic way to determine which fields values to update
|
||||
onDatesChange={({ startDate, endDate, preset = false }) => {
|
||||
onValueChange('studyDateTo', startDate);
|
||||
onValueChange('studyDateFrom', endDate);
|
||||
}}
|
||||
focusedInput={focusedInput}
|
||||
onFocusChange={updatedVal => setFocusedInput(updatedVal)}
|
||||
// Optional
|
||||
numberOfMonths={1} // For med and small screens? 2 for large?
|
||||
showClearDates={true}
|
||||
anchorDirection="left"
|
||||
presets={studyDatePresets}
|
||||
hideKeyboardShortcutsPanel={true}
|
||||
isOutsideRange={day => !isInclusivelyBeforeDay(day, moment())}
|
||||
/>
|
||||
)}
|
||||
</th>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
TableSearchFilter.propTypes = {
|
||||
meta: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
displayText: PropTypes.string.isRequired,
|
||||
fieldName: PropTypes.string.isRequired,
|
||||
inputType: PropTypes.oneOf(['text', 'date-range']).isRequired,
|
||||
size: PropTypes.number.isRequired,
|
||||
})
|
||||
).isRequired,
|
||||
values: PropTypes.object.isRequired,
|
||||
onSort: PropTypes.func.isRequired,
|
||||
sortFieldName: PropTypes.string,
|
||||
sortDirection: PropTypes.oneOf([null, 'asc', 'desc']),
|
||||
};
|
||||
|
||||
TableSearchFilter.defaultProps = {};
|
||||
|
||||
export { TableSearchFilter };
|
||||
export default TableSearchFilter;
|
||||
@@ -1 +1,4 @@
|
||||
export { StudyList } from './StudyList.js';
|
||||
export { TableSearchFilter } from './TableSearchFilter.js';
|
||||
export { TablePagination } from './TablePagination.js';
|
||||
export { PageToolbar } from './PageToolbar.js';
|
||||
@@ -0,0 +1,24 @@
|
||||
/**
|
||||
* BKDR Hash (modified version)
|
||||
*
|
||||
* @param {String} str string to hash
|
||||
* @returns {Number}
|
||||
*/
|
||||
function BKDRHash(str) {
|
||||
const seed = 131;
|
||||
const seed2 = 137;
|
||||
let hash = 0;
|
||||
// make hash more sensitive for short string like 'a', 'b', 'c'
|
||||
str += 'x';
|
||||
// Note: Number.MAX_SAFE_INTEGER equals 9007199254740991
|
||||
var MAX_SAFE_INTEGER = parseInt(9007199254740991 / seed2);
|
||||
for (var i = 0; i < str.length; i++) {
|
||||
if (hash > MAX_SAFE_INTEGER) {
|
||||
hash = parseInt(hash / seed2);
|
||||
}
|
||||
hash = hash * seed + str.charCodeAt(i);
|
||||
}
|
||||
return hash;
|
||||
}
|
||||
|
||||
export default BKDRHash;
|
||||
@@ -0,0 +1,145 @@
|
||||
import BKDRHash from './bkdr-hash';
|
||||
|
||||
/**
|
||||
* Convert RGB Array to HEX
|
||||
*
|
||||
* @param {Array} RGBArray - [R, G, B]
|
||||
* @returns {String} 6 digits hex starting with #
|
||||
*/
|
||||
function RGB2HEX(RGBArray) {
|
||||
let hex = '#';
|
||||
RGBArray.forEach(function(value) {
|
||||
if (value < 16) {
|
||||
hex += 0;
|
||||
}
|
||||
hex += value.toString(16);
|
||||
});
|
||||
return hex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert HSL to RGB
|
||||
*
|
||||
* @see {@link http://zh.wikipedia.org/wiki/HSL和HSV色彩空间} for further information.
|
||||
* @param {Number} H Hue ∈ [0, 360)
|
||||
* @param {Number} S Saturation ∈ [0, 1]
|
||||
* @param {Number} L Lightness ∈ [0, 1]
|
||||
* @returns {Array} R, G, B ∈ [0, 255]
|
||||
*/
|
||||
function HSL2RGB(H, S, L) {
|
||||
H /= 360;
|
||||
|
||||
const q = L < 0.5 ? L * (1 + S) : L + S - L * S;
|
||||
const p = 2 * L - q;
|
||||
|
||||
return [H + 1 / 3, H, H - 1 / 3].map(function(color) {
|
||||
if (color < 0) {
|
||||
color++;
|
||||
}
|
||||
if (color > 1) {
|
||||
color--;
|
||||
}
|
||||
if (color < 1 / 6) {
|
||||
color = p + (q - p) * 6 * color;
|
||||
} else if (color < 0.5) {
|
||||
color = q;
|
||||
} else if (color < 2 / 3) {
|
||||
color = p + (q - p) * 6 * (2 / 3 - color);
|
||||
} else {
|
||||
color = p;
|
||||
}
|
||||
return Math.round(color * 255);
|
||||
});
|
||||
}
|
||||
|
||||
function isArray(o) {
|
||||
return Object.prototype.toString.call(o) === '[object Array]';
|
||||
}
|
||||
|
||||
/**
|
||||
* Color Hash Class
|
||||
*
|
||||
* @class
|
||||
*/
|
||||
const ColorHash = function(options = {}) {
|
||||
const LS = [options.lightness, options.saturation].map(function(param) {
|
||||
param = param || [0.35, 0.5, 0.65]; // note that 3 is a prime
|
||||
return isArray(param) ? param.concat() : [param];
|
||||
});
|
||||
|
||||
this.L = LS[0];
|
||||
this.S = LS[1];
|
||||
|
||||
if (typeof options.hue === 'number') {
|
||||
options.hue = { min: options.hue, max: options.hue };
|
||||
}
|
||||
if (typeof options.hue === 'object' && !isArray(options.hue)) {
|
||||
options.hue = [options.hue];
|
||||
}
|
||||
if (typeof options.hue === 'undefined') {
|
||||
options.hue = [];
|
||||
}
|
||||
this.hueRanges = options.hue.map(function(range) {
|
||||
return {
|
||||
min: typeof range.min === 'undefined' ? 0 : range.min,
|
||||
max: typeof range.max === 'undefined' ? 360 : range.max,
|
||||
};
|
||||
});
|
||||
|
||||
this.hash = options.hash || BKDRHash;
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the hash in [h, s, l].
|
||||
* Note that H ∈ [0, 360); S ∈ [0, 1]; L ∈ [0, 1];
|
||||
*
|
||||
* @param {String} str string to hash
|
||||
* @returns {Array} [h, s, l]
|
||||
*/
|
||||
ColorHash.prototype.hsl = function(str) {
|
||||
var H, S, L;
|
||||
var hash = this.hash(str);
|
||||
|
||||
if (this.hueRanges.length) {
|
||||
var range = this.hueRanges[hash % this.hueRanges.length];
|
||||
var hueResolution = 727; // note that 727 is a prime
|
||||
H =
|
||||
(((hash / this.hueRanges.length) % hueResolution) *
|
||||
(range.max - range.min)) /
|
||||
hueResolution +
|
||||
range.min;
|
||||
} else {
|
||||
H = hash % 359; // note that 359 is a prime
|
||||
}
|
||||
hash = parseInt(hash / 360);
|
||||
S = this.S[hash % this.S.length];
|
||||
hash = parseInt(hash / this.S.length);
|
||||
L = this.L[hash % this.L.length];
|
||||
|
||||
return [H, S, L];
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the hash in [r, g, b].
|
||||
* Note that R, G, B ∈ [0, 255]
|
||||
*
|
||||
* @param {String} str string to hash
|
||||
* @returns {Array} [r, g, b]
|
||||
*/
|
||||
ColorHash.prototype.rgb = function(str) {
|
||||
var hsl = this.hsl(str);
|
||||
return HSL2RGB.apply(this, hsl);
|
||||
};
|
||||
|
||||
/**
|
||||
* Returns the hash in hex
|
||||
*
|
||||
* @param {String} str string to hash
|
||||
* @returns {String} hex with #
|
||||
*/
|
||||
ColorHash.prototype.hex = function(str) {
|
||||
var rgb = this.rgb(str);
|
||||
return RGB2HEX(rgb);
|
||||
};
|
||||
|
||||
export default ColorHash;
|
||||
@@ -62,7 +62,7 @@ class AboutModal extends Component {
|
||||
|
||||
renderTableRow(item) {
|
||||
return (
|
||||
<tr key={item.name}>
|
||||
<tr key={item.name} style={{ backgroundColor: 'transparent' }}>
|
||||
<td>{item.name}</td>
|
||||
<td>
|
||||
{item.link ? (
|
||||
|
||||
@@ -42,19 +42,6 @@ h3, h1
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
pre
|
||||
display: block;
|
||||
padding: 9.5px;
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
line-height: 1.42857143;
|
||||
color: #333;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
|
||||
button, input, select, textarea
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
import useMedia from './useMedia.js';
|
||||
import useDebounce from './useDebounce.js';
|
||||
|
||||
export { useDebounce, useMedia };
|
||||
@@ -0,0 +1,41 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
/**
|
||||
* A hook to set a value
|
||||
*
|
||||
* @param {*} value - A value to "set"
|
||||
* @param {number} delay - The debounce delay for setting the value
|
||||
* @returns
|
||||
*/
|
||||
export default function useDebounce(value, delay) {
|
||||
const [debouncedValue, setDebouncedValue] = useState(value);
|
||||
|
||||
useEffect(
|
||||
() => {
|
||||
// Set debouncedValue to value (passed in) after the specified delay
|
||||
const handler = setTimeout(() => {
|
||||
setDebouncedValue(value);
|
||||
}, delay);
|
||||
|
||||
// Return a cleanup function that will be called every time useEffect is
|
||||
// re-called. useEffect will only be re-called if value changes (see the
|
||||
// inputs array below).
|
||||
//
|
||||
// This is how we prevent debouncedValue from changing if value is changed
|
||||
// within the delay period. Timeout gets cleared and restarted.
|
||||
//
|
||||
// To put it in context, if the user is typing within our app's search
|
||||
// box, we don't want the debouncedValue to update until they've stopped
|
||||
// typing for more than 500ms.
|
||||
return () => {
|
||||
clearTimeout(handler);
|
||||
};
|
||||
},
|
||||
// Only re-call effect if value changes
|
||||
// You could also add the "delay" var to inputs array if you need to be
|
||||
// able to change that dynamically.
|
||||
[value]
|
||||
);
|
||||
|
||||
return debouncedValue;
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
/**
|
||||
*
|
||||
* @example <caption></caption>
|
||||
* const currentViewportSize = useMedia(
|
||||
* // Media queries
|
||||
* ['(min-width: 1500px)', '(min-width: 1000px)', '(min-width: 600px)'],
|
||||
* // Value to return for matched media query
|
||||
* ['large', 'medium', 'small'],
|
||||
* // Default value
|
||||
* 'medium'
|
||||
* );
|
||||
* @param {string[]} queries
|
||||
* @param {*} values
|
||||
* @param {*} defaultValue
|
||||
* @returns
|
||||
*/
|
||||
function useMedia(queries, values, defaultValue) {
|
||||
// Array containing a media query list for each query
|
||||
const mediaQueryLists = queries.map(q => window.matchMedia(q));
|
||||
|
||||
// Function that gets value based on matching media query
|
||||
const getValue = () => {
|
||||
// Get index of first media query that matches
|
||||
const index = mediaQueryLists.findIndex(mql => mql.matches);
|
||||
|
||||
// Return related value or defaultValue if none
|
||||
return typeof values[index] !== 'undefined' ? values[index] : defaultValue;
|
||||
};
|
||||
|
||||
// State and setter for matched value
|
||||
const [value, setValue] = useState(getValue);
|
||||
|
||||
useEffect(
|
||||
() => {
|
||||
// Event listener callback
|
||||
// Note: By defining getValue outside of useEffect we ensure that it has ...
|
||||
// ... current values of hook args (as this hook callback is created once on mount).
|
||||
const handler = () => setValue(getValue);
|
||||
|
||||
// Set a listener for each media query with above handler as callback.
|
||||
mediaQueryLists.forEach(mql => mql.addListener(handler));
|
||||
|
||||
// Remove listeners on cleanup
|
||||
return () => mediaQueryLists.forEach(mql => mql.removeListener(handler));
|
||||
},
|
||||
[] // Empty array ensures effect is only run on mount and unmount
|
||||
);
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
export default useMedia;
|
||||
@@ -8,6 +8,7 @@ import {
|
||||
MeasurementTableItem,
|
||||
Overlay,
|
||||
OverlayTrigger,
|
||||
PageToolbar,
|
||||
QuickSwitch,
|
||||
RoundedButtonGroup,
|
||||
SelectTree,
|
||||
@@ -16,6 +17,8 @@ import {
|
||||
StudyList,
|
||||
TableList,
|
||||
TableListItem,
|
||||
TableSearchFilter,
|
||||
TablePagination,
|
||||
ThumbnailEntry,
|
||||
ToolbarSection,
|
||||
Tooltip,
|
||||
@@ -23,6 +26,7 @@ import {
|
||||
UserPreferences,
|
||||
UserPreferencesModal,
|
||||
} from './components';
|
||||
import { useDebounce, useMedia } from './hooks';
|
||||
|
||||
// Elements
|
||||
import {
|
||||
@@ -69,6 +73,7 @@ export {
|
||||
Overlay,
|
||||
OverlayTrigger,
|
||||
PlayClipButton,
|
||||
PageToolbar,
|
||||
QuickSwitch,
|
||||
Range,
|
||||
RoundedButtonGroup,
|
||||
@@ -81,6 +86,8 @@ export {
|
||||
StudyList,
|
||||
TableList,
|
||||
TableListItem,
|
||||
TableSearchFilter,
|
||||
TablePagination,
|
||||
ThumbnailEntry,
|
||||
Toolbar,
|
||||
ToolbarButton,
|
||||
@@ -93,4 +100,7 @@ export {
|
||||
SnackbarProvider,
|
||||
useSnackbarContext,
|
||||
withSnackbar,
|
||||
// Hooks
|
||||
useDebounce,
|
||||
useMedia,
|
||||
};
|
||||
Reference in new issue
Block a user