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
Diego Muracciole committed
Feb 3, 2017 at 07:25 UTC
ad133f5b3dbf01331f819f3000ab52097bf7d598
6 files changed
+35
-3
docs/docs/reference-events.md
+13
-3
@@ -84,6 +84,7 @@ The event handlers below are triggered by an event in the bubbling phase. To reg
84
- [Image Events](#image-events)
85
- [Animation Events](#animation-events)
86
- [Transition Events](#transition-events)
87
+- [Other Events](#other-events)
88
89
* * *
90
@@ -286,9 +287,9 @@ number deltaZ
287
Event names:
288
289
```
289
-onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
290
-onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
291
-onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
290
+onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
291
+onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
292
+onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
293
onTimeUpdate onVolumeChange onWaiting
294
```
295
@@ -338,3 +339,12 @@ string pseudoElement
339
float elapsedTime
340
```
341
342
+* * *
343
+
344
+### Other Events
345
+
346
+Event names:
347
+
348
+```
349
+onToggle
350
+```
src/renderers/dom/fiber/ReactDOMFiberComponent.js
+8
@@ -264,6 +264,13 @@ function trapBubbledEventsLocal(node : Element, tag : string) {
264
node
265
);
266
break;
267
+ case 'details':
268
+ ReactBrowserEventEmitter.trapBubbledEvent(
269
+ 'topToggle',
270
+ 'toggle',
271
+ node
272
+ );
273
+ break;
274
}
275
}
276
@@ -518,6 +525,7 @@ var ReactDOMFiberComponent = {
525
case 'object':
526
case 'source':
527
case 'video':
528
+ case 'details':
529
trapBubbledEventsLocal(domElement, tag);
530
props = rawProps;
531
break;
src/renderers/dom/shared/ReactBrowserEventEmitter.js
+1
@@ -140,6 +140,7 @@ var topEventMapping = {
140
topSuspend: 'suspend',
141
topTextInput: 'textInput',
142
topTimeUpdate: 'timeupdate',
143
+ topToggle: 'toggle',
144
topTouchCancel: 'touchcancel',
145
topTouchEnd: 'touchend',
146
topTouchMove: 'touchmove',
src/renderers/dom/shared/eventPlugins/SimpleEventPlugin.js
+2
@@ -116,6 +116,7 @@ var topLevelEventsToDispatchConfig: {[key: TopLevelTypes]: DispatchConfig} = {};
116
'submit',
117
'suspend',
118
'timeUpdate',
119
+ 'toggle',
120
'touchCancel',
121
'touchEnd',
122
'touchMove',
@@ -184,6 +185,7 @@ var SimpleEventPlugin: PluginModule<MouseEvent> = {
185
case 'topSubmit':
186
case 'topSuspend':
187
case 'topTimeUpdate':
188
+ case 'topToggle':
189
case 'topVolumeChange':
190
case 'topWaiting':
191
// HTML Events
src/renderers/dom/stack/client/ReactDOMComponent.js
+10
@@ -331,6 +331,15 @@ function trapBubbledEventsLocal() {
331
),
332
];
333
break;
334
+ case 'details':
335
+ inst._wrapperState.listeners = [
336
+ ReactBrowserEventEmitter.trapBubbledEvent(
337
+ 'topToggle',
338
+ 'toggle',
339
+ node
340
+ ),
341
+ ];
342
+ break;
343
}
344
}
345
@@ -465,6 +474,7 @@ ReactDOMComponent.Mixin = {
474
case 'object':
475
case 'source':
476
case 'video':
477
+ case 'details':
478
this._wrapperState = {
479
listeners: null,
480
};
src/renderers/shared/shared/event/EventConstants.js
+1
@@ -79,6 +79,7 @@ var topLevelTypes = {
79
topSuspend: null,
80
topTextInput: null,
81
topTimeUpdate: null,
82
+ topToggle: null,
83
topTouchCancel: null,
84
topTouchEnd: null,
85
topTouchMove: null,