31 lines
653 B
JavaScript
31 lines
653 B
JavaScript
|
import { useCallback, useMemo, useState } from 'react'
|
||
|
|
|
||
|
|
// Idea from https://blog.bitsrc.io/new-react-design-pattern-return-component-from-hooks-79215c3eac00
|
||
|
|
export const useDialog = () => {
|
||
|
|
const [anchorEl, setAnchorEl] = useState(null)
|
||
|
|
|
||
|
|
const open = useCallback((event) => {
|
||
|
|
event?.stopPropagation()
|
||
|
|
setAnchorEl(event.currentTarget)
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
const close = useCallback((event) => {
|
||
|
|
event?.stopPropagation()
|
||
|
|
setAnchorEl(null)
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
const props = useMemo(() => {
|
||
|
|
return {
|
||
|
|
anchorEl,
|
||
|
|
open: Boolean(anchorEl),
|
||
|
|
onClose: close,
|
||
|
|
}
|
||
|
|
}, [anchorEl, close])
|
||
|
|
|
||
|
|
return {
|
||
|
|
open,
|
||
|
|
close,
|
||
|
|
props,
|
||
|
|
}
|
||
|
|
}
|