Add onToggle event to details tag (#8831)

* Add onToggle event to details tag

Fixes #8761

* Map onToggle event on ReactDOMFiberComponent

* Tweak doc

* Trap events on setInitialProperties for details tag

docs/docs/reference-events.md

@@ -84,6 +84,7 @@ The event handlers below are triggered by an event in the bubbling phase. To reg
 - [Image Events](#image-events)
 - [Animation Events](#animation-events)
 - [Transition Events](#transition-events)
+- [Other Events](#other-events)
 
 * * *
 
@@ -286,9 +287,9 @@ number deltaZ
 Event names:
 
 ```
-onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted 
-onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay 
-onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend 
+onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
+onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
+onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
 onTimeUpdate onVolumeChange onWaiting
 ```
 
@@ -338,3 +339,12 @@ string pseudoElement
 float elapsedTime
 ```
 
+* * *
+
+### Other Events
+
+Event names:
+
+```
+onToggle
+```

src/renderers/dom/fiber/ReactDOMFiberComponent.js

@@ -264,6 +264,13 @@ function trapBubbledEventsLocal(node : Element, tag : string) {
         node
       );
       break;
+    case 'details':
+      ReactBrowserEventEmitter.trapBubbledEvent(
+        'topToggle',
+        'toggle',
+        node
+      );
+      break;
   }
 }
 
@@ -518,6 +525,7 @@ var ReactDOMFiberComponent = {
       case 'object':
       case 'source':
       case 'video':
+      case 'details':
         trapBubbledEventsLocal(domElement, tag);
         props = rawProps;
         break;

src/renderers/dom/shared/ReactBrowserEventEmitter.js

@@ -140,6 +140,7 @@ var topEventMapping = {
   topSuspend: 'suspend',
   topTextInput: 'textInput',
   topTimeUpdate: 'timeupdate',
+  topToggle: 'toggle',
   topTouchCancel: 'touchcancel',
   topTouchEnd: 'touchend',
   topTouchMove: 'touchmove',

src/renderers/dom/shared/eventPlugins/SimpleEventPlugin.js

@@ -116,6 +116,7 @@ var topLevelEventsToDispatchConfig: {[key: TopLevelTypes]: DispatchConfig} = {};
   'submit',
   'suspend',
   'timeUpdate',
+  'toggle',
   'touchCancel',
   'touchEnd',
   'touchMove',
@@ -184,6 +185,7 @@ var SimpleEventPlugin: PluginModule<MouseEvent> = {
       case 'topSubmit':
       case 'topSuspend':
       case 'topTimeUpdate':
+      case 'topToggle':
       case 'topVolumeChange':
       case 'topWaiting':
         // HTML Events

src/renderers/dom/stack/client/ReactDOMComponent.js

@@ -331,6 +331,15 @@ function trapBubbledEventsLocal() {
         ),
       ];
       break;
+    case 'details':
+      inst._wrapperState.listeners = [
+        ReactBrowserEventEmitter.trapBubbledEvent(
+          'topToggle',
+          'toggle',
+          node
+        ),
+      ];
+      break;
   }
 }
 
@@ -465,6 +474,7 @@ ReactDOMComponent.Mixin = {
       case 'object':
       case 'source':
       case 'video':
+      case 'details':
         this._wrapperState = {
           listeners: null,
         };

src/renderers/shared/shared/event/EventConstants.js

@@ -79,6 +79,7 @@ var topLevelTypes = {
   topSuspend: null,
   topTextInput: null,
   topTimeUpdate: null,
+  topToggle: null,
   topTouchCancel: null,
   topTouchEnd: null,
   topTouchMove: null,