forked from crowetic/commerce
Dismissable Dropdown
This commit is contained in:
parent
5d0da87c3c
commit
d541948596
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user