mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 13:09:40 +08:00
Code Issues Actions 50 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 = { state = {
visible: false, visible: false,
disabled: true, disabled: true,
bounds: { left: 0, top: 0, bottom: 0, right: 0 },
}; };
draggleRef = React.createRef();
showModal = () => { showModal = () => {
this.setState({ this.setState({
visible: true, 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() { render() {
const { bounds, disabled, visible } = this.state;
return ( return (
<> <>
<Button onClick={this.showModal}>Open Draggable Modal</Button> <Button onClick={this.showModal}>Open Draggable Modal</Button>
@ -55,7 +72,7 @@ class App extends React.Component {
cursor: 'move', cursor: 'move',
}} }}
onMouseOver={() => { onMouseOver={() => {
if (this.state.disabled) { if (disabled) {
this.setState({ this.setState({
disabled: false, disabled: false,
}); });
@ -75,10 +92,18 @@ class App extends React.Component {
Draggable Modal Draggable Modal
</div> </div>
} }
visible={this.state.visible} visible={visible}
onOk={this.handleOk} onOk={this.handleOk}
onCancel={this.handleCancel} 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> <p>
Just don&apos;t learn physics at school and your life will be full of magic and Just don&apos;t learn physics at school and your life will be full of magic and