[Flare] Add event position properties to Hover responder (facebook#15819

)
hyyqcweb · Jun 4, 2019 · 2534c0c · 2534c0c
1 parent b63a41d
commit 2534c0c
Show file tree

Hide file tree

Showing 2 changed files with 143 additions and 2 deletions.
diff --git a/packages/react-events/src/Hover.js b/packages/react-events/src/Hover.js
@@ -43,6 +43,14 @@ type HoverEvent = {|
   target: Element | Document,
   type: HoverEventType,
   timeStamp: number,
+  clientX: null | number,
+  clientY: null | number,
+  pageX: null | number,
+  pageY: null | number,
+  screenX: null | number,
+  screenY: null | number,
+  x: null | number,
+  y: null | number,
 |};
 
 const DEFAULT_HOVER_END_DELAY_MS = 0;
@@ -61,18 +69,40 @@ if (typeof window !== 'undefined' && window.PointerEvent === undefined) {
 }
 
 function createHoverEvent(
+  event: ?ReactResponderEvent,
   context: ReactResponderContext,
   type: HoverEventType,
   target: Element | Document,
 ): HoverEvent {
+  let clientX = null;
+  let clientY = null;
+  let pageX = null;
+  let pageY = null;
+  let screenX = null;
+  let screenY = null;
+
+  if (event) {
+    const nativeEvent = (event.nativeEvent: any);
+    ({clientX, clientY, pageX, pageY, screenX, screenY} = nativeEvent);
+  }
+
   return {
     target,
     type,
     timeStamp: context.getTimeStamp(),
+    clientX,
+    clientY,
+    pageX,
+    pageY,
+    screenX,
+    screenY,
+    x: clientX,
+    y: clientY,
   };
 }
 
 function dispatchHoverChangeEvent(
+  event: null | ReactResponderEvent,
   context: ReactResponderContext,
   props: HoverProps,
   state: HoverState,
@@ -82,6 +112,7 @@ function dispatchHoverChangeEvent(
     props.onHoverChange(bool);
   };
   const syntheticEvent = createHoverEvent(
+    event,
     context,
     'hoverchange',
     ((state.hoverTarget: any): Element | Document),
@@ -119,14 +150,15 @@ function dispatchHoverStartEvents(
 
     if (props.onHoverStart) {
       const syntheticEvent = createHoverEvent(
+        event,
         context,
         'hoverstart',
         ((target: any): Element | Document),
       );
       context.dispatchEvent(syntheticEvent, props.onHoverStart, true);
     }
     if (props.onHoverChange) {
-      dispatchHoverChangeEvent(context, props, state);
+      dispatchHoverChangeEvent(event, context, props, state);
     }
   };
 
@@ -177,14 +209,15 @@ function dispatchHoverEndEvents(
 
     if (props.onHoverEnd) {
       const syntheticEvent = createHoverEvent(
+        event,
         context,
         'hoverend',
         ((target: any): Element | Document),
       );
       context.dispatchEvent(syntheticEvent, props.onHoverEnd, true);
     }
     if (props.onHoverChange) {
-      dispatchHoverChangeEvent(context, props, state);
+      dispatchHoverChangeEvent(event, context, props, state);
     }
 
     state.isOverTouchHitTarget = false;
@@ -316,6 +349,7 @@ const HoverResponder = {
               } else {
                 if (props.onHoverMove && state.hoverTarget !== null) {
                   const syntheticEvent = createHoverEvent(
+                    event,
                     context,
                     'hovermove',
                     state.hoverTarget,

diff --git a/packages/react-events/src/__tests__/Hover-test.internal.js b/packages/react-events/src/__tests__/Hover-test.internal.js
@@ -464,4 +464,111 @@ describe('Hover event responder', () => {
   it('expect displayName to show up for event component', () => {
     expect(Hover.displayName).toBe('Hover');
   });
+
+  it('should correctly pass through event properties', () => {
+    const timeStamps = [];
+    const ref = React.createRef();
+    const eventLog = [];
+    const logEvent = event => {
+      const propertiesWeCareAbout = {
+        pageX: event.pageX,
+        pageY: event.pageY,
+        screenX: event.screenX,
+        screenY: event.screenY,
+        clientX: event.clientX,
+        clientY: event.clientY,
+        pointerType: event.pointerType,
+        target: event.target,
+        timeStamp: event.timeStamp,
+        type: event.type,
+      };
+      timeStamps.push(event.timeStamp);
+      eventLog.push(propertiesWeCareAbout);
+    };
+    const element = (
+      <Hover
+        onHoverStart={logEvent}
+        onHoverEnd={logEvent}
+        onHoverMove={logEvent}>
+        <button ref={ref} />
+      </Hover>
+    );
+    ReactDOM.render(element, container);
+
+    ref.current.getBoundingClientRect = () => ({
+      top: 10,
+      left: 10,
+      bottom: 20,
+      right: 20,
+    });
+
+    ref.current.dispatchEvent(
+      createPointerEvent('pointerover', {
+        pointerType: 'mouse',
+        pageX: 15,
+        pageY: 16,
+        screenX: 20,
+        screenY: 21,
+        clientX: 30,
+        clientY: 31,
+      }),
+    );
+    ref.current.dispatchEvent(
+      createPointerEvent('pointermove', {
+        pointerType: 'mouse',
+        pageX: 16,
+        pageY: 17,
+        screenX: 21,
+        screenY: 22,
+        clientX: 31,
+        clientY: 32,
+      }),
+    );
+    ref.current.dispatchEvent(
+      createPointerEvent('pointerout', {
+        pointerType: 'mouse',
+        pageX: 17,
+        pageY: 18,
+        screenX: 22,
+        screenY: 23,
+        clientX: 32,
+        clientY: 33,
+      }),
+    );
+    expect(eventLog).toEqual([
+      {
+        pageX: 15,
+        pageY: 16,
+        screenX: 20,
+        screenY: 21,
+        clientX: 30,
+        clientY: 31,
+        target: ref.current,
+        timeStamp: timeStamps[0],
+        type: 'hoverstart',
+      },
+      {
+        pageX: 16,
+        pageY: 17,
+        screenX: 21,
+        screenY: 22,
+        clientX: 31,
+        clientY: 32,
+        target: ref.current,
+        timeStamp: timeStamps[1],
+        type: 'hovermove',
+      },
+      {
+        pageX: 17,
+        pageY: 18,
+        screenX: 22,
+        screenY: 23,
+        clientX: 32,
+        clientY: 33,
+        target: ref.current,
+        timeStamp: timeStamps[2],
+        type: 'hoverend',
+      },
+    ]);
+  });
 });