fix modal not drag and resize correctly after antd version 5.14

CUBETIQ · May 23, 2024 · 686c7b2 · 686c7b2
1 parent f98c531
commit 686c7b2
Show file tree

Hide file tree

Showing 6 changed files with 612 additions and 20 deletions.
diff --git a/packages/antd-modal/index.css b/packages/antd-modal/index.css
@@ -17,6 +17,8 @@
     flex: 1;
     display: flex;
     flex-direction: column;
+    height: 100%;
+    width: 100%;
 }
 
 .ant-design-draggable-modal .ant-modal-header {
@@ -62,4 +64,8 @@
     cursor: se-resize;
     height: 44px;
     position: absolute;
+}
+
+.ant-modal > div{
+    width: 100%;
 }
diff --git a/packages/antd-modal/package.json b/packages/antd-modal/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cubetiq/antd-modal",
-    "version": "0.0.1-alpha.2",
+    "version": "0.0.1-alpha.3",
     "description": "Modal from Ant Design, draggable, resizable.",
     "homepage": "https://github.com/sombochea/antd-modal#readme",
     "repository": {
@@ -54,4 +54,4 @@
         "react": "^18",
         "react-dom": "^18"
     }
-}
+}
diff --git a/packages/antd-modal/src/DraggableModalInner.tsx b/packages/antd-modal/src/DraggableModalInner.tsx
@@ -51,23 +51,22 @@ function DraggableModalInnerNonMemo({
 
     const { zIndex, x, y, width, height } = modalState
 
-    const style: React.CSSProperties = useMemo(() => ({ ...modalStyle, top: y, left: x, height }), [
-        y,
-        x,
-        height,
-    ])
+    const style: React.CSSProperties = useMemo(
+        () => ({ ...modalStyle, top: y, left: x, height }),
+        [y, x, height],
+    )
 
     const onFocus = useCallback(() => dispatch({ type: 'focus', id }), [id, dispatch])
 
-    const onDragWithID = useCallback((args: any) => dispatch({ type: 'drag', id, ...args }), [
-        dispatch,
-        id,
-    ])
+    const onDragWithID = useCallback(
+        (args: any) => dispatch({ type: 'drag', id, ...args }),
+        [dispatch, id],
+    )
 
-    const onResizeWithID = useCallback((args: any) => dispatch({ type: 'resize', id, ...args }), [
-        dispatch,
-        id,
-    ])
+    const onResizeWithID = useCallback(
+        (args: any) => dispatch({ type: 'resize', id, ...args }),
+        [dispatch, id],
+    )
 
     const onMouseDrag = useDrag(x, y, onDragWithID)
     const onMouseResize = useResize(x, y, width, height, onResizeWithID)
@@ -84,7 +83,6 @@ function DraggableModalInnerNonMemo({
         ),
         [onMouseDrag, onFocus, title],
     )
-
     return (
         <Modal
             wrapClassName="ant-design-draggable-modal"
@@ -95,7 +93,7 @@ function DraggableModalInnerNonMemo({
             maskClosable={false}
             zIndex={zIndex}
             title={titleElement}
-            visible={visible}
+            open={visible}
             {...otherProps}
         >
             {children}

diff --git a/packages/example/package.json b/packages/example/package.json
@@ -9,8 +9,8 @@
     "dependencies": {
         "react": "^18",
         "react-dom": "^18",
-        "@cubetiq/antd-modal": "*",
-        "antd": "^5"
+        "@cubetiq/antd-modal": "link:../antd-modal/dist",
+        "antd": "^5.17.0"
     },
     "devDependencies": {
         "@vitejs/plugin-react": "^1.0.7",

diff --git a/packages/example/src/App.tsx b/packages/example/src/App.tsx
@@ -36,7 +36,7 @@ const App = () => (
                 </Breadcrumb>
                 <div style={{ background: '#fff', padding: 24 }}>
                     <ModalWithButton title="Modal A" />
-                    <ModalWithButton title="Modal B" initialWidth={500} initialHeight={100} />
+                    <ModalWithButton title="Modal B" initialWidth={500} initialHeight={300} />
                     <ModalWithButton title="Modal C" />
                 </div>
             </Content>