56 lines
1.8 KiB
JavaScript
56 lines
1.8 KiB
JavaScript
import ClickAwayListener from '@mui/material/ClickAwayListener'
|
|
import classnames from 'classnames'
|
|
import React, { memo, useState } from 'react'
|
|
import Popper from 'src/components/Popper'
|
|
import ZoomIconInverse from 'src/styling/icons/circle buttons/search/white.svg?react'
|
|
import ZoomIcon from 'src/styling/icons/circle buttons/search/zodiac.svg?react'
|
|
|
|
import { FeatureButton } from 'src/components/buttons'
|
|
|
|
const ImagePopper = memo(
|
|
({ className, width, height, popupWidth, popupHeight, src }) => {
|
|
const [popperAnchorEl, setPopperAnchorEl] = useState(null)
|
|
|
|
const handleOpenPopper = event => {
|
|
setPopperAnchorEl(popperAnchorEl ? null : event.currentTarget)
|
|
}
|
|
|
|
const handleClosePopper = () => {
|
|
setPopperAnchorEl(null)
|
|
}
|
|
|
|
const popperOpen = Boolean(popperAnchorEl)
|
|
|
|
const Image = ({ className, style }) => (
|
|
<img className={classnames(className)} style={style} src={src} alt="" />
|
|
)
|
|
|
|
return (
|
|
<ClickAwayListener onClickAway={handleClosePopper}>
|
|
<div className={classnames('flex flex-row', className)}>
|
|
<Image
|
|
className="object-cover rounded-tl-lg"
|
|
style={{ width, height }}
|
|
/>
|
|
<FeatureButton
|
|
Icon={ZoomIcon}
|
|
InverseIcon={ZoomIconInverse}
|
|
className="rounded-none rounded-tr-lg rounded-br-lg"
|
|
style={{ height }}
|
|
onClick={handleOpenPopper}
|
|
/>
|
|
<Popper open={popperOpen} anchorEl={popperAnchorEl} placement="top">
|
|
<div className="py-2 px-4">
|
|
<Image
|
|
className="object-cover"
|
|
style={{ width: popupWidth, height: popupHeight }}
|
|
/>
|
|
</div>
|
|
</Popper>
|
|
</div>
|
|
</ClickAwayListener>
|
|
)
|
|
}
|
|
)
|
|
|
|
export default ImagePopper
|