OHIF-208 (#1842)

* Set measurement as active * Add basic dialog component * Update styles and prop types * Jump to image * Update dialog * Format date * Update summary to use primary modalities * delete empty studySummary page * add missing PropTypes import * fix for accidental sync'd viewports * CR Updates * CR Update avoid cache of measurements * Use get measurement * Add comment to edit function * Remove request and merge modalities from series * Update dependency: react-cornerstone-viewport@2.3.9 react-cornerstone-viewport * @ohif/extension-cornerstone: 2.3.8 → 2.3.9 * @ohif/extension-dicom-sr: 2.3.8 → 2.3.9 * Update extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.js Co-authored-by: Danny Brown <danny.ri.brown@gmail.com> * Add debugs * remove console.debug * Update frameindex to imageindex * Use new rcv debounced function * Fix hovering * Update dialog text * Dismiss dialogs on esc * Update dependency: react-cornerstone-viewport@3.0.0 react-cornerstone-viewport * @ohif/extension-cornerstone: 2.3.9 → 3.0.0 * @ohif/extension-dicom-sr: 2.3.9 → 3.0.0 * OHIF-237 * remove console.debug * Remove dead code brought in from rebase * EmptyViewport should not display a message * Remove more dead code from rebase * fix variable naming * remove unused hook * bump yarn lock * formatting * Add arrow dialog * Filter based on trackedSeries Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>
2020-07-02 16:53:38 -04:00
1 parent ae05de18af
commit a156eadcb7
@@ -1,12 +1,83 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';

-const Dialog = ({ children }) => {
-  return <div className="absolute top-0 left-0">{children}</div>;
+import Footer from './Footer';
+import Body from './Body';
+import Header from './Header';
+
+const Dialog = ({
+  title,
+  text,
+  onClose,
+  noCloseButton,
+  actions,
+  onSubmit,
+  header: HeaderComponent,
+  body: BodyComponent,
+  footer: FooterComponent,
+  value: defaultValue
+}) => {
+  const [value, setValue] = useState(defaultValue);
+
+  const theme = 'bg-secondary-light';
+  const flex = 'flex flex-col';
+  const border = 'border-0 rounded-lg shadow-lg';
+  const outline = 'outline-none focus:outline-none';
+  const position = 'relative';
+  const width = 'w-full';
+
+  return (
+    <div
+      className={classNames(theme, flex, border, outline, position, width)}
+    >
+      <HeaderComponent
+        title={title}
+        noCloseButton={noCloseButton}
+        onClose={onClose}
+        value={value}
+        setValue={setValue}
+      />
+      <BodyComponent
+        text={text}
+        value={value}
+        setValue={setValue}
+      />
+      <FooterComponent
+        actions={actions}
+        onSubmit={onSubmit}
+        value={value}
+        setValue={setValue}
+      />
+    </div>
+  );
 };

 Dialog.propTypes = {
-  children: PropTypes.node,
+  title: PropTypes.string,
+  text: PropTypes.string,
+  onClose: PropTypes.func,
+  noCloseButton: PropTypes.bool,
+  header: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  footer: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  onSubmit: PropTypes.func.isRequired,
+  value: PropTypes.object,
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      text: PropTypes.string.isRequired,
+      value: PropTypes.any,
+      type: PropTypes.oneOf(['primary', 'secondary', 'cancel']).isRequired,
+    })
+  ).isRequired,
+};
+
+Dialog.defaultProps = {
+  header: Header,
+  footer: Footer,
+  body: Body,
+  value: {}
 };

 export default Dialog;