Merge pull request #143 from Exabyte-io/update/SOF-7051

SOF-7051: replace SaveActionDialog with renderSaveActionDialog
Exabyte-io · Nov 8, 2023 · 6ecbec9 · 6ecbec9
2 parents 5044dfc + 4146057
commit 6ecbec9
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 49 deletions.
diff --git a/src/MaterialsDesigner.jsx b/src/MaterialsDesigner.jsx
@@ -19,6 +19,7 @@ class MaterialsDesigner extends mix(React.Component).with(FullscreenComponentMix
         super(props);
         this.state = {
             isFullscreen: false,
+            importMaterialsDialogProps: null,
         };
     }
 
@@ -36,6 +37,21 @@ class MaterialsDesigner extends mix(React.Component).with(FullscreenComponentMix
         this.setState({ isFullscreen: !this.state.isFullscreen });
     };
 
+    renderDefaultImportModal = () => {
+        return this.state.importMaterialsDialogProps ? (
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            <DefaultImportModalDialog open {...this.state.importMaterialsDialogProps} />
+        ) : null;
+    };
+
+    openDefaultImportModal = (props) => {
+        this.setState({ importMaterialsDialogProps: props });
+    };
+
+    closeDefaultImportModal = () => {
+        this.setState({ importMaterialsDialogProps: null });
+    };
+
     render() {
         return (
             <this.FullscreenHandlerComponent
@@ -71,8 +87,13 @@ class MaterialsDesigner extends mix(React.Component).with(FullscreenComponentMix
                                     onExport={this.props.onExport}
                                     onSave={this.props.onSave}
                                     onExit={this.props.onExit}
-                                    ImportModal={this.props.ImportModal || DefaultImportModalDialog}
-                                    SaveActionDialog={this.props.SaveActionDialog}
+                                    openImportModal={
+                                        this.props.openImportModal || this.openDefaultImportModal
+                                    }
+                                    closeImportModal={
+                                        this.props.closeImportModal || this.closeDefaultImportModal
+                                    }
+                                    openSaveActionDialog={this.props.openSaveActionDialog}
                                     onGenerateSupercell={this.props.onGenerateSupercell}
                                     onGenerateSurface={this.props.onGenerateSurface}
                                     onSetBoundaryConditions={this.props.onSetBoundaryConditions}
@@ -81,6 +102,7 @@ class MaterialsDesigner extends mix(React.Component).with(FullscreenComponentMix
                                     }
                                     defaultMaterialsSet={this.props.defaultMaterialsSet}
                                 />
+                                {this.renderDefaultImportModal()}
                                 <div className="bgm-dark col-xs-12">
                                     <ItemsList
                                         className="col-md-2 p-5"
@@ -165,8 +187,9 @@ MaterialsDesigner.propTypes = {
     onSave: PropTypes.func,
     onExit: PropTypes.func,
 
-    ImportModal: PropTypes.func,
-    SaveActionDialog: PropTypes.func,
+    openImportModal: PropTypes.func,
+    closeImportModal: PropTypes.func,
+    openSaveActionDialog: PropTypes.func,
 
     onRemove: PropTypes.func,
 

diff --git a/src/MaterialsDesignerContainer.jsx b/src/MaterialsDesignerContainer.jsx
@@ -128,9 +128,11 @@ MaterialsDesignerContainer.propTypes = {
     // eslint-disable-next-line react/require-default-props
     onExit: PropTypes.func,
     // eslint-disable-next-line react/require-default-props
-    ImportModal: PropTypes.func,
+    openImportModal: PropTypes.func,
     // eslint-disable-next-line react/require-default-props
-    SaveActionDialog: PropTypes.func,
+    closeImportModal: PropTypes.func,
+    // eslint-disable-next-line react/require-default-props
+    openSaveActionDialog: PropTypes.func,
     // eslint-disable-next-line react/require-default-props
     materialsSave: PropTypes.func,
     // eslint-disable-next-line react/require-default-props

diff --git a/src/components/header_menu/HeaderMenuToolbar.jsx b/src/components/header_menu/HeaderMenuToolbar.jsx
@@ -48,9 +48,7 @@ class HeaderMenuToolbar extends React.Component {
         this.state = {
             showSupercellDialog: false,
             showSurfaceDialog: false,
-            showImportMaterialsDialog: false,
             showExportMaterialsDialog: false,
-            showSaveMaterialsDialog: false,
             showCombinatorialDialog: false,
             showInterpolateDialog: false,
             showThreejsEditorModal: false,
@@ -65,10 +63,10 @@ class HeaderMenuToolbar extends React.Component {
     };
 
     renderIOMenu() {
-        const { SaveActionDialog, onExit } = this.props;
+        const { openSaveActionDialog, onExit } = this.props;
         return (
             <ButtonActivatedMenuMaterialUI title="Input/Output">
-                <MenuItem onClick={() => this.setState({ showImportMaterialsDialog: true })}>
+                <MenuItem onClick={this.renderImportModal}>
                     <ListItemIcon>
                         <AddCircleIcon />
                     </ListItemIcon>
@@ -80,10 +78,7 @@ class HeaderMenuToolbar extends React.Component {
                     </ListItemIcon>
                     Export
                 </MenuItem>
-                <MenuItem
-                    disabled={!SaveActionDialog}
-                    onClick={() => this.setState({ showSaveMaterialsDialog: true })}
-                >
+                <MenuItem disabled={!openSaveActionDialog} onClick={this.renderSaveActionDialog}>
                     <ListItemIcon>
                         <SaveIcon />
                     </ListItemIcon>
@@ -277,36 +272,28 @@ class HeaderMenuToolbar extends React.Component {
         );
     }
 
-    renderImportModal() {
-        const { showImportMaterialsDialog } = this.state;
-        const { ImportModal, onAdd, defaultMaterialsSet } = this.props;
-        return ImportModal ? (
-            <ImportModal
-                modalId="defaultImportModalDialog"
-                show={showImportMaterialsDialog}
-                onHide={() => this.setState({ showImportMaterialsDialog: false })}
-                onSubmit={(materials) => {
-                    onAdd(materials);
-                    this.setState({ showImportMaterialsDialog: false });
-                }}
-                onClose={() => this.setState({ showImportMaterialsDialog: false })}
-                defaultMaterialsSet={defaultMaterialsSet}
-            />
-        ) : null;
-    }
+    renderImportModal = () => {
+        const { onAdd, openImportModal, closeImportModal, defaultMaterialsSet } = this.props;
+        return openImportModal
+            ? openImportModal({
+                  modalId: "defaultImportModalDialog",
+                  show: true,
+                  onSubmit: (materials) => {
+                      onAdd(materials);
+                      closeImportModal();
+                  },
+                  onClose: closeImportModal,
+                  defaultMaterialsSet,
+              })
+            : null;
+    };
 
-    renderSaveActionDialog() {
-        const { SaveActionDialog, material, onSave } = this.props;
-        const { showSaveMaterialsDialog } = this.state;
-        return SaveActionDialog ? (
-            <SaveActionDialog
-                show={showSaveMaterialsDialog}
-                material={material}
-                onClose={() => this.setState({ showSaveMaterialsDialog: false })}
-                onSubmit={onSave}
-            />
-        ) : null;
-    }
+    renderSaveActionDialog = () => {
+        const { openSaveActionDialog, material, onSave } = this.props;
+        return openSaveActionDialog
+            ? openSaveActionDialog({ show: true, material, onSubmit: onSave })
+            : null;
+    };
 
     renderThreejsEditorModal() {
         const { onAdd, materials } = this.props;
@@ -352,6 +339,7 @@ class HeaderMenuToolbar extends React.Component {
             maxCombinatorialBasesCount,
         } = this.props;
         if (showThreejsEditorModal) return this.renderThreejsEditorModal();
+
         return (
             <Toolbar
                 className={setClass(className, "materials-designer-header-menu")}
@@ -389,16 +377,12 @@ class HeaderMenuToolbar extends React.Component {
                     onHide={() => this.setState({ showBoundaryConditionsDialog: false })}
                 />
 
-                {this.renderImportModal()}
-
                 <ExportActionDialog
                     show={showExportMaterialsDialog}
                     onClose={() => this.setState({ showExportMaterialsDialog: false })}
                     onSubmit={onExport}
                 />
 
-                {this.renderSaveActionDialog()}
-
                 <CombinatorialBasisDialog
                     title="Generate Combinatorial Set"
                     modalId="combinatorialSetModal"
@@ -458,13 +442,15 @@ HeaderMenuToolbar.propTypes = {
     onGenerateSurface: PropTypes.func.isRequired,
     onSetBoundaryConditions: PropTypes.func.isRequired,
 
-    ImportModal: PropTypes.func.isRequired,
-    SaveActionDialog: PropTypes.func.isRequired,
+    openImportModal: PropTypes.func.isRequired,
+    closeImportModal: PropTypes.func.isRequired,
     toggleFullscreen: PropTypes.func.isRequired,
+    openSaveActionDialog: PropTypes.func,
 };
 
 HeaderMenuToolbar.defaultProps = {
     className: undefined,
+    openSaveActionDialog: null,
 };
 
 export default HeaderMenuToolbar;