re-resizable react-draggable antd Modal 拖拽缩放
import {Modal} from 'antd';
import Draggable from 'react-draggable';
import {Resizable} from 're-resizable';
const [resizableWidth, setResizableWidth] = useState<number>(300);
const [resizableHeight, setResizableHeight] = useState<any>(500);
const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
const {clientWidth, clientHeight} = window.document.documentElement;
const targetRect = draggleRef.current?.getBoundingClientRect();
if (!targetRect) {
return;
}
setBounds({
left: -targetRect.left + uiData.x,
right: clientWidth - (targetRect.right - uiData.x),
top: -targetRect.top + uiData.y,
bottom: clientHeight - (targetRect.bottom - uiData.y),
});
};
return (
<Modal
title="错误提示"
open={isModalOpen}
onCancel={handleCancel}
footer={null}
maskClosable={false}
width={resizableWidth}
className={c.error_info_wrapper}
closeIcon={<img style={{cursor: 'pointer'}} src={ICON_CLOSE} onClick={handleCancel} />}
modalRender={modal => (
<Draggable
bounds={bounds}
onStart={(event, uiData) => onStart(event, uiData)}
>
<div ref={draggleRef}>
<Resizable
enable={{
top: true,
right: true,
bottom: true,
left: true,
topRight: true,
bottomRight: true,
bottomLeft: true,
topLeft: true,
}}
maxWidth={500}
minWidth={250}
minHeight={300}
maxHeight={700}
boundsByDirection
size={{width: resizableWidth, height: resizableHeight}}
onResizeStop={(e, direction, ref, d) => {
setResizableWidth(resizableWidth + d.width);
setResizableHeight(resizableHeight + d.height);
}}
>
{modal}
</Resizable>
</div>
</Draggable>
)}
>
test test
</Modal>
)
.error_info_wrapper{
pointer-events: unset !important;
:global{
.ant-modal-content{
height: 100%;
}
}
}