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 | 2x 2x 2x 2x 2x 30x 60x 60x 60x 30x 60x 30x 60x 60x 30x 60x 60x 30x 30x 30x 30x 30x 9x 8x 8x 30x 8x 30x 5x 5x 5x 5x 30x 30x 30x 2x | import 'focus-options-polyfill'
import React, {
CSSProperties,
FC,
ReactNode,
ReactType,
RefObject,
StrictMode,
memo,
useCallback,
useRef,
useState
} from 'react'
import './styles.css'
import UncontrolledActivated from './UncontrolledActivated'
interface Props {
children: ReactNode
closeText?: string
openText?: string
overlayBgColorEnd?: string
overlayBgColorStart?: string
portalEl?: HTMLElement
scrollableEl?: HTMLElement | Window
transitionDuration?: number
wrapElement?: ReactType
wrapStyle?: CSSProperties
zoomMargin?: number
zoomZindex?: number
}
const Uncontrolled: FC<Props> = ({
children,
closeText = 'Unzoom image',
overlayBgColorEnd = 'rgba(255, 255, 255, 0.95)',
overlayBgColorStart = 'rgba(255, 255, 255, 0)',
portalEl,
openText = 'Zoom image',
scrollableEl,
transitionDuration = 300,
wrapElement: WrapElement = 'div',
wrapStyle,
zoomMargin = 0,
zoomZindex = 2147483647
}: Props) => {
const [isActive, setIsActive] = useState<boolean>(false)
const [isChildLoaded, setIsChildLoaded] = useState<boolean>(false)
const wrapRef = useRef<HTMLElement>(null)
const btnRef = useRef<HTMLButtonElement>(null)
const handleClickTrigger = useCallback(
e => {
if (!isActive) {
e.preventDefault()
setIsActive(true)
}
},
[isActive]
)
const handleChildLoad = useCallback(() => {
setIsChildLoaded(true)
}, [])
const handleChildUnload = useCallback(() => {
setIsActive(false)
setIsChildLoaded(false)
Eif (btnRef.current) {
btnRef.current.focus({ preventScroll: true })
}
}, [])
const isExpanded = isActive && isChildLoaded
const wrapType = isExpanded ? 'hidden' : 'visible'
return (
<StrictMode>
<WrapElement
data-rmiz-wrap={wrapType}
ref={wrapRef as RefObject<HTMLElement>}
style={wrapStyle}
>
{children}
<button
aria-label={openText}
data-rmiz-btn-open
onClick={handleClickTrigger}
ref={btnRef}
/>
{typeof window !== 'undefined' && isActive && (
<UncontrolledActivated
closeText={closeText}
onLoad={handleChildLoad}
onUnload={handleChildUnload}
overlayBgColorEnd={overlayBgColorEnd}
overlayBgColorStart={overlayBgColorStart}
parentRef={wrapRef}
portalEl={portalEl}
scrollableEl={scrollableEl}
transitionDuration={transitionDuration}
zoomMargin={zoomMargin}
zoomZindex={zoomZindex}
>
{children}
</UncontrolledActivated>
)}
</WrapElement>
</StrictMode>
)
}
export default memo(Uncontrolled)
|