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

chore(prettier): full repo linting and code reformatting once and for all (#3627)

Browse Source
This commit is contained in:
Alireza authored and GitHub committed 2023-09-01 16:19:39 -04:00
1 parent 01500a2d4c
commit 9045ddaedc
656 files changed
+21737 -20628
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

platform/ui/src/contextProviders/CineProvider.tsx
+5 -16
View File
@@ -1,10 +1,4 @@
import React, {
createContext,
useCallback,
useContext,
useEffect,
useReducer,
} from 'react';
import React, { createContext, useCallback, useContext, useEffect, useReducer } from 'react';
import PropTypes from 'prop-types';
const DEFAULT_STATE = {
@@ -31,8 +25,7 @@ export default function CineProvider({ children, service }) {
cines[id] = { id, ...DEFAULT_CINE };
}
cines[id].frameRate = frameRate || cines[id].frameRate;
cines[id].isPlaying =
isPlaying !== undefined ? isPlaying : cines[id].isPlaying;
cines[id].isPlaying = isPlaying !== undefined ? isPlaying : cines[id].isPlaying;
return { ...state, ...{ cines } };
}
@@ -49,8 +42,7 @@ export default function CineProvider({ children, service }) {
const getState = useCallback(() => state, [state]);
const setIsCineEnabled = useCallback(
isCineEnabled =>
dispatch({ type: 'SET_IS_CINE_ENABLED', payload: isCineEnabled }),
isCineEnabled => dispatch({ type: 'SET_IS_CINE_ENABLED', payload: isCineEnabled }),
[dispatch]
);
@@ -82,14 +74,11 @@ export default function CineProvider({ children, service }) {
getState,
setCine,
setIsCineEnabled,
playClip: (element, playClipOptions) =>
service.playClip(element, playClipOptions),
playClip: (element, playClipOptions) => service.playClip(element, playClipOptions),
stopClip: element => service.stopClip(element),
};
return (
<CineContext.Provider value={[state, api]}>{children}</CineContext.Provider>
);
return <CineContext.Provider value={[state, api]}>{children}</CineContext.Provider>;
}
CineProvider.propTypes = {
platform/ui/src/contextProviders/DialogProvider.tsx
+27 -33
View File
@@ -1,11 +1,4 @@
import React, {
useState,
createContext,
useContext,
useCallback,
useEffect,
useRef,
} from 'react';
import React, { useState, createContext, useContext, useCallback, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import Draggable from 'react-draggable';
@@ -97,8 +90,7 @@ const DialogProvider = ({ children, service }) => {
* @returns void
*/
const dismiss = useCallback(
({ id }) =>
setDialogs(dialogs => dialogs.filter(dialog => dialog.id !== id)),
({ id }) => setDialogs(dialogs => dialogs.filter(dialog => dialog.id !== id)),
[]
);
@@ -127,9 +119,7 @@ const DialogProvider = ({ children, service }) => {
const _bringToFront = useCallback(id => {
setDialogs(dialogs => {
const topDialog = dialogs.find(dialog => dialog.id === id);
return topDialog
? [...dialogs.filter(dialog => dialog.id !== id), topDialog]
: dialogs;
return topDialog ? [...dialogs.filter(dialog => dialog.id !== id), topDialog] : dialogs;
});
}, []);
@@ -163,8 +153,7 @@ const DialogProvider = ({ children, service }) => {
showOverlay,
} = dialog;
let position =
(preservePosition && lastDialogPosition) || defaultPosition;
let position = (preservePosition && lastDialogPosition) || defaultPosition;
if (centralize) {
position = centerPositions.find(position => position.id === id);
}
@@ -179,14 +168,7 @@ const DialogProvider = ({ children, service }) => {
onStart={event => {
const e = event || (typeof window !== 'undefined' && window.event);
const target = e.target || e.srcElement;
const BLACKLIST = [
'SVG',
'BUTTON',
'PATH',
'INPUT',
'SPAN',
'LABEL',
];
const BLACKLIST = ['SVG', 'BUTTON', 'PATH', 'INPUT', 'SPAN', 'LABEL'];
if (BLACKLIST.includes(target.tagName.toUpperCase())) {
return false;
}
@@ -222,7 +204,10 @@ const DialogProvider = ({ children, service }) => {
style={{ zIndex: '999', position: 'absolute', width: '350px' }}
onClick={() => _bringToFront(id)}
>
<DialogContent {...dialog} {...contentProps} />
<DialogContent
{...dialog}
{...contentProps}
/>
</div>
</Draggable>
);
@@ -231,7 +216,10 @@ const DialogProvider = ({ children, service }) => {
const background = 'bg-black bg-opacity-50';
const overlay = 'fixed z-50 left-0 top-0 w-full h-full overflow-auto';
return (
<div className={classNames(overlay, background)} key={id}>
<div
className={classNames(overlay, background)}
key={id}
>
{component}
</div>
);
@@ -245,7 +233,10 @@ const DialogProvider = ({ children, service }) => {
if (typeof onClickOutside === 'function') {
result = (
<OutsideAlerter key={id} onClickOutside={onClickOutside}>
<OutsideAlerter
key={id}
onClickOutside={onClickOutside}
>
{result}
</OutsideAlerter>
);
@@ -280,7 +271,10 @@ const DialogProvider = ({ children, service }) => {
return (
<DialogContext.Provider value={{ create, dismiss, dismissAll, isEmpty }}>
{!isEmpty() && (
<div className="w-full h-full absolute" onKeyDown={onKeyDownHandler}>
<div
className="absolute h-full w-full"
onKeyDown={onKeyDownHandler}
>
{renderDialogs()}
</div>
)}
@@ -298,7 +292,10 @@ export const withDialog = Component => {
return function WrappedComponent(props) {
const { create, dismiss, dismissAll, isEmpty } = useDialog();
return (
<Component {...props} dialog={{ create, dismiss, dismissAll, isEmpty }} />
<Component
{...props}
dialog={{ create, dismiss, dismissAll, isEmpty }}
/>
);
};
};
@@ -308,11 +305,8 @@ DialogProvider.defaultProps = {
};
DialogProvider.propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
PropTypes.func,
]).isRequired,
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.func])
.isRequired,
service: PropTypes.shape({
setServiceImplementation: PropTypes.func,
}),
platform/ui/src/contextProviders/DragAndDropProvider.tsx
+5 -3
View File
@@ -7,8 +7,7 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
// TODO: this is false when it should not be :thinking:
const isTouchDevice =
typeof window !== `undefined` &&
!!('ontouchstart' in window || navigator.maxTouchPoints);
typeof window !== `undefined` && !!('ontouchstart' in window || navigator.maxTouchPoints);
/**
* Relevant:
@@ -25,7 +24,10 @@ function DragAndDropProvider({ children }) {
console.log('using... touch backend?', isTouchDevice);
return (
<DndProvider backend={backend} opts={opts}>
<DndProvider
backend={backend}
opts={opts}
>
{children}
</DndProvider>
);
platform/ui/src/contextProviders/ImageViewerProvider.tsx
+2 -11
View File
@@ -7,21 +7,12 @@ import React, { createContext, useContext, useReducer, useMemo } from 'react';
export const ImageViewerContext = createContext();
export function ImageViewerProvider({
StudyInstanceUIDs,
reducer,
initialState,
children,
}) {
export function ImageViewerProvider({ StudyInstanceUIDs, reducer, initialState, children }) {
const value = useMemo(() => {
return { StudyInstanceUIDs };
}, [StudyInstanceUIDs]);
return (
<ImageViewerContext.Provider value={value}>
{children}
</ImageViewerContext.Provider>
);
return <ImageViewerContext.Provider value={value}>{children}</ImageViewerContext.Provider>;
}
export const useImageViewer = () => useContext(ImageViewerContext);
platform/ui/src/contextProviders/ModalProvider.tsx
+16 -21
View File
@@ -1,10 +1,4 @@
import React, {
useState,
createContext,
useContext,
useEffect,
useCallback,
} from 'react';
import React, { useState, createContext, useContext, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { useTranslation } from 'react-i18next';
@@ -48,9 +42,7 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
* @param {ModalProps} props { content, contentProps, shouldCloseOnEsc, isOpen, closeButton, title, customClassName }
* @returns void
*/
const show = useCallback(props => setOptions({ ...options, ...props }), [
options,
]);
const show = useCallback(props => setOptions({ ...options, ...props }), [options]);
/**
* Hide the modal and set its properties to default.
@@ -95,7 +87,11 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
onClose={hide}
shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
>
<ModalContent {...contentProps} show={show} hide={hide} />
<ModalContent
{...contentProps}
show={show}
hide={hide}
/>
</Modal>
)}
{children}
@@ -111,7 +107,12 @@ const ModalProvider = ({ children, modal: Modal, service }) => {
export const withModal = Component => {
return function WrappedComponent(props) {
const { show, hide } = useModal();
return <Component {...props} modal={{ show, hide }} />;
return (
<Component
{...props}
modal={{ show, hide }}
/>
);
};
};
@@ -120,15 +121,9 @@ ModalProvider.defaultProps = {
};
ModalProvider.propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]).isRequired,
modal: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
PropTypes.func,
]).isRequired,
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
modal: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.func])
.isRequired,
service: PropTypes.shape({
setServiceImplementation: PropTypes.func,
}),
platform/ui/src/contextProviders/SnackbarProvider.tsx
+10 -16
View File
@@ -1,10 +1,4 @@
import React, {
useState,
createContext,
useContext,
useCallback,
useEffect,
} from 'react';
import React, { useState, createContext, useContext, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
import SnackbarTypes from '../components/Snackbar/SnackbarTypes';
@@ -30,9 +24,7 @@ const SnackbarProvider = ({ children, service }) => {
const show = useCallback(
options => {
if (!options || (!options.title && !options.message)) {
console.warn(
'Snackbar cannot be rendered without required parameters: title | message'
);
console.warn('Snackbar cannot be rendered without required parameters: title | message');
return null;
}
@@ -117,11 +109,8 @@ SnackbarProvider.defaultProps = {
};
SnackbarProvider.propTypes = {
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
PropTypes.func,
]).isRequired,
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.func])
.isRequired,
service: PropTypes.shape({
setServiceImplementation: PropTypes.func,
}),
@@ -137,7 +126,12 @@ export const withSnackbar = Component => {
const snackbarContext = {
...useSnackbar(),
};
return <Component {...props} snackbarContext={snackbarContext} />;
return (
<Component
{...props}
snackbarContext={snackbarContext}
/>
);
};
};
platform/ui/src/contextProviders/UserAuthenticationProvider.tsx
+5 -19
View File
@@ -1,10 +1,4 @@
import React, {
createContext,
useCallback,
useContext,
useEffect,
useReducer,
} from 'react';
import React, { createContext, useCallback, useContext, useEffect, useReducer } from 'react';
import PropTypes from 'prop-types';
const DEFAULT_STATE = {
@@ -41,14 +35,9 @@ export function UserAuthenticationProvider({ children, service }) {
}
};
const [userAuthenticationState, dispatch] = useReducer(
userAuthenticationReducer,
DEFAULT_STATE
);
const [userAuthenticationState, dispatch] = useReducer(userAuthenticationReducer, DEFAULT_STATE);
const getState = useCallback(() => userAuthenticationState, [
userAuthenticationState,
]);
const getState = useCallback(() => userAuthenticationState, [userAuthenticationState]);
const setUser = useCallback(
user =>
@@ -61,9 +50,7 @@ export function UserAuthenticationProvider({ children, service }) {
[dispatch]
);
const getUser = useCallback(() => userAuthenticationState.user, [
userAuthenticationState,
]);
const getUser = useCallback(() => userAuthenticationState.user, [userAuthenticationState]);
const reset = useCallback(
() =>
@@ -143,5 +130,4 @@ UserAuthenticationProvider.propTypes = {
}).isRequired,
};
export const useUserAuthentication = () =>
useContext(UserAuthenticationContext);
export const useUserAuthentication = () => useContext(UserAuthenticationContext);
platform/ui/src/contextProviders/ViewportDialogProvider.tsx
+3 -16
View File
@@ -1,10 +1,4 @@
import React, {
useState,
createContext,
useContext,
useCallback,
useEffect,
} from 'react';
import React, { useState, createContext, useContext, useCallback, useEffect } from 'react';
import PropTypes from 'prop-types';
const DEFAULT_STATE = {
@@ -44,19 +38,12 @@ const ViewportDialogProvider = ({ children, service }) => {
}
}, [hide, service, show]);
return (
<Provider value={[viewportDialogState, { show, hide }]}>
{children}
</Provider>
);
return <Provider value={[viewportDialogState, { show, hide }]}>{children}</Provider>;
};
ViewportDialogProvider.propTypes = {
/** Children that will be wrapped with Modal Context */
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]).isRequired,
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
service: PropTypes.shape({
setServiceImplementation: PropTypes.func,
}),
platform/ui/src/contextProviders/ViewportGridProvider.tsx
+11 -36
View File
@@ -1,10 +1,4 @@
import React, {
createContext,
useCallback,
useContext,
useEffect,
useReducer,
} from 'react';
import React, { createContext, useCallback, useContext, useEffect, useReducer } from 'react';
import merge from 'lodash.merge';
import PropTypes from 'prop-types';
@@ -81,8 +75,7 @@ const determineActiveViewportId = (state: DefaultState, newViewports: Map) => {
// for the new viewports, we should rank them by the displaySetInstanceUIDs
// they are displaying and the orientation then we can find the active viewport
const currentActiveDisplaySetInstanceUIDs =
currentActiveViewport.displaySetInstanceUIDs;
const currentActiveDisplaySetInstanceUIDs = currentActiveViewport.displaySetInstanceUIDs;
// This doesn't take into account where stack viewport is converting to volumeViewport
// since in stack viewport we don't have a concept of "orientation" as a string
@@ -93,10 +86,8 @@ const determineActiveViewportId = (state: DefaultState, newViewports: Map) => {
const sortedViewports = Array.from(newViewports.values()).sort((a, b) => {
// Compare orientations
const aOrientationMatch =
a.viewportOptions.orientation === currentOrientation;
const bOrientationMatch =
b.viewportOptions.orientation === currentOrientation;
const aOrientationMatch = a.viewportOptions.orientation === currentOrientation;
const bOrientationMatch = b.viewportOptions.orientation === currentOrientation;
if (aOrientationMatch !== bOrientationMatch) {
return bOrientationMatch - aOrientationMatch;
}
@@ -217,11 +208,7 @@ export function ViewportGridProvider({ children, service }) {
continue;
}
const viewport = findOrCreateViewport(
position,
positionId,
options
);
const viewport = findOrCreateViewport(position, positionId, options);
if (!viewport) {
continue;
@@ -243,9 +230,7 @@ export function ViewportGridProvider({ children, service }) {
let xPos, yPos, w, h;
if (layoutOptions && layoutOptions[position]) {
({ x: xPos, y: yPos, width: w, height: h } = layoutOptions[
position
]);
({ x: xPos, y: yPos, width: w, height: h } = layoutOptions[position]);
} else {
w = 1 / numCols;
h = 1 / numRows;
@@ -260,10 +245,7 @@ export function ViewportGridProvider({ children, service }) {
y: yPos,
});
viewport.viewportLabel = getViewportLabel(
viewports,
viewport.viewportId
);
viewport.viewportLabel = getViewportLabel(viewports, viewport.viewportId);
if (!viewport.viewportOptions.presentationIds) {
viewport.viewportOptions.presentationIds = ViewportGridService.getPresentationIds(
@@ -275,9 +257,7 @@ export function ViewportGridProvider({ children, service }) {
}
activeViewportIdToSet =
activeViewportIdToSet ??
determineActiveViewportId(state, viewports) ??
'default';
activeViewportIdToSet ?? determineActiveViewportId(state, viewports) ?? 'default';
const ret = {
...state,
@@ -308,10 +288,7 @@ export function ViewportGridProvider({ children, service }) {
}
};
const [viewportGridState, dispatch] = useReducer(
viewportGridReducer,
DEFAULT_STATE
);
const [viewportGridState, dispatch] = useReducer(viewportGridReducer, DEFAULT_STATE);
const getState = useCallback(() => {
return viewportGridState;
@@ -411,10 +388,8 @@ export function ViewportGridProvider({ children, service }) {
const api = {
getState,
setActiveViewportId: index => service.setActiveViewportId(index),
setDisplaySetsForViewport: props =>
service.setDisplaySetsForViewports([props]),
setDisplaySetsForViewports: props =>
service.setDisplaySetsForViewports(props),
setDisplaySetsForViewport: props => service.setDisplaySetsForViewports([props]),
setDisplaySetsForViewports: props => service.setDisplaySetsForViewports(props),
setLayout: layout => service.setLayout(layout),
reset: () => service.reset(),
set: gridLayoutState => service.setState(gridLayoutState), // run it through the service itself since we want to publish events
platform/ui/src/contextProviders/index.js
+6 -30
View File
@@ -1,42 +1,18 @@
export {
default as DialogProvider,
useDialog,
withDialog,
} from './DialogProvider';
export { default as DialogProvider, useDialog, withDialog } from './DialogProvider';
export { default as DragAndDropProvider } from './DragAndDropProvider';
export {
default as ModalProvider,
useModal,
withModal,
ModalConsumer,
} from './ModalProvider';
export { default as ModalProvider, useModal, withModal, ModalConsumer } from './ModalProvider';
export {
ImageViewerContext,
ImageViewerProvider,
useImageViewer,
} from './ImageViewerProvider';
export { ImageViewerContext, ImageViewerProvider, useImageViewer } from './ImageViewerProvider';
export { CineContext, default as CineProvider, useCine } from './CineProvider';
export {
default as SnackbarProvider,
useSnackbar,
withSnackbar,
} from './SnackbarProvider';
export { default as SnackbarProvider, useSnackbar, withSnackbar } from './SnackbarProvider';
export {
default as ViewportDialogProvider,
useViewportDialog,
} from './ViewportDialogProvider';
export { default as ViewportDialogProvider, useViewportDialog } from './ViewportDialogProvider';
export {
ViewportGridContext,
ViewportGridProvider,
useViewportGrid,
} from './ViewportGridProvider';
export { ViewportGridContext, ViewportGridProvider, useViewportGrid } from './ViewportGridProvider';
export {
UserAuthenticationContext,