chore: remove react-bootstrap

Exabyte-io · Jul 31, 2024 · 88ab0fe · 88ab0fe
1 parent 61ac64d
commit 88ab0fe
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
     "scripts": {
         "prepublishOnly": "rm -rf dist; npm run transpile",
         "start": "cross-env PORT=3002 SKIP_PREFLIGHT_CHECK=true react-scripts start",
+        "start-20": "cross-env PORT=3002 SKIP_PREFLIGHT_CHECK=true react-scripts --openssl-legacy-provider start",
         "transpile": "babel --extensions '.js,.jsx,.ts,.tsx' --out-dir dist src && cp -r src/stylesheets dist/stylesheets",
         "prestart": "npm-link-shared ./node_modules/@exabyte-io/cove.js/node_modules . react",
         "postinstall": "npm run transpile",
@@ -47,7 +48,6 @@
         "jquery": "3.6.0",
         "mixwith": "^0.1.1",
         "prop-types": "^15.8.0",
-        "react-bootstrap": "0.32.4",
         "react-scripts": "^4.0.3",
         "typescript": "^4.9.5",
         "sass": "1.45.2",
@@ -74,7 +74,7 @@
         "@mat3ra/code": "^2024.3.25-3",
         "@mat3ra/esse": "2024.4.19-1",
         "@mat3ra/made": "2024.5.3-0",
-        "@exabyte-io/cove.js": "2024.2.21-1",
+        "@exabyte-io/cove.js": "git+https://github.com/Exabyte-io/cove.js.git#9053b10da33f4b95eb2eb4ee1a157450abb0b8fe",
         "@types/react": "^18.2.8",
         "@types/react-dom": "^18.2.4",
         "@types/underscore": "^1.11.9",

diff --git a/src/components/ModalDialog.jsx b/src/components/ModalDialog.jsx
@@ -1,7 +1,6 @@
-import setClass from "classnames";
+import Dialog from "@exabyte-io/cove.js/dist/mui/components/dialog/Dialog";
 import PropTypes from "prop-types";
 import React from "react";
-import { Modal } from "react-bootstrap";
 
 export class ModalDialog extends React.Component {
     constructor(props) {
@@ -27,21 +26,30 @@ export class ModalDialog extends React.Component {
     }
 
     render() {
-        const { className, isFullWidth, show, backdropColor, modalId } = this.props;
-        const setClassName = setClass(className, isFullWidth ? "full-page-overlay" : "");
-        if (show) {
-            document.body.classList.add("modal-backdrop-color-" + backdropColor);
-        }
+        const { className, isFullWidth, show, modalId } = this.props;
         return (
-            <Modal
+            <Dialog
                 id={modalId}
                 animation={false}
-                show={show}
-                onHide={this.onHide}
-                className={setClassName}
-            >
-                {this.renderBody()}
-            </Modal>
+                sx={{ height: "100%", width: "100%" }}
+                open={show}
+                fullWidth={isFullWidth}
+                maxWidth={false}
+                onClose={this.onHide}
+                className={className}
+                renderHeaderCustom={() => null}
+                renderFooterCustom={() => null}
+                PaperProps={{
+                    sx: {
+                        maxWidth: "100%",
+                        maxHeight: "100%",
+                        width: "100%",
+                        height: "100%",
+                        m: 0,
+                    },
+                }}
+                renderBodyCustom={this.renderBody}
+            />
         );
     }
 }

diff --git a/src/components/ThreejsEditorModal.jsx b/src/components/ThreejsEditorModal.jsx
@@ -1,7 +1,6 @@
 import { Made } from "@mat3ra/made";
 import PropTypes from "prop-types";
 import React from "react";
-import { ModalBody } from "react-bootstrap";
 import * as THREE from "three";
 import { RemoveMultipleSelectionGroupCommand } from "three/editor/js/commands/RemoveMultipleSelectionGroupCommand";
 import { SetSceneCommand } from "three/editor/js/commands/SetSceneCommand";
@@ -351,10 +350,10 @@ export class ThreejsEditorModal extends ModalDialog {
 
     renderBody() {
         return (
-            <ModalBody>
+            <>
                 <AlertDialog ref={(ref) => (this.alertRef = ref)} />
                 <div ref={(el) => this.initialize(el)} />
-            </ModalBody>
+            </>
         );
     }
 }