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

View File

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

View File

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