4
0
forked from crowetic/commerce

react-aria modal sidebar

This commit is contained in:
paco 2020-10-08 15:21:21 -06:00
parent d8ff9bc4ff
commit a7778fc5c5
No known key found for this signature in database
GPG Key ID: CD243AF4E535B475
3 changed files with 83 additions and 37 deletions

View File

@ -15,7 +15,7 @@ interface Props {
const CoreLayout: FC<Props> = ({ className, children }) => {
const rootClassName = cn(s.root, className)
const { displaySidebar } = useUI()
const { displaySidebar, closeSidebar } = useUI()
return (
<div className={rootClassName}>
@ -28,7 +28,7 @@ const CoreLayout: FC<Props> = ({ className, children }) => {
<main className={s.main}>{children}</main>
</Container>
<Footer />
<Sidebar show={displaySidebar}>
<Sidebar show={displaySidebar} close={closeSidebar}>
<CartSidebarView />
</Sidebar>
</div>

View File

@ -1,47 +1,88 @@
import cn from 'classnames'
import { FC } from 'react'
import { FC, useRef } from 'react'
import s from './Sidebar.module.css'
import { Transition } from '@headlessui/react'
import {
useOverlay,
usePreventScroll,
useModal,
OverlayContainer,
} from '@react-aria/overlays'
import { useDialog } from '@react-aria/dialog'
import { FocusScope } from '@react-aria/focus'
interface Props {
className?: string
children?: any
show?: boolean
close: () => void
}
const Sidebar: FC<Props> = ({ className, children, show = true }) => {
const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
const rootClassName = cn(s.root, className)
const ref = useRef<HTMLDivElement>(null)
const { modalProps } = useModal()
const { overlayProps } = useOverlay(
{
isOpen: show,
onClose: close,
isDismissable: true,
},
ref
)
const { dialogProps } = useDialog({}, ref)
usePreventScroll({
isDisabled: !show,
})
return (
<Transition show={show}>
<div className={rootClassName}>
<div className="absolute inset-0 overflow-hidden">
<Transition.Child
enter="transition-opacity ease-linear duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity ease-linear duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="absolute inset-0 bg-black bg-opacity-25 transition-opacity" />
</Transition.Child>
<section className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
<Transition.Child
enter="transition ease-in-out duration-300 transform"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transition ease-in-out duration-300 transform"
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<div className="h-full w-screen max-w-2xl">
<div className="h-full flex flex-col space-y-6 bg-white shadow-xl overflow-y-auto">
{children}
</div>
</div>
</Transition.Child>
</section>
</div>
</div>
<OverlayContainer>
<FocusScope contain restoreFocus autoFocus>
<div className={rootClassName}>
<div className="absolute inset-0 overflow-hidden">
<Transition.Child
enter="transition-opacity ease-linear duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity ease-linear duration-300"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div
className="absolute inset-0 bg-black bg-opacity-25 transition-opacity"
// Close the sidebar when clicking on the backdrop
onClick={close}
/>
</Transition.Child>
<section
className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none"
{...dialogProps}
{...overlayProps}
{...modalProps}
ref={ref}
>
<Transition.Child
enter="transition ease-in-out duration-300 transform"
enterFrom="translate-x-full"
enterTo="translate-x-0"
leave="transition ease-in-out duration-300 transform"
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<div className="h-full w-screen max-w-2xl">
<div className="h-full flex flex-col space-y-6 bg-white shadow-xl overflow-y-auto">
{children}
</div>
</div>
</Transition.Child>
</section>
</div>
</div>
</FocusScope>
</OverlayContainer>
</Transition>
)
}

View File

@ -1,5 +1,6 @@
import { FC } from 'react'
import type { AppProps } from 'next/app'
import { SSRProvider, OverlayProvider } from 'react-aria'
import '@assets/global.css'
import '@assets/tailwind.css'
import '@assets/utils.css'
@ -10,8 +11,12 @@ export default function MyApp({ Component, pageProps }: AppProps) {
const Layout = (Component as any).Layout || Noop
return (
<Layout>
<Component {...pageProps} />
</Layout>
<SSRProvider>
<OverlayProvider>
<Layout>
<Component {...pageProps} />
</Layout>
</OverlayProvider>
</SSRProvider>
)
}