`;
+
+exports[`Test Modal Component Should support banner Should match snapshot for draggable modal 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`Test Modal Component Should support banner Should match snapshot for resizable modal 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/src/modal/__tests__/handle.test.tsx b/src/modal/__tests__/handle.test.tsx
new file mode 100644
index 000000000..5cc2f85e5
--- /dev/null
+++ b/src/modal/__tests__/handle.test.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import Handler from '../handle';
+
+describe('Handler Component', () => {
+ it('should match snapshot', () => {
+ const { asFragment } = render(
);
+ expect(asFragment()).toMatchSnapshot();
+ });
+
+ it('should forward ref to the div element', () => {
+ const ref = React.createRef
();
+ render();
+ expect(ref.current).toBeInstanceOf(HTMLDivElement);
+ expect(ref.current).toHaveClass('dt-modal-resize-handle handle-y');
+ });
+});
diff --git a/src/modal/__tests__/modal.test.tsx b/src/modal/__tests__/modal.test.tsx
index b7a4cebfa..135d9ee0a 100644
--- a/src/modal/__tests__/modal.test.tsx
+++ b/src/modal/__tests__/modal.test.tsx
@@ -1,10 +1,23 @@
import React from 'react';
-import { cleanup, render } from '@testing-library/react';
+import { cleanup, fireEvent, render } from '@testing-library/react';
import { alert, modal } from 'ant-design-testing';
import '@testing-library/jest-dom';
+import { IFloatProps } from '../../float';
import Modal from '../';
+function dragFromTo(
+ ele: HTMLElement,
+ from: NonNullable,
+ to: NonNullable
+) {
+ fireEvent.mouseDown(ele, { clientX: from.x, clientY: from.y });
+ fireEvent.mouseMove(document, { clientX: to.x, clientY: to.y });
+ return {
+ mouseUp: () => fireEvent.mouseUp(ele, { clientX: to.x, clientY: to.y }),
+ };
+}
+
describe('Test Modal Component', () => {
beforeEach(() => {
cleanup();
@@ -94,5 +107,107 @@ describe('Test Modal Component', () => {
expect(getByText('banner')).toBeInTheDocument();
expect(alert.query(container)?.classList.contains('ant-alert-error')).toBeTruthy();
});
+
+ it('Should match snapshot for draggable modal', () => {
+ const { asFragment } = render(
+
+ test
+
+ );
+ expect(asFragment()).toMatchSnapshot();
+ });
+
+ it('Should support draggable modal and update position on drag', () => {
+ const fn = jest.fn();
+ const { container } = render(
+
+ test
+
+ );
+
+ const modalElement = modal
+ .query(container)!
+ .querySelector('.ant-modal-header')!;
+
+ dragFromTo(modalElement, { x: 0, y: 0 }, { x: 100, y: 100 }).mouseUp();
+
+ expect(fn).toHaveBeenCalledWith({ x: 100, y: 100 });
+ });
+
+ it('Should match snapshot for resizable modal', () => {
+ const { asFragment } = render(
+
+ test
+
+ );
+ expect(asFragment()).toMatchSnapshot();
+ });
+
+ it('Should call onRectChange for resizable modal', () => {
+ const onRectChange = jest.fn();
+ const { container } = render(
+
+ test
+
+ );
+ const eHandle = modal.query(container)!.querySelector('.handle-e')!;
+ dragFromTo(eHandle, { x: 620, y: 300 }, { x: 700, y: 300 }).mouseUp();
+ expect(onRectChange).toBeCalledWith({ width: 700, height: 600 });
+ });
+
+ it('Should support resizable and draggable modal', () => {
+ const onRectChange = jest.fn();
+ const onPositionChange = jest.fn();
+ const { container } = render(
+
+ test
+
+ );
+ const eHandle = modal.query(container)!.querySelector('.handle-e')!;
+ dragFromTo(eHandle, { x: 620, y: 300 }, { x: 700, y: 300 }).mouseUp();
+ expect(onRectChange).toBeCalledWith({ width: 700, height: 600 });
+ expect(onPositionChange).not.toBeCalled();
+
+ const wHandle = modal.query(container)!.querySelector('.handle-w')!;
+ dragFromTo(wHandle, { x: 620, y: 300 }, { x: 400, y: 300 }).mouseUp();
+ expect(onRectChange).toBeCalledWith({ width: 700, height: 600 });
+ expect(onPositionChange).toBeCalledWith({ x: -170, y: 50 });
+ });
});
});
diff --git a/src/modal/demos/draggable.tsx b/src/modal/demos/draggable.tsx
new file mode 100644
index 000000000..19d332ee7
--- /dev/null
+++ b/src/modal/demos/draggable.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { Button, Space, Tooltip } from 'antd';
+import { Modal, TinyTag } from 'dt-react-component';
+
+export default function Basic() {
+ const [visible, setVisible] = useState(false);
+ const [position, setPosition] = useState({ x: 120, y: 120 });
+
+ return (
+ <>
+
+ Draggable Modal
+
+ e.stopPropagation()}
+ value="Cancel"
+ style={{ color: '#1D78FF' }}
+ />
+
+
+ }
+ draggable={{
+ bounds: 'body',
+ }}
+ position={position}
+ onPositionChange={({ x, y }) => setPosition({ x, y })}
+ visible={visible}
+ onCancel={() => setVisible(false)}
+ onOk={() => setVisible(false)}
+ >
+
+ {Array.from({ length: 300 }).map((_, i) => (
+ -
+ {i}
+
+ ))}
+
+
+
+
+ );
+}
diff --git a/src/modal/demos/resizable.tsx b/src/modal/demos/resizable.tsx
new file mode 100644
index 000000000..a0ef4da12
--- /dev/null
+++ b/src/modal/demos/resizable.tsx
@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { Button } from 'antd';
+import { Modal, Resize, useModal } from 'dt-react-component';
+import type { RectState } from 'dt-react-component/modal';
+
+export default function Basic() {
+ const modal = useModal();
+ const [rect, setRect] = useState({ width: 520, height: 520 });
+ const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });
+
+ return (
+ setSize({ width: window.innerWidth, height: window.innerHeight })}>
+ modal.close()}
+ onOk={() => modal.close()}
+ >
+
+ {Array.from({ length: 300 }).map((_, i) => (
+ -
+ {i}
+
+ ))}
+
+
+
+
+ );
+}
diff --git a/src/modal/demos/size.tsx b/src/modal/demos/size.tsx
index 6d419e0e6..894f9f21f 100644
--- a/src/modal/demos/size.tsx
+++ b/src/modal/demos/size.tsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { Button, Space } from 'antd';
import { Modal } from 'dt-react-component';
-import { IModalProps } from 'dt-react-component/modal';
+import type { IModalProps } from 'dt-react-component/modal';
export default function Size() {
const [visible, setVisible] = useState(false);
diff --git a/src/modal/demos/window.tsx b/src/modal/demos/window.tsx
new file mode 100644
index 000000000..f465b8de2
--- /dev/null
+++ b/src/modal/demos/window.tsx
@@ -0,0 +1,68 @@
+import React, { useRef, useState } from 'react';
+import { Button } from 'antd';
+import { Modal, Resize } from 'dt-react-component';
+import type { RectState, ResizeHandle } from 'dt-react-component/modal';
+
+export default function Basic() {
+ const [visible, setVisible] = useState(false);
+ const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });
+
+ const [position, setPosition] = useState({ x: 120, y: 120 });
+ const [rect, setRect] = useState({ width: 520, height: 520 });
+
+ const resizeDirection = useRef('e');
+
+ // 限制 resize 超出当前屏幕
+ const getMaxConstraints = (): [number, number] => {
+ switch (resizeDirection.current) {
+ case 'e':
+ return [size.width - position.x, size.height];
+ case 'n':
+ return [size.width, position.y + rect.height];
+ case 's':
+ return [size.width, size.height - position.y];
+ case 'w':
+ return [position.x + rect.width, size.height];
+ case 'ne':
+ return [size.width - position.x, position.y + rect.height];
+ case 'nw':
+ return [position.x + rect.width, position.y + rect.height];
+ case 'se':
+ return [size.width - position.x, size.height - position.y];
+ case 'sw':
+ return [position.x + rect.width, size.height - position.y];
+ default:
+ return [0, 0];
+ }
+ };
+
+ return (
+ setSize({ width: window.innerWidth, height: window.innerHeight })}>
+ {
+ resizeDirection.current = data.handle;
+ },
+ }}
+ rect={rect}
+ draggable={{
+ bounds: 'body',
+ }}
+ position={position}
+ onPositionChange={setPosition}
+ onRectChange={setRect}
+ onCancel={() => setVisible(false)}
+ onOk={() => setVisible(false)}
+ >
+ <>Just Dtstack It
+
+
+
+ );
+}
diff --git a/src/modal/handle/index.scss b/src/modal/handle/index.scss
new file mode 100644
index 000000000..c7c362d46
--- /dev/null
+++ b/src/modal/handle/index.scss
@@ -0,0 +1,65 @@
+.dt-modal-resize-handle {
+ position: absolute;
+ z-index: 1;
+ pointer-events: initial;
+ &.handle-w {
+ cursor: col-resize;
+ left: -5px;
+ bottom: 0;
+ width: 10px;
+ height: 100%;
+ }
+ &.handle-e {
+ cursor: col-resize;
+ right: -5px;
+ bottom: 0;
+ width: 10px;
+ height: 100%;
+ }
+ &.handle-n {
+ cursor: row-resize;
+ left: 0;
+ top: -5px;
+ width: 100%;
+ height: 10px;
+ }
+ &.handle-s {
+ cursor: row-resize;
+ left: 0;
+ bottom: -5px;
+ width: 100%;
+ height: 10px;
+ }
+ &.handle-se {
+ cursor: se-resize;
+ right: 0;
+ bottom: -5px;
+ width: 10px;
+ height: 10px;
+ z-index: 11;
+ }
+ &.handle-ne {
+ cursor: ne-resize;
+ right: 0;
+ top: -5px;
+ width: 10px;
+ height: 10px;
+ z-index: 11;
+ }
+ &.handle-nw {
+ cursor: nw-resize;
+ left: 0;
+ top: -5px;
+ width: 10px;
+ height: 10px;
+ z-index: 11;
+ }
+ &.handle-sw {
+ cursor: sw-resize;
+ left: 0;
+ bottom: -5px;
+ width: 10px;
+ height: 10px;
+ z-index: 11;
+ }
+}
diff --git a/src/modal/handle/index.tsx b/src/modal/handle/index.tsx
new file mode 100644
index 000000000..6a571cfdb
--- /dev/null
+++ b/src/modal/handle/index.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+import './index.scss';
+
+const Handler = React.forwardRef((props, ref) => {
+ const { handleAxis, ...restProps } = props;
+ return (
+
+ );
+});
+
+export default Handler;
diff --git a/src/modal/index.md b/src/modal/index.md
index d50924168..00309066b 100644
--- a/src/modal/index.md
+++ b/src/modal/index.md
@@ -11,6 +11,7 @@ toc: content
- 使用模态框时，使用该组件替换 antd 的 Modal
- 支持 size 属性来快速设置宽度；限制 Modal 的高度为 600px，超出内部滚动
- 支持 banner 属性来快速实现 Modal 内部提示
+- 支持 draggable 和 resizable 属性来实现拖拽和调整大小
## 示例
@@ -18,18 +19,20 @@ toc: content