Support onMouseMove handler (#80)

Mojang · Aug 2, 2022 · 414141d · 414141d
1 parent b2d8e8d
commit 414141d
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 0 deletions.
diff --git a/packages/@react-facet/dom-fiber/src/setupHostConfig.spec.tsx b/packages/@react-facet/dom-fiber/src/setupHostConfig.spec.tsx
@@ -725,6 +725,7 @@ describe('mount', () => {
     let onFocus: jest.Mock
     let onBlur: jest.Mock
     let onMouseDown: jest.Mock
+    let onMouseMove: jest.Mock
     let onMouseUp: jest.Mock
     let onTouchStart: jest.Mock
     let onTouchMove: jest.Mock
@@ -741,6 +742,7 @@ describe('mount', () => {
       onFocus = jest.fn()
       onBlur = jest.fn()
       onMouseDown = jest.fn()
+      onMouseMove = jest.fn()
       onMouseUp = jest.fn()
       onTouchStart = jest.fn()
       onTouchMove = jest.fn()
@@ -758,6 +760,7 @@ describe('mount', () => {
           onFocus={onFocus}
           onBlur={onBlur}
           onMouseDown={onMouseDown}
+          onMouseMove={onMouseMove}
           onMouseUp={onMouseUp}
           onTouchStart={onTouchStart}
           onTouchMove={onTouchMove}
@@ -796,6 +799,11 @@ describe('mount', () => {
       expect(onMouseDown).toHaveBeenCalled()
     })
 
+    it('supports onMouseMove', () => {
+      div.dispatchEvent(new Event('mousemove'))
+      expect(onMouseMove).toHaveBeenCalled()
+    })
+
     it('supports onMouseUp', () => {
       div.dispatchEvent(new Event('mouseup'))
       expect(onMouseUp).toHaveBeenCalled()
@@ -1437,6 +1445,7 @@ describe('update', () => {
     let firstOnFocus: jest.Mock
     let firstOnBlur: jest.Mock
     let firstOnMouseDown: jest.Mock
+    let firstOnMouseMove: jest.Mock
     let firstOnMouseUp: jest.Mock
     let firstOnTouchStart: jest.Mock
     let firstOnTouchMove: jest.Mock
@@ -1451,6 +1460,7 @@ describe('update', () => {
     let secondOnFocus: jest.Mock
     let secondOnBlur: jest.Mock
     let secondOnMouseDown: jest.Mock
+    let secondOnMouseMove: jest.Mock
     let secondOnMouseUp: jest.Mock
     let secondOnTouchStart: jest.Mock
     let secondOnTouchMove: jest.Mock
@@ -1479,6 +1489,7 @@ describe('update', () => {
           onFocus={second ? secondOnFocus : firstOnFocus}
           onBlur={second ? secondOnBlur : firstOnBlur}
           onMouseDown={second ? secondOnMouseDown : firstOnMouseDown}
+          onMouseMove={second ? secondOnMouseMove : firstOnMouseMove}
           onMouseUp={second ? secondOnMouseUp : firstOnMouseUp}
           onTouchStart={second ? secondOnTouchStart : firstOnTouchStart}
           onTouchMove={second ? secondOnTouchMove : firstOnTouchMove}
@@ -1499,6 +1510,7 @@ describe('update', () => {
       firstOnFocus = jest.fn()
       firstOnBlur = jest.fn()
       firstOnMouseDown = jest.fn()
+      firstOnMouseMove = jest.fn()
       firstOnMouseUp = jest.fn()
       firstOnTouchStart = jest.fn()
       firstOnTouchMove = jest.fn()
@@ -1513,6 +1525,7 @@ describe('update', () => {
       secondOnFocus = jest.fn()
       secondOnBlur = jest.fn()
       secondOnMouseDown = jest.fn()
+      secondOnMouseMove = jest.fn()
       secondOnMouseUp = jest.fn()
       secondOnTouchStart = jest.fn()
       secondOnTouchMove = jest.fn()
@@ -1585,6 +1598,20 @@ describe('update', () => {
       expect(secondOnMouseDown).toHaveBeenCalled()
     })
 
+    it('supports onMouseMove', () => {
+      div.dispatchEvent(new Event('mousemove'))
+      expect(firstOnMouseMove).toHaveBeenCalled()
+      expect(secondOnMouseMove).not.toHaveBeenCalled()
+
+      firstOnMouseMove.mockClear()
+      secondOnMouseMove.mockClear()
+      jest.runAllTimers()
+
+      div.dispatchEvent(new Event('mousemove'))
+      expect(firstOnMouseMove).not.toHaveBeenCalled()
+      expect(secondOnMouseMove).toHaveBeenCalled()
+    })
+
     it('supports onMouseUp', () => {
       div.dispatchEvent(new Event('mouseup'))
       expect(firstOnMouseUp).toHaveBeenCalled()

diff --git a/packages/@react-facet/dom-fiber/src/setupHostConfig.ts b/packages/@react-facet/dom-fiber/src/setupHostConfig.ts
@@ -168,6 +168,10 @@ export const setupHostConfig = (): HostConfig<
       element.addEventListener('mousedown', newProps.onMouseDown as EventListener)
     }
 
+    if (newProps.onMouseMove) {
+      element.addEventListener('mousemove', newProps.onMouseMove as EventListener)
+    }
+
     if (newProps.onMouseUp) {
       element.addEventListener('mouseup', newProps.onMouseUp as EventListener)
     }
@@ -829,6 +833,11 @@ export const setupHostConfig = (): HostConfig<
       if (newProps.onMouseDown) element.addEventListener('mousedown', newProps.onMouseDown)
     }
 
+    if (newProps.onMouseMove !== oldProps.onMouseMove) {
+      if (oldProps.onMouseMove) element.removeEventListener('mousemove', oldProps.onMouseMove)
+      if (newProps.onMouseMove) element.addEventListener('mousemove', newProps.onMouseMove)
+    }
+
     if (newProps.onMouseEnter !== oldProps.onMouseEnter) {
       if (oldProps.onMouseEnter) element.removeEventListener('mouseenter', oldProps.onMouseEnter)
       if (newProps.onMouseEnter) element.addEventListener('mouseenter', newProps.onMouseEnter)

diff --git a/packages/@react-facet/dom-fiber/src/types.ts b/packages/@react-facet/dom-fiber/src/types.ts
@@ -77,6 +77,7 @@ export type MouseCallback = (event: MouseEvent) => void
 export interface PointerEvents {
   onClick?: MouseCallback
   onMouseDown?: MouseCallback
+  onMouseMove?: MouseCallback
   onMouseUp?: MouseCallback
   onTouchStart?: TouchCallback
   onTouchMove?: TouchCallback