diff --git a/README.md b/README.md index 56c3203..1874d07 100644 --- a/README.md +++ b/README.md @@ -69,6 +69,7 @@ export default () => ( | --- | --- | --- | --- | | open | boolean | - | Whether the preview is open or not | | closeIcon | React.ReactNode | - | Custom close icon | +| maskClosable | boolean | true | Whether to close preview on clicking mask | | src | string | - | Customize preview src | | movable | boolean | true | Enable drag | | scaleStep | number | 0.5 | The number to which the scale is increased or decreased | @@ -114,6 +115,7 @@ export default () => ( | movable | boolean | true | Enable drag | | current | number | - | Current index | | closeIcon | React.ReactNode | - | Custom close icon | +| maskClosable | boolean | true | Whether to close preview on clicking mask | | scaleStep | number | 0.5 | The number to which the scale is increased or decreased | | minScale | number | 1 | Min scale | | maxScale | number | 50 | Max scale | diff --git a/src/Preview/index.tsx b/src/Preview/index.tsx index 065fdb1..b27d80e 100644 --- a/src/Preview/index.tsx +++ b/src/Preview/index.tsx @@ -87,6 +87,7 @@ export interface InternalPreviewConfig { open?: boolean; getContainer?: PortalProps['getContainer']; zIndex?: number; + maskClosable?: boolean; afterOpenChange?: (open: boolean) => void; // Operation @@ -174,6 +175,7 @@ const Preview: React.FC = props => { onClose, open, afterOpenChange, + maskClosable = true, icons = {}, closeIcon, getContainer, @@ -450,7 +452,7 @@ const Preview: React.FC = props => {
{/* Body */} diff --git a/tests/preview.test.tsx b/tests/preview.test.tsx index f81744c..3a8250a 100644 --- a/tests/preview.test.tsx +++ b/tests/preview.test.tsx @@ -101,6 +101,33 @@ describe('Preview', () => { expect(onPreviewCloseMock).toHaveBeenCalledWith(false); }); + it('maskClosable should control mask close behavior only', () => { + const onPreviewOpenChange = jest.fn(); + const { container } = render( + , + ); + + fireEvent.click(container.querySelector('.rc-image')); + act(() => { + jest.runAllTimers(); + }); + + onPreviewOpenChange.mockReset(); + + fireEvent.click(document.querySelector('.rc-image-preview-mask')); + expect(document.querySelector('.rc-image-preview')).toBeTruthy(); + expect(onPreviewOpenChange).not.toHaveBeenCalled(); + + fireEvent.click(document.querySelector('.rc-image-preview-close')); + expect(onPreviewOpenChange).toHaveBeenCalledWith(false); + }); + it('Unmount', () => { const { container, unmount } = render( ,