diff --git a/README.md b/README.md index 6c188c2..21f8dd8 100644 --- a/README.md +++ b/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 diff --git a/packages/ant-design-draggable-modal/index.css b/packages/ant-design-draggable-modal/index.css index d1a6f17..d087d3b 100644 --- a/packages/ant-design-draggable-modal/index.css +++ b/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; -} \ No newline at end of file diff --git a/packages/ant-design-draggable-modal/src/ResizeHandle.test.tsx b/packages/ant-design-draggable-modal/src/ResizeHandle.test.tsx new file mode 100644 index 0000000..f21fb76 --- /dev/null +++ b/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() + expect(container.firstChild).toMatchInlineSnapshot(` +
+
+
+ `) + }) + + it('shoude render without resize', () => { + const { container } = render() + expect(container.firstChild).toMatchInlineSnapshot(` +
+
+
+ `) + }) +}) diff --git a/packages/ant-design-draggable-modal/src/ResizeHandle.tsx b/packages/ant-design-draggable-modal/src/ResizeHandle.tsx index fb66f26..54ec5c4 100644 --- a/packages/ant-design-draggable-modal/src/ResizeHandle.tsx +++ b/packages/ant-design-draggable-modal/src/ResizeHandle.tsx @@ -1,9 +1,11 @@ import * as React from 'react' -export const ResizeHandle = ( - props: React.DetailedHTMLProps, HTMLDivElement>, -): React.ReactElement => ( -
+interface ResizeHandleProps extends React.DetailedHTMLProps, HTMLDivElement>{ + resize?: boolean +} + +export const ResizeHandle = ({resize = true, ...props}: ResizeHandleProps) => ( +
-) +) \ No newline at end of file