4
0
forked from crowetic/commerce

Dismissable Dropdown

This commit is contained in:
Belen Curcio 2020-10-22 10:27:11 -03:00
parent 5d0da87c3c
commit d541948596
4 changed files with 63 additions and 34 deletions

View File

@ -22,10 +22,10 @@
} }
.dropdownMenu { .dropdownMenu {
@apply bg-primary fixed right-0 z-50 w-full h-full; @apply fixed top-0 right-0 z-20 w-full h-full;
@screen lg { @screen lg {
@apply absolute mt-3 right-0 w-screen; @apply absolute right-0 w-screen;
max-width: 160px; max-width: 160px;
} }

View File

@ -25,12 +25,18 @@ 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 { openSidebar, closeSidebar, displaySidebar } = useUI() const {
const [displayDropdown, setDisplayDropdown] = useState(false) 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>
const toggleDropdown = () => setDisplayDropdown((v) => !v)
return ( return (
<nav className={cn(s.root, className)}> <nav className={cn(s.root, className)}>
<div className={s.mainContainer}> <div className={s.mainContainer}>
@ -51,17 +57,17 @@ const UserNav: FC<Props> = ({ className, children, ...props }) => {
<Heart /> <Heart />
</li> </li>
</Link> </Link>
<li className={s.item} onClick={() => toggleDropdown()}> <li
className={s.item}
onClick={() => (displayDropdown ? closeDropdown() : openDropdown())}
>
<Avatar /> <Avatar />
</li> </li>
</ul> </ul>
</div> </div>
<DismissButton onDismiss={() => setDisplayDropdown(false)} />
{displayDropdown && ( {displayDropdown && (
<DropdownMenu <DropdownMenu onClose={closeDropdown} innerRef={ref} />
onClose={() => setDisplayDropdown(false)}
innerRef={ref}
/>
)} )}
</nav> </nav>
) )
@ -82,6 +88,7 @@ const DropdownMenu: FC<DropdownMenuProps> = ({
let { overlayProps } = useOverlay( let { overlayProps } = useOverlay(
{ {
isDismissable: true,
onClose: onClose, onClose: onClose,
isOpen: true, isOpen: true,
}, },
@ -90,8 +97,9 @@ const DropdownMenu: FC<DropdownMenuProps> = ({
usePreventScroll() usePreventScroll()
return ( return (
<FocusScope contain restoreFocus autoFocus> <FocusScope restoreFocus>
<div className={cn(s.dropdownMenu)} ref={innerRef} {...overlayProps}> <div className={cn(s.dropdownMenu)} ref={innerRef} {...overlayProps}>
<span onClick={onClose} className="w-full bg-transparent block h-12" />
<nav className={s.dropdownMenuContainer}> <nav className={s.dropdownMenuContainer}>
<Link href="#"> <Link href="#">
<a className={s.link}>My Purchases</a> <a className={s.link}>My Purchases</a>

View File

@ -34,7 +34,7 @@
} }
.nameBox { .nameBox {
@apply absolute top-6 left-0 z-50; @apply absolute top-6 left-0 z-10;
& .name { & .name {
@apply px-6 py-2 bg-primary text-primary font-bold; @apply px-6 py-2 bg-primary text-primary font-bold;

View File

@ -4,10 +4,12 @@ import { SSRProvider, OverlayProvider } from 'react-aria'
export interface State { export interface State {
displaySidebar: boolean displaySidebar: boolean
displayDropdown: boolean
} }
const initialState = { const initialState = {
displaySidebar: false, displaySidebar: false,
displayDropdown: false,
} }
type Action = type Action =
@ -17,21 +19,61 @@ type Action =
| { | {
type: 'CLOSE_SIDEBAR' type: 'CLOSE_SIDEBAR'
} }
| {
type: 'OPEN_DROPDOWN'
}
| {
type: 'CLOSE_DROPDOWN'
}
export const UIContext = React.createContext<State | any>(initialState) export const UIContext = React.createContext<State | any>(initialState)
UIContext.displayName = 'UIContext' UIContext.displayName = 'UIContext'
function uiReducer(state: State, action: Action) {
switch (action.type) {
case 'OPEN_SIDEBAR': {
return {
...state,
displaySidebar: true,
}
}
case 'CLOSE_SIDEBAR': {
return {
...state,
displaySidebar: false,
}
}
case 'OPEN_DROPDOWN': {
return {
...state,
displayDropdown: true,
}
}
case 'CLOSE_DROPDOWN': {
return {
...state,
displayDropdown: false,
}
}
}
}
export const UIProvider: FC = (props) => { export const UIProvider: FC = (props) => {
const [state, dispatch] = React.useReducer(uiReducer, initialState) const [state, dispatch] = React.useReducer(uiReducer, initialState)
const openSidebar = () => dispatch({ type: 'OPEN_SIDEBAR' }) const openSidebar = () => dispatch({ type: 'OPEN_SIDEBAR' })
const closeSidebar = () => dispatch({ type: 'CLOSE_SIDEBAR' }) const closeSidebar = () => dispatch({ type: 'CLOSE_SIDEBAR' })
const openDropdown = () => dispatch({ type: 'OPEN_DROPDOWN' })
const closeDropdown = () => dispatch({ type: 'CLOSE_DROPDOWN' })
const value = { const value = {
...state, ...state,
openSidebar, openSidebar,
closeSidebar, closeSidebar,
openDropdown,
closeDropdown,
} }
return <UIContext.Provider value={value} {...props} /> return <UIContext.Provider value={value} {...props} />
@ -45,27 +87,6 @@ export const useUI = () => {
return context return context
} }
function uiReducer(state: State, action: Action) {
switch (action.type) {
case 'OPEN_SIDEBAR': {
return !state.displaySidebar
? {
...state,
displaySidebar: true,
}
: state
}
case 'CLOSE_SIDEBAR': {
return state.displaySidebar
? {
...state,
displaySidebar: false,
}
: state
}
}
}
export const ManagedUIContext: FC = ({ children }) => ( export const ManagedUIContext: FC = ({ children }) => (
<UIProvider> <UIProvider>
<ThemeProvider> <ThemeProvider>