TrizTech/ohif-viewer
17
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): move to React 18 and base for using shadcn/ui (#4174)

Browse Source 
Co-authored-by: IbrahimCSAE <ibrahim.mdev@gmail.com>
This commit is contained in:
AlirezaandIbrahimCSAE authored and GitHub committed 2024-05-27 14:30:25 -04:00
1 parent 72b63dcd6a
commit 70f2c797f4
153 files changed
+2973 -2043
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

platform/ui/package.json
+4 -4
View File
@@ -29,8 +29,8 @@
"build-storybook": "storybook build"
},
"peerDependencies": {
"react": "17.0.2",
"react-dom": "17.0.2"
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"dependencies": {
"@testing-library/react-hooks": "^3.2.1",
@@ -46,11 +46,11 @@
"lodash.debounce": "4.0.8",
"moment": "2.29.4",
"mousetrap": "^1.6.5",
"react": "^17.0.2",
"react": "^18.3.1",
"react-dates": "^21.8.0",
"react-dnd": "14.0.2",
"react-dnd-html5-backend": "14.0.0",
"react-dom": "^17.0.2",
"react-dom": "^18.3.1",
"react-draggable": "4.4.3",
"react-error-boundary": "^3.1.3",
"react-modal": "3.11.2",
platform/ui/src/components/ActionButtons/ActionButtons.tsx
+1 -5
View File
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { Button, ButtonEnums } from '../../components';
function ActionButtons({ actions, disabled, t }) {
function ActionButtons({ actions, disabled = false, t }) {
return (
<React.Fragment>
{actions.map((action, index) => (
@@ -33,8 +33,4 @@ ActionButtons.propTypes = {
disabled: PropTypes.bool,
};
ActionButtons.defaultProps = {
disabled: false,
};
export default ActionButtons;
platform/ui/src/components/Button/Button.tsx
+2 -10
View File
@@ -58,7 +58,7 @@ const defaults = {
};
const Button = ({
children,
children = '',
size = defaults.size,
disabled = defaults.disabled,
type = defaults.type,
@@ -66,7 +66,7 @@ const Button = ({
endIcon: endIconProp,
name,
className,
onClick,
onClick = () => {},
dataCY,
startIconTooltip = null,
endIconTooltip = null,
@@ -121,14 +121,6 @@ const Button = ({
);
};
Button.defaultProps = {
disabled: false,
children: '',
onClick: () => {},
type: defaults.type,
size: defaults.size,
};
Button.propTypes = {
/** What is inside the button, can be text or react component */
children: PropTypes.node,
platform/ui/src/components/CinePlayer/CinePlayer.tsx
+8 -23
View File
@@ -31,15 +31,15 @@ const fpsButtonClassNames =
const CinePlayer: React.FC<CinePlayerProps> = ({
className,
isPlaying,
minFrameRate,
maxFrameRate,
stepFrameRate,
frameRate: defaultFrameRate,
isPlaying = false,
minFrameRate = 1,
maxFrameRate = 90,
stepFrameRate = 1,
frameRate: defaultFrameRate = 24,
onFrameRateChange = () => {},
onPlayPauseChange = () => {},
onClose = () => {},
dynamicInfo = {},
onFrameRateChange,
onPlayPauseChange,
onClose,
updateDynamicInfo,
}) => {
const isDynamic = !!dynamicInfo?.numTimePoints;
@@ -163,21 +163,6 @@ const CinePlayer: React.FC<CinePlayerProps> = ({
);
};
const noop = () => {};
CinePlayer.defaultProps = {
isPlaying: false,
minFrameRate: 1,
maxFrameRate: 90,
stepFrameRate: 1,
frameRate: 24,
onPlayPauseChange: noop,
onFrameRateChange: noop,
onClose: noop,
isDynamic: false,
dynamicInfo: {},
};
CinePlayer.propTypes = {
/** Minimum value for range slider */
minFrameRate: PropTypes.number,
platform/ui/src/components/DateRange/DateRange.tsx
+1 -7
View File
@@ -29,7 +29,7 @@ const renderYearsOptions = () => {
};
const DateRange = props => {
const { id, onChange, startDate, endDate } = props;
const { id = '', onChange, startDate = null, endDate = null } = props;
const [focusedInput, setFocusedInput] = useState(null);
const renderYearsOptionsCallback = useCallback(renderYearsOptions, []);
const { t } = useTranslation('DatePicker');
@@ -165,12 +165,6 @@ const DateRange = props => {
);
};
DateRange.defaultProps = {
id: '',
startDate: null,
endDate: null,
};
DateRange.propTypes = {
id: PropTypes.string,
/** YYYYMMDD (19921022) */
platform/ui/src/components/Dialog/Dialog.tsx
+5 -11
View File
@@ -15,10 +15,10 @@ const Dialog = ({
actions,
onShow,
onSubmit,
header: HeaderComponent,
body: BodyComponent,
footer: FooterComponent,
value: defaultValue,
header: HeaderComponent = Header,
body: BodyComponent = Body,
footer: FooterComponent = Footer,
value: defaultValue = {},
}) => {
const [value, setValue] = useState(defaultValue);
@@ -78,13 +78,7 @@ Dialog.propTypes = {
type: PropTypes.oneOf(['primary', 'secondary', 'cancel']).isRequired,
})
).isRequired,
};
Dialog.defaultProps = {
header: Header,
footer: Footer,
body: Body,
value: {},
onShow: PropTypes.func,
};
export default Dialog;
platform/ui/src/components/Dialog/Footer.tsx
+1 -6
View File
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import Button, { ButtonEnums } from '../Button';
const Footer = ({ actions, className, onSubmit, value }) => {
const Footer = ({ actions = [], className, onSubmit = () => {}, value }) => {
const flex = 'flex items-center justify-end';
const padding = 'pt-[20px]';
@@ -47,9 +47,4 @@ Footer.propTypes = {
).isRequired,
};
Footer.defaultProps = {
onSubmit: noop,
actions: [],
};
export default Footer;
platform/ui/src/components/Dialog/Header.tsx
+1 -5
View File
@@ -20,7 +20,7 @@ CloseButton.propTypes = {
onClick: PropTypes.func,
};
const Header = ({ title, noCloseButton, onClose }) => {
const Header = ({ title, noCloseButton = false, onClose }) => {
const theme = 'bg-primary-dark';
const flex = 'flex items-center justify-between';
const padding = 'pb-[20px]';
@@ -46,8 +46,4 @@ Header.propTypes = {
onClose: PropTypes.func,
};
Header.defaultProps = {
noCloseButton: false,
};
export default Header;
platform/ui/src/components/Dropdown/Dropdown.tsx
+3 -8
View File
@@ -11,15 +11,15 @@ const borderStyle = 'border-b last:border-b-0 border-secondary-main';
const Dropdown = ({
id,
children,
showDropdownIcon,
showDropdownIcon = true,
list,
itemsClassName,
titleClassName,
showBorders,
showBorders = true,
alignment,
// By default the max characters per line is the longest title
// if you wish to override this, you can pass in a number
maxCharactersPerLine,
maxCharactersPerLine = 20,
}) => {
const [open, setOpen] = useState(false);
const elementRef = useRef(null);
@@ -199,11 +199,6 @@ const Dropdown = ({
</div>
);
};
Dropdown.defaultProps = {
showDropdownIcon: true,
maxCharactersPerLine: 20,
showBorders: true,
};
Dropdown.propTypes = {
id: PropTypes.string,
platform/ui/src/components/EmptyStudies/EmptyStudies.tsx
+1 -5
View File
@@ -7,7 +7,7 @@ import Icon from '../Icon';
import Typography from '../Typography';
// TODO: Add loading spinner to OHIF + use it here.
const EmptyStudies = ({ className }) => {
const EmptyStudies = ({ className = '' }) => {
const { t } = useTranslation('StudyList');
return (
<div className={classnames('inline-flex flex-col items-center', className)}>
@@ -25,10 +25,6 @@ const EmptyStudies = ({ className }) => {
);
};
EmptyStudies.defaultProps = {
className: '',
};
EmptyStudies.propTypes = {
className: PropTypes.string,
};
platform/ui/src/components/ErrorBoundary/ErrorBoundary.tsx
+6 -20
View File
@@ -10,7 +10,7 @@ import IconButton from '../IconButton';
const isProduction = process.env.NODE_ENV === 'production';
const DefaultFallback = ({ error, context, resetErrorBoundary, fallbackRoute }) => {
const DefaultFallback = ({ error, context, resetErrorBoundary = () => {}, fallbackRoute }) => {
const { t } = useTranslation('ErrorBoundary');
const [showDetails, setShowDetails] = useState(false);
const title = `${t('Something went wrong')}${!isProduction && ` ${t('in')} ${context}`}.`;
@@ -57,25 +57,19 @@ const DefaultFallback = ({ error, context, resetErrorBoundary, fallbackRoute })
);
};
const noop = () => {};
DefaultFallback.propTypes = {
error: PropTypes.object.isRequired,
resetErrorBoundary: PropTypes.func,
componentStack: PropTypes.string,
};
DefaultFallback.defaultProps = {
resetErrorBoundary: noop,
};
const ErrorBoundary = ({
context,
onReset,
onError,
fallbackComponent: FallbackComponent,
context = 'OHIF',
onReset = () => {},
onError = () => {},
fallbackComponent: FallbackComponent = DefaultFallback,
children,
fallbackRoute,
fallbackRoute = null,
isPage,
}) => {
const [isOpen, setIsOpen] = useState(true);
@@ -132,12 +126,4 @@ ErrorBoundary.propTypes = {
fallbackRoute: PropTypes.string,
};
ErrorBoundary.defaultProps = {
context: 'OHIF',
onReset: noop,
onError: noop,
fallbackComponent: DefaultFallback,
fallbackRoute: null,
};
export default ErrorBoundary;
platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.tsx
+7 -16
View File
@@ -8,14 +8,14 @@ import Icon from '../Icon';
import './ExpandableToolbarButton.css';
const ExpandableToolbarButton = ({
type,
id,
isActive,
onClick,
icon,
type = 'primary',
id = '',
isActive = false,
onClick = () => {},
icon = 'clipboard',
className,
content: Content,
contentProps,
content: Content = null,
contentProps = {},
}) => {
const classes = {
type: {
@@ -71,15 +71,6 @@ const ExpandableToolbarButton = ({
const noop = () => {};
ExpandableToolbarButton.defaultProps = {
id: '',
icon: 'clipboard',
isActive: false,
type: 'primary',
content: null,
onClick: noop,
};
ExpandableToolbarButton.propTypes = {
/* Influences background/hover styling */
type: PropTypes.oneOf(['primary', 'secondary']),
platform/ui/src/components/Header/Header.tsx
+2 -7
View File
@@ -14,9 +14,9 @@ import { PatientInfoVisibility } from '../../types/PatientInfoVisibility';
function Header({
children,
menuOptions,
isReturnEnabled,
isReturnEnabled = true,
onClickReturnButton,
isSticky,
isSticky = false,
WhiteLabeling,
showPatientInfo = PatientInfoVisibility.VISIBLE_COLLAPSED,
servicesManager,
@@ -113,9 +113,4 @@ Header.propTypes = {
servicesManager: PropTypes.object,
};
Header.defaultProps = {
isReturnEnabled: true,
isSticky: false,
};
export default Header;
platform/ui/src/components/HotkeyField/HotkeyField.tsx
+1 -5
View File
@@ -15,7 +15,7 @@ import { getKeys, formatKeysForInput } from './utils';
* @param {string} props.className input classes
* @param {Array[]} props.modifierKeys
*/
const HotkeyField = ({ disabled, keys, onChange, className, modifierKeys, hotkeys }) => {
const HotkeyField = ({ disabled = false, keys, onChange, className, modifierKeys, hotkeys }) => {
const inputValue = formatKeysForInput(keys);
const onInputKeyDown = event => {
@@ -58,8 +58,4 @@ HotkeyField.propTypes = {
}).isRequired,
};
HotkeyField.defaultProps = {
disabled: false,
};
export default HotkeyField;
platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.tsx
+2 -9
View File
@@ -11,10 +11,10 @@ import { MODIFIER_KEYS } from './hotkeysConfig';
import { validate, splitHotkeyDefinitionsAndCreateTuples } from './utils';
const HotkeysPreferences = ({
disabled,
disabled = false,
hotkeyDefinitions,
errors: controlledErrors,
onChange,
onChange = () => {},
hotkeysModule,
}) => {
const { t } = useTranslation('UserPreferencesModal');
@@ -127,8 +127,6 @@ const HotkeysPreferences = ({
);
};
const noop = () => {};
HotkeysPreferences.propTypes = {
onChange: PropTypes.func,
disabled: PropTypes.bool,
@@ -142,9 +140,4 @@ HotkeysPreferences.propTypes = {
}).isRequired,
};
HotkeysPreferences.defaultProps = {
onChange: noop,
disabled: false,
};
export default HotkeysPreferences;
platform/ui/src/components/Icon/getIcon.js
+173 -194
View File
@@ -1,179 +1,179 @@
import React from 'react';
// Icons
import arrowDown from './../../assets/icons/arrow-down.svg';
import arrowLeft from './../../assets/icons/arrow-left.svg';
import arrowRight from './../../assets/icons/arrow-right.svg';
import arrowLeftSmall from './../../assets/icons/arrow-left-small.svg';
import arrowRightSmall from './../../assets/icons/arrow-right-small.svg';
import calendar from './../../assets/icons/calendar.svg';
import cancel from './../../assets/icons/cancel.svg';
import clipboard from './../../assets/icons/clipboard.svg';
import close from './../../assets/icons/closeIcon.svg';
import dottedCircle from './../../assets/icons/dotted-circle.svg';
import circledCheckmark from './../../assets/icons/circled-checkmark.svg';
import chevronDown from './../../assets/icons/chevron-down.svg';
import chevronLeft from './../../assets/icons/chevron-left.svg';
import chevronMenu from './../../assets/icons/chevron-menu.svg';
import chevronNext from './../../assets/icons/chevron-next.svg';
import chevronPrev from './../../assets/icons/chevron-prev.svg';
import chevronRight from './../../assets/icons/chevron-right.svg';
import contentNext from './../../assets/icons/content-next.svg';
import contentPrev from './../../assets/icons/content-prev.svg';
import eyeVisible from './../../assets/icons/eye-visible.svg';
import eyeHidden from './../../assets/icons/eye-hidden.svg';
import exclamation from './../../assets/icons/exclamation.svg';
import externalLink from './../../assets/icons/external-link.svg';
import groupLayers from './../../assets/icons/group-layers.svg';
import info from './../../assets/icons/info.svg';
import infoAction from './../../assets/icons/info-action.svg';
import infoLink from './../../assets/icons/info-link.svg';
import launchArrow from './../../assets/icons/launch-arrow.svg';
import launchInfo from './../../assets/icons/launch-info.svg';
import link from './../../assets/icons/tool-stack-image-sync.svg';
import listBullets from './../../assets/icons/list-bullets.svg';
import lock from './../../assets/icons/lock.svg';
import logoOhifSmall from './../../assets/icons/logo-ohif-small.svg';
import logoDarkBackGround from './../../assets/icons/ohif-logo-color-darkbg.svg';
import magnifier from './../../assets/icons/magnifier.svg';
import notificationwarningDiamond from './../../assets/icons/notificationwarning-diamond.svg';
import pencil from './../../assets/icons/pencil.svg';
import powerOff from './../../assets/icons/power-off.svg';
import profile from './../../assets/icons/profile.svg';
import pushLeft from './../../assets/icons/push-left.svg';
import pushRight from './../../assets/icons/push-right.svg';
import settings from './../../assets/icons/settings.svg';
import sidePanelCloseLeft from './../../assets/icons/side-panel-close-left.svg';
import sidePanelCloseRight from './../../assets/icons/side-panel-close-right.svg';
import sorting from './../../assets/icons/sorting.svg';
import sortingActiveDown from './../../assets/icons/sorting-active-down.svg';
import sortingActiveUp from './../../assets/icons/sorting-active-up.svg';
import statusAlertWarning from './../../assets/icons/status-alert-warning.svg';
import statusAlert from './../../assets/icons/status-alert.svg';
import statusLocked from './../../assets/icons/status-locked.svg';
import statusTracked from './../../assets/icons/status-tracked.svg';
import statusUntracked from './../../assets/icons/status-untracked.svg';
import tracked from './../../assets/icons/tracked.svg';
import unlink from './../../assets/icons/unlink.svg';
import checkboxChecked from './../../assets/icons/checkbox-checked.svg';
import checkboxUnchecked from './../../assets/icons/checkbox-unchecked.svg';
import iconAlertOutline from './../../assets/icons/icons-alert-outline.svg';
import iconAlertSmall from './../../assets/icons/icon-alert-small.svg';
import iconClose from './../../assets/icons/icon-close.svg';
import iconClearField from './../../assets/icons/icon-clear-field.svg';
import iconNextInactive from './../../assets/icons/icon-next-inactive.svg';
import iconNext from './../../assets/icons/icon-next.svg';
import iconPlay from './../../assets/icons/icon-play.svg';
import iconPause from './../../assets/icons/icon-pause.svg';
import iconPrevInactive from './../../assets/icons/icon-prev-inactive.svg';
import iconPrev from './../../assets/icons/icon-prev.svg';
import iconSearch from './../../assets/icons/icon-search.svg';
import iconStatusAlert from './../../assets/icons/icon-status-alert.svg';
import iconTransferring from './../../assets/icons/icon-transferring.svg';
import iconUpload from './../../assets/icons/icon-upload.svg';
import navigationPanelRightHide from './../../assets/icons/navigation-panel-right-hide.svg';
import navigationPanelRightReveal from './../../assets/icons/navigation-panel-right-reveal.svg';
import tabLinear from './../../assets/icons/tab-linear.svg';
import tabPatientInfo from './../../assets/icons/tab-patient-info.svg';
import tabROIThreshold from './../../assets/icons/tab-roi-threshold.svg';
import tabSegmentation from './../../assets/icons/tab-segmentation.svg';
import tabStudies from './../../assets/icons/tab-studies.svg';
import uiArrowDown from './../../assets/icons/ui-arrow-down.svg';
import uiArrowUp from './../../assets/icons/ui-arrow-up.svg';
import uiArrowLeft from './../../assets/icons/ui-arrow-left.svg';
import uiArrowRight from './../../assets/icons/ui-arrow-right.svg';
import loadingOHIFMark from './../../assets/icons/loading-ohif-mark.svg';
import notificationsInfo from './../../assets/icons/notifications-info.svg';
import notificationsWarning from './../../assets/icons/notifications-warning.svg';
import notificationsError from './../../assets/icons/notifications-error.svg';
import notificationsSuccess from './../../assets/icons/notifications-success.svg';
import nextArrow from './../../assets/icons/next-arrow.svg';
import prevArrow from './../../assets/icons/prev-arrow.svg';
import viewportStatusTracked from './../../assets/icons/viewport-status-tracked.svg';
import { ReactComponent as arrowDown } from './../../assets/icons/arrow-down.svg';
import { ReactComponent as arrowLeft } from './../../assets/icons/arrow-left.svg';
import { ReactComponent as arrowRight } from './../../assets/icons/arrow-right.svg';
import { ReactComponent as arrowLeftSmall } from './../../assets/icons/arrow-left-small.svg';
import { ReactComponent as arrowRightSmall } from './../../assets/icons/arrow-right-small.svg';
import { ReactComponent as calendar } from './../../assets/icons/calendar.svg';
import { ReactComponent as cancel } from './../../assets/icons/cancel.svg';
import { ReactComponent as clipboard } from './../../assets/icons/clipboard.svg';
import { ReactComponent as close } from './../../assets/icons/closeIcon.svg';
import { ReactComponent as dottedCircle } from './../../assets/icons/dotted-circle.svg';
import { ReactComponent as circledCheckmark } from './../../assets/icons/circled-checkmark.svg';
import { ReactComponent as chevronDown } from './../../assets/icons/chevron-down.svg';
import { ReactComponent as chevronLeft } from './../../assets/icons/chevron-left.svg';
import { ReactComponent as chevronMenu } from './../../assets/icons/chevron-menu.svg';
import { ReactComponent as chevronNext } from './../../assets/icons/chevron-next.svg';
import { ReactComponent as chevronPrev } from './../../assets/icons/chevron-prev.svg';
import { ReactComponent as chevronRight } from './../../assets/icons/chevron-right.svg';
import { ReactComponent as contentNext } from './../../assets/icons/content-next.svg';
import { ReactComponent as contentPrev } from './../../assets/icons/content-prev.svg';
import { ReactComponent as eyeVisible } from './../../assets/icons/eye-visible.svg';
import { ReactComponent as eyeHidden } from './../../assets/icons/eye-hidden.svg';
import { ReactComponent as exclamation } from './../../assets/icons/exclamation.svg';
import { ReactComponent as externalLink } from './../../assets/icons/external-link.svg';
import { ReactComponent as groupLayers } from './../../assets/icons/group-layers.svg';
import { ReactComponent as info } from './../../assets/icons/info.svg';
import { ReactComponent as infoAction } from './../../assets/icons/info-action.svg';
import { ReactComponent as infoLink } from './../../assets/icons/info-link.svg';
import { ReactComponent as launchArrow } from './../../assets/icons/launch-arrow.svg';
import { ReactComponent as launchInfo } from './../../assets/icons/launch-info.svg';
import { ReactComponent as link } from './../../assets/icons/tool-stack-image-sync.svg';
import { ReactComponent as listBullets } from './../../assets/icons/list-bullets.svg';
import { ReactComponent as lock } from './../../assets/icons/lock.svg';
import { ReactComponent as logoOhifSmall } from './../../assets/icons/logo-ohif-small.svg';
import { ReactComponent as logoDarkBackGround } from './../../assets/icons/ohif-logo-color-darkbg.svg';
import { ReactComponent as magnifier } from './../../assets/icons/magnifier.svg';
import { ReactComponent as notificationwarningDiamond } from './../../assets/icons/notificationwarning-diamond.svg';
import { ReactComponent as pencil } from './../../assets/icons/pencil.svg';
import { ReactComponent as powerOff } from './../../assets/icons/power-off.svg';
import { ReactComponent as profile } from './../../assets/icons/profile.svg';
import { ReactComponent as pushLeft } from './../../assets/icons/push-left.svg';
import { ReactComponent as pushRight } from './../../assets/icons/push-right.svg';
import { ReactComponent as settings } from './../../assets/icons/settings.svg';
import { ReactComponent as sidePanelCloseLeft } from './../../assets/icons/side-panel-close-left.svg';
import { ReactComponent as sidePanelCloseRight } from './../../assets/icons/side-panel-close-right.svg';
import { ReactComponent as sorting } from './../../assets/icons/sorting.svg';
import { ReactComponent as sortingActiveDown } from './../../assets/icons/sorting-active-down.svg';
import { ReactComponent as sortingActiveUp } from './../../assets/icons/sorting-active-up.svg';
import { ReactComponent as statusAlertWarning } from './../../assets/icons/status-alert-warning.svg';
import { ReactComponent as statusAlert } from './../../assets/icons/status-alert.svg';
import { ReactComponent as statusLocked } from './../../assets/icons/status-locked.svg';
import { ReactComponent as statusTracked } from './../../assets/icons/status-tracked.svg';
import { ReactComponent as statusUntracked } from './../../assets/icons/status-untracked.svg';
import { ReactComponent as tracked } from './../../assets/icons/tracked.svg';
import { ReactComponent as unlink } from './../../assets/icons/unlink.svg';
import { ReactComponent as checkboxChecked } from './../../assets/icons/checkbox-checked.svg';
import { ReactComponent as checkboxUnchecked } from './../../assets/icons/checkbox-unchecked.svg';
import { ReactComponent as iconAlertOutline } from './../../assets/icons/icons-alert-outline.svg';
import { ReactComponent as iconAlertSmall } from './../../assets/icons/icon-alert-small.svg';
import { ReactComponent as iconClose } from './../../assets/icons/icon-close.svg';
import { ReactComponent as iconClearField } from './../../assets/icons/icon-clear-field.svg';
import { ReactComponent as iconNextInactive } from './../../assets/icons/icon-next-inactive.svg';
import { ReactComponent as iconNext } from './../../assets/icons/icon-next.svg';
import { ReactComponent as iconPlay } from './../../assets/icons/icon-play.svg';
import { ReactComponent as iconPause } from './../../assets/icons/icon-pause.svg';
import { ReactComponent as iconPrevInactive } from './../../assets/icons/icon-prev-inactive.svg';
import { ReactComponent as iconPrev } from './../../assets/icons/icon-prev.svg';
import { ReactComponent as iconSearch } from './../../assets/icons/icon-search.svg';
import { ReactComponent as iconStatusAlert } from './../../assets/icons/icon-status-alert.svg';
import { ReactComponent as iconTransferring } from './../../assets/icons/icon-transferring.svg';
import { ReactComponent as iconUpload } from './../../assets/icons/icon-upload.svg';
import { ReactComponent as navigationPanelRightHide } from './../../assets/icons/navigation-panel-right-hide.svg';
import { ReactComponent as navigationPanelRightReveal } from './../../assets/icons/navigation-panel-right-reveal.svg';
import { ReactComponent as tabLinear } from './../../assets/icons/tab-linear.svg';
import { ReactComponent as tabPatientInfo } from './../../assets/icons/tab-patient-info.svg';
import { ReactComponent as tabROIThreshold } from './../../assets/icons/tab-roi-threshold.svg';
import { ReactComponent as tabSegmentation } from './../../assets/icons/tab-segmentation.svg';
import { ReactComponent as tabStudies } from './../../assets/icons/tab-studies.svg';
import { ReactComponent as uiArrowDown } from './../../assets/icons/ui-arrow-down.svg';
import { ReactComponent as uiArrowUp } from './../../assets/icons/ui-arrow-up.svg';
import { ReactComponent as uiArrowLeft } from './../../assets/icons/ui-arrow-left.svg';
import { ReactComponent as uiArrowRight } from './../../assets/icons/ui-arrow-right.svg';
import { ReactComponent as loadingOHIFMark } from './../../assets/icons/loading-ohif-mark.svg';
import { ReactComponent as notificationsInfo } from './../../assets/icons/notifications-info.svg';
import { ReactComponent as notificationsWarning } from './../../assets/icons/notifications-warning.svg';
import { ReactComponent as notificationsError } from './../../assets/icons/notifications-error.svg';
import { ReactComponent as notificationsSuccess } from './../../assets/icons/notifications-success.svg';
import { ReactComponent as nextArrow } from './../../assets/icons/next-arrow.svg';
import { ReactComponent as prevArrow } from './../../assets/icons/prev-arrow.svg';
import { ReactComponent as viewportStatusTracked } from './../../assets/icons/viewport-status-tracked.svg';
import { ReactComponent as toggleDicomOverlay } from './../../assets/icons/tool-toggle-dicom-overlay.svg';
import { ReactComponent as toolZoom } from './../../assets/icons/tool-zoom.svg';
import { ReactComponent as toolCapture } from './../../assets/icons/tool-capture.svg';
import { ReactComponent as toolLayout } from './../../assets/icons/tool-layout-default.svg';
import { ReactComponent as toolMore } from './../../assets/icons/tool-more-menu.svg';
import { ReactComponent as toolMove } from './../../assets/icons/tool-move.svg';
import { ReactComponent as toolWindow } from './../../assets/icons/tool-window-level.svg';
import { ReactComponent as toolAnnotate } from './../../assets/icons/tool-annotate.svg';
import { ReactComponent as toolBidirectional } from './../../assets/icons/tool-bidirectional.svg';
import { ReactComponent as toolElipse } from './../../assets/icons/tool-measure-elipse.svg';
import { ReactComponent as toolCircle } from './../../assets/icons/tool-circle.svg';
import { ReactComponent as toolLength } from './../../assets/icons/tool-length.svg';
import { ReactComponent as toolStackScroll } from './../../assets/icons/tool-stack-scroll.svg';
import { ReactComponent as toolMagnify } from './../../assets/icons/tool-quick-magnify.svg';
import { ReactComponent as toolFlipHorizontal } from './../../assets/icons/tool-flip-horizontal.svg';
import { ReactComponent as toolInvert } from './../../assets/icons/tool-invert.svg';
import { ReactComponent as toolRotateRight } from './../../assets/icons/tool-rotate-right.svg';
import { ReactComponent as toolCine } from './../../assets/icons/tool-cine.svg';
import { ReactComponent as toolCrosshair } from './../../assets/icons/tool-crosshair.svg';
import { ReactComponent as toolProbe } from './../../assets/icons/focus-frame-target.svg';
import { ReactComponent as toolAngle } from './../../assets/icons/tool-angle.svg';
import { ReactComponent as toolReset } from './../../assets/icons/tool-reset.svg';
import { ReactComponent as toolRectangle } from './../../assets/icons/tool-rectangle.svg';
import { ReactComponent as toolFusionColor } from './../../assets/icons/tool-fusion-color.svg';
import { ReactComponent as toolCreateThreshold } from './../../assets/icons/tool-create-threshold.svg';
import { ReactComponent as toolCalibration } from './../../assets/icons/tool-calibrate.svg';
import { ReactComponent as toolFreehand } from './../../assets/icons/tool-freehand.svg';
import { ReactComponent as toolFreehandPolygon } from './../../assets/icons/tool-freehand-polygon.svg';
import { ReactComponent as toolPolygon } from './../../assets/icons/tool-polygon.svg';
import { ReactComponent as editPatient } from './../../assets/icons/edit-patient.svg';
import { ReactComponent as panelGroupMore } from './../../assets/icons/panel-group-more.svg';
import { ReactComponent as panelGroupOpenClose } from './../../assets/icons/panel-group-open-close.svg';
import { ReactComponent as rowAdd } from './../../assets/icons/row-add.svg';
import { ReactComponent as rowEdit } from './../../assets/icons/row-edit.svg';
import { ReactComponent as rowHidden } from './../../assets/icons/row-hidden.svg';
import { ReactComponent as rowShown } from './../../assets/icons/row-shown.svg';
import { ReactComponent as rowLock } from './../../assets/icons/row-lock.svg';
import { ReactComponent as rowUnlock } from './../../assets/icons/row-unlock.svg';
import { ReactComponent as iconMPR } from './../../assets/icons/icon-mpr-alt.svg';
import { ReactComponent as checkboxDefault } from './../../assets/icons/checkbox-default.svg';
import { ReactComponent as checkboxActive } from './../../assets/icons/checkbox-active.svg';
import { ReactComponent as referenceLines } from './../../assets/icons/tool-reference-lines.svg';
import { ReactComponent as chevronDownNew } from './../../assets/icons/icon-disclosure-close.svg';
import { ReactComponent as chevronLeftNew } from './../../assets/icons/icon-disclosure-open.svg';
import { ReactComponent as settingsBars } from './../../assets/icons/icon-display-settings.svg';
import { ReactComponent as iconAdd } from './../../assets/icons/icon-add.svg';
import { ReactComponent as iconRename } from './../../assets/icons/icon-rename.svg';
import { ReactComponent as iconDelete } from './../../assets/icons/icon-delete.svg';
import { ReactComponent as iconMoreMenu } from './../../assets/icons/icon-more-menu.svg';
import { ReactComponent as iconToolBrush } from './../../assets/icons/tool-seg-brush.svg';
import { ReactComponent as iconToolEraser } from './../../assets/icons/tool-seg-eraser.svg';
import { ReactComponent as iconToolScissor } from './../../assets/icons/icon-tool-scissor.svg';
import { ReactComponent as iconToolShape } from './../../assets/icons/tool-seg-shape.svg';
import { ReactComponent as iconToolThreshold } from './../../assets/icons/tool-seg-threshold.svg';
import { ReactComponent as viewportWindowLevel } from './../../assets/icons/viewport-window-level.svg';
import { ReactComponent as dicomTagBrowser } from './../../assets/icons/tool-dicom-tag-browser.svg';
import { ReactComponent as iconToolFreehandRoi } from './../../assets/icons/tool-freehand-roi.svg';
import { ReactComponent as iconToolLivewire } from './../../assets/icons/tool-magnetic-roi.svg';
import { ReactComponent as iconToolSplineRoi } from './../../assets/icons/tool-spline-roi.svg';
import { ReactComponent as iconToolUltrasoundBidirectional } from './../../assets/icons/tool-ultrasound-bidirectional.svg';
import { ReactComponent as iconToolLoupe } from './../../assets/icons/tool-magnify.svg';
import { ReactComponent as oldTrash } from './../../assets/icons/old-trash.svg';
import { ReactComponent as oldPlay } from './../../assets/icons/old-play.svg';
import { ReactComponent as oldStop } from './../../assets/icons/old-stop.svg';
import { ReactComponent as iconColorLUT } from './../../assets/icons/icon-color-lut.svg';
import { ReactComponent as iconChevronPatient } from './../../assets/icons/icon-chevron-patient.svg';
import { ReactComponent as iconPatient } from './../../assets/icons/icon-patient.svg';
import { ReactComponent as iconSettings } from './../../assets/icons/icon-settings.svg';
import { ReactComponent as iconToolbarBack } from './../../assets/icons/icon-toolbar-back.svg';
import { ReactComponent as iconMultiplePatients } from './../../assets/icons/icon-multiple-patients.svg';
import { ReactComponent as layoutAdvanced3DFourUp } from './../../assets/icons/layout-advanced-3d-four-up.svg';
import { ReactComponent as layoutAdvanced3DMain } from './../../assets/icons/layout-advanced-3d-main.svg';
import { ReactComponent as layoutAdvanced3DOnly } from './../../assets/icons/layout-advanced-3d-only.svg';
import { ReactComponent as layoutAdvanced3DPrimary } from './../../assets/icons/layout-advanced-3d-primary.svg';
import { ReactComponent as layoutAdvancedAxialPrimary } from './../../assets/icons/layout-advanced-axial-primary.svg';
import { ReactComponent as layoutAdvancedMPR } from './../../assets/icons/layout-advanced-mpr.svg';
import { ReactComponent as layoutCommon1x1 } from './../../assets/icons/layout-common-1x1.svg';
import { ReactComponent as layoutCommon1x2 } from './../../assets/icons/layout-common-1x2.svg';
import { ReactComponent as layoutCommon2x2 } from './../../assets/icons/layout-common-2x2.svg';
import { ReactComponent as layoutCommon2x3 } from './../../assets/icons/layout-common-2x3.svg';
import { ReactComponent as iconToolRotate } from './../../assets/icons/tool-3d-rotate.svg';
import { ReactComponent as tab4D } from './../../assets/icons/tab-4d.svg';
import { ReactComponent as investigationalUse } from './../../assets/icons/illustration-investigational-use.svg';
import { ReactComponent as actionNewDialog } from './../../assets/icons/action-new-dialog.svg';
/** Tools */
import toggleDicomOverlay from './../../assets/icons/tool-toggle-dicom-overlay.svg';
import toolZoom from './../../assets/icons/tool-zoom.svg';
import toolCapture from './../../assets/icons/tool-capture.svg';
import toolLayout from './../../assets/icons/tool-layout-default.svg';
import toolMore from './../../assets/icons/tool-more-menu.svg';
import toolMove from './../../assets/icons/tool-move.svg';
import toolWindow from './../../assets/icons/tool-window-level.svg';
import toolAnnotate from './../../assets/icons/tool-annotate.svg';
import toolBidirectional from './../../assets/icons/tool-bidirectional.svg';
import toolElipse from './../../assets/icons/tool-measure-elipse.svg';
import toolCircle from './../../assets/icons/tool-circle.svg';
import toolLength from './../../assets/icons/tool-length.svg';
import toolStackScroll from './../../assets/icons/tool-stack-scroll.svg';
import toolMagnify from './../../assets/icons/tool-quick-magnify.svg';
import toolFlipHorizontal from './../../assets/icons/tool-flip-horizontal.svg';
import toolInvert from './../../assets/icons/tool-invert.svg';
import toolRotateRight from './../../assets/icons/tool-rotate-right.svg';
import toolCine from './../../assets/icons/tool-cine.svg';
import toolCrosshair from './../../assets/icons/tool-crosshair.svg';
import toolProbe from './../../assets/icons/focus-frame-target.svg';
import toolAngle from './../../assets/icons/tool-angle.svg';
import toolReset from './../../assets/icons/tool-reset.svg';
import toolRectangle from './../../assets/icons/tool-rectangle.svg';
import toolFusionColor from './../../assets/icons/tool-fusion-color.svg';
import toolCreateThreshold from './../../assets/icons/tool-create-threshold.svg';
import toolCalibration from './../../assets/icons/tool-calibrate.svg';
import toolFreehand from './../../assets/icons/tool-freehand.svg';
import toolFreehandPolygon from './../../assets/icons/tool-freehand-polygon.svg';
import toolPolygon from './../../assets/icons/tool-polygon.svg';
import toolBrush from './../../assets/icons/tool-brush.svg';
import toolEraser from './../../assets/icons/tool-eraser.svg';
import toolScissorRect from './../../assets/icons/tool-scissor-rect.svg';
import toolScissorCircle from './../../assets/icons/tool-scissor-circle.svg';
import toolPaintFill from './../../assets/icons/tool-paint-fill.svg';
import editPatient from './../../assets/icons/edit-patient.svg';
import panelGroupMore from './../../assets/icons/panel-group-more.svg';
import panelGroupOpenClose from './../../assets/icons/panel-group-open-close.svg';
import rowAdd from './../../assets/icons/row-add.svg';
import rowEdit from './../../assets/icons/row-edit.svg';
import rowHidden from './../../assets/icons/row-hidden.svg';
import rowShown from './../../assets/icons/row-shown.svg';
import rowLock from './../../assets/icons/row-lock.svg';
import rowUnlock from './../../assets/icons/row-unlock.svg';
import iconMPR from './../../assets/icons/icon-mpr-alt.svg';
import checkboxDefault from './../../assets/icons/checkbox-default.svg';
import checkboxActive from './../../assets/icons/checkbox-active.svg';
import referenceLines from './../../assets/icons/tool-reference-lines.svg';
import chevronDownNew from './../../assets/icons/icon-disclosure-close.svg';
import chevronLeftNew from './../../assets/icons/icon-disclosure-open.svg';
import settingsBars from './../../assets/icons/icon-display-settings.svg';
import iconAdd from './../../assets/icons/icon-add.svg';
import iconRename from './../../assets/icons/icon-rename.svg';
import iconDelete from './../../assets/icons/icon-delete.svg';
import iconMoreMenu from './../../assets/icons/icon-more-menu.svg';
import iconToolBrush from './../../assets/icons/tool-seg-brush.svg';
import iconToolEraser from './../../assets/icons/tool-seg-eraser.svg';
import iconToolScissor from './../../assets/icons/icon-tool-scissor.svg';
import iconToolShape from './../../assets/icons/tool-seg-shape.svg';
import iconToolThreshold from './../../assets/icons/tool-seg-threshold.svg';
import viewportWindowLevel from './../../assets/icons/viewport-window-level.svg';
import dicomTagBrowser from './../../assets/icons/tool-dicom-tag-browser.svg';
import iconToolFreehandRoi from './../../assets/icons/tool-freehand-roi.svg';
import iconToolLivewire from './../../assets/icons/tool-magnetic-roi.svg';
import iconToolSplineRoi from './../../assets/icons/tool-spline-roi.svg';
import iconToolUltrasoundBidirectional from './../../assets/icons/tool-ultrasound-bidirectional.svg';
import iconToolLoupe from './../../assets/icons/tool-magnify.svg';
/** Old OHIF */
import oldTrash from './../../assets/icons/old-trash.svg';
import oldPlay from './../../assets/icons/old-play.svg';
import oldStop from './../../assets/icons/old-stop.svg';
/** ColorLut */
import iconColorLUT from './../../assets/icons/icon-color-lut.svg';
/** New Patient Info Toolbar */
import iconChevronPatient from './../../assets/icons/icon-chevron-patient.svg';
import iconPatient from './../../assets/icons/icon-patient.svg';
import iconSettings from './../../assets/icons/icon-settings.svg';
import iconToolbarBack from './../../assets/icons/icon-toolbar-back.svg';
import iconMultiplePatients from './../../assets/icons/icon-multiple-patients.svg';
/** Volume Rendering */
import CTAAA from './../../assets/icons/CT-AAA.png';
import CTAAA2 from './../../assets/icons/CT-AAA2.png';
import CTAir from './../../assets/icons/CT-Air.png';
@@ -201,27 +201,6 @@ import MRDefault from './../../assets/icons/MR-Default.png';
import MRMIP from './../../assets/icons/MR-MIP.png';
import MRT2Brain from './../../assets/icons/MR-T2-Brain.png';
import VolumeRendering from './../../assets/icons/VolumeRendering.png';
import actionNewDialog from './../../assets/icons/action-new-dialog.svg';
/** LAYOUT */
import layoutAdvanced3DFourUp from './../../assets/icons/layout-advanced-3d-four-up.svg';
import layoutAdvanced3DMain from './../../assets/icons/layout-advanced-3d-main.svg';
import layoutAdvanced3DOnly from './../../assets/icons/layout-advanced-3d-only.svg';
import layoutAdvanced3DPrimary from './../../assets/icons/layout-advanced-3d-primary.svg';
import layoutAdvancedAxialPrimary from './../../assets/icons/layout-advanced-axial-primary.svg';
import layoutAdvancedMPR from './../../assets/icons/layout-advanced-mpr.svg';
import layoutCommon1x1 from './../../assets/icons/layout-common-1x1.svg';
import layoutCommon1x2 from './../../assets/icons/layout-common-1x2.svg';
import layoutCommon2x2 from './../../assets/icons/layout-common-2x2.svg';
import layoutCommon2x3 from './../../assets/icons/layout-common-2x3.svg';
import iconToolRotate from './../../assets/icons/tool-3d-rotate.svg';
//
import tab4D from './../../assets/icons/tab-4d.svg';
/** New investigational use */
import investigationalUse from './../../assets/icons/illustration-investigational-use.svg';
const ICONS = {
'arrow-down': arrowDown,
platform/ui/src/components/IconButton/IconButton.tsx
+8 -19
View File
@@ -74,14 +74,14 @@ const fullWidthClasses = {
const IconButton = ({
children,
variant,
color,
size,
rounded,
disabled,
type,
fullWidth,
onClick,
variant = 'contained',
color = 'default',
size = 'medium',
rounded = 'medium',
disabled = false,
type = 'button',
fullWidth = false,
onClick = () => {},
className,
id,
...rest
@@ -122,17 +122,6 @@ const IconButton = ({
);
};
IconButton.defaultProps = {
onClick: () => {},
color: 'default',
disabled: false,
fullWidth: false,
rounded: 'medium',
size: 'medium',
type: 'button',
variant: 'contained',
};
IconButton.propTypes = {
children: PropTypes.node.isRequired,
size: PropTypes.oneOf(['small', 'medium', 'large', 'initial', 'toolbar', 'toolbox']),
platform/ui/src/components/ImageScrollbar/ImageScrollbar.tsx
+3 -5
View File
@@ -20,10 +20,12 @@ class ImageScrollbar extends PureComponent {
width: `${this.props.height}`,
};
const { onContextMenu = e => e.preventDefault() } = this.props;
return (
<div
className="scroll"
onContextMenu={this.props.onContextMenu}
onContextMenu={onContextMenu}
>
<div className="scroll-holder">
<input
@@ -70,8 +72,4 @@ class ImageScrollbar extends PureComponent {
};
}
ImageScrollbar.defaultProps = {
onContextMenu: e => e.preventDefault(),
};
export default ImageScrollbar;
platform/ui/src/components/InputDateRange/InputDateRange.tsx
+7 -12
View File
@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import DateRange from '../DateRange';
import { DatePickerWithRange } from '@ohif/ui-next';
import InputLabelWrapper from '../InputLabelWrapper';
const InputDateRange = ({
@@ -9,8 +9,8 @@ const InputDateRange = ({
label,
isSortable,
sortDirection,
onLabelClick,
value,
onLabelClick = () => {},
value = {},
onChange,
}) => {
const { startDate, endDate } = value;
@@ -26,9 +26,11 @@ const InputDateRange = ({
isSortable={isSortable}
sortDirection={sortDirection}
onLabelClick={onClickHandler}
className="xl:min-w-[284px]"
>
<div className="relative">
<DateRange
<div className="relative xl:max-w-[246px]">
<DatePickerWithRange
className="mt-2"
id={id}
startDate={startDate}
endDate={endDate}
@@ -39,13 +41,6 @@ const InputDateRange = ({
);
};
const noop = () => {};
InputDateRange.defaultProps = {
value: {},
onLabelClick: noop,
};
InputDateRange.propTypes = {
id: PropTypes.string,
label: PropTypes.string.isRequired,
platform/ui/src/components/InputDoubleRange/InputDoubleRange.tsx
+13 -29
View File
@@ -25,20 +25,20 @@ type InputDoubleRangeProps = {
const InputDoubleRange: React.FC<InputDoubleRangeProps> = ({
values,
onChange,
minValue,
maxValue,
step,
unit,
containerClassName,
inputClassName,
labelClassName,
labelVariant,
showLabel,
labelPosition,
trackColor,
allowNumberEdit,
minValue = 0,
maxValue = 100,
step = 1,
unit = '',
containerClassName = '',
inputClassName = '',
labelClassName = '',
labelVariant = 'body1',
showLabel = false,
labelPosition = 'left',
trackColor = 'primary',
allowNumberEdit = false,
allowOutOfRange = false,
showAdjustmentArrows,
showAdjustmentArrows = false,
}) => {
// Set initial thumb positions as percentages
const initialPercentageStart = Math.round(((values[0] - minValue) / (maxValue - minValue)) * 100);
@@ -235,20 +235,4 @@ const InputDoubleRange: React.FC<InputDoubleRangeProps> = ({
);
};
InputDoubleRange.defaultProps = {
minValue: 0,
maxValue: 100,
step: 1,
unit: '',
containerClassName: '',
inputClassName: '',
labelClassName: '',
labelVariant: 'body1',
showLabel: false,
labelPosition: 'left',
trackColor: 'primary',
allowNumberEdit: false,
showAdjustmentArrows: false,
};
export default InputDoubleRange;
platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.tsx
+1 -5
View File
@@ -17,7 +17,7 @@ const InputLabelWrapper = ({
isSortable,
sortDirection,
onLabelClick,
className,
className = '',
children,
}) => {
const onClickHandler = e => {
@@ -53,10 +53,6 @@ const InputLabelWrapper = ({
);
};
InputLabelWrapper.defaultProps = {
className: '',
};
InputLabelWrapper.propTypes = {
label: PropTypes.string.isRequired,
isSortable: PropTypes.bool.isRequired,
platform/ui/src/components/InputMultiSelect/InputMultiSelect.tsx
+3 -9
View File
@@ -10,9 +10,9 @@ const InputMultiSelect = ({
isSortable,
sortDirection,
onLabelClick,
value,
placeholder,
options,
value = [],
placeholder = '',
options = [],
onChange,
}) => {
return (
@@ -50,12 +50,6 @@ const InputMultiSelect = ({
);
};
InputMultiSelect.defaultProps = {
value: [],
placeholder: '',
options: [],
};
InputMultiSelect.propTypes = {
id: PropTypes.string,
label: PropTypes.string.isRequired,
platform/ui/src/components/InputText/InputText.tsx
+9 -8
View File
@@ -4,7 +4,15 @@ import PropTypes from 'prop-types';
import Input from '../Input';
import InputLabelWrapper from '../InputLabelWrapper';
const InputText = ({ id, label, isSortable, sortDirection, onLabelClick, value, onChange }) => {
const InputText = ({
id,
label,
isSortable = false,
sortDirection = 'none',
onLabelClick = () => {},
value = '',
onChange,
}) => {
return (
<InputLabelWrapper
label={label}
@@ -26,13 +34,6 @@ const InputText = ({ id, label, isSortable, sortDirection, onLabelClick, value,
);
};
InputText.defaultProps = {
value: '',
isSortable: false,
onLabelClick: () => {},
sortDirection: 'none',
};
InputText.propTypes = {
id: PropTypes.string,
label: PropTypes.string.isRequired,
platform/ui/src/components/InvestigationalUseDialog/InvestigationalUseDialog.tsx
+6 -8
View File
@@ -9,7 +9,11 @@ export enum showDialogOption {
ShowOnceAndConfigure = 'configure',
}
const InvestigationalUseDialog = ({ dialogConfiguration }) => {
const InvestigationalUseDialog = ({
dialogConfiguration = {
option: showDialogOption.AlwaysShowDialog,
},
}) => {
const { option, days } = dialogConfiguration;
const [isHidden, setIsHidden] = useState(true);
@@ -97,13 +101,7 @@ InvestigationalUseDialog.propTypes = {
dialogConfiguration: PropTypes.shape({
option: PropTypes.oneOf(Object.values(showDialogOption)).isRequired,
days: PropTypes.number,
}).isRequired,
};
InvestigationalUseDialog.defaultProps = {
dialogConfiguration: {
option: showDialogOption.AlwaysShowDialog,
},
}),
};
export default InvestigationalUseDialog;
platform/ui/src/components/LayoutPreset/LayoutPreset.tsx
+1 -5
View File
@@ -4,7 +4,7 @@ import classNames from 'classnames';
import Icon from '../Icon/Icon';
function LayoutPreset({
onSelection,
onSelection = () => {},
title,
icon,
commandOptions,
@@ -27,10 +27,6 @@ function LayoutPreset({
);
}
LayoutPreset.defaultProps = {
onSelection: () => {},
};
LayoutPreset.propTypes = {
onSelection: PropTypes.func.isRequired,
title: PropTypes.string,
platform/ui/src/components/LayoutSelector/LayoutSelector.tsx
+1 -7
View File
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
function LayoutSelector({ onSelection, rows, columns }) {
function LayoutSelector({ onSelection = () => {}, rows = 3, columns = 4 }) {
const [hoveredIndex, setHoveredIndex] = useState();
const hoverX = hoveredIndex % columns;
const hoverY = Math.floor(hoveredIndex / columns);
@@ -48,12 +48,6 @@ function LayoutSelector({ onSelection, rows, columns }) {
);
}
LayoutSelector.defaultProps = {
onSelection: () => {},
columns: 4,
rows: 3,
};
LayoutSelector.propTypes = {
onSelection: PropTypes.func.isRequired,
columns: PropTypes.number.isRequired,
platform/ui/src/components/LegacyButton/LegacyButton.tsx
+2 -9
View File
@@ -137,7 +137,7 @@ const fullWidthClasses = {
};
const LegacyButton = ({
children,
children = '',
variant = defaults.variant,
color = defaults.color,
border = defaults.border,
@@ -151,7 +151,7 @@ const LegacyButton = ({
endIcon: endIconProp,
name,
className,
onClick,
onClick = () => {},
/** TODO: All possible props should be explicitly defined -- avoid spreading props */
...rest
}) => {
@@ -206,13 +206,6 @@ const LegacyButton = ({
);
};
LegacyButton.defaultProps = {
color: defaults.color,
disabled: false,
children: '',
onClick: () => {},
};
LegacyButton.propTypes = {
/** What is inside the button, can be text or react component */
children: PropTypes.node,
platform/ui/src/components/LegacyCinePlayer/LegacyCinePlayer.tsx
+8 -19
View File
@@ -8,14 +8,14 @@ import Icon from '../Icon';
import './LegacyCinePlayerCustomInputRange.css';
const LegacyCinePlayer = ({
isPlaying,
minFrameRate,
maxFrameRate,
stepFrameRate,
frameRate: defaultFrameRate,
onFrameRateChange,
onPlayPauseChange,
onClose,
isPlaying = false,
minFrameRate = 1,
maxFrameRate = 90,
stepFrameRate = 1,
frameRate: defaultFrameRate = 24,
onFrameRateChange = () => {},
onPlayPauseChange = () => {},
onClose = () => {},
}) => {
const [frameRate, setFrameRate] = useState(defaultFrameRate);
const debouncedSetFrameRate = debounce(onFrameRateChange, 300);
@@ -74,17 +74,6 @@ const LegacyCinePlayer = ({
const noop = () => {};
LegacyCinePlayer.defaultProps = {
isPlaying: false,
minFrameRate: 1,
maxFrameRate: 90,
stepFrameRate: 1,
frameRate: 24,
onPlayPauseChange: noop,
onFrameRateChange: noop,
onClose: noop,
};
LegacyCinePlayer.propTypes = {
/** Minimum value for range slider */
minFrameRate: PropTypes.number.isRequired,
platform/ui/src/components/LegacySidePanel/LegacySidePanel.tsx
-4
View File
@@ -283,10 +283,6 @@ const LegacySidePanel = ({
);
};
LegacySidePanel.defaultProps = {
defaultComponentOpen: null,
};
LegacySidePanel.propTypes = {
servicesManager: PropTypes.object.isRequired,
side: PropTypes.oneOf(['left', 'right']).isRequired,
platform/ui/src/components/LegacySplitButton/LegacySplitButton.tsx
+3 -11
View File
@@ -72,10 +72,10 @@ const LegacySplitButton = ({
primary,
secondary,
items,
renderer,
renderer = null,
onInteraction,
Component,
isActive,
Component = null,
isActive = false,
}) => {
const { t } = useTranslation('Buttons');
const [state, setState] = useState({ isHovering: false, isExpanded: false });
@@ -149,7 +149,6 @@ const LegacySplitButton = ({
};
LegacySplitButton.propTypes = {
isToggle: PropTypes.bool,
groupId: PropTypes.string.isRequired,
primary: PropTypes.object.isRequired,
secondary: PropTypes.object.isRequired,
@@ -160,11 +159,4 @@ LegacySplitButton.propTypes = {
Component: PropTypes.elementType,
};
LegacySplitButton.defaultProps = {
isToggle: false,
renderer: null,
isActive: false,
Component: null,
};
export default LegacySplitButton;
platform/ui/src/components/LegacyViewportActionBar/LegacyViewportActionBar.tsx
+7 -13
View File
@@ -11,11 +11,11 @@ import LegacyCinePlayer from '../LegacyCinePlayer';
const LegacyViewportActionBar = ({
studyData,
showNavArrows,
showStatus,
showCine,
cineProps,
showPatientInfo: patientInfoVisibility,
showNavArrows = true,
showStatus = true,
showCine = false,
cineProps = {},
showPatientInfo: patientInfoVisibility = false,
onArrowsClick,
onDoubleClick,
getStatusComponent,
@@ -166,14 +166,8 @@ LegacyViewportActionBar.propTypes = {
}),
}).isRequired,
getStatusComponent: PropTypes.func.isRequired,
};
LegacyViewportActionBar.defaultProps = {
cineProps: {},
showCine: false,
showStatus: true,
showNavArrows: true,
showPatientInfo: false,
onDoubleClick: PropTypes.func.isRequired,
showStatus: PropTypes.bool,
};
export default LegacyViewportActionBar;
platform/ui/src/components/LineChart/LineChart.tsx
+5 -13
View File
@@ -10,11 +10,11 @@ const LineChart = ({
height: heightProp,
axis,
series,
showAxisLabels,
showAxisGrid,
showLegend,
legendWidth,
transparentChartBackground,
showAxisLabels = true,
showAxisGrid = true,
showLegend = false,
legendWidth = 120,
transparentChartBackground = false,
containerClassName,
chartContainerClassName,
}: {
@@ -105,14 +105,6 @@ const LineChart = ({
);
};
LineChart.defaultProps = {
showAxisLabels: true,
showAxisGrid: true,
showLegend: false,
legendWidth: 120,
transparentChartBackground: false,
};
LineChart.propTypes = {
title: PropTypes.string,
width: PropTypes.number,
platform/ui/src/components/ListMenu/ListMenu.tsx
+1 -7
View File
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
const flex = 'flex flex-row justify-between items-center';
const theme = 'bg-indigo-dark text-white';
const ListMenu = ({ items = [], renderer, onClick }) => {
const ListMenu = ({ items = [], renderer, onClick = () => {} }) => {
const [selectedIndex, setSelectedIndex] = useState(null);
const ListItem = ({ item, index, isSelected }) => {
@@ -48,16 +48,10 @@ const ListMenu = ({ items = [], renderer, onClick }) => {
);
};
const noop = () => {};
ListMenu.propTypes = {
items: PropTypes.array.isRequired,
renderer: PropTypes.func.isRequired,
onClick: PropTypes.func,
};
ListMenu.defaultProps = {
onClick: noop,
};
export default ListMenu;
platform/ui/src/components/MeasurementTable/MeasurementItem.tsx
+1 -5
View File
@@ -9,7 +9,7 @@ const MeasurementItem = ({
index,
label,
displayText,
isActive,
isActive = false,
onClick,
onEdit,
onDelete,
@@ -110,8 +110,4 @@ MeasurementItem.propTypes = {
onDelete: PropTypes.func,
};
MeasurementItem.defaultProps = {
isActive: false,
};
export default MeasurementItem;
platform/ui/src/components/MeasurementTable/MeasurementTable.tsx
+3 -9
View File
@@ -5,10 +5,10 @@ import { useTranslation } from 'react-i18next';
import MeasurementItem from './MeasurementItem';
const MeasurementTable = ({
data,
data = [],
title,
onClick,
onEdit,
onClick = () => {},
onEdit = () => {},
onDelete,
servicesManager,
}: withAppTypes) => {
@@ -71,12 +71,6 @@ const MeasurementTable = ({
);
};
MeasurementTable.defaultProps = {
data: [],
onClick: () => {},
onEdit: () => {},
};
MeasurementTable.propTypes = {
title: PropTypes.string.isRequired,
data: PropTypes.arrayOf(
platform/ui/src/components/Modal/Modal.tsx
+2 -10
View File
@@ -15,12 +15,12 @@ if (typeof document !== 'undefined') {
const Modal = ({
closeButton,
shouldCloseOnEsc,
shouldCloseOnEsc = true,
isOpen,
title,
onClose,
children,
shouldCloseOnOverlayClick,
shouldCloseOnOverlayClick = true,
movable = false,
containerDimensions = null,
contentDimensions = null,
@@ -99,14 +99,6 @@ const Modal = ({
);
};
Modal.defaultProps = {
shouldCloseOnEsc: true,
shouldCloseOnOverlayClick: true,
movable: false,
containerDimensions: null,
contentDimensions: null,
};
Modal.propTypes = {
closeButton: PropTypes.bool,
shouldCloseOnEsc: PropTypes.bool,
platform/ui/src/components/Notification/Notification.tsx
+9 -6
View File
@@ -5,7 +5,15 @@ import PropTypes from 'prop-types';
import Button, { ButtonEnums } from '../Button';
import Icon from '../Icon';
const Notification = ({ id, type, message, actions, onSubmit, onOutsideClick, onKeyPress }) => {
const Notification = ({
id,
type = 'info',
message,
actions,
onSubmit,
onOutsideClick = () => {},
onKeyPress,
}) => {
const notificationRef = useRef(null);
useEffect(() => {
@@ -99,11 +107,6 @@ const Notification = ({ id, type, message, actions, onSubmit, onOutsideClick, on
);
};
Notification.defaultProps = {
type: 'info',
onOutsideClick: () => {},
};
Notification.propTypes = {
type: PropTypes.oneOf(['error', 'warning', 'info', 'success']),
message: PropTypes.string.isRequired,
platform/ui/src/components/PanelSection/PanelSection.tsx
-2
View File
@@ -49,8 +49,6 @@ const PanelSection = ({ title, children, actionIcons = [], childrenClassName })
);
};
PanelSection.defaultProps = {};
PanelSection.propTypes = {
title: PropTypes.string,
children: PropTypes.node,
platform/ui/src/components/SegmentationGroupTable/SegmentationDropDownRow.tsx
+1 -6
View File
@@ -7,7 +7,7 @@ function SegmentationDropDownRow({
segmentations = [],
activeSegmentation,
onActiveSegmentationChange,
disableEditing,
disableEditing = false,
onToggleSegmentationVisibility,
onSegmentationEdit,
onSegmentationDownload,
@@ -180,9 +180,4 @@ SegmentationDropDownRow.propTypes = {
onSegmentationAdd: PropTypes.func,
};
SegmentationDropDownRow.defaultProps = {
segmentations: [],
disableEditing: false,
};
export default SegmentationDropDownRow;
platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx
+1 -5
View File
@@ -8,7 +8,7 @@ const SegmentItem = ({
segmentIndex,
segmentationId,
label,
isActive,
isActive = false,
isVisible,
color,
showDelete,
@@ -236,8 +236,4 @@ SegmentItem.propTypes = {
displayText: PropTypes.string,
};
SegmentItem.defaultProps = {
isActive: false,
};
export default SegmentItem;
platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTable.tsx
+27 -61
View File
@@ -9,39 +9,34 @@ import SegmentationGroupSegment from './SegmentationGroupSegment';
import { useTranslation } from 'react-i18next';
const SegmentationGroupTable = ({
segmentations,
// segmentation initial config
segmentations = [],
segmentationConfig,
// UI show/hide
disableEditing,
showAddSegmentation,
showAddSegment,
showDeleteSegment,
// segmentation/segment handlers
onSegmentationAdd,
onSegmentationEdit,
onSegmentationClick,
onSegmentationDelete,
onSegmentationDownload,
onSegmentationDownloadRTSS,
storeSegmentation,
// segment handlers
onSegmentClick,
onSegmentAdd,
onSegmentDelete,
onSegmentEdit,
onToggleSegmentationVisibility,
onToggleSegmentVisibility,
onToggleSegmentLock,
onSegmentColorClick,
// segmentation config handlers
setFillAlpha,
setFillAlphaInactive,
setOutlineWidthActive,
setOutlineOpacityActive,
setRenderFill,
setRenderInactiveSegmentations,
setRenderOutline,
disableEditing = false,
showAddSegmentation = true,
showAddSegment = true,
showDeleteSegment = true,
onSegmentationAdd = () => {},
onSegmentationEdit = () => {},
onSegmentationClick = () => {},
onSegmentationDelete = () => {},
onSegmentationDownload = () => {},
onSegmentationDownloadRTSS = () => {},
storeSegmentation = () => {},
onSegmentClick = () => {},
onSegmentAdd = () => {},
onSegmentDelete = () => {},
onSegmentEdit = () => {},
onToggleSegmentationVisibility = () => {},
onToggleSegmentVisibility = () => {},
onToggleSegmentLock = () => {},
onSegmentColorClick = () => {},
setFillAlpha = () => {},
setFillAlphaInactive = () => {},
setOutlineWidthActive = () => {},
setOutlineOpacityActive = () => {},
setRenderFill = () => {},
setRenderInactiveSegmentations = () => {},
setRenderOutline = () => {},
addSegmentationClassName,
}) => {
const [isConfigOpen, setIsConfigOpen] = useState(false);
@@ -216,33 +211,4 @@ SegmentationGroupTable.propTypes = {
setRenderOutline: PropTypes.func.isRequired,
};
SegmentationGroupTable.defaultProps = {
segmentations: [],
disableEditing: false,
showAddSegmentation: true,
showAddSegment: true,
showDeleteSegment: true,
onSegmentationAdd: () => {},
onSegmentationEdit: () => {},
onSegmentationClick: () => {},
onSegmentationDelete: () => {},
onSegmentationDownload: () => {},
onSemgnetationDownloadRTSS: () => {},
storeSegmentation: () => {},
onSegmentClick: () => {},
onSegmentAdd: () => {},
onSegmentDelete: () => {},
onSegmentEdit: () => {},
onToggleSegmentationVisibility: () => {},
onToggleSegmentVisibility: () => {},
onToggleSegmentLock: () => {},
onSegmentColorClick: () => {},
setFillAlpha: () => {},
setFillAlphaInactive: () => {},
setOutlineWidthActive: () => {},
setOutlineOpacityActive: () => {},
setRenderFill: () => {},
setRenderInactiveSegmentations: () => {},
setRenderOutline: () => {},
};
export default SegmentationGroupTable;
platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTableExpanded.tsx
+27 -61
View File
@@ -7,39 +7,34 @@ import { useTranslation } from 'react-i18next';
import SegmentationItem from './SegmentationItem';
const SegmentationGroupTableExpanded = ({
segmentations,
// segmentation initial config
segmentations = [],
segmentationConfig,
// UI show/hide
disableEditing,
showAddSegmentation,
showAddSegment,
showDeleteSegment,
// segmentation/segment handlers
onSegmentationAdd,
onSegmentationEdit,
onSegmentationClick,
onSegmentationDelete,
onSegmentationDownload,
onSegmentationDownloadRTSS,
storeSegmentation,
// segment handlers
onSegmentClick,
onSegmentAdd,
onSegmentDelete,
onSegmentEdit,
onToggleSegmentationVisibility,
onToggleSegmentVisibility,
onToggleSegmentLock,
onSegmentColorClick,
// segmentation config handlers
setFillAlpha,
setFillAlphaInactive,
setOutlineWidthActive,
setOutlineOpacityActive,
setRenderFill,
setRenderInactiveSegmentations,
setRenderOutline,
disableEditing = false,
showAddSegmentation = true,
showAddSegment = true,
showDeleteSegment = true,
onSegmentationAdd = () => {},
onSegmentationEdit = () => {},
onSegmentationClick = () => {},
onSegmentationDelete = () => {},
onSegmentationDownload = () => {},
onSegmentationDownloadRTSS = () => {},
storeSegmentation = () => {},
onSegmentClick = () => {},
onSegmentAdd = () => {},
onSegmentDelete = () => {},
onSegmentEdit = () => {},
onToggleSegmentationVisibility = () => {},
onToggleSegmentVisibility = () => {},
onToggleSegmentLock = () => {},
onSegmentColorClick = () => {},
setFillAlpha = () => {},
setFillAlphaInactive = () => {},
setOutlineWidthActive = () => {},
setOutlineOpacityActive = () => {},
setRenderFill = () => {},
setRenderInactiveSegmentations = () => {},
setRenderOutline = () => {},
}) => {
const [isConfigOpen, setIsConfigOpen] = useState(false);
const [activeSegmentationId, setActiveSegmentationId] = useState(null);
@@ -179,33 +174,4 @@ SegmentationGroupTableExpanded.propTypes = {
setRenderOutline: PropTypes.func.isRequired,
};
SegmentationGroupTableExpanded.defaultProps = {
segmentations: [],
disableEditing: false,
showAddSegmentation: true,
showAddSegment: true,
showDeleteSegment: true,
onSegmentationAdd: () => {},
onSegmentationEdit: () => {},
onSegmentationClick: () => {},
onSegmentationDelete: () => {},
onSegmentationDownload: () => {},
onSemgnetationDownloadRTSS: () => {},
storeSegmentation: () => {},
onSegmentClick: () => {},
onSegmentAdd: () => {},
onSegmentDelete: () => {},
onSegmentEdit: () => {},
onToggleSegmentationVisibility: () => {},
onToggleSegmentVisibility: () => {},
onToggleSegmentLock: () => {},
onSegmentColorClick: () => {},
setFillAlpha: () => {},
setFillAlphaInactive: () => {},
setOutlineWidthActive: () => {},
setOutlineOpacityActive: () => {},
setRenderFill: () => {},
setRenderInactiveSegmentations: () => {},
setRenderOutline: () => {},
};
export default SegmentationGroupTableExpanded;
platform/ui/src/components/SegmentationGroupTable/SegmentationItem.tsx
+2 -7
View File
@@ -8,8 +8,8 @@ import SegmentationGroupSegment from './SegmentationGroupSegment';
import { Tooltip } from '../../components';
function SegmentationItem({
segmentation,
disableEditing,
segmentation = {},
disableEditing = false,
onSegmentationEdit,
onSegmentationDownload,
onSegmentationDownloadRTSS,
@@ -203,9 +203,4 @@ SegmentationItem.propTypes = {
activeSegmentationId: PropTypes.string,
};
SegmentationItem.defaultProps = {
segmentation: null,
disableEditing: false,
};
export default SegmentationItem;
platform/ui/src/components/SegmentationTable/SegmentationItem.tsx
+2 -7
View File
@@ -8,8 +8,8 @@ const SegmentationItem = ({
id,
index,
label,
displayText,
isActive,
displayText = [],
isActive = false,
isVisible,
onClick,
onEdit,
@@ -138,9 +138,4 @@ SegmentationItem.propTypes = {
toggleVisibility: PropTypes.func,
};
SegmentationItem.defaultProps = {
isActive: false,
displayText: [],
};
export default SegmentationItem;
platform/ui/src/components/SegmentationTable/SegmentationTable.tsx
+8 -18
View File
@@ -5,14 +5,14 @@ import SegmentationItem from './SegmentationItem';
import Icon from '../Icon';
const SegmentationTable = ({
title,
segmentations,
activeSegmentationId,
onClick,
onEdit,
onDelete,
onToggleVisibility,
onToggleVisibilityAll,
title = '',
segmentations = [],
activeSegmentationId = '',
onClick = () => {},
onEdit = () => {},
onDelete = () => {},
onToggleVisibility = () => {},
onToggleVisibilityAll = () => {},
}) => {
const [hiddenSegmentationIds, setHiddenSegmentationIds] = useState([]);
const amount = segmentations.length;
@@ -112,14 +112,4 @@ SegmentationTable.propTypes = {
onToggleVisibilityAll: PropTypes.func.isRequired,
};
SegmentationTable.defaultProps = {
title: '',
segmentations: [],
activeSegmentationId: '',
onClick: () => {},
onEdit: () => {},
onToggleVisibility: () => {},
onToggleVisibilityAll: () => {},
};
export default SegmentationTable;
platform/ui/src/components/Select/Select.tsx
+14 -30
View File
@@ -42,20 +42,20 @@ const Option = props => {
const Select = ({
id,
className,
closeMenuOnSelect,
hideSelectedOptions,
isClearable,
isDisabled,
isMulti,
isSearchable,
className = '',
closeMenuOnSelect = true,
hideSelectedOptions = false,
isClearable = true,
isDisabled = false,
isMulti = false,
isSearchable = true,
onChange,
options,
placeholder,
noIcons,
menuPlacement,
components,
value,
noIcons = false,
menuPlacement = 'auto',
components = {},
value = [],
}) => {
const _noIconComponents = {
DropdownIndicator: () => null,
@@ -96,11 +96,9 @@ const Select = ({
options={options}
blurInputOnSelect={true}
menuPortalTarget={document.body}
styles={
{
menuPortal: base => ({ ...base, zIndex: 9999 }),
}
}
styles={{
menuPortal: base => ({ ...base, zIndex: 9999 }),
}}
value={value && Array.isArray(value) ? selectedOptions : value}
onChange={(selectedOptions, { action }) => {
const newSelection = !selectedOptions.length
@@ -112,20 +110,6 @@ const Select = ({
);
};
Select.defaultProps = {
className: '',
closeMenuOnSelect: true,
hideSelectedOptions: false,
isClearable: true,
components: {},
isDisabled: false,
isMulti: false,
isSearchable: true,
noIcons: false,
menuPlacement: 'auto',
value: [],
};
Select.propTypes = {
className: PropTypes.string,
closeMenuOnSelect: PropTypes.bool,
platform/ui/src/components/SidePanel/SidePanel.tsx
+1 -6
View File
@@ -161,7 +161,7 @@ const createBaseStyle = (expandedWidth: number) => {
const SidePanel = ({
side,
className,
activeTabIndex: activeTabIndexProp,
activeTabIndex: activeTabIndexProp = null,
tabs,
onOpen,
expandedWidth = 248,
@@ -400,11 +400,6 @@ const SidePanel = ({
);
};
SidePanel.defaultProps = {
defaultComponentOpen: null,
activeTabIndex: null, // the default is to close the side panel
};
SidePanel.propTypes = {
side: PropTypes.oneOf(['left', 'right']).isRequired,
className: PropTypes.string,
platform/ui/src/components/SplitButton/SplitButton.tsx
+2 -10
View File
@@ -91,9 +91,9 @@ const SplitButton = ({
primary,
secondary,
items,
renderer,
renderer = null,
onInteraction,
Component,
Component = Icon,
}) => {
const { t } = useTranslation('Buttons');
const [state, setState] = useState({ isHovering: false, isExpanded: false });
@@ -172,7 +172,6 @@ const SplitButton = ({
};
SplitButton.propTypes = {
isToggle: PropTypes.bool,
groupId: PropTypes.string.isRequired,
primary: PropTypes.object.isRequired,
secondary: PropTypes.object.isRequired,
@@ -184,11 +183,4 @@ SplitButton.propTypes = {
interactionType: PropTypes.oneOf(['action', 'tool', 'toggle']),
};
SplitButton.defaultProps = {
isToggle: false,
renderer: null,
isActive: false,
Component: null,
};
export default SplitButton;
platform/ui/src/components/StudyBrowser/StudyBrowser.tsx
+7 -15
View File
@@ -19,15 +19,17 @@ const getTrackedSeries = displaySets => {
return trackedSeries;
};
const noop = () => {};
const StudyBrowser = ({
tabs,
activeTabName,
expandedStudyInstanceUIDs,
onClickTab,
onClickStudy,
onClickThumbnail,
onDoubleClickThumbnail,
onClickUntrack,
onClickTab = noop,
onClickStudy = noop,
onClickThumbnail = noop,
onDoubleClickThumbnail = noop,
onClickUntrack = noop,
activeDisplaySetInstanceUIDs,
servicesManager,
}: withAppTypes) => {
@@ -168,14 +170,4 @@ StudyBrowser.propTypes = {
),
};
const noop = () => {};
StudyBrowser.defaultProps = {
onClickTab: noop,
onClickStudy: noop,
onClickThumbnail: noop,
onDoubleClickThumbnail: noop,
onClickUntrack: noop,
};
export default StudyBrowser;
platform/ui/src/components/Svg/getSvg.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import React from 'react';
// Svgs
import logoOhif from './../../assets/svgs/ohif-logo.svg';
import { ReactComponent as logoOhif } from './../../assets/svgs/ohif-logo.svg';
const SVGS = {
'logo-ohif': logoOhif,
platform/ui/src/components/Table/Table.tsx
+1 -7
View File
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
const Table = ({ children, className, fullWidth, style }) => {
const Table = ({ children, className = '', fullWidth = true, style = {} }) => {
const classes = {
base: 'text-lg text-white',
fullWidth: {
@@ -21,12 +21,6 @@ const Table = ({ children, className, fullWidth, style }) => {
);
};
Table.defaultProps = {
className: '',
fullWidth: true,
style: {},
};
Table.propTypes = {
fullWidth: PropTypes.bool,
children: PropTypes.node.isRequired,
platform/ui/src/components/TableBody/TableBody.tsx
+1 -6
View File
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
const TableBody = ({ children, className, style }) => {
const TableBody = ({ children, className = '', style = {} }) => {
return (
<div
className={classnames('ohif-scrollbar mt-2 max-h-48 overflow-y-scroll', className)}
@@ -17,11 +17,6 @@ const TableBody = ({ children, className, style }) => {
);
};
TableBody.defaultProps = {
className: '',
style: {},
};
TableBody.propTypes = {
children: function (props, propName, componentName) {
const elements = React.Children.toArray(props.children);
platform/ui/src/components/TableCell/TableCell.tsx
+5 -13
View File
@@ -4,14 +4,14 @@ import classnames from 'classnames';
const TableCell = ({
children,
className,
colSpan,
className = '',
colSpan = 1,
// ignored because we don't want to expose this prop
// eslint-disable-next-line react/prop-types
cellsNum,
isTableHead,
align,
style,
isTableHead = false,
align = 'left',
style = {},
}) => {
const classes = {
align: {
@@ -42,14 +42,6 @@ const TableCell = ({
);
};
TableCell.defaultProps = {
align: 'left',
className: '',
colSpan: 1,
isTableHead: false,
style: {},
};
TableCell.propTypes = {
align: PropTypes.oneOf(['left', 'center', 'right', 'justify']),
children: PropTypes.node.isRequired,
platform/ui/src/components/TableHead/TableHead.tsx
+1 -6
View File
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
const TableHead = ({ children, className, style }) => {
const TableHead = ({ children, className = '', style = {} }) => {
return (
<div
className={classnames(
@@ -20,11 +20,6 @@ const TableHead = ({ children, className, style }) => {
);
};
TableHead.defaultProps = {
className: '',
style: {},
};
TableHead.propTypes = {
children: function (props, propName, componentName) {
const elements = React.Children.toArray(props.children);
platform/ui/src/components/TableRow/TableRow.tsx
+1 -7
View File
@@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
const TableRow = ({ children, className, isTableHead, style }) => {
const TableRow = ({ children, className = '', isTableHead = false, style = {} }) => {
const childrens = React.Children.map(children, child => {
const isValidReactElement = React.isValidElement(child);
@@ -21,12 +21,6 @@ const TableRow = ({ children, className, isTableHead, style }) => {
);
};
TableRow.defaultProps = {
isTableHead: false,
className: '',
style: {},
};
TableRow.propTypes = {
isTableHead: PropTypes.bool,
children: function (props, propName, componentName) {
platform/ui/src/components/Thumbnail/Thumbnail.tsx
+1 -5
View File
@@ -19,7 +19,7 @@ const Thumbnail = ({
numInstances,
countIcon,
messages,
dragData,
dragData = {},
isActive,
onClick,
onDoubleClick,
@@ -130,8 +130,4 @@ Thumbnail.propTypes = {
onDoubleClick: PropTypes.func.isRequired,
};
Thumbnail.defaultProps = {
dragData: {},
};
export default Thumbnail;
platform/ui/src/components/ToolbarButton/ToolbarButton.tsx
+1 -5
View File
@@ -12,7 +12,7 @@ const ToolbarButton = ({
label,
commands,
onInteraction,
dropdownContent,
dropdownContent = null,
//
className,
disabled,
@@ -65,10 +65,6 @@ const ToolbarButton = ({
);
};
ToolbarButton.defaultProps = {
dropdownContent: null,
};
ToolbarButton.propTypes = {
/* Influences background/hover styling */
id: PropTypes.string.isRequired,
platform/ui/src/components/Tooltip/PortalTooltip.tsx
+5 -4
View File
@@ -39,8 +39,8 @@ export default class PortalTooltip extends React.Component {
if (!portalNodes[this.props.group]) {
this.createPortal();
}
let { parent, ...other } = props;
let parentEl = typeof parent === 'string' ? document.querySelector(parent) : parent;
const { parent, ...other } = props;
const parentEl = typeof parent === 'string' ? document.querySelector(parent) : parent;
ReactDOM.render(
<Card
parentEl={parentEl}
@@ -66,8 +66,8 @@ export default class PortalTooltip extends React.Component {
return;
}
let props = { ...nextProps };
let newProps = { ...nextProps };
const props = { ...nextProps };
const newProps = { ...nextProps };
if (portalNodes[this.props.group] && portalNodes[this.props.group].timeout) {
clearTimeout(portalNodes[this.props.group].timeout);
@@ -86,6 +86,7 @@ export default class PortalTooltip extends React.Component {
componentWillUnmount() {
if (portalNodes[this.props.group]) {
// Todo: move this to root.unmount
ReactDOM.unmountComponentAtNode(portalNodes[this.props.group].node);
clearTimeout(portalNodes[this.props.group].timeout);
platform/ui/src/components/Tooltip/Tooltip.tsx
+5 -13
View File
@@ -36,15 +36,15 @@ const arrowPositionStyle = {
const Tooltip = ({
content,
secondaryContent = null,
isSticky,
position,
isSticky = false,
position = 'bottom',
className,
tight,
tight = false,
children,
isDisabled,
isDisabled = false,
tooltipBoxClassName,
// time to show/hide the tooltip on mouse over and mouse out events (default: 300ms)
showHideDelay,
showHideDelay = 300,
onHide,
}) => {
const [isActive, setIsActive] = useState(false);
@@ -189,14 +189,6 @@ const Tooltip = ({
);
};
Tooltip.defaultProps = {
tight: false,
isSticky: false,
position: 'bottom',
isDisabled: false,
showHideDelay: 300,
};
Tooltip.propTypes = {
isDisabled: PropTypes.bool,
content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
platform/ui/src/components/TooltipClipboard/TooltipClipboard.tsx
+1 -5
View File
@@ -9,7 +9,7 @@ const DELAY_TO_SHOW = 1000;
const DELAY_TO_HIDE = 10; // it needs at least a little delay to prevent tooltip to suddenly hide
const DELAY_TO_HIDE_AFTER_COPYING = 1000;
const TooltipClipboard = ({ children, text }) => {
const TooltipClipboard = ({ children, text = '' }) => {
const { t } = useTranslation('TooltipClipboard');
const [isActive, setIsActive] = useState(false);
@@ -158,10 +158,6 @@ const TooltipClipboard = ({ children, text }) => {
);
};
TooltipClipboard.defaultProps = {
text: '',
};
TooltipClipboard.propTypes = {
text: PropTypes.string,
children: PropTypes.node.isRequired,
platform/ui/src/components/UserPreferences/UserPreferences.tsx
+4 -21
View File
@@ -12,12 +12,12 @@ const UserPreferences = ({
availableLanguages,
defaultLanguage,
currentLanguage,
disabled,
disabled = false,
hotkeyDefinitions,
hotkeyDefaults,
onCancel,
onSubmit,
onReset,
onCancel = () => {},
onSubmit = () => {},
onReset = () => {},
hotkeysModule,
}) => {
const { t } = useTranslation('UserPreferencesModal');
@@ -140,12 +140,6 @@ UserPreferences.propTypes = {
disabled: PropTypes.bool,
hotkeyDefaults: PropTypes.object.isRequired,
hotkeyDefinitions: PropTypes.object.isRequired,
languageOptions: PropTypes.arrayOf(
PropTypes.shape({
label: PropTypes.string.isRequired,
value: PropTypes.any.isRequired,
})
),
onCancel: PropTypes.func,
onSubmit: PropTypes.func,
onReset: PropTypes.func,
@@ -158,15 +152,4 @@ UserPreferences.propTypes = {
}).isRequired,
};
UserPreferences.defaultProps = {
languageOptions: [
{ value: 'ONE', label: 'ONE' },
{ value: 'TWO', label: 'TWO' },
],
onCancel: noop,
onSubmit: noop,
onReset: noop,
disabled: false,
};
export default UserPreferences;
platform/ui/src/components/ViewportPane/ViewportPane.tsx
+1 -7
View File
@@ -13,7 +13,7 @@ function ViewportPane({
isActive,
onDrop,
onDoubleClick,
onInteraction,
onInteraction = () => {},
acceptDropsFor,
}) {
let dropElement = null;
@@ -108,10 +108,4 @@ ViewportPane.propTypes = {
onDoubleClick: PropTypes.func,
};
const noop = () => {};
ViewportPane.defaultProps = {
onInteraction: noop,
};
export default ViewportPane;
platform/ui/src/components/WindowLevel/WindowLevel.tsx
+6 -20
View File
@@ -12,7 +12,6 @@ import {
histogramPropType,
colormapPropType,
} from './types';
import PanelSection from '../PanelSection';
const convertVOItoVOIRange = voi => {
return {
@@ -22,21 +21,19 @@ const convertVOItoVOIRange = voi => {
};
const WindowLevel = ({
title,
step,
step = 1,
histogram,
voi: voiProp,
opacity: opacityProp,
showOpacitySlider,
opacity: opacityProp = 1,
showOpacitySlider = false,
colormap,
style,
fillColor,
lineColor,
style = 'polygon',
fillColor = '#3f3f3f',
lineColor = '#707070',
containerClassName,
onVOIChange,
onOpacityChange,
}: {
title: string;
step: number;
histogram: Histogram;
voi: VOI;
@@ -105,7 +102,6 @@ const WindowLevel = ({
return (
<div className={classnames('maxValue-w-sm p-0.5 text-[0px] text-white', containerClassName)}>
<div className="px-2 pt-0 pb-[0.5]">
{/* <legend className="pb-1 text-base text-white"> {title}</legend> */}
<div className="flex h-4 text-xs">
<div className="relative h-fit grow">
<span className="absolute left-0 bottom-px leading-3">{range.min}</span>
@@ -161,17 +157,7 @@ const WindowLevel = ({
);
};
WindowLevel.defaultProps = {
step: 1,
opacity: 1,
showOpacitySlider: false,
style: 'polygon',
fillColor: '#3f3f3f',
lineColor: '#707070',
};
WindowLevel.propTypes = {
title: PropTypes.string,
step: PropTypes.number,
histogram: histogramPropType.isRequired,
voi: voiPropType,
platform/ui/src/components/WindowLevel/WindowLevelHistogram.tsx
+4 -11
View File
@@ -154,10 +154,10 @@ const WindowLevelHistogram = ({
range,
voiRange,
histogram,
colormap,
style,
fillColor,
lineColor,
colormap = DEFAULT_COLORMAP,
style = 'polygon',
fillColor = '#3f3f3f',
lineColor = '#707070',
}: {
range: Range;
voiRange: VOIRange;
@@ -216,13 +216,6 @@ const WindowLevelHistogram = ({
);
};
WindowLevelHistogram.defaultProps = {
colormap: DEFAULT_COLORMAP,
style: 'polygon',
fillColor: '#3f3f3f',
lineColor: '#707070',
};
WindowLevelHistogram.propTypes = {
range: rangePropType.isRequired,
voiRange: voiRangePropType.isRequired,
platform/ui/src/contextProviders/DialogProvider.tsx
+1 -5
View File
@@ -17,7 +17,7 @@ const DialogContext = createContext(null);
export const useDialog = () => useContext(DialogContext);
const DialogProvider = ({ children, service }) => {
const DialogProvider = ({ children, service = null }) => {
const [isDragging, setIsDragging] = useState(false);
const [dialogs, setDialogs] = useState([]);
const [lastDialogId, setLastDialogId] = useState(null);
@@ -300,10 +300,6 @@ export const withDialog = Component => {
};
};
DialogProvider.defaultProps = {
service: null,
};
DialogProvider.propTypes = {
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.func])
.isRequired,
platform/ui/src/contextProviders/ModalComponent.tsx
+7 -17
View File
@@ -2,27 +2,17 @@ import PropTypes from 'prop-types';
import React from 'react';
export const ModalComponent = ({
content,
contentProps,
shouldCloseOnEsc,
isOpen,
closeButton,
title,
customClassName,
content = null,
contentProps = null,
shouldCloseOnEsc = true,
isOpen = true,
closeButton = true,
title = null,
customClassName = '',
}) => {
return <></>;
};
ModalComponent.defaultProps = {
content: null,
contentProps: null,
shouldCloseOnEsc: true,
isOpen: true,
closeButton: true,
title: null,
customClassName: '',
};
ModalComponent.propTypes = {
content: PropTypes.node,
contentProps: PropTypes.object,
platform/ui/src/contextProviders/ModalProvider.tsx
+1 -5
View File
@@ -21,7 +21,7 @@ export const useModal = () => useContext(ModalContext);
* @property {string} [customClassName=null] The custom class to style the modal.
*/
const ModalProvider = ({ children, modal: Modal, service }) => {
const ModalProvider = ({ children, modal: Modal, service = null }) => {
const DEFAULT_OPTIONS = {
content: null,
contentProps: null,
@@ -125,10 +125,6 @@ export const withModal = Component => {
};
};
ModalProvider.defaultProps = {
service: null,
};
ModalProvider.propTypes = {
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
modal: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.func])
platform/ui/src/contextProviders/SnackbarProvider.tsx
+1 -5
View File
@@ -8,7 +8,7 @@ const SnackbarContext = createContext(null);
export const useSnackbar = () => useContext(SnackbarContext);
const SnackbarProvider = ({ children, service }) => {
const SnackbarProvider = ({ children, service = null }) => {
const DEFAULT_OPTIONS = {
title: '',
message: '',
@@ -104,10 +104,6 @@ const SnackbarProvider = ({ children, service }) => {
);
};
SnackbarProvider.defaultProps = {
service: null,
};
SnackbarProvider.propTypes = {
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.func])
.isRequired,
platform/ui/tailwind.config.js
+4 -1
View File
@@ -34,7 +34,6 @@ module.exports = {
dark: '#090c29',
active: '#348cfd',
},
inputfield: {
main: '#3a3f99',
disabled: '#2b166b',
@@ -49,6 +48,10 @@ module.exports = {
active: '#1f1f27',
},
indigo: {
dark: '#0b1a42',
},
common: {
bright: '#e1e1e1',
light: '#a19fad',