mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 19:19:57 +08:00
Code Issues Actions 31 Packages Projects Releases Wiki Activity

fix: draggable Modal should have boundary (#28527)

Browse Source 
* fix: draggle handler not allowed outside of screen

* fix: draggable Modal should have boundary

* ci: fix error
This commit is contained in:
mumiao 2020-12-28 10:45:06 +08:00 committed by GitHub
parent a70d301c7b
commit 7ae07c1726
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 28 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
components/modal/demo/modal-render.md
View File

@ -21,8 +21,11 @@ class App extends React.Component {
state = {
visible: false,
disabled: true,
bounds: { left: 0, top: 0, bottom: 0, right: 0 },
};
draggleRef = React.createRef();
showModal = () => {
this.setState({
visible: true,
@ -43,7 +46,21 @@ class App extends React.Component {
});
};
onStart = (event, uiData) => {
const { clientWidth, clientHeight } = window?.document?.documentElement;
const targetRect = this.draggleRef?.current?.getBoundingClientRect();
this.setState({
bounds: {
left: -targetRect?.left + uiData?.x,
right: clientWidth - (targetRect?.right - uiData?.x),
top: -targetRect?.top + uiData?.y,
bottom: clientHeight - (targetRect?.bottom - uiData?.y),
},
});
};
render() {
const { bounds, disabled, visible } = this.state;
return (
<>
<Button onClick={this.showModal}>Open Draggable Modal</Button>
@ -55,7 +72,7 @@ class App extends React.Component {
cursor: 'move',
}}
onMouseOver={() => {
if (this.state.disabled) {
if (disabled) {
this.setState({
disabled: false,
});
@ -75,10 +92,18 @@ class App extends React.Component {
Draggable Modal
</div>
}
visible={this.state.visible}
visible={visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
modalRender={modal => <Draggable disabled={this.state.disabled}>{modal}</Draggable>}
modalRender={modal => (
<Draggable
disabled={disabled}
bounds={bounds}
onStart={(event, uiData) => this.onStart(event, uiData)}
>
<div ref={this.draggleRef}>{modal}</div>
</Draggable>
)}
>
<p>
Just don&apos;t learn physics at school and your life will be full of magic and