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

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

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

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

どういうものか？

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
      
    )
  },
})

}

このコードを説明するとだいたいこんな感じですかね。

1. アクションに設置するボタンは「元に戻す」と「Close Icon」です
2. handleUndo では、Snackbar を close しつつ、0.5秒後に新しい Snackbar を enqueue します
3. handleClose では、Snackbar を close するだけです

まとめ

Snackbar は通知の用途で使うことが多いのでアクションを必要とするときが来るかは不明ですが、本当に手軽にできます。