Reactによる確認ダイアログの実装サンプル

確認ダイアログのReactコンポーネント meets kintone

import React, { FC, useCallback, useState } from "react";
import { Dialog } from "@kintone/kintone-ui-component";
import { Button } from "../Button";

type EventHandler = (e: React.SyntheticEvent<EventTarget>) => void;

// https://kintone-labs.github.io/kintone-ui-component/latest/Reference/Dialog/
interface ConfirmDialogProps {
  isVisible: boolean;
  title: string;
  content: string;
  close: () => void;
  onClickOkButton: EventHandler;
}

const okButtonStyle: React.CSSProperties = {
  color: "white",
  background: "#e74c3c",
};

const createButtons = (
  onClickOkButton: EventHandler,
  onClickCancelButton: EventHandler
) => {
  return (
    <>
      <Button label="キャンセル" onClick={onClickCancelButton} />
      <Button label="OK" onClick={onClickOkButton} style={okButtonStyle} />
    </>
  );
};

export const ConfirmDialog: FC<ConfirmDialogProps> = ({
  isVisible,
  title,
  content,
  close,
  onClickOkButton,
}) => {
  const onClickOkButtonWrapper: EventHandler = (e) => {
    console.log("dialog.onClickOkButton");
    onClickOkButton(e);
    close();
  };

  const onClickCancelButton: EventHandler = () => {
    console.log("dialog.onClickCancelButton");
    close();
  };

  const buttons = createButtons(onClickOkButtonWrapper, onClickCancelButton);

  return (
    <Dialog
      showCloseButton={false}
      header={title}
      content={content}
      footer={buttons}
      isVisible={isVisible}
    />
  );
};

export const useConfirmDialogOpener = (): [boolean, () => void, () => void] => {
  const [currentVisible, setVisible] = useState(false);

  const open = useCallback(() => {
    setVisible(true);
  }, []);

  const close = useCallback(() => {
    setVisible(false);
  }, []);

  return [currentVisible, open, close];
};

使い方

export const App = () => {

  const onClickOkButton = () => {
    // implement deleting
  };

  const [isVisible, open, close] = useConfirmDialogOpener();

  return (
    <div style={{ display: "flex" }}>
      <Button label="削除" onClick={open} type="submit" />
      <ConfirmDialog
        title="削除"
        content="削除します。よろしいですか？"
        isVisible={isVisible}
        close={close}
        onClickOkButton={onClickOkButton}
      />
    </div>
  );
};