4
0
forked from crowetic/commerce
This commit is contained in:
Luis Alvarez 2020-10-24 11:18:02 -05:00
commit dae1477063
6 changed files with 34 additions and 54 deletions

View File

@ -8,7 +8,7 @@ import Button from '@components/ui/Button'
import { CartSidebarView } from '@components/cart' import { CartSidebarView } from '@components/cart'
import { useUI } from '@components/ui/context' import { useUI } from '@components/ui/context'
import s from './Layout.module.css' import s from './Layout.module.css'
import { usePreventScroll } from '@react-aria/overlays'
interface Props { interface Props {
pageProps: { pageProps: {
pages?: Page[] pages?: Page[]
@ -16,10 +16,11 @@ interface Props {
} }
const Layout: FC<Props> = ({ children, pageProps }) => { const Layout: FC<Props> = ({ children, pageProps }) => {
const { displaySidebar, closeSidebar } = useUI() const { displaySidebar, displayDropdown, closeSidebar } = useUI()
const [acceptedCookies, setAcceptedCookies] = useState(false) const [acceptedCookies, setAcceptedCookies] = useState(false)
const [hasScrolled, setHasScrolled] = useState(false) const [hasScrolled, setHasScrolled] = useState(false)
// TODO: Update code, add throttle and more.
useEffect(() => { useEffect(() => {
const offset = 0 const offset = 0
function handleScroll() { function handleScroll() {
@ -34,6 +35,11 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
} }
}, []) }, [])
console.log(displaySidebar, displayDropdown)
usePreventScroll({
isDisabled: !displaySidebar,
})
return ( return (
<CommerceProvider locale="en-us"> <CommerceProvider locale="en-us">
<div className={cn(s.root)}> <div className={cn(s.root)}>
@ -49,9 +55,11 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
</header> </header>
<main className="fit">{children}</main> <main className="fit">{children}</main>
<Footer pages={pageProps.pages} /> <Footer pages={pageProps.pages} />
<Sidebar show={displaySidebar} close={closeSidebar}>
<Sidebar open={displaySidebar} onClose={closeSidebar}>
<CartSidebarView /> <CartSidebarView />
</Sidebar> </Sidebar>
<Featurebar <Featurebar
title="This site uses cookies to improve your experience." title="This site uses cookies to improve your experience."
description="By clicking, you agree to our Privacy Policy." description="By clicking, you agree to our Privacy Policy."

View File

@ -5,24 +5,14 @@ import cn from 'classnames'
import s from './DropdownMenu.module.css' import s from './DropdownMenu.module.css'
import { Moon, Sun } from '@components/icon' import { Moon, Sun } from '@components/icon'
import { Menu, Transition } from '@headlessui/react' import { Menu, Transition } from '@headlessui/react'
import { usePreventScroll } from '@react-aria/overlays'
interface DropdownMenuProps { interface DropdownMenuProps {
onClose: () => void
open: boolean open: boolean
} }
const DropdownMenu: FC<DropdownMenuProps> = ({ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
onClose,
children,
open = false,
...props
}) => {
const { theme, setTheme } = useTheme() const { theme, setTheme } = useTheme()
usePreventScroll({
isDisabled: !open,
})
return ( return (
<Transition <Transition
show={open} show={open}

View File

@ -19,14 +19,7 @@ const countItems = (count: number, items: any[]) =>
const UserNav: FC<Props> = ({ className, children, ...props }) => { const UserNav: FC<Props> = ({ className, children, ...props }) => {
const { data } = useCart() const { data } = useCart()
const { const { openSidebar, closeSidebar, displaySidebar } = useUI()
openSidebar,
closeSidebar,
displaySidebar,
displayDropdown,
openDropdown,
closeDropdown,
} = useUI()
const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0) const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
let ref = useRef() as React.MutableRefObject<HTMLInputElement> let ref = useRef() as React.MutableRefObject<HTMLInputElement>
@ -53,14 +46,16 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
</Link> </Link>
<li className={s.item}> <li className={s.item}>
<Menu> <Menu>
{({ open }) => ( {({ open }) => {
<> return (
<Menu.Button className="inline-flex justify-center rounded-full"> <>
<Avatar /> <Menu.Button className="inline-flex justify-center rounded-full">
</Menu.Button> <Avatar />
<DropdownMenu onClose={closeDropdown} open={open} /> </Menu.Button>
</> <DropdownMenu open={open} />
)} </>
)
}}
</Menu> </Menu>
</li> </li>
</ul> </ul>

View File

@ -2,7 +2,7 @@ import cn from 'classnames'
import { FC, useRef } from 'react' import { FC, useRef } from 'react'
import s from './Modal.module.css' import s from './Modal.module.css'
import { useDialog } from '@react-aria/dialog' 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' import { FocusScope } from '@react-aria/focus'
interface Props { interface Props {
@ -25,10 +25,6 @@ const Modal: FC<Props> = ({
let { overlayProps } = useOverlay(props, ref) let { overlayProps } = useOverlay(props, ref)
let { dialogProps } = useDialog(props, ref) let { dialogProps } = useDialog(props, ref)
usePreventScroll({
isDisabled: !show,
})
return ( return (
<div className={rootClassName}> <div className={rootClassName}>
<FocusScope contain restoreFocus autoFocus> <FocusScope contain restoreFocus autoFocus>

View File

@ -2,43 +2,33 @@ import cn from 'classnames'
import { FC, useRef } 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 { import { useOverlay, useModal, OverlayContainer } from '@react-aria/overlays'
useOverlay,
usePreventScroll,
useModal,
OverlayContainer,
} from '@react-aria/overlays'
import { useDialog } from '@react-aria/dialog' import { useDialog } from '@react-aria/dialog'
import { FocusScope } from '@react-aria/focus' import { FocusScope } from '@react-aria/focus'
interface Props { interface Props {
className?: string className?: string
children?: any children?: any
show?: boolean open?: boolean
close: () => void 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 rootClassName = cn(s.root, className)
const ref = useRef<HTMLDivElement>(null) const ref = useRef<HTMLDivElement>(null)
const { modalProps } = useModal() const { modalProps } = useModal()
const { overlayProps } = useOverlay( const { overlayProps } = useOverlay(
{ {
isOpen: show, isOpen: open,
onClose: close,
isDismissable: true, isDismissable: true,
onClose: onClose,
}, },
ref ref
) )
const { dialogProps } = useDialog({}, ref) const { dialogProps } = useDialog({}, ref)
usePreventScroll({
isDisabled: !show,
})
return ( return (
<Transition show={show}> <Transition show={open}>
<OverlayContainer> <OverlayContainer>
<FocusScope contain restoreFocus autoFocus> <FocusScope contain restoreFocus autoFocus>
<div className={rootClassName}> <div className={rootClassName}>
@ -54,7 +44,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
<div <div
className="absolute inset-0 bg-black bg-opacity-50 transition-opacity" className="absolute inset-0 bg-black bg-opacity-50 transition-opacity"
// Close the sidebar when clicking on the backdrop // Close the sidebar when clicking on the backdrop
onClick={close} onClick={onClose}
/> />
</Transition.Child> </Transition.Child>
<section <section

View File

@ -20,6 +20,7 @@
}, },
"dependencies": { "dependencies": {
"@headlessui/react": "^0.2.0", "@headlessui/react": "^0.2.0",
"@react-aria/overlays": "^3.4.0",
"@tailwindcss/ui": "^0.6.2", "@tailwindcss/ui": "^0.6.2",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"bowser": "^2.11.0", "bowser": "^2.11.0",