|
@@ -1,5 +1,6 @@
|
|
|
-import React, { useState, useEffect } from 'react';
|
|
|
+import React, { useState, useEffect, useRef } from 'react';
|
|
|
import { Modal, Form } from 'antd';
|
|
|
+import Draggable from 'react-draggable';
|
|
|
import Icon from '@/tenants-ui/SgIcon';
|
|
|
import styles from './index.less';
|
|
|
import cx from 'classnames';
|
|
@@ -68,10 +69,58 @@ export default ({ onClose, showSpace, selNav }) => {
|
|
|
defaultType(); // 默认展示类型
|
|
|
}, [selNav]);
|
|
|
|
|
|
+ // 拖拽
|
|
|
+ const [disabled, setDisabled] = useState(false);
|
|
|
+ const [bounds, setBounds] = useState({
|
|
|
+ left: 0,
|
|
|
+ top: 0,
|
|
|
+ bottom: 0,
|
|
|
+ right: 0,
|
|
|
+ });
|
|
|
+ const draggleRef = useRef(null);
|
|
|
+ const onStart = (_event, uiData) => {
|
|
|
+ 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 width={550} visible maskClosable={false} closable={false} footer={null}>
|
|
|
- <div className={styles.main}>
|
|
|
+ <Modal
|
|
|
+ width={550}
|
|
|
+ visible
|
|
|
+ maskClosable={false}
|
|
|
+ closable={false}
|
|
|
+ footer={null}
|
|
|
+ style={{
|
|
|
+ width: '100%',
|
|
|
+ cursor: 'move',
|
|
|
+ }}
|
|
|
+ modalRender={(modal) => (
|
|
|
+ <Draggable
|
|
|
+ disabled={disabled}
|
|
|
+ bounds={bounds}
|
|
|
+ onStart={(event, uiData) => onStart(event, uiData)}
|
|
|
+ >
|
|
|
+ <div ref={draggleRef}>{modal}</div>
|
|
|
+ </Draggable>
|
|
|
+ )}
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ className={styles.main}
|
|
|
+ onMouseDown={(e) => {
|
|
|
+ e.preventDefault();
|
|
|
+ }}
|
|
|
+ >
|
|
|
<div className={styles.header}>
|
|
|
<div className={styles.title}>{showSpace.localName}</div>
|
|
|
<div className={styles.close} onClick={onClose}>
|