feat(modal): modal support resizable

Author: mortalYoung

package.json

@@ -82,6 +82,7 @@
         "@types/jest": "^29.2.3",
         "@types/lodash-es": "^4.17.12",
         "@types/react": "^18.0.0",
+        "@types/react-resizable": "^3.0.8",
         "@types/shortid": "^0.0.31",
         "@types/showdown": "^1.9.0",
         "@types/testing-library__jest-dom": "^5.14.5",
@@ -119,6 +120,7 @@
         "rc-drawer": "~5.1.0",
         "rc-virtual-list": "^3.4.13",
         "react-draggable": "~4.4.6",
+        "react-resizable": "^3.0.5",
         "shortid": "^2.2.16",
         "showdown": "^1.9.0",
         "use-clippy": "^1.0.9"

pnpm-lock.yaml

@@ -2,13 +2,13 @@ import React, { useState } from 'react';
 import Draggable, { DraggableEventHandler, type DraggableProps } from 'react-draggable';
 import classNames from 'classnames';
 
-import useMergeOption from './useMergeOption';
+import useMergeOption, { MergeOption } from './useMergeOption';
 import './index.scss';
 
 export interface IFloatProps {
     className?: string;
     style?: React.CSSProperties;
-    draggable?: boolean | Partial<Omit<DraggableProps, 'position'>>;
+    draggable?: MergeOption<Partial<Omit<DraggableProps, 'position'>>>;
     position?: DraggableProps['position'];
     onChange?: DraggableProps['onStop'];
 }

src/float/index.tsx

@@ -8,18 +8,19 @@ export type ReturnMergeOption<T extends Record<string, any>> = {
 };
 
 export default function useMergeOption<T extends Record<string, any>>(
-    opt: MergeOption<T>
+    opt: MergeOption<T>,
+    defaultOpt?: T
 ): ReturnMergeOption<T> {
     return useMemo(() => {
-        if (typeof opt === 'object') {
+        if (typeof opt === 'object' && !!opt) {
             return {
                 disabled: false,
-                options: opt,
+                options: { ...defaultOpt, ...opt },
             };
         }
         return {
             disabled: !opt,
-            options: <T>{},
+            options: <T>{ ...defaultOpt },
         };
     }, [opt]);
 }

src/float/useMergeOption.ts

@@ -4,6 +4,7 @@ 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 (
         <>
@@ -23,6 +24,8 @@ export default function Basic() {
                 draggable={{
                     bounds: 'body',
                 }}
+                position={position}
+                onPositionChange={(_, { x, y }) => setPosition({ x, y })}
                 visible={visible}
                 onCancel={() => setVisible(false)}
                 onOk={() => setVisible(false)}

src/modal/demos/draggable.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import { Button } from 'antd';
+import { Modal, Resize, useModal } from 'dt-react-component';
+import { RectState } from 'dt-react-component/modal';
+
+export default function Basic() {
+    const modal = useModal<void>();
+    const [rect, setRect] = useState<RectState>({ width: 520, height: 520 });
+    const [size, setSize] = useState({ width: window.innerWidth, height: window.innerHeight });
+
+    return (
+        <Resize onResize={() => setSize({ width: window.innerWidth, height: window.innerHeight })}>
+            <Modal
+                title="Resizable Modal"
+                visible={modal.visible}
+                resizable={{
+                    maxConstraints: [size.width - 40, size.height - 150],
+                }}
+                rect={rect}
+                onRectChange={setRect}
+                onCancel={() => modal.close()}
+                onOk={() => modal.close()}
+            >
+                <ul>
+                    {Array.from({ length: 300 }).map((_, i) => (
+                        <li key={i} style={{ height: 30 }}>
+                            {i}
+                        </li>
+                    ))}
+                </ul>
+            </Modal>
+            <Button type="primary" onClick={() => modal.open()}>
+                Resizable Modal
+            </Button>
+        </Resize>
+    );
+}

src/modal/demos/resizable.tsx

@@ -0,0 +1,69 @@
+import React, { useRef, useState } from 'react';
+import { ResizeHandle } from 'react-resizable';
+import { Button } from 'antd';
+import { Modal, Resize } from 'dt-react-component';
+import { RectState } 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<RectState>({ width: 520, height: 520 });
+
+    const resizeDirection = useRef<ResizeHandle>('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 (
+        <Resize onResize={() => setSize({ width: window.innerWidth, height: window.innerHeight })}>
+            <Modal
+                title="Window Modal"
+                visible={visible}
+                mask={false}
+                resizable={{
+                    maxConstraints: getMaxConstraints(),
+                    onResize: (_, data) => {
+                        resizeDirection.current = data.handle;
+                    },
+                }}
+                rect={rect}
+                draggable={{
+                    bounds: 'body',
+                }}
+                position={position}
+                onPositionChange={setPosition}
+                onRectChange={setRect}
+                onCancel={() => setVisible(false)}
+                onOk={() => setVisible(false)}
+            >
+                <>Just Dtstack It</>
+            </Modal>
+            <Button type="primary" onClick={() => setVisible(true)}>
+                Window Modal
+            </Button>
+        </Resize>
+    );
+}

src/modal/demos/window.tsx

@@ -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;
+    }
+}

src/modal/handle/index.scss

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import './index.scss';
+
+const Handler = React.forwardRef<HTMLDivElement, any>((props, ref) => {
+    const { handleAxis, ...restProps } = props;
+    return (
+        <div ref={ref} className={`dt-modal-resize-handle handle-${handleAxis}`} {...restProps} />
+    );
+});
+
+export default Handler;

src/modal/handle/index.tsx

@@ -19,6 +19,8 @@ toc: content
 <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>
+<code src="./demos/resizable.tsx" title="resizable"></code>
+<code src="./demos/window.tsx" title="窗口模式即支持 draggable 同时也支持 resizable"></code>
 
 ## API
 

src/modal/index.md

@@ -6,8 +6,17 @@ $modal-max-height: 80vh;
         left: 0;
         margin: 0;
     }
+    &__resizable {
+        padding: 0;
+    }
+    // resizable 的时候会设置尺寸，所以不需要最大尺寸
+    &:not(&__resizable) {
+        .ant-modal-content {
+            max-height: $modal-max-height;
+        }
+    }
     .ant-modal-content {
-        max-height: $modal-max-height;
+        height: 100%;
         display: flex;
         flex-direction: column;
         .ant-modal-body {