wp-optimize
/
vendor
/
team-updraft
/
lib-onboarding-wizard
/
Wizard
/
Onboarding
/
src
/
components
/
Modal
/
Modal.js
Modal.js in WP-Optimize – Cache, Compress images, Minify & Clean database to boost page speed & performance 4.6.1, at vendor/team-updraft/lib-onboarding-wizard/Wizard/Onboarding/src/components/Modal/Modal.js
| 1 | import * as Dialog from '@radix-ui/react-dialog'; |
| 2 | import * as VisuallyHidden from "@radix-ui/react-visually-hidden"; |
| 3 | import * as Screen from './Screen'; |
| 4 | import { __ } from "@wordpress/i18n"; |
| 5 | |
| 6 | const Modal = ({ |
| 7 | content, |
| 8 | footer, |
| 9 | triggerClassName, |
| 10 | children, |
| 11 | isOpen, |
| 12 | onClose |
| 13 | }) => { |
| 14 | |
| 15 | return ( |
| 16 | <Dialog.Root |
| 17 | open={isOpen} |
| 18 | onOpenChange={( open ) => { |
| 19 | if ( ! open ) { |
| 20 | onClose?.(); |
| 21 | } |
| 22 | }} |
| 23 | > |
| 24 | {triggerClassName && ( |
| 25 | <Dialog.Trigger className={triggerClassName}>{children}</Dialog.Trigger> |
| 26 | )} |
| 27 | <Dialog.Portal container={document.getElementById( 'onboarding-modal-root' )}> |
| 28 | <Dialog.Overlay className="bg-blue-lightest fixed inset-0 z-[100001]" /> |
| 29 | <Dialog.Content |
| 30 | onOpenAutoFocus={(e) => e.preventDefault()} |
| 31 | onInteractOutside={(event) => event.preventDefault()} |
| 32 | onEscapeKeyDown={(event) => event.preventDefault()} |
| 33 | className="fixed inset-0 z-[100002] py-[24px]" |
| 34 | > |
| 35 | <VisuallyHidden.Root> |
| 36 | <Dialog.Title>{__('Onboarding', 'wp-optimize')}</Dialog.Title> |
| 37 | <Dialog.Description>{__('Onboarding step content', 'wp-optimize')}</Dialog.Description> |
| 38 | </VisuallyHidden.Root> |
| 39 | <div className="flex h-full w-full flex-col justify-between overflow-y-auto custom-scrollbar"> |
| 40 | <Screen.Top className="shrink-0 mx-auto" /> |
| 41 | <div className="w-full my-6 py-2 md:my-8 md:p-4"> |
| 42 | <div className="mx-auto w-[94vw] sm:w-[70vw] max-w-[500px] p-6 rounded-2xl bg-white focus:outline-none data-[state=open]:animate-contentShow"> |
| 43 | <div className="text-base text-black mb-3">{content}</div> |
| 44 | {footer && ( |
| 45 | <div className="flex flex-row justify-end gap-2">{footer}</div> |
| 46 | )} |
| 47 | </div> |
| 48 | </div> |
| 49 | <Screen.Bottom className="shrink-0 mx-auto w-full text-center" handleClose={onClose} /> |
| 50 | </div> |
| 51 | </Dialog.Content> |
| 52 | </Dialog.Portal> |
| 53 | </Dialog.Root> |
| 54 | ); |
| 55 | }; |
| 56 | |
| 57 | export default Modal; |
| 58 |