Feature/resize as optional

README.md

@@ -33,10 +33,10 @@ Modal from Ant Design, draggable.
     -   [x] During resize window.
 -   [x] Multiple modals with managed `zIndex`.
 -   [x] Open from center.
+-   [x] Resize with option key.
 -   [ ] Better API for using as a controlled component.
 -   [ ] Open from quadrants.
 -   [ ] Better escape key management.
--   [ ] Resize with option key.
 
 ## 📦 Install
 

packages/ant-design-draggable-modal/index.css

@@ -2,7 +2,7 @@
  * NOTE: This is not compiled.
  */
 
-.ant-design-draggable-modal {
+ .ant-design-draggable-modal {
     pointer-events: none;
     overflow: hidden !important;
 }
@@ -44,6 +44,19 @@
     padding: 16px;
 }
 
+.ant-design-draggable-modal-resize-handle {
+    right: -10px;
+    width: 44px;
+    bottom: -10px;
+    cursor: se-resize;
+    height: 44px;
+    position: absolute;
+}
+
+.ant-design-draggable-modal--without-resize {
+    display: none;
+}
+
 .ant-design-draggable-modal-resize-handle-inner {
     width: 12px;
     right: 14px;
@@ -55,11 +68,3 @@
     border-left: 0;
 }
 
-.ant-design-draggable-modal-resize-handle {
-    right: -10px;
-    width: 44px;
-    bottom: -10px;
-    cursor: se-resize;
-    height: 44px;
-    position: absolute;
-}

packages/ant-design-draggable-modal/src/ResizeHandle.test.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import { ResizeHandle } from './ResizeHandle'
+
+describe('should render correctly', () => {
+    it('shoude render with resize', () => {
+        const { container } = render(<ResizeHandle resize />)
+        expect(container.firstChild).toMatchInlineSnapshot(`
+            <div
+              class="ant-design-draggable-modal-resize-handle"
+            >
+              <div
+                class="ant-design-draggable-modal-resize-handle-inner"
+              />
+            </div>
+        `)
+    })
+
+    it('shoude render without resize', () => {
+        const { container } = render(<ResizeHandle resize={false} />)
+        expect(container.firstChild).toMatchInlineSnapshot(`
+            <div
+              class="ant-design-draggable-modal--without-resize"
+            >
+              <div
+                class="ant-design-draggable-modal-resize-handle-inner"
+              />
+            </div>
+        `)
+    })
+})

packages/ant-design-draggable-modal/src/ResizeHandle.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react'
 
-export const ResizeHandle = (
-    props: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
-): React.ReactElement => (
-    <div className="ant-design-draggable-modal-resize-handle" {...props}>
+interface ResizeHandleProps extends  React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>{
+    resize?: boolean
+}
+
+export const ResizeHandle = ({resize = true, ...props}: ResizeHandleProps) => (
+    <div className={resize ? 'ant-design-draggable-modal-resize-handle' : 'ant-design-draggable-modal--without-resize'} {...props}>
         <div className="ant-design-draggable-modal-resize-handle-inner" />
     </div>
-)
+)