+
{
{/* TODO: NOTIFICATION API DEFINITION - OHIF-112 */}
-
-
-
-
- }
+ actions={[
+ {
+ type: 'cancel',
+ text: 'No',
+ value: 0,
+ },
+ {
+ type: 'secondary',
+ text: 'No, do not ask again',
+ value: -1,
+ },
+ {
+ type: 'primary',
+ text: 'Yes',
+ value: 1,
+ },
+ ]}
+ onSubmit={value => {
+ window.alert(value);
+ }}
/>
diff --git a/platform/ui/src/components/ViewportPane/ViewportPane.jsx b/platform/ui/src/components/ViewportPane/ViewportPane.jsx
index 2388fa229..b1374ca14 100644
--- a/platform/ui/src/components/ViewportPane/ViewportPane.jsx
+++ b/platform/ui/src/components/ViewportPane/ViewportPane.jsx
@@ -39,6 +39,7 @@ function ViewportPane({
// onInteraction...
// https://reactjs.org/docs/events.html#mouse-events
// https://stackoverflow.com/questions/8378243/catch-scrolling-event-on-overflowhidden-element
+ onMouseDown={onInteraction}
onClick={onInteraction}
onScroll={onInteraction}
onWheel={onInteraction}
@@ -76,6 +77,6 @@ const noop = () => {};
ViewportPane.defaultProps = {
onInteraction: noop,
-}
+};
export default ViewportPane;
diff --git a/platform/ui/src/components/index.js b/platform/ui/src/components/index.js
index cc224c2bd..39c42d01f 100644
--- a/platform/ui/src/components/index.js
+++ b/platform/ui/src/components/index.js
@@ -12,7 +12,6 @@ import InputLabelWrapper from './InputLabelWrapper';
import InputMultiSelect from './InputMultiSelect';
import InputText from './InputText';
import Label from './Label';
-import MeasurementsPanel from './MeasurementsPanel';
import MeasurementTable from './MeasurementTable';
import Modal from './Modal';
import NavBar from './NavBar';
@@ -21,12 +20,13 @@ import Select from './Select';
import SegmentationTable from './SegmentationTable';
import SidePanel from './SidePanel';
import StudyBrowser from './StudyBrowser';
+import StudyItem from './StudyItem';
import StudyListExpandedRow from './StudyListExpandedRow';
+import StudyListFilter from './StudyListFilter';
import StudyListPagination from './StudyListPagination';
import { StudyListTable, StudyListTableRow } from './StudyListTable';
+import StudySummary from './StudySummary';
import Svg from './Svg';
-import StudyItem from './StudyItem';
-import StudyListFilter from './StudyListFilter';
import Table from './Table';
import TableBody from './TableBody';
import TableCell from './TableCell';
@@ -61,7 +61,6 @@ export {
InputMultiSelect,
InputText,
Label,
- MeasurementsPanel,
MeasurementTable,
Modal,
NavBar,
@@ -76,6 +75,7 @@ export {
StudyListPagination,
StudyListTable,
StudyListTableRow,
+ StudySummary,
Svg,
Table,
TableBody,
diff --git a/platform/ui/src/contextProviders/DragAndDropProvider.jsx b/platform/ui/src/contextProviders/DragAndDropProvider.jsx
index 4cd4e360e..018464123 100644
--- a/platform/ui/src/contextProviders/DragAndDropProvider.jsx
+++ b/platform/ui/src/contextProviders/DragAndDropProvider.jsx
@@ -1,9 +1,13 @@
import React from 'react';
-import { DndProvider } from "react-dnd";
+import PropTypes from 'prop-types';
+import { DndProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import TouchBackend from 'react-dnd-touch-backend';
-const isTouchDevice = typeof window !== `undefined` && !!('ontouchstart' in window || navigator.maxTouchPoints);
+// TODO: this is false when it should not be :thinking:
+const isTouchDevice =
+ typeof window !== `undefined` &&
+ !!('ontouchstart' in window || navigator.maxTouchPoints);
/**
* Relevant:
@@ -13,9 +17,11 @@ const isTouchDevice = typeof window !== `undefined` && !!('ontouchstart' in wind
* Docs:
* http://react-dnd.github.io/react-dnd/docs/api/drag-drop-context
*/
-export default function DragAndDropProvider({children}) {
- const backend = isTouchDevice ? TouchBackend : HTML5Backend;
- const opts = isTouchDevice ? { enableMouseEvents: true } : {};
+function DragAndDropProvider({ children }) {
+ const backend = HTML5Backend; // isTouchDevice ? TouchBackend : HTML5Backend;
+ const opts = {}; // isTouchDevice ? { enableMouseEvents: true } : {};
+
+ console.log('using... touch backend?', isTouchDevice);
return (
@@ -23,3 +29,9 @@ export default function DragAndDropProvider({children}) {
);
}
+
+DragAndDropProvider.propTypes = {
+ children: PropTypes.any,
+};
+
+export default DragAndDropProvider;
diff --git a/platform/ui/src/contextProviders/ViewportDialogProvider.jsx b/platform/ui/src/contextProviders/ViewportDialogProvider.jsx
index e412188ee..325ed3ea3 100644
--- a/platform/ui/src/contextProviders/ViewportDialogProvider.jsx
+++ b/platform/ui/src/contextProviders/ViewportDialogProvider.jsx
@@ -7,10 +7,20 @@ import React, {
} from 'react';
import PropTypes from 'prop-types';
-const DEFAULT_OPTIONS = {
- content: null,
- contentProps: null,
- customClassName: null,
+const DEFAULT_STATE = {
+ viewportIndex: null,
+ message: undefined,
+ type: 'info', // "error" | "warning" | "info" | "success"
+ actions: undefined, // array of { type, text, value }
+ // dismissable?
+ // blockInteraction (single viewport? allViewports? everything?)
+ // TODO: Buttons --> type/color? text? value?
+ onSubmit: () => {
+ console.log('btn value?');
+ },
+ onDismiss: () => {
+ console.log('dismiss? -1');
+ },
};
const ViewportDialogContext = createContext(null);
@@ -18,42 +28,26 @@ const { Provider } = ViewportDialogContext;
export const useViewportDialog = () => useContext(ViewportDialogContext);
-const ViewportDialogProvider = ({
- children,
- dialog: Dialog,
- service,
- viewportIndex,
-}) => {
- const [options, setOptions] = useState(DEFAULT_OPTIONS);
-
- const show = useCallback((props) => setOptions({ ...options, ...props }), [
- options,
- ]);
-
- const hide = useCallback(() => setOptions(DEFAULT_OPTIONS), []);
+const ViewportDialogProvider = ({ children, service }) => {
+ const [viewportDialogState, setViewportDialogState] = useState(DEFAULT_STATE);
+ const show = useCallback(
+ params => setViewportDialogState({ ...viewportDialogState, ...params }),
+ [viewportDialogState]
+ );
+ const hide = useCallback(() => setViewportDialogState(DEFAULT_STATE), []);
useEffect(() => {
if (service) {
- service.setServiceImplementation({ hide, show, viewportIndex });
+ service.setServiceImplementation({
+ hide,
+ show,
+ });
}
- }, [hide, service, show, viewportIndex]);
-
- const {
- content: ViewportDialogContent,
- contentProps,
- customClassName,
- } = options;
+ }, [hide, service, show]);
return (
-
-
- {ViewportDialogContent && (
-
- )}
- {children}
-
+
+ {children}
);
};
@@ -64,16 +58,9 @@ ViewportDialogProvider.propTypes = {
PropTypes.arrayOf(PropTypes.node),
PropTypes.node,
]).isRequired,
- /** dialog component */
- dialog: PropTypes.oneOfType([
- PropTypes.arrayOf(PropTypes.node),
- PropTypes.node,
- PropTypes.func,
- ]).isRequired,
service: PropTypes.shape({
setServiceImplementation: PropTypes.func,
}),
- viewportIndex: PropTypes.number,
};
export default ViewportDialogProvider;
diff --git a/platform/ui/src/contextProviders/ViewportDialogProvider.mdx b/platform/ui/src/contextProviders/ViewportDialogProvider.mdx
index ffc0ee55e..34e66c1b8 100644
--- a/platform/ui/src/contextProviders/ViewportDialogProvider.mdx
+++ b/platform/ui/src/contextProviders/ViewportDialogProvider.mdx
@@ -28,19 +28,26 @@ component across all application.
const ViewportNotification = ({ hide }) => {
return (
-
-
-
-