sefs.md

export interface ConfirmProps {
  afterClose?: () => void;
  onClickClose?: (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) => void;
  onOk?: (
    event:
      | React.MouseEvent<HTMLButtonElement, MouseEvent>
      | React.KeyboardEvent<HTMLButtonElement>
  ) => void;
  isVisible?: boolean;
  title?: string;
  onClosed?: () => void;
  confirmButtonText?: string;
  cancelButtonText?: string;
  message?: string;
  contents?: (
    onClickClose: ConfirmProps["onClickClose"],
    onClickOk: ConfirmProps["onOk"],
    message?: string
  ) => any;
}

const Confirm = ({
  afterClose = () => {},
  onClickClose = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {},
  onOk: onClickOk = (
    event:
      | React.MouseEvent<HTMLButtonElement, MouseEvent>
      | React.KeyboardEvent<HTMLButtonElement>
  ) => {},
  isVisible = true,
  title = "",
  onClosed = () => {},
  confirmButtonText = "Confirm",
  cancelButtonText = "Cancel",
  message = "",
  contents = (
    onClickCloseContent = (
      event: React.MouseEvent<HTMLButtonElement, MouseEvent>
    ) => {},
    onOkContent = (
      event:
        | React.MouseEvent<HTMLButtonElement, MouseEvent>
        | React.KeyboardEvent<HTMLButtonElement>
    ) => {},
    contentMessage = ""
  ) => (
    <>
      <ModalBody className="warnModalBody">{contentMessage}</ModalBody>
      <ModalFooter className="modalFooter">
        <Button
          onClick={onOkContent}
          onKeyDown={(e: any) => e.key === "enter" && onOkContent(e)}
          color="primary"
        >
          {confirmButtonText}
        </Button>
        <Button color="secondary" onClick={onClickCloseContent}>
          {cancelButtonText}
        </Button>
      </ModalFooter>
    </>
  )
}: ConfirmProps) => {
  const [isOpen, setIsOpen, toggle] = useModal(isVisible);

  const onClickCloseHandler = (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) => {
    onClickClose(event);
    setIsOpen(false);
  };

  const onOkHandler = (
    event:
      | React.MouseEvent<HTMLButtonElement, MouseEvent>
      | React.KeyboardEvent<HTMLButtonElement>
  ) => {
    onClickOk(event);
    setIsOpen(false);
  };

  const onClosedHandler = () => {
    onClosed();
    afterClose();
  };

  return (
    <Modal
      isOpen={isOpen}
      toggle={toggle}
      onClosed={onClosedHandler}
      className="modalDialog"
      contentClassName="modalContent"
      data-testid="modal-confirm"
    >
      <ModalHeader toggle={onClickCloseHandler}>{title}</ModalHeader>
      {contents(onClickCloseHandler, onOkHandler, message)}
    </Modal>
  );
};