From 587676900f5575868b2e4c2bc67755536e231c4f Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Sun, 21 Apr 2019 18:17:18 -0700
Subject: [PATCH] React events: initial implementation of disabled prop
 (#15458)

---
 packages/react-events/src/Focus.js            |  9 ++++++
 packages/react-events/src/Hover.js            | 11 +++++++
 packages/react-events/src/Press.js            |  7 +++++
 .../src/__tests__/Focus-test.internal.js      | 23 +++++++++++++++
 .../src/__tests__/Hover-test.internal.js      | 26 +++++++++++++++++
 .../src/__tests__/Press-test.internal.js      | 29 +++++++++++++++++++
 6 files changed, 105 insertions(+)

diff --git a/packages/react-events/src/Focus.js b/packages/react-events/src/Focus.js
index 83c121b5635ac..f2eb1fd0975b0 100644
--- a/packages/react-events/src/Focus.js
+++ b/packages/react-events/src/Focus.js
@@ -117,6 +117,15 @@ const FocusResponder = {
     const shouldStopPropagation =
       props.stopPropagation === undefined ? true : props.stopPropagation;
 
+    if (props.disabled) {
+      if (state.isFocused) {
+        dispatchFocusOutEvents(context, props, state);
+        state.isFocused = false;
+        state.focusTarget = null;
+      }
+      return false;
+    }
+
     // Focus doesn't handle capture target events at this point
     if (phase === CAPTURE_PHASE) {
       return false;
diff --git a/packages/react-events/src/Hover.js b/packages/react-events/src/Hover.js
index 4893adfd5319d..b8144a9ec288b 100644
--- a/packages/react-events/src/Hover.js
+++ b/packages/react-events/src/Hover.js
@@ -253,6 +253,17 @@ const HoverResponder = {
   ): boolean {
     const {type} = event;
 
+    if (props.disabled) {
+      if (state.isHovered) {
+        dispatchHoverEndEvents(event, context, props, state);
+        state.ignoreEmulatedMouseEvents = false;
+      }
+      if (state.isTouched) {
+        state.isTouched = false;
+      }
+      return false;
+    }
+
     // Hover doesn't handle capture target events at this point
     if (event.phase === CAPTURE_PHASE) {
       return false;
diff --git a/packages/react-events/src/Press.js b/packages/react-events/src/Press.js
index 457d92e0840ed..eb83f6fb68023 100644
--- a/packages/react-events/src/Press.js
+++ b/packages/react-events/src/Press.js
@@ -408,6 +408,13 @@ const PressResponder = {
   ): boolean {
     const {phase, target, type} = event;
 
+    if (props.disabled) {
+      dispatchPressEndEvents(context, props, state);
+      context.removeRootEventTypes(rootEventTypes);
+      state.ignoreEmulatedMouseEvents = false;
+      return false;
+    }
+
     // Press doesn't handle capture target events at this point
     if (phase === CAPTURE_PHASE) {
       return false;
diff --git a/packages/react-events/src/__tests__/Focus-test.internal.js b/packages/react-events/src/__tests__/Focus-test.internal.js
index 2364389c49792..821cbc1acdca6 100644
--- a/packages/react-events/src/__tests__/Focus-test.internal.js
+++ b/packages/react-events/src/__tests__/Focus-test.internal.js
@@ -40,6 +40,29 @@ describe('Focus event responder', () => {
     container = null;
   });
 
+  describe('disabled', () => {
+    let onBlur, onFocus, ref;
+
+    beforeEach(() => {
+      onBlur = jest.fn();
+      onFocus = jest.fn();
+      ref = React.createRef();
+      const element = (
+        <Focus disabled={true} onBlur={onBlur} onFocus={onFocus}>
+          <div ref={ref} />
+        </Focus>
+      );
+      ReactDOM.render(element, container);
+    });
+
+    it('prevents custom events being dispatched', () => {
+      ref.current.dispatchEvent(createFocusEvent('focus'));
+      ref.current.dispatchEvent(createFocusEvent('blur'));
+      expect(onFocus).not.toBeCalled();
+      expect(onBlur).not.toBeCalled();
+    });
+  });
+
   describe('onBlur', () => {
     let onBlur, ref;
 
diff --git a/packages/react-events/src/__tests__/Hover-test.internal.js b/packages/react-events/src/__tests__/Hover-test.internal.js
index 6076807575bd6..dc29723b65917 100644
--- a/packages/react-events/src/__tests__/Hover-test.internal.js
+++ b/packages/react-events/src/__tests__/Hover-test.internal.js
@@ -45,6 +45,32 @@ describe('Hover event responder', () => {
     container = null;
   });
 
+  describe('disabled', () => {
+    let onHoverStart, onHoverEnd, ref;
+
+    beforeEach(() => {
+      onHoverStart = jest.fn();
+      onHoverEnd = jest.fn();
+      ref = React.createRef();
+      const element = (
+        <Hover
+          disabled={true}
+          onHoverStart={onHoverStart}
+          onHoverEnd={onHoverEnd}>
+          <div ref={ref} />
+        </Hover>
+      );
+      ReactDOM.render(element, container);
+    });
+
+    it('prevents custom events being dispatched', () => {
+      ref.current.dispatchEvent(createPointerEvent('pointerover'));
+      ref.current.dispatchEvent(createPointerEvent('pointerout'));
+      expect(onHoverStart).not.toBeCalled();
+      expect(onHoverEnd).not.toBeCalled();
+    });
+  });
+
   describe('onHoverStart', () => {
     let onHoverStart, ref;
 
diff --git a/packages/react-events/src/__tests__/Press-test.internal.js b/packages/react-events/src/__tests__/Press-test.internal.js
index 5f1684ad33adc..550ad95eee0fe 100644
--- a/packages/react-events/src/__tests__/Press-test.internal.js
+++ b/packages/react-events/src/__tests__/Press-test.internal.js
@@ -55,6 +55,35 @@ describe('Event responder: Press', () => {
     container = null;
   });
 
+  describe('disabled', () => {
+    let onPressStart, onPress, onPressEnd, ref;
+
+    beforeEach(() => {
+      onPressStart = jest.fn();
+      onPress = jest.fn();
+      onPressEnd = jest.fn();
+      ref = React.createRef();
+      const element = (
+        <Press
+          disabled={true}
+          onPressStart={onPressStart}
+          onPress={onPress}
+          onPressEnd={onPressEnd}>
+          <div ref={ref} />
+        </Press>
+      );
+      ReactDOM.render(element, container);
+    });
+
+    it('prevents custom events being dispatched', () => {
+      ref.current.dispatchEvent(createPointerEvent('pointerdown'));
+      ref.current.dispatchEvent(createPointerEvent('pointerup'));
+      expect(onPressStart).not.toBeCalled();
+      expect(onPress).not.toBeCalled();
+      expect(onPressEnd).not.toBeCalled();
+    });
+  });
+
   describe('onPressStart', () => {
     let onPressStart, ref;