refactor database structure search modal

src/component/panels/databasePanel/DatabasePanel.tsx

@@ -10,7 +10,6 @@ import {
 import { DatabaseNMREntry, mapRanges } from 'nmr-processing';
 import OCL from 'openchemlib/full';
 import { useCallback, useState, useRef, memo, useEffect, useMemo } from 'react';
-import { BsHexagon, BsHexagonFill } from 'react-icons/bs';
 import { FaICursor } from 'react-icons/fa';
 import { IoSearchOutline } from 'react-icons/io5';
 import { useAccordionContext } from 'react-science/ui';
@@ -27,12 +26,10 @@ import {
 import { useChartData } from '../../context/ChartContext';
 import { useDispatch } from '../../context/DispatchContext';
 import { usePreferences } from '../../context/PreferencesContext';
-import Button from '../../elements/Button';
 import Input from '../../elements/Input';
 import Select from '../../elements/Select';
 import ToggleButton from '../../elements/ToggleButton';
 import { useAlert } from '../../elements/popup/Alert';
-import { positions, transitions, useModal } from '../../elements/popup/Modal';
 import { useFormatNumberByNucleus } from '../../hooks/useFormatNumberByNucleus';
 import useToolsFunctions from '../../hooks/useToolsFunctions';
 import { DISPLAYER_MODE } from '../../reducer/core/Constants';
@@ -84,7 +81,6 @@ function DatabasePanelInner({
 }: DatabaseInnerProps) {
   const dispatch = useDispatch();
   const alert = useAlert();
-  const modal = useModal();
   const { item } = useAccordionContext('Databases');
 
   const { handleChangeOption } = useToolsFunctions();
@@ -329,19 +325,6 @@ function DatabasePanelInner({
   const searchByStructureHandler = (idCodeValue: string) => {
     setIdCode(idCodeValue);
   };
-  const openSearchByStructure = () => {
-    modal.show(
-      <DatabaseStructureSearchModal
-        onChange={searchByStructureHandler}
-        idCode={idCode}
-      />,
-      {
-        position: positions.MIDDLE,
-        transition: transitions.SCALE,
-        isBackgroundBlur: false,
-      },
-    );
-  };
 
   return (
     <div
@@ -407,25 +390,10 @@ function DatabasePanelInner({
             onClear={clearHandler}
             canClear
           />
-          <Button.Done
-            fill="clear"
-            onClick={openSearchByStructure}
-            style={{ marginLeft: '5px' }}
-          >
-            {!idCode ? (
-              <BsHexagon
-                style={{
-                  fontSize: '14px',
-                }}
-              />
-            ) : (
-              <BsHexagonFill
-                style={{
-                  fontSize: '14px',
-                }}
-              />
-            )}
-          </Button.Done>
+          <DatabaseStructureSearchModal
+            onChange={searchByStructureHandler}
+            idCode={idCode}
+          />
         </DefaultPanelHeader>
       )}
       {isFlipped && (

src/component/panels/databasePanel/DatabaseStructureSearchModal.tsx

@@ -1,8 +1,9 @@
 /** @jsxImportSource @emotion/react */
+import { BsHexagon, BsHexagonFill } from 'react-icons/bs';
 import { StructureEditor } from 'react-ocl/full';
+import { Modal, useOnOff } from 'react-science/ui';
 
-import CloseButton from '../../elements/CloseButton';
-import { ModalStyles } from '../../modal/ModalStyle';
+import Button from '../../elements/Button';
 
 interface DatabaseStructureSearchModalProps {
   onChange: (idCode: string) => void;
@@ -15,21 +16,58 @@ export function DatabaseStructureSearchModal({
   idCode,
   onClose,
 }: DatabaseStructureSearchModalProps) {
-  return (
-    <div css={ModalStyles}>
-      <div className="header handle">
-        <span>Search by structure</span>
-        <CloseButton onClick={onClose} className="close-bt" />
-      </div>
+  const [isOpenDialog, openDialog, closeDialog] = useOnOff(false);
 
-      <div className="main-content">
-        <StructureEditor
-          initialIDCode={idCode}
-          svgMenu
-          fragment
-          onChange={(molFile, molecule, idCode) => onChange(idCode)}
-        />
-      </div>
-    </div>
+  return (
+    <>
+      <Button.Done
+        fill="clear"
+        onClick={openDialog}
+        style={{ marginLeft: '5px' }}
+      >
+        {!idCode ? (
+          <BsHexagon
+            style={{
+              fontSize: '14px',
+            }}
+          />
+        ) : (
+          <BsHexagonFill
+            style={{
+              fontSize: '14px',
+            }}
+          />
+        )}
+      </Button.Done>
+      <Modal
+        hasCloseButton
+        isOpen={isOpenDialog}
+        onRequestClose={() => {
+          onClose?.();
+          closeDialog();
+        }}
+        maxWidth={1000}
+      >
+        <Modal.Header>
+          <div
+            style={{
+              color: 'rgb(0, 93, 158)',
+              width: '100%',
+              textAlign: 'center',
+            }}
+          >
+            <span>Search by structure</span>
+          </div>
+        </Modal.Header>
+        <Modal.Body>
+          <StructureEditor
+            initialIDCode={idCode}
+            svgMenu
+            fragment
+            onChange={(molFile, molecule, idCode) => onChange(idCode)}
+          />
+        </Modal.Body>
+      </Modal>
+    </>
   );
 }