From ac5a371cef1df9cc3ed770a7041c4ec8c3368a72 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sat, 24 Oct 2020 13:03:29 -0300
Subject: [PATCH] scroll issue
---
components/core/Layout/Layout.tsx | 14 +++++++++---
components/core/UserNav/DropdownMenu.tsx | 14 ++----------
components/core/UserNav/UserNav.tsx | 27 ++++++++++--------------
components/ui/Modal/Modal.tsx | 6 +-----
components/ui/Sidebar/Sidebar.tsx | 26 +++++++----------------
package.json | 1 +
6 files changed, 34 insertions(+), 54 deletions(-)
diff --git a/components/core/Layout/Layout.tsx b/components/core/Layout/Layout.tsx
index 74c5a4069..7a4d1fa24 100644
--- a/components/core/Layout/Layout.tsx
+++ b/components/core/Layout/Layout.tsx
@@ -8,7 +8,7 @@ import Button from '@components/ui/Button'
import { CartSidebarView } from '@components/cart'
import { useUI } from '@components/ui/context'
import s from './Layout.module.css'
-
+import { usePreventScroll } from '@react-aria/overlays'
interface Props {
pageProps: {
pages?: Page[]
@@ -16,10 +16,11 @@ interface Props {
}
const Layout: FC<Props> = ({ children, pageProps }) => {
- const { displaySidebar, closeSidebar } = useUI()
+ const { displaySidebar, displayDropdown, closeSidebar } = useUI()
const [acceptedCookies, setAcceptedCookies] = useState(false)
const [hasScrolled, setHasScrolled] = useState(false)
+ // TODO: Update code, add throttle and more.
useEffect(() => {
const offset = 0
function handleScroll() {
@@ -34,6 +35,11 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
}
}, [])
+ console.log(displaySidebar, displayDropdown)
+ usePreventScroll({
+ isDisabled: !displaySidebar,
+ })
+
return (
<CommerceProvider locale="en-us">
<div className={cn(s.root)}>
@@ -49,9 +55,11 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
</header>
<main className="fit">{children}</main>
<Footer pages={pageProps.pages} />
- <Sidebar show={displaySidebar} close={closeSidebar}>
+
+ <Sidebar open={displaySidebar} onClose={closeSidebar}>
<CartSidebarView />
</Sidebar>
+
<Featurebar
title="This site uses cookies to improve your experience."
description="By clicking, you agree to our Privacy Policy."
diff --git a/components/core/UserNav/DropdownMenu.tsx b/components/core/UserNav/DropdownMenu.tsx
index da4369c4b..0f45c7940 100644
--- a/components/core/UserNav/DropdownMenu.tsx
+++ b/components/core/UserNav/DropdownMenu.tsx
@@ -5,24 +5,14 @@ import cn from 'classnames'
import s from './DropdownMenu.module.css'
import { Moon, Sun } from '@components/icon'
import { Menu, Transition } from '@headlessui/react'
-import { usePreventScroll } from '@react-aria/overlays'
+
interface DropdownMenuProps {
- onClose: () => void
open: boolean
}
-const DropdownMenu: FC<DropdownMenuProps> = ({
- onClose,
- children,
- open = false,
- ...props
-}) => {
+const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
const { theme, setTheme } = useTheme()
- usePreventScroll({
- isDisabled: !open,
- })
-
return (
<Transition
show={open}
diff --git a/components/core/UserNav/UserNav.tsx b/components/core/UserNav/UserNav.tsx
index 70e2377f3..c63ba2d9d 100644
--- a/components/core/UserNav/UserNav.tsx
+++ b/components/core/UserNav/UserNav.tsx
@@ -19,14 +19,7 @@ const countItems = (count: number, items: any[]) =>
const UserNav: FC<Props> = ({ className, children, ...props }) => {
const { data } = useCart()
- const {
- openSidebar,
- closeSidebar,
- displaySidebar,
- displayDropdown,
- openDropdown,
- closeDropdown,
- } = useUI()
+ const { openSidebar, closeSidebar, displaySidebar } = useUI()
const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
let ref = useRef() as React.MutableRefObject<HTMLInputElement>
@@ -53,14 +46,16 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
</Link>
<li className={s.item}>
<Menu>
- {({ open }) => (
- <>
- <Menu.Button className="inline-flex justify-center rounded-full">
- <Avatar />
- </Menu.Button>
- <DropdownMenu onClose={closeDropdown} open={open} />
- </>
- )}
+ {({ open }) => {
+ return (
+ <>
+ <Menu.Button className="inline-flex justify-center rounded-full">
+ <Avatar />
+ </Menu.Button>
+ <DropdownMenu open={open} />
+ </>
+ )
+ }}
</Menu>
</li>
</ul>
diff --git a/components/ui/Modal/Modal.tsx b/components/ui/Modal/Modal.tsx
index e1ff99aa0..96a2236c5 100644
--- a/components/ui/Modal/Modal.tsx
+++ b/components/ui/Modal/Modal.tsx
@@ -2,7 +2,7 @@ import cn from 'classnames'
import { FC, useRef } from 'react'
import s from './Modal.module.css'
import { useDialog } from '@react-aria/dialog'
-import { useOverlay, usePreventScroll, useModal } from '@react-aria/overlays'
+import { useOverlay, useModal } from '@react-aria/overlays'
import { FocusScope } from '@react-aria/focus'
interface Props {
@@ -25,10 +25,6 @@ const Modal: FC<Props> = ({
let { overlayProps } = useOverlay(props, ref)
let { dialogProps } = useDialog(props, ref)
- usePreventScroll({
- isDisabled: !show,
- })
-
return (
<div className={rootClassName}>
<FocusScope contain restoreFocus autoFocus>
diff --git a/components/ui/Sidebar/Sidebar.tsx b/components/ui/Sidebar/Sidebar.tsx
index 9d25c8465..3290d5b63 100644
--- a/components/ui/Sidebar/Sidebar.tsx
+++ b/components/ui/Sidebar/Sidebar.tsx
@@ -2,43 +2,33 @@ import cn from 'classnames'
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 { useOverlay, 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
+ open?: boolean
+ onClose: () => void
}
-const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
+const Sidebar: FC<Props> = ({ className, children, open = false, onClose }) => {
const rootClassName = cn(s.root, className)
-
const ref = useRef<HTMLDivElement>(null)
const { modalProps } = useModal()
const { overlayProps } = useOverlay(
{
- isOpen: show,
- onClose: close,
+ isOpen: open,
isDismissable: true,
+ onClose: onClose,
},
ref
)
const { dialogProps } = useDialog({}, ref)
- usePreventScroll({
- isDisabled: !show,
- })
-
return (
- <Transition show={show}>
+ <Transition show={open}>
<OverlayContainer>
<FocusScope contain restoreFocus autoFocus>
<div className={rootClassName}>
@@ -54,7 +44,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
<div
className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
// Close the sidebar when clicking on the backdrop
- onClick={close}
+ onClick={onClose}
/>
</Transition.Child>
<section
diff --git a/package.json b/package.json
index 7625d24a0..f60411b5d 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
},
"dependencies": {
"@headlessui/react": "^0.2.0",
+ "@react-aria/overlays": "^3.4.0",
"@tailwindcss/ui": "^0.6.2",
"animate.css": "^4.1.1",
"bowser": "^2.11.0",