mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
91 lines
2.6 KiB
TypeScript
91 lines
2.6 KiB
TypeScript
import React, { useRef, useState } from 'react';
|
|
import { Button, Modal } from 'antd';
|
|
import type { DraggableData, DraggableEvent } from 'react-draggable';
|
|
import Draggable from 'react-draggable';
|
|
|
|
const App: React.FC = () => {
|
|
const [open, setOpen] = useState(false);
|
|
const [disabled, setDisabled] = useState(false);
|
|
const [bounds, setBounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 });
|
|
const draggleRef = useRef<HTMLDivElement>(null);
|
|
|
|
const showModal = () => {
|
|
setOpen(true);
|
|
};
|
|
|
|
const handleOk = (e: React.MouseEvent<HTMLElement>) => {
|
|
console.log(e);
|
|
setOpen(false);
|
|
};
|
|
|
|
const handleCancel = (e: React.MouseEvent<HTMLElement>) => {
|
|
console.log(e);
|
|
setOpen(false);
|
|
};
|
|
|
|
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 (
|
|
<>
|
|
<Button onClick={showModal}>Open Draggable Modal</Button>
|
|
<Modal
|
|
title={
|
|
<div
|
|
style={{
|
|
width: '100%',
|
|
cursor: 'move',
|
|
}}
|
|
onMouseOver={() => {
|
|
if (disabled) {
|
|
setDisabled(false);
|
|
}
|
|
}}
|
|
onMouseOut={() => {
|
|
setDisabled(true);
|
|
}}
|
|
// fix eslintjsx-a11y/mouse-events-have-key-events
|
|
// https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md
|
|
onFocus={() => {}}
|
|
onBlur={() => {}}
|
|
// end
|
|
>
|
|
Draggable Modal
|
|
</div>
|
|
}
|
|
open={open}
|
|
onOk={handleOk}
|
|
onCancel={handleCancel}
|
|
modalRender={(modal) => (
|
|
<Draggable
|
|
disabled={disabled}
|
|
bounds={bounds}
|
|
onStart={(event, uiData) => onStart(event, uiData)}
|
|
>
|
|
<div ref={draggleRef}>{modal}</div>
|
|
</Draggable>
|
|
)}
|
|
>
|
|
<p>
|
|
Just don't learn physics at school and your life will be full of magic and miracles.
|
|
</p>
|
|
<br />
|
|
<p>Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.</p>
|
|
</Modal>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default App;
|