Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 | 1x 80x 80x 80x 80x 80x 80x 80x 22x 80x 43x 43x 80x 19x 19x 19x 19x 19x 19x 19x 80x 17x 1x 1x 17x 80x 160x 11x 11x 11x 11x 11x 80x 80x 80x 80x 3x 80x 9x 6x 3x 3x 1x 80x 6x 6x 6x 6x 80x 80x 51x 51x 32x 19x 19x 38x 1x 1x 19x 19x 19x 19x 38x 1x 1x 19x 19x 80x 51x 51x 51x 51x 51x 51x 80x 80x 80x | /* eslint-disable react/prop-types */
import {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'
import {createPortal, findDOMNode} from 'react-dom'
import {isFragment} from 'react-is'
import cx from 'classnames'
import PropTypes from 'prop-types'
import useSSR from 'use-ssr'
import useMergeRefs from '@s-ui/react-hooks/lib/useMergeRefs'
import useMount from '@s-ui/react-hooks/lib/useMount'
import {BASE_CLASS, DEFAULT_IS_OPEN} from './settings.js'
const usePortal = ({
isOpen: defaultIsOpen = DEFAULT_IS_OPEN,
target,
onOpen,
onClose,
onToggle,
hasCloseOnOutsideClick = false,
hasCloseOnEsc = false,
...eventHandlers
} = {}) => {
const {onClick} = eventHandlers
const {isServer} = useSSR()
const [isReady, setIsReady] = useState()
const [isOpened, setIsOpened] = useState(defaultIsOpen)
const triggerElement = useRef() // this is the element you are clicking/hovering/whatever, to trigger opening the portal
const portal = useRef()
useMount(() => {
setIsReady(true)
})
const elToMountTo = useMemo(() => {
Iif (isServer) return
return (target && findDOMNode(target)) || document.body
}, [isServer, target])
const createCustomEvent = event => {
Iif (!event) return {portal, triggerElement, event}
const response = event || {}
if (response.persist) response.persist()
response.portal = portal
response.triggerElement = triggerElement
response.event = event
return response
}
// this should handle all eventHandlers like onClick, onMouseOver, etc. passed into the config
const customEventHandlers = Object.entries(eventHandlers).reduce((acc, [handlerName, eventHandler]) => {
acc[handlerName] = event => {
Iif (isServer) return
eventHandler(createCustomEvent(event))
}
return acc
}, {})
const setIsOpen = useCallback(
value => event => {
Iif (isServer) return
const customEvent = createCustomEvent(event)
if (onOpen && value === true) setTimeout(() => onOpen(customEvent), 0)
if (onClose && value === false) onClose(customEvent)
setIsOpened(value)
},
[isServer, setIsOpened, onClose, onOpen]
)
const openPortal = setIsOpen(true)
const closePortal = setIsOpen(false)
const togglePortal = event => (isOpened ? closePortal(event) : openPortal(event))
const handleKeydown = useCallback(
event => (event.key === 'Escape' && hasCloseOnEsc ? closePortal(event) : undefined),
[hasCloseOnEsc, closePortal]
)
const handleOutsideMouseClick = useCallback(
event => {
const containsTarget = target => target.current?.contains(event.target)
if (containsTarget(portal) || event.button !== 0 || !isOpened || containsTarget(triggerElement)) {
return
}
if (hasCloseOnOutsideClick) {
closePortal(event)
}
},
[closePortal, hasCloseOnOutsideClick, portal, isOpened]
)
const handleMouseDown = useCallback(
event => {
Iif (isServer || !(portal.current instanceof HTMLElement)) return
const customEvent = createCustomEvent(event)
if (portal.current.contains(customEvent.target) && onClick) onClick(customEvent)
handleOutsideMouseClick(event)
},
[handleOutsideMouseClick, isServer, onClick]
)
// used to remove the event listeners on unmount
const eventListeners = useRef({})
useEffect(() => {
Iif (isServer) return
if (!(elToMountTo instanceof HTMLElement) || !(portal.current instanceof HTMLElement)) {
return
}
// TODO: eventually will need to figure out a better solution for this.
// Surely we can find a way to map onScroll/onWheel -> scroll/wheel better,
// but for all other event handlers. For now this works.
const eventHandlerMap = {
onScroll: 'scroll',
onWheel: 'wheel'
}
Object.entries(eventHandlerMap).forEach(([handlerName /* onScroll */, eventListenerName /* scroll */]) => {
if (!eventHandlers[handlerName]) return
eventListeners.current[handlerName] = event => eventHandlers[handlerName](createCustomEvent(event))
document.addEventListener(eventListenerName, eventListeners.current[handlerName])
})
document.addEventListener('keydown', handleKeydown)
document.addEventListener('mousedown', handleMouseDown)
return () => {
// handles all special case handlers. Currently only onScroll and onWheel
Object.entries(eventHandlerMap).forEach(([handlerName, eventListenerName]) => {
if (!eventHandlers[handlerName]) return
document.removeEventListener(eventListenerName, eventListeners.current[handlerName])
delete eventListeners.current[handlerName] // eslint-disable-line react-hooks/exhaustive-deps
})
document.removeEventListener('keydown', handleKeydown)
document.removeEventListener('mousedown', handleMouseDown)
}
}, [isServer, handleOutsideMouseClick, handleKeydown, elToMountTo, portal, eventHandlers, handleMouseDown])
const Portal = forwardRef(({as: As = 'div', children, isOpen: isOpenProp, className, ...props}, forwardedRef) => {
const ref = useMergeRefs(forwardedRef, portal)
useEffect(() => {
Iif (isServer) return
Eif (isOpenProp !== undefined) {
setIsOpened(isOpenProp)
}
}, [isOpenProp])
return isReady && isOpened
? createPortal(
<As
{...(!isFragment(<As />) && {
ref,
className: cx(BASE_CLASS, className),
...props
})}
>
{children}
</As>,
target || document.body
)
: null
})
Portal.propTypes = {
as: PropTypes.elementType,
children: PropTypes.node,
isOpen: PropTypes.bool,
className: PropTypes.string
}
Portal.displayName = 'Portal'
return Object.assign([Portal, openPortal, closePortal, isOpened, togglePortal, triggerElement, portal], {
isOpen: isOpened,
triggerRef: triggerElement,
open: openPortal,
close: closePortal,
toggle: togglePortal,
Portal,
portalRef: portal,
...customEventHandlers,
bind: {
// used if you want to spread all html attributes onto the target element
ref: triggerElement,
...customEventHandlers
}
})
}
export default usePortal
|