UIの再利用可能な確認ダイアログ

私たちは皆、それらに精通しているconfirm/cancel ダイアログウィンドウが、あなたの反応アプリケーションでそれを実装しようとしたことがありますか?
あなたのユーザーがアイテムを削除しようとするか、破壊的な行動をするときはいつでも、彼らが確かであるかどうかを彼らに尋ねることは良い習慣です!始めましょう!

Are you sure?

問題

ユーザーがアプリケーション内で破壊的なアクションを実行しようとするたびに、我々はプロセスを妨害し、確認を求める必要があります!確認を得た後、プロセスは続行します.我々はまた、アクションに関連するカスタムの質問をする必要があります.この種のフローを作成することにより、より良いユーザーエクスペリエンスを提供します.

ゴール

反応アプリケーションで確認ダイアログを作成する方法のトンがありますが、我々は特定のユーザーと開発者の経験の後です.

コンポーネントを再利用可能にし、dry code principles

簡単にダイアログにカスタムメッセージを渡す

それを行うMaterial UI and Zustand (心配しないで、小さな図書館です)

依存関係をインストールする

上記のように、このチュートリアルでは、UIとZustandを使用します.材料UIは、大規模なコンポーネントベースで最も使用されるUIライブラリの一つです.Zustand州の管理ライブラリとして有用になります.使えますContext API 代わりに、Zustandは私の謙虚な意見でこのプロジェクトのためにクリーナーのようです!

npm install @material-ui/core @material-ui/icons zustand

コンポーネントの作成

まず最初に、コンポーネントスケルトンを作成しましょう!

// ConfirmDialog.jsx
// material ui
import {
  Dialog,
  DialogTitle,
  DialogContent,
  DialogActions,
  Button,
  Box,
  IconButton,
  Typography,
} from '@material-ui/core';
import { Close } from '@material-ui/icons';

const ConfirmDialog = () => {
  return (
    <Dialog open={true} maxWidth="sm" fullWidth>
      <DialogTitle>Confirm the action</DialogTitle>
      <Box position="absolute" top={0} right={0}>
        <IconButton>
          <Close />
        </IconButton>
      </Box>
      <DialogContent>
        <Typography>some message here</Typography>
      </DialogContent>
      <DialogActions>
        <Button color="primary" variant="contained">
          Cancel
        </Button>
        <Button color="secondary" variant="contained">
          Confirm
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default ConfirmDialog;

今、我々はアプリケーションにコンポーネントをインポートすることができます.プロジェクトのルートに置くことができますApp.js . これにより、コンポーネントはプロジェクト全体から到達可能になります.次のような画面でコンポーネントをレンダリングできます.

Most probably your colors will not be the same because of my material UI theme configuration but the functionality will be exactly the same.

まあ、それは素晴らしい見て機能がない今すぐです!メッセージもハードコーディングです.心配しないでください.

3 .スタンドストアを作成する

我々は、インポートする必要がありますcreate 最初からZustandからのメソッド.

// ConfirmDialog.jsx
// ...
import create from 'zustand';
// ...

インポート後、我々は必要なアイテムを私たちの店を作成することができます.

// ConfirmDialog.jsx
// ...
const useConfirmDialogStore = create((set) => ({
  message: '',
  onSubmit: undefined,
  close: () => set({ onSubmit: undefined }),
}));
// ...

4 .ダイアログJSXのストアデータを使用します。

今、私たちの店は、ダイアログのコンテンツとその状態(オープンかどうか)を格納する必要があります.これは実際のJSXで使用する時です.

const ConfirmDialog2 = () => {
   // destructure the store data and functions
  const { message, onSubmit, close } = useConfirmDialogStore();
  return (
     // if the onSubmit is undefined the dialog will be closed. 
     // close() function sets the onSubmit to undefined, 
     // so it will close the dialog, if we pass it to the onClose attribute.
    <Dialog open={Boolean(onSubmit)} onClose={close} maxWidth="sm" fullWidth> 
      <DialogTitle>Confirm the action</DialogTitle>
      <Box position="absolute" top={0} right={0}>
        <IconButton onClick={close}>
          <Close />
        </IconButton>
      </Box>
      <DialogContent>
        <Typography>{message}</Typography>
      </DialogContent>
      <DialogActions>
        <Button color="primary" variant="contained" onClick={close}>
          Cancel
        </Button>
        <Button
          color="secondary"
          variant="contained"
          onClick={() => {
            if (onSubmit) {
              onSubmit();
            }
            close();
          }}
        >
          Confirm
        </Button>
      </DialogActions>
    </Dialog>
  );
};

5 .ストアを使用するユーティリティ関数を作成する

我々はほとんど完了です!私たちのストアを使用するユーティリティ関数を作成し、確認を開く必要があります.

// ConfirmDialog.jsx
// ...
export const confirmDialog = (message, onSubmit) => {
  useConfirmDialogStore.setState({
    message,
    onSubmit,
  });
};
// ...

ご覧のように、この関数をConfirmDialog.jsx コンポーネントは、アプリケーションの他の部分で利用できるようになります.

6 .あなたは、それを使用します！

再利用可能な確認ダイアログを作成しました.我々のアプリケーションでそれを使用しましょう.
ボタンを持っているとしましょうDelete All The Data . 私はあなたがこのアクションを実装する前にユーザーに警告したい!

// App.tsx
import { confirmDialog } from './ConfirmDialog';
// ...
<Button
  onClick={() => {
    confirmDialog('Do you really want to delete all the data?', () =>
      console.log('deleting all the data!')
    );
  }}
>
  Delete All The Data
</Button>;

あなたのコンソールを開き、コーヒーを楽しむconfirm ボタン!

結論

あなたのアプリケーションの彼らの行動についてユーザーに情報を提供することは重要かもしれません.ダイアログウィンドウで確認を求めるのは、その情報を提供する良い方法です.
このチュートリアルが役に立つと思います.
この実装は、私のFullStack Jiraクローンの一部ですReact , Hasura , Auth0 , and Apollo . 私は実際のプロジェクトを作成しながら、ここでこれらの課題に私の課題と解決策を共有します.
プロジェクト全体に興味があればチェックしてくださいhere とライブバージョンを参照してくださいhere .
私はどんな提案や改善にもオープンです.貢献のすべての種類が有り難いです!
乾杯!