refactor: update react science to version 0.34.0

replace Modal component from react-science with Dialog component from blueprintjs replace parts of the Tabs component from react-science with Tabs component from blueprintjs fix: confirmation box
cheminfo · Feb 12, 2024 · fe44670 · fe44670
1 parent c5ad409
commit fe44670
Show file tree

Hide file tree

Showing 20 changed files with 509 additions and 544 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -105,7 +105,7 @@
     "react-ocl-nmr": "^3.0.1",
     "react-plot": "^1.4.2",
     "react-rnd": "^10.4.1",
-    "react-science": "^0.32.2",
+    "react-science": "^0.34.0",
     "react-slider": "^2.0.6",
     "react-table": "^7.8.0",
     "react-transition-group": "^4.4.5",

diff --git a/src/component/elements/popup/Modal/ConfirmDialog.tsx b/src/component/elements/popup/Modal/ConfirmDialog.tsx
@@ -1,14 +1,11 @@
 /** @jsxImportSource @emotion/react */
+import { DialogBody } from '@blueprintjs/core';
 import { css } from '@emotion/react';
 import { CSSProperties, ReactNode, useCallback } from 'react';
 
 const styles = css`
-  display: block;
-  border-radius: 5px;
-  overflow: hidden;
-  width: 30vw;
-  min-width: 350px;
-  border-top: 10px solid #ed0000;
+  background-color: white;
+  padding: 0;
 
   .message {
     font-weight: bold;
@@ -67,15 +64,24 @@ interface ConfirmationDialogProps {
   message: ReactNode;
   render?: (data: { message: ReactNode; className: string }) => ReactNode;
   id?: string;
+  disableDefaultStyle?: boolean;
 }
 
+const defaultStyle: CSSProperties = {
+  display: 'block',
+  borderRadius: '5px',
+  minWidth: '400px',
+  borderTop: '10px solid #ed0000',
+};
+
 function ConfirmationDialog({
   style = {},
   buttons = [],
   onClose,
   message,
   render,
   id,
+  disableDefaultStyle = false,
 }: ConfirmationDialogProps) {
   const optionsHandler = useCallback(
     (
@@ -91,25 +97,30 @@ function ConfirmationDialog({
   );
 
   return (
-    <div style={style} css={styles} data-testid={id}>
-      {render ? (
-        render({ message, className: 'message' })
-      ) : (
-        <p className="message">{message}</p>
-      )}
-      <div className="buttons-container">
-        {buttons.map((option) => (
-          <button
-            key={option.text}
-            type="button"
-            onClick={(e) => optionsHandler(e, option)}
-            style={option.style && option.style}
-          >
-            {option.text}
-          </button>
-        ))}
+    <DialogBody css={styles}>
+      <div
+        style={{ ...(!disableDefaultStyle && defaultStyle), ...style }}
+        data-testid={id}
+      >
+        {render ? (
+          render({ message, className: 'message' })
+        ) : (
+          <p className="message">{message}</p>
+        )}
+        <div className="buttons-container">
+          {buttons.map((option) => (
+            <button
+              key={option.text}
+              type="button"
+              onClick={(e) => optionsHandler(e, option)}
+              style={option.style && option.style}
+            >
+              {option.text}
+            </button>
+          ))}
+        </div>
       </div>
-    </div>
+    </DialogBody>
   );
 }
 

diff --git a/src/component/hooks/useSaveSettings.tsx b/src/component/hooks/useSaveSettings.tsx
@@ -1,7 +1,8 @@
+import { Dialog } from '@blueprintjs/core';
 import { Formik, FormikProps } from 'formik';
 import { Workspace } from 'nmr-load-save';
 import { useRef, forwardRef } from 'react';
-import { Modal, useOnOff } from 'react-science/ui';
+import { useOnOff } from 'react-science/ui';
 import * as Yup from 'yup';
 
 import { usePreferences } from '../context/PreferencesContext';
@@ -96,13 +97,13 @@ export function useSaveSettings() {
         onClose: closeDialog,
       };
       return (
-        <Modal
-          hasCloseButton
+        <Dialog
+          onClose={closeDialog}
           isOpen={isOpenDialog}
-          onRequestClose={closeDialog}
+          title="Save workspace"
         >
-          <ConfirmationDialog {...alertConfig} />
-        </Modal>
+          <ConfirmationDialog disableDefaultStyle {...alertConfig} />
+        </Dialog>
       );
     },
   };