Web: Component: fixed footer style, added closure on the area outside the image
This commit is contained in:
parent
061927fefa
commit
a1ecd48a5e
@ -109,7 +109,7 @@ const StyledViewer = styled(ViewerBase)`
|
||||
left: 0;
|
||||
z-index: 307;
|
||||
height: 48px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
@ -49,6 +49,7 @@ const ViewerBase = (props) => {
|
||||
mobileDetails,
|
||||
onNextClick,
|
||||
onPrevClick,
|
||||
onMaskClick,
|
||||
} = props;
|
||||
|
||||
const initialState = {
|
||||
@ -626,6 +627,7 @@ const ViewerBase = (props) => {
|
||||
top={state.top}
|
||||
left={state.left}
|
||||
rotate={state.rotate}
|
||||
onMaskClick={onMaskClick}
|
||||
onChangeImgState={handleChangeImgState}
|
||||
onResize={handleResize}
|
||||
zIndex={zIndex + 5}
|
||||
|
@ -5,6 +5,7 @@ import { useSwipeable } from "react-swipeable";
|
||||
|
||||
export default function ViewerImage(props) {
|
||||
const isMouseDown = React.useRef(false);
|
||||
const imgRef = React.useRef(null);
|
||||
const prePosition = React.useRef({
|
||||
x: 0,
|
||||
y: 0,
|
||||
@ -102,6 +103,11 @@ export default function ViewerImage(props) {
|
||||
isMouseDown.current = false;
|
||||
}
|
||||
|
||||
function onClose(e) {
|
||||
if (e.target === imgRef.current) return;
|
||||
props.onMaskClick();
|
||||
}
|
||||
|
||||
function bindWindowResizeEvent(remove) {
|
||||
let funcName = "addEventListener";
|
||||
if (remove) {
|
||||
@ -148,6 +154,7 @@ translateX(${props.left !== null ? props.left + "px" : "auto"}) translateY(${
|
||||
className={imgClass}
|
||||
src={props.imgSrc}
|
||||
style={imgStyle}
|
||||
ref={imgRef}
|
||||
onMouseDown={handleMouseDown}
|
||||
/>
|
||||
);
|
||||
@ -168,7 +175,12 @@ translateX(${props.left !== null ? props.left + "px" : "auto"}) translateY(${
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`${props.prefixCls}-canvas`} style={style} {...handlers}>
|
||||
<div
|
||||
className={`${props.prefixCls}-canvas`}
|
||||
onClick={onClose}
|
||||
style={style}
|
||||
{...handlers}
|
||||
>
|
||||
{imgNode}
|
||||
</div>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user