Add new MouseTransition, extend HTML5toTouch to use MouseTransition

LouisBrunner · Jan 6, 2018 · 25eb78d · 25eb78d
1 parent de171c0
commit 25eb78d
Show file tree

Hide file tree

Showing 10 changed files with 34 additions and 10 deletions.
diff --git a/dist/RDMBHTML5toTouch.min.js b/dist/RDMBHTML5toTouch.min.js
diff --git a/dist/ReactDnDMultiBackend.min.js b/dist/ReactDnDMultiBackend.min.js
diff --git a/dist/dnd-multi-backend.min.js b/dist/dnd-multi-backend.min.js
diff --git a/examples/examples_react-dnd-multi-backend.min.js b/examples/examples_react-dnd-multi-backend.min.js
diff --git a/packages/dnd-multi-backend/src/Transitions.js b/packages/dnd-multi-backend/src/Transitions.js
@@ -10,3 +10,10 @@ export const HTML5DragTransition = createTransition('dragstart', (event) => {
   }
   return false;
 });
+
+export const MouseTransition = createTransition('mousedown', (event) => {
+  if (event.type) {
+    return event.type.indexOf('touch') === -1 && event.type.indexOf('mouse') !== -1;
+  }
+  return false;
+});
diff --git a/packages/dnd-multi-backend/src/__tests__/Transitions_spec.js b/packages/dnd-multi-backend/src/__tests__/Transitions_spec.js
@@ -23,4 +23,18 @@ describe('Transitions collection', () => {
       expect(Transitions.TouchTransition.check({click: true})).to.equal(false);
     });
   });
+
+  describe('MouseTransition object', () => {
+    it('calls createTransition correctly', () => {
+      expect(Transitions.MouseTransition._isMBTransition).to.equal(true);
+      expect(Transitions.MouseTransition.event).to.equal('mousedown');
+
+      expect(Transitions.MouseTransition.check({touches: true})).to.equal(false);
+      expect(Transitions.MouseTransition.check({click: true})).to.equal(false);
+      expect(Transitions.MouseTransition.check({type: 'abc'})).to.equal(false);
+      expect(Transitions.MouseTransition.check({type: 'xyztouchxyz'})).to.equal(false);
+      expect(Transitions.MouseTransition.check({type: 'xyztouchamousexyz'})).to.equal(false);
+      expect(Transitions.MouseTransition.check({type: 'xyzmousexyz'})).to.equal(true);
+    });
+  });
 });
diff --git a/packages/dnd-multi-backend/src/__tests__/index_spec.js b/packages/dnd-multi-backend/src/__tests__/index_spec.js
@@ -5,7 +5,7 @@ import * as Module from '../index';
 
 import MultiBackend from '../MultiBackend';
 
-import { HTML5DragTransition, TouchTransition } from '../Transitions';
+import { HTML5DragTransition, TouchTransition, MouseTransition } from '../Transitions';
 import createTransition from '../createTransition';
 
 
@@ -21,6 +21,7 @@ describe('ReactDnDMultiBackend module', () => {
   it('exports utils components', () => {
     expect(Module.HTML5DragTransition).to.equal(HTML5DragTransition);
     expect(Module.TouchTransition).to.equal(TouchTransition);
+    expect(Module.MouseTransition).to.equal(MouseTransition);
     expect(Module.createTransition).to.equal(createTransition);
   });
 });
diff --git a/packages/dnd-multi-backend/src/index.js b/packages/dnd-multi-backend/src/index.js
@@ -1,8 +1,8 @@
 import MultiBackend from './MultiBackend';
-import { HTML5DragTransition, TouchTransition } from './Transitions';
+import { HTML5DragTransition, TouchTransition, MouseTransition } from './Transitions';
 import createTransition from './createTransition';
 
-export { HTML5DragTransition, TouchTransition, createTransition };
+export { HTML5DragTransition, TouchTransition, MouseTransition, createTransition };
 
 export default (managerOrOptions) => {
   if (managerOrOptions.getMonitor) {

diff --git a/packages/react-dnd-multi-backend/src/HTML5toTouch.js b/packages/react-dnd-multi-backend/src/HTML5toTouch.js
@@ -1,12 +1,13 @@
 import HTML5Backend from 'react-dnd-html5-backend';
 import TouchBackend from 'react-dnd-touch-backend';
 
-import { TouchTransition } from 'dnd-multi-backend';
+import { TouchTransition, MouseTransition } from 'dnd-multi-backend';
 
 export default {
   backends: [
     {
       backend: HTML5Backend,
+      transition: MouseTransition,
     },
     {
       backend: TouchBackend({enableMouseEvents: true}),

diff --git a/packages/react-dnd-multi-backend/src/__tests__/HTML5toTouch_spec.js b/packages/react-dnd-multi-backend/src/__tests__/HTML5toTouch_spec.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-expressions */
 import { expect } from 'tests/framework';
 import HTML5toTouch from '../HTML5toTouch';
-import { TouchTransition } from 'dnd-multi-backend';
+import { TouchTransition, MouseTransition } from 'dnd-multi-backend';
 
 describe('HTML5toTouch pipeline', () => {
   it('has the HTML5 and Touch backends', () => {
@@ -11,7 +11,8 @@ describe('HTML5toTouch pipeline', () => {
 
     expect(HTML5toTouch.backends[0]).to.be.an.instanceof(Object);
     expect(HTML5toTouch.backends[0].backend).not.to.be.undefined;
-    expect(HTML5toTouch.backends[0].transition).to.be.undefined;
+    expect(HTML5toTouch.backends[0].preview).to.be.undefined;
+    expect(HTML5toTouch.backends[0].transition).to.equal(MouseTransition);
 
     expect(HTML5toTouch.backends[1]).to.be.an.instanceof(Object);
     expect(HTML5toTouch.backends[1].backend).not.to.be.undefined;