forked from crowetic/commerce
react-aria modal sidebar
This commit is contained in:
parent
d8ff9bc4ff
commit
a7778fc5c5
@ -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>
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user