Google Drive の Snackbar みたいにファイル削除後に元に戻すの動きを実現してみる

ユーザーアクション

ユーザーアクションのついた Snackbar を実装します。

ふと、Google Drive の Snackbar みたいなものを表現してみようと思いました。
ちなみにこれは Notistack の Snackbar の機能ではなく、Material UI の Snackbar でもできるみたいです。

どういうものか？
具体的な実装方法
まとめ

どういうものか？

こういうやつです

具体的な実装方法

notistack の enqueueSnackbar() の第2引数のオプションに action を渡します。
action の型は以下のようになっています。

type SnackbarKey = string | number
type SnackbarAction = React.ReactNode | ((key: SnackbarKey) => React.ReactNode);
action?: SnackbarAction;

戻り値の型は ReactNode または (key: SnackbarKey) => ReactNode です。
つまり JSX 形式な戻り値を設定する必要があります。

実際にコード化すると以下の様な感じになります。

  const handleClick = () => {
    enqueueSnackbar('Actions の確認', {
      action: (snackbarId: SnackbarKey) => {
        const handleUndo = () => {
          closeSnackbar(snackbarId)
          setTimeout(() => {
            enqueueSnackbar('操作を取り消しました')
          }, 500)
        }
        const handleClose = () => {
          closeSnackbar(snackbarId)
        }
        return (
          <>
            <Button variant="text" color="info" onClick={handleUndo}>元に戻す</Button>
            <Button variant="text" color="inherit" onClick={handleClose}><Close /></Button>
          </>
        )
      },
    })
  }