forked from crowetic/commerce
Merge branch 'master' of https://github.com/okbel/e-comm-example
This commit is contained in:
commit
dae1477063
@ -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."
|
||||||
|
@ -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}
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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
|
||||||
|
@ -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",
|
||||||
|
Loading…
x
Reference in New Issue
Block a user