crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Removing useDialog, cause rerender

Browse Source
This commit is contained in:
Belen Curcio
2020-11-07 19:15:54 -03:00
parent 0b74fbad1b
commit 115cf12529
7 changed files with 112 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
components/ui/Sidebar/Sidebar.tsx
View File

@@ -1,22 +1,19 @@
import cn from 'classnames'
import { FC, useRef } from 'react'
import { FC, useRef, useMemo } from 'react'
import s from './Sidebar.module.css'
import { Transition } from '@headlessui/react'
import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
import { useDialog } from '@react-aria/dialog'
import { useOverlay, OverlayContainer } from '@react-aria/overlays'
import { FocusScope } from '@react-aria/focus'
import Portal from '@reach/portal'
interface Props {
className?: string
children?: any
open?: boolean
children: any
open: boolean
onClose: () => void
}
const Sidebar: FC<Props> = ({ className, children, open = false, onClose }) => {
const rootClassName = cn(s.root, className)
const Sidebar: FC<Props> = ({ children, open = false, onClose }) => {
const ref = useRef<HTMLDivElement>(null)
const { modalProps } = useModal()
const { overlayProps } = useOverlay(
{
isOpen: open,
@@ -25,55 +22,54 @@ const Sidebar: FC<Props> = ({ className, children, open = false, onClose }) => {
},
ref
)
const { dialogProps } = useDialog({}, ref)
return (
<Transition show={open}>
<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-50 transition-opacity"
// Close the sidebar when clicking on the backdrop
onClick={onClose}
/>
</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}
>
<Portal>
<Transition show={open}>
<OverlayContainer>
<FocusScope contain restoreFocus autoFocus>
<div className={s.root}>
<div className="absolute inset-0 overflow-hidden">
<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"
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="h-full md:w-screen md:max-w-md">
<div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
{children}
</div>
</div>
<div
className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
// Close the sidebar when clicking on the backdrop
onClick={onClose}
/>
</Transition.Child>
</section>
<section
className="absolute inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16 outline-none"
{...overlayProps}
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 md:w-screen md:max-w-md">
<div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
{children}
</div>
</div>
</Transition.Child>
</section>
</div>
</div>
</div>
</FocusScope>
</OverlayContainer>
</Transition>
</FocusScope>
</OverlayContainer>
</Transition>
</Portal>
)
}