feat(modal): modal support draggable

Author: mortalYoung

src/modal/demos/draggable.tsx

@@ -0,0 +1,43 @@
+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);
+
+    return (
+        <>
+            <Modal
+                title={
+                    <Space>
+                        Draggable Modal
+                        <Tooltip title="通过阻止 mousedown 事件冒泡，可以让 title 中的元素不触发拖拽">
+                            <TinyTag
+                                onMouseDown={(e) => e.stopPropagation()}
+                                value="Cancel"
+                                style={{ color: '#1D78FF' }}
+                            />
+                        </Tooltip>
+                    </Space>
+                }
+                draggable={{
+                    bounds: 'body',
+                }}
+                visible={visible}
+                onCancel={() => setVisible(false)}
+                onOk={() => setVisible(false)}
+            >
+                <ul>
+                    {Array.from({ length: 300 }).map((_, i) => (
+                        <li key={i} style={{ height: 30 }}>
+                            {i}
+                        </li>
+                    ))}
+                </ul>
+            </Modal>
+            <Button type="primary" onClick={() => setVisible(true)}>
+                Draggable Modal
+            </Button>
+        </>
+    );
+}

src/modal/index.md

@@ -18,6 +18,7 @@ toc: content
 <code src="./demos/size.tsx" title="尺寸"></code>
 <code src="./demos/banner.tsx" title="支持 banner"></code>
 <code src="./demos/bannerProps.tsx" title="支持传 banner 的 Props 属性"></code>
+<code src="./demos/draggable.tsx" title="draggable"></code>
 
 ## API
 

src/modal/index.scss

@@ -1,6 +1,11 @@
 $modal-max-height: 80vh;
 
 .dtc-modal {
+    &__draggable {
+        top: 0;
+        left: 0;
+        margin: 0;
+    }
     .ant-modal-content {
         max-height: $modal-max-height;
         display: flex;

src/modal/modal.tsx

@@ -3,11 +3,17 @@ import { Alert, type AlertProps, Modal as AntdModal, type ModalProps } from 'ant
 import classNames from 'classnames';
 import { omit } from 'lodash-es';
 
+import type { IFloatProps } from '../float';
+import Float from '../float';
+import useMergeOption from '../float/useMergeOption';
 import './index.scss';
 
 export interface IModalProps extends ModalProps {
     size?: 'small' | 'default' | 'middle' | 'large';
     banner?: AlertProps['message'] | Omit<AlertProps, 'banner'>;
+    draggable?: IFloatProps['draggable'];
+    position?: IFloatProps['position'];
+    onPositionChange?: IFloatProps['onChange'];
 }
 
 const getWidthFromSize = (size: IModalProps['size']) => {
@@ -29,15 +35,41 @@ export default function Modal({
     children,
     width,
     className,
+    draggable = false,
+    position,
+    onPositionChange,
+    modalRender,
     ...rest
 }: IModalProps) {
     const finalWidth = width ?? getWidthFromSize(size);
 
+    const mergedDraggable = useMergeOption(
+        typeof draggable === 'boolean' ? draggable : { handle: '.ant-modal-header', ...draggable }
+    );
+
     return (
         <AntdModal
-            className={classNames('dtc-modal', className)}
+            className={classNames(
+                'dtc-modal',
+                !mergedDraggable.disabled && 'dtc-modal__draggable',
+                className
+            )}
             bodyStyle={{ padding: 0, ...bodyStyle }}
             width={finalWidth}
+            modalRender={(modal) =>
+                mergedDraggable.disabled ? (
+                    modalRender?.(modal) || modal
+                ) : (
+                    <Float
+                        draggable={mergedDraggable.options}
+                        position={position}
+                        style={{ width: finalWidth }}
+                        onChange={onPositionChange}
+                    >
+                        {modalRender?.(modal) || modal}
+                    </Float>
+                )
+            }
             {...rest}
         >
             {banner && (