DouglasConnect / jsme-react

11 stars 13 forks source link

The width value of the Jsme component is displayed incorrectly in the modal window #21

Open hellhorse123 opened 7 months ago

hellhorse123 commented 7 months ago

In this React TS component i get next behavior: After reopen Modal window, my Jsme drawer scene become this width:

Screenshot 2023-12-29 at 08 20 36 Screenshot 2023-12-29 at 08 20 59

If you click where the scene should be (sometimes several times), everything returns to normal

import { useEffect, useState } from "react";
import { Jsme } from "jsme-react";

interface ModalProps {
  onOk: any;
  onCancel: (e: React.MouseEvent) => void;
  defaultSmilesValue: string;
  isModalOpen: boolean;
}

export const ModalContentDrawer: React.FC<ModalProps> = ({
  onOk,
  onCancel,
  defaultSmilesValue,
  isModalOpen,
  isLoading,
}) => {
  const [drawerSmiles, setDrawerSmiles] = useState(defaultSmilesValue);

  useEffect(() => {
    setDrawerSmiles(defaultSmilesValue);
  }, [defaultSmilesValue]);

  return (
    <ModalComponent
      modalTitle={"Structure"}
      isModalOpen={isModalOpen}
      onOk={onOk}
      onCancel={onCancel}
      width={930}
    >
      <div className="modal-drawer-container">
        <Jsme
          width="100%"
          height="460px"
          options="newlook, border"
          smiles={drawerSmiles}
          onChange={setDrawerSmiles}
        />
      </div>
    </ModalComponent>
  );
};