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.5.4, 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 | |
| 5 | const Modal = ({ |
| 6 | logo, |
| 7 | logo_class, |
| 8 | title, |
| 9 | currentStepIndex, |
| 10 | content, |
| 11 | footer, |
| 12 | triggerClassName, |
| 13 | children, |
| 14 | isOpen, |
| 15 | onClose |
| 16 | }) => { |
| 17 | |
| 18 | return ( |
| 19 | <Dialog.Root |
| 20 | open={isOpen} |
| 21 | onOpenChange={( open ) => { |
| 22 | if ( ! open ) { |
| 23 | onClose?.(); |
| 24 | } |
| 25 | }} |
| 26 | > |
| 27 | {triggerClassName && ( |
| 28 | <Dialog.Trigger className={triggerClassName}>{children}</Dialog.Trigger> |
| 29 | )} |
| 30 | <Dialog.Portal container={document.getElementById( 'onboarding-modal-root' )}> |
| 31 | <Dialog.Overlay className="bg-blue-lightest fixed inset-0 z-[100001]" /> |
| 32 | <Dialog.Content |
| 33 | onOpenAutoFocus={(e) => e.preventDefault()} |
| 34 | onInteractOutside={(event) => event.preventDefault()} |
| 35 | onEscapeKeyDown={(event) => event.preventDefault()} |
| 36 | className="fixed inset-0 z-[100002] py-[24px]" |
| 37 | > |
| 38 | <div className="flex h-full w-full flex-col justify-between overflow-y-auto custom-scrollbar"> |
| 39 | <Screen.Top className="shrink-0 mx-auto" /> |
| 40 | <div className="w-full my-6 py-2 md:my-8 md:p-4"> |
| 41 | <div className="mx-auto w-[94vw] sm:w-[70vw] max-w-[480px] p-6 rounded-2xl bg-white focus:outline-none data-[state=open]:animate-contentShow"> |
| 42 | {(currentStepIndex === 0) && ( |
| 43 | <div className="mt-2"> |
| 44 | {logo && ( |
| 45 | <img src={logo} alt="Logo" className={`h-[54px] w-auto mx-auto ${logo_class || ''}`} /> |
| 46 | )} |
| 47 | <Dialog.Title className="text-lg font-semibold text-black"> |
| 48 | <VisuallyHidden.Root>Onboarding</VisuallyHidden.Root> |
| 49 | </Dialog.Title> |
| 50 | </div> |
| 51 | )} |
| 52 | <Dialog.Description className="sr-only"> |
| 53 | {title} - {typeof content === 'string' ? content : 'Onboarding step content'} |
| 54 | </Dialog.Description> |
| 55 | <div className="text-base text-black mb-3">{content}</div> |
| 56 | {footer && ( |
| 57 | <div className="flex flex-row justify-end gap-2">{footer}</div> |
| 58 | )} |
| 59 | </div> |
| 60 | </div> |
| 61 | <Screen.Bottom className="shrink-0 mx-auto w-full text-center" handleClose={onClose} /> |
| 62 | </div> |
| 63 | </Dialog.Content> |
| 64 | </Dialog.Portal> |
| 65 | </Dialog.Root> |
| 66 | ); |
| 67 | }; |
| 68 | |
| 69 | export default Modal; |
| 70 |