fix: only allow main button when drag image (#61)

react-component · Jan 12, 2021 · 5e32bab · 5e32bab · vercel · Jan 12, 2021
1 parent 6f73023
commit 5e32bab
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/src/Preview.tsx b/src/Preview.tsx
@@ -171,6 +171,8 @@ const Preview: React.FC<PreviewProps> = props => {
   };
 
   const onMouseDown: React.MouseEventHandler<HTMLDivElement> = event => {
+    // Only allow main button
+    if (event.button !== 0) return;
     event.preventDefault();
     // Without this mask close will abnormal
     event.stopPropagation();

diff --git a/tests/preview.test.tsx b/tests/preview.test.tsx
@@ -214,6 +214,14 @@ describe('Preview', () => {
     wrapper.find('.rc-image-preview-img').simulate('mousedown', {
       pageX: 0,
       pageY: 0,
+      button: 2,
+    });
+    expect(wrapper.find('.rc-image-preview-moving').get(0)).toBeUndefined();
+
+    wrapper.find('.rc-image-preview-img').simulate('mousedown', {
+      pageX: 0,
+      pageY: 0,
+      button: 0,
     });
 
     expect(wrapper.find('.rc-image-preview-moving').get(0)).toBeTruthy();
@@ -250,6 +258,7 @@ describe('Preview', () => {
     wrapper.find('.rc-image-preview-img').simulate('mousedown', {
       pageX: 0,
       pageY: 0,
+      button: 0,
     });
 
     act(() => {
@@ -267,6 +276,7 @@ describe('Preview', () => {
     wrapper.find('.rc-image-preview-img').simulate('mousedown', {
       pageX: 0,
       pageY: 0,
+      button: 0,
     });
 
     act(() => {
@@ -286,6 +296,7 @@ describe('Preview', () => {
     wrapper.find('.rc-image-preview-img').simulate('mousedown', {
       pageX: 0,
       pageY: 0,
+      button: 0,
     });
 
     act(() => {
@@ -305,6 +316,7 @@ describe('Preview', () => {
     wrapper.find('.rc-image-preview-img').simulate('mousedown', {
       pageX: 0,
       pageY: 0,
+      button: 0,
     });
 
     act(() => {
@@ -324,6 +336,7 @@ describe('Preview', () => {
     wrapper.find('.rc-image-preview-img').simulate('mousedown', {
       pageX: 0,
       pageY: 0,
+      button: 0,
     });
 
     act(() => {
@@ -343,6 +356,7 @@ describe('Preview', () => {
     wrapper.find('.rc-image-preview-img').simulate('mousedown', {
       pageX: 0,
       pageY: 0,
+      button: 0,
     });
 
     act(() => {