bd8ced1b60
There are nearly a dozen independent implementations of the same modal
spread throughout the admin panel and various plugins. These modals are
used to confirm or cancel an action, such as deleting a document, bulk
publishing, etc. Each of these instances is nearly identical, leading to
unnecessary development efforts when creating them, inconsistent UI, and
duplicative stylesheets.
Everything is now standardized behind a new `ConfirmationModal`
component. This modal comes with a standard API that is flexible enough
to replace nearly every instance. This component has also been exported
for reuse.
Here is a basic example of how to use it:
```tsx
'use client'
import { ConfirmationModal, useModal } from '@payloadcms/ui'
import React, { Fragment } from 'react'
const modalSlug = 'my-confirmation-modal'
export function MyComponent() {
const { openModal } = useModal()
return (
<Fragment>
<button
onClick={() => {
openModal(modalSlug)
}}
type="button"
>
Do something
</button>
<ConfirmationModal
heading="Are you sure?"
body="Confirm or cancel before proceeding."
modalSlug={modalSlug}
onConfirm={({ closeConfirmationModal, setConfirming }) => {
// do something
setConfirming(false)
closeConfirmationModal()
}}
/>
</Fragment>
)
}
```
65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
'use client'
|
|
import { useRouter } from 'next/navigation.js'
|
|
import React, { useCallback } from 'react'
|
|
|
|
import type { OnCancel, OnConfirm } from '../ConfirmationModal/index.js'
|
|
|
|
import { useAuth } from '../../providers/Auth/index.js'
|
|
import { useConfig } from '../../providers/Config/index.js'
|
|
import { useRouteTransition } from '../../providers/RouteTransition/index.js'
|
|
import { useTranslation } from '../../providers/Translation/index.js'
|
|
import { formatAdminURL } from '../../utilities/formatAdminURL.js'
|
|
import { ConfirmationModal } from '../ConfirmationModal/index.js'
|
|
|
|
export const stayLoggedInModalSlug = 'stay-logged-in'
|
|
|
|
export const StayLoggedInModal: React.FC = () => {
|
|
const { refreshCookie } = useAuth()
|
|
|
|
const router = useRouter()
|
|
const { config } = useConfig()
|
|
|
|
const {
|
|
admin: {
|
|
routes: { logout: logoutRoute },
|
|
},
|
|
routes: { admin: adminRoute },
|
|
} = config
|
|
|
|
const { t } = useTranslation()
|
|
const { startRouteTransition } = useRouteTransition()
|
|
|
|
const onConfirm: OnConfirm = useCallback(
|
|
({ closeConfirmationModal, setConfirming }) => {
|
|
setConfirming(false)
|
|
closeConfirmationModal()
|
|
|
|
startRouteTransition(() =>
|
|
router.push(
|
|
formatAdminURL({
|
|
adminRoute,
|
|
path: logoutRoute,
|
|
}),
|
|
),
|
|
)
|
|
},
|
|
[router, startRouteTransition, adminRoute, logoutRoute],
|
|
)
|
|
|
|
const onCancel: OnCancel = useCallback(() => {
|
|
refreshCookie()
|
|
}, [refreshCookie])
|
|
|
|
return (
|
|
<ConfirmationModal
|
|
body={t('authentication:youAreInactive')}
|
|
cancelLabel={t('authentication:stayLoggedIn')}
|
|
confirmLabel={t('authentication:logOut')}
|
|
heading={t('authentication:stayLoggedIn')}
|
|
modalSlug={stayLoggedInModalSlug}
|
|
onCancel={onCancel}
|
|
onConfirm={onConfirm}
|
|
/>
|
|
)
|
|
}
|