UNPKG

739 kBJavaScriptView Raw
1/** @license React v16.7.0
2 * react-dom.development.js
3 *
4 * Copyright (c) Facebook, Inc. and its affiliates.
5 *
6 * This source code is licensed under the MIT license found in the
7 * LICENSE file in the root directory of this source tree.
8 */
9
10'use strict';
11
12
13
14if (process.env.NODE_ENV !== "production") {
15 (function() {
16'use strict';
17
18var React = require('react');
19var _assign = require('object-assign');
20var checkPropTypes = require('prop-types/checkPropTypes');
21var scheduler = require('scheduler');
22var tracing = require('scheduler/tracing');
23
24/**
25 * Use invariant() to assert state which your program assumes to be true.
26 *
27 * Provide sprintf-style format (only %s is supported) and arguments
28 * to provide information about what broke and what you were
29 * expecting.
30 *
31 * The invariant message will be stripped in production, but the invariant
32 * will remain to ensure logic does not differ in production.
33 */
34
35var validateFormat = function () {};
36
37{
38 validateFormat = function (format) {
39 if (format === undefined) {
40 throw new Error('invariant requires an error message argument');
41 }
42 };
43}
44
45function invariant(condition, format, a, b, c, d, e, f) {
46 validateFormat(format);
47
48 if (!condition) {
49 var error = void 0;
50 if (format === undefined) {
51 error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
52 } else {
53 var args = [a, b, c, d, e, f];
54 var argIndex = 0;
55 error = new Error(format.replace(/%s/g, function () {
56 return args[argIndex++];
57 }));
58 error.name = 'Invariant Violation';
59 }
60
61 error.framesToPop = 1; // we don't care about invariant's own frame
62 throw error;
63 }
64}
65
66// Relying on the `invariant()` implementation lets us
67// preserve the format and params in the www builds.
68
69!React ? invariant(false, 'ReactDOM was loaded before React. Make sure you load the React package before loading ReactDOM.') : void 0;
70
71var invokeGuardedCallbackImpl = function (name, func, context, a, b, c, d, e, f) {
72 var funcArgs = Array.prototype.slice.call(arguments, 3);
73 try {
74 func.apply(context, funcArgs);
75 } catch (error) {
76 this.onError(error);
77 }
78};
79
80{
81 // In DEV mode, we swap out invokeGuardedCallback for a special version
82 // that plays more nicely with the browser's DevTools. The idea is to preserve
83 // "Pause on exceptions" behavior. Because React wraps all user-provided
84 // functions in invokeGuardedCallback, and the production version of
85 // invokeGuardedCallback uses a try-catch, all user exceptions are treated
86 // like caught exceptions, and the DevTools won't pause unless the developer
87 // takes the extra step of enabling pause on caught exceptions. This is
88 // untintuitive, though, because even though React has caught the error, from
89 // the developer's perspective, the error is uncaught.
90 //
91 // To preserve the expected "Pause on exceptions" behavior, we don't use a
92 // try-catch in DEV. Instead, we synchronously dispatch a fake event to a fake
93 // DOM node, and call the user-provided callback from inside an event handler
94 // for that fake event. If the callback throws, the error is "captured" using
95 // a global event handler. But because the error happens in a different
96 // event loop context, it does not interrupt the normal program flow.
97 // Effectively, this gives us try-catch behavior without actually using
98 // try-catch. Neat!
99
100 // Check that the browser supports the APIs we need to implement our special
101 // DEV version of invokeGuardedCallback
102 if (typeof window !== 'undefined' && typeof window.dispatchEvent === 'function' && typeof document !== 'undefined' && typeof document.createEvent === 'function') {
103 var fakeNode = document.createElement('react');
104
105 var invokeGuardedCallbackDev = function (name, func, context, a, b, c, d, e, f) {
106 // If document doesn't exist we know for sure we will crash in this method
107 // when we call document.createEvent(). However this can cause confusing
108 // errors: https://github.com/facebookincubator/create-react-app/issues/3482
109 // So we preemptively throw with a better message instead.
110 !(typeof document !== 'undefined') ? invariant(false, 'The `document` global was defined when React was initialized, but is not defined anymore. This can happen in a test environment if a component schedules an update from an asynchronous callback, but the test has already finished running. To solve this, you can either unmount the component at the end of your test (and ensure that any asynchronous operations get canceled in `componentWillUnmount`), or you can change the test itself to be asynchronous.') : void 0;
111 var evt = document.createEvent('Event');
112
113 // Keeps track of whether the user-provided callback threw an error. We
114 // set this to true at the beginning, then set it to false right after
115 // calling the function. If the function errors, `didError` will never be
116 // set to false. This strategy works even if the browser is flaky and
117 // fails to call our global error handler, because it doesn't rely on
118 // the error event at all.
119 var didError = true;
120
121 // Keeps track of the value of window.event so that we can reset it
122 // during the callback to let user code access window.event in the
123 // browsers that support it.
124 var windowEvent = window.event;
125
126 // Keeps track of the descriptor of window.event to restore it after event
127 // dispatching: https://github.com/facebook/react/issues/13688
128 var windowEventDescriptor = Object.getOwnPropertyDescriptor(window, 'event');
129
130 // Create an event handler for our fake event. We will synchronously
131 // dispatch our fake event using `dispatchEvent`. Inside the handler, we
132 // call the user-provided callback.
133 var funcArgs = Array.prototype.slice.call(arguments, 3);
134 function callCallback() {
135 // We immediately remove the callback from event listeners so that
136 // nested `invokeGuardedCallback` calls do not clash. Otherwise, a
137 // nested call would trigger the fake event handlers of any call higher
138 // in the stack.
139 fakeNode.removeEventListener(evtType, callCallback, false);
140
141 // We check for window.hasOwnProperty('event') to prevent the
142 // window.event assignment in both IE <= 10 as they throw an error
143 // "Member not found" in strict mode, and in Firefox which does not
144 // support window.event.
145 if (typeof window.event !== 'undefined' && window.hasOwnProperty('event')) {
146 window.event = windowEvent;
147 }
148
149 func.apply(context, funcArgs);
150 didError = false;
151 }
152
153 // Create a global error event handler. We use this to capture the value
154 // that was thrown. It's possible that this error handler will fire more
155 // than once; for example, if non-React code also calls `dispatchEvent`
156 // and a handler for that event throws. We should be resilient to most of
157 // those cases. Even if our error event handler fires more than once, the
158 // last error event is always used. If the callback actually does error,
159 // we know that the last error event is the correct one, because it's not
160 // possible for anything else to have happened in between our callback
161 // erroring and the code that follows the `dispatchEvent` call below. If
162 // the callback doesn't error, but the error event was fired, we know to
163 // ignore it because `didError` will be false, as described above.
164 var error = void 0;
165 // Use this to track whether the error event is ever called.
166 var didSetError = false;
167 var isCrossOriginError = false;
168
169 function handleWindowError(event) {
170 error = event.error;
171 didSetError = true;
172 if (error === null && event.colno === 0 && event.lineno === 0) {
173 isCrossOriginError = true;
174 }
175 if (event.defaultPrevented) {
176 // Some other error handler has prevented default.
177 // Browsers silence the error report if this happens.
178 // We'll remember this to later decide whether to log it or not.
179 if (error != null && typeof error === 'object') {
180 try {
181 error._suppressLogging = true;
182 } catch (inner) {
183 // Ignore.
184 }
185 }
186 }
187 }
188
189 // Create a fake event type.
190 var evtType = 'react-' + (name ? name : 'invokeguardedcallback');
191
192 // Attach our event handlers
193 window.addEventListener('error', handleWindowError);
194 fakeNode.addEventListener(evtType, callCallback, false);
195
196 // Synchronously dispatch our fake event. If the user-provided function
197 // errors, it will trigger our global error handler.
198 evt.initEvent(evtType, false, false);
199 fakeNode.dispatchEvent(evt);
200
201 if (windowEventDescriptor) {
202 Object.defineProperty(window, 'event', windowEventDescriptor);
203 }
204
205 if (didError) {
206 if (!didSetError) {
207 // The callback errored, but the error event never fired.
208 error = new Error('An error was thrown inside one of your components, but React ' + "doesn't know what it was. This is likely due to browser " + 'flakiness. React does its best to preserve the "Pause on ' + 'exceptions" behavior of the DevTools, which requires some ' + "DEV-mode only tricks. It's possible that these don't work in " + 'your browser. Try triggering the error in production mode, ' + 'or switching to a modern browser. If you suspect that this is ' + 'actually an issue with React, please file an issue.');
209 } else if (isCrossOriginError) {
210 error = new Error("A cross-origin error was thrown. React doesn't have access to " + 'the actual error object in development. ' + 'See https://fb.me/react-crossorigin-error for more information.');
211 }
212 this.onError(error);
213 }
214
215 // Remove our event listeners
216 window.removeEventListener('error', handleWindowError);
217 };
218
219 invokeGuardedCallbackImpl = invokeGuardedCallbackDev;
220 }
221}
222
223var invokeGuardedCallbackImpl$1 = invokeGuardedCallbackImpl;
224
225// Used by Fiber to simulate a try-catch.
226var hasError = false;
227var caughtError = null;
228
229// Used by event system to capture/rethrow the first error.
230var hasRethrowError = false;
231var rethrowError = null;
232
233var reporter = {
234 onError: function (error) {
235 hasError = true;
236 caughtError = error;
237 }
238};
239
240/**
241 * Call a function while guarding against errors that happens within it.
242 * Returns an error if it throws, otherwise null.
243 *
244 * In production, this is implemented using a try-catch. The reason we don't
245 * use a try-catch directly is so that we can swap out a different
246 * implementation in DEV mode.
247 *
248 * @param {String} name of the guard to use for logging or debugging
249 * @param {Function} func The function to invoke
250 * @param {*} context The context to use when calling the function
251 * @param {...*} args Arguments for function
252 */
253function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) {
254 hasError = false;
255 caughtError = null;
256 invokeGuardedCallbackImpl$1.apply(reporter, arguments);
257}
258
259/**
260 * Same as invokeGuardedCallback, but instead of returning an error, it stores
261 * it in a global so it can be rethrown by `rethrowCaughtError` later.
262 * TODO: See if caughtError and rethrowError can be unified.
263 *
264 * @param {String} name of the guard to use for logging or debugging
265 * @param {Function} func The function to invoke
266 * @param {*} context The context to use when calling the function
267 * @param {...*} args Arguments for function
268 */
269function invokeGuardedCallbackAndCatchFirstError(name, func, context, a, b, c, d, e, f) {
270 invokeGuardedCallback.apply(this, arguments);
271 if (hasError) {
272 var error = clearCaughtError();
273 if (!hasRethrowError) {
274 hasRethrowError = true;
275 rethrowError = error;
276 }
277 }
278}
279
280/**
281 * During execution of guarded functions we will capture the first error which
282 * we will rethrow to be handled by the top level error handler.
283 */
284function rethrowCaughtError() {
285 if (hasRethrowError) {
286 var error = rethrowError;
287 hasRethrowError = false;
288 rethrowError = null;
289 throw error;
290 }
291}
292
293function hasCaughtError() {
294 return hasError;
295}
296
297function clearCaughtError() {
298 if (hasError) {
299 var error = caughtError;
300 hasError = false;
301 caughtError = null;
302 return error;
303 } else {
304 invariant(false, 'clearCaughtError was called but no error was captured. This error is likely caused by a bug in React. Please file an issue.');
305 }
306}
307
308/**
309 * Injectable ordering of event plugins.
310 */
311var eventPluginOrder = null;
312
313/**
314 * Injectable mapping from names to event plugin modules.
315 */
316var namesToPlugins = {};
317
318/**
319 * Recomputes the plugin list using the injected plugins and plugin ordering.
320 *
321 * @private
322 */
323function recomputePluginOrdering() {
324 if (!eventPluginOrder) {
325 // Wait until an `eventPluginOrder` is injected.
326 return;
327 }
328 for (var pluginName in namesToPlugins) {
329 var pluginModule = namesToPlugins[pluginName];
330 var pluginIndex = eventPluginOrder.indexOf(pluginName);
331 !(pluginIndex > -1) ? invariant(false, 'EventPluginRegistry: Cannot inject event plugins that do not exist in the plugin ordering, `%s`.', pluginName) : void 0;
332 if (plugins[pluginIndex]) {
333 continue;
334 }
335 !pluginModule.extractEvents ? invariant(false, 'EventPluginRegistry: Event plugins must implement an `extractEvents` method, but `%s` does not.', pluginName) : void 0;
336 plugins[pluginIndex] = pluginModule;
337 var publishedEvents = pluginModule.eventTypes;
338 for (var eventName in publishedEvents) {
339 !publishEventForPlugin(publishedEvents[eventName], pluginModule, eventName) ? invariant(false, 'EventPluginRegistry: Failed to publish event `%s` for plugin `%s`.', eventName, pluginName) : void 0;
340 }
341 }
342}
343
344/**
345 * Publishes an event so that it can be dispatched by the supplied plugin.
346 *
347 * @param {object} dispatchConfig Dispatch configuration for the event.
348 * @param {object} PluginModule Plugin publishing the event.
349 * @return {boolean} True if the event was successfully published.
350 * @private
351 */
352function publishEventForPlugin(dispatchConfig, pluginModule, eventName) {
353 !!eventNameDispatchConfigs.hasOwnProperty(eventName) ? invariant(false, 'EventPluginHub: More than one plugin attempted to publish the same event name, `%s`.', eventName) : void 0;
354 eventNameDispatchConfigs[eventName] = dispatchConfig;
355
356 var phasedRegistrationNames = dispatchConfig.phasedRegistrationNames;
357 if (phasedRegistrationNames) {
358 for (var phaseName in phasedRegistrationNames) {
359 if (phasedRegistrationNames.hasOwnProperty(phaseName)) {
360 var phasedRegistrationName = phasedRegistrationNames[phaseName];
361 publishRegistrationName(phasedRegistrationName, pluginModule, eventName);
362 }
363 }
364 return true;
365 } else if (dispatchConfig.registrationName) {
366 publishRegistrationName(dispatchConfig.registrationName, pluginModule, eventName);
367 return true;
368 }
369 return false;
370}
371
372/**
373 * Publishes a registration name that is used to identify dispatched events.
374 *
375 * @param {string} registrationName Registration name to add.
376 * @param {object} PluginModule Plugin publishing the event.
377 * @private
378 */
379function publishRegistrationName(registrationName, pluginModule, eventName) {
380 !!registrationNameModules[registrationName] ? invariant(false, 'EventPluginHub: More than one plugin attempted to publish the same registration name, `%s`.', registrationName) : void 0;
381 registrationNameModules[registrationName] = pluginModule;
382 registrationNameDependencies[registrationName] = pluginModule.eventTypes[eventName].dependencies;
383
384 {
385 var lowerCasedName = registrationName.toLowerCase();
386 possibleRegistrationNames[lowerCasedName] = registrationName;
387
388 if (registrationName === 'onDoubleClick') {
389 possibleRegistrationNames.ondblclick = registrationName;
390 }
391 }
392}
393
394/**
395 * Registers plugins so that they can extract and dispatch events.
396 *
397 * @see {EventPluginHub}
398 */
399
400/**
401 * Ordered list of injected plugins.
402 */
403var plugins = [];
404
405/**
406 * Mapping from event name to dispatch config
407 */
408var eventNameDispatchConfigs = {};
409
410/**
411 * Mapping from registration name to plugin module
412 */
413var registrationNameModules = {};
414
415/**
416 * Mapping from registration name to event name
417 */
418var registrationNameDependencies = {};
419
420/**
421 * Mapping from lowercase registration names to the properly cased version,
422 * used to warn in the case of missing event handlers. Available
423 * only in true.
424 * @type {Object}
425 */
426var possibleRegistrationNames = {};
427// Trust the developer to only use possibleRegistrationNames in true
428
429/**
430 * Injects an ordering of plugins (by plugin name). This allows the ordering
431 * to be decoupled from injection of the actual plugins so that ordering is
432 * always deterministic regardless of packaging, on-the-fly injection, etc.
433 *
434 * @param {array} InjectedEventPluginOrder
435 * @internal
436 * @see {EventPluginHub.injection.injectEventPluginOrder}
437 */
438function injectEventPluginOrder(injectedEventPluginOrder) {
439 !!eventPluginOrder ? invariant(false, 'EventPluginRegistry: Cannot inject event plugin ordering more than once. You are likely trying to load more than one copy of React.') : void 0;
440 // Clone the ordering so it cannot be dynamically mutated.
441 eventPluginOrder = Array.prototype.slice.call(injectedEventPluginOrder);
442 recomputePluginOrdering();
443}
444
445/**
446 * Injects plugins to be used by `EventPluginHub`. The plugin names must be
447 * in the ordering injected by `injectEventPluginOrder`.
448 *
449 * Plugins can be injected as part of page initialization or on-the-fly.
450 *
451 * @param {object} injectedNamesToPlugins Map from names to plugin modules.
452 * @internal
453 * @see {EventPluginHub.injection.injectEventPluginsByName}
454 */
455function injectEventPluginsByName(injectedNamesToPlugins) {
456 var isOrderingDirty = false;
457 for (var pluginName in injectedNamesToPlugins) {
458 if (!injectedNamesToPlugins.hasOwnProperty(pluginName)) {
459 continue;
460 }
461 var pluginModule = injectedNamesToPlugins[pluginName];
462 if (!namesToPlugins.hasOwnProperty(pluginName) || namesToPlugins[pluginName] !== pluginModule) {
463 !!namesToPlugins[pluginName] ? invariant(false, 'EventPluginRegistry: Cannot inject two different event plugins using the same name, `%s`.', pluginName) : void 0;
464 namesToPlugins[pluginName] = pluginModule;
465 isOrderingDirty = true;
466 }
467 }
468 if (isOrderingDirty) {
469 recomputePluginOrdering();
470 }
471}
472
473/**
474 * Similar to invariant but only logs a warning if the condition is not met.
475 * This can be used to log issues in development environments in critical
476 * paths. Removing the logging code for production environments will keep the
477 * same logic and follow the same code paths.
478 */
479
480var warningWithoutStack = function () {};
481
482{
483 warningWithoutStack = function (condition, format) {
484 for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
485 args[_key - 2] = arguments[_key];
486 }
487
488 if (format === undefined) {
489 throw new Error('`warningWithoutStack(condition, format, ...args)` requires a warning ' + 'message argument');
490 }
491 if (args.length > 8) {
492 // Check before the condition to catch violations early.
493 throw new Error('warningWithoutStack() currently supports at most 8 arguments.');
494 }
495 if (condition) {
496 return;
497 }
498 if (typeof console !== 'undefined') {
499 var argsWithFormat = args.map(function (item) {
500 return '' + item;
501 });
502 argsWithFormat.unshift('Warning: ' + format);
503
504 // We intentionally don't use spread (or .apply) directly because it
505 // breaks IE9: https://github.com/facebook/react/issues/13610
506 Function.prototype.apply.call(console.error, console, argsWithFormat);
507 }
508 try {
509 // --- Welcome to debugging React ---
510 // This error was thrown as a convenience so that you can use this stack
511 // to find the callsite that caused this warning to fire.
512 var argIndex = 0;
513 var message = 'Warning: ' + format.replace(/%s/g, function () {
514 return args[argIndex++];
515 });
516 throw new Error(message);
517 } catch (x) {}
518 };
519}
520
521var warningWithoutStack$1 = warningWithoutStack;
522
523var getFiberCurrentPropsFromNode = null;
524var getInstanceFromNode = null;
525var getNodeFromInstance = null;
526
527function setComponentTree(getFiberCurrentPropsFromNodeImpl, getInstanceFromNodeImpl, getNodeFromInstanceImpl) {
528 getFiberCurrentPropsFromNode = getFiberCurrentPropsFromNodeImpl;
529 getInstanceFromNode = getInstanceFromNodeImpl;
530 getNodeFromInstance = getNodeFromInstanceImpl;
531 {
532 !(getNodeFromInstance && getInstanceFromNode) ? warningWithoutStack$1(false, 'EventPluginUtils.setComponentTree(...): Injected ' + 'module is missing getNodeFromInstance or getInstanceFromNode.') : void 0;
533 }
534}
535
536var validateEventDispatches = void 0;
537{
538 validateEventDispatches = function (event) {
539 var dispatchListeners = event._dispatchListeners;
540 var dispatchInstances = event._dispatchInstances;
541
542 var listenersIsArr = Array.isArray(dispatchListeners);
543 var listenersLen = listenersIsArr ? dispatchListeners.length : dispatchListeners ? 1 : 0;
544
545 var instancesIsArr = Array.isArray(dispatchInstances);
546 var instancesLen = instancesIsArr ? dispatchInstances.length : dispatchInstances ? 1 : 0;
547
548 !(instancesIsArr === listenersIsArr && instancesLen === listenersLen) ? warningWithoutStack$1(false, 'EventPluginUtils: Invalid `event`.') : void 0;
549 };
550}
551
552/**
553 * Dispatch the event to the listener.
554 * @param {SyntheticEvent} event SyntheticEvent to handle
555 * @param {function} listener Application-level callback
556 * @param {*} inst Internal component instance
557 */
558function executeDispatch(event, listener, inst) {
559 var type = event.type || 'unknown-event';
560 event.currentTarget = getNodeFromInstance(inst);
561 invokeGuardedCallbackAndCatchFirstError(type, listener, undefined, event);
562 event.currentTarget = null;
563}
564
565/**
566 * Standard/simple iteration through an event's collected dispatches.
567 */
568function executeDispatchesInOrder(event) {
569 var dispatchListeners = event._dispatchListeners;
570 var dispatchInstances = event._dispatchInstances;
571 {
572 validateEventDispatches(event);
573 }
574 if (Array.isArray(dispatchListeners)) {
575 for (var i = 0; i < dispatchListeners.length; i++) {
576 if (event.isPropagationStopped()) {
577 break;
578 }
579 // Listeners and Instances are two parallel arrays that are always in sync.
580 executeDispatch(event, dispatchListeners[i], dispatchInstances[i]);
581 }
582 } else if (dispatchListeners) {
583 executeDispatch(event, dispatchListeners, dispatchInstances);
584 }
585 event._dispatchListeners = null;
586 event._dispatchInstances = null;
587}
588
589/**
590 * @see executeDispatchesInOrderStopAtTrueImpl
591 */
592
593
594/**
595 * Execution of a "direct" dispatch - there must be at most one dispatch
596 * accumulated on the event or it is considered an error. It doesn't really make
597 * sense for an event with multiple dispatches (bubbled) to keep track of the
598 * return values at each dispatch execution, but it does tend to make sense when
599 * dealing with "direct" dispatches.
600 *
601 * @return {*} The return value of executing the single dispatch.
602 */
603
604
605/**
606 * @param {SyntheticEvent} event
607 * @return {boolean} True iff number of dispatches accumulated is greater than 0.
608 */
609
610/**
611 * Accumulates items that must not be null or undefined into the first one. This
612 * is used to conserve memory by avoiding array allocations, and thus sacrifices
613 * API cleanness. Since `current` can be null before being passed in and not
614 * null after this function, make sure to assign it back to `current`:
615 *
616 * `a = accumulateInto(a, b);`
617 *
618 * This API should be sparingly used. Try `accumulate` for something cleaner.
619 *
620 * @return {*|array<*>} An accumulation of items.
621 */
622
623function accumulateInto(current, next) {
624 !(next != null) ? invariant(false, 'accumulateInto(...): Accumulated items must not be null or undefined.') : void 0;
625
626 if (current == null) {
627 return next;
628 }
629
630 // Both are not empty. Warning: Never call x.concat(y) when you are not
631 // certain that x is an Array (x could be a string with concat method).
632 if (Array.isArray(current)) {
633 if (Array.isArray(next)) {
634 current.push.apply(current, next);
635 return current;
636 }
637 current.push(next);
638 return current;
639 }
640
641 if (Array.isArray(next)) {
642 // A bit too dangerous to mutate `next`.
643 return [current].concat(next);
644 }
645
646 return [current, next];
647}
648
649/**
650 * @param {array} arr an "accumulation" of items which is either an Array or
651 * a single item. Useful when paired with the `accumulate` module. This is a
652 * simple utility that allows us to reason about a collection of items, but
653 * handling the case when there is exactly one item (and we do not need to
654 * allocate an array).
655 * @param {function} cb Callback invoked with each element or a collection.
656 * @param {?} [scope] Scope used as `this` in a callback.
657 */
658function forEachAccumulated(arr, cb, scope) {
659 if (Array.isArray(arr)) {
660 arr.forEach(cb, scope);
661 } else if (arr) {
662 cb.call(scope, arr);
663 }
664}
665
666/**
667 * Internal queue of events that have accumulated their dispatches and are
668 * waiting to have their dispatches executed.
669 */
670var eventQueue = null;
671
672/**
673 * Dispatches an event and releases it back into the pool, unless persistent.
674 *
675 * @param {?object} event Synthetic event to be dispatched.
676 * @private
677 */
678var executeDispatchesAndRelease = function (event) {
679 if (event) {
680 executeDispatchesInOrder(event);
681
682 if (!event.isPersistent()) {
683 event.constructor.release(event);
684 }
685 }
686};
687var executeDispatchesAndReleaseTopLevel = function (e) {
688 return executeDispatchesAndRelease(e);
689};
690
691function isInteractive(tag) {
692 return tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea';
693}
694
695function shouldPreventMouseEvent(name, type, props) {
696 switch (name) {
697 case 'onClick':
698 case 'onClickCapture':
699 case 'onDoubleClick':
700 case 'onDoubleClickCapture':
701 case 'onMouseDown':
702 case 'onMouseDownCapture':
703 case 'onMouseMove':
704 case 'onMouseMoveCapture':
705 case 'onMouseUp':
706 case 'onMouseUpCapture':
707 return !!(props.disabled && isInteractive(type));
708 default:
709 return false;
710 }
711}
712
713/**
714 * This is a unified interface for event plugins to be installed and configured.
715 *
716 * Event plugins can implement the following properties:
717 *
718 * `extractEvents` {function(string, DOMEventTarget, string, object): *}
719 * Required. When a top-level event is fired, this method is expected to
720 * extract synthetic events that will in turn be queued and dispatched.
721 *
722 * `eventTypes` {object}
723 * Optional, plugins that fire events must publish a mapping of registration
724 * names that are used to register listeners. Values of this mapping must
725 * be objects that contain `registrationName` or `phasedRegistrationNames`.
726 *
727 * `executeDispatch` {function(object, function, string)}
728 * Optional, allows plugins to override how an event gets dispatched. By
729 * default, the listener is simply invoked.
730 *
731 * Each plugin that is injected into `EventsPluginHub` is immediately operable.
732 *
733 * @public
734 */
735
736/**
737 * Methods for injecting dependencies.
738 */
739var injection = {
740 /**
741 * @param {array} InjectedEventPluginOrder
742 * @public
743 */
744 injectEventPluginOrder: injectEventPluginOrder,
745
746 /**
747 * @param {object} injectedNamesToPlugins Map from names to plugin modules.
748 */
749 injectEventPluginsByName: injectEventPluginsByName
750};
751
752/**
753 * @param {object} inst The instance, which is the source of events.
754 * @param {string} registrationName Name of listener (e.g. `onClick`).
755 * @return {?function} The stored callback.
756 */
757function getListener(inst, registrationName) {
758 var listener = void 0;
759
760 // TODO: shouldPreventMouseEvent is DOM-specific and definitely should not
761 // live here; needs to be moved to a better place soon
762 var stateNode = inst.stateNode;
763 if (!stateNode) {
764 // Work in progress (ex: onload events in incremental mode).
765 return null;
766 }
767 var props = getFiberCurrentPropsFromNode(stateNode);
768 if (!props) {
769 // Work in progress.
770 return null;
771 }
772 listener = props[registrationName];
773 if (shouldPreventMouseEvent(registrationName, inst.type, props)) {
774 return null;
775 }
776 !(!listener || typeof listener === 'function') ? invariant(false, 'Expected `%s` listener to be a function, instead got a value of `%s` type.', registrationName, typeof listener) : void 0;
777 return listener;
778}
779
780/**
781 * Allows registered plugins an opportunity to extract events from top-level
782 * native browser events.
783 *
784 * @return {*} An accumulation of synthetic events.
785 * @internal
786 */
787function extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
788 var events = null;
789 for (var i = 0; i < plugins.length; i++) {
790 // Not every plugin in the ordering may be loaded at runtime.
791 var possiblePlugin = plugins[i];
792 if (possiblePlugin) {
793 var extractedEvents = possiblePlugin.extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget);
794 if (extractedEvents) {
795 events = accumulateInto(events, extractedEvents);
796 }
797 }
798 }
799 return events;
800}
801
802function runEventsInBatch(events) {
803 if (events !== null) {
804 eventQueue = accumulateInto(eventQueue, events);
805 }
806
807 // Set `eventQueue` to null before processing it so that we can tell if more
808 // events get enqueued while processing.
809 var processingEventQueue = eventQueue;
810 eventQueue = null;
811
812 if (!processingEventQueue) {
813 return;
814 }
815
816 forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseTopLevel);
817 !!eventQueue ? invariant(false, 'processEventQueue(): Additional events were enqueued while processing an event queue. Support for this has not yet been implemented.') : void 0;
818 // This would be a good time to rethrow if any of the event handlers threw.
819 rethrowCaughtError();
820}
821
822function runExtractedEventsInBatch(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
823 var events = extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget);
824 runEventsInBatch(events);
825}
826
827var FunctionComponent = 0;
828var ClassComponent = 1;
829var IndeterminateComponent = 2; // Before we know whether it is function or class
830var HostRoot = 3; // Root of a host tree. Could be nested inside another node.
831var HostPortal = 4; // A subtree. Could be an entry point to a different renderer.
832var HostComponent = 5;
833var HostText = 6;
834var Fragment = 7;
835var Mode = 8;
836var ContextConsumer = 9;
837var ContextProvider = 10;
838var ForwardRef = 11;
839var Profiler = 12;
840var SuspenseComponent = 13;
841var MemoComponent = 14;
842var SimpleMemoComponent = 15;
843var LazyComponent = 16;
844var IncompleteClassComponent = 17;
845
846var randomKey = Math.random().toString(36).slice(2);
847var internalInstanceKey = '__reactInternalInstance$' + randomKey;
848var internalEventHandlersKey = '__reactEventHandlers$' + randomKey;
849
850function precacheFiberNode(hostInst, node) {
851 node[internalInstanceKey] = hostInst;
852}
853
854/**
855 * Given a DOM node, return the closest ReactDOMComponent or
856 * ReactDOMTextComponent instance ancestor.
857 */
858function getClosestInstanceFromNode(node) {
859 if (node[internalInstanceKey]) {
860 return node[internalInstanceKey];
861 }
862
863 while (!node[internalInstanceKey]) {
864 if (node.parentNode) {
865 node = node.parentNode;
866 } else {
867 // Top of the tree. This node must not be part of a React tree (or is
868 // unmounted, potentially).
869 return null;
870 }
871 }
872
873 var inst = node[internalInstanceKey];
874 if (inst.tag === HostComponent || inst.tag === HostText) {
875 // In Fiber, this will always be the deepest root.
876 return inst;
877 }
878
879 return null;
880}
881
882/**
883 * Given a DOM node, return the ReactDOMComponent or ReactDOMTextComponent
884 * instance, or null if the node was not rendered by this React.
885 */
886function getInstanceFromNode$1(node) {
887 var inst = node[internalInstanceKey];
888 if (inst) {
889 if (inst.tag === HostComponent || inst.tag === HostText) {
890 return inst;
891 } else {
892 return null;
893 }
894 }
895 return null;
896}
897
898/**
899 * Given a ReactDOMComponent or ReactDOMTextComponent, return the corresponding
900 * DOM node.
901 */
902function getNodeFromInstance$1(inst) {
903 if (inst.tag === HostComponent || inst.tag === HostText) {
904 // In Fiber this, is just the state node right now. We assume it will be
905 // a host component or host text.
906 return inst.stateNode;
907 }
908
909 // Without this first invariant, passing a non-DOM-component triggers the next
910 // invariant for a missing parent, which is super confusing.
911 invariant(false, 'getNodeFromInstance: Invalid argument.');
912}
913
914function getFiberCurrentPropsFromNode$1(node) {
915 return node[internalEventHandlersKey] || null;
916}
917
918function updateFiberProps(node, props) {
919 node[internalEventHandlersKey] = props;
920}
921
922function getParent(inst) {
923 do {
924 inst = inst.return;
925 // TODO: If this is a HostRoot we might want to bail out.
926 // That is depending on if we want nested subtrees (layers) to bubble
927 // events to their parent. We could also go through parentNode on the
928 // host node but that wouldn't work for React Native and doesn't let us
929 // do the portal feature.
930 } while (inst && inst.tag !== HostComponent);
931 if (inst) {
932 return inst;
933 }
934 return null;
935}
936
937/**
938 * Return the lowest common ancestor of A and B, or null if they are in
939 * different trees.
940 */
941function getLowestCommonAncestor(instA, instB) {
942 var depthA = 0;
943 for (var tempA = instA; tempA; tempA = getParent(tempA)) {
944 depthA++;
945 }
946 var depthB = 0;
947 for (var tempB = instB; tempB; tempB = getParent(tempB)) {
948 depthB++;
949 }
950
951 // If A is deeper, crawl up.
952 while (depthA - depthB > 0) {
953 instA = getParent(instA);
954 depthA--;
955 }
956
957 // If B is deeper, crawl up.
958 while (depthB - depthA > 0) {
959 instB = getParent(instB);
960 depthB--;
961 }
962
963 // Walk in lockstep until we find a match.
964 var depth = depthA;
965 while (depth--) {
966 if (instA === instB || instA === instB.alternate) {
967 return instA;
968 }
969 instA = getParent(instA);
970 instB = getParent(instB);
971 }
972 return null;
973}
974
975/**
976 * Return if A is an ancestor of B.
977 */
978
979
980/**
981 * Return the parent instance of the passed-in instance.
982 */
983
984
985/**
986 * Simulates the traversal of a two-phase, capture/bubble event dispatch.
987 */
988function traverseTwoPhase(inst, fn, arg) {
989 var path = [];
990 while (inst) {
991 path.push(inst);
992 inst = getParent(inst);
993 }
994 var i = void 0;
995 for (i = path.length; i-- > 0;) {
996 fn(path[i], 'captured', arg);
997 }
998 for (i = 0; i < path.length; i++) {
999 fn(path[i], 'bubbled', arg);
1000 }
1001}
1002
1003/**
1004 * Traverses the ID hierarchy and invokes the supplied `cb` on any IDs that
1005 * should would receive a `mouseEnter` or `mouseLeave` event.
1006 *
1007 * Does not invoke the callback on the nearest common ancestor because nothing
1008 * "entered" or "left" that element.
1009 */
1010function traverseEnterLeave(from, to, fn, argFrom, argTo) {
1011 var common = from && to ? getLowestCommonAncestor(from, to) : null;
1012 var pathFrom = [];
1013 while (true) {
1014 if (!from) {
1015 break;
1016 }
1017 if (from === common) {
1018 break;
1019 }
1020 var alternate = from.alternate;
1021 if (alternate !== null && alternate === common) {
1022 break;
1023 }
1024 pathFrom.push(from);
1025 from = getParent(from);
1026 }
1027 var pathTo = [];
1028 while (true) {
1029 if (!to) {
1030 break;
1031 }
1032 if (to === common) {
1033 break;
1034 }
1035 var _alternate = to.alternate;
1036 if (_alternate !== null && _alternate === common) {
1037 break;
1038 }
1039 pathTo.push(to);
1040 to = getParent(to);
1041 }
1042 for (var i = 0; i < pathFrom.length; i++) {
1043 fn(pathFrom[i], 'bubbled', argFrom);
1044 }
1045 for (var _i = pathTo.length; _i-- > 0;) {
1046 fn(pathTo[_i], 'captured', argTo);
1047 }
1048}
1049
1050/**
1051 * Some event types have a notion of different registration names for different
1052 * "phases" of propagation. This finds listeners by a given phase.
1053 */
1054function listenerAtPhase(inst, event, propagationPhase) {
1055 var registrationName = event.dispatchConfig.phasedRegistrationNames[propagationPhase];
1056 return getListener(inst, registrationName);
1057}
1058
1059/**
1060 * A small set of propagation patterns, each of which will accept a small amount
1061 * of information, and generate a set of "dispatch ready event objects" - which
1062 * are sets of events that have already been annotated with a set of dispatched
1063 * listener functions/ids. The API is designed this way to discourage these
1064 * propagation strategies from actually executing the dispatches, since we
1065 * always want to collect the entire set of dispatches before executing even a
1066 * single one.
1067 */
1068
1069/**
1070 * Tags a `SyntheticEvent` with dispatched listeners. Creating this function
1071 * here, allows us to not have to bind or create functions for each event.
1072 * Mutating the event's members allows us to not have to create a wrapping
1073 * "dispatch" object that pairs the event with the listener.
1074 */
1075function accumulateDirectionalDispatches(inst, phase, event) {
1076 {
1077 !inst ? warningWithoutStack$1(false, 'Dispatching inst must not be null') : void 0;
1078 }
1079 var listener = listenerAtPhase(inst, event, phase);
1080 if (listener) {
1081 event._dispatchListeners = accumulateInto(event._dispatchListeners, listener);
1082 event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);
1083 }
1084}
1085
1086/**
1087 * Collect dispatches (must be entirely collected before dispatching - see unit
1088 * tests). Lazily allocate the array to conserve memory. We must loop through
1089 * each event and perform the traversal for each one. We cannot perform a
1090 * single traversal for the entire collection of events because each event may
1091 * have a different target.
1092 */
1093function accumulateTwoPhaseDispatchesSingle(event) {
1094 if (event && event.dispatchConfig.phasedRegistrationNames) {
1095 traverseTwoPhase(event._targetInst, accumulateDirectionalDispatches, event);
1096 }
1097}
1098
1099/**
1100 * Accumulates without regard to direction, does not look for phased
1101 * registration names. Same as `accumulateDirectDispatchesSingle` but without
1102 * requiring that the `dispatchMarker` be the same as the dispatched ID.
1103 */
1104function accumulateDispatches(inst, ignoredDirection, event) {
1105 if (inst && event && event.dispatchConfig.registrationName) {
1106 var registrationName = event.dispatchConfig.registrationName;
1107 var listener = getListener(inst, registrationName);
1108 if (listener) {
1109 event._dispatchListeners = accumulateInto(event._dispatchListeners, listener);
1110 event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);
1111 }
1112 }
1113}
1114
1115/**
1116 * Accumulates dispatches on an `SyntheticEvent`, but only for the
1117 * `dispatchMarker`.
1118 * @param {SyntheticEvent} event
1119 */
1120function accumulateDirectDispatchesSingle(event) {
1121 if (event && event.dispatchConfig.registrationName) {
1122 accumulateDispatches(event._targetInst, null, event);
1123 }
1124}
1125
1126function accumulateTwoPhaseDispatches(events) {
1127 forEachAccumulated(events, accumulateTwoPhaseDispatchesSingle);
1128}
1129
1130
1131
1132function accumulateEnterLeaveDispatches(leave, enter, from, to) {
1133 traverseEnterLeave(from, to, accumulateDispatches, leave, enter);
1134}
1135
1136function accumulateDirectDispatches(events) {
1137 forEachAccumulated(events, accumulateDirectDispatchesSingle);
1138}
1139
1140var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
1141
1142// Do not uses the below two methods directly!
1143// Instead use constants exported from DOMTopLevelEventTypes in ReactDOM.
1144// (It is the only module that is allowed to access these methods.)
1145
1146function unsafeCastStringToDOMTopLevelType(topLevelType) {
1147 return topLevelType;
1148}
1149
1150function unsafeCastDOMTopLevelTypeToString(topLevelType) {
1151 return topLevelType;
1152}
1153
1154/**
1155 * Generate a mapping of standard vendor prefixes using the defined style property and event name.
1156 *
1157 * @param {string} styleProp
1158 * @param {string} eventName
1159 * @returns {object}
1160 */
1161function makePrefixMap(styleProp, eventName) {
1162 var prefixes = {};
1163
1164 prefixes[styleProp.toLowerCase()] = eventName.toLowerCase();
1165 prefixes['Webkit' + styleProp] = 'webkit' + eventName;
1166 prefixes['Moz' + styleProp] = 'moz' + eventName;
1167
1168 return prefixes;
1169}
1170
1171/**
1172 * A list of event names to a configurable list of vendor prefixes.
1173 */
1174var vendorPrefixes = {
1175 animationend: makePrefixMap('Animation', 'AnimationEnd'),
1176 animationiteration: makePrefixMap('Animation', 'AnimationIteration'),
1177 animationstart: makePrefixMap('Animation', 'AnimationStart'),
1178 transitionend: makePrefixMap('Transition', 'TransitionEnd')
1179};
1180
1181/**
1182 * Event names that have already been detected and prefixed (if applicable).
1183 */
1184var prefixedEventNames = {};
1185
1186/**
1187 * Element to check for prefixes on.
1188 */
1189var style = {};
1190
1191/**
1192 * Bootstrap if a DOM exists.
1193 */
1194if (canUseDOM) {
1195 style = document.createElement('div').style;
1196
1197 // On some platforms, in particular some releases of Android 4.x,
1198 // the un-prefixed "animation" and "transition" properties are defined on the
1199 // style object but the events that fire will still be prefixed, so we need
1200 // to check if the un-prefixed events are usable, and if not remove them from the map.
1201 if (!('AnimationEvent' in window)) {
1202 delete vendorPrefixes.animationend.animation;
1203 delete vendorPrefixes.animationiteration.animation;
1204 delete vendorPrefixes.animationstart.animation;
1205 }
1206
1207 // Same as above
1208 if (!('TransitionEvent' in window)) {
1209 delete vendorPrefixes.transitionend.transition;
1210 }
1211}
1212
1213/**
1214 * Attempts to determine the correct vendor prefixed event name.
1215 *
1216 * @param {string} eventName
1217 * @returns {string}
1218 */
1219function getVendorPrefixedEventName(eventName) {
1220 if (prefixedEventNames[eventName]) {
1221 return prefixedEventNames[eventName];
1222 } else if (!vendorPrefixes[eventName]) {
1223 return eventName;
1224 }
1225
1226 var prefixMap = vendorPrefixes[eventName];
1227
1228 for (var styleProp in prefixMap) {
1229 if (prefixMap.hasOwnProperty(styleProp) && styleProp in style) {
1230 return prefixedEventNames[eventName] = prefixMap[styleProp];
1231 }
1232 }
1233
1234 return eventName;
1235}
1236
1237/**
1238 * To identify top level events in ReactDOM, we use constants defined by this
1239 * module. This is the only module that uses the unsafe* methods to express
1240 * that the constants actually correspond to the browser event names. This lets
1241 * us save some bundle size by avoiding a top level type -> event name map.
1242 * The rest of ReactDOM code should import top level types from this file.
1243 */
1244var TOP_ABORT = unsafeCastStringToDOMTopLevelType('abort');
1245var TOP_ANIMATION_END = unsafeCastStringToDOMTopLevelType(getVendorPrefixedEventName('animationend'));
1246var TOP_ANIMATION_ITERATION = unsafeCastStringToDOMTopLevelType(getVendorPrefixedEventName('animationiteration'));
1247var TOP_ANIMATION_START = unsafeCastStringToDOMTopLevelType(getVendorPrefixedEventName('animationstart'));
1248var TOP_BLUR = unsafeCastStringToDOMTopLevelType('blur');
1249var TOP_CAN_PLAY = unsafeCastStringToDOMTopLevelType('canplay');
1250var TOP_CAN_PLAY_THROUGH = unsafeCastStringToDOMTopLevelType('canplaythrough');
1251var TOP_CANCEL = unsafeCastStringToDOMTopLevelType('cancel');
1252var TOP_CHANGE = unsafeCastStringToDOMTopLevelType('change');
1253var TOP_CLICK = unsafeCastStringToDOMTopLevelType('click');
1254var TOP_CLOSE = unsafeCastStringToDOMTopLevelType('close');
1255var TOP_COMPOSITION_END = unsafeCastStringToDOMTopLevelType('compositionend');
1256var TOP_COMPOSITION_START = unsafeCastStringToDOMTopLevelType('compositionstart');
1257var TOP_COMPOSITION_UPDATE = unsafeCastStringToDOMTopLevelType('compositionupdate');
1258var TOP_CONTEXT_MENU = unsafeCastStringToDOMTopLevelType('contextmenu');
1259var TOP_COPY = unsafeCastStringToDOMTopLevelType('copy');
1260var TOP_CUT = unsafeCastStringToDOMTopLevelType('cut');
1261var TOP_DOUBLE_CLICK = unsafeCastStringToDOMTopLevelType('dblclick');
1262var TOP_AUX_CLICK = unsafeCastStringToDOMTopLevelType('auxclick');
1263var TOP_DRAG = unsafeCastStringToDOMTopLevelType('drag');
1264var TOP_DRAG_END = unsafeCastStringToDOMTopLevelType('dragend');
1265var TOP_DRAG_ENTER = unsafeCastStringToDOMTopLevelType('dragenter');
1266var TOP_DRAG_EXIT = unsafeCastStringToDOMTopLevelType('dragexit');
1267var TOP_DRAG_LEAVE = unsafeCastStringToDOMTopLevelType('dragleave');
1268var TOP_DRAG_OVER = unsafeCastStringToDOMTopLevelType('dragover');
1269var TOP_DRAG_START = unsafeCastStringToDOMTopLevelType('dragstart');
1270var TOP_DROP = unsafeCastStringToDOMTopLevelType('drop');
1271var TOP_DURATION_CHANGE = unsafeCastStringToDOMTopLevelType('durationchange');
1272var TOP_EMPTIED = unsafeCastStringToDOMTopLevelType('emptied');
1273var TOP_ENCRYPTED = unsafeCastStringToDOMTopLevelType('encrypted');
1274var TOP_ENDED = unsafeCastStringToDOMTopLevelType('ended');
1275var TOP_ERROR = unsafeCastStringToDOMTopLevelType('error');
1276var TOP_FOCUS = unsafeCastStringToDOMTopLevelType('focus');
1277var TOP_GOT_POINTER_CAPTURE = unsafeCastStringToDOMTopLevelType('gotpointercapture');
1278var TOP_INPUT = unsafeCastStringToDOMTopLevelType('input');
1279var TOP_INVALID = unsafeCastStringToDOMTopLevelType('invalid');
1280var TOP_KEY_DOWN = unsafeCastStringToDOMTopLevelType('keydown');
1281var TOP_KEY_PRESS = unsafeCastStringToDOMTopLevelType('keypress');
1282var TOP_KEY_UP = unsafeCastStringToDOMTopLevelType('keyup');
1283var TOP_LOAD = unsafeCastStringToDOMTopLevelType('load');
1284var TOP_LOAD_START = unsafeCastStringToDOMTopLevelType('loadstart');
1285var TOP_LOADED_DATA = unsafeCastStringToDOMTopLevelType('loadeddata');
1286var TOP_LOADED_METADATA = unsafeCastStringToDOMTopLevelType('loadedmetadata');
1287var TOP_LOST_POINTER_CAPTURE = unsafeCastStringToDOMTopLevelType('lostpointercapture');
1288var TOP_MOUSE_DOWN = unsafeCastStringToDOMTopLevelType('mousedown');
1289var TOP_MOUSE_MOVE = unsafeCastStringToDOMTopLevelType('mousemove');
1290var TOP_MOUSE_OUT = unsafeCastStringToDOMTopLevelType('mouseout');
1291var TOP_MOUSE_OVER = unsafeCastStringToDOMTopLevelType('mouseover');
1292var TOP_MOUSE_UP = unsafeCastStringToDOMTopLevelType('mouseup');
1293var TOP_PASTE = unsafeCastStringToDOMTopLevelType('paste');
1294var TOP_PAUSE = unsafeCastStringToDOMTopLevelType('pause');
1295var TOP_PLAY = unsafeCastStringToDOMTopLevelType('play');
1296var TOP_PLAYING = unsafeCastStringToDOMTopLevelType('playing');
1297var TOP_POINTER_CANCEL = unsafeCastStringToDOMTopLevelType('pointercancel');
1298var TOP_POINTER_DOWN = unsafeCastStringToDOMTopLevelType('pointerdown');
1299
1300
1301var TOP_POINTER_MOVE = unsafeCastStringToDOMTopLevelType('pointermove');
1302var TOP_POINTER_OUT = unsafeCastStringToDOMTopLevelType('pointerout');
1303var TOP_POINTER_OVER = unsafeCastStringToDOMTopLevelType('pointerover');
1304var TOP_POINTER_UP = unsafeCastStringToDOMTopLevelType('pointerup');
1305var TOP_PROGRESS = unsafeCastStringToDOMTopLevelType('progress');
1306var TOP_RATE_CHANGE = unsafeCastStringToDOMTopLevelType('ratechange');
1307var TOP_RESET = unsafeCastStringToDOMTopLevelType('reset');
1308var TOP_SCROLL = unsafeCastStringToDOMTopLevelType('scroll');
1309var TOP_SEEKED = unsafeCastStringToDOMTopLevelType('seeked');
1310var TOP_SEEKING = unsafeCastStringToDOMTopLevelType('seeking');
1311var TOP_SELECTION_CHANGE = unsafeCastStringToDOMTopLevelType('selectionchange');
1312var TOP_STALLED = unsafeCastStringToDOMTopLevelType('stalled');
1313var TOP_SUBMIT = unsafeCastStringToDOMTopLevelType('submit');
1314var TOP_SUSPEND = unsafeCastStringToDOMTopLevelType('suspend');
1315var TOP_TEXT_INPUT = unsafeCastStringToDOMTopLevelType('textInput');
1316var TOP_TIME_UPDATE = unsafeCastStringToDOMTopLevelType('timeupdate');
1317var TOP_TOGGLE = unsafeCastStringToDOMTopLevelType('toggle');
1318var TOP_TOUCH_CANCEL = unsafeCastStringToDOMTopLevelType('touchcancel');
1319var TOP_TOUCH_END = unsafeCastStringToDOMTopLevelType('touchend');
1320var TOP_TOUCH_MOVE = unsafeCastStringToDOMTopLevelType('touchmove');
1321var TOP_TOUCH_START = unsafeCastStringToDOMTopLevelType('touchstart');
1322var TOP_TRANSITION_END = unsafeCastStringToDOMTopLevelType(getVendorPrefixedEventName('transitionend'));
1323var TOP_VOLUME_CHANGE = unsafeCastStringToDOMTopLevelType('volumechange');
1324var TOP_WAITING = unsafeCastStringToDOMTopLevelType('waiting');
1325var TOP_WHEEL = unsafeCastStringToDOMTopLevelType('wheel');
1326
1327// List of events that need to be individually attached to media elements.
1328// Note that events in this list will *not* be listened to at the top level
1329// unless they're explicitly whitelisted in `ReactBrowserEventEmitter.listenTo`.
1330var mediaEventTypes = [TOP_ABORT, TOP_CAN_PLAY, TOP_CAN_PLAY_THROUGH, TOP_DURATION_CHANGE, TOP_EMPTIED, TOP_ENCRYPTED, TOP_ENDED, TOP_ERROR, TOP_LOADED_DATA, TOP_LOADED_METADATA, TOP_LOAD_START, TOP_PAUSE, TOP_PLAY, TOP_PLAYING, TOP_PROGRESS, TOP_RATE_CHANGE, TOP_SEEKED, TOP_SEEKING, TOP_STALLED, TOP_SUSPEND, TOP_TIME_UPDATE, TOP_VOLUME_CHANGE, TOP_WAITING];
1331
1332function getRawEventName(topLevelType) {
1333 return unsafeCastDOMTopLevelTypeToString(topLevelType);
1334}
1335
1336/**
1337 * These variables store information about text content of a target node,
1338 * allowing comparison of content before and after a given event.
1339 *
1340 * Identify the node where selection currently begins, then observe
1341 * both its text content and its current position in the DOM. Since the
1342 * browser may natively replace the target node during composition, we can
1343 * use its position to find its replacement.
1344 *
1345 *
1346 */
1347
1348var root = null;
1349var startText = null;
1350var fallbackText = null;
1351
1352function initialize(nativeEventTarget) {
1353 root = nativeEventTarget;
1354 startText = getText();
1355 return true;
1356}
1357
1358function reset() {
1359 root = null;
1360 startText = null;
1361 fallbackText = null;
1362}
1363
1364function getData() {
1365 if (fallbackText) {
1366 return fallbackText;
1367 }
1368
1369 var start = void 0;
1370 var startValue = startText;
1371 var startLength = startValue.length;
1372 var end = void 0;
1373 var endValue = getText();
1374 var endLength = endValue.length;
1375
1376 for (start = 0; start < startLength; start++) {
1377 if (startValue[start] !== endValue[start]) {
1378 break;
1379 }
1380 }
1381
1382 var minEnd = startLength - start;
1383 for (end = 1; end <= minEnd; end++) {
1384 if (startValue[startLength - end] !== endValue[endLength - end]) {
1385 break;
1386 }
1387 }
1388
1389 var sliceTail = end > 1 ? 1 - end : undefined;
1390 fallbackText = endValue.slice(start, sliceTail);
1391 return fallbackText;
1392}
1393
1394function getText() {
1395 if ('value' in root) {
1396 return root.value;
1397 }
1398 return root.textContent;
1399}
1400
1401/* eslint valid-typeof: 0 */
1402
1403var EVENT_POOL_SIZE = 10;
1404
1405/**
1406 * @interface Event
1407 * @see http://www.w3.org/TR/DOM-Level-3-Events/
1408 */
1409var EventInterface = {
1410 type: null,
1411 target: null,
1412 // currentTarget is set when dispatching; no use in copying it here
1413 currentTarget: function () {
1414 return null;
1415 },
1416 eventPhase: null,
1417 bubbles: null,
1418 cancelable: null,
1419 timeStamp: function (event) {
1420 return event.timeStamp || Date.now();
1421 },
1422 defaultPrevented: null,
1423 isTrusted: null
1424};
1425
1426function functionThatReturnsTrue() {
1427 return true;
1428}
1429
1430function functionThatReturnsFalse() {
1431 return false;
1432}
1433
1434/**
1435 * Synthetic events are dispatched by event plugins, typically in response to a
1436 * top-level event delegation handler.
1437 *
1438 * These systems should generally use pooling to reduce the frequency of garbage
1439 * collection. The system should check `isPersistent` to determine whether the
1440 * event should be released into the pool after being dispatched. Users that
1441 * need a persisted event should invoke `persist`.
1442 *
1443 * Synthetic events (and subclasses) implement the DOM Level 3 Events API by
1444 * normalizing browser quirks. Subclasses do not necessarily have to implement a
1445 * DOM interface; custom application-specific events can also subclass this.
1446 *
1447 * @param {object} dispatchConfig Configuration used to dispatch this event.
1448 * @param {*} targetInst Marker identifying the event target.
1449 * @param {object} nativeEvent Native browser event.
1450 * @param {DOMEventTarget} nativeEventTarget Target node.
1451 */
1452function SyntheticEvent(dispatchConfig, targetInst, nativeEvent, nativeEventTarget) {
1453 {
1454 // these have a getter/setter for warnings
1455 delete this.nativeEvent;
1456 delete this.preventDefault;
1457 delete this.stopPropagation;
1458 delete this.isDefaultPrevented;
1459 delete this.isPropagationStopped;
1460 }
1461
1462 this.dispatchConfig = dispatchConfig;
1463 this._targetInst = targetInst;
1464 this.nativeEvent = nativeEvent;
1465
1466 var Interface = this.constructor.Interface;
1467 for (var propName in Interface) {
1468 if (!Interface.hasOwnProperty(propName)) {
1469 continue;
1470 }
1471 {
1472 delete this[propName]; // this has a getter/setter for warnings
1473 }
1474 var normalize = Interface[propName];
1475 if (normalize) {
1476 this[propName] = normalize(nativeEvent);
1477 } else {
1478 if (propName === 'target') {
1479 this.target = nativeEventTarget;
1480 } else {
1481 this[propName] = nativeEvent[propName];
1482 }
1483 }
1484 }
1485
1486 var defaultPrevented = nativeEvent.defaultPrevented != null ? nativeEvent.defaultPrevented : nativeEvent.returnValue === false;
1487 if (defaultPrevented) {
1488 this.isDefaultPrevented = functionThatReturnsTrue;
1489 } else {
1490 this.isDefaultPrevented = functionThatReturnsFalse;
1491 }
1492 this.isPropagationStopped = functionThatReturnsFalse;
1493 return this;
1494}
1495
1496_assign(SyntheticEvent.prototype, {
1497 preventDefault: function () {
1498 this.defaultPrevented = true;
1499 var event = this.nativeEvent;
1500 if (!event) {
1501 return;
1502 }
1503
1504 if (event.preventDefault) {
1505 event.preventDefault();
1506 } else if (typeof event.returnValue !== 'unknown') {
1507 event.returnValue = false;
1508 }
1509 this.isDefaultPrevented = functionThatReturnsTrue;
1510 },
1511
1512 stopPropagation: function () {
1513 var event = this.nativeEvent;
1514 if (!event) {
1515 return;
1516 }
1517
1518 if (event.stopPropagation) {
1519 event.stopPropagation();
1520 } else if (typeof event.cancelBubble !== 'unknown') {
1521 // The ChangeEventPlugin registers a "propertychange" event for
1522 // IE. This event does not support bubbling or cancelling, and
1523 // any references to cancelBubble throw "Member not found". A
1524 // typeof check of "unknown" circumvents this issue (and is also
1525 // IE specific).
1526 event.cancelBubble = true;
1527 }
1528
1529 this.isPropagationStopped = functionThatReturnsTrue;
1530 },
1531
1532 /**
1533 * We release all dispatched `SyntheticEvent`s after each event loop, adding
1534 * them back into the pool. This allows a way to hold onto a reference that
1535 * won't be added back into the pool.
1536 */
1537 persist: function () {
1538 this.isPersistent = functionThatReturnsTrue;
1539 },
1540
1541 /**
1542 * Checks if this event should be released back into the pool.
1543 *
1544 * @return {boolean} True if this should not be released, false otherwise.
1545 */
1546 isPersistent: functionThatReturnsFalse,
1547
1548 /**
1549 * `PooledClass` looks for `destructor` on each instance it releases.
1550 */
1551 destructor: function () {
1552 var Interface = this.constructor.Interface;
1553 for (var propName in Interface) {
1554 {
1555 Object.defineProperty(this, propName, getPooledWarningPropertyDefinition(propName, Interface[propName]));
1556 }
1557 }
1558 this.dispatchConfig = null;
1559 this._targetInst = null;
1560 this.nativeEvent = null;
1561 this.isDefaultPrevented = functionThatReturnsFalse;
1562 this.isPropagationStopped = functionThatReturnsFalse;
1563 this._dispatchListeners = null;
1564 this._dispatchInstances = null;
1565 {
1566 Object.defineProperty(this, 'nativeEvent', getPooledWarningPropertyDefinition('nativeEvent', null));
1567 Object.defineProperty(this, 'isDefaultPrevented', getPooledWarningPropertyDefinition('isDefaultPrevented', functionThatReturnsFalse));
1568 Object.defineProperty(this, 'isPropagationStopped', getPooledWarningPropertyDefinition('isPropagationStopped', functionThatReturnsFalse));
1569 Object.defineProperty(this, 'preventDefault', getPooledWarningPropertyDefinition('preventDefault', function () {}));
1570 Object.defineProperty(this, 'stopPropagation', getPooledWarningPropertyDefinition('stopPropagation', function () {}));
1571 }
1572 }
1573});
1574
1575SyntheticEvent.Interface = EventInterface;
1576
1577/**
1578 * Helper to reduce boilerplate when creating subclasses.
1579 */
1580SyntheticEvent.extend = function (Interface) {
1581 var Super = this;
1582
1583 var E = function () {};
1584 E.prototype = Super.prototype;
1585 var prototype = new E();
1586
1587 function Class() {
1588 return Super.apply(this, arguments);
1589 }
1590 _assign(prototype, Class.prototype);
1591 Class.prototype = prototype;
1592 Class.prototype.constructor = Class;
1593
1594 Class.Interface = _assign({}, Super.Interface, Interface);
1595 Class.extend = Super.extend;
1596 addEventPoolingTo(Class);
1597
1598 return Class;
1599};
1600
1601addEventPoolingTo(SyntheticEvent);
1602
1603/**
1604 * Helper to nullify syntheticEvent instance properties when destructing
1605 *
1606 * @param {String} propName
1607 * @param {?object} getVal
1608 * @return {object} defineProperty object
1609 */
1610function getPooledWarningPropertyDefinition(propName, getVal) {
1611 var isFunction = typeof getVal === 'function';
1612 return {
1613 configurable: true,
1614 set: set,
1615 get: get
1616 };
1617
1618 function set(val) {
1619 var action = isFunction ? 'setting the method' : 'setting the property';
1620 warn(action, 'This is effectively a no-op');
1621 return val;
1622 }
1623
1624 function get() {
1625 var action = isFunction ? 'accessing the method' : 'accessing the property';
1626 var result = isFunction ? 'This is a no-op function' : 'This is set to null';
1627 warn(action, result);
1628 return getVal;
1629 }
1630
1631 function warn(action, result) {
1632 var warningCondition = false;
1633 !warningCondition ? warningWithoutStack$1(false, "This synthetic event is reused for performance reasons. If you're seeing this, " + "you're %s `%s` on a released/nullified synthetic event. %s. " + 'If you must keep the original synthetic event around, use event.persist(). ' + 'See https://fb.me/react-event-pooling for more information.', action, propName, result) : void 0;
1634 }
1635}
1636
1637function getPooledEvent(dispatchConfig, targetInst, nativeEvent, nativeInst) {
1638 var EventConstructor = this;
1639 if (EventConstructor.eventPool.length) {
1640 var instance = EventConstructor.eventPool.pop();
1641 EventConstructor.call(instance, dispatchConfig, targetInst, nativeEvent, nativeInst);
1642 return instance;
1643 }
1644 return new EventConstructor(dispatchConfig, targetInst, nativeEvent, nativeInst);
1645}
1646
1647function releasePooledEvent(event) {
1648 var EventConstructor = this;
1649 !(event instanceof EventConstructor) ? invariant(false, 'Trying to release an event instance into a pool of a different type.') : void 0;
1650 event.destructor();
1651 if (EventConstructor.eventPool.length < EVENT_POOL_SIZE) {
1652 EventConstructor.eventPool.push(event);
1653 }
1654}
1655
1656function addEventPoolingTo(EventConstructor) {
1657 EventConstructor.eventPool = [];
1658 EventConstructor.getPooled = getPooledEvent;
1659 EventConstructor.release = releasePooledEvent;
1660}
1661
1662/**
1663 * @interface Event
1664 * @see http://www.w3.org/TR/DOM-Level-3-Events/#events-compositionevents
1665 */
1666var SyntheticCompositionEvent = SyntheticEvent.extend({
1667 data: null
1668});
1669
1670/**
1671 * @interface Event
1672 * @see http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105
1673 * /#events-inputevents
1674 */
1675var SyntheticInputEvent = SyntheticEvent.extend({
1676 data: null
1677});
1678
1679var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
1680var START_KEYCODE = 229;
1681
1682var canUseCompositionEvent = canUseDOM && 'CompositionEvent' in window;
1683
1684var documentMode = null;
1685if (canUseDOM && 'documentMode' in document) {
1686 documentMode = document.documentMode;
1687}
1688
1689// Webkit offers a very useful `textInput` event that can be used to
1690// directly represent `beforeInput`. The IE `textinput` event is not as
1691// useful, so we don't use it.
1692var canUseTextInputEvent = canUseDOM && 'TextEvent' in window && !documentMode;
1693
1694// In IE9+, we have access to composition events, but the data supplied
1695// by the native compositionend event may be incorrect. Japanese ideographic
1696// spaces, for instance (\u3000) are not recorded correctly.
1697var useFallbackCompositionData = canUseDOM && (!canUseCompositionEvent || documentMode && documentMode > 8 && documentMode <= 11);
1698
1699var SPACEBAR_CODE = 32;
1700var SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE);
1701
1702// Events and their corresponding property names.
1703var eventTypes = {
1704 beforeInput: {
1705 phasedRegistrationNames: {
1706 bubbled: 'onBeforeInput',
1707 captured: 'onBeforeInputCapture'
1708 },
1709 dependencies: [TOP_COMPOSITION_END, TOP_KEY_PRESS, TOP_TEXT_INPUT, TOP_PASTE]
1710 },
1711 compositionEnd: {
1712 phasedRegistrationNames: {
1713 bubbled: 'onCompositionEnd',
1714 captured: 'onCompositionEndCapture'
1715 },
1716 dependencies: [TOP_BLUR, TOP_COMPOSITION_END, TOP_KEY_DOWN, TOP_KEY_PRESS, TOP_KEY_UP, TOP_MOUSE_DOWN]
1717 },
1718 compositionStart: {
1719 phasedRegistrationNames: {
1720 bubbled: 'onCompositionStart',
1721 captured: 'onCompositionStartCapture'
1722 },
1723 dependencies: [TOP_BLUR, TOP_COMPOSITION_START, TOP_KEY_DOWN, TOP_KEY_PRESS, TOP_KEY_UP, TOP_MOUSE_DOWN]
1724 },
1725 compositionUpdate: {
1726 phasedRegistrationNames: {
1727 bubbled: 'onCompositionUpdate',
1728 captured: 'onCompositionUpdateCapture'
1729 },
1730 dependencies: [TOP_BLUR, TOP_COMPOSITION_UPDATE, TOP_KEY_DOWN, TOP_KEY_PRESS, TOP_KEY_UP, TOP_MOUSE_DOWN]
1731 }
1732};
1733
1734// Track whether we've ever handled a keypress on the space key.
1735var hasSpaceKeypress = false;
1736
1737/**
1738 * Return whether a native keypress event is assumed to be a command.
1739 * This is required because Firefox fires `keypress` events for key commands
1740 * (cut, copy, select-all, etc.) even though no character is inserted.
1741 */
1742function isKeypressCommand(nativeEvent) {
1743 return (nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) &&
1744 // ctrlKey && altKey is equivalent to AltGr, and is not a command.
1745 !(nativeEvent.ctrlKey && nativeEvent.altKey);
1746}
1747
1748/**
1749 * Translate native top level events into event types.
1750 *
1751 * @param {string} topLevelType
1752 * @return {object}
1753 */
1754function getCompositionEventType(topLevelType) {
1755 switch (topLevelType) {
1756 case TOP_COMPOSITION_START:
1757 return eventTypes.compositionStart;
1758 case TOP_COMPOSITION_END:
1759 return eventTypes.compositionEnd;
1760 case TOP_COMPOSITION_UPDATE:
1761 return eventTypes.compositionUpdate;
1762 }
1763}
1764
1765/**
1766 * Does our fallback best-guess model think this event signifies that
1767 * composition has begun?
1768 *
1769 * @param {string} topLevelType
1770 * @param {object} nativeEvent
1771 * @return {boolean}
1772 */
1773function isFallbackCompositionStart(topLevelType, nativeEvent) {
1774 return topLevelType === TOP_KEY_DOWN && nativeEvent.keyCode === START_KEYCODE;
1775}
1776
1777/**
1778 * Does our fallback mode think that this event is the end of composition?
1779 *
1780 * @param {string} topLevelType
1781 * @param {object} nativeEvent
1782 * @return {boolean}
1783 */
1784function isFallbackCompositionEnd(topLevelType, nativeEvent) {
1785 switch (topLevelType) {
1786 case TOP_KEY_UP:
1787 // Command keys insert or clear IME input.
1788 return END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1;
1789 case TOP_KEY_DOWN:
1790 // Expect IME keyCode on each keydown. If we get any other
1791 // code we must have exited earlier.
1792 return nativeEvent.keyCode !== START_KEYCODE;
1793 case TOP_KEY_PRESS:
1794 case TOP_MOUSE_DOWN:
1795 case TOP_BLUR:
1796 // Events are not possible without cancelling IME.
1797 return true;
1798 default:
1799 return false;
1800 }
1801}
1802
1803/**
1804 * Google Input Tools provides composition data via a CustomEvent,
1805 * with the `data` property populated in the `detail` object. If this
1806 * is available on the event object, use it. If not, this is a plain
1807 * composition event and we have nothing special to extract.
1808 *
1809 * @param {object} nativeEvent
1810 * @return {?string}
1811 */
1812function getDataFromCustomEvent(nativeEvent) {
1813 var detail = nativeEvent.detail;
1814 if (typeof detail === 'object' && 'data' in detail) {
1815 return detail.data;
1816 }
1817 return null;
1818}
1819
1820/**
1821 * Check if a composition event was triggered by Korean IME.
1822 * Our fallback mode does not work well with IE's Korean IME,
1823 * so just use native composition events when Korean IME is used.
1824 * Although CompositionEvent.locale property is deprecated,
1825 * it is available in IE, where our fallback mode is enabled.
1826 *
1827 * @param {object} nativeEvent
1828 * @return {boolean}
1829 */
1830function isUsingKoreanIME(nativeEvent) {
1831 return nativeEvent.locale === 'ko';
1832}
1833
1834// Track the current IME composition status, if any.
1835var isComposing = false;
1836
1837/**
1838 * @return {?object} A SyntheticCompositionEvent.
1839 */
1840function extractCompositionEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
1841 var eventType = void 0;
1842 var fallbackData = void 0;
1843
1844 if (canUseCompositionEvent) {
1845 eventType = getCompositionEventType(topLevelType);
1846 } else if (!isComposing) {
1847 if (isFallbackCompositionStart(topLevelType, nativeEvent)) {
1848 eventType = eventTypes.compositionStart;
1849 }
1850 } else if (isFallbackCompositionEnd(topLevelType, nativeEvent)) {
1851 eventType = eventTypes.compositionEnd;
1852 }
1853
1854 if (!eventType) {
1855 return null;
1856 }
1857
1858 if (useFallbackCompositionData && !isUsingKoreanIME(nativeEvent)) {
1859 // The current composition is stored statically and must not be
1860 // overwritten while composition continues.
1861 if (!isComposing && eventType === eventTypes.compositionStart) {
1862 isComposing = initialize(nativeEventTarget);
1863 } else if (eventType === eventTypes.compositionEnd) {
1864 if (isComposing) {
1865 fallbackData = getData();
1866 }
1867 }
1868 }
1869
1870 var event = SyntheticCompositionEvent.getPooled(eventType, targetInst, nativeEvent, nativeEventTarget);
1871
1872 if (fallbackData) {
1873 // Inject data generated from fallback path into the synthetic event.
1874 // This matches the property of native CompositionEventInterface.
1875 event.data = fallbackData;
1876 } else {
1877 var customData = getDataFromCustomEvent(nativeEvent);
1878 if (customData !== null) {
1879 event.data = customData;
1880 }
1881 }
1882
1883 accumulateTwoPhaseDispatches(event);
1884 return event;
1885}
1886
1887/**
1888 * @param {TopLevelType} topLevelType Number from `TopLevelType`.
1889 * @param {object} nativeEvent Native browser event.
1890 * @return {?string} The string corresponding to this `beforeInput` event.
1891 */
1892function getNativeBeforeInputChars(topLevelType, nativeEvent) {
1893 switch (topLevelType) {
1894 case TOP_COMPOSITION_END:
1895 return getDataFromCustomEvent(nativeEvent);
1896 case TOP_KEY_PRESS:
1897 /**
1898 * If native `textInput` events are available, our goal is to make
1899 * use of them. However, there is a special case: the spacebar key.
1900 * In Webkit, preventing default on a spacebar `textInput` event
1901 * cancels character insertion, but it *also* causes the browser
1902 * to fall back to its default spacebar behavior of scrolling the
1903 * page.
1904 *
1905 * Tracking at:
1906 * https://code.google.com/p/chromium/issues/detail?id=355103
1907 *
1908 * To avoid this issue, use the keypress event as if no `textInput`
1909 * event is available.
1910 */
1911 var which = nativeEvent.which;
1912 if (which !== SPACEBAR_CODE) {
1913 return null;
1914 }
1915
1916 hasSpaceKeypress = true;
1917 return SPACEBAR_CHAR;
1918
1919 case TOP_TEXT_INPUT:
1920 // Record the characters to be added to the DOM.
1921 var chars = nativeEvent.data;
1922
1923 // If it's a spacebar character, assume that we have already handled
1924 // it at the keypress level and bail immediately. Android Chrome
1925 // doesn't give us keycodes, so we need to ignore it.
1926 if (chars === SPACEBAR_CHAR && hasSpaceKeypress) {
1927 return null;
1928 }
1929
1930 return chars;
1931
1932 default:
1933 // For other native event types, do nothing.
1934 return null;
1935 }
1936}
1937
1938/**
1939 * For browsers that do not provide the `textInput` event, extract the
1940 * appropriate string to use for SyntheticInputEvent.
1941 *
1942 * @param {number} topLevelType Number from `TopLevelEventTypes`.
1943 * @param {object} nativeEvent Native browser event.
1944 * @return {?string} The fallback string for this `beforeInput` event.
1945 */
1946function getFallbackBeforeInputChars(topLevelType, nativeEvent) {
1947 // If we are currently composing (IME) and using a fallback to do so,
1948 // try to extract the composed characters from the fallback object.
1949 // If composition event is available, we extract a string only at
1950 // compositionevent, otherwise extract it at fallback events.
1951 if (isComposing) {
1952 if (topLevelType === TOP_COMPOSITION_END || !canUseCompositionEvent && isFallbackCompositionEnd(topLevelType, nativeEvent)) {
1953 var chars = getData();
1954 reset();
1955 isComposing = false;
1956 return chars;
1957 }
1958 return null;
1959 }
1960
1961 switch (topLevelType) {
1962 case TOP_PASTE:
1963 // If a paste event occurs after a keypress, throw out the input
1964 // chars. Paste events should not lead to BeforeInput events.
1965 return null;
1966 case TOP_KEY_PRESS:
1967 /**
1968 * As of v27, Firefox may fire keypress events even when no character
1969 * will be inserted. A few possibilities:
1970 *
1971 * - `which` is `0`. Arrow keys, Esc key, etc.
1972 *
1973 * - `which` is the pressed key code, but no char is available.
1974 * Ex: 'AltGr + d` in Polish. There is no modified character for
1975 * this key combination and no character is inserted into the
1976 * document, but FF fires the keypress for char code `100` anyway.
1977 * No `input` event will occur.
1978 *
1979 * - `which` is the pressed key code, but a command combination is
1980 * being used. Ex: `Cmd+C`. No character is inserted, and no
1981 * `input` event will occur.
1982 */
1983 if (!isKeypressCommand(nativeEvent)) {
1984 // IE fires the `keypress` event when a user types an emoji via
1985 // Touch keyboard of Windows. In such a case, the `char` property
1986 // holds an emoji character like `\uD83D\uDE0A`. Because its length
1987 // is 2, the property `which` does not represent an emoji correctly.
1988 // In such a case, we directly return the `char` property instead of
1989 // using `which`.
1990 if (nativeEvent.char && nativeEvent.char.length > 1) {
1991 return nativeEvent.char;
1992 } else if (nativeEvent.which) {
1993 return String.fromCharCode(nativeEvent.which);
1994 }
1995 }
1996 return null;
1997 case TOP_COMPOSITION_END:
1998 return useFallbackCompositionData && !isUsingKoreanIME(nativeEvent) ? null : nativeEvent.data;
1999 default:
2000 return null;
2001 }
2002}
2003
2004/**
2005 * Extract a SyntheticInputEvent for `beforeInput`, based on either native
2006 * `textInput` or fallback behavior.
2007 *
2008 * @return {?object} A SyntheticInputEvent.
2009 */
2010function extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
2011 var chars = void 0;
2012
2013 if (canUseTextInputEvent) {
2014 chars = getNativeBeforeInputChars(topLevelType, nativeEvent);
2015 } else {
2016 chars = getFallbackBeforeInputChars(topLevelType, nativeEvent);
2017 }
2018
2019 // If no characters are being inserted, no BeforeInput event should
2020 // be fired.
2021 if (!chars) {
2022 return null;
2023 }
2024
2025 var event = SyntheticInputEvent.getPooled(eventTypes.beforeInput, targetInst, nativeEvent, nativeEventTarget);
2026
2027 event.data = chars;
2028 accumulateTwoPhaseDispatches(event);
2029 return event;
2030}
2031
2032/**
2033 * Create an `onBeforeInput` event to match
2034 * http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#events-inputevents.
2035 *
2036 * This event plugin is based on the native `textInput` event
2037 * available in Chrome, Safari, Opera, and IE. This event fires after
2038 * `onKeyPress` and `onCompositionEnd`, but before `onInput`.
2039 *
2040 * `beforeInput` is spec'd but not implemented in any browsers, and
2041 * the `input` event does not provide any useful information about what has
2042 * actually been added, contrary to the spec. Thus, `textInput` is the best
2043 * available event to identify the characters that have actually been inserted
2044 * into the target node.
2045 *
2046 * This plugin is also responsible for emitting `composition` events, thus
2047 * allowing us to share composition fallback code for both `beforeInput` and
2048 * `composition` event types.
2049 */
2050var BeforeInputEventPlugin = {
2051 eventTypes: eventTypes,
2052
2053 extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
2054 var composition = extractCompositionEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget);
2055
2056 var beforeInput = extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget);
2057
2058 if (composition === null) {
2059 return beforeInput;
2060 }
2061
2062 if (beforeInput === null) {
2063 return composition;
2064 }
2065
2066 return [composition, beforeInput];
2067 }
2068};
2069
2070// Use to restore controlled state after a change event has fired.
2071
2072var restoreImpl = null;
2073var restoreTarget = null;
2074var restoreQueue = null;
2075
2076function restoreStateOfTarget(target) {
2077 // We perform this translation at the end of the event loop so that we
2078 // always receive the correct fiber here
2079 var internalInstance = getInstanceFromNode(target);
2080 if (!internalInstance) {
2081 // Unmounted
2082 return;
2083 }
2084 !(typeof restoreImpl === 'function') ? invariant(false, 'setRestoreImplementation() needs to be called to handle a target for controlled events. This error is likely caused by a bug in React. Please file an issue.') : void 0;
2085 var props = getFiberCurrentPropsFromNode(internalInstance.stateNode);
2086 restoreImpl(internalInstance.stateNode, internalInstance.type, props);
2087}
2088
2089function setRestoreImplementation(impl) {
2090 restoreImpl = impl;
2091}
2092
2093function enqueueStateRestore(target) {
2094 if (restoreTarget) {
2095 if (restoreQueue) {
2096 restoreQueue.push(target);
2097 } else {
2098 restoreQueue = [target];
2099 }
2100 } else {
2101 restoreTarget = target;
2102 }
2103}
2104
2105function needsStateRestore() {
2106 return restoreTarget !== null || restoreQueue !== null;
2107}
2108
2109function restoreStateIfNeeded() {
2110 if (!restoreTarget) {
2111 return;
2112 }
2113 var target = restoreTarget;
2114 var queuedTargets = restoreQueue;
2115 restoreTarget = null;
2116 restoreQueue = null;
2117
2118 restoreStateOfTarget(target);
2119 if (queuedTargets) {
2120 for (var i = 0; i < queuedTargets.length; i++) {
2121 restoreStateOfTarget(queuedTargets[i]);
2122 }
2123 }
2124}
2125
2126// Used as a way to call batchedUpdates when we don't have a reference to
2127// the renderer. Such as when we're dispatching events or if third party
2128// libraries need to call batchedUpdates. Eventually, this API will go away when
2129// everything is batched by default. We'll then have a similar API to opt-out of
2130// scheduled work and instead do synchronous work.
2131
2132// Defaults
2133var _batchedUpdatesImpl = function (fn, bookkeeping) {
2134 return fn(bookkeeping);
2135};
2136var _interactiveUpdatesImpl = function (fn, a, b) {
2137 return fn(a, b);
2138};
2139var _flushInteractiveUpdatesImpl = function () {};
2140
2141var isBatching = false;
2142function batchedUpdates(fn, bookkeeping) {
2143 if (isBatching) {
2144 // If we are currently inside another batch, we need to wait until it
2145 // fully completes before restoring state.
2146 return fn(bookkeeping);
2147 }
2148 isBatching = true;
2149 try {
2150 return _batchedUpdatesImpl(fn, bookkeeping);
2151 } finally {
2152 // Here we wait until all updates have propagated, which is important
2153 // when using controlled components within layers:
2154 // https://github.com/facebook/react/issues/1698
2155 // Then we restore state of any controlled component.
2156 isBatching = false;
2157 var controlledComponentsHavePendingUpdates = needsStateRestore();
2158 if (controlledComponentsHavePendingUpdates) {
2159 // If a controlled event was fired, we may need to restore the state of
2160 // the DOM node back to the controlled value. This is necessary when React
2161 // bails out of the update without touching the DOM.
2162 _flushInteractiveUpdatesImpl();
2163 restoreStateIfNeeded();
2164 }
2165 }
2166}
2167
2168function interactiveUpdates(fn, a, b) {
2169 return _interactiveUpdatesImpl(fn, a, b);
2170}
2171
2172
2173
2174function setBatchingImplementation(batchedUpdatesImpl, interactiveUpdatesImpl, flushInteractiveUpdatesImpl) {
2175 _batchedUpdatesImpl = batchedUpdatesImpl;
2176 _interactiveUpdatesImpl = interactiveUpdatesImpl;
2177 _flushInteractiveUpdatesImpl = flushInteractiveUpdatesImpl;
2178}
2179
2180/**
2181 * @see http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary
2182 */
2183var supportedInputTypes = {
2184 color: true,
2185 date: true,
2186 datetime: true,
2187 'datetime-local': true,
2188 email: true,
2189 month: true,
2190 number: true,
2191 password: true,
2192 range: true,
2193 search: true,
2194 tel: true,
2195 text: true,
2196 time: true,
2197 url: true,
2198 week: true
2199};
2200
2201function isTextInputElement(elem) {
2202 var nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
2203
2204 if (nodeName === 'input') {
2205 return !!supportedInputTypes[elem.type];
2206 }
2207
2208 if (nodeName === 'textarea') {
2209 return true;
2210 }
2211
2212 return false;
2213}
2214
2215/**
2216 * HTML nodeType values that represent the type of the node
2217 */
2218
2219var ELEMENT_NODE = 1;
2220var TEXT_NODE = 3;
2221var COMMENT_NODE = 8;
2222var DOCUMENT_NODE = 9;
2223var DOCUMENT_FRAGMENT_NODE = 11;
2224
2225/**
2226 * Gets the target node from a native browser event by accounting for
2227 * inconsistencies in browser DOM APIs.
2228 *
2229 * @param {object} nativeEvent Native browser event.
2230 * @return {DOMEventTarget} Target node.
2231 */
2232function getEventTarget(nativeEvent) {
2233 // Fallback to nativeEvent.srcElement for IE9
2234 // https://github.com/facebook/react/issues/12506
2235 var target = nativeEvent.target || nativeEvent.srcElement || window;
2236
2237 // Normalize SVG <use> element events #4963
2238 if (target.correspondingUseElement) {
2239 target = target.correspondingUseElement;
2240 }
2241
2242 // Safari may fire events on text nodes (Node.TEXT_NODE is 3).
2243 // @see http://www.quirksmode.org/js/events_properties.html
2244 return target.nodeType === TEXT_NODE ? target.parentNode : target;
2245}
2246
2247/**
2248 * Checks if an event is supported in the current execution environment.
2249 *
2250 * NOTE: This will not work correctly for non-generic events such as `change`,
2251 * `reset`, `load`, `error`, and `select`.
2252 *
2253 * Borrows from Modernizr.
2254 *
2255 * @param {string} eventNameSuffix Event name, e.g. "click".
2256 * @return {boolean} True if the event is supported.
2257 * @internal
2258 * @license Modernizr 3.0.0pre (Custom Build) | MIT
2259 */
2260function isEventSupported(eventNameSuffix) {
2261 if (!canUseDOM) {
2262 return false;
2263 }
2264
2265 var eventName = 'on' + eventNameSuffix;
2266 var isSupported = eventName in document;
2267
2268 if (!isSupported) {
2269 var element = document.createElement('div');
2270 element.setAttribute(eventName, 'return;');
2271 isSupported = typeof element[eventName] === 'function';
2272 }
2273
2274 return isSupported;
2275}
2276
2277function isCheckable(elem) {
2278 var type = elem.type;
2279 var nodeName = elem.nodeName;
2280 return nodeName && nodeName.toLowerCase() === 'input' && (type === 'checkbox' || type === 'radio');
2281}
2282
2283function getTracker(node) {
2284 return node._valueTracker;
2285}
2286
2287function detachTracker(node) {
2288 node._valueTracker = null;
2289}
2290
2291function getValueFromNode(node) {
2292 var value = '';
2293 if (!node) {
2294 return value;
2295 }
2296
2297 if (isCheckable(node)) {
2298 value = node.checked ? 'true' : 'false';
2299 } else {
2300 value = node.value;
2301 }
2302
2303 return value;
2304}
2305
2306function trackValueOnNode(node) {
2307 var valueField = isCheckable(node) ? 'checked' : 'value';
2308 var descriptor = Object.getOwnPropertyDescriptor(node.constructor.prototype, valueField);
2309
2310 var currentValue = '' + node[valueField];
2311
2312 // if someone has already defined a value or Safari, then bail
2313 // and don't track value will cause over reporting of changes,
2314 // but it's better then a hard failure
2315 // (needed for certain tests that spyOn input values and Safari)
2316 if (node.hasOwnProperty(valueField) || typeof descriptor === 'undefined' || typeof descriptor.get !== 'function' || typeof descriptor.set !== 'function') {
2317 return;
2318 }
2319 var get = descriptor.get,
2320 set = descriptor.set;
2321
2322 Object.defineProperty(node, valueField, {
2323 configurable: true,
2324 get: function () {
2325 return get.call(this);
2326 },
2327 set: function (value) {
2328 currentValue = '' + value;
2329 set.call(this, value);
2330 }
2331 });
2332 // We could've passed this the first time
2333 // but it triggers a bug in IE11 and Edge 14/15.
2334 // Calling defineProperty() again should be equivalent.
2335 // https://github.com/facebook/react/issues/11768
2336 Object.defineProperty(node, valueField, {
2337 enumerable: descriptor.enumerable
2338 });
2339
2340 var tracker = {
2341 getValue: function () {
2342 return currentValue;
2343 },
2344 setValue: function (value) {
2345 currentValue = '' + value;
2346 },
2347 stopTracking: function () {
2348 detachTracker(node);
2349 delete node[valueField];
2350 }
2351 };
2352 return tracker;
2353}
2354
2355function track(node) {
2356 if (getTracker(node)) {
2357 return;
2358 }
2359
2360 // TODO: Once it's just Fiber we can move this to node._wrapperState
2361 node._valueTracker = trackValueOnNode(node);
2362}
2363
2364function updateValueIfChanged(node) {
2365 if (!node) {
2366 return false;
2367 }
2368
2369 var tracker = getTracker(node);
2370 // if there is no tracker at this point it's unlikely
2371 // that trying again will succeed
2372 if (!tracker) {
2373 return true;
2374 }
2375
2376 var lastValue = tracker.getValue();
2377 var nextValue = getValueFromNode(node);
2378 if (nextValue !== lastValue) {
2379 tracker.setValue(nextValue);
2380 return true;
2381 }
2382 return false;
2383}
2384
2385var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
2386
2387var BEFORE_SLASH_RE = /^(.*)[\\\/]/;
2388
2389var describeComponentFrame = function (name, source, ownerName) {
2390 var sourceInfo = '';
2391 if (source) {
2392 var path = source.fileName;
2393 var fileName = path.replace(BEFORE_SLASH_RE, '');
2394 {
2395 // In DEV, include code for a common special case:
2396 // prefer "folder/index.js" instead of just "index.js".
2397 if (/^index\./.test(fileName)) {
2398 var match = path.match(BEFORE_SLASH_RE);
2399 if (match) {
2400 var pathBeforeSlash = match[1];
2401 if (pathBeforeSlash) {
2402 var folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
2403 fileName = folderName + '/' + fileName;
2404 }
2405 }
2406 }
2407 }
2408 sourceInfo = ' (at ' + fileName + ':' + source.lineNumber + ')';
2409 } else if (ownerName) {
2410 sourceInfo = ' (created by ' + ownerName + ')';
2411 }
2412 return '\n in ' + (name || 'Unknown') + sourceInfo;
2413};
2414
2415// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
2416// nor polyfill, then a plain number is used for performance.
2417var hasSymbol = typeof Symbol === 'function' && Symbol.for;
2418
2419var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
2420var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
2421var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
2422var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
2423var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
2424var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
2425var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace;
2426
2427var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
2428var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
2429var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
2430var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
2431var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
2432
2433var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
2434var FAUX_ITERATOR_SYMBOL = '@@iterator';
2435
2436function getIteratorFn(maybeIterable) {
2437 if (maybeIterable === null || typeof maybeIterable !== 'object') {
2438 return null;
2439 }
2440 var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
2441 if (typeof maybeIterator === 'function') {
2442 return maybeIterator;
2443 }
2444 return null;
2445}
2446
2447var Pending = 0;
2448var Resolved = 1;
2449var Rejected = 2;
2450
2451function refineResolvedLazyComponent(lazyComponent) {
2452 return lazyComponent._status === Resolved ? lazyComponent._result : null;
2453}
2454
2455function getWrappedName(outerType, innerType, wrapperName) {
2456 var functionName = innerType.displayName || innerType.name || '';
2457 return outerType.displayName || (functionName !== '' ? wrapperName + '(' + functionName + ')' : wrapperName);
2458}
2459
2460function getComponentName(type) {
2461 if (type == null) {
2462 // Host root, text node or just invalid type.
2463 return null;
2464 }
2465 {
2466 if (typeof type.tag === 'number') {
2467 warningWithoutStack$1(false, 'Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.');
2468 }
2469 }
2470 if (typeof type === 'function') {
2471 return type.displayName || type.name || null;
2472 }
2473 if (typeof type === 'string') {
2474 return type;
2475 }
2476 switch (type) {
2477 case REACT_CONCURRENT_MODE_TYPE:
2478 return 'ConcurrentMode';
2479 case REACT_FRAGMENT_TYPE:
2480 return 'Fragment';
2481 case REACT_PORTAL_TYPE:
2482 return 'Portal';
2483 case REACT_PROFILER_TYPE:
2484 return 'Profiler';
2485 case REACT_STRICT_MODE_TYPE:
2486 return 'StrictMode';
2487 case REACT_SUSPENSE_TYPE:
2488 return 'Suspense';
2489 }
2490 if (typeof type === 'object') {
2491 switch (type.$$typeof) {
2492 case REACT_CONTEXT_TYPE:
2493 return 'Context.Consumer';
2494 case REACT_PROVIDER_TYPE:
2495 return 'Context.Provider';
2496 case REACT_FORWARD_REF_TYPE:
2497 return getWrappedName(type, type.render, 'ForwardRef');
2498 case REACT_MEMO_TYPE:
2499 return getComponentName(type.type);
2500 case REACT_LAZY_TYPE:
2501 {
2502 var thenable = type;
2503 var resolvedThenable = refineResolvedLazyComponent(thenable);
2504 if (resolvedThenable) {
2505 return getComponentName(resolvedThenable);
2506 }
2507 }
2508 }
2509 }
2510 return null;
2511}
2512
2513var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
2514
2515function describeFiber(fiber) {
2516 switch (fiber.tag) {
2517 case HostRoot:
2518 case HostPortal:
2519 case HostText:
2520 case Fragment:
2521 case ContextProvider:
2522 case ContextConsumer:
2523 return '';
2524 default:
2525 var owner = fiber._debugOwner;
2526 var source = fiber._debugSource;
2527 var name = getComponentName(fiber.type);
2528 var ownerName = null;
2529 if (owner) {
2530 ownerName = getComponentName(owner.type);
2531 }
2532 return describeComponentFrame(name, source, ownerName);
2533 }
2534}
2535
2536function getStackByFiberInDevAndProd(workInProgress) {
2537 var info = '';
2538 var node = workInProgress;
2539 do {
2540 info += describeFiber(node);
2541 node = node.return;
2542 } while (node);
2543 return info;
2544}
2545
2546var current = null;
2547var phase = null;
2548
2549function getCurrentFiberOwnerNameInDevOrNull() {
2550 {
2551 if (current === null) {
2552 return null;
2553 }
2554 var owner = current._debugOwner;
2555 if (owner !== null && typeof owner !== 'undefined') {
2556 return getComponentName(owner.type);
2557 }
2558 }
2559 return null;
2560}
2561
2562function getCurrentFiberStackInDev() {
2563 {
2564 if (current === null) {
2565 return '';
2566 }
2567 // Safe because if current fiber exists, we are reconciling,
2568 // and it is guaranteed to be the work-in-progress version.
2569 return getStackByFiberInDevAndProd(current);
2570 }
2571 return '';
2572}
2573
2574function resetCurrentFiber() {
2575 {
2576 ReactDebugCurrentFrame.getCurrentStack = null;
2577 current = null;
2578 phase = null;
2579 }
2580}
2581
2582function setCurrentFiber(fiber) {
2583 {
2584 ReactDebugCurrentFrame.getCurrentStack = getCurrentFiberStackInDev;
2585 current = fiber;
2586 phase = null;
2587 }
2588}
2589
2590function setCurrentPhase(lifeCyclePhase) {
2591 {
2592 phase = lifeCyclePhase;
2593 }
2594}
2595
2596/**
2597 * Similar to invariant but only logs a warning if the condition is not met.
2598 * This can be used to log issues in development environments in critical
2599 * paths. Removing the logging code for production environments will keep the
2600 * same logic and follow the same code paths.
2601 */
2602
2603var warning = warningWithoutStack$1;
2604
2605{
2606 warning = function (condition, format) {
2607 if (condition) {
2608 return;
2609 }
2610 var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
2611 var stack = ReactDebugCurrentFrame.getStackAddendum();
2612 // eslint-disable-next-line react-internal/warning-and-invariant-args
2613
2614 for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
2615 args[_key - 2] = arguments[_key];
2616 }
2617
2618 warningWithoutStack$1.apply(undefined, [false, format + '%s'].concat(args, [stack]));
2619 };
2620}
2621
2622var warning$1 = warning;
2623
2624// A reserved attribute.
2625// It is handled by React separately and shouldn't be written to the DOM.
2626var RESERVED = 0;
2627
2628// A simple string attribute.
2629// Attributes that aren't in the whitelist are presumed to have this type.
2630var STRING = 1;
2631
2632// A string attribute that accepts booleans in React. In HTML, these are called
2633// "enumerated" attributes with "true" and "false" as possible values.
2634// When true, it should be set to a "true" string.
2635// When false, it should be set to a "false" string.
2636var BOOLEANISH_STRING = 2;
2637
2638// A real boolean attribute.
2639// When true, it should be present (set either to an empty string or its name).
2640// When false, it should be omitted.
2641var BOOLEAN = 3;
2642
2643// An attribute that can be used as a flag as well as with a value.
2644// When true, it should be present (set either to an empty string or its name).
2645// When false, it should be omitted.
2646// For any other value, should be present with that value.
2647var OVERLOADED_BOOLEAN = 4;
2648
2649// An attribute that must be numeric or parse as a numeric.
2650// When falsy, it should be removed.
2651var NUMERIC = 5;
2652
2653// An attribute that must be positive numeric or parse as a positive numeric.
2654// When falsy, it should be removed.
2655var POSITIVE_NUMERIC = 6;
2656
2657/* eslint-disable max-len */
2658var ATTRIBUTE_NAME_START_CHAR = ':A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD';
2659/* eslint-enable max-len */
2660var ATTRIBUTE_NAME_CHAR = ATTRIBUTE_NAME_START_CHAR + '\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040';
2661
2662
2663var ROOT_ATTRIBUTE_NAME = 'data-reactroot';
2664var VALID_ATTRIBUTE_NAME_REGEX = new RegExp('^[' + ATTRIBUTE_NAME_START_CHAR + '][' + ATTRIBUTE_NAME_CHAR + ']*$');
2665
2666var hasOwnProperty = Object.prototype.hasOwnProperty;
2667var illegalAttributeNameCache = {};
2668var validatedAttributeNameCache = {};
2669
2670function isAttributeNameSafe(attributeName) {
2671 if (hasOwnProperty.call(validatedAttributeNameCache, attributeName)) {
2672 return true;
2673 }
2674 if (hasOwnProperty.call(illegalAttributeNameCache, attributeName)) {
2675 return false;
2676 }
2677 if (VALID_ATTRIBUTE_NAME_REGEX.test(attributeName)) {
2678 validatedAttributeNameCache[attributeName] = true;
2679 return true;
2680 }
2681 illegalAttributeNameCache[attributeName] = true;
2682 {
2683 warning$1(false, 'Invalid attribute name: `%s`', attributeName);
2684 }
2685 return false;
2686}
2687
2688function shouldIgnoreAttribute(name, propertyInfo, isCustomComponentTag) {
2689 if (propertyInfo !== null) {
2690 return propertyInfo.type === RESERVED;
2691 }
2692 if (isCustomComponentTag) {
2693 return false;
2694 }
2695 if (name.length > 2 && (name[0] === 'o' || name[0] === 'O') && (name[1] === 'n' || name[1] === 'N')) {
2696 return true;
2697 }
2698 return false;
2699}
2700
2701function shouldRemoveAttributeWithWarning(name, value, propertyInfo, isCustomComponentTag) {
2702 if (propertyInfo !== null && propertyInfo.type === RESERVED) {
2703 return false;
2704 }
2705 switch (typeof value) {
2706 case 'function':
2707 // $FlowIssue symbol is perfectly valid here
2708 case 'symbol':
2709 // eslint-disable-line
2710 return true;
2711 case 'boolean':
2712 {
2713 if (isCustomComponentTag) {
2714 return false;
2715 }
2716 if (propertyInfo !== null) {
2717 return !propertyInfo.acceptsBooleans;
2718 } else {
2719 var prefix = name.toLowerCase().slice(0, 5);
2720 return prefix !== 'data-' && prefix !== 'aria-';
2721 }
2722 }
2723 default:
2724 return false;
2725 }
2726}
2727
2728function shouldRemoveAttribute(name, value, propertyInfo, isCustomComponentTag) {
2729 if (value === null || typeof value === 'undefined') {
2730 return true;
2731 }
2732 if (shouldRemoveAttributeWithWarning(name, value, propertyInfo, isCustomComponentTag)) {
2733 return true;
2734 }
2735 if (isCustomComponentTag) {
2736 return false;
2737 }
2738 if (propertyInfo !== null) {
2739 switch (propertyInfo.type) {
2740 case BOOLEAN:
2741 return !value;
2742 case OVERLOADED_BOOLEAN:
2743 return value === false;
2744 case NUMERIC:
2745 return isNaN(value);
2746 case POSITIVE_NUMERIC:
2747 return isNaN(value) || value < 1;
2748 }
2749 }
2750 return false;
2751}
2752
2753function getPropertyInfo(name) {
2754 return properties.hasOwnProperty(name) ? properties[name] : null;
2755}
2756
2757function PropertyInfoRecord(name, type, mustUseProperty, attributeName, attributeNamespace) {
2758 this.acceptsBooleans = type === BOOLEANISH_STRING || type === BOOLEAN || type === OVERLOADED_BOOLEAN;
2759 this.attributeName = attributeName;
2760 this.attributeNamespace = attributeNamespace;
2761 this.mustUseProperty = mustUseProperty;
2762 this.propertyName = name;
2763 this.type = type;
2764}
2765
2766// When adding attributes to this list, be sure to also add them to
2767// the `possibleStandardNames` module to ensure casing and incorrect
2768// name warnings.
2769var properties = {};
2770
2771// These props are reserved by React. They shouldn't be written to the DOM.
2772['children', 'dangerouslySetInnerHTML',
2773// TODO: This prevents the assignment of defaultValue to regular
2774// elements (not just inputs). Now that ReactDOMInput assigns to the
2775// defaultValue property -- do we need this?
2776'defaultValue', 'defaultChecked', 'innerHTML', 'suppressContentEditableWarning', 'suppressHydrationWarning', 'style'].forEach(function (name) {
2777 properties[name] = new PropertyInfoRecord(name, RESERVED, false, // mustUseProperty
2778 name, // attributeName
2779 null);
2780} // attributeNamespace
2781);
2782
2783// A few React string attributes have a different name.
2784// This is a mapping from React prop names to the attribute names.
2785[['acceptCharset', 'accept-charset'], ['className', 'class'], ['htmlFor', 'for'], ['httpEquiv', 'http-equiv']].forEach(function (_ref) {
2786 var name = _ref[0],
2787 attributeName = _ref[1];
2788
2789 properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
2790 attributeName, // attributeName
2791 null);
2792} // attributeNamespace
2793);
2794
2795// These are "enumerated" HTML attributes that accept "true" and "false".
2796// In React, we let users pass `true` and `false` even though technically
2797// these aren't boolean attributes (they are coerced to strings).
2798['contentEditable', 'draggable', 'spellCheck', 'value'].forEach(function (name) {
2799 properties[name] = new PropertyInfoRecord(name, BOOLEANISH_STRING, false, // mustUseProperty
2800 name.toLowerCase(), // attributeName
2801 null);
2802} // attributeNamespace
2803);
2804
2805// These are "enumerated" SVG attributes that accept "true" and "false".
2806// In React, we let users pass `true` and `false` even though technically
2807// these aren't boolean attributes (they are coerced to strings).
2808// Since these are SVG attributes, their attribute names are case-sensitive.
2809['autoReverse', 'externalResourcesRequired', 'focusable', 'preserveAlpha'].forEach(function (name) {
2810 properties[name] = new PropertyInfoRecord(name, BOOLEANISH_STRING, false, // mustUseProperty
2811 name, // attributeName
2812 null);
2813} // attributeNamespace
2814);
2815
2816// These are HTML boolean attributes.
2817['allowFullScreen', 'async',
2818// Note: there is a special case that prevents it from being written to the DOM
2819// on the client side because the browsers are inconsistent. Instead we call focus().
2820'autoFocus', 'autoPlay', 'controls', 'default', 'defer', 'disabled', 'formNoValidate', 'hidden', 'loop', 'noModule', 'noValidate', 'open', 'playsInline', 'readOnly', 'required', 'reversed', 'scoped', 'seamless',
2821// Microdata
2822'itemScope'].forEach(function (name) {
2823 properties[name] = new PropertyInfoRecord(name, BOOLEAN, false, // mustUseProperty
2824 name.toLowerCase(), // attributeName
2825 null);
2826} // attributeNamespace
2827);
2828
2829// These are the few React props that we set as DOM properties
2830// rather than attributes. These are all booleans.
2831['checked',
2832// Note: `option.selected` is not updated if `select.multiple` is
2833// disabled with `removeAttribute`. We have special logic for handling this.
2834'multiple', 'muted', 'selected'].forEach(function (name) {
2835 properties[name] = new PropertyInfoRecord(name, BOOLEAN, true, // mustUseProperty
2836 name, // attributeName
2837 null);
2838} // attributeNamespace
2839);
2840
2841// These are HTML attributes that are "overloaded booleans": they behave like
2842// booleans, but can also accept a string value.
2843['capture', 'download'].forEach(function (name) {
2844 properties[name] = new PropertyInfoRecord(name, OVERLOADED_BOOLEAN, false, // mustUseProperty
2845 name, // attributeName
2846 null);
2847} // attributeNamespace
2848);
2849
2850// These are HTML attributes that must be positive numbers.
2851['cols', 'rows', 'size', 'span'].forEach(function (name) {
2852 properties[name] = new PropertyInfoRecord(name, POSITIVE_NUMERIC, false, // mustUseProperty
2853 name, // attributeName
2854 null);
2855} // attributeNamespace
2856);
2857
2858// These are HTML attributes that must be numbers.
2859['rowSpan', 'start'].forEach(function (name) {
2860 properties[name] = new PropertyInfoRecord(name, NUMERIC, false, // mustUseProperty
2861 name.toLowerCase(), // attributeName
2862 null);
2863} // attributeNamespace
2864);
2865
2866var CAMELIZE = /[\-\:]([a-z])/g;
2867var capitalize = function (token) {
2868 return token[1].toUpperCase();
2869};
2870
2871// This is a list of all SVG attributes that need special casing, namespacing,
2872// or boolean value assignment. Regular attributes that just accept strings
2873// and have the same names are omitted, just like in the HTML whitelist.
2874// Some of these attributes can be hard to find. This list was created by
2875// scrapping the MDN documentation.
2876['accent-height', 'alignment-baseline', 'arabic-form', 'baseline-shift', 'cap-height', 'clip-path', 'clip-rule', 'color-interpolation', 'color-interpolation-filters', 'color-profile', 'color-rendering', 'dominant-baseline', 'enable-background', 'fill-opacity', 'fill-rule', 'flood-color', 'flood-opacity', 'font-family', 'font-size', 'font-size-adjust', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'glyph-name', 'glyph-orientation-horizontal', 'glyph-orientation-vertical', 'horiz-adv-x', 'horiz-origin-x', 'image-rendering', 'letter-spacing', 'lighting-color', 'marker-end', 'marker-mid', 'marker-start', 'overline-position', 'overline-thickness', 'paint-order', 'panose-1', 'pointer-events', 'rendering-intent', 'shape-rendering', 'stop-color', 'stop-opacity', 'strikethrough-position', 'strikethrough-thickness', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'text-anchor', 'text-decoration', 'text-rendering', 'underline-position', 'underline-thickness', 'unicode-bidi', 'unicode-range', 'units-per-em', 'v-alphabetic', 'v-hanging', 'v-ideographic', 'v-mathematical', 'vector-effect', 'vert-adv-y', 'vert-origin-x', 'vert-origin-y', 'word-spacing', 'writing-mode', 'xmlns:xlink', 'x-height'].forEach(function (attributeName) {
2877 var name = attributeName.replace(CAMELIZE, capitalize);
2878 properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
2879 attributeName, null);
2880} // attributeNamespace
2881);
2882
2883// String SVG attributes with the xlink namespace.
2884['xlink:actuate', 'xlink:arcrole', 'xlink:href', 'xlink:role', 'xlink:show', 'xlink:title', 'xlink:type'].forEach(function (attributeName) {
2885 var name = attributeName.replace(CAMELIZE, capitalize);
2886 properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
2887 attributeName, 'http://www.w3.org/1999/xlink');
2888});
2889
2890// String SVG attributes with the xml namespace.
2891['xml:base', 'xml:lang', 'xml:space'].forEach(function (attributeName) {
2892 var name = attributeName.replace(CAMELIZE, capitalize);
2893 properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
2894 attributeName, 'http://www.w3.org/XML/1998/namespace');
2895});
2896
2897// Special case: this attribute exists both in HTML and SVG.
2898// Its "tabindex" attribute name is case-sensitive in SVG so we can't just use
2899// its React `tabIndex` name, like we do for attributes that exist only in HTML.
2900properties.tabIndex = new PropertyInfoRecord('tabIndex', STRING, false, // mustUseProperty
2901'tabindex', // attributeName
2902null);
2903
2904/**
2905 * Get the value for a property on a node. Only used in DEV for SSR validation.
2906 * The "expected" argument is used as a hint of what the expected value is.
2907 * Some properties have multiple equivalent values.
2908 */
2909function getValueForProperty(node, name, expected, propertyInfo) {
2910 {
2911 if (propertyInfo.mustUseProperty) {
2912 var propertyName = propertyInfo.propertyName;
2913
2914 return node[propertyName];
2915 } else {
2916 var attributeName = propertyInfo.attributeName;
2917
2918 var stringValue = null;
2919
2920 if (propertyInfo.type === OVERLOADED_BOOLEAN) {
2921 if (node.hasAttribute(attributeName)) {
2922 var value = node.getAttribute(attributeName);
2923 if (value === '') {
2924 return true;
2925 }
2926 if (shouldRemoveAttribute(name, expected, propertyInfo, false)) {
2927 return value;
2928 }
2929 if (value === '' + expected) {
2930 return expected;
2931 }
2932 return value;
2933 }
2934 } else if (node.hasAttribute(attributeName)) {
2935 if (shouldRemoveAttribute(name, expected, propertyInfo, false)) {
2936 // We had an attribute but shouldn't have had one, so read it
2937 // for the error message.
2938 return node.getAttribute(attributeName);
2939 }
2940 if (propertyInfo.type === BOOLEAN) {
2941 // If this was a boolean, it doesn't matter what the value is
2942 // the fact that we have it is the same as the expected.
2943 return expected;
2944 }
2945 // Even if this property uses a namespace we use getAttribute
2946 // because we assume its namespaced name is the same as our config.
2947 // To use getAttributeNS we need the local name which we don't have
2948 // in our config atm.
2949 stringValue = node.getAttribute(attributeName);
2950 }
2951
2952 if (shouldRemoveAttribute(name, expected, propertyInfo, false)) {
2953 return stringValue === null ? expected : stringValue;
2954 } else if (stringValue === '' + expected) {
2955 return expected;
2956 } else {
2957 return stringValue;
2958 }
2959 }
2960 }
2961}
2962
2963/**
2964 * Get the value for a attribute on a node. Only used in DEV for SSR validation.
2965 * The third argument is used as a hint of what the expected value is. Some
2966 * attributes have multiple equivalent values.
2967 */
2968function getValueForAttribute(node, name, expected) {
2969 {
2970 if (!isAttributeNameSafe(name)) {
2971 return;
2972 }
2973 if (!node.hasAttribute(name)) {
2974 return expected === undefined ? undefined : null;
2975 }
2976 var value = node.getAttribute(name);
2977 if (value === '' + expected) {
2978 return expected;
2979 }
2980 return value;
2981 }
2982}
2983
2984/**
2985 * Sets the value for a property on a node.
2986 *
2987 * @param {DOMElement} node
2988 * @param {string} name
2989 * @param {*} value
2990 */
2991function setValueForProperty(node, name, value, isCustomComponentTag) {
2992 var propertyInfo = getPropertyInfo(name);
2993 if (shouldIgnoreAttribute(name, propertyInfo, isCustomComponentTag)) {
2994 return;
2995 }
2996 if (shouldRemoveAttribute(name, value, propertyInfo, isCustomComponentTag)) {
2997 value = null;
2998 }
2999 // If the prop isn't in the special list, treat it as a simple attribute.
3000 if (isCustomComponentTag || propertyInfo === null) {
3001 if (isAttributeNameSafe(name)) {
3002 var _attributeName = name;
3003 if (value === null) {
3004 node.removeAttribute(_attributeName);
3005 } else {
3006 node.setAttribute(_attributeName, '' + value);
3007 }
3008 }
3009 return;
3010 }
3011 var mustUseProperty = propertyInfo.mustUseProperty;
3012
3013 if (mustUseProperty) {
3014 var propertyName = propertyInfo.propertyName;
3015
3016 if (value === null) {
3017 var type = propertyInfo.type;
3018
3019 node[propertyName] = type === BOOLEAN ? false : '';
3020 } else {
3021 // Contrary to `setAttribute`, object properties are properly
3022 // `toString`ed by IE8/9.
3023 node[propertyName] = value;
3024 }
3025 return;
3026 }
3027 // The rest are treated as attributes with special cases.
3028 var attributeName = propertyInfo.attributeName,
3029 attributeNamespace = propertyInfo.attributeNamespace;
3030
3031 if (value === null) {
3032 node.removeAttribute(attributeName);
3033 } else {
3034 var _type = propertyInfo.type;
3035
3036 var attributeValue = void 0;
3037 if (_type === BOOLEAN || _type === OVERLOADED_BOOLEAN && value === true) {
3038 attributeValue = '';
3039 } else {
3040 // `setAttribute` with objects becomes only `[object]` in IE8/9,
3041 // ('' + value) makes it output the correct toString()-value.
3042 attributeValue = '' + value;
3043 }
3044 if (attributeNamespace) {
3045 node.setAttributeNS(attributeNamespace, attributeName, attributeValue);
3046 } else {
3047 node.setAttribute(attributeName, attributeValue);
3048 }
3049 }
3050}
3051
3052// Flow does not allow string concatenation of most non-string types. To work
3053// around this limitation, we use an opaque type that can only be obtained by
3054// passing the value through getToStringValue first.
3055function toString(value) {
3056 return '' + value;
3057}
3058
3059function getToStringValue(value) {
3060 switch (typeof value) {
3061 case 'boolean':
3062 case 'number':
3063 case 'object':
3064 case 'string':
3065 case 'undefined':
3066 return value;
3067 default:
3068 // function, symbol are assigned as empty strings
3069 return '';
3070 }
3071}
3072
3073var ReactDebugCurrentFrame$1 = null;
3074
3075var ReactControlledValuePropTypes = {
3076 checkPropTypes: null
3077};
3078
3079{
3080 ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;
3081
3082 var hasReadOnlyValue = {
3083 button: true,
3084 checkbox: true,
3085 image: true,
3086 hidden: true,
3087 radio: true,
3088 reset: true,
3089 submit: true
3090 };
3091
3092 var propTypes = {
3093 value: function (props, propName, componentName) {
3094 if (hasReadOnlyValue[props.type] || props.onChange || props.readOnly || props.disabled || props[propName] == null) {
3095 return null;
3096 }
3097 return new Error('You provided a `value` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultValue`. Otherwise, ' + 'set either `onChange` or `readOnly`.');
3098 },
3099 checked: function (props, propName, componentName) {
3100 if (props.onChange || props.readOnly || props.disabled || props[propName] == null) {
3101 return null;
3102 }
3103 return new Error('You provided a `checked` prop to a form field without an ' + '`onChange` handler. This will render a read-only field. If ' + 'the field should be mutable use `defaultChecked`. Otherwise, ' + 'set either `onChange` or `readOnly`.');
3104 }
3105 };
3106
3107 /**
3108 * Provide a linked `value` attribute for controlled forms. You should not use
3109 * this outside of the ReactDOM controlled form components.
3110 */
3111 ReactControlledValuePropTypes.checkPropTypes = function (tagName, props) {
3112 checkPropTypes(propTypes, props, 'prop', tagName, ReactDebugCurrentFrame$1.getStackAddendum);
3113 };
3114}
3115
3116var enableUserTimingAPI = true;
3117
3118var enableHooks = false;
3119// Helps identify side effects in begin-phase lifecycle hooks and setState reducers:
3120var debugRenderPhaseSideEffects = false;
3121
3122// In some cases, StrictMode should also double-render lifecycles.
3123// This can be confusing for tests though,
3124// And it can be bad for performance in production.
3125// This feature flag can be used to control the behavior:
3126var debugRenderPhaseSideEffectsForStrictMode = true;
3127
3128// To preserve the "Pause on caught exceptions" behavior of the debugger, we
3129// replay the begin phase of a failed component inside invokeGuardedCallback.
3130var replayFailedUnitOfWorkWithInvokeGuardedCallback = true;
3131
3132// Warn about deprecated, async-unsafe lifecycles; relates to RFC #6:
3133var warnAboutDeprecatedLifecycles = false;
3134
3135// Gather advanced timing metrics for Profiler subtrees.
3136var enableProfilerTimer = true;
3137
3138// Trace which interactions trigger each commit.
3139var enableSchedulerTracing = true;
3140
3141// Only used in www builds.
3142 // TODO: true? Here it might just be false.
3143
3144// Only used in www builds.
3145
3146
3147// Only used in www builds.
3148
3149
3150// React Fire: prevent the value and checked attributes from syncing
3151// with their related DOM properties
3152var disableInputAttributeSyncing = false;
3153
3154// These APIs will no longer be "unstable" in the upcoming 16.7 release,
3155// Control this behavior with a flag to support 16.6 minor releases in the meanwhile.
3156var enableStableConcurrentModeAPIs = false;
3157
3158var warnAboutShorthandPropertyCollision = false;
3159
3160// TODO: direct imports like some-package/src/* are bad. Fix me.
3161var didWarnValueDefaultValue = false;
3162var didWarnCheckedDefaultChecked = false;
3163var didWarnControlledToUncontrolled = false;
3164var didWarnUncontrolledToControlled = false;
3165
3166function isControlled(props) {
3167 var usesChecked = props.type === 'checkbox' || props.type === 'radio';
3168 return usesChecked ? props.checked != null : props.value != null;
3169}
3170
3171/**
3172 * Implements an <input> host component that allows setting these optional
3173 * props: `checked`, `value`, `defaultChecked`, and `defaultValue`.
3174 *
3175 * If `checked` or `value` are not supplied (or null/undefined), user actions
3176 * that affect the checked state or value will trigger updates to the element.
3177 *
3178 * If they are supplied (and not null/undefined), the rendered element will not
3179 * trigger updates to the element. Instead, the props must change in order for
3180 * the rendered element to be updated.
3181 *
3182 * The rendered element will be initialized as unchecked (or `defaultChecked`)
3183 * with an empty value (or `defaultValue`).
3184 *
3185 * See http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html
3186 */
3187
3188function getHostProps(element, props) {
3189 var node = element;
3190 var checked = props.checked;
3191
3192 var hostProps = _assign({}, props, {
3193 defaultChecked: undefined,
3194 defaultValue: undefined,
3195 value: undefined,
3196 checked: checked != null ? checked : node._wrapperState.initialChecked
3197 });
3198
3199 return hostProps;
3200}
3201
3202function initWrapperState(element, props) {
3203 {
3204 ReactControlledValuePropTypes.checkPropTypes('input', props);
3205
3206 if (props.checked !== undefined && props.defaultChecked !== undefined && !didWarnCheckedDefaultChecked) {
3207 warning$1(false, '%s contains an input of type %s with both checked and defaultChecked props. ' + 'Input elements must be either controlled or uncontrolled ' + '(specify either the checked prop, or the defaultChecked prop, but not ' + 'both). Decide between using a controlled or uncontrolled input ' + 'element and remove one of these props. More info: ' + 'https://fb.me/react-controlled-components', getCurrentFiberOwnerNameInDevOrNull() || 'A component', props.type);
3208 didWarnCheckedDefaultChecked = true;
3209 }
3210 if (props.value !== undefined && props.defaultValue !== undefined && !didWarnValueDefaultValue) {
3211 warning$1(false, '%s contains an input of type %s with both value and defaultValue props. ' + 'Input elements must be either controlled or uncontrolled ' + '(specify either the value prop, or the defaultValue prop, but not ' + 'both). Decide between using a controlled or uncontrolled input ' + 'element and remove one of these props. More info: ' + 'https://fb.me/react-controlled-components', getCurrentFiberOwnerNameInDevOrNull() || 'A component', props.type);
3212 didWarnValueDefaultValue = true;
3213 }
3214 }
3215
3216 var node = element;
3217 var defaultValue = props.defaultValue == null ? '' : props.defaultValue;
3218
3219 node._wrapperState = {
3220 initialChecked: props.checked != null ? props.checked : props.defaultChecked,
3221 initialValue: getToStringValue(props.value != null ? props.value : defaultValue),
3222 controlled: isControlled(props)
3223 };
3224}
3225
3226function updateChecked(element, props) {
3227 var node = element;
3228 var checked = props.checked;
3229 if (checked != null) {
3230 setValueForProperty(node, 'checked', checked, false);
3231 }
3232}
3233
3234function updateWrapper(element, props) {
3235 var node = element;
3236 {
3237 var _controlled = isControlled(props);
3238
3239 if (!node._wrapperState.controlled && _controlled && !didWarnUncontrolledToControlled) {
3240 warning$1(false, 'A component is changing an uncontrolled input of type %s to be controlled. ' + 'Input elements should not switch from uncontrolled to controlled (or vice versa). ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components', props.type);
3241 didWarnUncontrolledToControlled = true;
3242 }
3243 if (node._wrapperState.controlled && !_controlled && !didWarnControlledToUncontrolled) {
3244 warning$1(false, 'A component is changing a controlled input of type %s to be uncontrolled. ' + 'Input elements should not switch from controlled to uncontrolled (or vice versa). ' + 'Decide between using a controlled or uncontrolled input ' + 'element for the lifetime of the component. More info: https://fb.me/react-controlled-components', props.type);
3245 didWarnControlledToUncontrolled = true;
3246 }
3247 }
3248
3249 updateChecked(element, props);
3250
3251 var value = getToStringValue(props.value);
3252 var type = props.type;
3253
3254 if (value != null) {
3255 if (type === 'number') {
3256 if (value === 0 && node.value === '' ||
3257 // We explicitly want to coerce to number here if possible.
3258 // eslint-disable-next-line
3259 node.value != value) {
3260 node.value = toString(value);
3261 }
3262 } else if (node.value !== toString(value)) {
3263 node.value = toString(value);
3264 }
3265 } else if (type === 'submit' || type === 'reset') {
3266 // Submit/reset inputs need the attribute removed completely to avoid
3267 // blank-text buttons.
3268 node.removeAttribute('value');
3269 return;
3270 }
3271
3272 if (disableInputAttributeSyncing) {
3273 // When not syncing the value attribute, React only assigns a new value
3274 // whenever the defaultValue React prop has changed. When not present,
3275 // React does nothing
3276 if (props.hasOwnProperty('defaultValue')) {
3277 setDefaultValue(node, props.type, getToStringValue(props.defaultValue));
3278 }
3279 } else {
3280 // When syncing the value attribute, the value comes from a cascade of
3281 // properties:
3282 // 1. The value React property
3283 // 2. The defaultValue React property
3284 // 3. Otherwise there should be no change
3285 if (props.hasOwnProperty('value')) {
3286 setDefaultValue(node, props.type, value);
3287 } else if (props.hasOwnProperty('defaultValue')) {
3288 setDefaultValue(node, props.type, getToStringValue(props.defaultValue));
3289 }
3290 }
3291
3292 if (disableInputAttributeSyncing) {
3293 // When not syncing the checked attribute, the attribute is directly
3294 // controllable from the defaultValue React property. It needs to be
3295 // updated as new props come in.
3296 if (props.defaultChecked == null) {
3297 node.removeAttribute('checked');
3298 } else {
3299 node.defaultChecked = !!props.defaultChecked;
3300 }
3301 } else {
3302 // When syncing the checked attribute, it only changes when it needs
3303 // to be removed, such as transitioning from a checkbox into a text input
3304 if (props.checked == null && props.defaultChecked != null) {
3305 node.defaultChecked = !!props.defaultChecked;
3306 }
3307 }
3308}
3309
3310function postMountWrapper(element, props, isHydrating) {
3311 var node = element;
3312
3313 // Do not assign value if it is already set. This prevents user text input
3314 // from being lost during SSR hydration.
3315 if (props.hasOwnProperty('value') || props.hasOwnProperty('defaultValue')) {
3316 var type = props.type;
3317 var isButton = type === 'submit' || type === 'reset';
3318
3319 // Avoid setting value attribute on submit/reset inputs as it overrides the
3320 // default value provided by the browser. See: #12872
3321 if (isButton && (props.value === undefined || props.value === null)) {
3322 return;
3323 }
3324
3325 var _initialValue = toString(node._wrapperState.initialValue);
3326
3327 // Do not assign value if it is already set. This prevents user text input
3328 // from being lost during SSR hydration.
3329 if (!isHydrating) {
3330 if (disableInputAttributeSyncing) {
3331 var value = getToStringValue(props.value);
3332
3333 // When not syncing the value attribute, the value property points
3334 // directly to the React prop. Only assign it if it exists.
3335 if (value != null) {
3336 // Always assign on buttons so that it is possible to assign an
3337 // empty string to clear button text.
3338 //
3339 // Otherwise, do not re-assign the value property if is empty. This
3340 // potentially avoids a DOM write and prevents Firefox (~60.0.1) from
3341 // prematurely marking required inputs as invalid. Equality is compared
3342 // to the current value in case the browser provided value is not an
3343 // empty string.
3344 if (isButton || value !== node.value) {
3345 node.value = toString(value);
3346 }
3347 }
3348 } else {
3349 // When syncing the value attribute, the value property should use
3350 // the wrapperState._initialValue property. This uses:
3351 //
3352 // 1. The value React property when present
3353 // 2. The defaultValue React property when present
3354 // 3. An empty string
3355 if (_initialValue !== node.value) {
3356 node.value = _initialValue;
3357 }
3358 }
3359 }
3360
3361 if (disableInputAttributeSyncing) {
3362 // When not syncing the value attribute, assign the value attribute
3363 // directly from the defaultValue React property (when present)
3364 var defaultValue = getToStringValue(props.defaultValue);
3365 if (defaultValue != null) {
3366 node.defaultValue = toString(defaultValue);
3367 }
3368 } else {
3369 // Otherwise, the value attribute is synchronized to the property,
3370 // so we assign defaultValue to the same thing as the value property
3371 // assignment step above.
3372 node.defaultValue = _initialValue;
3373 }
3374 }
3375
3376 // Normally, we'd just do `node.checked = node.checked` upon initial mount, less this bug
3377 // this is needed to work around a chrome bug where setting defaultChecked
3378 // will sometimes influence the value of checked (even after detachment).
3379 // Reference: https://bugs.chromium.org/p/chromium/issues/detail?id=608416
3380 // We need to temporarily unset name to avoid disrupting radio button groups.
3381 var name = node.name;
3382 if (name !== '') {
3383 node.name = '';
3384 }
3385
3386 if (disableInputAttributeSyncing) {
3387 // When not syncing the checked attribute, the checked property
3388 // never gets assigned. It must be manually set. We don't want
3389 // to do this when hydrating so that existing user input isn't
3390 // modified
3391 if (!isHydrating) {
3392 updateChecked(element, props);
3393 }
3394
3395 // Only assign the checked attribute if it is defined. This saves
3396 // a DOM write when controlling the checked attribute isn't needed
3397 // (text inputs, submit/reset)
3398 if (props.hasOwnProperty('defaultChecked')) {
3399 node.defaultChecked = !node.defaultChecked;
3400 node.defaultChecked = !!props.defaultChecked;
3401 }
3402 } else {
3403 // When syncing the checked attribute, both the checked property and
3404 // attribute are assigned at the same time using defaultChecked. This uses:
3405 //
3406 // 1. The checked React property when present
3407 // 2. The defaultChecked React property when present
3408 // 3. Otherwise, false
3409 node.defaultChecked = !node.defaultChecked;
3410 node.defaultChecked = !!node._wrapperState.initialChecked;
3411 }
3412
3413 if (name !== '') {
3414 node.name = name;
3415 }
3416}
3417
3418function restoreControlledState(element, props) {
3419 var node = element;
3420 updateWrapper(node, props);
3421 updateNamedCousins(node, props);
3422}
3423
3424function updateNamedCousins(rootNode, props) {
3425 var name = props.name;
3426 if (props.type === 'radio' && name != null) {
3427 var queryRoot = rootNode;
3428
3429 while (queryRoot.parentNode) {
3430 queryRoot = queryRoot.parentNode;
3431 }
3432
3433 // If `rootNode.form` was non-null, then we could try `form.elements`,
3434 // but that sometimes behaves strangely in IE8. We could also try using
3435 // `form.getElementsByName`, but that will only return direct children
3436 // and won't include inputs that use the HTML5 `form=` attribute. Since
3437 // the input might not even be in a form. It might not even be in the
3438 // document. Let's just use the local `querySelectorAll` to ensure we don't
3439 // miss anything.
3440 var group = queryRoot.querySelectorAll('input[name=' + JSON.stringify('' + name) + '][type="radio"]');
3441
3442 for (var i = 0; i < group.length; i++) {
3443 var otherNode = group[i];
3444 if (otherNode === rootNode || otherNode.form !== rootNode.form) {
3445 continue;
3446 }
3447 // This will throw if radio buttons rendered by different copies of React
3448 // and the same name are rendered into the same form (same as #1939).
3449 // That's probably okay; we don't support it just as we don't support
3450 // mixing React radio buttons with non-React ones.
3451 var otherProps = getFiberCurrentPropsFromNode$1(otherNode);
3452 !otherProps ? invariant(false, 'ReactDOMInput: Mixing React and non-React radio inputs with the same `name` is not supported.') : void 0;
3453
3454 // We need update the tracked value on the named cousin since the value
3455 // was changed but the input saw no event or value set
3456 updateValueIfChanged(otherNode);
3457
3458 // If this is a controlled radio button group, forcing the input that
3459 // was previously checked to update will cause it to be come re-checked
3460 // as appropriate.
3461 updateWrapper(otherNode, otherProps);
3462 }
3463 }
3464}
3465
3466// In Chrome, assigning defaultValue to certain input types triggers input validation.
3467// For number inputs, the display value loses trailing decimal points. For email inputs,
3468// Chrome raises "The specified value <x> is not a valid email address".
3469//
3470// Here we check to see if the defaultValue has actually changed, avoiding these problems
3471// when the user is inputting text
3472//
3473// https://github.com/facebook/react/issues/7253
3474function setDefaultValue(node, type, value) {
3475 if (
3476 // Focused number inputs synchronize on blur. See ChangeEventPlugin.js
3477 type !== 'number' || node.ownerDocument.activeElement !== node) {
3478 if (value == null) {
3479 node.defaultValue = toString(node._wrapperState.initialValue);
3480 } else if (node.defaultValue !== toString(value)) {
3481 node.defaultValue = toString(value);
3482 }
3483 }
3484}
3485
3486var eventTypes$1 = {
3487 change: {
3488 phasedRegistrationNames: {
3489 bubbled: 'onChange',
3490 captured: 'onChangeCapture'
3491 },
3492 dependencies: [TOP_BLUR, TOP_CHANGE, TOP_CLICK, TOP_FOCUS, TOP_INPUT, TOP_KEY_DOWN, TOP_KEY_UP, TOP_SELECTION_CHANGE]
3493 }
3494};
3495
3496function createAndAccumulateChangeEvent(inst, nativeEvent, target) {
3497 var event = SyntheticEvent.getPooled(eventTypes$1.change, inst, nativeEvent, target);
3498 event.type = 'change';
3499 // Flag this event loop as needing state restore.
3500 enqueueStateRestore(target);
3501 accumulateTwoPhaseDispatches(event);
3502 return event;
3503}
3504/**
3505 * For IE shims
3506 */
3507var activeElement = null;
3508var activeElementInst = null;
3509
3510/**
3511 * SECTION: handle `change` event
3512 */
3513function shouldUseChangeEvent(elem) {
3514 var nodeName = elem.nodeName && elem.nodeName.toLowerCase();
3515 return nodeName === 'select' || nodeName === 'input' && elem.type === 'file';
3516}
3517
3518function manualDispatchChangeEvent(nativeEvent) {
3519 var event = createAndAccumulateChangeEvent(activeElementInst, nativeEvent, getEventTarget(nativeEvent));
3520
3521 // If change and propertychange bubbled, we'd just bind to it like all the
3522 // other events and have it go through ReactBrowserEventEmitter. Since it
3523 // doesn't, we manually listen for the events and so we have to enqueue and
3524 // process the abstract event manually.
3525 //
3526 // Batching is necessary here in order to ensure that all event handlers run
3527 // before the next rerender (including event handlers attached to ancestor
3528 // elements instead of directly on the input). Without this, controlled
3529 // components don't work properly in conjunction with event bubbling because
3530 // the component is rerendered and the value reverted before all the event
3531 // handlers can run. See https://github.com/facebook/react/issues/708.
3532 batchedUpdates(runEventInBatch, event);
3533}
3534
3535function runEventInBatch(event) {
3536 runEventsInBatch(event);
3537}
3538
3539function getInstIfValueChanged(targetInst) {
3540 var targetNode = getNodeFromInstance$1(targetInst);
3541 if (updateValueIfChanged(targetNode)) {
3542 return targetInst;
3543 }
3544}
3545
3546function getTargetInstForChangeEvent(topLevelType, targetInst) {
3547 if (topLevelType === TOP_CHANGE) {
3548 return targetInst;
3549 }
3550}
3551
3552/**
3553 * SECTION: handle `input` event
3554 */
3555var isInputEventSupported = false;
3556if (canUseDOM) {
3557 // IE9 claims to support the input event but fails to trigger it when
3558 // deleting text, so we ignore its input events.
3559 isInputEventSupported = isEventSupported('input') && (!document.documentMode || document.documentMode > 9);
3560}
3561
3562/**
3563 * (For IE <=9) Starts tracking propertychange events on the passed-in element
3564 * and override the value property so that we can distinguish user events from
3565 * value changes in JS.
3566 */
3567function startWatchingForValueChange(target, targetInst) {
3568 activeElement = target;
3569 activeElementInst = targetInst;
3570 activeElement.attachEvent('onpropertychange', handlePropertyChange);
3571}
3572
3573/**
3574 * (For IE <=9) Removes the event listeners from the currently-tracked element,
3575 * if any exists.
3576 */
3577function stopWatchingForValueChange() {
3578 if (!activeElement) {
3579 return;
3580 }
3581 activeElement.detachEvent('onpropertychange', handlePropertyChange);
3582 activeElement = null;
3583 activeElementInst = null;
3584}
3585
3586/**
3587 * (For IE <=9) Handles a propertychange event, sending a `change` event if
3588 * the value of the active element has changed.
3589 */
3590function handlePropertyChange(nativeEvent) {
3591 if (nativeEvent.propertyName !== 'value') {
3592 return;
3593 }
3594 if (getInstIfValueChanged(activeElementInst)) {
3595 manualDispatchChangeEvent(nativeEvent);
3596 }
3597}
3598
3599function handleEventsForInputEventPolyfill(topLevelType, target, targetInst) {
3600 if (topLevelType === TOP_FOCUS) {
3601 // In IE9, propertychange fires for most input events but is buggy and
3602 // doesn't fire when text is deleted, but conveniently, selectionchange
3603 // appears to fire in all of the remaining cases so we catch those and
3604 // forward the event if the value has changed
3605 // In either case, we don't want to call the event handler if the value
3606 // is changed from JS so we redefine a setter for `.value` that updates
3607 // our activeElementValue variable, allowing us to ignore those changes
3608 //
3609 // stopWatching() should be a noop here but we call it just in case we
3610 // missed a blur event somehow.
3611 stopWatchingForValueChange();
3612 startWatchingForValueChange(target, targetInst);
3613 } else if (topLevelType === TOP_BLUR) {
3614 stopWatchingForValueChange();
3615 }
3616}
3617
3618// For IE8 and IE9.
3619function getTargetInstForInputEventPolyfill(topLevelType, targetInst) {
3620 if (topLevelType === TOP_SELECTION_CHANGE || topLevelType === TOP_KEY_UP || topLevelType === TOP_KEY_DOWN) {
3621 // On the selectionchange event, the target is just document which isn't
3622 // helpful for us so just check activeElement instead.
3623 //
3624 // 99% of the time, keydown and keyup aren't necessary. IE8 fails to fire
3625 // propertychange on the first input event after setting `value` from a
3626 // script and fires only keydown, keypress, keyup. Catching keyup usually
3627 // gets it and catching keydown lets us fire an event for the first
3628 // keystroke if user does a key repeat (it'll be a little delayed: right
3629 // before the second keystroke). Other input methods (e.g., paste) seem to
3630 // fire selectionchange normally.
3631 return getInstIfValueChanged(activeElementInst);
3632 }
3633}
3634
3635/**
3636 * SECTION: handle `click` event
3637 */
3638function shouldUseClickEvent(elem) {
3639 // Use the `click` event to detect changes to checkbox and radio inputs.
3640 // This approach works across all browsers, whereas `change` does not fire
3641 // until `blur` in IE8.
3642 var nodeName = elem.nodeName;
3643 return nodeName && nodeName.toLowerCase() === 'input' && (elem.type === 'checkbox' || elem.type === 'radio');
3644}
3645
3646function getTargetInstForClickEvent(topLevelType, targetInst) {
3647 if (topLevelType === TOP_CLICK) {
3648 return getInstIfValueChanged(targetInst);
3649 }
3650}
3651
3652function getTargetInstForInputOrChangeEvent(topLevelType, targetInst) {
3653 if (topLevelType === TOP_INPUT || topLevelType === TOP_CHANGE) {
3654 return getInstIfValueChanged(targetInst);
3655 }
3656}
3657
3658function handleControlledInputBlur(node) {
3659 var state = node._wrapperState;
3660
3661 if (!state || !state.controlled || node.type !== 'number') {
3662 return;
3663 }
3664
3665 if (!disableInputAttributeSyncing) {
3666 // If controlled, assign the value attribute to the current value on blur
3667 setDefaultValue(node, 'number', node.value);
3668 }
3669}
3670
3671/**
3672 * This plugin creates an `onChange` event that normalizes change events
3673 * across form elements. This event fires at a time when it's possible to
3674 * change the element's value without seeing a flicker.
3675 *
3676 * Supported elements are:
3677 * - input (see `isTextInputElement`)
3678 * - textarea
3679 * - select
3680 */
3681var ChangeEventPlugin = {
3682 eventTypes: eventTypes$1,
3683
3684 _isInputEventSupported: isInputEventSupported,
3685
3686 extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
3687 var targetNode = targetInst ? getNodeFromInstance$1(targetInst) : window;
3688
3689 var getTargetInstFunc = void 0,
3690 handleEventFunc = void 0;
3691 if (shouldUseChangeEvent(targetNode)) {
3692 getTargetInstFunc = getTargetInstForChangeEvent;
3693 } else if (isTextInputElement(targetNode)) {
3694 if (isInputEventSupported) {
3695 getTargetInstFunc = getTargetInstForInputOrChangeEvent;
3696 } else {
3697 getTargetInstFunc = getTargetInstForInputEventPolyfill;
3698 handleEventFunc = handleEventsForInputEventPolyfill;
3699 }
3700 } else if (shouldUseClickEvent(targetNode)) {
3701 getTargetInstFunc = getTargetInstForClickEvent;
3702 }
3703
3704 if (getTargetInstFunc) {
3705 var inst = getTargetInstFunc(topLevelType, targetInst);
3706 if (inst) {
3707 var event = createAndAccumulateChangeEvent(inst, nativeEvent, nativeEventTarget);
3708 return event;
3709 }
3710 }
3711
3712 if (handleEventFunc) {
3713 handleEventFunc(topLevelType, targetNode, targetInst);
3714 }
3715
3716 // When blurring, set the value attribute for number inputs
3717 if (topLevelType === TOP_BLUR) {
3718 handleControlledInputBlur(targetNode);
3719 }
3720 }
3721};
3722
3723/**
3724 * Module that is injectable into `EventPluginHub`, that specifies a
3725 * deterministic ordering of `EventPlugin`s. A convenient way to reason about
3726 * plugins, without having to package every one of them. This is better than
3727 * having plugins be ordered in the same order that they are injected because
3728 * that ordering would be influenced by the packaging order.
3729 * `ResponderEventPlugin` must occur before `SimpleEventPlugin` so that
3730 * preventing default on events is convenient in `SimpleEventPlugin` handlers.
3731 */
3732var DOMEventPluginOrder = ['ResponderEventPlugin', 'SimpleEventPlugin', 'EnterLeaveEventPlugin', 'ChangeEventPlugin', 'SelectEventPlugin', 'BeforeInputEventPlugin'];
3733
3734var SyntheticUIEvent = SyntheticEvent.extend({
3735 view: null,
3736 detail: null
3737});
3738
3739var modifierKeyToProp = {
3740 Alt: 'altKey',
3741 Control: 'ctrlKey',
3742 Meta: 'metaKey',
3743 Shift: 'shiftKey'
3744};
3745
3746// Older browsers (Safari <= 10, iOS Safari <= 10.2) do not support
3747// getModifierState. If getModifierState is not supported, we map it to a set of
3748// modifier keys exposed by the event. In this case, Lock-keys are not supported.
3749/**
3750 * Translation from modifier key to the associated property in the event.
3751 * @see http://www.w3.org/TR/DOM-Level-3-Events/#keys-Modifiers
3752 */
3753
3754function modifierStateGetter(keyArg) {
3755 var syntheticEvent = this;
3756 var nativeEvent = syntheticEvent.nativeEvent;
3757 if (nativeEvent.getModifierState) {
3758 return nativeEvent.getModifierState(keyArg);
3759 }
3760 var keyProp = modifierKeyToProp[keyArg];
3761 return keyProp ? !!nativeEvent[keyProp] : false;
3762}
3763
3764function getEventModifierState(nativeEvent) {
3765 return modifierStateGetter;
3766}
3767
3768var previousScreenX = 0;
3769var previousScreenY = 0;
3770// Use flags to signal movementX/Y has already been set
3771var isMovementXSet = false;
3772var isMovementYSet = false;
3773
3774/**
3775 * @interface MouseEvent
3776 * @see http://www.w3.org/TR/DOM-Level-3-Events/
3777 */
3778var SyntheticMouseEvent = SyntheticUIEvent.extend({
3779 screenX: null,
3780 screenY: null,
3781 clientX: null,
3782 clientY: null,
3783 pageX: null,
3784 pageY: null,
3785 ctrlKey: null,
3786 shiftKey: null,
3787 altKey: null,
3788 metaKey: null,
3789 getModifierState: getEventModifierState,
3790 button: null,
3791 buttons: null,
3792 relatedTarget: function (event) {
3793 return event.relatedTarget || (event.fromElement === event.srcElement ? event.toElement : event.fromElement);
3794 },
3795 movementX: function (event) {
3796 if ('movementX' in event) {
3797 return event.movementX;
3798 }
3799
3800 var screenX = previousScreenX;
3801 previousScreenX = event.screenX;
3802
3803 if (!isMovementXSet) {
3804 isMovementXSet = true;
3805 return 0;
3806 }
3807
3808 return event.type === 'mousemove' ? event.screenX - screenX : 0;
3809 },
3810 movementY: function (event) {
3811 if ('movementY' in event) {
3812 return event.movementY;
3813 }
3814
3815 var screenY = previousScreenY;
3816 previousScreenY = event.screenY;
3817
3818 if (!isMovementYSet) {
3819 isMovementYSet = true;
3820 return 0;
3821 }
3822
3823 return event.type === 'mousemove' ? event.screenY - screenY : 0;
3824 }
3825});
3826
3827/**
3828 * @interface PointerEvent
3829 * @see http://www.w3.org/TR/pointerevents/
3830 */
3831var SyntheticPointerEvent = SyntheticMouseEvent.extend({
3832 pointerId: null,
3833 width: null,
3834 height: null,
3835 pressure: null,
3836 tangentialPressure: null,
3837 tiltX: null,
3838 tiltY: null,
3839 twist: null,
3840 pointerType: null,
3841 isPrimary: null
3842});
3843
3844var eventTypes$2 = {
3845 mouseEnter: {
3846 registrationName: 'onMouseEnter',
3847 dependencies: [TOP_MOUSE_OUT, TOP_MOUSE_OVER]
3848 },
3849 mouseLeave: {
3850 registrationName: 'onMouseLeave',
3851 dependencies: [TOP_MOUSE_OUT, TOP_MOUSE_OVER]
3852 },
3853 pointerEnter: {
3854 registrationName: 'onPointerEnter',
3855 dependencies: [TOP_POINTER_OUT, TOP_POINTER_OVER]
3856 },
3857 pointerLeave: {
3858 registrationName: 'onPointerLeave',
3859 dependencies: [TOP_POINTER_OUT, TOP_POINTER_OVER]
3860 }
3861};
3862
3863var EnterLeaveEventPlugin = {
3864 eventTypes: eventTypes$2,
3865
3866 /**
3867 * For almost every interaction we care about, there will be both a top-level
3868 * `mouseover` and `mouseout` event that occurs. Only use `mouseout` so that
3869 * we do not extract duplicate events. However, moving the mouse into the
3870 * browser from outside will not fire a `mouseout` event. In this case, we use
3871 * the `mouseover` top-level event.
3872 */
3873 extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
3874 var isOverEvent = topLevelType === TOP_MOUSE_OVER || topLevelType === TOP_POINTER_OVER;
3875 var isOutEvent = topLevelType === TOP_MOUSE_OUT || topLevelType === TOP_POINTER_OUT;
3876
3877 if (isOverEvent && (nativeEvent.relatedTarget || nativeEvent.fromElement)) {
3878 return null;
3879 }
3880
3881 if (!isOutEvent && !isOverEvent) {
3882 // Must not be a mouse or pointer in or out - ignoring.
3883 return null;
3884 }
3885
3886 var win = void 0;
3887 if (nativeEventTarget.window === nativeEventTarget) {
3888 // `nativeEventTarget` is probably a window object.
3889 win = nativeEventTarget;
3890 } else {
3891 // TODO: Figure out why `ownerDocument` is sometimes undefined in IE8.
3892 var doc = nativeEventTarget.ownerDocument;
3893 if (doc) {
3894 win = doc.defaultView || doc.parentWindow;
3895 } else {
3896 win = window;
3897 }
3898 }
3899
3900 var from = void 0;
3901 var to = void 0;
3902 if (isOutEvent) {
3903 from = targetInst;
3904 var related = nativeEvent.relatedTarget || nativeEvent.toElement;
3905 to = related ? getClosestInstanceFromNode(related) : null;
3906 } else {
3907 // Moving to a node from outside the window.
3908 from = null;
3909 to = targetInst;
3910 }
3911
3912 if (from === to) {
3913 // Nothing pertains to our managed components.
3914 return null;
3915 }
3916
3917 var eventInterface = void 0,
3918 leaveEventType = void 0,
3919 enterEventType = void 0,
3920 eventTypePrefix = void 0;
3921
3922 if (topLevelType === TOP_MOUSE_OUT || topLevelType === TOP_MOUSE_OVER) {
3923 eventInterface = SyntheticMouseEvent;
3924 leaveEventType = eventTypes$2.mouseLeave;
3925 enterEventType = eventTypes$2.mouseEnter;
3926 eventTypePrefix = 'mouse';
3927 } else if (topLevelType === TOP_POINTER_OUT || topLevelType === TOP_POINTER_OVER) {
3928 eventInterface = SyntheticPointerEvent;
3929 leaveEventType = eventTypes$2.pointerLeave;
3930 enterEventType = eventTypes$2.pointerEnter;
3931 eventTypePrefix = 'pointer';
3932 }
3933
3934 var fromNode = from == null ? win : getNodeFromInstance$1(from);
3935 var toNode = to == null ? win : getNodeFromInstance$1(to);
3936
3937 var leave = eventInterface.getPooled(leaveEventType, from, nativeEvent, nativeEventTarget);
3938 leave.type = eventTypePrefix + 'leave';
3939 leave.target = fromNode;
3940 leave.relatedTarget = toNode;
3941
3942 var enter = eventInterface.getPooled(enterEventType, to, nativeEvent, nativeEventTarget);
3943 enter.type = eventTypePrefix + 'enter';
3944 enter.target = toNode;
3945 enter.relatedTarget = fromNode;
3946
3947 accumulateEnterLeaveDispatches(leave, enter, from, to);
3948
3949 return [leave, enter];
3950 }
3951};
3952
3953/*eslint-disable no-self-compare */
3954
3955var hasOwnProperty$1 = Object.prototype.hasOwnProperty;
3956
3957/**
3958 * inlined Object.is polyfill to avoid requiring consumers ship their own
3959 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
3960 */
3961function is(x, y) {
3962 // SameValue algorithm
3963 if (x === y) {
3964 // Steps 1-5, 7-10
3965 // Steps 6.b-6.e: +0 != -0
3966 // Added the nonzero y check to make Flow happy, but it is redundant
3967 return x !== 0 || y !== 0 || 1 / x === 1 / y;
3968 } else {
3969 // Step 6.a: NaN == NaN
3970 return x !== x && y !== y;
3971 }
3972}
3973
3974/**
3975 * Performs equality by iterating through keys on an object and returning false
3976 * when any key has values which are not strictly equal between the arguments.
3977 * Returns true when the values of all keys are strictly equal.
3978 */
3979function shallowEqual(objA, objB) {
3980 if (is(objA, objB)) {
3981 return true;
3982 }
3983
3984 if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
3985 return false;
3986 }
3987
3988 var keysA = Object.keys(objA);
3989 var keysB = Object.keys(objB);
3990
3991 if (keysA.length !== keysB.length) {
3992 return false;
3993 }
3994
3995 // Test for A's keys different from B.
3996 for (var i = 0; i < keysA.length; i++) {
3997 if (!hasOwnProperty$1.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
3998 return false;
3999 }
4000 }
4001
4002 return true;
4003}
4004
4005/**
4006 * `ReactInstanceMap` maintains a mapping from a public facing stateful
4007 * instance (key) and the internal representation (value). This allows public
4008 * methods to accept the user facing instance as an argument and map them back
4009 * to internal methods.
4010 *
4011 * Note that this module is currently shared and assumed to be stateless.
4012 * If this becomes an actual Map, that will break.
4013 */
4014
4015/**
4016 * This API should be called `delete` but we'd have to make sure to always
4017 * transform these to strings for IE support. When this transform is fully
4018 * supported we can rename it.
4019 */
4020
4021
4022function get(key) {
4023 return key._reactInternalFiber;
4024}
4025
4026function has(key) {
4027 return key._reactInternalFiber !== undefined;
4028}
4029
4030function set(key, value) {
4031 key._reactInternalFiber = value;
4032}
4033
4034// Don't change these two values. They're used by React Dev Tools.
4035var NoEffect = /* */0;
4036var PerformedWork = /* */1;
4037
4038// You can change the rest (and add more).
4039var Placement = /* */2;
4040var Update = /* */4;
4041var PlacementAndUpdate = /* */6;
4042var Deletion = /* */8;
4043var ContentReset = /* */16;
4044var Callback = /* */32;
4045var DidCapture = /* */64;
4046var Ref = /* */128;
4047var Snapshot = /* */256;
4048var Passive = /* */512;
4049
4050// Passive & Update & Callback & Ref & Snapshot
4051var LifecycleEffectMask = /* */932;
4052
4053// Union of all host effects
4054var HostEffectMask = /* */1023;
4055
4056var Incomplete = /* */1024;
4057var ShouldCapture = /* */2048;
4058
4059var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner;
4060
4061var MOUNTING = 1;
4062var MOUNTED = 2;
4063var UNMOUNTED = 3;
4064
4065function isFiberMountedImpl(fiber) {
4066 var node = fiber;
4067 if (!fiber.alternate) {
4068 // If there is no alternate, this might be a new tree that isn't inserted
4069 // yet. If it is, then it will have a pending insertion effect on it.
4070 if ((node.effectTag & Placement) !== NoEffect) {
4071 return MOUNTING;
4072 }
4073 while (node.return) {
4074 node = node.return;
4075 if ((node.effectTag & Placement) !== NoEffect) {
4076 return MOUNTING;
4077 }
4078 }
4079 } else {
4080 while (node.return) {
4081 node = node.return;
4082 }
4083 }
4084 if (node.tag === HostRoot) {
4085 // TODO: Check if this was a nested HostRoot when used with
4086 // renderContainerIntoSubtree.
4087 return MOUNTED;
4088 }
4089 // If we didn't hit the root, that means that we're in an disconnected tree
4090 // that has been unmounted.
4091 return UNMOUNTED;
4092}
4093
4094function isFiberMounted(fiber) {
4095 return isFiberMountedImpl(fiber) === MOUNTED;
4096}
4097
4098function isMounted(component) {
4099 {
4100 var owner = ReactCurrentOwner$1.current;
4101 if (owner !== null && owner.tag === ClassComponent) {
4102 var ownerFiber = owner;
4103 var instance = ownerFiber.stateNode;
4104 !instance._warnedAboutRefsInRender ? warningWithoutStack$1(false, '%s is accessing isMounted inside its render() function. ' + 'render() should be a pure function of props and state. It should ' + 'never access something that requires stale data from the previous ' + 'render, such as refs. Move this logic to componentDidMount and ' + 'componentDidUpdate instead.', getComponentName(ownerFiber.type) || 'A component') : void 0;
4105 instance._warnedAboutRefsInRender = true;
4106 }
4107 }
4108
4109 var fiber = get(component);
4110 if (!fiber) {
4111 return false;
4112 }
4113 return isFiberMountedImpl(fiber) === MOUNTED;
4114}
4115
4116function assertIsMounted(fiber) {
4117 !(isFiberMountedImpl(fiber) === MOUNTED) ? invariant(false, 'Unable to find node on an unmounted component.') : void 0;
4118}
4119
4120function findCurrentFiberUsingSlowPath(fiber) {
4121 var alternate = fiber.alternate;
4122 if (!alternate) {
4123 // If there is no alternate, then we only need to check if it is mounted.
4124 var state = isFiberMountedImpl(fiber);
4125 !(state !== UNMOUNTED) ? invariant(false, 'Unable to find node on an unmounted component.') : void 0;
4126 if (state === MOUNTING) {
4127 return null;
4128 }
4129 return fiber;
4130 }
4131 // If we have two possible branches, we'll walk backwards up to the root
4132 // to see what path the root points to. On the way we may hit one of the
4133 // special cases and we'll deal with them.
4134 var a = fiber;
4135 var b = alternate;
4136 while (true) {
4137 var parentA = a.return;
4138 var parentB = parentA ? parentA.alternate : null;
4139 if (!parentA || !parentB) {
4140 // We're at the root.
4141 break;
4142 }
4143
4144 // If both copies of the parent fiber point to the same child, we can
4145 // assume that the child is current. This happens when we bailout on low
4146 // priority: the bailed out fiber's child reuses the current child.
4147 if (parentA.child === parentB.child) {
4148 var child = parentA.child;
4149 while (child) {
4150 if (child === a) {
4151 // We've determined that A is the current branch.
4152 assertIsMounted(parentA);
4153 return fiber;
4154 }
4155 if (child === b) {
4156 // We've determined that B is the current branch.
4157 assertIsMounted(parentA);
4158 return alternate;
4159 }
4160 child = child.sibling;
4161 }
4162 // We should never have an alternate for any mounting node. So the only
4163 // way this could possibly happen is if this was unmounted, if at all.
4164 invariant(false, 'Unable to find node on an unmounted component.');
4165 }
4166
4167 if (a.return !== b.return) {
4168 // The return pointer of A and the return pointer of B point to different
4169 // fibers. We assume that return pointers never criss-cross, so A must
4170 // belong to the child set of A.return, and B must belong to the child
4171 // set of B.return.
4172 a = parentA;
4173 b = parentB;
4174 } else {
4175 // The return pointers point to the same fiber. We'll have to use the
4176 // default, slow path: scan the child sets of each parent alternate to see
4177 // which child belongs to which set.
4178 //
4179 // Search parent A's child set
4180 var didFindChild = false;
4181 var _child = parentA.child;
4182 while (_child) {
4183 if (_child === a) {
4184 didFindChild = true;
4185 a = parentA;
4186 b = parentB;
4187 break;
4188 }
4189 if (_child === b) {
4190 didFindChild = true;
4191 b = parentA;
4192 a = parentB;
4193 break;
4194 }
4195 _child = _child.sibling;
4196 }
4197 if (!didFindChild) {
4198 // Search parent B's child set
4199 _child = parentB.child;
4200 while (_child) {
4201 if (_child === a) {
4202 didFindChild = true;
4203 a = parentB;
4204 b = parentA;
4205 break;
4206 }
4207 if (_child === b) {
4208 didFindChild = true;
4209 b = parentB;
4210 a = parentA;
4211 break;
4212 }
4213 _child = _child.sibling;
4214 }
4215 !didFindChild ? invariant(false, 'Child was not found in either parent set. This indicates a bug in React related to the return pointer. Please file an issue.') : void 0;
4216 }
4217 }
4218
4219 !(a.alternate === b) ? invariant(false, 'Return fibers should always be each others\' alternates. This error is likely caused by a bug in React. Please file an issue.') : void 0;
4220 }
4221 // If the root is not a host container, we're in a disconnected tree. I.e.
4222 // unmounted.
4223 !(a.tag === HostRoot) ? invariant(false, 'Unable to find node on an unmounted component.') : void 0;
4224 if (a.stateNode.current === a) {
4225 // We've determined that A is the current branch.
4226 return fiber;
4227 }
4228 // Otherwise B has to be current branch.
4229 return alternate;
4230}
4231
4232function findCurrentHostFiber(parent) {
4233 var currentParent = findCurrentFiberUsingSlowPath(parent);
4234 if (!currentParent) {
4235 return null;
4236 }
4237
4238 // Next we'll drill down this component to find the first HostComponent/Text.
4239 var node = currentParent;
4240 while (true) {
4241 if (node.tag === HostComponent || node.tag === HostText) {
4242 return node;
4243 } else if (node.child) {
4244 node.child.return = node;
4245 node = node.child;
4246 continue;
4247 }
4248 if (node === currentParent) {
4249 return null;
4250 }
4251 while (!node.sibling) {
4252 if (!node.return || node.return === currentParent) {
4253 return null;
4254 }
4255 node = node.return;
4256 }
4257 node.sibling.return = node.return;
4258 node = node.sibling;
4259 }
4260 // Flow needs the return null here, but ESLint complains about it.
4261 // eslint-disable-next-line no-unreachable
4262 return null;
4263}
4264
4265function findCurrentHostFiberWithNoPortals(parent) {
4266 var currentParent = findCurrentFiberUsingSlowPath(parent);
4267 if (!currentParent) {
4268 return null;
4269 }
4270
4271 // Next we'll drill down this component to find the first HostComponent/Text.
4272 var node = currentParent;
4273 while (true) {
4274 if (node.tag === HostComponent || node.tag === HostText) {
4275 return node;
4276 } else if (node.child && node.tag !== HostPortal) {
4277 node.child.return = node;
4278 node = node.child;
4279 continue;
4280 }
4281 if (node === currentParent) {
4282 return null;
4283 }
4284 while (!node.sibling) {
4285 if (!node.return || node.return === currentParent) {
4286 return null;
4287 }
4288 node = node.return;
4289 }
4290 node.sibling.return = node.return;
4291 node = node.sibling;
4292 }
4293 // Flow needs the return null here, but ESLint complains about it.
4294 // eslint-disable-next-line no-unreachable
4295 return null;
4296}
4297
4298function addEventBubbleListener(element, eventType, listener) {
4299 element.addEventListener(eventType, listener, false);
4300}
4301
4302function addEventCaptureListener(element, eventType, listener) {
4303 element.addEventListener(eventType, listener, true);
4304}
4305
4306/**
4307 * @interface Event
4308 * @see http://www.w3.org/TR/css3-animations/#AnimationEvent-interface
4309 * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent
4310 */
4311var SyntheticAnimationEvent = SyntheticEvent.extend({
4312 animationName: null,
4313 elapsedTime: null,
4314 pseudoElement: null
4315});
4316
4317/**
4318 * @interface Event
4319 * @see http://www.w3.org/TR/clipboard-apis/
4320 */
4321var SyntheticClipboardEvent = SyntheticEvent.extend({
4322 clipboardData: function (event) {
4323 return 'clipboardData' in event ? event.clipboardData : window.clipboardData;
4324 }
4325});
4326
4327/**
4328 * @interface FocusEvent
4329 * @see http://www.w3.org/TR/DOM-Level-3-Events/
4330 */
4331var SyntheticFocusEvent = SyntheticUIEvent.extend({
4332 relatedTarget: null
4333});
4334
4335/**
4336 * `charCode` represents the actual "character code" and is safe to use with
4337 * `String.fromCharCode`. As such, only keys that correspond to printable
4338 * characters produce a valid `charCode`, the only exception to this is Enter.
4339 * The Tab-key is considered non-printable and does not have a `charCode`,
4340 * presumably because it does not produce a tab-character in browsers.
4341 *
4342 * @param {object} nativeEvent Native browser event.
4343 * @return {number} Normalized `charCode` property.
4344 */
4345function getEventCharCode(nativeEvent) {
4346 var charCode = void 0;
4347 var keyCode = nativeEvent.keyCode;
4348
4349 if ('charCode' in nativeEvent) {
4350 charCode = nativeEvent.charCode;
4351
4352 // FF does not set `charCode` for the Enter-key, check against `keyCode`.
4353 if (charCode === 0 && keyCode === 13) {
4354 charCode = 13;
4355 }
4356 } else {
4357 // IE8 does not implement `charCode`, but `keyCode` has the correct value.
4358 charCode = keyCode;
4359 }
4360
4361 // IE and Edge (on Windows) and Chrome / Safari (on Windows and Linux)
4362 // report Enter as charCode 10 when ctrl is pressed.
4363 if (charCode === 10) {
4364 charCode = 13;
4365 }
4366
4367 // Some non-printable keys are reported in `charCode`/`keyCode`, discard them.
4368 // Must not discard the (non-)printable Enter-key.
4369 if (charCode >= 32 || charCode === 13) {
4370 return charCode;
4371 }
4372
4373 return 0;
4374}
4375
4376/**
4377 * Normalization of deprecated HTML5 `key` values
4378 * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Key_names
4379 */
4380var normalizeKey = {
4381 Esc: 'Escape',
4382 Spacebar: ' ',
4383 Left: 'ArrowLeft',
4384 Up: 'ArrowUp',
4385 Right: 'ArrowRight',
4386 Down: 'ArrowDown',
4387 Del: 'Delete',
4388 Win: 'OS',
4389 Menu: 'ContextMenu',
4390 Apps: 'ContextMenu',
4391 Scroll: 'ScrollLock',
4392 MozPrintableKey: 'Unidentified'
4393};
4394
4395/**
4396 * Translation from legacy `keyCode` to HTML5 `key`
4397 * Only special keys supported, all others depend on keyboard layout or browser
4398 * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Key_names
4399 */
4400var translateToKey = {
4401 '8': 'Backspace',
4402 '9': 'Tab',
4403 '12': 'Clear',
4404 '13': 'Enter',
4405 '16': 'Shift',
4406 '17': 'Control',
4407 '18': 'Alt',
4408 '19': 'Pause',
4409 '20': 'CapsLock',
4410 '27': 'Escape',
4411 '32': ' ',
4412 '33': 'PageUp',
4413 '34': 'PageDown',
4414 '35': 'End',
4415 '36': 'Home',
4416 '37': 'ArrowLeft',
4417 '38': 'ArrowUp',
4418 '39': 'ArrowRight',
4419 '40': 'ArrowDown',
4420 '45': 'Insert',
4421 '46': 'Delete',
4422 '112': 'F1',
4423 '113': 'F2',
4424 '114': 'F3',
4425 '115': 'F4',
4426 '116': 'F5',
4427 '117': 'F6',
4428 '118': 'F7',
4429 '119': 'F8',
4430 '120': 'F9',
4431 '121': 'F10',
4432 '122': 'F11',
4433 '123': 'F12',
4434 '144': 'NumLock',
4435 '145': 'ScrollLock',
4436 '224': 'Meta'
4437};
4438
4439/**
4440 * @param {object} nativeEvent Native browser event.
4441 * @return {string} Normalized `key` property.
4442 */
4443function getEventKey(nativeEvent) {
4444 if (nativeEvent.key) {
4445 // Normalize inconsistent values reported by browsers due to
4446 // implementations of a working draft specification.
4447
4448 // FireFox implements `key` but returns `MozPrintableKey` for all
4449 // printable characters (normalized to `Unidentified`), ignore it.
4450 var key = normalizeKey[nativeEvent.key] || nativeEvent.key;
4451 if (key !== 'Unidentified') {
4452 return key;
4453 }
4454 }
4455
4456 // Browser does not implement `key`, polyfill as much of it as we can.
4457 if (nativeEvent.type === 'keypress') {
4458 var charCode = getEventCharCode(nativeEvent);
4459
4460 // The enter-key is technically both printable and non-printable and can
4461 // thus be captured by `keypress`, no other non-printable key should.
4462 return charCode === 13 ? 'Enter' : String.fromCharCode(charCode);
4463 }
4464 if (nativeEvent.type === 'keydown' || nativeEvent.type === 'keyup') {
4465 // While user keyboard layout determines the actual meaning of each
4466 // `keyCode` value, almost all function keys have a universal value.
4467 return translateToKey[nativeEvent.keyCode] || 'Unidentified';
4468 }
4469 return '';
4470}
4471
4472/**
4473 * @interface KeyboardEvent
4474 * @see http://www.w3.org/TR/DOM-Level-3-Events/
4475 */
4476var SyntheticKeyboardEvent = SyntheticUIEvent.extend({
4477 key: getEventKey,
4478 location: null,
4479 ctrlKey: null,
4480 shiftKey: null,
4481 altKey: null,
4482 metaKey: null,
4483 repeat: null,
4484 locale: null,
4485 getModifierState: getEventModifierState,
4486 // Legacy Interface
4487 charCode: function (event) {
4488 // `charCode` is the result of a KeyPress event and represents the value of
4489 // the actual printable character.
4490
4491 // KeyPress is deprecated, but its replacement is not yet final and not
4492 // implemented in any major browser. Only KeyPress has charCode.
4493 if (event.type === 'keypress') {
4494 return getEventCharCode(event);
4495 }
4496 return 0;
4497 },
4498 keyCode: function (event) {
4499 // `keyCode` is the result of a KeyDown/Up event and represents the value of
4500 // physical keyboard key.
4501
4502 // The actual meaning of the value depends on the users' keyboard layout
4503 // which cannot be detected. Assuming that it is a US keyboard layout
4504 // provides a surprisingly accurate mapping for US and European users.
4505 // Due to this, it is left to the user to implement at this time.
4506 if (event.type === 'keydown' || event.type === 'keyup') {
4507 return event.keyCode;
4508 }
4509 return 0;
4510 },
4511 which: function (event) {
4512 // `which` is an alias for either `keyCode` or `charCode` depending on the
4513 // type of the event.
4514 if (event.type === 'keypress') {
4515 return getEventCharCode(event);
4516 }
4517 if (event.type === 'keydown' || event.type === 'keyup') {
4518 return event.keyCode;
4519 }
4520 return 0;
4521 }
4522});
4523
4524/**
4525 * @interface DragEvent
4526 * @see http://www.w3.org/TR/DOM-Level-3-Events/
4527 */
4528var SyntheticDragEvent = SyntheticMouseEvent.extend({
4529 dataTransfer: null
4530});
4531
4532/**
4533 * @interface TouchEvent
4534 * @see http://www.w3.org/TR/touch-events/
4535 */
4536var SyntheticTouchEvent = SyntheticUIEvent.extend({
4537 touches: null,
4538 targetTouches: null,
4539 changedTouches: null,
4540 altKey: null,
4541 metaKey: null,
4542 ctrlKey: null,
4543 shiftKey: null,
4544 getModifierState: getEventModifierState
4545});
4546
4547/**
4548 * @interface Event
4549 * @see http://www.w3.org/TR/2009/WD-css3-transitions-20090320/#transition-events-
4550 * @see https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent
4551 */
4552var SyntheticTransitionEvent = SyntheticEvent.extend({
4553 propertyName: null,
4554 elapsedTime: null,
4555 pseudoElement: null
4556});
4557
4558/**
4559 * @interface WheelEvent
4560 * @see http://www.w3.org/TR/DOM-Level-3-Events/
4561 */
4562var SyntheticWheelEvent = SyntheticMouseEvent.extend({
4563 deltaX: function (event) {
4564 return 'deltaX' in event ? event.deltaX : // Fallback to `wheelDeltaX` for Webkit and normalize (right is positive).
4565 'wheelDeltaX' in event ? -event.wheelDeltaX : 0;
4566 },
4567 deltaY: function (event) {
4568 return 'deltaY' in event ? event.deltaY : // Fallback to `wheelDeltaY` for Webkit and normalize (down is positive).
4569 'wheelDeltaY' in event ? -event.wheelDeltaY : // Fallback to `wheelDelta` for IE<9 and normalize (down is positive).
4570 'wheelDelta' in event ? -event.wheelDelta : 0;
4571 },
4572
4573 deltaZ: null,
4574
4575 // Browsers without "deltaMode" is reporting in raw wheel delta where one
4576 // notch on the scroll is always +/- 120, roughly equivalent to pixels.
4577 // A good approximation of DOM_DELTA_LINE (1) is 5% of viewport size or
4578 // ~40 pixels, for DOM_DELTA_SCREEN (2) it is 87.5% of viewport size.
4579 deltaMode: null
4580});
4581
4582/**
4583 * Turns
4584 * ['abort', ...]
4585 * into
4586 * eventTypes = {
4587 * 'abort': {
4588 * phasedRegistrationNames: {
4589 * bubbled: 'onAbort',
4590 * captured: 'onAbortCapture',
4591 * },
4592 * dependencies: [TOP_ABORT],
4593 * },
4594 * ...
4595 * };
4596 * topLevelEventsToDispatchConfig = new Map([
4597 * [TOP_ABORT, { sameConfig }],
4598 * ]);
4599 */
4600
4601var interactiveEventTypeNames = [[TOP_BLUR, 'blur'], [TOP_CANCEL, 'cancel'], [TOP_CLICK, 'click'], [TOP_CLOSE, 'close'], [TOP_CONTEXT_MENU, 'contextMenu'], [TOP_COPY, 'copy'], [TOP_CUT, 'cut'], [TOP_AUX_CLICK, 'auxClick'], [TOP_DOUBLE_CLICK, 'doubleClick'], [TOP_DRAG_END, 'dragEnd'], [TOP_DRAG_START, 'dragStart'], [TOP_DROP, 'drop'], [TOP_FOCUS, 'focus'], [TOP_INPUT, 'input'], [TOP_INVALID, 'invalid'], [TOP_KEY_DOWN, 'keyDown'], [TOP_KEY_PRESS, 'keyPress'], [TOP_KEY_UP, 'keyUp'], [TOP_MOUSE_DOWN, 'mouseDown'], [TOP_MOUSE_UP, 'mouseUp'], [TOP_PASTE, 'paste'], [TOP_PAUSE, 'pause'], [TOP_PLAY, 'play'], [TOP_POINTER_CANCEL, 'pointerCancel'], [TOP_POINTER_DOWN, 'pointerDown'], [TOP_POINTER_UP, 'pointerUp'], [TOP_RATE_CHANGE, 'rateChange'], [TOP_RESET, 'reset'], [TOP_SEEKED, 'seeked'], [TOP_SUBMIT, 'submit'], [TOP_TOUCH_CANCEL, 'touchCancel'], [TOP_TOUCH_END, 'touchEnd'], [TOP_TOUCH_START, 'touchStart'], [TOP_VOLUME_CHANGE, 'volumeChange']];
4602var nonInteractiveEventTypeNames = [[TOP_ABORT, 'abort'], [TOP_ANIMATION_END, 'animationEnd'], [TOP_ANIMATION_ITERATION, 'animationIteration'], [TOP_ANIMATION_START, 'animationStart'], [TOP_CAN_PLAY, 'canPlay'], [TOP_CAN_PLAY_THROUGH, 'canPlayThrough'], [TOP_DRAG, 'drag'], [TOP_DRAG_ENTER, 'dragEnter'], [TOP_DRAG_EXIT, 'dragExit'], [TOP_DRAG_LEAVE, 'dragLeave'], [TOP_DRAG_OVER, 'dragOver'], [TOP_DURATION_CHANGE, 'durationChange'], [TOP_EMPTIED, 'emptied'], [TOP_ENCRYPTED, 'encrypted'], [TOP_ENDED, 'ended'], [TOP_ERROR, 'error'], [TOP_GOT_POINTER_CAPTURE, 'gotPointerCapture'], [TOP_LOAD, 'load'], [TOP_LOADED_DATA, 'loadedData'], [TOP_LOADED_METADATA, 'loadedMetadata'], [TOP_LOAD_START, 'loadStart'], [TOP_LOST_POINTER_CAPTURE, 'lostPointerCapture'], [TOP_MOUSE_MOVE, 'mouseMove'], [TOP_MOUSE_OUT, 'mouseOut'], [TOP_MOUSE_OVER, 'mouseOver'], [TOP_PLAYING, 'playing'], [TOP_POINTER_MOVE, 'pointerMove'], [TOP_POINTER_OUT, 'pointerOut'], [TOP_POINTER_OVER, 'pointerOver'], [TOP_PROGRESS, 'progress'], [TOP_SCROLL, 'scroll'], [TOP_SEEKING, 'seeking'], [TOP_STALLED, 'stalled'], [TOP_SUSPEND, 'suspend'], [TOP_TIME_UPDATE, 'timeUpdate'], [TOP_TOGGLE, 'toggle'], [TOP_TOUCH_MOVE, 'touchMove'], [TOP_TRANSITION_END, 'transitionEnd'], [TOP_WAITING, 'waiting'], [TOP_WHEEL, 'wheel']];
4603
4604var eventTypes$4 = {};
4605var topLevelEventsToDispatchConfig = {};
4606
4607function addEventTypeNameToConfig(_ref, isInteractive) {
4608 var topEvent = _ref[0],
4609 event = _ref[1];
4610
4611 var capitalizedEvent = event[0].toUpperCase() + event.slice(1);
4612 var onEvent = 'on' + capitalizedEvent;
4613
4614 var type = {
4615 phasedRegistrationNames: {
4616 bubbled: onEvent,
4617 captured: onEvent + 'Capture'
4618 },
4619 dependencies: [topEvent],
4620 isInteractive: isInteractive
4621 };
4622 eventTypes$4[event] = type;
4623 topLevelEventsToDispatchConfig[topEvent] = type;
4624}
4625
4626interactiveEventTypeNames.forEach(function (eventTuple) {
4627 addEventTypeNameToConfig(eventTuple, true);
4628});
4629nonInteractiveEventTypeNames.forEach(function (eventTuple) {
4630 addEventTypeNameToConfig(eventTuple, false);
4631});
4632
4633// Only used in DEV for exhaustiveness validation.
4634var knownHTMLTopLevelTypes = [TOP_ABORT, TOP_CANCEL, TOP_CAN_PLAY, TOP_CAN_PLAY_THROUGH, TOP_CLOSE, TOP_DURATION_CHANGE, TOP_EMPTIED, TOP_ENCRYPTED, TOP_ENDED, TOP_ERROR, TOP_INPUT, TOP_INVALID, TOP_LOAD, TOP_LOADED_DATA, TOP_LOADED_METADATA, TOP_LOAD_START, TOP_PAUSE, TOP_PLAY, TOP_PLAYING, TOP_PROGRESS, TOP_RATE_CHANGE, TOP_RESET, TOP_SEEKED, TOP_SEEKING, TOP_STALLED, TOP_SUBMIT, TOP_SUSPEND, TOP_TIME_UPDATE, TOP_TOGGLE, TOP_VOLUME_CHANGE, TOP_WAITING];
4635
4636var SimpleEventPlugin = {
4637 eventTypes: eventTypes$4,
4638
4639 isInteractiveTopLevelEventType: function (topLevelType) {
4640 var config = topLevelEventsToDispatchConfig[topLevelType];
4641 return config !== undefined && config.isInteractive === true;
4642 },
4643
4644
4645 extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
4646 var dispatchConfig = topLevelEventsToDispatchConfig[topLevelType];
4647 if (!dispatchConfig) {
4648 return null;
4649 }
4650 var EventConstructor = void 0;
4651 switch (topLevelType) {
4652 case TOP_KEY_PRESS:
4653 // Firefox creates a keypress event for function keys too. This removes
4654 // the unwanted keypress events. Enter is however both printable and
4655 // non-printable. One would expect Tab to be as well (but it isn't).
4656 if (getEventCharCode(nativeEvent) === 0) {
4657 return null;
4658 }
4659 /* falls through */
4660 case TOP_KEY_DOWN:
4661 case TOP_KEY_UP:
4662 EventConstructor = SyntheticKeyboardEvent;
4663 break;
4664 case TOP_BLUR:
4665 case TOP_FOCUS:
4666 EventConstructor = SyntheticFocusEvent;
4667 break;
4668 case TOP_CLICK:
4669 // Firefox creates a click event on right mouse clicks. This removes the
4670 // unwanted click events.
4671 if (nativeEvent.button === 2) {
4672 return null;
4673 }
4674 /* falls through */
4675 case TOP_AUX_CLICK:
4676 case TOP_DOUBLE_CLICK:
4677 case TOP_MOUSE_DOWN:
4678 case TOP_MOUSE_MOVE:
4679 case TOP_MOUSE_UP:
4680 // TODO: Disabled elements should not respond to mouse events
4681 /* falls through */
4682 case TOP_MOUSE_OUT:
4683 case TOP_MOUSE_OVER:
4684 case TOP_CONTEXT_MENU:
4685 EventConstructor = SyntheticMouseEvent;
4686 break;
4687 case TOP_DRAG:
4688 case TOP_DRAG_END:
4689 case TOP_DRAG_ENTER:
4690 case TOP_DRAG_EXIT:
4691 case TOP_DRAG_LEAVE:
4692 case TOP_DRAG_OVER:
4693 case TOP_DRAG_START:
4694 case TOP_DROP:
4695 EventConstructor = SyntheticDragEvent;
4696 break;
4697 case TOP_TOUCH_CANCEL:
4698 case TOP_TOUCH_END:
4699 case TOP_TOUCH_MOVE:
4700 case TOP_TOUCH_START:
4701 EventConstructor = SyntheticTouchEvent;
4702 break;
4703 case TOP_ANIMATION_END:
4704 case TOP_ANIMATION_ITERATION:
4705 case TOP_ANIMATION_START:
4706 EventConstructor = SyntheticAnimationEvent;
4707 break;
4708 case TOP_TRANSITION_END:
4709 EventConstructor = SyntheticTransitionEvent;
4710 break;
4711 case TOP_SCROLL:
4712 EventConstructor = SyntheticUIEvent;
4713 break;
4714 case TOP_WHEEL:
4715 EventConstructor = SyntheticWheelEvent;
4716 break;
4717 case TOP_COPY:
4718 case TOP_CUT:
4719 case TOP_PASTE:
4720 EventConstructor = SyntheticClipboardEvent;
4721 break;
4722 case TOP_GOT_POINTER_CAPTURE:
4723 case TOP_LOST_POINTER_CAPTURE:
4724 case TOP_POINTER_CANCEL:
4725 case TOP_POINTER_DOWN:
4726 case TOP_POINTER_MOVE:
4727 case TOP_POINTER_OUT:
4728 case TOP_POINTER_OVER:
4729 case TOP_POINTER_UP:
4730 EventConstructor = SyntheticPointerEvent;
4731 break;
4732 default:
4733 {
4734 if (knownHTMLTopLevelTypes.indexOf(topLevelType) === -1) {
4735 warningWithoutStack$1(false, 'SimpleEventPlugin: Unhandled event type, `%s`. This warning ' + 'is likely caused by a bug in React. Please file an issue.', topLevelType);
4736 }
4737 }
4738 // HTML Events
4739 // @see http://www.w3.org/TR/html5/index.html#events-0
4740 EventConstructor = SyntheticEvent;
4741 break;
4742 }
4743 var event = EventConstructor.getPooled(dispatchConfig, targetInst, nativeEvent, nativeEventTarget);
4744 accumulateTwoPhaseDispatches(event);
4745 return event;
4746 }
4747};
4748
4749var isInteractiveTopLevelEventType = SimpleEventPlugin.isInteractiveTopLevelEventType;
4750
4751
4752var CALLBACK_BOOKKEEPING_POOL_SIZE = 10;
4753var callbackBookkeepingPool = [];
4754
4755/**
4756 * Find the deepest React component completely containing the root of the
4757 * passed-in instance (for use when entire React trees are nested within each
4758 * other). If React trees are not nested, returns null.
4759 */
4760function findRootContainerNode(inst) {
4761 // TODO: It may be a good idea to cache this to prevent unnecessary DOM
4762 // traversal, but caching is difficult to do correctly without using a
4763 // mutation observer to listen for all DOM changes.
4764 while (inst.return) {
4765 inst = inst.return;
4766 }
4767 if (inst.tag !== HostRoot) {
4768 // This can happen if we're in a detached tree.
4769 return null;
4770 }
4771 return inst.stateNode.containerInfo;
4772}
4773
4774// Used to store ancestor hierarchy in top level callback
4775function getTopLevelCallbackBookKeeping(topLevelType, nativeEvent, targetInst) {
4776 if (callbackBookkeepingPool.length) {
4777 var instance = callbackBookkeepingPool.pop();
4778 instance.topLevelType = topLevelType;
4779 instance.nativeEvent = nativeEvent;
4780 instance.targetInst = targetInst;
4781 return instance;
4782 }
4783 return {
4784 topLevelType: topLevelType,
4785 nativeEvent: nativeEvent,
4786 targetInst: targetInst,
4787 ancestors: []
4788 };
4789}
4790
4791function releaseTopLevelCallbackBookKeeping(instance) {
4792 instance.topLevelType = null;
4793 instance.nativeEvent = null;
4794 instance.targetInst = null;
4795 instance.ancestors.length = 0;
4796 if (callbackBookkeepingPool.length < CALLBACK_BOOKKEEPING_POOL_SIZE) {
4797 callbackBookkeepingPool.push(instance);
4798 }
4799}
4800
4801function handleTopLevel(bookKeeping) {
4802 var targetInst = bookKeeping.targetInst;
4803
4804 // Loop through the hierarchy, in case there's any nested components.
4805 // It's important that we build the array of ancestors before calling any
4806 // event handlers, because event handlers can modify the DOM, leading to
4807 // inconsistencies with ReactMount's node cache. See #1105.
4808 var ancestor = targetInst;
4809 do {
4810 if (!ancestor) {
4811 bookKeeping.ancestors.push(ancestor);
4812 break;
4813 }
4814 var root = findRootContainerNode(ancestor);
4815 if (!root) {
4816 break;
4817 }
4818 bookKeeping.ancestors.push(ancestor);
4819 ancestor = getClosestInstanceFromNode(root);
4820 } while (ancestor);
4821
4822 for (var i = 0; i < bookKeeping.ancestors.length; i++) {
4823 targetInst = bookKeeping.ancestors[i];
4824 runExtractedEventsInBatch(bookKeeping.topLevelType, targetInst, bookKeeping.nativeEvent, getEventTarget(bookKeeping.nativeEvent));
4825 }
4826}
4827
4828// TODO: can we stop exporting these?
4829var _enabled = true;
4830
4831function setEnabled(enabled) {
4832 _enabled = !!enabled;
4833}
4834
4835function isEnabled() {
4836 return _enabled;
4837}
4838
4839/**
4840 * Traps top-level events by using event bubbling.
4841 *
4842 * @param {number} topLevelType Number from `TopLevelEventTypes`.
4843 * @param {object} element Element on which to attach listener.
4844 * @return {?object} An object with a remove function which will forcefully
4845 * remove the listener.
4846 * @internal
4847 */
4848function trapBubbledEvent(topLevelType, element) {
4849 if (!element) {
4850 return null;
4851 }
4852 var dispatch = isInteractiveTopLevelEventType(topLevelType) ? dispatchInteractiveEvent : dispatchEvent;
4853
4854 addEventBubbleListener(element, getRawEventName(topLevelType),
4855 // Check if interactive and wrap in interactiveUpdates
4856 dispatch.bind(null, topLevelType));
4857}
4858
4859/**
4860 * Traps a top-level event by using event capturing.
4861 *
4862 * @param {number} topLevelType Number from `TopLevelEventTypes`.
4863 * @param {object} element Element on which to attach listener.
4864 * @return {?object} An object with a remove function which will forcefully
4865 * remove the listener.
4866 * @internal
4867 */
4868function trapCapturedEvent(topLevelType, element) {
4869 if (!element) {
4870 return null;
4871 }
4872 var dispatch = isInteractiveTopLevelEventType(topLevelType) ? dispatchInteractiveEvent : dispatchEvent;
4873
4874 addEventCaptureListener(element, getRawEventName(topLevelType),
4875 // Check if interactive and wrap in interactiveUpdates
4876 dispatch.bind(null, topLevelType));
4877}
4878
4879function dispatchInteractiveEvent(topLevelType, nativeEvent) {
4880 interactiveUpdates(dispatchEvent, topLevelType, nativeEvent);
4881}
4882
4883function dispatchEvent(topLevelType, nativeEvent) {
4884 if (!_enabled) {
4885 return;
4886 }
4887
4888 var nativeEventTarget = getEventTarget(nativeEvent);
4889 var targetInst = getClosestInstanceFromNode(nativeEventTarget);
4890 if (targetInst !== null && typeof targetInst.tag === 'number' && !isFiberMounted(targetInst)) {
4891 // If we get an event (ex: img onload) before committing that
4892 // component's mount, ignore it for now (that is, treat it as if it was an
4893 // event on a non-React tree). We might also consider queueing events and
4894 // dispatching them after the mount.
4895 targetInst = null;
4896 }
4897
4898 var bookKeeping = getTopLevelCallbackBookKeeping(topLevelType, nativeEvent, targetInst);
4899
4900 try {
4901 // Event queue being processed in the same cycle allows
4902 // `preventDefault`.
4903 batchedUpdates(handleTopLevel, bookKeeping);
4904 } finally {
4905 releaseTopLevelCallbackBookKeeping(bookKeeping);
4906 }
4907}
4908
4909/**
4910 * Summary of `ReactBrowserEventEmitter` event handling:
4911 *
4912 * - Top-level delegation is used to trap most native browser events. This
4913 * may only occur in the main thread and is the responsibility of
4914 * ReactDOMEventListener, which is injected and can therefore support
4915 * pluggable event sources. This is the only work that occurs in the main
4916 * thread.
4917 *
4918 * - We normalize and de-duplicate events to account for browser quirks. This
4919 * may be done in the worker thread.
4920 *
4921 * - Forward these native events (with the associated top-level type used to
4922 * trap it) to `EventPluginHub`, which in turn will ask plugins if they want
4923 * to extract any synthetic events.
4924 *
4925 * - The `EventPluginHub` will then process each event by annotating them with
4926 * "dispatches", a sequence of listeners and IDs that care about that event.
4927 *
4928 * - The `EventPluginHub` then dispatches the events.
4929 *
4930 * Overview of React and the event system:
4931 *
4932 * +------------+ .
4933 * | DOM | .
4934 * +------------+ .
4935 * | .
4936 * v .
4937 * +------------+ .
4938 * | ReactEvent | .
4939 * | Listener | .
4940 * +------------+ . +-----------+
4941 * | . +--------+|SimpleEvent|
4942 * | . | |Plugin |
4943 * +-----|------+ . v +-----------+
4944 * | | | . +--------------+ +------------+
4945 * | +-----------.--->|EventPluginHub| | Event |
4946 * | | . | | +-----------+ | Propagators|
4947 * | ReactEvent | . | | |TapEvent | |------------|
4948 * | Emitter | . | |<---+|Plugin | |other plugin|
4949 * | | . | | +-----------+ | utilities |
4950 * | +-----------.--->| | +------------+
4951 * | | | . +--------------+
4952 * +-----|------+ . ^ +-----------+
4953 * | . | |Enter/Leave|
4954 * + . +-------+|Plugin |
4955 * +-------------+ . +-----------+
4956 * | application | .
4957 * |-------------| .
4958 * | | .
4959 * | | .
4960 * +-------------+ .
4961 * .
4962 * React Core . General Purpose Event Plugin System
4963 */
4964
4965var alreadyListeningTo = {};
4966var reactTopListenersCounter = 0;
4967
4968/**
4969 * To ensure no conflicts with other potential React instances on the page
4970 */
4971var topListenersIDKey = '_reactListenersID' + ('' + Math.random()).slice(2);
4972
4973function getListeningForDocument(mountAt) {
4974 // In IE8, `mountAt` is a host object and doesn't have `hasOwnProperty`
4975 // directly.
4976 if (!Object.prototype.hasOwnProperty.call(mountAt, topListenersIDKey)) {
4977 mountAt[topListenersIDKey] = reactTopListenersCounter++;
4978 alreadyListeningTo[mountAt[topListenersIDKey]] = {};
4979 }
4980 return alreadyListeningTo[mountAt[topListenersIDKey]];
4981}
4982
4983/**
4984 * We listen for bubbled touch events on the document object.
4985 *
4986 * Firefox v8.01 (and possibly others) exhibited strange behavior when
4987 * mounting `onmousemove` events at some node that was not the document
4988 * element. The symptoms were that if your mouse is not moving over something
4989 * contained within that mount point (for example on the background) the
4990 * top-level listeners for `onmousemove` won't be called. However, if you
4991 * register the `mousemove` on the document object, then it will of course
4992 * catch all `mousemove`s. This along with iOS quirks, justifies restricting
4993 * top-level listeners to the document object only, at least for these
4994 * movement types of events and possibly all events.
4995 *
4996 * @see http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
4997 *
4998 * Also, `keyup`/`keypress`/`keydown` do not bubble to the window on IE, but
4999 * they bubble to document.
5000 *
5001 * @param {string} registrationName Name of listener (e.g. `onClick`).
5002 * @param {object} mountAt Container where to mount the listener
5003 */
5004function listenTo(registrationName, mountAt) {
5005 var isListening = getListeningForDocument(mountAt);
5006 var dependencies = registrationNameDependencies[registrationName];
5007
5008 for (var i = 0; i < dependencies.length; i++) {
5009 var dependency = dependencies[i];
5010 if (!(isListening.hasOwnProperty(dependency) && isListening[dependency])) {
5011 switch (dependency) {
5012 case TOP_SCROLL:
5013 trapCapturedEvent(TOP_SCROLL, mountAt);
5014 break;
5015 case TOP_FOCUS:
5016 case TOP_BLUR:
5017 trapCapturedEvent(TOP_FOCUS, mountAt);
5018 trapCapturedEvent(TOP_BLUR, mountAt);
5019 // We set the flag for a single dependency later in this function,
5020 // but this ensures we mark both as attached rather than just one.
5021 isListening[TOP_BLUR] = true;
5022 isListening[TOP_FOCUS] = true;
5023 break;
5024 case TOP_CANCEL:
5025 case TOP_CLOSE:
5026 if (isEventSupported(getRawEventName(dependency))) {
5027 trapCapturedEvent(dependency, mountAt);
5028 }
5029 break;
5030 case TOP_INVALID:
5031 case TOP_SUBMIT:
5032 case TOP_RESET:
5033 // We listen to them on the target DOM elements.
5034 // Some of them bubble so we don't want them to fire twice.
5035 break;
5036 default:
5037 // By default, listen on the top level to all non-media events.
5038 // Media events don't bubble so adding the listener wouldn't do anything.
5039 var isMediaEvent = mediaEventTypes.indexOf(dependency) !== -1;
5040 if (!isMediaEvent) {
5041 trapBubbledEvent(dependency, mountAt);
5042 }
5043 break;
5044 }
5045 isListening[dependency] = true;
5046 }
5047 }
5048}
5049
5050function isListeningToAllDependencies(registrationName, mountAt) {
5051 var isListening = getListeningForDocument(mountAt);
5052 var dependencies = registrationNameDependencies[registrationName];
5053 for (var i = 0; i < dependencies.length; i++) {
5054 var dependency = dependencies[i];
5055 if (!(isListening.hasOwnProperty(dependency) && isListening[dependency])) {
5056 return false;
5057 }
5058 }
5059 return true;
5060}
5061
5062function getActiveElement(doc) {
5063 doc = doc || (typeof document !== 'undefined' ? document : undefined);
5064 if (typeof doc === 'undefined') {
5065 return null;
5066 }
5067 try {
5068 return doc.activeElement || doc.body;
5069 } catch (e) {
5070 return doc.body;
5071 }
5072}
5073
5074/**
5075 * Given any node return the first leaf node without children.
5076 *
5077 * @param {DOMElement|DOMTextNode} node
5078 * @return {DOMElement|DOMTextNode}
5079 */
5080function getLeafNode(node) {
5081 while (node && node.firstChild) {
5082 node = node.firstChild;
5083 }
5084 return node;
5085}
5086
5087/**
5088 * Get the next sibling within a container. This will walk up the
5089 * DOM if a node's siblings have been exhausted.
5090 *
5091 * @param {DOMElement|DOMTextNode} node
5092 * @return {?DOMElement|DOMTextNode}
5093 */
5094function getSiblingNode(node) {
5095 while (node) {
5096 if (node.nextSibling) {
5097 return node.nextSibling;
5098 }
5099 node = node.parentNode;
5100 }
5101}
5102
5103/**
5104 * Get object describing the nodes which contain characters at offset.
5105 *
5106 * @param {DOMElement|DOMTextNode} root
5107 * @param {number} offset
5108 * @return {?object}
5109 */
5110function getNodeForCharacterOffset(root, offset) {
5111 var node = getLeafNode(root);
5112 var nodeStart = 0;
5113 var nodeEnd = 0;
5114
5115 while (node) {
5116 if (node.nodeType === TEXT_NODE) {
5117 nodeEnd = nodeStart + node.textContent.length;
5118
5119 if (nodeStart <= offset && nodeEnd >= offset) {
5120 return {
5121 node: node,
5122 offset: offset - nodeStart
5123 };
5124 }
5125
5126 nodeStart = nodeEnd;
5127 }
5128
5129 node = getLeafNode(getSiblingNode(node));
5130 }
5131}
5132
5133/**
5134 * @param {DOMElement} outerNode
5135 * @return {?object}
5136 */
5137function getOffsets(outerNode) {
5138 var ownerDocument = outerNode.ownerDocument;
5139
5140 var win = ownerDocument && ownerDocument.defaultView || window;
5141 var selection = win.getSelection && win.getSelection();
5142
5143 if (!selection || selection.rangeCount === 0) {
5144 return null;
5145 }
5146
5147 var anchorNode = selection.anchorNode,
5148 anchorOffset = selection.anchorOffset,
5149 focusNode = selection.focusNode,
5150 focusOffset = selection.focusOffset;
5151
5152 // In Firefox, anchorNode and focusNode can be "anonymous divs", e.g. the
5153 // up/down buttons on an <input type="number">. Anonymous divs do not seem to
5154 // expose properties, triggering a "Permission denied error" if any of its
5155 // properties are accessed. The only seemingly possible way to avoid erroring
5156 // is to access a property that typically works for non-anonymous divs and
5157 // catch any error that may otherwise arise. See
5158 // https://bugzilla.mozilla.org/show_bug.cgi?id=208427
5159
5160 try {
5161 /* eslint-disable no-unused-expressions */
5162 anchorNode.nodeType;
5163 focusNode.nodeType;
5164 /* eslint-enable no-unused-expressions */
5165 } catch (e) {
5166 return null;
5167 }
5168
5169 return getModernOffsetsFromPoints(outerNode, anchorNode, anchorOffset, focusNode, focusOffset);
5170}
5171
5172/**
5173 * Returns {start, end} where `start` is the character/codepoint index of
5174 * (anchorNode, anchorOffset) within the textContent of `outerNode`, and
5175 * `end` is the index of (focusNode, focusOffset).
5176 *
5177 * Returns null if you pass in garbage input but we should probably just crash.
5178 *
5179 * Exported only for testing.
5180 */
5181function getModernOffsetsFromPoints(outerNode, anchorNode, anchorOffset, focusNode, focusOffset) {
5182 var length = 0;
5183 var start = -1;
5184 var end = -1;
5185 var indexWithinAnchor = 0;
5186 var indexWithinFocus = 0;
5187 var node = outerNode;
5188 var parentNode = null;
5189
5190 outer: while (true) {
5191 var next = null;
5192
5193 while (true) {
5194 if (node === anchorNode && (anchorOffset === 0 || node.nodeType === TEXT_NODE)) {
5195 start = length + anchorOffset;
5196 }
5197 if (node === focusNode && (focusOffset === 0 || node.nodeType === TEXT_NODE)) {
5198 end = length + focusOffset;
5199 }
5200
5201 if (node.nodeType === TEXT_NODE) {
5202 length += node.nodeValue.length;
5203 }
5204
5205 if ((next = node.firstChild) === null) {
5206 break;
5207 }
5208 // Moving from `node` to its first child `next`.
5209 parentNode = node;
5210 node = next;
5211 }
5212
5213 while (true) {
5214 if (node === outerNode) {
5215 // If `outerNode` has children, this is always the second time visiting
5216 // it. If it has no children, this is still the first loop, and the only
5217 // valid selection is anchorNode and focusNode both equal to this node
5218 // and both offsets 0, in which case we will have handled above.
5219 break outer;
5220 }
5221 if (parentNode === anchorNode && ++indexWithinAnchor === anchorOffset) {
5222 start = length;
5223 }
5224 if (parentNode === focusNode && ++indexWithinFocus === focusOffset) {
5225 end = length;
5226 }
5227 if ((next = node.nextSibling) !== null) {
5228 break;
5229 }
5230 node = parentNode;
5231 parentNode = node.parentNode;
5232 }
5233
5234 // Moving from `node` to its next sibling `next`.
5235 node = next;
5236 }
5237
5238 if (start === -1 || end === -1) {
5239 // This should never happen. (Would happen if the anchor/focus nodes aren't
5240 // actually inside the passed-in node.)
5241 return null;
5242 }
5243
5244 return {
5245 start: start,
5246 end: end
5247 };
5248}
5249
5250/**
5251 * In modern non-IE browsers, we can support both forward and backward
5252 * selections.
5253 *
5254 * Note: IE10+ supports the Selection object, but it does not support
5255 * the `extend` method, which means that even in modern IE, it's not possible
5256 * to programmatically create a backward selection. Thus, for all IE
5257 * versions, we use the old IE API to create our selections.
5258 *
5259 * @param {DOMElement|DOMTextNode} node
5260 * @param {object} offsets
5261 */
5262function setOffsets(node, offsets) {
5263 var doc = node.ownerDocument || document;
5264 var win = doc && doc.defaultView || window;
5265
5266 // Edge fails with "Object expected" in some scenarios.
5267 // (For instance: TinyMCE editor used in a list component that supports pasting to add more,
5268 // fails when pasting 100+ items)
5269 if (!win.getSelection) {
5270 return;
5271 }
5272
5273 var selection = win.getSelection();
5274 var length = node.textContent.length;
5275 var start = Math.min(offsets.start, length);
5276 var end = offsets.end === undefined ? start : Math.min(offsets.end, length);
5277
5278 // IE 11 uses modern selection, but doesn't support the extend method.
5279 // Flip backward selections, so we can set with a single range.
5280 if (!selection.extend && start > end) {
5281 var temp = end;
5282 end = start;
5283 start = temp;
5284 }
5285
5286 var startMarker = getNodeForCharacterOffset(node, start);
5287 var endMarker = getNodeForCharacterOffset(node, end);
5288
5289 if (startMarker && endMarker) {
5290 if (selection.rangeCount === 1 && selection.anchorNode === startMarker.node && selection.anchorOffset === startMarker.offset && selection.focusNode === endMarker.node && selection.focusOffset === endMarker.offset) {
5291 return;
5292 }
5293 var range = doc.createRange();
5294 range.setStart(startMarker.node, startMarker.offset);
5295 selection.removeAllRanges();
5296
5297 if (start > end) {
5298 selection.addRange(range);
5299 selection.extend(endMarker.node, endMarker.offset);
5300 } else {
5301 range.setEnd(endMarker.node, endMarker.offset);
5302 selection.addRange(range);
5303 }
5304 }
5305}
5306
5307function isTextNode(node) {
5308 return node && node.nodeType === TEXT_NODE;
5309}
5310
5311function containsNode(outerNode, innerNode) {
5312 if (!outerNode || !innerNode) {
5313 return false;
5314 } else if (outerNode === innerNode) {
5315 return true;
5316 } else if (isTextNode(outerNode)) {
5317 return false;
5318 } else if (isTextNode(innerNode)) {
5319 return containsNode(outerNode, innerNode.parentNode);
5320 } else if ('contains' in outerNode) {
5321 return outerNode.contains(innerNode);
5322 } else if (outerNode.compareDocumentPosition) {
5323 return !!(outerNode.compareDocumentPosition(innerNode) & 16);
5324 } else {
5325 return false;
5326 }
5327}
5328
5329function isInDocument(node) {
5330 return node && node.ownerDocument && containsNode(node.ownerDocument.documentElement, node);
5331}
5332
5333function getActiveElementDeep() {
5334 var win = window;
5335 var element = getActiveElement();
5336 while (element instanceof win.HTMLIFrameElement) {
5337 // Accessing the contentDocument of a HTMLIframeElement can cause the browser
5338 // to throw, e.g. if it has a cross-origin src attribute
5339 try {
5340 win = element.contentDocument.defaultView;
5341 } catch (e) {
5342 return element;
5343 }
5344 element = getActiveElement(win.document);
5345 }
5346 return element;
5347}
5348
5349/**
5350 * @ReactInputSelection: React input selection module. Based on Selection.js,
5351 * but modified to be suitable for react and has a couple of bug fixes (doesn't
5352 * assume buttons have range selections allowed).
5353 * Input selection module for React.
5354 */
5355
5356/**
5357 * @hasSelectionCapabilities: we get the element types that support selection
5358 * from https://html.spec.whatwg.org/#do-not-apply, looking at `selectionStart`
5359 * and `selectionEnd` rows.
5360 */
5361function hasSelectionCapabilities(elem) {
5362 var nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
5363 return nodeName && (nodeName === 'input' && (elem.type === 'text' || elem.type === 'search' || elem.type === 'tel' || elem.type === 'url' || elem.type === 'password') || nodeName === 'textarea' || elem.contentEditable === 'true');
5364}
5365
5366function getSelectionInformation() {
5367 var focusedElem = getActiveElementDeep();
5368 return {
5369 focusedElem: focusedElem,
5370 selectionRange: hasSelectionCapabilities(focusedElem) ? getSelection$1(focusedElem) : null
5371 };
5372}
5373
5374/**
5375 * @restoreSelection: If any selection information was potentially lost,
5376 * restore it. This is useful when performing operations that could remove dom
5377 * nodes and place them back in, resulting in focus being lost.
5378 */
5379function restoreSelection(priorSelectionInformation) {
5380 var curFocusedElem = getActiveElementDeep();
5381 var priorFocusedElem = priorSelectionInformation.focusedElem;
5382 var priorSelectionRange = priorSelectionInformation.selectionRange;
5383 if (curFocusedElem !== priorFocusedElem && isInDocument(priorFocusedElem)) {
5384 if (priorSelectionRange !== null && hasSelectionCapabilities(priorFocusedElem)) {
5385 setSelection(priorFocusedElem, priorSelectionRange);
5386 }
5387
5388 // Focusing a node can change the scroll position, which is undesirable
5389 var ancestors = [];
5390 var ancestor = priorFocusedElem;
5391 while (ancestor = ancestor.parentNode) {
5392 if (ancestor.nodeType === ELEMENT_NODE) {
5393 ancestors.push({
5394 element: ancestor,
5395 left: ancestor.scrollLeft,
5396 top: ancestor.scrollTop
5397 });
5398 }
5399 }
5400
5401 if (typeof priorFocusedElem.focus === 'function') {
5402 priorFocusedElem.focus();
5403 }
5404
5405 for (var i = 0; i < ancestors.length; i++) {
5406 var info = ancestors[i];
5407 info.element.scrollLeft = info.left;
5408 info.element.scrollTop = info.top;
5409 }
5410 }
5411}
5412
5413/**
5414 * @getSelection: Gets the selection bounds of a focused textarea, input or
5415 * contentEditable node.
5416 * -@input: Look up selection bounds of this input
5417 * -@return {start: selectionStart, end: selectionEnd}
5418 */
5419function getSelection$1(input) {
5420 var selection = void 0;
5421
5422 if ('selectionStart' in input) {
5423 // Modern browser with input or textarea.
5424 selection = {
5425 start: input.selectionStart,
5426 end: input.selectionEnd
5427 };
5428 } else {
5429 // Content editable or old IE textarea.
5430 selection = getOffsets(input);
5431 }
5432
5433 return selection || { start: 0, end: 0 };
5434}
5435
5436/**
5437 * @setSelection: Sets the selection bounds of a textarea or input and focuses
5438 * the input.
5439 * -@input Set selection bounds of this input or textarea
5440 * -@offsets Object of same form that is returned from get*
5441 */
5442function setSelection(input, offsets) {
5443 var start = offsets.start,
5444 end = offsets.end;
5445
5446 if (end === undefined) {
5447 end = start;
5448 }
5449
5450 if ('selectionStart' in input) {
5451 input.selectionStart = start;
5452 input.selectionEnd = Math.min(end, input.value.length);
5453 } else {
5454 setOffsets(input, offsets);
5455 }
5456}
5457
5458var skipSelectionChangeEvent = canUseDOM && 'documentMode' in document && document.documentMode <= 11;
5459
5460var eventTypes$3 = {
5461 select: {
5462 phasedRegistrationNames: {
5463 bubbled: 'onSelect',
5464 captured: 'onSelectCapture'
5465 },
5466 dependencies: [TOP_BLUR, TOP_CONTEXT_MENU, TOP_DRAG_END, TOP_FOCUS, TOP_KEY_DOWN, TOP_KEY_UP, TOP_MOUSE_DOWN, TOP_MOUSE_UP, TOP_SELECTION_CHANGE]
5467 }
5468};
5469
5470var activeElement$1 = null;
5471var activeElementInst$1 = null;
5472var lastSelection = null;
5473var mouseDown = false;
5474
5475/**
5476 * Get an object which is a unique representation of the current selection.
5477 *
5478 * The return value will not be consistent across nodes or browsers, but
5479 * two identical selections on the same node will return identical objects.
5480 *
5481 * @param {DOMElement} node
5482 * @return {object}
5483 */
5484function getSelection(node) {
5485 if ('selectionStart' in node && hasSelectionCapabilities(node)) {
5486 return {
5487 start: node.selectionStart,
5488 end: node.selectionEnd
5489 };
5490 } else {
5491 var win = node.ownerDocument && node.ownerDocument.defaultView || window;
5492 var selection = win.getSelection();
5493 return {
5494 anchorNode: selection.anchorNode,
5495 anchorOffset: selection.anchorOffset,
5496 focusNode: selection.focusNode,
5497 focusOffset: selection.focusOffset
5498 };
5499 }
5500}
5501
5502/**
5503 * Get document associated with the event target.
5504 *
5505 * @param {object} nativeEventTarget
5506 * @return {Document}
5507 */
5508function getEventTargetDocument(eventTarget) {
5509 return eventTarget.window === eventTarget ? eventTarget.document : eventTarget.nodeType === DOCUMENT_NODE ? eventTarget : eventTarget.ownerDocument;
5510}
5511
5512/**
5513 * Poll selection to see whether it's changed.
5514 *
5515 * @param {object} nativeEvent
5516 * @param {object} nativeEventTarget
5517 * @return {?SyntheticEvent}
5518 */
5519function constructSelectEvent(nativeEvent, nativeEventTarget) {
5520 // Ensure we have the right element, and that the user is not dragging a
5521 // selection (this matches native `select` event behavior). In HTML5, select
5522 // fires only on input and textarea thus if there's no focused element we
5523 // won't dispatch.
5524 var doc = getEventTargetDocument(nativeEventTarget);
5525
5526 if (mouseDown || activeElement$1 == null || activeElement$1 !== getActiveElement(doc)) {
5527 return null;
5528 }
5529
5530 // Only fire when selection has actually changed.
5531 var currentSelection = getSelection(activeElement$1);
5532 if (!lastSelection || !shallowEqual(lastSelection, currentSelection)) {
5533 lastSelection = currentSelection;
5534
5535 var syntheticEvent = SyntheticEvent.getPooled(eventTypes$3.select, activeElementInst$1, nativeEvent, nativeEventTarget);
5536
5537 syntheticEvent.type = 'select';
5538 syntheticEvent.target = activeElement$1;
5539
5540 accumulateTwoPhaseDispatches(syntheticEvent);
5541
5542 return syntheticEvent;
5543 }
5544
5545 return null;
5546}
5547
5548/**
5549 * This plugin creates an `onSelect` event that normalizes select events
5550 * across form elements.
5551 *
5552 * Supported elements are:
5553 * - input (see `isTextInputElement`)
5554 * - textarea
5555 * - contentEditable
5556 *
5557 * This differs from native browser implementations in the following ways:
5558 * - Fires on contentEditable fields as well as inputs.
5559 * - Fires for collapsed selection.
5560 * - Fires after user input.
5561 */
5562var SelectEventPlugin = {
5563 eventTypes: eventTypes$3,
5564
5565 extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
5566 var doc = getEventTargetDocument(nativeEventTarget);
5567 // Track whether all listeners exists for this plugin. If none exist, we do
5568 // not extract events. See #3639.
5569 if (!doc || !isListeningToAllDependencies('onSelect', doc)) {
5570 return null;
5571 }
5572
5573 var targetNode = targetInst ? getNodeFromInstance$1(targetInst) : window;
5574
5575 switch (topLevelType) {
5576 // Track the input node that has focus.
5577 case TOP_FOCUS:
5578 if (isTextInputElement(targetNode) || targetNode.contentEditable === 'true') {
5579 activeElement$1 = targetNode;
5580 activeElementInst$1 = targetInst;
5581 lastSelection = null;
5582 }
5583 break;
5584 case TOP_BLUR:
5585 activeElement$1 = null;
5586 activeElementInst$1 = null;
5587 lastSelection = null;
5588 break;
5589 // Don't fire the event while the user is dragging. This matches the
5590 // semantics of the native select event.
5591 case TOP_MOUSE_DOWN:
5592 mouseDown = true;
5593 break;
5594 case TOP_CONTEXT_MENU:
5595 case TOP_MOUSE_UP:
5596 case TOP_DRAG_END:
5597 mouseDown = false;
5598 return constructSelectEvent(nativeEvent, nativeEventTarget);
5599 // Chrome and IE fire non-standard event when selection is changed (and
5600 // sometimes when it hasn't). IE's event fires out of order with respect
5601 // to key and input events on deletion, so we discard it.
5602 //
5603 // Firefox doesn't support selectionchange, so check selection status
5604 // after each key entry. The selection changes after keydown and before
5605 // keyup, but we check on keydown as well in the case of holding down a
5606 // key, when multiple keydown events are fired but only one keyup is.
5607 // This is also our approach for IE handling, for the reason above.
5608 case TOP_SELECTION_CHANGE:
5609 if (skipSelectionChangeEvent) {
5610 break;
5611 }
5612 // falls through
5613 case TOP_KEY_DOWN:
5614 case TOP_KEY_UP:
5615 return constructSelectEvent(nativeEvent, nativeEventTarget);
5616 }
5617
5618 return null;
5619 }
5620};
5621
5622/**
5623 * Inject modules for resolving DOM hierarchy and plugin ordering.
5624 */
5625injection.injectEventPluginOrder(DOMEventPluginOrder);
5626setComponentTree(getFiberCurrentPropsFromNode$1, getInstanceFromNode$1, getNodeFromInstance$1);
5627
5628/**
5629 * Some important event plugins included by default (without having to require
5630 * them).
5631 */
5632injection.injectEventPluginsByName({
5633 SimpleEventPlugin: SimpleEventPlugin,
5634 EnterLeaveEventPlugin: EnterLeaveEventPlugin,
5635 ChangeEventPlugin: ChangeEventPlugin,
5636 SelectEventPlugin: SelectEventPlugin,
5637 BeforeInputEventPlugin: BeforeInputEventPlugin
5638});
5639
5640var didWarnSelectedSetOnOption = false;
5641var didWarnInvalidChild = false;
5642
5643function flattenChildren(children) {
5644 var content = '';
5645
5646 // Flatten children. We'll warn if they are invalid
5647 // during validateProps() which runs for hydration too.
5648 // Note that this would throw on non-element objects.
5649 // Elements are stringified (which is normally irrelevant
5650 // but matters for <fbt>).
5651 React.Children.forEach(children, function (child) {
5652 if (child == null) {
5653 return;
5654 }
5655 content += child;
5656 // Note: we don't warn about invalid children here.
5657 // Instead, this is done separately below so that
5658 // it happens during the hydration codepath too.
5659 });
5660
5661 return content;
5662}
5663
5664/**
5665 * Implements an <option> host component that warns when `selected` is set.
5666 */
5667
5668function validateProps(element, props) {
5669 {
5670 // This mirrors the codepath above, but runs for hydration too.
5671 // Warn about invalid children here so that client and hydration are consistent.
5672 // TODO: this seems like it could cause a DEV-only throw for hydration
5673 // if children contains a non-element object. We should try to avoid that.
5674 if (typeof props.children === 'object' && props.children !== null) {
5675 React.Children.forEach(props.children, function (child) {
5676 if (child == null) {
5677 return;
5678 }
5679 if (typeof child === 'string' || typeof child === 'number') {
5680 return;
5681 }
5682 if (typeof child.type !== 'string') {
5683 return;
5684 }
5685 if (!didWarnInvalidChild) {
5686 didWarnInvalidChild = true;
5687 warning$1(false, 'Only strings and numbers are supported as <option> children.');
5688 }
5689 });
5690 }
5691
5692 // TODO: Remove support for `selected` in <option>.
5693 if (props.selected != null && !didWarnSelectedSetOnOption) {
5694 warning$1(false, 'Use the `defaultValue` or `value` props on <select> instead of ' + 'setting `selected` on <option>.');
5695 didWarnSelectedSetOnOption = true;
5696 }
5697 }
5698}
5699
5700function postMountWrapper$1(element, props) {
5701 // value="" should make a value attribute (#6219)
5702 if (props.value != null) {
5703 element.setAttribute('value', toString(getToStringValue(props.value)));
5704 }
5705}
5706
5707function getHostProps$1(element, props) {
5708 var hostProps = _assign({ children: undefined }, props);
5709 var content = flattenChildren(props.children);
5710
5711 if (content) {
5712 hostProps.children = content;
5713 }
5714
5715 return hostProps;
5716}
5717
5718// TODO: direct imports like some-package/src/* are bad. Fix me.
5719var didWarnValueDefaultValue$1 = void 0;
5720
5721{
5722 didWarnValueDefaultValue$1 = false;
5723}
5724
5725function getDeclarationErrorAddendum() {
5726 var ownerName = getCurrentFiberOwnerNameInDevOrNull();
5727 if (ownerName) {
5728 return '\n\nCheck the render method of `' + ownerName + '`.';
5729 }
5730 return '';
5731}
5732
5733var valuePropNames = ['value', 'defaultValue'];
5734
5735/**
5736 * Validation function for `value` and `defaultValue`.
5737 */
5738function checkSelectPropTypes(props) {
5739 ReactControlledValuePropTypes.checkPropTypes('select', props);
5740
5741 for (var i = 0; i < valuePropNames.length; i++) {
5742 var propName = valuePropNames[i];
5743 if (props[propName] == null) {
5744 continue;
5745 }
5746 var isArray = Array.isArray(props[propName]);
5747 if (props.multiple && !isArray) {
5748 warning$1(false, 'The `%s` prop supplied to <select> must be an array if ' + '`multiple` is true.%s', propName, getDeclarationErrorAddendum());
5749 } else if (!props.multiple && isArray) {
5750 warning$1(false, 'The `%s` prop supplied to <select> must be a scalar ' + 'value if `multiple` is false.%s', propName, getDeclarationErrorAddendum());
5751 }
5752 }
5753}
5754
5755function updateOptions(node, multiple, propValue, setDefaultSelected) {
5756 var options = node.options;
5757
5758 if (multiple) {
5759 var selectedValues = propValue;
5760 var selectedValue = {};
5761 for (var i = 0; i < selectedValues.length; i++) {
5762 // Prefix to avoid chaos with special keys.
5763 selectedValue['$' + selectedValues[i]] = true;
5764 }
5765 for (var _i = 0; _i < options.length; _i++) {
5766 var selected = selectedValue.hasOwnProperty('$' + options[_i].value);
5767 if (options[_i].selected !== selected) {
5768 options[_i].selected = selected;
5769 }
5770 if (selected && setDefaultSelected) {
5771 options[_i].defaultSelected = true;
5772 }
5773 }
5774 } else {
5775 // Do not set `select.value` as exact behavior isn't consistent across all
5776 // browsers for all cases.
5777 var _selectedValue = toString(getToStringValue(propValue));
5778 var defaultSelected = null;
5779 for (var _i2 = 0; _i2 < options.length; _i2++) {
5780 if (options[_i2].value === _selectedValue) {
5781 options[_i2].selected = true;
5782 if (setDefaultSelected) {
5783 options[_i2].defaultSelected = true;
5784 }
5785 return;
5786 }
5787 if (defaultSelected === null && !options[_i2].disabled) {
5788 defaultSelected = options[_i2];
5789 }
5790 }
5791 if (defaultSelected !== null) {
5792 defaultSelected.selected = true;
5793 }
5794 }
5795}
5796
5797/**
5798 * Implements a <select> host component that allows optionally setting the
5799 * props `value` and `defaultValue`. If `multiple` is false, the prop must be a
5800 * stringable. If `multiple` is true, the prop must be an array of stringables.
5801 *
5802 * If `value` is not supplied (or null/undefined), user actions that change the
5803 * selected option will trigger updates to the rendered options.
5804 *
5805 * If it is supplied (and not null/undefined), the rendered options will not
5806 * update in response to user actions. Instead, the `value` prop must change in
5807 * order for the rendered options to update.
5808 *
5809 * If `defaultValue` is provided, any options with the supplied values will be
5810 * selected.
5811 */
5812
5813function getHostProps$2(element, props) {
5814 return _assign({}, props, {
5815 value: undefined
5816 });
5817}
5818
5819function initWrapperState$1(element, props) {
5820 var node = element;
5821 {
5822 checkSelectPropTypes(props);
5823 }
5824
5825 node._wrapperState = {
5826 wasMultiple: !!props.multiple
5827 };
5828
5829 {
5830 if (props.value !== undefined && props.defaultValue !== undefined && !didWarnValueDefaultValue$1) {
5831 warning$1(false, 'Select elements must be either controlled or uncontrolled ' + '(specify either the value prop, or the defaultValue prop, but not ' + 'both). Decide between using a controlled or uncontrolled select ' + 'element and remove one of these props. More info: ' + 'https://fb.me/react-controlled-components');
5832 didWarnValueDefaultValue$1 = true;
5833 }
5834 }
5835}
5836
5837function postMountWrapper$2(element, props) {
5838 var node = element;
5839 node.multiple = !!props.multiple;
5840 var value = props.value;
5841 if (value != null) {
5842 updateOptions(node, !!props.multiple, value, false);
5843 } else if (props.defaultValue != null) {
5844 updateOptions(node, !!props.multiple, props.defaultValue, true);
5845 }
5846}
5847
5848function postUpdateWrapper(element, props) {
5849 var node = element;
5850 var wasMultiple = node._wrapperState.wasMultiple;
5851 node._wrapperState.wasMultiple = !!props.multiple;
5852
5853 var value = props.value;
5854 if (value != null) {
5855 updateOptions(node, !!props.multiple, value, false);
5856 } else if (wasMultiple !== !!props.multiple) {
5857 // For simplicity, reapply `defaultValue` if `multiple` is toggled.
5858 if (props.defaultValue != null) {
5859 updateOptions(node, !!props.multiple, props.defaultValue, true);
5860 } else {
5861 // Revert the select back to its default unselected state.
5862 updateOptions(node, !!props.multiple, props.multiple ? [] : '', false);
5863 }
5864 }
5865}
5866
5867function restoreControlledState$2(element, props) {
5868 var node = element;
5869 var value = props.value;
5870
5871 if (value != null) {
5872 updateOptions(node, !!props.multiple, value, false);
5873 }
5874}
5875
5876var didWarnValDefaultVal = false;
5877
5878/**
5879 * Implements a <textarea> host component that allows setting `value`, and
5880 * `defaultValue`. This differs from the traditional DOM API because value is
5881 * usually set as PCDATA children.
5882 *
5883 * If `value` is not supplied (or null/undefined), user actions that affect the
5884 * value will trigger updates to the element.
5885 *
5886 * If `value` is supplied (and not null/undefined), the rendered element will
5887 * not trigger updates to the element. Instead, the `value` prop must change in
5888 * order for the rendered element to be updated.
5889 *
5890 * The rendered element will be initialized with an empty value, the prop
5891 * `defaultValue` if specified, or the children content (deprecated).
5892 */
5893
5894function getHostProps$3(element, props) {
5895 var node = element;
5896 !(props.dangerouslySetInnerHTML == null) ? invariant(false, '`dangerouslySetInnerHTML` does not make sense on <textarea>.') : void 0;
5897
5898 // Always set children to the same thing. In IE9, the selection range will
5899 // get reset if `textContent` is mutated. We could add a check in setTextContent
5900 // to only set the value if/when the value differs from the node value (which would
5901 // completely solve this IE9 bug), but Sebastian+Sophie seemed to like this
5902 // solution. The value can be a boolean or object so that's why it's forced
5903 // to be a string.
5904 var hostProps = _assign({}, props, {
5905 value: undefined,
5906 defaultValue: undefined,
5907 children: toString(node._wrapperState.initialValue)
5908 });
5909
5910 return hostProps;
5911}
5912
5913function initWrapperState$2(element, props) {
5914 var node = element;
5915 {
5916 ReactControlledValuePropTypes.checkPropTypes('textarea', props);
5917 if (props.value !== undefined && props.defaultValue !== undefined && !didWarnValDefaultVal) {
5918 warning$1(false, '%s contains a textarea with both value and defaultValue props. ' + 'Textarea elements must be either controlled or uncontrolled ' + '(specify either the value prop, or the defaultValue prop, but not ' + 'both). Decide between using a controlled or uncontrolled textarea ' + 'and remove one of these props. More info: ' + 'https://fb.me/react-controlled-components', getCurrentFiberOwnerNameInDevOrNull() || 'A component');
5919 didWarnValDefaultVal = true;
5920 }
5921 }
5922
5923 var initialValue = props.value;
5924
5925 // Only bother fetching default value if we're going to use it
5926 if (initialValue == null) {
5927 var defaultValue = props.defaultValue;
5928 // TODO (yungsters): Remove support for children content in <textarea>.
5929 var children = props.children;
5930 if (children != null) {
5931 {
5932 warning$1(false, 'Use the `defaultValue` or `value` props instead of setting ' + 'children on <textarea>.');
5933 }
5934 !(defaultValue == null) ? invariant(false, 'If you supply `defaultValue` on a <textarea>, do not pass children.') : void 0;
5935 if (Array.isArray(children)) {
5936 !(children.length <= 1) ? invariant(false, '<textarea> can only have at most one child.') : void 0;
5937 children = children[0];
5938 }
5939
5940 defaultValue = children;
5941 }
5942 if (defaultValue == null) {
5943 defaultValue = '';
5944 }
5945 initialValue = defaultValue;
5946 }
5947
5948 node._wrapperState = {
5949 initialValue: getToStringValue(initialValue)
5950 };
5951}
5952
5953function updateWrapper$1(element, props) {
5954 var node = element;
5955 var value = getToStringValue(props.value);
5956 var defaultValue = getToStringValue(props.defaultValue);
5957 if (value != null) {
5958 // Cast `value` to a string to ensure the value is set correctly. While
5959 // browsers typically do this as necessary, jsdom doesn't.
5960 var newValue = toString(value);
5961 // To avoid side effects (such as losing text selection), only set value if changed
5962 if (newValue !== node.value) {
5963 node.value = newValue;
5964 }
5965 if (props.defaultValue == null && node.defaultValue !== newValue) {
5966 node.defaultValue = newValue;
5967 }
5968 }
5969 if (defaultValue != null) {
5970 node.defaultValue = toString(defaultValue);
5971 }
5972}
5973
5974function postMountWrapper$3(element, props) {
5975 var node = element;
5976 // This is in postMount because we need access to the DOM node, which is not
5977 // available until after the component has mounted.
5978 var textContent = node.textContent;
5979
5980 // Only set node.value if textContent is equal to the expected
5981 // initial value. In IE10/IE11 there is a bug where the placeholder attribute
5982 // will populate textContent as well.
5983 // https://developer.microsoft.com/microsoft-edge/platform/issues/101525/
5984 if (textContent === node._wrapperState.initialValue) {
5985 node.value = textContent;
5986 }
5987}
5988
5989function restoreControlledState$3(element, props) {
5990 // DOM component is still mounted; update
5991 updateWrapper$1(element, props);
5992}
5993
5994var HTML_NAMESPACE$1 = 'http://www.w3.org/1999/xhtml';
5995var MATH_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';
5996var SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
5997
5998var Namespaces = {
5999 html: HTML_NAMESPACE$1,
6000 mathml: MATH_NAMESPACE,
6001 svg: SVG_NAMESPACE
6002};
6003
6004// Assumes there is no parent namespace.
6005function getIntrinsicNamespace(type) {
6006 switch (type) {
6007 case 'svg':
6008 return SVG_NAMESPACE;
6009 case 'math':
6010 return MATH_NAMESPACE;
6011 default:
6012 return HTML_NAMESPACE$1;
6013 }
6014}
6015
6016function getChildNamespace(parentNamespace, type) {
6017 if (parentNamespace == null || parentNamespace === HTML_NAMESPACE$1) {
6018 // No (or default) parent namespace: potential entry point.
6019 return getIntrinsicNamespace(type);
6020 }
6021 if (parentNamespace === SVG_NAMESPACE && type === 'foreignObject') {
6022 // We're leaving SVG.
6023 return HTML_NAMESPACE$1;
6024 }
6025 // By default, pass namespace below.
6026 return parentNamespace;
6027}
6028
6029/* globals MSApp */
6030
6031/**
6032 * Create a function which has 'unsafe' privileges (required by windows8 apps)
6033 */
6034var createMicrosoftUnsafeLocalFunction = function (func) {
6035 if (typeof MSApp !== 'undefined' && MSApp.execUnsafeLocalFunction) {
6036 return function (arg0, arg1, arg2, arg3) {
6037 MSApp.execUnsafeLocalFunction(function () {
6038 return func(arg0, arg1, arg2, arg3);
6039 });
6040 };
6041 } else {
6042 return func;
6043 }
6044};
6045
6046// SVG temp container for IE lacking innerHTML
6047var reusableSVGContainer = void 0;
6048
6049/**
6050 * Set the innerHTML property of a node
6051 *
6052 * @param {DOMElement} node
6053 * @param {string} html
6054 * @internal
6055 */
6056var setInnerHTML = createMicrosoftUnsafeLocalFunction(function (node, html) {
6057 // IE does not have innerHTML for SVG nodes, so instead we inject the
6058 // new markup in a temp node and then move the child nodes across into
6059 // the target node
6060
6061 if (node.namespaceURI === Namespaces.svg && !('innerHTML' in node)) {
6062 reusableSVGContainer = reusableSVGContainer || document.createElement('div');
6063 reusableSVGContainer.innerHTML = '<svg>' + html + '</svg>';
6064 var svgNode = reusableSVGContainer.firstChild;
6065 while (node.firstChild) {
6066 node.removeChild(node.firstChild);
6067 }
6068 while (svgNode.firstChild) {
6069 node.appendChild(svgNode.firstChild);
6070 }
6071 } else {
6072 node.innerHTML = html;
6073 }
6074});
6075
6076/**
6077 * Set the textContent property of a node. For text updates, it's faster
6078 * to set the `nodeValue` of the Text node directly instead of using
6079 * `.textContent` which will remove the existing node and create a new one.
6080 *
6081 * @param {DOMElement} node
6082 * @param {string} text
6083 * @internal
6084 */
6085var setTextContent = function (node, text) {
6086 if (text) {
6087 var firstChild = node.firstChild;
6088
6089 if (firstChild && firstChild === node.lastChild && firstChild.nodeType === TEXT_NODE) {
6090 firstChild.nodeValue = text;
6091 return;
6092 }
6093 }
6094 node.textContent = text;
6095};
6096
6097// List derived from Gecko source code:
6098// https://github.com/mozilla/gecko-dev/blob/4e638efc71/layout/style/test/property_database.js
6099var shorthandToLonghand = {
6100 animation: ['animationDelay', 'animationDirection', 'animationDuration', 'animationFillMode', 'animationIterationCount', 'animationName', 'animationPlayState', 'animationTimingFunction'],
6101 background: ['backgroundAttachment', 'backgroundClip', 'backgroundColor', 'backgroundImage', 'backgroundOrigin', 'backgroundPositionX', 'backgroundPositionY', 'backgroundRepeat', 'backgroundSize'],
6102 backgroundPosition: ['backgroundPositionX', 'backgroundPositionY'],
6103 border: ['borderBottomColor', 'borderBottomStyle', 'borderBottomWidth', 'borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderTopColor', 'borderTopStyle', 'borderTopWidth'],
6104 borderBlockEnd: ['borderBlockEndColor', 'borderBlockEndStyle', 'borderBlockEndWidth'],
6105 borderBlockStart: ['borderBlockStartColor', 'borderBlockStartStyle', 'borderBlockStartWidth'],
6106 borderBottom: ['borderBottomColor', 'borderBottomStyle', 'borderBottomWidth'],
6107 borderColor: ['borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor'],
6108 borderImage: ['borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth'],
6109 borderInlineEnd: ['borderInlineEndColor', 'borderInlineEndStyle', 'borderInlineEndWidth'],
6110 borderInlineStart: ['borderInlineStartColor', 'borderInlineStartStyle', 'borderInlineStartWidth'],
6111 borderLeft: ['borderLeftColor', 'borderLeftStyle', 'borderLeftWidth'],
6112 borderRadius: ['borderBottomLeftRadius', 'borderBottomRightRadius', 'borderTopLeftRadius', 'borderTopRightRadius'],
6113 borderRight: ['borderRightColor', 'borderRightStyle', 'borderRightWidth'],
6114 borderStyle: ['borderBottomStyle', 'borderLeftStyle', 'borderRightStyle', 'borderTopStyle'],
6115 borderTop: ['borderTopColor', 'borderTopStyle', 'borderTopWidth'],
6116 borderWidth: ['borderBottomWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth'],
6117 columnRule: ['columnRuleColor', 'columnRuleStyle', 'columnRuleWidth'],
6118 columns: ['columnCount', 'columnWidth'],
6119 flex: ['flexBasis', 'flexGrow', 'flexShrink'],
6120 flexFlow: ['flexDirection', 'flexWrap'],
6121 font: ['fontFamily', 'fontFeatureSettings', 'fontKerning', 'fontLanguageOverride', 'fontSize', 'fontSizeAdjust', 'fontStretch', 'fontStyle', 'fontVariant', 'fontVariantAlternates', 'fontVariantCaps', 'fontVariantEastAsian', 'fontVariantLigatures', 'fontVariantNumeric', 'fontVariantPosition', 'fontWeight', 'lineHeight'],
6122 fontVariant: ['fontVariantAlternates', 'fontVariantCaps', 'fontVariantEastAsian', 'fontVariantLigatures', 'fontVariantNumeric', 'fontVariantPosition'],
6123 gap: ['columnGap', 'rowGap'],
6124 grid: ['gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows'],
6125 gridArea: ['gridColumnEnd', 'gridColumnStart', 'gridRowEnd', 'gridRowStart'],
6126 gridColumn: ['gridColumnEnd', 'gridColumnStart'],
6127 gridColumnGap: ['columnGap'],
6128 gridGap: ['columnGap', 'rowGap'],
6129 gridRow: ['gridRowEnd', 'gridRowStart'],
6130 gridRowGap: ['rowGap'],
6131 gridTemplate: ['gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows'],
6132 listStyle: ['listStyleImage', 'listStylePosition', 'listStyleType'],
6133 margin: ['marginBottom', 'marginLeft', 'marginRight', 'marginTop'],
6134 marker: ['markerEnd', 'markerMid', 'markerStart'],
6135 mask: ['maskClip', 'maskComposite', 'maskImage', 'maskMode', 'maskOrigin', 'maskPositionX', 'maskPositionY', 'maskRepeat', 'maskSize'],
6136 maskPosition: ['maskPositionX', 'maskPositionY'],
6137 outline: ['outlineColor', 'outlineStyle', 'outlineWidth'],
6138 overflow: ['overflowX', 'overflowY'],
6139 padding: ['paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop'],
6140 placeContent: ['alignContent', 'justifyContent'],
6141 placeItems: ['alignItems', 'justifyItems'],
6142 placeSelf: ['alignSelf', 'justifySelf'],
6143 textDecoration: ['textDecorationColor', 'textDecorationLine', 'textDecorationStyle'],
6144 textEmphasis: ['textEmphasisColor', 'textEmphasisStyle'],
6145 transition: ['transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction'],
6146 wordWrap: ['overflowWrap']
6147};
6148
6149/**
6150 * CSS properties which accept numbers but are not in units of "px".
6151 */
6152var isUnitlessNumber = {
6153 animationIterationCount: true,
6154 borderImageOutset: true,
6155 borderImageSlice: true,
6156 borderImageWidth: true,
6157 boxFlex: true,
6158 boxFlexGroup: true,
6159 boxOrdinalGroup: true,
6160 columnCount: true,
6161 columns: true,
6162 flex: true,
6163 flexGrow: true,
6164 flexPositive: true,
6165 flexShrink: true,
6166 flexNegative: true,
6167 flexOrder: true,
6168 gridArea: true,
6169 gridRow: true,
6170 gridRowEnd: true,
6171 gridRowSpan: true,
6172 gridRowStart: true,
6173 gridColumn: true,
6174 gridColumnEnd: true,
6175 gridColumnSpan: true,
6176 gridColumnStart: true,
6177 fontWeight: true,
6178 lineClamp: true,
6179 lineHeight: true,
6180 opacity: true,
6181 order: true,
6182 orphans: true,
6183 tabSize: true,
6184 widows: true,
6185 zIndex: true,
6186 zoom: true,
6187
6188 // SVG-related properties
6189 fillOpacity: true,
6190 floodOpacity: true,
6191 stopOpacity: true,
6192 strokeDasharray: true,
6193 strokeDashoffset: true,
6194 strokeMiterlimit: true,
6195 strokeOpacity: true,
6196 strokeWidth: true
6197};
6198
6199/**
6200 * @param {string} prefix vendor-specific prefix, eg: Webkit
6201 * @param {string} key style name, eg: transitionDuration
6202 * @return {string} style name prefixed with `prefix`, properly camelCased, eg:
6203 * WebkitTransitionDuration
6204 */
6205function prefixKey(prefix, key) {
6206 return prefix + key.charAt(0).toUpperCase() + key.substring(1);
6207}
6208
6209/**
6210 * Support style names that may come passed in prefixed by adding permutations
6211 * of vendor prefixes.
6212 */
6213var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
6214
6215// Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
6216// infinite loop, because it iterates over the newly added props too.
6217Object.keys(isUnitlessNumber).forEach(function (prop) {
6218 prefixes.forEach(function (prefix) {
6219 isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
6220 });
6221});
6222
6223/**
6224 * Convert a value into the proper css writable value. The style name `name`
6225 * should be logical (no hyphens), as specified
6226 * in `CSSProperty.isUnitlessNumber`.
6227 *
6228 * @param {string} name CSS property name such as `topMargin`.
6229 * @param {*} value CSS property value such as `10px`.
6230 * @return {string} Normalized style value with dimensions applied.
6231 */
6232function dangerousStyleValue(name, value, isCustomProperty) {
6233 // Note that we've removed escapeTextForBrowser() calls here since the
6234 // whole string will be escaped when the attribute is injected into
6235 // the markup. If you provide unsafe user data here they can inject
6236 // arbitrary CSS which may be problematic (I couldn't repro this):
6237 // https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet
6238 // http://www.thespanner.co.uk/2007/11/26/ultimate-xss-css-injection/
6239 // This is not an XSS hole but instead a potential CSS injection issue
6240 // which has lead to a greater discussion about how we're going to
6241 // trust URLs moving forward. See #2115901
6242
6243 var isEmpty = value == null || typeof value === 'boolean' || value === '';
6244 if (isEmpty) {
6245 return '';
6246 }
6247
6248 if (!isCustomProperty && typeof value === 'number' && value !== 0 && !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name])) {
6249 return value + 'px'; // Presumes implicit 'px' suffix for unitless numbers
6250 }
6251
6252 return ('' + value).trim();
6253}
6254
6255var uppercasePattern = /([A-Z])/g;
6256var msPattern = /^ms-/;
6257
6258/**
6259 * Hyphenates a camelcased CSS property name, for example:
6260 *
6261 * > hyphenateStyleName('backgroundColor')
6262 * < "background-color"
6263 * > hyphenateStyleName('MozTransition')
6264 * < "-moz-transition"
6265 * > hyphenateStyleName('msTransition')
6266 * < "-ms-transition"
6267 *
6268 * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix
6269 * is converted to `-ms-`.
6270 */
6271function hyphenateStyleName(name) {
6272 return name.replace(uppercasePattern, '-$1').toLowerCase().replace(msPattern, '-ms-');
6273}
6274
6275var warnValidStyle = function () {};
6276
6277{
6278 // 'msTransform' is correct, but the other prefixes should be capitalized
6279 var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/;
6280 var msPattern$1 = /^-ms-/;
6281 var hyphenPattern = /-(.)/g;
6282
6283 // style values shouldn't contain a semicolon
6284 var badStyleValueWithSemicolonPattern = /;\s*$/;
6285
6286 var warnedStyleNames = {};
6287 var warnedStyleValues = {};
6288 var warnedForNaNValue = false;
6289 var warnedForInfinityValue = false;
6290
6291 var camelize = function (string) {
6292 return string.replace(hyphenPattern, function (_, character) {
6293 return character.toUpperCase();
6294 });
6295 };
6296
6297 var warnHyphenatedStyleName = function (name) {
6298 if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
6299 return;
6300 }
6301
6302 warnedStyleNames[name] = true;
6303 warning$1(false, 'Unsupported style property %s. Did you mean %s?', name,
6304 // As Andi Smith suggests
6305 // (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an `-ms` prefix
6306 // is converted to lowercase `ms`.
6307 camelize(name.replace(msPattern$1, 'ms-')));
6308 };
6309
6310 var warnBadVendoredStyleName = function (name) {
6311 if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
6312 return;
6313 }
6314
6315 warnedStyleNames[name] = true;
6316 warning$1(false, 'Unsupported vendor-prefixed style property %s. Did you mean %s?', name, name.charAt(0).toUpperCase() + name.slice(1));
6317 };
6318
6319 var warnStyleValueWithSemicolon = function (name, value) {
6320 if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) {
6321 return;
6322 }
6323
6324 warnedStyleValues[value] = true;
6325 warning$1(false, "Style property values shouldn't contain a semicolon. " + 'Try "%s: %s" instead.', name, value.replace(badStyleValueWithSemicolonPattern, ''));
6326 };
6327
6328 var warnStyleValueIsNaN = function (name, value) {
6329 if (warnedForNaNValue) {
6330 return;
6331 }
6332
6333 warnedForNaNValue = true;
6334 warning$1(false, '`NaN` is an invalid value for the `%s` css style property.', name);
6335 };
6336
6337 var warnStyleValueIsInfinity = function (name, value) {
6338 if (warnedForInfinityValue) {
6339 return;
6340 }
6341
6342 warnedForInfinityValue = true;
6343 warning$1(false, '`Infinity` is an invalid value for the `%s` css style property.', name);
6344 };
6345
6346 warnValidStyle = function (name, value) {
6347 if (name.indexOf('-') > -1) {
6348 warnHyphenatedStyleName(name);
6349 } else if (badVendoredStyleNamePattern.test(name)) {
6350 warnBadVendoredStyleName(name);
6351 } else if (badStyleValueWithSemicolonPattern.test(value)) {
6352 warnStyleValueWithSemicolon(name, value);
6353 }
6354
6355 if (typeof value === 'number') {
6356 if (isNaN(value)) {
6357 warnStyleValueIsNaN(name, value);
6358 } else if (!isFinite(value)) {
6359 warnStyleValueIsInfinity(name, value);
6360 }
6361 }
6362 };
6363}
6364
6365var warnValidStyle$1 = warnValidStyle;
6366
6367/**
6368 * Operations for dealing with CSS properties.
6369 */
6370
6371/**
6372 * This creates a string that is expected to be equivalent to the style
6373 * attribute generated by server-side rendering. It by-passes warnings and
6374 * security checks so it's not safe to use this value for anything other than
6375 * comparison. It is only used in DEV for SSR validation.
6376 */
6377function createDangerousStringForStyles(styles) {
6378 {
6379 var serialized = '';
6380 var delimiter = '';
6381 for (var styleName in styles) {
6382 if (!styles.hasOwnProperty(styleName)) {
6383 continue;
6384 }
6385 var styleValue = styles[styleName];
6386 if (styleValue != null) {
6387 var isCustomProperty = styleName.indexOf('--') === 0;
6388 serialized += delimiter + hyphenateStyleName(styleName) + ':';
6389 serialized += dangerousStyleValue(styleName, styleValue, isCustomProperty);
6390
6391 delimiter = ';';
6392 }
6393 }
6394 return serialized || null;
6395 }
6396}
6397
6398/**
6399 * Sets the value for multiple styles on a node. If a value is specified as
6400 * '' (empty string), the corresponding style property will be unset.
6401 *
6402 * @param {DOMElement} node
6403 * @param {object} styles
6404 */
6405function setValueForStyles(node, styles) {
6406 var style = node.style;
6407 for (var styleName in styles) {
6408 if (!styles.hasOwnProperty(styleName)) {
6409 continue;
6410 }
6411 var isCustomProperty = styleName.indexOf('--') === 0;
6412 {
6413 if (!isCustomProperty) {
6414 warnValidStyle$1(styleName, styles[styleName]);
6415 }
6416 }
6417 var styleValue = dangerousStyleValue(styleName, styles[styleName], isCustomProperty);
6418 if (styleName === 'float') {
6419 styleName = 'cssFloat';
6420 }
6421 if (isCustomProperty) {
6422 style.setProperty(styleName, styleValue);
6423 } else {
6424 style[styleName] = styleValue;
6425 }
6426 }
6427}
6428
6429function isValueEmpty(value) {
6430 return value == null || typeof value === 'boolean' || value === '';
6431}
6432
6433/**
6434 * Given {color: 'red', overflow: 'hidden'} returns {
6435 * color: 'color',
6436 * overflowX: 'overflow',
6437 * overflowY: 'overflow',
6438 * }. This can be read as "the overflowY property was set by the overflow
6439 * shorthand". That is, the values are the property that each was derived from.
6440 */
6441function expandShorthandMap(styles) {
6442 var expanded = {};
6443 for (var key in styles) {
6444 var longhands = shorthandToLonghand[key] || [key];
6445 for (var i = 0; i < longhands.length; i++) {
6446 expanded[longhands[i]] = key;
6447 }
6448 }
6449 return expanded;
6450}
6451
6452/**
6453 * When mixing shorthand and longhand property names, we warn during updates if
6454 * we expect an incorrect result to occur. In particular, we warn for:
6455 *
6456 * Updating a shorthand property (longhand gets overwritten):
6457 * {font: 'foo', fontVariant: 'bar'} -> {font: 'baz', fontVariant: 'bar'}
6458 * becomes .style.font = 'baz'
6459 * Removing a shorthand property (longhand gets lost too):
6460 * {font: 'foo', fontVariant: 'bar'} -> {fontVariant: 'bar'}
6461 * becomes .style.font = ''
6462 * Removing a longhand property (should revert to shorthand; doesn't):
6463 * {font: 'foo', fontVariant: 'bar'} -> {font: 'foo'}
6464 * becomes .style.fontVariant = ''
6465 */
6466function validateShorthandPropertyCollisionInDev(styleUpdates, nextStyles) {
6467 if (!warnAboutShorthandPropertyCollision) {
6468 return;
6469 }
6470
6471 if (!nextStyles) {
6472 return;
6473 }
6474
6475 var expandedUpdates = expandShorthandMap(styleUpdates);
6476 var expandedStyles = expandShorthandMap(nextStyles);
6477 var warnedAbout = {};
6478 for (var key in expandedUpdates) {
6479 var originalKey = expandedUpdates[key];
6480 var correctOriginalKey = expandedStyles[key];
6481 if (correctOriginalKey && originalKey !== correctOriginalKey) {
6482 var warningKey = originalKey + ',' + correctOriginalKey;
6483 if (warnedAbout[warningKey]) {
6484 continue;
6485 }
6486 warnedAbout[warningKey] = true;
6487 warning$1(false, '%s a style property during rerender (%s) when a ' + 'conflicting property is set (%s) can lead to styling bugs. To ' + "avoid this, don't mix shorthand and non-shorthand properties " + 'for the same value; instead, replace the shorthand with ' + 'separate values.', isValueEmpty(styleUpdates[originalKey]) ? 'Removing' : 'Updating', originalKey, correctOriginalKey);
6488 }
6489 }
6490}
6491
6492// For HTML, certain tags should omit their close tag. We keep a whitelist for
6493// those special-case tags.
6494
6495var omittedCloseTags = {
6496 area: true,
6497 base: true,
6498 br: true,
6499 col: true,
6500 embed: true,
6501 hr: true,
6502 img: true,
6503 input: true,
6504 keygen: true,
6505 link: true,
6506 meta: true,
6507 param: true,
6508 source: true,
6509 track: true,
6510 wbr: true
6511 // NOTE: menuitem's close tag should be omitted, but that causes problems.
6512};
6513
6514// For HTML, certain tags cannot have children. This has the same purpose as
6515// `omittedCloseTags` except that `menuitem` should still have its closing tag.
6516
6517var voidElementTags = _assign({
6518 menuitem: true
6519}, omittedCloseTags);
6520
6521// TODO: We can remove this if we add invariantWithStack()
6522// or add stack by default to invariants where possible.
6523var HTML$1 = '__html';
6524
6525var ReactDebugCurrentFrame$2 = null;
6526{
6527 ReactDebugCurrentFrame$2 = ReactSharedInternals.ReactDebugCurrentFrame;
6528}
6529
6530function assertValidProps(tag, props) {
6531 if (!props) {
6532 return;
6533 }
6534 // Note the use of `==` which checks for null or undefined.
6535 if (voidElementTags[tag]) {
6536 !(props.children == null && props.dangerouslySetInnerHTML == null) ? invariant(false, '%s is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.%s', tag, ReactDebugCurrentFrame$2.getStackAddendum()) : void 0;
6537 }
6538 if (props.dangerouslySetInnerHTML != null) {
6539 !(props.children == null) ? invariant(false, 'Can only set one of `children` or `props.dangerouslySetInnerHTML`.') : void 0;
6540 !(typeof props.dangerouslySetInnerHTML === 'object' && HTML$1 in props.dangerouslySetInnerHTML) ? invariant(false, '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. Please visit https://fb.me/react-invariant-dangerously-set-inner-html for more information.') : void 0;
6541 }
6542 {
6543 !(props.suppressContentEditableWarning || !props.contentEditable || props.children == null) ? warning$1(false, 'A component is `contentEditable` and contains `children` managed by ' + 'React. It is now your responsibility to guarantee that none of ' + 'those nodes are unexpectedly modified or duplicated. This is ' + 'probably not intentional.') : void 0;
6544 }
6545 !(props.style == null || typeof props.style === 'object') ? invariant(false, 'The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + \'em\'}} when using JSX.%s', ReactDebugCurrentFrame$2.getStackAddendum()) : void 0;
6546}
6547
6548function isCustomComponent(tagName, props) {
6549 if (tagName.indexOf('-') === -1) {
6550 return typeof props.is === 'string';
6551 }
6552 switch (tagName) {
6553 // These are reserved SVG and MathML elements.
6554 // We don't mind this whitelist too much because we expect it to never grow.
6555 // The alternative is to track the namespace in a few places which is convoluted.
6556 // https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
6557 case 'annotation-xml':
6558 case 'color-profile':
6559 case 'font-face':
6560 case 'font-face-src':
6561 case 'font-face-uri':
6562 case 'font-face-format':
6563 case 'font-face-name':
6564 case 'missing-glyph':
6565 return false;
6566 default:
6567 return true;
6568 }
6569}
6570
6571// When adding attributes to the HTML or SVG whitelist, be sure to
6572// also add them to this module to ensure casing and incorrect name
6573// warnings.
6574var possibleStandardNames = {
6575 // HTML
6576 accept: 'accept',
6577 acceptcharset: 'acceptCharset',
6578 'accept-charset': 'acceptCharset',
6579 accesskey: 'accessKey',
6580 action: 'action',
6581 allowfullscreen: 'allowFullScreen',
6582 alt: 'alt',
6583 as: 'as',
6584 async: 'async',
6585 autocapitalize: 'autoCapitalize',
6586 autocomplete: 'autoComplete',
6587 autocorrect: 'autoCorrect',
6588 autofocus: 'autoFocus',
6589 autoplay: 'autoPlay',
6590 autosave: 'autoSave',
6591 capture: 'capture',
6592 cellpadding: 'cellPadding',
6593 cellspacing: 'cellSpacing',
6594 challenge: 'challenge',
6595 charset: 'charSet',
6596 checked: 'checked',
6597 children: 'children',
6598 cite: 'cite',
6599 class: 'className',
6600 classid: 'classID',
6601 classname: 'className',
6602 cols: 'cols',
6603 colspan: 'colSpan',
6604 content: 'content',
6605 contenteditable: 'contentEditable',
6606 contextmenu: 'contextMenu',
6607 controls: 'controls',
6608 controlslist: 'controlsList',
6609 coords: 'coords',
6610 crossorigin: 'crossOrigin',
6611 dangerouslysetinnerhtml: 'dangerouslySetInnerHTML',
6612 data: 'data',
6613 datetime: 'dateTime',
6614 default: 'default',
6615 defaultchecked: 'defaultChecked',
6616 defaultvalue: 'defaultValue',
6617 defer: 'defer',
6618 dir: 'dir',
6619 disabled: 'disabled',
6620 download: 'download',
6621 draggable: 'draggable',
6622 enctype: 'encType',
6623 for: 'htmlFor',
6624 form: 'form',
6625 formmethod: 'formMethod',
6626 formaction: 'formAction',
6627 formenctype: 'formEncType',
6628 formnovalidate: 'formNoValidate',
6629 formtarget: 'formTarget',
6630 frameborder: 'frameBorder',
6631 headers: 'headers',
6632 height: 'height',
6633 hidden: 'hidden',
6634 high: 'high',
6635 href: 'href',
6636 hreflang: 'hrefLang',
6637 htmlfor: 'htmlFor',
6638 httpequiv: 'httpEquiv',
6639 'http-equiv': 'httpEquiv',
6640 icon: 'icon',
6641 id: 'id',
6642 innerhtml: 'innerHTML',
6643 inputmode: 'inputMode',
6644 integrity: 'integrity',
6645 is: 'is',
6646 itemid: 'itemID',
6647 itemprop: 'itemProp',
6648 itemref: 'itemRef',
6649 itemscope: 'itemScope',
6650 itemtype: 'itemType',
6651 keyparams: 'keyParams',
6652 keytype: 'keyType',
6653 kind: 'kind',
6654 label: 'label',
6655 lang: 'lang',
6656 list: 'list',
6657 loop: 'loop',
6658 low: 'low',
6659 manifest: 'manifest',
6660 marginwidth: 'marginWidth',
6661 marginheight: 'marginHeight',
6662 max: 'max',
6663 maxlength: 'maxLength',
6664 media: 'media',
6665 mediagroup: 'mediaGroup',
6666 method: 'method',
6667 min: 'min',
6668 minlength: 'minLength',
6669 multiple: 'multiple',
6670 muted: 'muted',
6671 name: 'name',
6672 nomodule: 'noModule',
6673 nonce: 'nonce',
6674 novalidate: 'noValidate',
6675 open: 'open',
6676 optimum: 'optimum',
6677 pattern: 'pattern',
6678 placeholder: 'placeholder',
6679 playsinline: 'playsInline',
6680 poster: 'poster',
6681 preload: 'preload',
6682 profile: 'profile',
6683 radiogroup: 'radioGroup',
6684 readonly: 'readOnly',
6685 referrerpolicy: 'referrerPolicy',
6686 rel: 'rel',
6687 required: 'required',
6688 reversed: 'reversed',
6689 role: 'role',
6690 rows: 'rows',
6691 rowspan: 'rowSpan',
6692 sandbox: 'sandbox',
6693 scope: 'scope',
6694 scoped: 'scoped',
6695 scrolling: 'scrolling',
6696 seamless: 'seamless',
6697 selected: 'selected',
6698 shape: 'shape',
6699 size: 'size',
6700 sizes: 'sizes',
6701 span: 'span',
6702 spellcheck: 'spellCheck',
6703 src: 'src',
6704 srcdoc: 'srcDoc',
6705 srclang: 'srcLang',
6706 srcset: 'srcSet',
6707 start: 'start',
6708 step: 'step',
6709 style: 'style',
6710 summary: 'summary',
6711 tabindex: 'tabIndex',
6712 target: 'target',
6713 title: 'title',
6714 type: 'type',
6715 usemap: 'useMap',
6716 value: 'value',
6717 width: 'width',
6718 wmode: 'wmode',
6719 wrap: 'wrap',
6720
6721 // SVG
6722 about: 'about',
6723 accentheight: 'accentHeight',
6724 'accent-height': 'accentHeight',
6725 accumulate: 'accumulate',
6726 additive: 'additive',
6727 alignmentbaseline: 'alignmentBaseline',
6728 'alignment-baseline': 'alignmentBaseline',
6729 allowreorder: 'allowReorder',
6730 alphabetic: 'alphabetic',
6731 amplitude: 'amplitude',
6732 arabicform: 'arabicForm',
6733 'arabic-form': 'arabicForm',
6734 ascent: 'ascent',
6735 attributename: 'attributeName',
6736 attributetype: 'attributeType',
6737 autoreverse: 'autoReverse',
6738 azimuth: 'azimuth',
6739 basefrequency: 'baseFrequency',
6740 baselineshift: 'baselineShift',
6741 'baseline-shift': 'baselineShift',
6742 baseprofile: 'baseProfile',
6743 bbox: 'bbox',
6744 begin: 'begin',
6745 bias: 'bias',
6746 by: 'by',
6747 calcmode: 'calcMode',
6748 capheight: 'capHeight',
6749 'cap-height': 'capHeight',
6750 clip: 'clip',
6751 clippath: 'clipPath',
6752 'clip-path': 'clipPath',
6753 clippathunits: 'clipPathUnits',
6754 cliprule: 'clipRule',
6755 'clip-rule': 'clipRule',
6756 color: 'color',
6757 colorinterpolation: 'colorInterpolation',
6758 'color-interpolation': 'colorInterpolation',
6759 colorinterpolationfilters: 'colorInterpolationFilters',
6760 'color-interpolation-filters': 'colorInterpolationFilters',
6761 colorprofile: 'colorProfile',
6762 'color-profile': 'colorProfile',
6763 colorrendering: 'colorRendering',
6764 'color-rendering': 'colorRendering',
6765 contentscripttype: 'contentScriptType',
6766 contentstyletype: 'contentStyleType',
6767 cursor: 'cursor',
6768 cx: 'cx',
6769 cy: 'cy',
6770 d: 'd',
6771 datatype: 'datatype',
6772 decelerate: 'decelerate',
6773 descent: 'descent',
6774 diffuseconstant: 'diffuseConstant',
6775 direction: 'direction',
6776 display: 'display',
6777 divisor: 'divisor',
6778 dominantbaseline: 'dominantBaseline',
6779 'dominant-baseline': 'dominantBaseline',
6780 dur: 'dur',
6781 dx: 'dx',
6782 dy: 'dy',
6783 edgemode: 'edgeMode',
6784 elevation: 'elevation',
6785 enablebackground: 'enableBackground',
6786 'enable-background': 'enableBackground',
6787 end: 'end',
6788 exponent: 'exponent',
6789 externalresourcesrequired: 'externalResourcesRequired',
6790 fill: 'fill',
6791 fillopacity: 'fillOpacity',
6792 'fill-opacity': 'fillOpacity',
6793 fillrule: 'fillRule',
6794 'fill-rule': 'fillRule',
6795 filter: 'filter',
6796 filterres: 'filterRes',
6797 filterunits: 'filterUnits',
6798 floodopacity: 'floodOpacity',
6799 'flood-opacity': 'floodOpacity',
6800 floodcolor: 'floodColor',
6801 'flood-color': 'floodColor',
6802 focusable: 'focusable',
6803 fontfamily: 'fontFamily',
6804 'font-family': 'fontFamily',
6805 fontsize: 'fontSize',
6806 'font-size': 'fontSize',
6807 fontsizeadjust: 'fontSizeAdjust',
6808 'font-size-adjust': 'fontSizeAdjust',
6809 fontstretch: 'fontStretch',
6810 'font-stretch': 'fontStretch',
6811 fontstyle: 'fontStyle',
6812 'font-style': 'fontStyle',
6813 fontvariant: 'fontVariant',
6814 'font-variant': 'fontVariant',
6815 fontweight: 'fontWeight',
6816 'font-weight': 'fontWeight',
6817 format: 'format',
6818 from: 'from',
6819 fx: 'fx',
6820 fy: 'fy',
6821 g1: 'g1',
6822 g2: 'g2',
6823 glyphname: 'glyphName',
6824 'glyph-name': 'glyphName',
6825 glyphorientationhorizontal: 'glyphOrientationHorizontal',
6826 'glyph-orientation-horizontal': 'glyphOrientationHorizontal',
6827 glyphorientationvertical: 'glyphOrientationVertical',
6828 'glyph-orientation-vertical': 'glyphOrientationVertical',
6829 glyphref: 'glyphRef',
6830 gradienttransform: 'gradientTransform',
6831 gradientunits: 'gradientUnits',
6832 hanging: 'hanging',
6833 horizadvx: 'horizAdvX',
6834 'horiz-adv-x': 'horizAdvX',
6835 horizoriginx: 'horizOriginX',
6836 'horiz-origin-x': 'horizOriginX',
6837 ideographic: 'ideographic',
6838 imagerendering: 'imageRendering',
6839 'image-rendering': 'imageRendering',
6840 in2: 'in2',
6841 in: 'in',
6842 inlist: 'inlist',
6843 intercept: 'intercept',
6844 k1: 'k1',
6845 k2: 'k2',
6846 k3: 'k3',
6847 k4: 'k4',
6848 k: 'k',
6849 kernelmatrix: 'kernelMatrix',
6850 kernelunitlength: 'kernelUnitLength',
6851 kerning: 'kerning',
6852 keypoints: 'keyPoints',
6853 keysplines: 'keySplines',
6854 keytimes: 'keyTimes',
6855 lengthadjust: 'lengthAdjust',
6856 letterspacing: 'letterSpacing',
6857 'letter-spacing': 'letterSpacing',
6858 lightingcolor: 'lightingColor',
6859 'lighting-color': 'lightingColor',
6860 limitingconeangle: 'limitingConeAngle',
6861 local: 'local',
6862 markerend: 'markerEnd',
6863 'marker-end': 'markerEnd',
6864 markerheight: 'markerHeight',
6865 markermid: 'markerMid',
6866 'marker-mid': 'markerMid',
6867 markerstart: 'markerStart',
6868 'marker-start': 'markerStart',
6869 markerunits: 'markerUnits',
6870 markerwidth: 'markerWidth',
6871 mask: 'mask',
6872 maskcontentunits: 'maskContentUnits',
6873 maskunits: 'maskUnits',
6874 mathematical: 'mathematical',
6875 mode: 'mode',
6876 numoctaves: 'numOctaves',
6877 offset: 'offset',
6878 opacity: 'opacity',
6879 operator: 'operator',
6880 order: 'order',
6881 orient: 'orient',
6882 orientation: 'orientation',
6883 origin: 'origin',
6884 overflow: 'overflow',
6885 overlineposition: 'overlinePosition',
6886 'overline-position': 'overlinePosition',
6887 overlinethickness: 'overlineThickness',
6888 'overline-thickness': 'overlineThickness',
6889 paintorder: 'paintOrder',
6890 'paint-order': 'paintOrder',
6891 panose1: 'panose1',
6892 'panose-1': 'panose1',
6893 pathlength: 'pathLength',
6894 patterncontentunits: 'patternContentUnits',
6895 patterntransform: 'patternTransform',
6896 patternunits: 'patternUnits',
6897 pointerevents: 'pointerEvents',
6898 'pointer-events': 'pointerEvents',
6899 points: 'points',
6900 pointsatx: 'pointsAtX',
6901 pointsaty: 'pointsAtY',
6902 pointsatz: 'pointsAtZ',
6903 prefix: 'prefix',
6904 preservealpha: 'preserveAlpha',
6905 preserveaspectratio: 'preserveAspectRatio',
6906 primitiveunits: 'primitiveUnits',
6907 property: 'property',
6908 r: 'r',
6909 radius: 'radius',
6910 refx: 'refX',
6911 refy: 'refY',
6912 renderingintent: 'renderingIntent',
6913 'rendering-intent': 'renderingIntent',
6914 repeatcount: 'repeatCount',
6915 repeatdur: 'repeatDur',
6916 requiredextensions: 'requiredExtensions',
6917 requiredfeatures: 'requiredFeatures',
6918 resource: 'resource',
6919 restart: 'restart',
6920 result: 'result',
6921 results: 'results',
6922 rotate: 'rotate',
6923 rx: 'rx',
6924 ry: 'ry',
6925 scale: 'scale',
6926 security: 'security',
6927 seed: 'seed',
6928 shaperendering: 'shapeRendering',
6929 'shape-rendering': 'shapeRendering',
6930 slope: 'slope',
6931 spacing: 'spacing',
6932 specularconstant: 'specularConstant',
6933 specularexponent: 'specularExponent',
6934 speed: 'speed',
6935 spreadmethod: 'spreadMethod',
6936 startoffset: 'startOffset',
6937 stddeviation: 'stdDeviation',
6938 stemh: 'stemh',
6939 stemv: 'stemv',
6940 stitchtiles: 'stitchTiles',
6941 stopcolor: 'stopColor',
6942 'stop-color': 'stopColor',
6943 stopopacity: 'stopOpacity',
6944 'stop-opacity': 'stopOpacity',
6945 strikethroughposition: 'strikethroughPosition',
6946 'strikethrough-position': 'strikethroughPosition',
6947 strikethroughthickness: 'strikethroughThickness',
6948 'strikethrough-thickness': 'strikethroughThickness',
6949 string: 'string',
6950 stroke: 'stroke',
6951 strokedasharray: 'strokeDasharray',
6952 'stroke-dasharray': 'strokeDasharray',
6953 strokedashoffset: 'strokeDashoffset',
6954 'stroke-dashoffset': 'strokeDashoffset',
6955 strokelinecap: 'strokeLinecap',
6956 'stroke-linecap': 'strokeLinecap',
6957 strokelinejoin: 'strokeLinejoin',
6958 'stroke-linejoin': 'strokeLinejoin',
6959 strokemiterlimit: 'strokeMiterlimit',
6960 'stroke-miterlimit': 'strokeMiterlimit',
6961 strokewidth: 'strokeWidth',
6962 'stroke-width': 'strokeWidth',
6963 strokeopacity: 'strokeOpacity',
6964 'stroke-opacity': 'strokeOpacity',
6965 suppresscontenteditablewarning: 'suppressContentEditableWarning',
6966 suppresshydrationwarning: 'suppressHydrationWarning',
6967 surfacescale: 'surfaceScale',
6968 systemlanguage: 'systemLanguage',
6969 tablevalues: 'tableValues',
6970 targetx: 'targetX',
6971 targety: 'targetY',
6972 textanchor: 'textAnchor',
6973 'text-anchor': 'textAnchor',
6974 textdecoration: 'textDecoration',
6975 'text-decoration': 'textDecoration',
6976 textlength: 'textLength',
6977 textrendering: 'textRendering',
6978 'text-rendering': 'textRendering',
6979 to: 'to',
6980 transform: 'transform',
6981 typeof: 'typeof',
6982 u1: 'u1',
6983 u2: 'u2',
6984 underlineposition: 'underlinePosition',
6985 'underline-position': 'underlinePosition',
6986 underlinethickness: 'underlineThickness',
6987 'underline-thickness': 'underlineThickness',
6988 unicode: 'unicode',
6989 unicodebidi: 'unicodeBidi',
6990 'unicode-bidi': 'unicodeBidi',
6991 unicoderange: 'unicodeRange',
6992 'unicode-range': 'unicodeRange',
6993 unitsperem: 'unitsPerEm',
6994 'units-per-em': 'unitsPerEm',
6995 unselectable: 'unselectable',
6996 valphabetic: 'vAlphabetic',
6997 'v-alphabetic': 'vAlphabetic',
6998 values: 'values',
6999 vectoreffect: 'vectorEffect',
7000 'vector-effect': 'vectorEffect',
7001 version: 'version',
7002 vertadvy: 'vertAdvY',
7003 'vert-adv-y': 'vertAdvY',
7004 vertoriginx: 'vertOriginX',
7005 'vert-origin-x': 'vertOriginX',
7006 vertoriginy: 'vertOriginY',
7007 'vert-origin-y': 'vertOriginY',
7008 vhanging: 'vHanging',
7009 'v-hanging': 'vHanging',
7010 videographic: 'vIdeographic',
7011 'v-ideographic': 'vIdeographic',
7012 viewbox: 'viewBox',
7013 viewtarget: 'viewTarget',
7014 visibility: 'visibility',
7015 vmathematical: 'vMathematical',
7016 'v-mathematical': 'vMathematical',
7017 vocab: 'vocab',
7018 widths: 'widths',
7019 wordspacing: 'wordSpacing',
7020 'word-spacing': 'wordSpacing',
7021 writingmode: 'writingMode',
7022 'writing-mode': 'writingMode',
7023 x1: 'x1',
7024 x2: 'x2',
7025 x: 'x',
7026 xchannelselector: 'xChannelSelector',
7027 xheight: 'xHeight',
7028 'x-height': 'xHeight',
7029 xlinkactuate: 'xlinkActuate',
7030 'xlink:actuate': 'xlinkActuate',
7031 xlinkarcrole: 'xlinkArcrole',
7032 'xlink:arcrole': 'xlinkArcrole',
7033 xlinkhref: 'xlinkHref',
7034 'xlink:href': 'xlinkHref',
7035 xlinkrole: 'xlinkRole',
7036 'xlink:role': 'xlinkRole',
7037 xlinkshow: 'xlinkShow',
7038 'xlink:show': 'xlinkShow',
7039 xlinktitle: 'xlinkTitle',
7040 'xlink:title': 'xlinkTitle',
7041 xlinktype: 'xlinkType',
7042 'xlink:type': 'xlinkType',
7043 xmlbase: 'xmlBase',
7044 'xml:base': 'xmlBase',
7045 xmllang: 'xmlLang',
7046 'xml:lang': 'xmlLang',
7047 xmlns: 'xmlns',
7048 'xml:space': 'xmlSpace',
7049 xmlnsxlink: 'xmlnsXlink',
7050 'xmlns:xlink': 'xmlnsXlink',
7051 xmlspace: 'xmlSpace',
7052 y1: 'y1',
7053 y2: 'y2',
7054 y: 'y',
7055 ychannelselector: 'yChannelSelector',
7056 z: 'z',
7057 zoomandpan: 'zoomAndPan'
7058};
7059
7060var ariaProperties = {
7061 'aria-current': 0, // state
7062 'aria-details': 0,
7063 'aria-disabled': 0, // state
7064 'aria-hidden': 0, // state
7065 'aria-invalid': 0, // state
7066 'aria-keyshortcuts': 0,
7067 'aria-label': 0,
7068 'aria-roledescription': 0,
7069 // Widget Attributes
7070 'aria-autocomplete': 0,
7071 'aria-checked': 0,
7072 'aria-expanded': 0,
7073 'aria-haspopup': 0,
7074 'aria-level': 0,
7075 'aria-modal': 0,
7076 'aria-multiline': 0,
7077 'aria-multiselectable': 0,
7078 'aria-orientation': 0,
7079 'aria-placeholder': 0,
7080 'aria-pressed': 0,
7081 'aria-readonly': 0,
7082 'aria-required': 0,
7083 'aria-selected': 0,
7084 'aria-sort': 0,
7085 'aria-valuemax': 0,
7086 'aria-valuemin': 0,
7087 'aria-valuenow': 0,
7088 'aria-valuetext': 0,
7089 // Live Region Attributes
7090 'aria-atomic': 0,
7091 'aria-busy': 0,
7092 'aria-live': 0,
7093 'aria-relevant': 0,
7094 // Drag-and-Drop Attributes
7095 'aria-dropeffect': 0,
7096 'aria-grabbed': 0,
7097 // Relationship Attributes
7098 'aria-activedescendant': 0,
7099 'aria-colcount': 0,
7100 'aria-colindex': 0,
7101 'aria-colspan': 0,
7102 'aria-controls': 0,
7103 'aria-describedby': 0,
7104 'aria-errormessage': 0,
7105 'aria-flowto': 0,
7106 'aria-labelledby': 0,
7107 'aria-owns': 0,
7108 'aria-posinset': 0,
7109 'aria-rowcount': 0,
7110 'aria-rowindex': 0,
7111 'aria-rowspan': 0,
7112 'aria-setsize': 0
7113};
7114
7115var warnedProperties = {};
7116var rARIA = new RegExp('^(aria)-[' + ATTRIBUTE_NAME_CHAR + ']*$');
7117var rARIACamel = new RegExp('^(aria)[A-Z][' + ATTRIBUTE_NAME_CHAR + ']*$');
7118
7119var hasOwnProperty$2 = Object.prototype.hasOwnProperty;
7120
7121function validateProperty(tagName, name) {
7122 if (hasOwnProperty$2.call(warnedProperties, name) && warnedProperties[name]) {
7123 return true;
7124 }
7125
7126 if (rARIACamel.test(name)) {
7127 var ariaName = 'aria-' + name.slice(4).toLowerCase();
7128 var correctName = ariaProperties.hasOwnProperty(ariaName) ? ariaName : null;
7129
7130 // If this is an aria-* attribute, but is not listed in the known DOM
7131 // DOM properties, then it is an invalid aria-* attribute.
7132 if (correctName == null) {
7133 warning$1(false, 'Invalid ARIA attribute `%s`. ARIA attributes follow the pattern aria-* and must be lowercase.', name);
7134 warnedProperties[name] = true;
7135 return true;
7136 }
7137 // aria-* attributes should be lowercase; suggest the lowercase version.
7138 if (name !== correctName) {
7139 warning$1(false, 'Invalid ARIA attribute `%s`. Did you mean `%s`?', name, correctName);
7140 warnedProperties[name] = true;
7141 return true;
7142 }
7143 }
7144
7145 if (rARIA.test(name)) {
7146 var lowerCasedName = name.toLowerCase();
7147 var standardName = ariaProperties.hasOwnProperty(lowerCasedName) ? lowerCasedName : null;
7148
7149 // If this is an aria-* attribute, but is not listed in the known DOM
7150 // DOM properties, then it is an invalid aria-* attribute.
7151 if (standardName == null) {
7152 warnedProperties[name] = true;
7153 return false;
7154 }
7155 // aria-* attributes should be lowercase; suggest the lowercase version.
7156 if (name !== standardName) {
7157 warning$1(false, 'Unknown ARIA attribute `%s`. Did you mean `%s`?', name, standardName);
7158 warnedProperties[name] = true;
7159 return true;
7160 }
7161 }
7162
7163 return true;
7164}
7165
7166function warnInvalidARIAProps(type, props) {
7167 var invalidProps = [];
7168
7169 for (var key in props) {
7170 var isValid = validateProperty(type, key);
7171 if (!isValid) {
7172 invalidProps.push(key);
7173 }
7174 }
7175
7176 var unknownPropString = invalidProps.map(function (prop) {
7177 return '`' + prop + '`';
7178 }).join(', ');
7179
7180 if (invalidProps.length === 1) {
7181 warning$1(false, 'Invalid aria prop %s on <%s> tag. ' + 'For details, see https://fb.me/invalid-aria-prop', unknownPropString, type);
7182 } else if (invalidProps.length > 1) {
7183 warning$1(false, 'Invalid aria props %s on <%s> tag. ' + 'For details, see https://fb.me/invalid-aria-prop', unknownPropString, type);
7184 }
7185}
7186
7187function validateProperties(type, props) {
7188 if (isCustomComponent(type, props)) {
7189 return;
7190 }
7191 warnInvalidARIAProps(type, props);
7192}
7193
7194var didWarnValueNull = false;
7195
7196function validateProperties$1(type, props) {
7197 if (type !== 'input' && type !== 'textarea' && type !== 'select') {
7198 return;
7199 }
7200
7201 if (props != null && props.value === null && !didWarnValueNull) {
7202 didWarnValueNull = true;
7203 if (type === 'select' && props.multiple) {
7204 warning$1(false, '`value` prop on `%s` should not be null. ' + 'Consider using an empty array when `multiple` is set to `true` ' + 'to clear the component or `undefined` for uncontrolled components.', type);
7205 } else {
7206 warning$1(false, '`value` prop on `%s` should not be null. ' + 'Consider using an empty string to clear the component or `undefined` ' + 'for uncontrolled components.', type);
7207 }
7208 }
7209}
7210
7211var validateProperty$1 = function () {};
7212
7213{
7214 var warnedProperties$1 = {};
7215 var _hasOwnProperty = Object.prototype.hasOwnProperty;
7216 var EVENT_NAME_REGEX = /^on./;
7217 var INVALID_EVENT_NAME_REGEX = /^on[^A-Z]/;
7218 var rARIA$1 = new RegExp('^(aria)-[' + ATTRIBUTE_NAME_CHAR + ']*$');
7219 var rARIACamel$1 = new RegExp('^(aria)[A-Z][' + ATTRIBUTE_NAME_CHAR + ']*$');
7220
7221 validateProperty$1 = function (tagName, name, value, canUseEventSystem) {
7222 if (_hasOwnProperty.call(warnedProperties$1, name) && warnedProperties$1[name]) {
7223 return true;
7224 }
7225
7226 var lowerCasedName = name.toLowerCase();
7227 if (lowerCasedName === 'onfocusin' || lowerCasedName === 'onfocusout') {
7228 warning$1(false, 'React uses onFocus and onBlur instead of onFocusIn and onFocusOut. ' + 'All React events are normalized to bubble, so onFocusIn and onFocusOut ' + 'are not needed/supported by React.');
7229 warnedProperties$1[name] = true;
7230 return true;
7231 }
7232
7233 // We can't rely on the event system being injected on the server.
7234 if (canUseEventSystem) {
7235 if (registrationNameModules.hasOwnProperty(name)) {
7236 return true;
7237 }
7238 var registrationName = possibleRegistrationNames.hasOwnProperty(lowerCasedName) ? possibleRegistrationNames[lowerCasedName] : null;
7239 if (registrationName != null) {
7240 warning$1(false, 'Invalid event handler property `%s`. Did you mean `%s`?', name, registrationName);
7241 warnedProperties$1[name] = true;
7242 return true;
7243 }
7244 if (EVENT_NAME_REGEX.test(name)) {
7245 warning$1(false, 'Unknown event handler property `%s`. It will be ignored.', name);
7246 warnedProperties$1[name] = true;
7247 return true;
7248 }
7249 } else if (EVENT_NAME_REGEX.test(name)) {
7250 // If no event plugins have been injected, we are in a server environment.
7251 // So we can't tell if the event name is correct for sure, but we can filter
7252 // out known bad ones like `onclick`. We can't suggest a specific replacement though.
7253 if (INVALID_EVENT_NAME_REGEX.test(name)) {
7254 warning$1(false, 'Invalid event handler property `%s`. ' + 'React events use the camelCase naming convention, for example `onClick`.', name);
7255 }
7256 warnedProperties$1[name] = true;
7257 return true;
7258 }
7259
7260 // Let the ARIA attribute hook validate ARIA attributes
7261 if (rARIA$1.test(name) || rARIACamel$1.test(name)) {
7262 return true;
7263 }
7264
7265 if (lowerCasedName === 'innerhtml') {
7266 warning$1(false, 'Directly setting property `innerHTML` is not permitted. ' + 'For more information, lookup documentation on `dangerouslySetInnerHTML`.');
7267 warnedProperties$1[name] = true;
7268 return true;
7269 }
7270
7271 if (lowerCasedName === 'aria') {
7272 warning$1(false, 'The `aria` attribute is reserved for future use in React. ' + 'Pass individual `aria-` attributes instead.');
7273 warnedProperties$1[name] = true;
7274 return true;
7275 }
7276
7277 if (lowerCasedName === 'is' && value !== null && value !== undefined && typeof value !== 'string') {
7278 warning$1(false, 'Received a `%s` for a string attribute `is`. If this is expected, cast ' + 'the value to a string.', typeof value);
7279 warnedProperties$1[name] = true;
7280 return true;
7281 }
7282
7283 if (typeof value === 'number' && isNaN(value)) {
7284 warning$1(false, 'Received NaN for the `%s` attribute. If this is expected, cast ' + 'the value to a string.', name);
7285 warnedProperties$1[name] = true;
7286 return true;
7287 }
7288
7289 var propertyInfo = getPropertyInfo(name);
7290 var isReserved = propertyInfo !== null && propertyInfo.type === RESERVED;
7291
7292 // Known attributes should match the casing specified in the property config.
7293 if (possibleStandardNames.hasOwnProperty(lowerCasedName)) {
7294 var standardName = possibleStandardNames[lowerCasedName];
7295 if (standardName !== name) {
7296 warning$1(false, 'Invalid DOM property `%s`. Did you mean `%s`?', name, standardName);
7297 warnedProperties$1[name] = true;
7298 return true;
7299 }
7300 } else if (!isReserved && name !== lowerCasedName) {
7301 // Unknown attributes should have lowercase casing since that's how they
7302 // will be cased anyway with server rendering.
7303 warning$1(false, 'React does not recognize the `%s` prop on a DOM element. If you ' + 'intentionally want it to appear in the DOM as a custom ' + 'attribute, spell it as lowercase `%s` instead. ' + 'If you accidentally passed it from a parent component, remove ' + 'it from the DOM element.', name, lowerCasedName);
7304 warnedProperties$1[name] = true;
7305 return true;
7306 }
7307
7308 if (typeof value === 'boolean' && shouldRemoveAttributeWithWarning(name, value, propertyInfo, false)) {
7309 if (value) {
7310 warning$1(false, 'Received `%s` for a non-boolean attribute `%s`.\n\n' + 'If you want to write it to the DOM, pass a string instead: ' + '%s="%s" or %s={value.toString()}.', value, name, name, value, name);
7311 } else {
7312 warning$1(false, 'Received `%s` for a non-boolean attribute `%s`.\n\n' + 'If you want to write it to the DOM, pass a string instead: ' + '%s="%s" or %s={value.toString()}.\n\n' + 'If you used to conditionally omit it with %s={condition && value}, ' + 'pass %s={condition ? value : undefined} instead.', value, name, name, value, name, name, name);
7313 }
7314 warnedProperties$1[name] = true;
7315 return true;
7316 }
7317
7318 // Now that we've validated casing, do not validate
7319 // data types for reserved props
7320 if (isReserved) {
7321 return true;
7322 }
7323
7324 // Warn when a known attribute is a bad type
7325 if (shouldRemoveAttributeWithWarning(name, value, propertyInfo, false)) {
7326 warnedProperties$1[name] = true;
7327 return false;
7328 }
7329
7330 // Warn when passing the strings 'false' or 'true' into a boolean prop
7331 if ((value === 'false' || value === 'true') && propertyInfo !== null && propertyInfo.type === BOOLEAN) {
7332 warning$1(false, 'Received the string `%s` for the boolean attribute `%s`. ' + '%s ' + 'Did you mean %s={%s}?', value, name, value === 'false' ? 'The browser will interpret it as a truthy value.' : 'Although this works, it will not work as expected if you pass the string "false".', name, value);
7333 warnedProperties$1[name] = true;
7334 return true;
7335 }
7336
7337 return true;
7338 };
7339}
7340
7341var warnUnknownProperties = function (type, props, canUseEventSystem) {
7342 var unknownProps = [];
7343 for (var key in props) {
7344 var isValid = validateProperty$1(type, key, props[key], canUseEventSystem);
7345 if (!isValid) {
7346 unknownProps.push(key);
7347 }
7348 }
7349
7350 var unknownPropString = unknownProps.map(function (prop) {
7351 return '`' + prop + '`';
7352 }).join(', ');
7353 if (unknownProps.length === 1) {
7354 warning$1(false, 'Invalid value for prop %s on <%s> tag. Either remove it from the element, ' + 'or pass a string or number value to keep it in the DOM. ' + 'For details, see https://fb.me/react-attribute-behavior', unknownPropString, type);
7355 } else if (unknownProps.length > 1) {
7356 warning$1(false, 'Invalid values for props %s on <%s> tag. Either remove them from the element, ' + 'or pass a string or number value to keep them in the DOM. ' + 'For details, see https://fb.me/react-attribute-behavior', unknownPropString, type);
7357 }
7358};
7359
7360function validateProperties$2(type, props, canUseEventSystem) {
7361 if (isCustomComponent(type, props)) {
7362 return;
7363 }
7364 warnUnknownProperties(type, props, canUseEventSystem);
7365}
7366
7367// TODO: direct imports like some-package/src/* are bad. Fix me.
7368var didWarnInvalidHydration = false;
7369var didWarnShadyDOM = false;
7370
7371var DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
7372var SUPPRESS_CONTENT_EDITABLE_WARNING = 'suppressContentEditableWarning';
7373var SUPPRESS_HYDRATION_WARNING$1 = 'suppressHydrationWarning';
7374var AUTOFOCUS = 'autoFocus';
7375var CHILDREN = 'children';
7376var STYLE$1 = 'style';
7377var HTML = '__html';
7378
7379var HTML_NAMESPACE = Namespaces.html;
7380
7381
7382var warnedUnknownTags = void 0;
7383var suppressHydrationWarning = void 0;
7384
7385var validatePropertiesInDevelopment = void 0;
7386var warnForTextDifference = void 0;
7387var warnForPropDifference = void 0;
7388var warnForExtraAttributes = void 0;
7389var warnForInvalidEventListener = void 0;
7390var canDiffStyleForHydrationWarning = void 0;
7391
7392var normalizeMarkupForTextOrAttribute = void 0;
7393var normalizeHTML = void 0;
7394
7395{
7396 warnedUnknownTags = {
7397 // Chrome is the only major browser not shipping <time>. But as of July
7398 // 2017 it intends to ship it due to widespread usage. We intentionally
7399 // *don't* warn for <time> even if it's unrecognized by Chrome because
7400 // it soon will be, and many apps have been using it anyway.
7401 time: true,
7402 // There are working polyfills for <dialog>. Let people use it.
7403 dialog: true,
7404 // Electron ships a custom <webview> tag to display external web content in
7405 // an isolated frame and process.
7406 // This tag is not present in non Electron environments such as JSDom which
7407 // is often used for testing purposes.
7408 // @see https://electronjs.org/docs/api/webview-tag
7409 webview: true
7410 };
7411
7412 validatePropertiesInDevelopment = function (type, props) {
7413 validateProperties(type, props);
7414 validateProperties$1(type, props);
7415 validateProperties$2(type, props, /* canUseEventSystem */true);
7416 };
7417
7418 // IE 11 parses & normalizes the style attribute as opposed to other
7419 // browsers. It adds spaces and sorts the properties in some
7420 // non-alphabetical order. Handling that would require sorting CSS
7421 // properties in the client & server versions or applying
7422 // `expectedStyle` to a temporary DOM node to read its `style` attribute
7423 // normalized. Since it only affects IE, we're skipping style warnings
7424 // in that browser completely in favor of doing all that work.
7425 // See https://github.com/facebook/react/issues/11807
7426 canDiffStyleForHydrationWarning = canUseDOM && !document.documentMode;
7427
7428 // HTML parsing normalizes CR and CRLF to LF.
7429 // It also can turn \u0000 into \uFFFD inside attributes.
7430 // https://www.w3.org/TR/html5/single-page.html#preprocessing-the-input-stream
7431 // If we have a mismatch, it might be caused by that.
7432 // We will still patch up in this case but not fire the warning.
7433 var NORMALIZE_NEWLINES_REGEX = /\r\n?/g;
7434 var NORMALIZE_NULL_AND_REPLACEMENT_REGEX = /\u0000|\uFFFD/g;
7435
7436 normalizeMarkupForTextOrAttribute = function (markup) {
7437 var markupString = typeof markup === 'string' ? markup : '' + markup;
7438 return markupString.replace(NORMALIZE_NEWLINES_REGEX, '\n').replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, '');
7439 };
7440
7441 warnForTextDifference = function (serverText, clientText) {
7442 if (didWarnInvalidHydration) {
7443 return;
7444 }
7445 var normalizedClientText = normalizeMarkupForTextOrAttribute(clientText);
7446 var normalizedServerText = normalizeMarkupForTextOrAttribute(serverText);
7447 if (normalizedServerText === normalizedClientText) {
7448 return;
7449 }
7450 didWarnInvalidHydration = true;
7451 warningWithoutStack$1(false, 'Text content did not match. Server: "%s" Client: "%s"', normalizedServerText, normalizedClientText);
7452 };
7453
7454 warnForPropDifference = function (propName, serverValue, clientValue) {
7455 if (didWarnInvalidHydration) {
7456 return;
7457 }
7458 var normalizedClientValue = normalizeMarkupForTextOrAttribute(clientValue);
7459 var normalizedServerValue = normalizeMarkupForTextOrAttribute(serverValue);
7460 if (normalizedServerValue === normalizedClientValue) {
7461 return;
7462 }
7463 didWarnInvalidHydration = true;
7464 warningWithoutStack$1(false, 'Prop `%s` did not match. Server: %s Client: %s', propName, JSON.stringify(normalizedServerValue), JSON.stringify(normalizedClientValue));
7465 };
7466
7467 warnForExtraAttributes = function (attributeNames) {
7468 if (didWarnInvalidHydration) {
7469 return;
7470 }
7471 didWarnInvalidHydration = true;
7472 var names = [];
7473 attributeNames.forEach(function (name) {
7474 names.push(name);
7475 });
7476 warningWithoutStack$1(false, 'Extra attributes from the server: %s', names);
7477 };
7478
7479 warnForInvalidEventListener = function (registrationName, listener) {
7480 if (listener === false) {
7481 warning$1(false, 'Expected `%s` listener to be a function, instead got `false`.\n\n' + 'If you used to conditionally omit it with %s={condition && value}, ' + 'pass %s={condition ? value : undefined} instead.', registrationName, registrationName, registrationName);
7482 } else {
7483 warning$1(false, 'Expected `%s` listener to be a function, instead got a value of `%s` type.', registrationName, typeof listener);
7484 }
7485 };
7486
7487 // Parse the HTML and read it back to normalize the HTML string so that it
7488 // can be used for comparison.
7489 normalizeHTML = function (parent, html) {
7490 // We could have created a separate document here to avoid
7491 // re-initializing custom elements if they exist. But this breaks
7492 // how <noscript> is being handled. So we use the same document.
7493 // See the discussion in https://github.com/facebook/react/pull/11157.
7494 var testElement = parent.namespaceURI === HTML_NAMESPACE ? parent.ownerDocument.createElement(parent.tagName) : parent.ownerDocument.createElementNS(parent.namespaceURI, parent.tagName);
7495 testElement.innerHTML = html;
7496 return testElement.innerHTML;
7497 };
7498}
7499
7500function ensureListeningTo(rootContainerElement, registrationName) {
7501 var isDocumentOrFragment = rootContainerElement.nodeType === DOCUMENT_NODE || rootContainerElement.nodeType === DOCUMENT_FRAGMENT_NODE;
7502 var doc = isDocumentOrFragment ? rootContainerElement : rootContainerElement.ownerDocument;
7503 listenTo(registrationName, doc);
7504}
7505
7506function getOwnerDocumentFromRootContainer(rootContainerElement) {
7507 return rootContainerElement.nodeType === DOCUMENT_NODE ? rootContainerElement : rootContainerElement.ownerDocument;
7508}
7509
7510function noop() {}
7511
7512function trapClickOnNonInteractiveElement(node) {
7513 // Mobile Safari does not fire properly bubble click events on
7514 // non-interactive elements, which means delegated click listeners do not
7515 // fire. The workaround for this bug involves attaching an empty click
7516 // listener on the target node.
7517 // http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
7518 // Just set it using the onclick property so that we don't have to manage any
7519 // bookkeeping for it. Not sure if we need to clear it when the listener is
7520 // removed.
7521 // TODO: Only do this for the relevant Safaris maybe?
7522 node.onclick = noop;
7523}
7524
7525function setInitialDOMProperties(tag, domElement, rootContainerElement, nextProps, isCustomComponentTag) {
7526 for (var propKey in nextProps) {
7527 if (!nextProps.hasOwnProperty(propKey)) {
7528 continue;
7529 }
7530 var nextProp = nextProps[propKey];
7531 if (propKey === STYLE$1) {
7532 {
7533 if (nextProp) {
7534 // Freeze the next style object so that we can assume it won't be
7535 // mutated. We have already warned for this in the past.
7536 Object.freeze(nextProp);
7537 }
7538 }
7539 // Relies on `updateStylesByID` not mutating `styleUpdates`.
7540 setValueForStyles(domElement, nextProp);
7541 } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
7542 var nextHtml = nextProp ? nextProp[HTML] : undefined;
7543 if (nextHtml != null) {
7544 setInnerHTML(domElement, nextHtml);
7545 }
7546 } else if (propKey === CHILDREN) {
7547 if (typeof nextProp === 'string') {
7548 // Avoid setting initial textContent when the text is empty. In IE11 setting
7549 // textContent on a <textarea> will cause the placeholder to not
7550 // show within the <textarea> until it has been focused and blurred again.
7551 // https://github.com/facebook/react/issues/6731#issuecomment-254874553
7552 var canSetTextContent = tag !== 'textarea' || nextProp !== '';
7553 if (canSetTextContent) {
7554 setTextContent(domElement, nextProp);
7555 }
7556 } else if (typeof nextProp === 'number') {
7557 setTextContent(domElement, '' + nextProp);
7558 }
7559 } else if (propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING$1) {
7560 // Noop
7561 } else if (propKey === AUTOFOCUS) {
7562 // We polyfill it separately on the client during commit.
7563 // We could have excluded it in the property list instead of
7564 // adding a special case here, but then it wouldn't be emitted
7565 // on server rendering (but we *do* want to emit it in SSR).
7566 } else if (registrationNameModules.hasOwnProperty(propKey)) {
7567 if (nextProp != null) {
7568 if (true && typeof nextProp !== 'function') {
7569 warnForInvalidEventListener(propKey, nextProp);
7570 }
7571 ensureListeningTo(rootContainerElement, propKey);
7572 }
7573 } else if (nextProp != null) {
7574 setValueForProperty(domElement, propKey, nextProp, isCustomComponentTag);
7575 }
7576 }
7577}
7578
7579function updateDOMProperties(domElement, updatePayload, wasCustomComponentTag, isCustomComponentTag) {
7580 // TODO: Handle wasCustomComponentTag
7581 for (var i = 0; i < updatePayload.length; i += 2) {
7582 var propKey = updatePayload[i];
7583 var propValue = updatePayload[i + 1];
7584 if (propKey === STYLE$1) {
7585 setValueForStyles(domElement, propValue);
7586 } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
7587 setInnerHTML(domElement, propValue);
7588 } else if (propKey === CHILDREN) {
7589 setTextContent(domElement, propValue);
7590 } else {
7591 setValueForProperty(domElement, propKey, propValue, isCustomComponentTag);
7592 }
7593 }
7594}
7595
7596function createElement(type, props, rootContainerElement, parentNamespace) {
7597 var isCustomComponentTag = void 0;
7598
7599 // We create tags in the namespace of their parent container, except HTML
7600 // tags get no namespace.
7601 var ownerDocument = getOwnerDocumentFromRootContainer(rootContainerElement);
7602 var domElement = void 0;
7603 var namespaceURI = parentNamespace;
7604 if (namespaceURI === HTML_NAMESPACE) {
7605 namespaceURI = getIntrinsicNamespace(type);
7606 }
7607 if (namespaceURI === HTML_NAMESPACE) {
7608 {
7609 isCustomComponentTag = isCustomComponent(type, props);
7610 // Should this check be gated by parent namespace? Not sure we want to
7611 // allow <SVG> or <mATH>.
7612 !(isCustomComponentTag || type === type.toLowerCase()) ? warning$1(false, '<%s /> is using incorrect casing. ' + 'Use PascalCase for React components, ' + 'or lowercase for HTML elements.', type) : void 0;
7613 }
7614
7615 if (type === 'script') {
7616 // Create the script via .innerHTML so its "parser-inserted" flag is
7617 // set to true and it does not execute
7618 var div = ownerDocument.createElement('div');
7619 div.innerHTML = '<script><' + '/script>'; // eslint-disable-line
7620 // This is guaranteed to yield a script element.
7621 var firstChild = div.firstChild;
7622 domElement = div.removeChild(firstChild);
7623 } else if (typeof props.is === 'string') {
7624 // $FlowIssue `createElement` should be updated for Web Components
7625 domElement = ownerDocument.createElement(type, { is: props.is });
7626 } else {
7627 // Separate else branch instead of using `props.is || undefined` above because of a Firefox bug.
7628 // See discussion in https://github.com/facebook/react/pull/6896
7629 // and discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1276240
7630 domElement = ownerDocument.createElement(type);
7631 // Normally attributes are assigned in `setInitialDOMProperties`, however the `multiple`
7632 // attribute on `select`s needs to be added before `option`s are inserted. This prevents
7633 // a bug where the `select` does not scroll to the correct option because singular
7634 // `select` elements automatically pick the first item.
7635 // See https://github.com/facebook/react/issues/13222
7636 if (type === 'select' && props.multiple) {
7637 var node = domElement;
7638 node.multiple = true;
7639 }
7640 }
7641 } else {
7642 domElement = ownerDocument.createElementNS(namespaceURI, type);
7643 }
7644
7645 {
7646 if (namespaceURI === HTML_NAMESPACE) {
7647 if (!isCustomComponentTag && Object.prototype.toString.call(domElement) === '[object HTMLUnknownElement]' && !Object.prototype.hasOwnProperty.call(warnedUnknownTags, type)) {
7648 warnedUnknownTags[type] = true;
7649 warning$1(false, 'The tag <%s> is unrecognized in this browser. ' + 'If you meant to render a React component, start its name with ' + 'an uppercase letter.', type);
7650 }
7651 }
7652 }
7653
7654 return domElement;
7655}
7656
7657function createTextNode(text, rootContainerElement) {
7658 return getOwnerDocumentFromRootContainer(rootContainerElement).createTextNode(text);
7659}
7660
7661function setInitialProperties(domElement, tag, rawProps, rootContainerElement) {
7662 var isCustomComponentTag = isCustomComponent(tag, rawProps);
7663 {
7664 validatePropertiesInDevelopment(tag, rawProps);
7665 if (isCustomComponentTag && !didWarnShadyDOM && domElement.shadyRoot) {
7666 warning$1(false, '%s is using shady DOM. Using shady DOM with React can ' + 'cause things to break subtly.', getCurrentFiberOwnerNameInDevOrNull() || 'A component');
7667 didWarnShadyDOM = true;
7668 }
7669 }
7670
7671 // TODO: Make sure that we check isMounted before firing any of these events.
7672 var props = void 0;
7673 switch (tag) {
7674 case 'iframe':
7675 case 'object':
7676 trapBubbledEvent(TOP_LOAD, domElement);
7677 props = rawProps;
7678 break;
7679 case 'video':
7680 case 'audio':
7681 // Create listener for each media event
7682 for (var i = 0; i < mediaEventTypes.length; i++) {
7683 trapBubbledEvent(mediaEventTypes[i], domElement);
7684 }
7685 props = rawProps;
7686 break;
7687 case 'source':
7688 trapBubbledEvent(TOP_ERROR, domElement);
7689 props = rawProps;
7690 break;
7691 case 'img':
7692 case 'image':
7693 case 'link':
7694 trapBubbledEvent(TOP_ERROR, domElement);
7695 trapBubbledEvent(TOP_LOAD, domElement);
7696 props = rawProps;
7697 break;
7698 case 'form':
7699 trapBubbledEvent(TOP_RESET, domElement);
7700 trapBubbledEvent(TOP_SUBMIT, domElement);
7701 props = rawProps;
7702 break;
7703 case 'details':
7704 trapBubbledEvent(TOP_TOGGLE, domElement);
7705 props = rawProps;
7706 break;
7707 case 'input':
7708 initWrapperState(domElement, rawProps);
7709 props = getHostProps(domElement, rawProps);
7710 trapBubbledEvent(TOP_INVALID, domElement);
7711 // For controlled components we always need to ensure we're listening
7712 // to onChange. Even if there is no listener.
7713 ensureListeningTo(rootContainerElement, 'onChange');
7714 break;
7715 case 'option':
7716 validateProps(domElement, rawProps);
7717 props = getHostProps$1(domElement, rawProps);
7718 break;
7719 case 'select':
7720 initWrapperState$1(domElement, rawProps);
7721 props = getHostProps$2(domElement, rawProps);
7722 trapBubbledEvent(TOP_INVALID, domElement);
7723 // For controlled components we always need to ensure we're listening
7724 // to onChange. Even if there is no listener.
7725 ensureListeningTo(rootContainerElement, 'onChange');
7726 break;
7727 case 'textarea':
7728 initWrapperState$2(domElement, rawProps);
7729 props = getHostProps$3(domElement, rawProps);
7730 trapBubbledEvent(TOP_INVALID, domElement);
7731 // For controlled components we always need to ensure we're listening
7732 // to onChange. Even if there is no listener.
7733 ensureListeningTo(rootContainerElement, 'onChange');
7734 break;
7735 default:
7736 props = rawProps;
7737 }
7738
7739 assertValidProps(tag, props);
7740
7741 setInitialDOMProperties(tag, domElement, rootContainerElement, props, isCustomComponentTag);
7742
7743 switch (tag) {
7744 case 'input':
7745 // TODO: Make sure we check if this is still unmounted or do any clean
7746 // up necessary since we never stop tracking anymore.
7747 track(domElement);
7748 postMountWrapper(domElement, rawProps, false);
7749 break;
7750 case 'textarea':
7751 // TODO: Make sure we check if this is still unmounted or do any clean
7752 // up necessary since we never stop tracking anymore.
7753 track(domElement);
7754 postMountWrapper$3(domElement, rawProps);
7755 break;
7756 case 'option':
7757 postMountWrapper$1(domElement, rawProps);
7758 break;
7759 case 'select':
7760 postMountWrapper$2(domElement, rawProps);
7761 break;
7762 default:
7763 if (typeof props.onClick === 'function') {
7764 // TODO: This cast may not be sound for SVG, MathML or custom elements.
7765 trapClickOnNonInteractiveElement(domElement);
7766 }
7767 break;
7768 }
7769}
7770
7771// Calculate the diff between the two objects.
7772function diffProperties(domElement, tag, lastRawProps, nextRawProps, rootContainerElement) {
7773 {
7774 validatePropertiesInDevelopment(tag, nextRawProps);
7775 }
7776
7777 var updatePayload = null;
7778
7779 var lastProps = void 0;
7780 var nextProps = void 0;
7781 switch (tag) {
7782 case 'input':
7783 lastProps = getHostProps(domElement, lastRawProps);
7784 nextProps = getHostProps(domElement, nextRawProps);
7785 updatePayload = [];
7786 break;
7787 case 'option':
7788 lastProps = getHostProps$1(domElement, lastRawProps);
7789 nextProps = getHostProps$1(domElement, nextRawProps);
7790 updatePayload = [];
7791 break;
7792 case 'select':
7793 lastProps = getHostProps$2(domElement, lastRawProps);
7794 nextProps = getHostProps$2(domElement, nextRawProps);
7795 updatePayload = [];
7796 break;
7797 case 'textarea':
7798 lastProps = getHostProps$3(domElement, lastRawProps);
7799 nextProps = getHostProps$3(domElement, nextRawProps);
7800 updatePayload = [];
7801 break;
7802 default:
7803 lastProps = lastRawProps;
7804 nextProps = nextRawProps;
7805 if (typeof lastProps.onClick !== 'function' && typeof nextProps.onClick === 'function') {
7806 // TODO: This cast may not be sound for SVG, MathML or custom elements.
7807 trapClickOnNonInteractiveElement(domElement);
7808 }
7809 break;
7810 }
7811
7812 assertValidProps(tag, nextProps);
7813
7814 var propKey = void 0;
7815 var styleName = void 0;
7816 var styleUpdates = null;
7817 for (propKey in lastProps) {
7818 if (nextProps.hasOwnProperty(propKey) || !lastProps.hasOwnProperty(propKey) || lastProps[propKey] == null) {
7819 continue;
7820 }
7821 if (propKey === STYLE$1) {
7822 var lastStyle = lastProps[propKey];
7823 for (styleName in lastStyle) {
7824 if (lastStyle.hasOwnProperty(styleName)) {
7825 if (!styleUpdates) {
7826 styleUpdates = {};
7827 }
7828 styleUpdates[styleName] = '';
7829 }
7830 }
7831 } else if (propKey === DANGEROUSLY_SET_INNER_HTML || propKey === CHILDREN) {
7832 // Noop. This is handled by the clear text mechanism.
7833 } else if (propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING$1) {
7834 // Noop
7835 } else if (propKey === AUTOFOCUS) {
7836 // Noop. It doesn't work on updates anyway.
7837 } else if (registrationNameModules.hasOwnProperty(propKey)) {
7838 // This is a special case. If any listener updates we need to ensure
7839 // that the "current" fiber pointer gets updated so we need a commit
7840 // to update this element.
7841 if (!updatePayload) {
7842 updatePayload = [];
7843 }
7844 } else {
7845 // For all other deleted properties we add it to the queue. We use
7846 // the whitelist in the commit phase instead.
7847 (updatePayload = updatePayload || []).push(propKey, null);
7848 }
7849 }
7850 for (propKey in nextProps) {
7851 var nextProp = nextProps[propKey];
7852 var lastProp = lastProps != null ? lastProps[propKey] : undefined;
7853 if (!nextProps.hasOwnProperty(propKey) || nextProp === lastProp || nextProp == null && lastProp == null) {
7854 continue;
7855 }
7856 if (propKey === STYLE$1) {
7857 {
7858 if (nextProp) {
7859 // Freeze the next style object so that we can assume it won't be
7860 // mutated. We have already warned for this in the past.
7861 Object.freeze(nextProp);
7862 }
7863 }
7864 if (lastProp) {
7865 // Unset styles on `lastProp` but not on `nextProp`.
7866 for (styleName in lastProp) {
7867 if (lastProp.hasOwnProperty(styleName) && (!nextProp || !nextProp.hasOwnProperty(styleName))) {
7868 if (!styleUpdates) {
7869 styleUpdates = {};
7870 }
7871 styleUpdates[styleName] = '';
7872 }
7873 }
7874 // Update styles that changed since `lastProp`.
7875 for (styleName in nextProp) {
7876 if (nextProp.hasOwnProperty(styleName) && lastProp[styleName] !== nextProp[styleName]) {
7877 if (!styleUpdates) {
7878 styleUpdates = {};
7879 }
7880 styleUpdates[styleName] = nextProp[styleName];
7881 }
7882 }
7883 } else {
7884 // Relies on `updateStylesByID` not mutating `styleUpdates`.
7885 if (!styleUpdates) {
7886 if (!updatePayload) {
7887 updatePayload = [];
7888 }
7889 updatePayload.push(propKey, styleUpdates);
7890 }
7891 styleUpdates = nextProp;
7892 }
7893 } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
7894 var nextHtml = nextProp ? nextProp[HTML] : undefined;
7895 var lastHtml = lastProp ? lastProp[HTML] : undefined;
7896 if (nextHtml != null) {
7897 if (lastHtml !== nextHtml) {
7898 (updatePayload = updatePayload || []).push(propKey, '' + nextHtml);
7899 }
7900 } else {
7901 // TODO: It might be too late to clear this if we have children
7902 // inserted already.
7903 }
7904 } else if (propKey === CHILDREN) {
7905 if (lastProp !== nextProp && (typeof nextProp === 'string' || typeof nextProp === 'number')) {
7906 (updatePayload = updatePayload || []).push(propKey, '' + nextProp);
7907 }
7908 } else if (propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING$1) {
7909 // Noop
7910 } else if (registrationNameModules.hasOwnProperty(propKey)) {
7911 if (nextProp != null) {
7912 // We eagerly listen to this even though we haven't committed yet.
7913 if (true && typeof nextProp !== 'function') {
7914 warnForInvalidEventListener(propKey, nextProp);
7915 }
7916 ensureListeningTo(rootContainerElement, propKey);
7917 }
7918 if (!updatePayload && lastProp !== nextProp) {
7919 // This is a special case. If any listener updates we need to ensure
7920 // that the "current" props pointer gets updated so we need a commit
7921 // to update this element.
7922 updatePayload = [];
7923 }
7924 } else {
7925 // For any other property we always add it to the queue and then we
7926 // filter it out using the whitelist during the commit.
7927 (updatePayload = updatePayload || []).push(propKey, nextProp);
7928 }
7929 }
7930 if (styleUpdates) {
7931 {
7932 validateShorthandPropertyCollisionInDev(styleUpdates, nextProps[STYLE$1]);
7933 }
7934 (updatePayload = updatePayload || []).push(STYLE$1, styleUpdates);
7935 }
7936 return updatePayload;
7937}
7938
7939// Apply the diff.
7940function updateProperties(domElement, updatePayload, tag, lastRawProps, nextRawProps) {
7941 // Update checked *before* name.
7942 // In the middle of an update, it is possible to have multiple checked.
7943 // When a checked radio tries to change name, browser makes another radio's checked false.
7944 if (tag === 'input' && nextRawProps.type === 'radio' && nextRawProps.name != null) {
7945 updateChecked(domElement, nextRawProps);
7946 }
7947
7948 var wasCustomComponentTag = isCustomComponent(tag, lastRawProps);
7949 var isCustomComponentTag = isCustomComponent(tag, nextRawProps);
7950 // Apply the diff.
7951 updateDOMProperties(domElement, updatePayload, wasCustomComponentTag, isCustomComponentTag);
7952
7953 // TODO: Ensure that an update gets scheduled if any of the special props
7954 // changed.
7955 switch (tag) {
7956 case 'input':
7957 // Update the wrapper around inputs *after* updating props. This has to
7958 // happen after `updateDOMProperties`. Otherwise HTML5 input validations
7959 // raise warnings and prevent the new value from being assigned.
7960 updateWrapper(domElement, nextRawProps);
7961 break;
7962 case 'textarea':
7963 updateWrapper$1(domElement, nextRawProps);
7964 break;
7965 case 'select':
7966 // <select> value update needs to occur after <option> children
7967 // reconciliation
7968 postUpdateWrapper(domElement, nextRawProps);
7969 break;
7970 }
7971}
7972
7973function getPossibleStandardName(propName) {
7974 {
7975 var lowerCasedName = propName.toLowerCase();
7976 if (!possibleStandardNames.hasOwnProperty(lowerCasedName)) {
7977 return null;
7978 }
7979 return possibleStandardNames[lowerCasedName] || null;
7980 }
7981 return null;
7982}
7983
7984function diffHydratedProperties(domElement, tag, rawProps, parentNamespace, rootContainerElement) {
7985 var isCustomComponentTag = void 0;
7986 var extraAttributeNames = void 0;
7987
7988 {
7989 suppressHydrationWarning = rawProps[SUPPRESS_HYDRATION_WARNING$1] === true;
7990 isCustomComponentTag = isCustomComponent(tag, rawProps);
7991 validatePropertiesInDevelopment(tag, rawProps);
7992 if (isCustomComponentTag && !didWarnShadyDOM && domElement.shadyRoot) {
7993 warning$1(false, '%s is using shady DOM. Using shady DOM with React can ' + 'cause things to break subtly.', getCurrentFiberOwnerNameInDevOrNull() || 'A component');
7994 didWarnShadyDOM = true;
7995 }
7996 }
7997
7998 // TODO: Make sure that we check isMounted before firing any of these events.
7999 switch (tag) {
8000 case 'iframe':
8001 case 'object':
8002 trapBubbledEvent(TOP_LOAD, domElement);
8003 break;
8004 case 'video':
8005 case 'audio':
8006 // Create listener for each media event
8007 for (var i = 0; i < mediaEventTypes.length; i++) {
8008 trapBubbledEvent(mediaEventTypes[i], domElement);
8009 }
8010 break;
8011 case 'source':
8012 trapBubbledEvent(TOP_ERROR, domElement);
8013 break;
8014 case 'img':
8015 case 'image':
8016 case 'link':
8017 trapBubbledEvent(TOP_ERROR, domElement);
8018 trapBubbledEvent(TOP_LOAD, domElement);
8019 break;
8020 case 'form':
8021 trapBubbledEvent(TOP_RESET, domElement);
8022 trapBubbledEvent(TOP_SUBMIT, domElement);
8023 break;
8024 case 'details':
8025 trapBubbledEvent(TOP_TOGGLE, domElement);
8026 break;
8027 case 'input':
8028 initWrapperState(domElement, rawProps);
8029 trapBubbledEvent(TOP_INVALID, domElement);
8030 // For controlled components we always need to ensure we're listening
8031 // to onChange. Even if there is no listener.
8032 ensureListeningTo(rootContainerElement, 'onChange');
8033 break;
8034 case 'option':
8035 validateProps(domElement, rawProps);
8036 break;
8037 case 'select':
8038 initWrapperState$1(domElement, rawProps);
8039 trapBubbledEvent(TOP_INVALID, domElement);
8040 // For controlled components we always need to ensure we're listening
8041 // to onChange. Even if there is no listener.
8042 ensureListeningTo(rootContainerElement, 'onChange');
8043 break;
8044 case 'textarea':
8045 initWrapperState$2(domElement, rawProps);
8046 trapBubbledEvent(TOP_INVALID, domElement);
8047 // For controlled components we always need to ensure we're listening
8048 // to onChange. Even if there is no listener.
8049 ensureListeningTo(rootContainerElement, 'onChange');
8050 break;
8051 }
8052
8053 assertValidProps(tag, rawProps);
8054
8055 {
8056 extraAttributeNames = new Set();
8057 var attributes = domElement.attributes;
8058 for (var _i = 0; _i < attributes.length; _i++) {
8059 var name = attributes[_i].name.toLowerCase();
8060 switch (name) {
8061 // Built-in SSR attribute is whitelisted
8062 case 'data-reactroot':
8063 break;
8064 // Controlled attributes are not validated
8065 // TODO: Only ignore them on controlled tags.
8066 case 'value':
8067 break;
8068 case 'checked':
8069 break;
8070 case 'selected':
8071 break;
8072 default:
8073 // Intentionally use the original name.
8074 // See discussion in https://github.com/facebook/react/pull/10676.
8075 extraAttributeNames.add(attributes[_i].name);
8076 }
8077 }
8078 }
8079
8080 var updatePayload = null;
8081 for (var propKey in rawProps) {
8082 if (!rawProps.hasOwnProperty(propKey)) {
8083 continue;
8084 }
8085 var nextProp = rawProps[propKey];
8086 if (propKey === CHILDREN) {
8087 // For text content children we compare against textContent. This
8088 // might match additional HTML that is hidden when we read it using
8089 // textContent. E.g. "foo" will match "f<span>oo</span>" but that still
8090 // satisfies our requirement. Our requirement is not to produce perfect
8091 // HTML and attributes. Ideally we should preserve structure but it's
8092 // ok not to if the visible content is still enough to indicate what
8093 // even listeners these nodes might be wired up to.
8094 // TODO: Warn if there is more than a single textNode as a child.
8095 // TODO: Should we use domElement.firstChild.nodeValue to compare?
8096 if (typeof nextProp === 'string') {
8097 if (domElement.textContent !== nextProp) {
8098 if (true && !suppressHydrationWarning) {
8099 warnForTextDifference(domElement.textContent, nextProp);
8100 }
8101 updatePayload = [CHILDREN, nextProp];
8102 }
8103 } else if (typeof nextProp === 'number') {
8104 if (domElement.textContent !== '' + nextProp) {
8105 if (true && !suppressHydrationWarning) {
8106 warnForTextDifference(domElement.textContent, nextProp);
8107 }
8108 updatePayload = [CHILDREN, '' + nextProp];
8109 }
8110 }
8111 } else if (registrationNameModules.hasOwnProperty(propKey)) {
8112 if (nextProp != null) {
8113 if (true && typeof nextProp !== 'function') {
8114 warnForInvalidEventListener(propKey, nextProp);
8115 }
8116 ensureListeningTo(rootContainerElement, propKey);
8117 }
8118 } else if (true &&
8119 // Convince Flow we've calculated it (it's DEV-only in this method.)
8120 typeof isCustomComponentTag === 'boolean') {
8121 // Validate that the properties correspond to their expected values.
8122 var serverValue = void 0;
8123 var propertyInfo = getPropertyInfo(propKey);
8124 if (suppressHydrationWarning) {
8125 // Don't bother comparing. We're ignoring all these warnings.
8126 } else if (propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING$1 ||
8127 // Controlled attributes are not validated
8128 // TODO: Only ignore them on controlled tags.
8129 propKey === 'value' || propKey === 'checked' || propKey === 'selected') {
8130 // Noop
8131 } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
8132 var serverHTML = domElement.innerHTML;
8133 var nextHtml = nextProp ? nextProp[HTML] : undefined;
8134 var expectedHTML = normalizeHTML(domElement, nextHtml != null ? nextHtml : '');
8135 if (expectedHTML !== serverHTML) {
8136 warnForPropDifference(propKey, serverHTML, expectedHTML);
8137 }
8138 } else if (propKey === STYLE$1) {
8139 // $FlowFixMe - Should be inferred as not undefined.
8140 extraAttributeNames.delete(propKey);
8141
8142 if (canDiffStyleForHydrationWarning) {
8143 var expectedStyle = createDangerousStringForStyles(nextProp);
8144 serverValue = domElement.getAttribute('style');
8145 if (expectedStyle !== serverValue) {
8146 warnForPropDifference(propKey, serverValue, expectedStyle);
8147 }
8148 }
8149 } else if (isCustomComponentTag) {
8150 // $FlowFixMe - Should be inferred as not undefined.
8151 extraAttributeNames.delete(propKey.toLowerCase());
8152 serverValue = getValueForAttribute(domElement, propKey, nextProp);
8153
8154 if (nextProp !== serverValue) {
8155 warnForPropDifference(propKey, serverValue, nextProp);
8156 }
8157 } else if (!shouldIgnoreAttribute(propKey, propertyInfo, isCustomComponentTag) && !shouldRemoveAttribute(propKey, nextProp, propertyInfo, isCustomComponentTag)) {
8158 var isMismatchDueToBadCasing = false;
8159 if (propertyInfo !== null) {
8160 // $FlowFixMe - Should be inferred as not undefined.
8161 extraAttributeNames.delete(propertyInfo.attributeName);
8162 serverValue = getValueForProperty(domElement, propKey, nextProp, propertyInfo);
8163 } else {
8164 var ownNamespace = parentNamespace;
8165 if (ownNamespace === HTML_NAMESPACE) {
8166 ownNamespace = getIntrinsicNamespace(tag);
8167 }
8168 if (ownNamespace === HTML_NAMESPACE) {
8169 // $FlowFixMe - Should be inferred as not undefined.
8170 extraAttributeNames.delete(propKey.toLowerCase());
8171 } else {
8172 var standardName = getPossibleStandardName(propKey);
8173 if (standardName !== null && standardName !== propKey) {
8174 // If an SVG prop is supplied with bad casing, it will
8175 // be successfully parsed from HTML, but will produce a mismatch
8176 // (and would be incorrectly rendered on the client).
8177 // However, we already warn about bad casing elsewhere.
8178 // So we'll skip the misleading extra mismatch warning in this case.
8179 isMismatchDueToBadCasing = true;
8180 // $FlowFixMe - Should be inferred as not undefined.
8181 extraAttributeNames.delete(standardName);
8182 }
8183 // $FlowFixMe - Should be inferred as not undefined.
8184 extraAttributeNames.delete(propKey);
8185 }
8186 serverValue = getValueForAttribute(domElement, propKey, nextProp);
8187 }
8188
8189 if (nextProp !== serverValue && !isMismatchDueToBadCasing) {
8190 warnForPropDifference(propKey, serverValue, nextProp);
8191 }
8192 }
8193 }
8194 }
8195
8196 {
8197 // $FlowFixMe - Should be inferred as not undefined.
8198 if (extraAttributeNames.size > 0 && !suppressHydrationWarning) {
8199 // $FlowFixMe - Should be inferred as not undefined.
8200 warnForExtraAttributes(extraAttributeNames);
8201 }
8202 }
8203
8204 switch (tag) {
8205 case 'input':
8206 // TODO: Make sure we check if this is still unmounted or do any clean
8207 // up necessary since we never stop tracking anymore.
8208 track(domElement);
8209 postMountWrapper(domElement, rawProps, true);
8210 break;
8211 case 'textarea':
8212 // TODO: Make sure we check if this is still unmounted or do any clean
8213 // up necessary since we never stop tracking anymore.
8214 track(domElement);
8215 postMountWrapper$3(domElement, rawProps);
8216 break;
8217 case 'select':
8218 case 'option':
8219 // For input and textarea we current always set the value property at
8220 // post mount to force it to diverge from attributes. However, for
8221 // option and select we don't quite do the same thing and select
8222 // is not resilient to the DOM state changing so we don't do that here.
8223 // TODO: Consider not doing this for input and textarea.
8224 break;
8225 default:
8226 if (typeof rawProps.onClick === 'function') {
8227 // TODO: This cast may not be sound for SVG, MathML or custom elements.
8228 trapClickOnNonInteractiveElement(domElement);
8229 }
8230 break;
8231 }
8232
8233 return updatePayload;
8234}
8235
8236function diffHydratedText(textNode, text) {
8237 var isDifferent = textNode.nodeValue !== text;
8238 return isDifferent;
8239}
8240
8241function warnForUnmatchedText(textNode, text) {
8242 {
8243 warnForTextDifference(textNode.nodeValue, text);
8244 }
8245}
8246
8247function warnForDeletedHydratableElement(parentNode, child) {
8248 {
8249 if (didWarnInvalidHydration) {
8250 return;
8251 }
8252 didWarnInvalidHydration = true;
8253 warningWithoutStack$1(false, 'Did not expect server HTML to contain a <%s> in <%s>.', child.nodeName.toLowerCase(), parentNode.nodeName.toLowerCase());
8254 }
8255}
8256
8257function warnForDeletedHydratableText(parentNode, child) {
8258 {
8259 if (didWarnInvalidHydration) {
8260 return;
8261 }
8262 didWarnInvalidHydration = true;
8263 warningWithoutStack$1(false, 'Did not expect server HTML to contain the text node "%s" in <%s>.', child.nodeValue, parentNode.nodeName.toLowerCase());
8264 }
8265}
8266
8267function warnForInsertedHydratedElement(parentNode, tag, props) {
8268 {
8269 if (didWarnInvalidHydration) {
8270 return;
8271 }
8272 didWarnInvalidHydration = true;
8273 warningWithoutStack$1(false, 'Expected server HTML to contain a matching <%s> in <%s>.', tag, parentNode.nodeName.toLowerCase());
8274 }
8275}
8276
8277function warnForInsertedHydratedText(parentNode, text) {
8278 {
8279 if (text === '') {
8280 // We expect to insert empty text nodes since they're not represented in
8281 // the HTML.
8282 // TODO: Remove this special case if we can just avoid inserting empty
8283 // text nodes.
8284 return;
8285 }
8286 if (didWarnInvalidHydration) {
8287 return;
8288 }
8289 didWarnInvalidHydration = true;
8290 warningWithoutStack$1(false, 'Expected server HTML to contain a matching text node for "%s" in <%s>.', text, parentNode.nodeName.toLowerCase());
8291 }
8292}
8293
8294function restoreControlledState$1(domElement, tag, props) {
8295 switch (tag) {
8296 case 'input':
8297 restoreControlledState(domElement, props);
8298 return;
8299 case 'textarea':
8300 restoreControlledState$3(domElement, props);
8301 return;
8302 case 'select':
8303 restoreControlledState$2(domElement, props);
8304 return;
8305 }
8306}
8307
8308// TODO: direct imports like some-package/src/* are bad. Fix me.
8309var validateDOMNesting = function () {};
8310var updatedAncestorInfo = function () {};
8311
8312{
8313 // This validation code was written based on the HTML5 parsing spec:
8314 // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope
8315 //
8316 // Note: this does not catch all invalid nesting, nor does it try to (as it's
8317 // not clear what practical benefit doing so provides); instead, we warn only
8318 // for cases where the parser will give a parse tree differing from what React
8319 // intended. For example, <b><div></div></b> is invalid but we don't warn
8320 // because it still parses correctly; we do warn for other cases like nested
8321 // <p> tags where the beginning of the second element implicitly closes the
8322 // first, causing a confusing mess.
8323
8324 // https://html.spec.whatwg.org/multipage/syntax.html#special
8325 var specialTags = ['address', 'applet', 'area', 'article', 'aside', 'base', 'basefont', 'bgsound', 'blockquote', 'body', 'br', 'button', 'caption', 'center', 'col', 'colgroup', 'dd', 'details', 'dir', 'div', 'dl', 'dt', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'frame', 'frameset', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr', 'html', 'iframe', 'img', 'input', 'isindex', 'li', 'link', 'listing', 'main', 'marquee', 'menu', 'menuitem', 'meta', 'nav', 'noembed', 'noframes', 'noscript', 'object', 'ol', 'p', 'param', 'plaintext', 'pre', 'script', 'section', 'select', 'source', 'style', 'summary', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'title', 'tr', 'track', 'ul', 'wbr', 'xmp'];
8326
8327 // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope
8328 var inScopeTags = ['applet', 'caption', 'html', 'table', 'td', 'th', 'marquee', 'object', 'template',
8329
8330 // https://html.spec.whatwg.org/multipage/syntax.html#html-integration-point
8331 // TODO: Distinguish by namespace here -- for <title>, including it here
8332 // errs on the side of fewer warnings
8333 'foreignObject', 'desc', 'title'];
8334
8335 // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-button-scope
8336 var buttonScopeTags = inScopeTags.concat(['button']);
8337
8338 // https://html.spec.whatwg.org/multipage/syntax.html#generate-implied-end-tags
8339 var impliedEndTags = ['dd', 'dt', 'li', 'option', 'optgroup', 'p', 'rp', 'rt'];
8340
8341 var emptyAncestorInfo = {
8342 current: null,
8343
8344 formTag: null,
8345 aTagInScope: null,
8346 buttonTagInScope: null,
8347 nobrTagInScope: null,
8348 pTagInButtonScope: null,
8349
8350 listItemTagAutoclosing: null,
8351 dlItemTagAutoclosing: null
8352 };
8353
8354 updatedAncestorInfo = function (oldInfo, tag) {
8355 var ancestorInfo = _assign({}, oldInfo || emptyAncestorInfo);
8356 var info = { tag: tag };
8357
8358 if (inScopeTags.indexOf(tag) !== -1) {
8359 ancestorInfo.aTagInScope = null;
8360 ancestorInfo.buttonTagInScope = null;
8361 ancestorInfo.nobrTagInScope = null;
8362 }
8363 if (buttonScopeTags.indexOf(tag) !== -1) {
8364 ancestorInfo.pTagInButtonScope = null;
8365 }
8366
8367 // See rules for 'li', 'dd', 'dt' start tags in
8368 // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody
8369 if (specialTags.indexOf(tag) !== -1 && tag !== 'address' && tag !== 'div' && tag !== 'p') {
8370 ancestorInfo.listItemTagAutoclosing = null;
8371 ancestorInfo.dlItemTagAutoclosing = null;
8372 }
8373
8374 ancestorInfo.current = info;
8375
8376 if (tag === 'form') {
8377 ancestorInfo.formTag = info;
8378 }
8379 if (tag === 'a') {
8380 ancestorInfo.aTagInScope = info;
8381 }
8382 if (tag === 'button') {
8383 ancestorInfo.buttonTagInScope = info;
8384 }
8385 if (tag === 'nobr') {
8386 ancestorInfo.nobrTagInScope = info;
8387 }
8388 if (tag === 'p') {
8389 ancestorInfo.pTagInButtonScope = info;
8390 }
8391 if (tag === 'li') {
8392 ancestorInfo.listItemTagAutoclosing = info;
8393 }
8394 if (tag === 'dd' || tag === 'dt') {
8395 ancestorInfo.dlItemTagAutoclosing = info;
8396 }
8397
8398 return ancestorInfo;
8399 };
8400
8401 /**
8402 * Returns whether
8403 */
8404 var isTagValidWithParent = function (tag, parentTag) {
8405 // First, let's check if we're in an unusual parsing mode...
8406 switch (parentTag) {
8407 // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inselect
8408 case 'select':
8409 return tag === 'option' || tag === 'optgroup' || tag === '#text';
8410 case 'optgroup':
8411 return tag === 'option' || tag === '#text';
8412 // Strictly speaking, seeing an <option> doesn't mean we're in a <select>
8413 // but
8414 case 'option':
8415 return tag === '#text';
8416 // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intd
8417 // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incaption
8418 // No special behavior since these rules fall back to "in body" mode for
8419 // all except special table nodes which cause bad parsing behavior anyway.
8420
8421 // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intr
8422 case 'tr':
8423 return tag === 'th' || tag === 'td' || tag === 'style' || tag === 'script' || tag === 'template';
8424 // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intbody
8425 case 'tbody':
8426 case 'thead':
8427 case 'tfoot':
8428 return tag === 'tr' || tag === 'style' || tag === 'script' || tag === 'template';
8429 // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incolgroup
8430 case 'colgroup':
8431 return tag === 'col' || tag === 'template';
8432 // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intable
8433 case 'table':
8434 return tag === 'caption' || tag === 'colgroup' || tag === 'tbody' || tag === 'tfoot' || tag === 'thead' || tag === 'style' || tag === 'script' || tag === 'template';
8435 // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inhead
8436 case 'head':
8437 return tag === 'base' || tag === 'basefont' || tag === 'bgsound' || tag === 'link' || tag === 'meta' || tag === 'title' || tag === 'noscript' || tag === 'noframes' || tag === 'style' || tag === 'script' || tag === 'template';
8438 // https://html.spec.whatwg.org/multipage/semantics.html#the-html-element
8439 case 'html':
8440 return tag === 'head' || tag === 'body';
8441 case '#document':
8442 return tag === 'html';
8443 }
8444
8445 // Probably in the "in body" parsing mode, so we outlaw only tag combos
8446 // where the parsing rules cause implicit opens or closes to be added.
8447 // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody
8448 switch (tag) {
8449 case 'h1':
8450 case 'h2':
8451 case 'h3':
8452 case 'h4':
8453 case 'h5':
8454 case 'h6':
8455 return parentTag !== 'h1' && parentTag !== 'h2' && parentTag !== 'h3' && parentTag !== 'h4' && parentTag !== 'h5' && parentTag !== 'h6';
8456
8457 case 'rp':
8458 case 'rt':
8459 return impliedEndTags.indexOf(parentTag) === -1;
8460
8461 case 'body':
8462 case 'caption':
8463 case 'col':
8464 case 'colgroup':
8465 case 'frame':
8466 case 'head':
8467 case 'html':
8468 case 'tbody':
8469 case 'td':
8470 case 'tfoot':
8471 case 'th':
8472 case 'thead':
8473 case 'tr':
8474 // These tags are only valid with a few parents that have special child
8475 // parsing rules -- if we're down here, then none of those matched and
8476 // so we allow it only if we don't know what the parent is, as all other
8477 // cases are invalid.
8478 return parentTag == null;
8479 }
8480
8481 return true;
8482 };
8483
8484 /**
8485 * Returns whether
8486 */
8487 var findInvalidAncestorForTag = function (tag, ancestorInfo) {
8488 switch (tag) {
8489 case 'address':
8490 case 'article':
8491 case 'aside':
8492 case 'blockquote':
8493 case 'center':
8494 case 'details':
8495 case 'dialog':
8496 case 'dir':
8497 case 'div':
8498 case 'dl':
8499 case 'fieldset':
8500 case 'figcaption':
8501 case 'figure':
8502 case 'footer':
8503 case 'header':
8504 case 'hgroup':
8505 case 'main':
8506 case 'menu':
8507 case 'nav':
8508 case 'ol':
8509 case 'p':
8510 case 'section':
8511 case 'summary':
8512 case 'ul':
8513 case 'pre':
8514 case 'listing':
8515 case 'table':
8516 case 'hr':
8517 case 'xmp':
8518 case 'h1':
8519 case 'h2':
8520 case 'h3':
8521 case 'h4':
8522 case 'h5':
8523 case 'h6':
8524 return ancestorInfo.pTagInButtonScope;
8525
8526 case 'form':
8527 return ancestorInfo.formTag || ancestorInfo.pTagInButtonScope;
8528
8529 case 'li':
8530 return ancestorInfo.listItemTagAutoclosing;
8531
8532 case 'dd':
8533 case 'dt':
8534 return ancestorInfo.dlItemTagAutoclosing;
8535
8536 case 'button':
8537 return ancestorInfo.buttonTagInScope;
8538
8539 case 'a':
8540 // Spec says something about storing a list of markers, but it sounds
8541 // equivalent to this check.
8542 return ancestorInfo.aTagInScope;
8543
8544 case 'nobr':
8545 return ancestorInfo.nobrTagInScope;
8546 }
8547
8548 return null;
8549 };
8550
8551 var didWarn = {};
8552
8553 validateDOMNesting = function (childTag, childText, ancestorInfo) {
8554 ancestorInfo = ancestorInfo || emptyAncestorInfo;
8555 var parentInfo = ancestorInfo.current;
8556 var parentTag = parentInfo && parentInfo.tag;
8557
8558 if (childText != null) {
8559 !(childTag == null) ? warningWithoutStack$1(false, 'validateDOMNesting: when childText is passed, childTag should be null') : void 0;
8560 childTag = '#text';
8561 }
8562
8563 var invalidParent = isTagValidWithParent(childTag, parentTag) ? null : parentInfo;
8564 var invalidAncestor = invalidParent ? null : findInvalidAncestorForTag(childTag, ancestorInfo);
8565 var invalidParentOrAncestor = invalidParent || invalidAncestor;
8566 if (!invalidParentOrAncestor) {
8567 return;
8568 }
8569
8570 var ancestorTag = invalidParentOrAncestor.tag;
8571 var addendum = getCurrentFiberStackInDev();
8572
8573 var warnKey = !!invalidParent + '|' + childTag + '|' + ancestorTag + '|' + addendum;
8574 if (didWarn[warnKey]) {
8575 return;
8576 }
8577 didWarn[warnKey] = true;
8578
8579 var tagDisplayName = childTag;
8580 var whitespaceInfo = '';
8581 if (childTag === '#text') {
8582 if (/\S/.test(childText)) {
8583 tagDisplayName = 'Text nodes';
8584 } else {
8585 tagDisplayName = 'Whitespace text nodes';
8586 whitespaceInfo = " Make sure you don't have any extra whitespace between tags on " + 'each line of your source code.';
8587 }
8588 } else {
8589 tagDisplayName = '<' + childTag + '>';
8590 }
8591
8592 if (invalidParent) {
8593 var info = '';
8594 if (ancestorTag === 'table' && childTag === 'tr') {
8595 info += ' Add a <tbody> to your code to match the DOM tree generated by ' + 'the browser.';
8596 }
8597 warningWithoutStack$1(false, 'validateDOMNesting(...): %s cannot appear as a child of <%s>.%s%s%s', tagDisplayName, ancestorTag, whitespaceInfo, info, addendum);
8598 } else {
8599 warningWithoutStack$1(false, 'validateDOMNesting(...): %s cannot appear as a descendant of ' + '<%s>.%s', tagDisplayName, ancestorTag, addendum);
8600 }
8601 };
8602}
8603
8604// Renderers that don't support persistence
8605// can re-export everything from this module.
8606
8607function shim() {
8608 invariant(false, 'The current renderer does not support persistence. This error is likely caused by a bug in React. Please file an issue.');
8609}
8610
8611// Persistence (when unsupported)
8612var supportsPersistence = false;
8613var cloneInstance = shim;
8614var createContainerChildSet = shim;
8615var appendChildToContainerChildSet = shim;
8616var finalizeContainerChildren = shim;
8617var replaceContainerChildren = shim;
8618var cloneHiddenInstance = shim;
8619var cloneUnhiddenInstance = shim;
8620var createHiddenTextInstance = shim;
8621
8622var SUPPRESS_HYDRATION_WARNING = void 0;
8623{
8624 SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
8625}
8626
8627var STYLE = 'style';
8628
8629var eventsEnabled = null;
8630var selectionInformation = null;
8631
8632function shouldAutoFocusHostComponent(type, props) {
8633 switch (type) {
8634 case 'button':
8635 case 'input':
8636 case 'select':
8637 case 'textarea':
8638 return !!props.autoFocus;
8639 }
8640 return false;
8641}
8642
8643function getRootHostContext(rootContainerInstance) {
8644 var type = void 0;
8645 var namespace = void 0;
8646 var nodeType = rootContainerInstance.nodeType;
8647 switch (nodeType) {
8648 case DOCUMENT_NODE:
8649 case DOCUMENT_FRAGMENT_NODE:
8650 {
8651 type = nodeType === DOCUMENT_NODE ? '#document' : '#fragment';
8652 var root = rootContainerInstance.documentElement;
8653 namespace = root ? root.namespaceURI : getChildNamespace(null, '');
8654 break;
8655 }
8656 default:
8657 {
8658 var container = nodeType === COMMENT_NODE ? rootContainerInstance.parentNode : rootContainerInstance;
8659 var ownNamespace = container.namespaceURI || null;
8660 type = container.tagName;
8661 namespace = getChildNamespace(ownNamespace, type);
8662 break;
8663 }
8664 }
8665 {
8666 var validatedTag = type.toLowerCase();
8667 var _ancestorInfo = updatedAncestorInfo(null, validatedTag);
8668 return { namespace: namespace, ancestorInfo: _ancestorInfo };
8669 }
8670 return namespace;
8671}
8672
8673function getChildHostContext(parentHostContext, type, rootContainerInstance) {
8674 {
8675 var parentHostContextDev = parentHostContext;
8676 var _namespace = getChildNamespace(parentHostContextDev.namespace, type);
8677 var _ancestorInfo2 = updatedAncestorInfo(parentHostContextDev.ancestorInfo, type);
8678 return { namespace: _namespace, ancestorInfo: _ancestorInfo2 };
8679 }
8680 var parentNamespace = parentHostContext;
8681 return getChildNamespace(parentNamespace, type);
8682}
8683
8684function getPublicInstance(instance) {
8685 return instance;
8686}
8687
8688function prepareForCommit(containerInfo) {
8689 eventsEnabled = isEnabled();
8690 selectionInformation = getSelectionInformation();
8691 setEnabled(false);
8692}
8693
8694function resetAfterCommit(containerInfo) {
8695 restoreSelection(selectionInformation);
8696 selectionInformation = null;
8697 setEnabled(eventsEnabled);
8698 eventsEnabled = null;
8699}
8700
8701function createInstance(type, props, rootContainerInstance, hostContext, internalInstanceHandle) {
8702 var parentNamespace = void 0;
8703 {
8704 // TODO: take namespace into account when validating.
8705 var hostContextDev = hostContext;
8706 validateDOMNesting(type, null, hostContextDev.ancestorInfo);
8707 if (typeof props.children === 'string' || typeof props.children === 'number') {
8708 var string = '' + props.children;
8709 var ownAncestorInfo = updatedAncestorInfo(hostContextDev.ancestorInfo, type);
8710 validateDOMNesting(null, string, ownAncestorInfo);
8711 }
8712 parentNamespace = hostContextDev.namespace;
8713 }
8714 var domElement = createElement(type, props, rootContainerInstance, parentNamespace);
8715 precacheFiberNode(internalInstanceHandle, domElement);
8716 updateFiberProps(domElement, props);
8717 return domElement;
8718}
8719
8720function appendInitialChild(parentInstance, child) {
8721 parentInstance.appendChild(child);
8722}
8723
8724function finalizeInitialChildren(domElement, type, props, rootContainerInstance, hostContext) {
8725 setInitialProperties(domElement, type, props, rootContainerInstance);
8726 return shouldAutoFocusHostComponent(type, props);
8727}
8728
8729function prepareUpdate(domElement, type, oldProps, newProps, rootContainerInstance, hostContext) {
8730 {
8731 var hostContextDev = hostContext;
8732 if (typeof newProps.children !== typeof oldProps.children && (typeof newProps.children === 'string' || typeof newProps.children === 'number')) {
8733 var string = '' + newProps.children;
8734 var ownAncestorInfo = updatedAncestorInfo(hostContextDev.ancestorInfo, type);
8735 validateDOMNesting(null, string, ownAncestorInfo);
8736 }
8737 }
8738 return diffProperties(domElement, type, oldProps, newProps, rootContainerInstance);
8739}
8740
8741function shouldSetTextContent(type, props) {
8742 return type === 'textarea' || type === 'option' || type === 'noscript' || typeof props.children === 'string' || typeof props.children === 'number' || typeof props.dangerouslySetInnerHTML === 'object' && props.dangerouslySetInnerHTML !== null && props.dangerouslySetInnerHTML.__html != null;
8743}
8744
8745function shouldDeprioritizeSubtree(type, props) {
8746 return !!props.hidden;
8747}
8748
8749function createTextInstance(text, rootContainerInstance, hostContext, internalInstanceHandle) {
8750 {
8751 var hostContextDev = hostContext;
8752 validateDOMNesting(null, text, hostContextDev.ancestorInfo);
8753 }
8754 var textNode = createTextNode(text, rootContainerInstance);
8755 precacheFiberNode(internalInstanceHandle, textNode);
8756 return textNode;
8757}
8758
8759var isPrimaryRenderer = true;
8760// This initialization code may run even on server environments
8761// if a component just imports ReactDOM (e.g. for findDOMNode).
8762// Some environments might not have setTimeout or clearTimeout.
8763var scheduleTimeout = typeof setTimeout === 'function' ? setTimeout : undefined;
8764var cancelTimeout = typeof clearTimeout === 'function' ? clearTimeout : undefined;
8765var noTimeout = -1;
8766
8767// -------------------
8768// Mutation
8769// -------------------
8770
8771var supportsMutation = true;
8772
8773function commitMount(domElement, type, newProps, internalInstanceHandle) {
8774 // Despite the naming that might imply otherwise, this method only
8775 // fires if there is an `Update` effect scheduled during mounting.
8776 // This happens if `finalizeInitialChildren` returns `true` (which it
8777 // does to implement the `autoFocus` attribute on the client). But
8778 // there are also other cases when this might happen (such as patching
8779 // up text content during hydration mismatch). So we'll check this again.
8780 if (shouldAutoFocusHostComponent(type, newProps)) {
8781 domElement.focus();
8782 }
8783}
8784
8785function commitUpdate(domElement, updatePayload, type, oldProps, newProps, internalInstanceHandle) {
8786 // Update the props handle so that we know which props are the ones with
8787 // with current event handlers.
8788 updateFiberProps(domElement, newProps);
8789 // Apply the diff to the DOM node.
8790 updateProperties(domElement, updatePayload, type, oldProps, newProps);
8791}
8792
8793function resetTextContent(domElement) {
8794 setTextContent(domElement, '');
8795}
8796
8797function commitTextUpdate(textInstance, oldText, newText) {
8798 textInstance.nodeValue = newText;
8799}
8800
8801function appendChild(parentInstance, child) {
8802 parentInstance.appendChild(child);
8803}
8804
8805function appendChildToContainer(container, child) {
8806 var parentNode = void 0;
8807 if (container.nodeType === COMMENT_NODE) {
8808 parentNode = container.parentNode;
8809 parentNode.insertBefore(child, container);
8810 } else {
8811 parentNode = container;
8812 parentNode.appendChild(child);
8813 }
8814 // This container might be used for a portal.
8815 // If something inside a portal is clicked, that click should bubble
8816 // through the React tree. However, on Mobile Safari the click would
8817 // never bubble through the *DOM* tree unless an ancestor with onclick
8818 // event exists. So we wouldn't see it and dispatch it.
8819 // This is why we ensure that non React root containers have inline onclick
8820 // defined.
8821 // https://github.com/facebook/react/issues/11918
8822 var reactRootContainer = container._reactRootContainer;
8823 if ((reactRootContainer === null || reactRootContainer === undefined) && parentNode.onclick === null) {
8824 // TODO: This cast may not be sound for SVG, MathML or custom elements.
8825 trapClickOnNonInteractiveElement(parentNode);
8826 }
8827}
8828
8829function insertBefore(parentInstance, child, beforeChild) {
8830 parentInstance.insertBefore(child, beforeChild);
8831}
8832
8833function insertInContainerBefore(container, child, beforeChild) {
8834 if (container.nodeType === COMMENT_NODE) {
8835 container.parentNode.insertBefore(child, beforeChild);
8836 } else {
8837 container.insertBefore(child, beforeChild);
8838 }
8839}
8840
8841function removeChild(parentInstance, child) {
8842 parentInstance.removeChild(child);
8843}
8844
8845function removeChildFromContainer(container, child) {
8846 if (container.nodeType === COMMENT_NODE) {
8847 container.parentNode.removeChild(child);
8848 } else {
8849 container.removeChild(child);
8850 }
8851}
8852
8853function hideInstance(instance) {
8854 // TODO: Does this work for all element types? What about MathML? Should we
8855 // pass host context to this method?
8856 instance = instance;
8857 instance.style.display = 'none';
8858}
8859
8860function hideTextInstance(textInstance) {
8861 textInstance.nodeValue = '';
8862}
8863
8864function unhideInstance(instance, props) {
8865 instance = instance;
8866 var styleProp = props[STYLE];
8867 var display = styleProp !== undefined && styleProp !== null && styleProp.hasOwnProperty('display') ? styleProp.display : null;
8868 instance.style.display = dangerousStyleValue('display', display);
8869}
8870
8871function unhideTextInstance(textInstance, text) {
8872 textInstance.nodeValue = text;
8873}
8874
8875// -------------------
8876// Hydration
8877// -------------------
8878
8879var supportsHydration = true;
8880
8881function canHydrateInstance(instance, type, props) {
8882 if (instance.nodeType !== ELEMENT_NODE || type.toLowerCase() !== instance.nodeName.toLowerCase()) {
8883 return null;
8884 }
8885 // This has now been refined to an element node.
8886 return instance;
8887}
8888
8889function canHydrateTextInstance(instance, text) {
8890 if (text === '' || instance.nodeType !== TEXT_NODE) {
8891 // Empty strings are not parsed by HTML so there won't be a correct match here.
8892 return null;
8893 }
8894 // This has now been refined to a text node.
8895 return instance;
8896}
8897
8898function getNextHydratableSibling(instance) {
8899 var node = instance.nextSibling;
8900 // Skip non-hydratable nodes.
8901 while (node && node.nodeType !== ELEMENT_NODE && node.nodeType !== TEXT_NODE) {
8902 node = node.nextSibling;
8903 }
8904 return node;
8905}
8906
8907function getFirstHydratableChild(parentInstance) {
8908 var next = parentInstance.firstChild;
8909 // Skip non-hydratable nodes.
8910 while (next && next.nodeType !== ELEMENT_NODE && next.nodeType !== TEXT_NODE) {
8911 next = next.nextSibling;
8912 }
8913 return next;
8914}
8915
8916function hydrateInstance(instance, type, props, rootContainerInstance, hostContext, internalInstanceHandle) {
8917 precacheFiberNode(internalInstanceHandle, instance);
8918 // TODO: Possibly defer this until the commit phase where all the events
8919 // get attached.
8920 updateFiberProps(instance, props);
8921 var parentNamespace = void 0;
8922 {
8923 var hostContextDev = hostContext;
8924 parentNamespace = hostContextDev.namespace;
8925 }
8926 return diffHydratedProperties(instance, type, props, parentNamespace, rootContainerInstance);
8927}
8928
8929function hydrateTextInstance(textInstance, text, internalInstanceHandle) {
8930 precacheFiberNode(internalInstanceHandle, textInstance);
8931 return diffHydratedText(textInstance, text);
8932}
8933
8934function didNotMatchHydratedContainerTextInstance(parentContainer, textInstance, text) {
8935 {
8936 warnForUnmatchedText(textInstance, text);
8937 }
8938}
8939
8940function didNotMatchHydratedTextInstance(parentType, parentProps, parentInstance, textInstance, text) {
8941 if (true && parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
8942 warnForUnmatchedText(textInstance, text);
8943 }
8944}
8945
8946function didNotHydrateContainerInstance(parentContainer, instance) {
8947 {
8948 if (instance.nodeType === ELEMENT_NODE) {
8949 warnForDeletedHydratableElement(parentContainer, instance);
8950 } else {
8951 warnForDeletedHydratableText(parentContainer, instance);
8952 }
8953 }
8954}
8955
8956function didNotHydrateInstance(parentType, parentProps, parentInstance, instance) {
8957 if (true && parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
8958 if (instance.nodeType === ELEMENT_NODE) {
8959 warnForDeletedHydratableElement(parentInstance, instance);
8960 } else {
8961 warnForDeletedHydratableText(parentInstance, instance);
8962 }
8963 }
8964}
8965
8966function didNotFindHydratableContainerInstance(parentContainer, type, props) {
8967 {
8968 warnForInsertedHydratedElement(parentContainer, type, props);
8969 }
8970}
8971
8972function didNotFindHydratableContainerTextInstance(parentContainer, text) {
8973 {
8974 warnForInsertedHydratedText(parentContainer, text);
8975 }
8976}
8977
8978function didNotFindHydratableInstance(parentType, parentProps, parentInstance, type, props) {
8979 if (true && parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
8980 warnForInsertedHydratedElement(parentInstance, type, props);
8981 }
8982}
8983
8984function didNotFindHydratableTextInstance(parentType, parentProps, parentInstance, text) {
8985 if (true && parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
8986 warnForInsertedHydratedText(parentInstance, text);
8987 }
8988}
8989
8990// Prefix measurements so that it's possible to filter them.
8991// Longer prefixes are hard to read in DevTools.
8992var reactEmoji = '\u269B';
8993var warningEmoji = '\u26D4';
8994var supportsUserTiming = typeof performance !== 'undefined' && typeof performance.mark === 'function' && typeof performance.clearMarks === 'function' && typeof performance.measure === 'function' && typeof performance.clearMeasures === 'function';
8995
8996// Keep track of current fiber so that we know the path to unwind on pause.
8997// TODO: this looks the same as nextUnitOfWork in scheduler. Can we unify them?
8998var currentFiber = null;
8999// If we're in the middle of user code, which fiber and method is it?
9000// Reusing `currentFiber` would be confusing for this because user code fiber
9001// can change during commit phase too, but we don't need to unwind it (since
9002// lifecycles in the commit phase don't resemble a tree).
9003var currentPhase = null;
9004var currentPhaseFiber = null;
9005// Did lifecycle hook schedule an update? This is often a performance problem,
9006// so we will keep track of it, and include it in the report.
9007// Track commits caused by cascading updates.
9008var isCommitting = false;
9009var hasScheduledUpdateInCurrentCommit = false;
9010var hasScheduledUpdateInCurrentPhase = false;
9011var commitCountInCurrentWorkLoop = 0;
9012var effectCountInCurrentCommit = 0;
9013var isWaitingForCallback = false;
9014// During commits, we only show a measurement once per method name
9015// to avoid stretch the commit phase with measurement overhead.
9016var labelsInCurrentCommit = new Set();
9017
9018var formatMarkName = function (markName) {
9019 return reactEmoji + ' ' + markName;
9020};
9021
9022var formatLabel = function (label, warning) {
9023 var prefix = warning ? warningEmoji + ' ' : reactEmoji + ' ';
9024 var suffix = warning ? ' Warning: ' + warning : '';
9025 return '' + prefix + label + suffix;
9026};
9027
9028var beginMark = function (markName) {
9029 performance.mark(formatMarkName(markName));
9030};
9031
9032var clearMark = function (markName) {
9033 performance.clearMarks(formatMarkName(markName));
9034};
9035
9036var endMark = function (label, markName, warning) {
9037 var formattedMarkName = formatMarkName(markName);
9038 var formattedLabel = formatLabel(label, warning);
9039 try {
9040 performance.measure(formattedLabel, formattedMarkName);
9041 } catch (err) {}
9042 // If previous mark was missing for some reason, this will throw.
9043 // This could only happen if React crashed in an unexpected place earlier.
9044 // Don't pile on with more errors.
9045
9046 // Clear marks immediately to avoid growing buffer.
9047 performance.clearMarks(formattedMarkName);
9048 performance.clearMeasures(formattedLabel);
9049};
9050
9051var getFiberMarkName = function (label, debugID) {
9052 return label + ' (#' + debugID + ')';
9053};
9054
9055var getFiberLabel = function (componentName, isMounted, phase) {
9056 if (phase === null) {
9057 // These are composite component total time measurements.
9058 return componentName + ' [' + (isMounted ? 'update' : 'mount') + ']';
9059 } else {
9060 // Composite component methods.
9061 return componentName + '.' + phase;
9062 }
9063};
9064
9065var beginFiberMark = function (fiber, phase) {
9066 var componentName = getComponentName(fiber.type) || 'Unknown';
9067 var debugID = fiber._debugID;
9068 var isMounted = fiber.alternate !== null;
9069 var label = getFiberLabel(componentName, isMounted, phase);
9070
9071 if (isCommitting && labelsInCurrentCommit.has(label)) {
9072 // During the commit phase, we don't show duplicate labels because
9073 // there is a fixed overhead for every measurement, and we don't
9074 // want to stretch the commit phase beyond necessary.
9075 return false;
9076 }
9077 labelsInCurrentCommit.add(label);
9078
9079 var markName = getFiberMarkName(label, debugID);
9080 beginMark(markName);
9081 return true;
9082};
9083
9084var clearFiberMark = function (fiber, phase) {
9085 var componentName = getComponentName(fiber.type) || 'Unknown';
9086 var debugID = fiber._debugID;
9087 var isMounted = fiber.alternate !== null;
9088 var label = getFiberLabel(componentName, isMounted, phase);
9089 var markName = getFiberMarkName(label, debugID);
9090 clearMark(markName);
9091};
9092
9093var endFiberMark = function (fiber, phase, warning) {
9094 var componentName = getComponentName(fiber.type) || 'Unknown';
9095 var debugID = fiber._debugID;
9096 var isMounted = fiber.alternate !== null;
9097 var label = getFiberLabel(componentName, isMounted, phase);
9098 var markName = getFiberMarkName(label, debugID);
9099 endMark(label, markName, warning);
9100};
9101
9102var shouldIgnoreFiber = function (fiber) {
9103 // Host components should be skipped in the timeline.
9104 // We could check typeof fiber.type, but does this work with RN?
9105 switch (fiber.tag) {
9106 case HostRoot:
9107 case HostComponent:
9108 case HostText:
9109 case HostPortal:
9110 case Fragment:
9111 case ContextProvider:
9112 case ContextConsumer:
9113 case Mode:
9114 return true;
9115 default:
9116 return false;
9117 }
9118};
9119
9120var clearPendingPhaseMeasurement = function () {
9121 if (currentPhase !== null && currentPhaseFiber !== null) {
9122 clearFiberMark(currentPhaseFiber, currentPhase);
9123 }
9124 currentPhaseFiber = null;
9125 currentPhase = null;
9126 hasScheduledUpdateInCurrentPhase = false;
9127};
9128
9129var pauseTimers = function () {
9130 // Stops all currently active measurements so that they can be resumed
9131 // if we continue in a later deferred loop from the same unit of work.
9132 var fiber = currentFiber;
9133 while (fiber) {
9134 if (fiber._debugIsCurrentlyTiming) {
9135 endFiberMark(fiber, null, null);
9136 }
9137 fiber = fiber.return;
9138 }
9139};
9140
9141var resumeTimersRecursively = function (fiber) {
9142 if (fiber.return !== null) {
9143 resumeTimersRecursively(fiber.return);
9144 }
9145 if (fiber._debugIsCurrentlyTiming) {
9146 beginFiberMark(fiber, null);
9147 }
9148};
9149
9150var resumeTimers = function () {
9151 // Resumes all measurements that were active during the last deferred loop.
9152 if (currentFiber !== null) {
9153 resumeTimersRecursively(currentFiber);
9154 }
9155};
9156
9157function recordEffect() {
9158 if (enableUserTimingAPI) {
9159 effectCountInCurrentCommit++;
9160 }
9161}
9162
9163function recordScheduleUpdate() {
9164 if (enableUserTimingAPI) {
9165 if (isCommitting) {
9166 hasScheduledUpdateInCurrentCommit = true;
9167 }
9168 if (currentPhase !== null && currentPhase !== 'componentWillMount' && currentPhase !== 'componentWillReceiveProps') {
9169 hasScheduledUpdateInCurrentPhase = true;
9170 }
9171 }
9172}
9173
9174function startRequestCallbackTimer() {
9175 if (enableUserTimingAPI) {
9176 if (supportsUserTiming && !isWaitingForCallback) {
9177 isWaitingForCallback = true;
9178 beginMark('(Waiting for async callback...)');
9179 }
9180 }
9181}
9182
9183function stopRequestCallbackTimer(didExpire, expirationTime) {
9184 if (enableUserTimingAPI) {
9185 if (supportsUserTiming) {
9186 isWaitingForCallback = false;
9187 var warning = didExpire ? 'React was blocked by main thread' : null;
9188 endMark('(Waiting for async callback... will force flush in ' + expirationTime + ' ms)', '(Waiting for async callback...)', warning);
9189 }
9190 }
9191}
9192
9193function startWorkTimer(fiber) {
9194 if (enableUserTimingAPI) {
9195 if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {
9196 return;
9197 }
9198 // If we pause, this is the fiber to unwind from.
9199 currentFiber = fiber;
9200 if (!beginFiberMark(fiber, null)) {
9201 return;
9202 }
9203 fiber._debugIsCurrentlyTiming = true;
9204 }
9205}
9206
9207function cancelWorkTimer(fiber) {
9208 if (enableUserTimingAPI) {
9209 if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {
9210 return;
9211 }
9212 // Remember we shouldn't complete measurement for this fiber.
9213 // Otherwise flamechart will be deep even for small updates.
9214 fiber._debugIsCurrentlyTiming = false;
9215 clearFiberMark(fiber, null);
9216 }
9217}
9218
9219function stopWorkTimer(fiber) {
9220 if (enableUserTimingAPI) {
9221 if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {
9222 return;
9223 }
9224 // If we pause, its parent is the fiber to unwind from.
9225 currentFiber = fiber.return;
9226 if (!fiber._debugIsCurrentlyTiming) {
9227 return;
9228 }
9229 fiber._debugIsCurrentlyTiming = false;
9230 endFiberMark(fiber, null, null);
9231 }
9232}
9233
9234function stopFailedWorkTimer(fiber) {
9235 if (enableUserTimingAPI) {
9236 if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {
9237 return;
9238 }
9239 // If we pause, its parent is the fiber to unwind from.
9240 currentFiber = fiber.return;
9241 if (!fiber._debugIsCurrentlyTiming) {
9242 return;
9243 }
9244 fiber._debugIsCurrentlyTiming = false;
9245 var warning = fiber.tag === SuspenseComponent ? 'Rendering was suspended' : 'An error was thrown inside this error boundary';
9246 endFiberMark(fiber, null, warning);
9247 }
9248}
9249
9250function startPhaseTimer(fiber, phase) {
9251 if (enableUserTimingAPI) {
9252 if (!supportsUserTiming) {
9253 return;
9254 }
9255 clearPendingPhaseMeasurement();
9256 if (!beginFiberMark(fiber, phase)) {
9257 return;
9258 }
9259 currentPhaseFiber = fiber;
9260 currentPhase = phase;
9261 }
9262}
9263
9264function stopPhaseTimer() {
9265 if (enableUserTimingAPI) {
9266 if (!supportsUserTiming) {
9267 return;
9268 }
9269 if (currentPhase !== null && currentPhaseFiber !== null) {
9270 var warning = hasScheduledUpdateInCurrentPhase ? 'Scheduled a cascading update' : null;
9271 endFiberMark(currentPhaseFiber, currentPhase, warning);
9272 }
9273 currentPhase = null;
9274 currentPhaseFiber = null;
9275 }
9276}
9277
9278function startWorkLoopTimer(nextUnitOfWork) {
9279 if (enableUserTimingAPI) {
9280 currentFiber = nextUnitOfWork;
9281 if (!supportsUserTiming) {
9282 return;
9283 }
9284 commitCountInCurrentWorkLoop = 0;
9285 // This is top level call.
9286 // Any other measurements are performed within.
9287 beginMark('(React Tree Reconciliation)');
9288 // Resume any measurements that were in progress during the last loop.
9289 resumeTimers();
9290 }
9291}
9292
9293function stopWorkLoopTimer(interruptedBy, didCompleteRoot) {
9294 if (enableUserTimingAPI) {
9295 if (!supportsUserTiming) {
9296 return;
9297 }
9298 var warning = null;
9299 if (interruptedBy !== null) {
9300 if (interruptedBy.tag === HostRoot) {
9301 warning = 'A top-level update interrupted the previous render';
9302 } else {
9303 var componentName = getComponentName(interruptedBy.type) || 'Unknown';
9304 warning = 'An update to ' + componentName + ' interrupted the previous render';
9305 }
9306 } else if (commitCountInCurrentWorkLoop > 1) {
9307 warning = 'There were cascading updates';
9308 }
9309 commitCountInCurrentWorkLoop = 0;
9310 var label = didCompleteRoot ? '(React Tree Reconciliation: Completed Root)' : '(React Tree Reconciliation: Yielded)';
9311 // Pause any measurements until the next loop.
9312 pauseTimers();
9313 endMark(label, '(React Tree Reconciliation)', warning);
9314 }
9315}
9316
9317function startCommitTimer() {
9318 if (enableUserTimingAPI) {
9319 if (!supportsUserTiming) {
9320 return;
9321 }
9322 isCommitting = true;
9323 hasScheduledUpdateInCurrentCommit = false;
9324 labelsInCurrentCommit.clear();
9325 beginMark('(Committing Changes)');
9326 }
9327}
9328
9329function stopCommitTimer() {
9330 if (enableUserTimingAPI) {
9331 if (!supportsUserTiming) {
9332 return;
9333 }
9334
9335 var warning = null;
9336 if (hasScheduledUpdateInCurrentCommit) {
9337 warning = 'Lifecycle hook scheduled a cascading update';
9338 } else if (commitCountInCurrentWorkLoop > 0) {
9339 warning = 'Caused by a cascading update in earlier commit';
9340 }
9341 hasScheduledUpdateInCurrentCommit = false;
9342 commitCountInCurrentWorkLoop++;
9343 isCommitting = false;
9344 labelsInCurrentCommit.clear();
9345
9346 endMark('(Committing Changes)', '(Committing Changes)', warning);
9347 }
9348}
9349
9350function startCommitSnapshotEffectsTimer() {
9351 if (enableUserTimingAPI) {
9352 if (!supportsUserTiming) {
9353 return;
9354 }
9355 effectCountInCurrentCommit = 0;
9356 beginMark('(Committing Snapshot Effects)');
9357 }
9358}
9359
9360function stopCommitSnapshotEffectsTimer() {
9361 if (enableUserTimingAPI) {
9362 if (!supportsUserTiming) {
9363 return;
9364 }
9365 var count = effectCountInCurrentCommit;
9366 effectCountInCurrentCommit = 0;
9367 endMark('(Committing Snapshot Effects: ' + count + ' Total)', '(Committing Snapshot Effects)', null);
9368 }
9369}
9370
9371function startCommitHostEffectsTimer() {
9372 if (enableUserTimingAPI) {
9373 if (!supportsUserTiming) {
9374 return;
9375 }
9376 effectCountInCurrentCommit = 0;
9377 beginMark('(Committing Host Effects)');
9378 }
9379}
9380
9381function stopCommitHostEffectsTimer() {
9382 if (enableUserTimingAPI) {
9383 if (!supportsUserTiming) {
9384 return;
9385 }
9386 var count = effectCountInCurrentCommit;
9387 effectCountInCurrentCommit = 0;
9388 endMark('(Committing Host Effects: ' + count + ' Total)', '(Committing Host Effects)', null);
9389 }
9390}
9391
9392function startCommitLifeCyclesTimer() {
9393 if (enableUserTimingAPI) {
9394 if (!supportsUserTiming) {
9395 return;
9396 }
9397 effectCountInCurrentCommit = 0;
9398 beginMark('(Calling Lifecycle Methods)');
9399 }
9400}
9401
9402function stopCommitLifeCyclesTimer() {
9403 if (enableUserTimingAPI) {
9404 if (!supportsUserTiming) {
9405 return;
9406 }
9407 var count = effectCountInCurrentCommit;
9408 effectCountInCurrentCommit = 0;
9409 endMark('(Calling Lifecycle Methods: ' + count + ' Total)', '(Calling Lifecycle Methods)', null);
9410 }
9411}
9412
9413var valueStack = [];
9414
9415var fiberStack = void 0;
9416
9417{
9418 fiberStack = [];
9419}
9420
9421var index = -1;
9422
9423function createCursor(defaultValue) {
9424 return {
9425 current: defaultValue
9426 };
9427}
9428
9429function pop(cursor, fiber) {
9430 if (index < 0) {
9431 {
9432 warningWithoutStack$1(false, 'Unexpected pop.');
9433 }
9434 return;
9435 }
9436
9437 {
9438 if (fiber !== fiberStack[index]) {
9439 warningWithoutStack$1(false, 'Unexpected Fiber popped.');
9440 }
9441 }
9442
9443 cursor.current = valueStack[index];
9444
9445 valueStack[index] = null;
9446
9447 {
9448 fiberStack[index] = null;
9449 }
9450
9451 index--;
9452}
9453
9454function push(cursor, value, fiber) {
9455 index++;
9456
9457 valueStack[index] = cursor.current;
9458
9459 {
9460 fiberStack[index] = fiber;
9461 }
9462
9463 cursor.current = value;
9464}
9465
9466function checkThatStackIsEmpty() {
9467 {
9468 if (index !== -1) {
9469 warningWithoutStack$1(false, 'Expected an empty stack. Something was not reset properly.');
9470 }
9471 }
9472}
9473
9474function resetStackAfterFatalErrorInDev() {
9475 {
9476 index = -1;
9477 valueStack.length = 0;
9478 fiberStack.length = 0;
9479 }
9480}
9481
9482var warnedAboutMissingGetChildContext = void 0;
9483
9484{
9485 warnedAboutMissingGetChildContext = {};
9486}
9487
9488var emptyContextObject = {};
9489{
9490 Object.freeze(emptyContextObject);
9491}
9492
9493// A cursor to the current merged context object on the stack.
9494var contextStackCursor = createCursor(emptyContextObject);
9495// A cursor to a boolean indicating whether the context has changed.
9496var didPerformWorkStackCursor = createCursor(false);
9497// Keep track of the previous context object that was on the stack.
9498// We use this to get access to the parent context after we have already
9499// pushed the next context provider, and now need to merge their contexts.
9500var previousContext = emptyContextObject;
9501
9502function getUnmaskedContext(workInProgress, Component, didPushOwnContextIfProvider) {
9503 if (didPushOwnContextIfProvider && isContextProvider(Component)) {
9504 // If the fiber is a context provider itself, when we read its context
9505 // we may have already pushed its own child context on the stack. A context
9506 // provider should not "see" its own child context. Therefore we read the
9507 // previous (parent) context instead for a context provider.
9508 return previousContext;
9509 }
9510 return contextStackCursor.current;
9511}
9512
9513function cacheContext(workInProgress, unmaskedContext, maskedContext) {
9514 var instance = workInProgress.stateNode;
9515 instance.__reactInternalMemoizedUnmaskedChildContext = unmaskedContext;
9516 instance.__reactInternalMemoizedMaskedChildContext = maskedContext;
9517}
9518
9519function getMaskedContext(workInProgress, unmaskedContext) {
9520 var type = workInProgress.type;
9521 var contextTypes = type.contextTypes;
9522 if (!contextTypes) {
9523 return emptyContextObject;
9524 }
9525
9526 // Avoid recreating masked context unless unmasked context has changed.
9527 // Failing to do this will result in unnecessary calls to componentWillReceiveProps.
9528 // This may trigger infinite loops if componentWillReceiveProps calls setState.
9529 var instance = workInProgress.stateNode;
9530 if (instance && instance.__reactInternalMemoizedUnmaskedChildContext === unmaskedContext) {
9531 return instance.__reactInternalMemoizedMaskedChildContext;
9532 }
9533
9534 var context = {};
9535 for (var key in contextTypes) {
9536 context[key] = unmaskedContext[key];
9537 }
9538
9539 {
9540 var name = getComponentName(type) || 'Unknown';
9541 checkPropTypes(contextTypes, context, 'context', name, getCurrentFiberStackInDev);
9542 }
9543
9544 // Cache unmasked context so we can avoid recreating masked context unless necessary.
9545 // Context is created before the class component is instantiated so check for instance.
9546 if (instance) {
9547 cacheContext(workInProgress, unmaskedContext, context);
9548 }
9549
9550 return context;
9551}
9552
9553function hasContextChanged() {
9554 return didPerformWorkStackCursor.current;
9555}
9556
9557function isContextProvider(type) {
9558 var childContextTypes = type.childContextTypes;
9559 return childContextTypes !== null && childContextTypes !== undefined;
9560}
9561
9562function popContext(fiber) {
9563 pop(didPerformWorkStackCursor, fiber);
9564 pop(contextStackCursor, fiber);
9565}
9566
9567function popTopLevelContextObject(fiber) {
9568 pop(didPerformWorkStackCursor, fiber);
9569 pop(contextStackCursor, fiber);
9570}
9571
9572function pushTopLevelContextObject(fiber, context, didChange) {
9573 !(contextStackCursor.current === emptyContextObject) ? invariant(false, 'Unexpected context found on stack. This error is likely caused by a bug in React. Please file an issue.') : void 0;
9574
9575 push(contextStackCursor, context, fiber);
9576 push(didPerformWorkStackCursor, didChange, fiber);
9577}
9578
9579function processChildContext(fiber, type, parentContext) {
9580 var instance = fiber.stateNode;
9581 var childContextTypes = type.childContextTypes;
9582
9583 // TODO (bvaughn) Replace this behavior with an invariant() in the future.
9584 // It has only been added in Fiber to match the (unintentional) behavior in Stack.
9585 if (typeof instance.getChildContext !== 'function') {
9586 {
9587 var componentName = getComponentName(type) || 'Unknown';
9588
9589 if (!warnedAboutMissingGetChildContext[componentName]) {
9590 warnedAboutMissingGetChildContext[componentName] = true;
9591 warningWithoutStack$1(false, '%s.childContextTypes is specified but there is no getChildContext() method ' + 'on the instance. You can either define getChildContext() on %s or remove ' + 'childContextTypes from it.', componentName, componentName);
9592 }
9593 }
9594 return parentContext;
9595 }
9596
9597 var childContext = void 0;
9598 {
9599 setCurrentPhase('getChildContext');
9600 }
9601 startPhaseTimer(fiber, 'getChildContext');
9602 childContext = instance.getChildContext();
9603 stopPhaseTimer();
9604 {
9605 setCurrentPhase(null);
9606 }
9607 for (var contextKey in childContext) {
9608 !(contextKey in childContextTypes) ? invariant(false, '%s.getChildContext(): key "%s" is not defined in childContextTypes.', getComponentName(type) || 'Unknown', contextKey) : void 0;
9609 }
9610 {
9611 var name = getComponentName(type) || 'Unknown';
9612 checkPropTypes(childContextTypes, childContext, 'child context', name,
9613 // In practice, there is one case in which we won't get a stack. It's when
9614 // somebody calls unstable_renderSubtreeIntoContainer() and we process
9615 // context from the parent component instance. The stack will be missing
9616 // because it's outside of the reconciliation, and so the pointer has not
9617 // been set. This is rare and doesn't matter. We'll also remove that API.
9618 getCurrentFiberStackInDev);
9619 }
9620
9621 return _assign({}, parentContext, childContext);
9622}
9623
9624function pushContextProvider(workInProgress) {
9625 var instance = workInProgress.stateNode;
9626 // We push the context as early as possible to ensure stack integrity.
9627 // If the instance does not exist yet, we will push null at first,
9628 // and replace it on the stack later when invalidating the context.
9629 var memoizedMergedChildContext = instance && instance.__reactInternalMemoizedMergedChildContext || emptyContextObject;
9630
9631 // Remember the parent context so we can merge with it later.
9632 // Inherit the parent's did-perform-work value to avoid inadvertently blocking updates.
9633 previousContext = contextStackCursor.current;
9634 push(contextStackCursor, memoizedMergedChildContext, workInProgress);
9635 push(didPerformWorkStackCursor, didPerformWorkStackCursor.current, workInProgress);
9636
9637 return true;
9638}
9639
9640function invalidateContextProvider(workInProgress, type, didChange) {
9641 var instance = workInProgress.stateNode;
9642 !instance ? invariant(false, 'Expected to have an instance by this point. This error is likely caused by a bug in React. Please file an issue.') : void 0;
9643
9644 if (didChange) {
9645 // Merge parent and own context.
9646 // Skip this if we're not updating due to sCU.
9647 // This avoids unnecessarily recomputing memoized values.
9648 var mergedContext = processChildContext(workInProgress, type, previousContext);
9649 instance.__reactInternalMemoizedMergedChildContext = mergedContext;
9650
9651 // Replace the old (or empty) context with the new one.
9652 // It is important to unwind the context in the reverse order.
9653 pop(didPerformWorkStackCursor, workInProgress);
9654 pop(contextStackCursor, workInProgress);
9655 // Now push the new context and mark that it has changed.
9656 push(contextStackCursor, mergedContext, workInProgress);
9657 push(didPerformWorkStackCursor, didChange, workInProgress);
9658 } else {
9659 pop(didPerformWorkStackCursor, workInProgress);
9660 push(didPerformWorkStackCursor, didChange, workInProgress);
9661 }
9662}
9663
9664function findCurrentUnmaskedContext(fiber) {
9665 // Currently this is only used with renderSubtreeIntoContainer; not sure if it
9666 // makes sense elsewhere
9667 !(isFiberMounted(fiber) && fiber.tag === ClassComponent) ? invariant(false, 'Expected subtree parent to be a mounted class component. This error is likely caused by a bug in React. Please file an issue.') : void 0;
9668
9669 var node = fiber;
9670 do {
9671 switch (node.tag) {
9672 case HostRoot:
9673 return node.stateNode.context;
9674 case ClassComponent:
9675 {
9676 var Component = node.type;
9677 if (isContextProvider(Component)) {
9678 return node.stateNode.__reactInternalMemoizedMergedChildContext;
9679 }
9680 break;
9681 }
9682 }
9683 node = node.return;
9684 } while (node !== null);
9685 invariant(false, 'Found unexpected detached subtree parent. This error is likely caused by a bug in React. Please file an issue.');
9686}
9687
9688var onCommitFiberRoot = null;
9689var onCommitFiberUnmount = null;
9690var hasLoggedError = false;
9691
9692function catchErrors(fn) {
9693 return function (arg) {
9694 try {
9695 return fn(arg);
9696 } catch (err) {
9697 if (true && !hasLoggedError) {
9698 hasLoggedError = true;
9699 warningWithoutStack$1(false, 'React DevTools encountered an error: %s', err);
9700 }
9701 }
9702 };
9703}
9704
9705var isDevToolsPresent = typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined';
9706
9707function injectInternals(internals) {
9708 if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
9709 // No DevTools
9710 return false;
9711 }
9712 var hook = __REACT_DEVTOOLS_GLOBAL_HOOK__;
9713 if (hook.isDisabled) {
9714 // This isn't a real property on the hook, but it can be set to opt out
9715 // of DevTools integration and associated warnings and logs.
9716 // https://github.com/facebook/react/issues/3877
9717 return true;
9718 }
9719 if (!hook.supportsFiber) {
9720 {
9721 warningWithoutStack$1(false, 'The installed version of React DevTools is too old and will not work ' + 'with the current version of React. Please update React DevTools. ' + 'https://fb.me/react-devtools');
9722 }
9723 // DevTools exists, even though it doesn't support Fiber.
9724 return true;
9725 }
9726 try {
9727 var rendererID = hook.inject(internals);
9728 // We have successfully injected, so now it is safe to set up hooks.
9729 onCommitFiberRoot = catchErrors(function (root) {
9730 return hook.onCommitFiberRoot(rendererID, root);
9731 });
9732 onCommitFiberUnmount = catchErrors(function (fiber) {
9733 return hook.onCommitFiberUnmount(rendererID, fiber);
9734 });
9735 } catch (err) {
9736 // Catch all errors because it is unsafe to throw during initialization.
9737 {
9738 warningWithoutStack$1(false, 'React DevTools encountered an error: %s.', err);
9739 }
9740 }
9741 // DevTools exists
9742 return true;
9743}
9744
9745function onCommitRoot(root) {
9746 if (typeof onCommitFiberRoot === 'function') {
9747 onCommitFiberRoot(root);
9748 }
9749}
9750
9751function onCommitUnmount(fiber) {
9752 if (typeof onCommitFiberUnmount === 'function') {
9753 onCommitFiberUnmount(fiber);
9754 }
9755}
9756
9757// Max 31 bit integer. The max integer size in V8 for 32-bit systems.
9758// Math.pow(2, 30) - 1
9759// 0b111111111111111111111111111111
9760var maxSigned31BitInt = 1073741823;
9761
9762var NoWork = 0;
9763var Never = 1;
9764var Sync = maxSigned31BitInt;
9765
9766var UNIT_SIZE = 10;
9767var MAGIC_NUMBER_OFFSET = maxSigned31BitInt - 1;
9768
9769// 1 unit of expiration time represents 10ms.
9770function msToExpirationTime(ms) {
9771 // Always add an offset so that we don't clash with the magic number for NoWork.
9772 return MAGIC_NUMBER_OFFSET - (ms / UNIT_SIZE | 0);
9773}
9774
9775function expirationTimeToMs(expirationTime) {
9776 return (MAGIC_NUMBER_OFFSET - expirationTime) * UNIT_SIZE;
9777}
9778
9779function ceiling(num, precision) {
9780 return ((num / precision | 0) + 1) * precision;
9781}
9782
9783function computeExpirationBucket(currentTime, expirationInMs, bucketSizeMs) {
9784 return MAGIC_NUMBER_OFFSET - ceiling(MAGIC_NUMBER_OFFSET - currentTime + expirationInMs / UNIT_SIZE, bucketSizeMs / UNIT_SIZE);
9785}
9786
9787var LOW_PRIORITY_EXPIRATION = 5000;
9788var LOW_PRIORITY_BATCH_SIZE = 250;
9789
9790function computeAsyncExpiration(currentTime) {
9791 return computeExpirationBucket(currentTime, LOW_PRIORITY_EXPIRATION, LOW_PRIORITY_BATCH_SIZE);
9792}
9793
9794// We intentionally set a higher expiration time for interactive updates in
9795// dev than in production.
9796//
9797// If the main thread is being blocked so long that you hit the expiration,
9798// it's a problem that could be solved with better scheduling.
9799//
9800// People will be more likely to notice this and fix it with the long
9801// expiration time in development.
9802//
9803// In production we opt for better UX at the risk of masking scheduling
9804// problems, by expiring fast.
9805var HIGH_PRIORITY_EXPIRATION = 500;
9806var HIGH_PRIORITY_BATCH_SIZE = 100;
9807
9808function computeInteractiveExpiration(currentTime) {
9809 return computeExpirationBucket(currentTime, HIGH_PRIORITY_EXPIRATION, HIGH_PRIORITY_BATCH_SIZE);
9810}
9811
9812var NoContext = 0;
9813var ConcurrentMode = 1;
9814var StrictMode = 2;
9815var ProfileMode = 4;
9816
9817var hasBadMapPolyfill = void 0;
9818
9819{
9820 hasBadMapPolyfill = false;
9821 try {
9822 var nonExtensibleObject = Object.preventExtensions({});
9823 var testMap = new Map([[nonExtensibleObject, null]]);
9824 var testSet = new Set([nonExtensibleObject]);
9825 // This is necessary for Rollup to not consider these unused.
9826 // https://github.com/rollup/rollup/issues/1771
9827 // TODO: we can remove these if Rollup fixes the bug.
9828 testMap.set(0, 0);
9829 testSet.add(0);
9830 } catch (e) {
9831 // TODO: Consider warning about bad polyfills
9832 hasBadMapPolyfill = true;
9833 }
9834}
9835
9836// A Fiber is work on a Component that needs to be done or was done. There can
9837// be more than one per component.
9838
9839
9840var debugCounter = void 0;
9841
9842{
9843 debugCounter = 1;
9844}
9845
9846function FiberNode(tag, pendingProps, key, mode) {
9847 // Instance
9848 this.tag = tag;
9849 this.key = key;
9850 this.elementType = null;
9851 this.type = null;
9852 this.stateNode = null;
9853
9854 // Fiber
9855 this.return = null;
9856 this.child = null;
9857 this.sibling = null;
9858 this.index = 0;
9859
9860 this.ref = null;
9861
9862 this.pendingProps = pendingProps;
9863 this.memoizedProps = null;
9864 this.updateQueue = null;
9865 this.memoizedState = null;
9866 this.firstContextDependency = null;
9867
9868 this.mode = mode;
9869
9870 // Effects
9871 this.effectTag = NoEffect;
9872 this.nextEffect = null;
9873
9874 this.firstEffect = null;
9875 this.lastEffect = null;
9876
9877 this.expirationTime = NoWork;
9878 this.childExpirationTime = NoWork;
9879
9880 this.alternate = null;
9881
9882 if (enableProfilerTimer) {
9883 // Note: The following is done to avoid a v8 performance cliff.
9884 //
9885 // Initializing the fields below to smis and later updating them with
9886 // double values will cause Fibers to end up having separate shapes.
9887 // This behavior/bug has something to do with Object.preventExtension().
9888 // Fortunately this only impacts DEV builds.
9889 // Unfortunately it makes React unusably slow for some applications.
9890 // To work around this, initialize the fields below with doubles.
9891 //
9892 // Learn more about this here:
9893 // https://github.com/facebook/react/issues/14365
9894 // https://bugs.chromium.org/p/v8/issues/detail?id=8538
9895 this.actualDuration = Number.NaN;
9896 this.actualStartTime = Number.NaN;
9897 this.selfBaseDuration = Number.NaN;
9898 this.treeBaseDuration = Number.NaN;
9899
9900 // It's okay to replace the initial doubles with smis after initialization.
9901 // This won't trigger the performance cliff mentioned above,
9902 // and it simplifies other profiler code (including DevTools).
9903 this.actualDuration = 0;
9904 this.actualStartTime = -1;
9905 this.selfBaseDuration = 0;
9906 this.treeBaseDuration = 0;
9907 }
9908
9909 {
9910 this._debugID = debugCounter++;
9911 this._debugSource = null;
9912 this._debugOwner = null;
9913 this._debugIsCurrentlyTiming = false;
9914 if (!hasBadMapPolyfill && typeof Object.preventExtensions === 'function') {
9915 Object.preventExtensions(this);
9916 }
9917 }
9918}
9919
9920// This is a constructor function, rather than a POJO constructor, still
9921// please ensure we do the following:
9922// 1) Nobody should add any instance methods on this. Instance methods can be
9923// more difficult to predict when they get optimized and they are almost
9924// never inlined properly in static compilers.
9925// 2) Nobody should rely on `instanceof Fiber` for type testing. We should
9926// always know when it is a fiber.
9927// 3) We might want to experiment with using numeric keys since they are easier
9928// to optimize in a non-JIT environment.
9929// 4) We can easily go from a constructor to a createFiber object literal if that
9930// is faster.
9931// 5) It should be easy to port this to a C struct and keep a C implementation
9932// compatible.
9933var createFiber = function (tag, pendingProps, key, mode) {
9934 // $FlowFixMe: the shapes are exact here but Flow doesn't like constructors
9935 return new FiberNode(tag, pendingProps, key, mode);
9936};
9937
9938function shouldConstruct(Component) {
9939 var prototype = Component.prototype;
9940 return !!(prototype && prototype.isReactComponent);
9941}
9942
9943function isSimpleFunctionComponent(type) {
9944 return typeof type === 'function' && !shouldConstruct(type) && type.defaultProps === undefined;
9945}
9946
9947function resolveLazyComponentTag(Component) {
9948 if (typeof Component === 'function') {
9949 return shouldConstruct(Component) ? ClassComponent : FunctionComponent;
9950 } else if (Component !== undefined && Component !== null) {
9951 var $$typeof = Component.$$typeof;
9952 if ($$typeof === REACT_FORWARD_REF_TYPE) {
9953 return ForwardRef;
9954 }
9955 if ($$typeof === REACT_MEMO_TYPE) {
9956 return MemoComponent;
9957 }
9958 }
9959 return IndeterminateComponent;
9960}
9961
9962// This is used to create an alternate fiber to do work on.
9963function createWorkInProgress(current, pendingProps, expirationTime) {
9964 var workInProgress = current.alternate;
9965 if (workInProgress === null) {
9966 // We use a double buffering pooling technique because we know that we'll
9967 // only ever need at most two versions of a tree. We pool the "other" unused
9968 // node that we're free to reuse. This is lazily created to avoid allocating
9969 // extra objects for things that are never updated. It also allow us to
9970 // reclaim the extra memory if needed.
9971 workInProgress = createFiber(current.tag, pendingProps, current.key, current.mode);
9972 workInProgress.elementType = current.elementType;
9973 workInProgress.type = current.type;
9974 workInProgress.stateNode = current.stateNode;
9975
9976 {
9977 // DEV-only fields
9978 workInProgress._debugID = current._debugID;
9979 workInProgress._debugSource = current._debugSource;
9980 workInProgress._debugOwner = current._debugOwner;
9981 }
9982
9983 workInProgress.alternate = current;
9984 current.alternate = workInProgress;
9985 } else {
9986 workInProgress.pendingProps = pendingProps;
9987
9988 // We already have an alternate.
9989 // Reset the effect tag.
9990 workInProgress.effectTag = NoEffect;
9991
9992 // The effect list is no longer valid.
9993 workInProgress.nextEffect = null;
9994 workInProgress.firstEffect = null;
9995 workInProgress.lastEffect = null;
9996
9997 if (enableProfilerTimer) {
9998 // We intentionally reset, rather than copy, actualDuration & actualStartTime.
9999 // This prevents time from endlessly accumulating in new commits.
10000 // This has the downside of resetting values for different priority renders,
10001 // But works for yielding (the common case) and should support resuming.
10002 workInProgress.actualDuration = 0;
10003 workInProgress.actualStartTime = -1;
10004 }
10005 }
10006
10007 workInProgress.childExpirationTime = current.childExpirationTime;
10008 workInProgress.expirationTime = current.expirationTime;
10009
10010 workInProgress.child = current.child;
10011 workInProgress.memoizedProps = current.memoizedProps;
10012 workInProgress.memoizedState = current.memoizedState;
10013 workInProgress.updateQueue = current.updateQueue;
10014 workInProgress.firstContextDependency = current.firstContextDependency;
10015
10016 // These will be overridden during the parent's reconciliation
10017 workInProgress.sibling = current.sibling;
10018 workInProgress.index = current.index;
10019 workInProgress.ref = current.ref;
10020
10021 if (enableProfilerTimer) {
10022 workInProgress.selfBaseDuration = current.selfBaseDuration;
10023 workInProgress.treeBaseDuration = current.treeBaseDuration;
10024 }
10025
10026 return workInProgress;
10027}
10028
10029function createHostRootFiber(isConcurrent) {
10030 var mode = isConcurrent ? ConcurrentMode | StrictMode : NoContext;
10031
10032 if (enableProfilerTimer && isDevToolsPresent) {
10033 // Always collect profile timings when DevTools are present.
10034 // This enables DevTools to start capturing timing at any point–
10035 // Without some nodes in the tree having empty base times.
10036 mode |= ProfileMode;
10037 }
10038
10039 return createFiber(HostRoot, null, null, mode);
10040}
10041
10042function createFiberFromTypeAndProps(type, // React$ElementType
10043key, pendingProps, owner, mode, expirationTime) {
10044 var fiber = void 0;
10045
10046 var fiberTag = IndeterminateComponent;
10047 // The resolved type is set if we know what the final type will be. I.e. it's not lazy.
10048 var resolvedType = type;
10049 if (typeof type === 'function') {
10050 if (shouldConstruct(type)) {
10051 fiberTag = ClassComponent;
10052 }
10053 } else if (typeof type === 'string') {
10054 fiberTag = HostComponent;
10055 } else {
10056 getTag: switch (type) {
10057 case REACT_FRAGMENT_TYPE:
10058 return createFiberFromFragment(pendingProps.children, mode, expirationTime, key);
10059 case REACT_CONCURRENT_MODE_TYPE:
10060 return createFiberFromMode(pendingProps, mode | ConcurrentMode | StrictMode, expirationTime, key);
10061 case REACT_STRICT_MODE_TYPE:
10062 return createFiberFromMode(pendingProps, mode | StrictMode, expirationTime, key);
10063 case REACT_PROFILER_TYPE:
10064 return createFiberFromProfiler(pendingProps, mode, expirationTime, key);
10065 case REACT_SUSPENSE_TYPE:
10066 return createFiberFromSuspense(pendingProps, mode, expirationTime, key);
10067 default:
10068 {
10069 if (typeof type === 'object' && type !== null) {
10070 switch (type.$$typeof) {
10071 case REACT_PROVIDER_TYPE:
10072 fiberTag = ContextProvider;
10073 break getTag;
10074 case REACT_CONTEXT_TYPE:
10075 // This is a consumer
10076 fiberTag = ContextConsumer;
10077 break getTag;
10078 case REACT_FORWARD_REF_TYPE:
10079 fiberTag = ForwardRef;
10080 break getTag;
10081 case REACT_MEMO_TYPE:
10082 fiberTag = MemoComponent;
10083 break getTag;
10084 case REACT_LAZY_TYPE:
10085 fiberTag = LazyComponent;
10086 resolvedType = null;
10087 break getTag;
10088 }
10089 }
10090 var info = '';
10091 {
10092 if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
10093 info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and " + 'named imports.';
10094 }
10095 var ownerName = owner ? getComponentName(owner.type) : null;
10096 if (ownerName) {
10097 info += '\n\nCheck the render method of `' + ownerName + '`.';
10098 }
10099 }
10100 invariant(false, 'Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s', type == null ? type : typeof type, info);
10101 }
10102 }
10103 }
10104
10105 fiber = createFiber(fiberTag, pendingProps, key, mode);
10106 fiber.elementType = type;
10107 fiber.type = resolvedType;
10108 fiber.expirationTime = expirationTime;
10109
10110 return fiber;
10111}
10112
10113function createFiberFromElement(element, mode, expirationTime) {
10114 var owner = null;
10115 {
10116 owner = element._owner;
10117 }
10118 var type = element.type;
10119 var key = element.key;
10120 var pendingProps = element.props;
10121 var fiber = createFiberFromTypeAndProps(type, key, pendingProps, owner, mode, expirationTime);
10122 {
10123 fiber._debugSource = element._source;
10124 fiber._debugOwner = element._owner;
10125 }
10126 return fiber;
10127}
10128
10129function createFiberFromFragment(elements, mode, expirationTime, key) {
10130 var fiber = createFiber(Fragment, elements, key, mode);
10131 fiber.expirationTime = expirationTime;
10132 return fiber;
10133}
10134
10135function createFiberFromProfiler(pendingProps, mode, expirationTime, key) {
10136 {
10137 if (typeof pendingProps.id !== 'string' || typeof pendingProps.onRender !== 'function') {
10138 warningWithoutStack$1(false, 'Profiler must specify an "id" string and "onRender" function as props');
10139 }
10140 }
10141
10142 var fiber = createFiber(Profiler, pendingProps, key, mode | ProfileMode);
10143 // TODO: The Profiler fiber shouldn't have a type. It has a tag.
10144 fiber.elementType = REACT_PROFILER_TYPE;
10145 fiber.type = REACT_PROFILER_TYPE;
10146 fiber.expirationTime = expirationTime;
10147
10148 return fiber;
10149}
10150
10151function createFiberFromMode(pendingProps, mode, expirationTime, key) {
10152 var fiber = createFiber(Mode, pendingProps, key, mode);
10153
10154 // TODO: The Mode fiber shouldn't have a type. It has a tag.
10155 var type = (mode & ConcurrentMode) === NoContext ? REACT_STRICT_MODE_TYPE : REACT_CONCURRENT_MODE_TYPE;
10156 fiber.elementType = type;
10157 fiber.type = type;
10158
10159 fiber.expirationTime = expirationTime;
10160 return fiber;
10161}
10162
10163function createFiberFromSuspense(pendingProps, mode, expirationTime, key) {
10164 var fiber = createFiber(SuspenseComponent, pendingProps, key, mode);
10165
10166 // TODO: The SuspenseComponent fiber shouldn't have a type. It has a tag.
10167 var type = REACT_SUSPENSE_TYPE;
10168 fiber.elementType = type;
10169 fiber.type = type;
10170
10171 fiber.expirationTime = expirationTime;
10172 return fiber;
10173}
10174
10175function createFiberFromText(content, mode, expirationTime) {
10176 var fiber = createFiber(HostText, content, null, mode);
10177 fiber.expirationTime = expirationTime;
10178 return fiber;
10179}
10180
10181function createFiberFromHostInstanceForDeletion() {
10182 var fiber = createFiber(HostComponent, null, null, NoContext);
10183 // TODO: These should not need a type.
10184 fiber.elementType = 'DELETED';
10185 fiber.type = 'DELETED';
10186 return fiber;
10187}
10188
10189function createFiberFromPortal(portal, mode, expirationTime) {
10190 var pendingProps = portal.children !== null ? portal.children : [];
10191 var fiber = createFiber(HostPortal, pendingProps, portal.key, mode);
10192 fiber.expirationTime = expirationTime;
10193 fiber.stateNode = {
10194 containerInfo: portal.containerInfo,
10195 pendingChildren: null, // Used by persistent updates
10196 implementation: portal.implementation
10197 };
10198 return fiber;
10199}
10200
10201// Used for stashing WIP properties to replay failed work in DEV.
10202function assignFiberPropertiesInDEV(target, source) {
10203 if (target === null) {
10204 // This Fiber's initial properties will always be overwritten.
10205 // We only use a Fiber to ensure the same hidden class so DEV isn't slow.
10206 target = createFiber(IndeterminateComponent, null, null, NoContext);
10207 }
10208
10209 // This is intentionally written as a list of all properties.
10210 // We tried to use Object.assign() instead but this is called in
10211 // the hottest path, and Object.assign() was too slow:
10212 // https://github.com/facebook/react/issues/12502
10213 // This code is DEV-only so size is not a concern.
10214
10215 target.tag = source.tag;
10216 target.key = source.key;
10217 target.elementType = source.elementType;
10218 target.type = source.type;
10219 target.stateNode = source.stateNode;
10220 target.return = source.return;
10221 target.child = source.child;
10222 target.sibling = source.sibling;
10223 target.index = source.index;
10224 target.ref = source.ref;
10225 target.pendingProps = source.pendingProps;
10226 target.memoizedProps = source.memoizedProps;
10227 target.updateQueue = source.updateQueue;
10228 target.memoizedState = source.memoizedState;
10229 target.firstContextDependency = source.firstContextDependency;
10230 target.mode = source.mode;
10231 target.effectTag = source.effectTag;
10232 target.nextEffect = source.nextEffect;
10233 target.firstEffect = source.firstEffect;
10234 target.lastEffect = source.lastEffect;
10235 target.expirationTime = source.expirationTime;
10236 target.childExpirationTime = source.childExpirationTime;
10237 target.alternate = source.alternate;
10238 if (enableProfilerTimer) {
10239 target.actualDuration = source.actualDuration;
10240 target.actualStartTime = source.actualStartTime;
10241 target.selfBaseDuration = source.selfBaseDuration;
10242 target.treeBaseDuration = source.treeBaseDuration;
10243 }
10244 target._debugID = source._debugID;
10245 target._debugSource = source._debugSource;
10246 target._debugOwner = source._debugOwner;
10247 target._debugIsCurrentlyTiming = source._debugIsCurrentlyTiming;
10248 return target;
10249}
10250
10251// TODO: This should be lifted into the renderer.
10252
10253
10254// The following attributes are only used by interaction tracing builds.
10255// They enable interactions to be associated with their async work,
10256// And expose interaction metadata to the React DevTools Profiler plugin.
10257// Note that these attributes are only defined when the enableSchedulerTracing flag is enabled.
10258
10259
10260// Exported FiberRoot type includes all properties,
10261// To avoid requiring potentially error-prone :any casts throughout the project.
10262// Profiling properties are only safe to access in profiling builds (when enableSchedulerTracing is true).
10263// The types are defined separately within this file to ensure they stay in sync.
10264// (We don't have to use an inline :any cast when enableSchedulerTracing is disabled.)
10265
10266
10267function createFiberRoot(containerInfo, isConcurrent, hydrate) {
10268 // Cyclic construction. This cheats the type system right now because
10269 // stateNode is any.
10270 var uninitializedFiber = createHostRootFiber(isConcurrent);
10271
10272 var root = void 0;
10273 if (enableSchedulerTracing) {
10274 root = {
10275 current: uninitializedFiber,
10276 containerInfo: containerInfo,
10277 pendingChildren: null,
10278
10279 earliestPendingTime: NoWork,
10280 latestPendingTime: NoWork,
10281 earliestSuspendedTime: NoWork,
10282 latestSuspendedTime: NoWork,
10283 latestPingedTime: NoWork,
10284
10285 pingCache: null,
10286
10287 didError: false,
10288
10289 pendingCommitExpirationTime: NoWork,
10290 finishedWork: null,
10291 timeoutHandle: noTimeout,
10292 context: null,
10293 pendingContext: null,
10294 hydrate: hydrate,
10295 nextExpirationTimeToWorkOn: NoWork,
10296 expirationTime: NoWork,
10297 firstBatch: null,
10298 nextScheduledRoot: null,
10299
10300 interactionThreadID: tracing.unstable_getThreadID(),
10301 memoizedInteractions: new Set(),
10302 pendingInteractionMap: new Map()
10303 };
10304 } else {
10305 root = {
10306 current: uninitializedFiber,
10307 containerInfo: containerInfo,
10308 pendingChildren: null,
10309
10310 pingCache: null,
10311
10312 earliestPendingTime: NoWork,
10313 latestPendingTime: NoWork,
10314 earliestSuspendedTime: NoWork,
10315 latestSuspendedTime: NoWork,
10316 latestPingedTime: NoWork,
10317
10318 didError: false,
10319
10320 pendingCommitExpirationTime: NoWork,
10321 finishedWork: null,
10322 timeoutHandle: noTimeout,
10323 context: null,
10324 pendingContext: null,
10325 hydrate: hydrate,
10326 nextExpirationTimeToWorkOn: NoWork,
10327 expirationTime: NoWork,
10328 firstBatch: null,
10329 nextScheduledRoot: null
10330 };
10331 }
10332
10333 uninitializedFiber.stateNode = root;
10334
10335 // The reason for the way the Flow types are structured in this file,
10336 // Is to avoid needing :any casts everywhere interaction tracing fields are used.
10337 // Unfortunately that requires an :any cast for non-interaction tracing capable builds.
10338 // $FlowFixMe Remove this :any cast and replace it with something better.
10339 return root;
10340}
10341
10342/**
10343 * Forked from fbjs/warning:
10344 * https://github.com/facebook/fbjs/blob/e66ba20ad5be433eb54423f2b097d829324d9de6/packages/fbjs/src/__forks__/warning.js
10345 *
10346 * Only change is we use console.warn instead of console.error,
10347 * and do nothing when 'console' is not supported.
10348 * This really simplifies the code.
10349 * ---
10350 * Similar to invariant but only logs a warning if the condition is not met.
10351 * This can be used to log issues in development environments in critical
10352 * paths. Removing the logging code for production environments will keep the
10353 * same logic and follow the same code paths.
10354 */
10355
10356var lowPriorityWarning = function () {};
10357
10358{
10359 var printWarning = function (format) {
10360 for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
10361 args[_key - 1] = arguments[_key];
10362 }
10363
10364 var argIndex = 0;
10365 var message = 'Warning: ' + format.replace(/%s/g, function () {
10366 return args[argIndex++];
10367 });
10368 if (typeof console !== 'undefined') {
10369 console.warn(message);
10370 }
10371 try {
10372 // --- Welcome to debugging React ---
10373 // This error was thrown as a convenience so that you can use this stack
10374 // to find the callsite that caused this warning to fire.
10375 throw new Error(message);
10376 } catch (x) {}
10377 };
10378
10379 lowPriorityWarning = function (condition, format) {
10380 if (format === undefined) {
10381 throw new Error('`lowPriorityWarning(condition, format, ...args)` requires a warning ' + 'message argument');
10382 }
10383 if (!condition) {
10384 for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
10385 args[_key2 - 2] = arguments[_key2];
10386 }
10387
10388 printWarning.apply(undefined, [format].concat(args));
10389 }
10390 };
10391}
10392
10393var lowPriorityWarning$1 = lowPriorityWarning;
10394
10395var ReactStrictModeWarnings = {
10396 discardPendingWarnings: function () {},
10397 flushPendingDeprecationWarnings: function () {},
10398 flushPendingUnsafeLifecycleWarnings: function () {},
10399 recordDeprecationWarnings: function (fiber, instance) {},
10400 recordUnsafeLifecycleWarnings: function (fiber, instance) {},
10401 recordLegacyContextWarning: function (fiber, instance) {},
10402 flushLegacyContextWarning: function () {}
10403};
10404
10405{
10406 var LIFECYCLE_SUGGESTIONS = {
10407 UNSAFE_componentWillMount: 'componentDidMount',
10408 UNSAFE_componentWillReceiveProps: 'static getDerivedStateFromProps',
10409 UNSAFE_componentWillUpdate: 'componentDidUpdate'
10410 };
10411
10412 var pendingComponentWillMountWarnings = [];
10413 var pendingComponentWillReceivePropsWarnings = [];
10414 var pendingComponentWillUpdateWarnings = [];
10415 var pendingUnsafeLifecycleWarnings = new Map();
10416 var pendingLegacyContextWarning = new Map();
10417
10418 // Tracks components we have already warned about.
10419 var didWarnAboutDeprecatedLifecycles = new Set();
10420 var didWarnAboutUnsafeLifecycles = new Set();
10421 var didWarnAboutLegacyContext = new Set();
10422
10423 var setToSortedString = function (set) {
10424 var array = [];
10425 set.forEach(function (value) {
10426 array.push(value);
10427 });
10428 return array.sort().join(', ');
10429 };
10430
10431 ReactStrictModeWarnings.discardPendingWarnings = function () {
10432 pendingComponentWillMountWarnings = [];
10433 pendingComponentWillReceivePropsWarnings = [];
10434 pendingComponentWillUpdateWarnings = [];
10435 pendingUnsafeLifecycleWarnings = new Map();
10436 pendingLegacyContextWarning = new Map();
10437 };
10438
10439 ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings = function () {
10440 pendingUnsafeLifecycleWarnings.forEach(function (lifecycleWarningsMap, strictRoot) {
10441 var lifecyclesWarningMesages = [];
10442
10443 Object.keys(lifecycleWarningsMap).forEach(function (lifecycle) {
10444 var lifecycleWarnings = lifecycleWarningsMap[lifecycle];
10445 if (lifecycleWarnings.length > 0) {
10446 var componentNames = new Set();
10447 lifecycleWarnings.forEach(function (fiber) {
10448 componentNames.add(getComponentName(fiber.type) || 'Component');
10449 didWarnAboutUnsafeLifecycles.add(fiber.type);
10450 });
10451
10452 var formatted = lifecycle.replace('UNSAFE_', '');
10453 var suggestion = LIFECYCLE_SUGGESTIONS[lifecycle];
10454 var sortedComponentNames = setToSortedString(componentNames);
10455
10456 lifecyclesWarningMesages.push(formatted + ': Please update the following components to use ' + (suggestion + ' instead: ' + sortedComponentNames));
10457 }
10458 });
10459
10460 if (lifecyclesWarningMesages.length > 0) {
10461 var strictRootComponentStack = getStackByFiberInDevAndProd(strictRoot);
10462
10463 warningWithoutStack$1(false, 'Unsafe lifecycle methods were found within a strict-mode tree:%s' + '\n\n%s' + '\n\nLearn more about this warning here:' + '\nhttps://fb.me/react-strict-mode-warnings', strictRootComponentStack, lifecyclesWarningMesages.join('\n\n'));
10464 }
10465 });
10466
10467 pendingUnsafeLifecycleWarnings = new Map();
10468 };
10469
10470 var findStrictRoot = function (fiber) {
10471 var maybeStrictRoot = null;
10472
10473 var node = fiber;
10474 while (node !== null) {
10475 if (node.mode & StrictMode) {
10476 maybeStrictRoot = node;
10477 }
10478 node = node.return;
10479 }
10480
10481 return maybeStrictRoot;
10482 };
10483
10484 ReactStrictModeWarnings.flushPendingDeprecationWarnings = function () {
10485 if (pendingComponentWillMountWarnings.length > 0) {
10486 var uniqueNames = new Set();
10487 pendingComponentWillMountWarnings.forEach(function (fiber) {
10488 uniqueNames.add(getComponentName(fiber.type) || 'Component');
10489 didWarnAboutDeprecatedLifecycles.add(fiber.type);
10490 });
10491
10492 var sortedNames = setToSortedString(uniqueNames);
10493
10494 lowPriorityWarning$1(false, 'componentWillMount is deprecated and will be removed in the next major version. ' + 'Use componentDidMount instead. As a temporary workaround, ' + 'you can rename to UNSAFE_componentWillMount.' + '\n\nPlease update the following components: %s' + '\n\nLearn more about this warning here:' + '\nhttps://fb.me/react-async-component-lifecycle-hooks', sortedNames);
10495
10496 pendingComponentWillMountWarnings = [];
10497 }
10498
10499 if (pendingComponentWillReceivePropsWarnings.length > 0) {
10500 var _uniqueNames = new Set();
10501 pendingComponentWillReceivePropsWarnings.forEach(function (fiber) {
10502 _uniqueNames.add(getComponentName(fiber.type) || 'Component');
10503 didWarnAboutDeprecatedLifecycles.add(fiber.type);
10504 });
10505
10506 var _sortedNames = setToSortedString(_uniqueNames);
10507
10508 lowPriorityWarning$1(false, 'componentWillReceiveProps is deprecated and will be removed in the next major version. ' + 'Use static getDerivedStateFromProps instead.' + '\n\nPlease update the following components: %s' + '\n\nLearn more about this warning here:' + '\nhttps://fb.me/react-async-component-lifecycle-hooks', _sortedNames);
10509
10510 pendingComponentWillReceivePropsWarnings = [];
10511 }
10512
10513 if (pendingComponentWillUpdateWarnings.length > 0) {
10514 var _uniqueNames2 = new Set();
10515 pendingComponentWillUpdateWarnings.forEach(function (fiber) {
10516 _uniqueNames2.add(getComponentName(fiber.type) || 'Component');
10517 didWarnAboutDeprecatedLifecycles.add(fiber.type);
10518 });
10519
10520 var _sortedNames2 = setToSortedString(_uniqueNames2);
10521
10522 lowPriorityWarning$1(false, 'componentWillUpdate is deprecated and will be removed in the next major version. ' + 'Use componentDidUpdate instead. As a temporary workaround, ' + 'you can rename to UNSAFE_componentWillUpdate.' + '\n\nPlease update the following components: %s' + '\n\nLearn more about this warning here:' + '\nhttps://fb.me/react-async-component-lifecycle-hooks', _sortedNames2);
10523
10524 pendingComponentWillUpdateWarnings = [];
10525 }
10526 };
10527
10528 ReactStrictModeWarnings.recordDeprecationWarnings = function (fiber, instance) {
10529 // Dedup strategy: Warn once per component.
10530 if (didWarnAboutDeprecatedLifecycles.has(fiber.type)) {
10531 return;
10532 }
10533
10534 // Don't warn about react-lifecycles-compat polyfilled components.
10535 if (typeof instance.componentWillMount === 'function' && instance.componentWillMount.__suppressDeprecationWarning !== true) {
10536 pendingComponentWillMountWarnings.push(fiber);
10537 }
10538 if (typeof instance.componentWillReceiveProps === 'function' && instance.componentWillReceiveProps.__suppressDeprecationWarning !== true) {
10539 pendingComponentWillReceivePropsWarnings.push(fiber);
10540 }
10541 if (typeof instance.componentWillUpdate === 'function' && instance.componentWillUpdate.__suppressDeprecationWarning !== true) {
10542 pendingComponentWillUpdateWarnings.push(fiber);
10543 }
10544 };
10545
10546 ReactStrictModeWarnings.recordUnsafeLifecycleWarnings = function (fiber, instance) {
10547 var strictRoot = findStrictRoot(fiber);
10548 if (strictRoot === null) {
10549 warningWithoutStack$1(false, 'Expected to find a StrictMode component in a strict mode tree. ' + 'This error is likely caused by a bug in React. Please file an issue.');
10550 return;
10551 }
10552
10553 // Dedup strategy: Warn once per component.
10554 // This is difficult to track any other way since component names
10555 // are often vague and are likely to collide between 3rd party libraries.
10556 // An expand property is probably okay to use here since it's DEV-only,
10557 // and will only be set in the event of serious warnings.
10558 if (didWarnAboutUnsafeLifecycles.has(fiber.type)) {
10559 return;
10560 }
10561
10562 var warningsForRoot = void 0;
10563 if (!pendingUnsafeLifecycleWarnings.has(strictRoot)) {
10564 warningsForRoot = {
10565 UNSAFE_componentWillMount: [],
10566 UNSAFE_componentWillReceiveProps: [],
10567 UNSAFE_componentWillUpdate: []
10568 };
10569
10570 pendingUnsafeLifecycleWarnings.set(strictRoot, warningsForRoot);
10571 } else {
10572 warningsForRoot = pendingUnsafeLifecycleWarnings.get(strictRoot);
10573 }
10574
10575 var unsafeLifecycles = [];
10576 if (typeof instance.componentWillMount === 'function' && instance.componentWillMount.__suppressDeprecationWarning !== true || typeof instance.UNSAFE_componentWillMount === 'function') {
10577 unsafeLifecycles.push('UNSAFE_componentWillMount');
10578 }
10579 if (typeof instance.componentWillReceiveProps === 'function' && instance.componentWillReceiveProps.__suppressDeprecationWarning !== true || typeof instance.UNSAFE_componentWillReceiveProps === 'function') {
10580 unsafeLifecycles.push('UNSAFE_componentWillReceiveProps');
10581 }
10582 if (typeof instance.componentWillUpdate === 'function' && instance.componentWillUpdate.__suppressDeprecationWarning !== true || typeof instance.UNSAFE_componentWillUpdate === 'function') {
10583 unsafeLifecycles.push('UNSAFE_componentWillUpdate');
10584 }
10585
10586 if (unsafeLifecycles.length > 0) {
10587 unsafeLifecycles.forEach(function (lifecycle) {
10588 warningsForRoot[lifecycle].push(fiber);
10589 });
10590 }
10591 };
10592
10593 ReactStrictModeWarnings.recordLegacyContextWarning = function (fiber, instance) {
10594 var strictRoot = findStrictRoot(fiber);
10595 if (strictRoot === null) {
10596 warningWithoutStack$1(false, 'Expected to find a StrictMode component in a strict mode tree. ' + 'This error is likely caused by a bug in React. Please file an issue.');
10597 return;
10598 }
10599
10600 // Dedup strategy: Warn once per component.
10601 if (didWarnAboutLegacyContext.has(fiber.type)) {
10602 return;
10603 }
10604
10605 var warningsForRoot = pendingLegacyContextWarning.get(strictRoot);
10606
10607 if (fiber.type.contextTypes != null || fiber.type.childContextTypes != null || instance !== null && typeof instance.getChildContext === 'function') {
10608 if (warningsForRoot === undefined) {
10609 warningsForRoot = [];
10610 pendingLegacyContextWarning.set(strictRoot, warningsForRoot);
10611 }
10612 warningsForRoot.push(fiber);
10613 }
10614 };
10615
10616 ReactStrictModeWarnings.flushLegacyContextWarning = function () {
10617 pendingLegacyContextWarning.forEach(function (fiberArray, strictRoot) {
10618 var uniqueNames = new Set();
10619 fiberArray.forEach(function (fiber) {
10620 uniqueNames.add(getComponentName(fiber.type) || 'Component');
10621 didWarnAboutLegacyContext.add(fiber.type);
10622 });
10623
10624 var sortedNames = setToSortedString(uniqueNames);
10625 var strictRootComponentStack = getStackByFiberInDevAndProd(strictRoot);
10626
10627 warningWithoutStack$1(false, 'Legacy context API has been detected within a strict-mode tree: %s' + '\n\nPlease update the following components: %s' + '\n\nLearn more about this warning here:' + '\nhttps://fb.me/react-strict-mode-warnings', strictRootComponentStack, sortedNames);
10628 });
10629 };
10630}
10631
10632// This lets us hook into Fiber to debug what it's doing.
10633// See https://github.com/facebook/react/pull/8033.
10634// This is not part of the public API, not even for React DevTools.
10635// You may only inject a debugTool if you work on React Fiber itself.
10636var ReactFiberInstrumentation = {
10637 debugTool: null
10638};
10639
10640var ReactFiberInstrumentation_1 = ReactFiberInstrumentation;
10641
10642// TODO: Offscreen updates should never suspend. However, a promise that
10643// suspended inside an offscreen subtree should be able to ping at the priority
10644// of the outer render.
10645
10646function markPendingPriorityLevel(root, expirationTime) {
10647 // If there's a gap between completing a failed root and retrying it,
10648 // additional updates may be scheduled. Clear `didError`, in case the update
10649 // is sufficient to fix the error.
10650 root.didError = false;
10651
10652 // Update the latest and earliest pending times
10653 var earliestPendingTime = root.earliestPendingTime;
10654 if (earliestPendingTime === NoWork) {
10655 // No other pending updates.
10656 root.earliestPendingTime = root.latestPendingTime = expirationTime;
10657 } else {
10658 if (earliestPendingTime < expirationTime) {
10659 // This is the earliest pending update.
10660 root.earliestPendingTime = expirationTime;
10661 } else {
10662 var latestPendingTime = root.latestPendingTime;
10663 if (latestPendingTime > expirationTime) {
10664 // This is the latest pending update
10665 root.latestPendingTime = expirationTime;
10666 }
10667 }
10668 }
10669 findNextExpirationTimeToWorkOn(expirationTime, root);
10670}
10671
10672function markCommittedPriorityLevels(root, earliestRemainingTime) {
10673 root.didError = false;
10674
10675 if (earliestRemainingTime === NoWork) {
10676 // Fast path. There's no remaining work. Clear everything.
10677 root.earliestPendingTime = NoWork;
10678 root.latestPendingTime = NoWork;
10679 root.earliestSuspendedTime = NoWork;
10680 root.latestSuspendedTime = NoWork;
10681 root.latestPingedTime = NoWork;
10682 findNextExpirationTimeToWorkOn(NoWork, root);
10683 return;
10684 }
10685
10686 if (earliestRemainingTime < root.latestPingedTime) {
10687 root.latestPingedTime = NoWork;
10688 }
10689
10690 // Let's see if the previous latest known pending level was just flushed.
10691 var latestPendingTime = root.latestPendingTime;
10692 if (latestPendingTime !== NoWork) {
10693 if (latestPendingTime > earliestRemainingTime) {
10694 // We've flushed all the known pending levels.
10695 root.earliestPendingTime = root.latestPendingTime = NoWork;
10696 } else {
10697 var earliestPendingTime = root.earliestPendingTime;
10698 if (earliestPendingTime > earliestRemainingTime) {
10699 // We've flushed the earliest known pending level. Set this to the
10700 // latest pending time.
10701 root.earliestPendingTime = root.latestPendingTime;
10702 }
10703 }
10704 }
10705
10706 // Now let's handle the earliest remaining level in the whole tree. We need to
10707 // decide whether to treat it as a pending level or as suspended. Check
10708 // it falls within the range of known suspended levels.
10709
10710 var earliestSuspendedTime = root.earliestSuspendedTime;
10711 if (earliestSuspendedTime === NoWork) {
10712 // There's no suspended work. Treat the earliest remaining level as a
10713 // pending level.
10714 markPendingPriorityLevel(root, earliestRemainingTime);
10715 findNextExpirationTimeToWorkOn(NoWork, root);
10716 return;
10717 }
10718
10719 var latestSuspendedTime = root.latestSuspendedTime;
10720 if (earliestRemainingTime < latestSuspendedTime) {
10721 // The earliest remaining level is later than all the suspended work. That
10722 // means we've flushed all the suspended work.
10723 root.earliestSuspendedTime = NoWork;
10724 root.latestSuspendedTime = NoWork;
10725 root.latestPingedTime = NoWork;
10726
10727 // There's no suspended work. Treat the earliest remaining level as a
10728 // pending level.
10729 markPendingPriorityLevel(root, earliestRemainingTime);
10730 findNextExpirationTimeToWorkOn(NoWork, root);
10731 return;
10732 }
10733
10734 if (earliestRemainingTime > earliestSuspendedTime) {
10735 // The earliest remaining time is earlier than all the suspended work.
10736 // Treat it as a pending update.
10737 markPendingPriorityLevel(root, earliestRemainingTime);
10738 findNextExpirationTimeToWorkOn(NoWork, root);
10739 return;
10740 }
10741
10742 // The earliest remaining time falls within the range of known suspended
10743 // levels. We should treat this as suspended work.
10744 findNextExpirationTimeToWorkOn(NoWork, root);
10745}
10746
10747function hasLowerPriorityWork(root, erroredExpirationTime) {
10748 var latestPendingTime = root.latestPendingTime;
10749 var latestSuspendedTime = root.latestSuspendedTime;
10750 var latestPingedTime = root.latestPingedTime;
10751 return latestPendingTime !== NoWork && latestPendingTime < erroredExpirationTime || latestSuspendedTime !== NoWork && latestSuspendedTime < erroredExpirationTime || latestPingedTime !== NoWork && latestPingedTime < erroredExpirationTime;
10752}
10753
10754function isPriorityLevelSuspended(root, expirationTime) {
10755 var earliestSuspendedTime = root.earliestSuspendedTime;
10756 var latestSuspendedTime = root.latestSuspendedTime;
10757 return earliestSuspendedTime !== NoWork && expirationTime <= earliestSuspendedTime && expirationTime >= latestSuspendedTime;
10758}
10759
10760function markSuspendedPriorityLevel(root, suspendedTime) {
10761 root.didError = false;
10762 clearPing(root, suspendedTime);
10763
10764 // First, check the known pending levels and update them if needed.
10765 var earliestPendingTime = root.earliestPendingTime;
10766 var latestPendingTime = root.latestPendingTime;
10767 if (earliestPendingTime === suspendedTime) {
10768 if (latestPendingTime === suspendedTime) {
10769 // Both known pending levels were suspended. Clear them.
10770 root.earliestPendingTime = root.latestPendingTime = NoWork;
10771 } else {
10772 // The earliest pending level was suspended. Clear by setting it to the
10773 // latest pending level.
10774 root.earliestPendingTime = latestPendingTime;
10775 }
10776 } else if (latestPendingTime === suspendedTime) {
10777 // The latest pending level was suspended. Clear by setting it to the
10778 // latest pending level.
10779 root.latestPendingTime = earliestPendingTime;
10780 }
10781
10782 // Finally, update the known suspended levels.
10783 var earliestSuspendedTime = root.earliestSuspendedTime;
10784 var latestSuspendedTime = root.latestSuspendedTime;
10785 if (earliestSuspendedTime === NoWork) {
10786 // No other suspended levels.
10787 root.earliestSuspendedTime = root.latestSuspendedTime = suspendedTime;
10788 } else {
10789 if (earliestSuspendedTime < suspendedTime) {
10790 // This is the earliest suspended level.
10791 root.earliestSuspendedTime = suspendedTime;
10792 } else if (latestSuspendedTime > suspendedTime) {
10793 // This is the latest suspended level
10794 root.latestSuspendedTime = suspendedTime;
10795 }
10796 }
10797
10798 findNextExpirationTimeToWorkOn(suspendedTime, root);
10799}
10800
10801function markPingedPriorityLevel(root, pingedTime) {
10802 root.didError = false;
10803
10804 // TODO: When we add back resuming, we need to ensure the progressed work
10805 // is thrown out and not reused during the restarted render. One way to
10806 // invalidate the progressed work is to restart at expirationTime + 1.
10807 var latestPingedTime = root.latestPingedTime;
10808 if (latestPingedTime === NoWork || latestPingedTime > pingedTime) {
10809 root.latestPingedTime = pingedTime;
10810 }
10811 findNextExpirationTimeToWorkOn(pingedTime, root);
10812}
10813
10814function clearPing(root, completedTime) {
10815 var latestPingedTime = root.latestPingedTime;
10816 if (latestPingedTime >= completedTime) {
10817 root.latestPingedTime = NoWork;
10818 }
10819}
10820
10821function findEarliestOutstandingPriorityLevel(root, renderExpirationTime) {
10822 var earliestExpirationTime = renderExpirationTime;
10823
10824 var earliestPendingTime = root.earliestPendingTime;
10825 var earliestSuspendedTime = root.earliestSuspendedTime;
10826 if (earliestPendingTime > earliestExpirationTime) {
10827 earliestExpirationTime = earliestPendingTime;
10828 }
10829 if (earliestSuspendedTime > earliestExpirationTime) {
10830 earliestExpirationTime = earliestSuspendedTime;
10831 }
10832 return earliestExpirationTime;
10833}
10834
10835function didExpireAtExpirationTime(root, currentTime) {
10836 var expirationTime = root.expirationTime;
10837 if (expirationTime !== NoWork && currentTime <= expirationTime) {
10838 // The root has expired. Flush all work up to the current time.
10839 root.nextExpirationTimeToWorkOn = currentTime;
10840 }
10841}
10842
10843function findNextExpirationTimeToWorkOn(completedExpirationTime, root) {
10844 var earliestSuspendedTime = root.earliestSuspendedTime;
10845 var latestSuspendedTime = root.latestSuspendedTime;
10846 var earliestPendingTime = root.earliestPendingTime;
10847 var latestPingedTime = root.latestPingedTime;
10848
10849 // Work on the earliest pending time. Failing that, work on the latest
10850 // pinged time.
10851 var nextExpirationTimeToWorkOn = earliestPendingTime !== NoWork ? earliestPendingTime : latestPingedTime;
10852
10853 // If there is no pending or pinged work, check if there's suspended work
10854 // that's lower priority than what we just completed.
10855 if (nextExpirationTimeToWorkOn === NoWork && (completedExpirationTime === NoWork || latestSuspendedTime < completedExpirationTime)) {
10856 // The lowest priority suspended work is the work most likely to be
10857 // committed next. Let's start rendering it again, so that if it times out,
10858 // it's ready to commit.
10859 nextExpirationTimeToWorkOn = latestSuspendedTime;
10860 }
10861
10862 var expirationTime = nextExpirationTimeToWorkOn;
10863 if (expirationTime !== NoWork && earliestSuspendedTime > expirationTime) {
10864 // Expire using the earliest known expiration time.
10865 expirationTime = earliestSuspendedTime;
10866 }
10867
10868 root.nextExpirationTimeToWorkOn = nextExpirationTimeToWorkOn;
10869 root.expirationTime = expirationTime;
10870}
10871
10872// UpdateQueue is a linked list of prioritized updates.
10873//
10874// Like fibers, update queues come in pairs: a current queue, which represents
10875// the visible state of the screen, and a work-in-progress queue, which is
10876// can be mutated and processed asynchronously before it is committed — a form
10877// of double buffering. If a work-in-progress render is discarded before
10878// finishing, we create a new work-in-progress by cloning the current queue.
10879//
10880// Both queues share a persistent, singly-linked list structure. To schedule an
10881// update, we append it to the end of both queues. Each queue maintains a
10882// pointer to first update in the persistent list that hasn't been processed.
10883// The work-in-progress pointer always has a position equal to or greater than
10884// the current queue, since we always work on that one. The current queue's
10885// pointer is only updated during the commit phase, when we swap in the
10886// work-in-progress.
10887//
10888// For example:
10889//
10890// Current pointer: A - B - C - D - E - F
10891// Work-in-progress pointer: D - E - F
10892// ^
10893// The work-in-progress queue has
10894// processed more updates than current.
10895//
10896// The reason we append to both queues is because otherwise we might drop
10897// updates without ever processing them. For example, if we only add updates to
10898// the work-in-progress queue, some updates could be lost whenever a work-in
10899// -progress render restarts by cloning from current. Similarly, if we only add
10900// updates to the current queue, the updates will be lost whenever an already
10901// in-progress queue commits and swaps with the current queue. However, by
10902// adding to both queues, we guarantee that the update will be part of the next
10903// work-in-progress. (And because the work-in-progress queue becomes the
10904// current queue once it commits, there's no danger of applying the same
10905// update twice.)
10906//
10907// Prioritization
10908// --------------
10909//
10910// Updates are not sorted by priority, but by insertion; new updates are always
10911// appended to the end of the list.
10912//
10913// The priority is still important, though. When processing the update queue
10914// during the render phase, only the updates with sufficient priority are
10915// included in the result. If we skip an update because it has insufficient
10916// priority, it remains in the queue to be processed later, during a lower
10917// priority render. Crucially, all updates subsequent to a skipped update also
10918// remain in the queue *regardless of their priority*. That means high priority
10919// updates are sometimes processed twice, at two separate priorities. We also
10920// keep track of a base state, that represents the state before the first
10921// update in the queue is applied.
10922//
10923// For example:
10924//
10925// Given a base state of '', and the following queue of updates
10926//
10927// A1 - B2 - C1 - D2
10928//
10929// where the number indicates the priority, and the update is applied to the
10930// previous state by appending a letter, React will process these updates as
10931// two separate renders, one per distinct priority level:
10932//
10933// First render, at priority 1:
10934// Base state: ''
10935// Updates: [A1, C1]
10936// Result state: 'AC'
10937//
10938// Second render, at priority 2:
10939// Base state: 'A' <- The base state does not include C1,
10940// because B2 was skipped.
10941// Updates: [B2, C1, D2] <- C1 was rebased on top of B2
10942// Result state: 'ABCD'
10943//
10944// Because we process updates in insertion order, and rebase high priority
10945// updates when preceding updates are skipped, the final result is deterministic
10946// regardless of priority. Intermediate state may vary according to system
10947// resources, but the final state is always the same.
10948
10949var UpdateState = 0;
10950var ReplaceState = 1;
10951var ForceUpdate = 2;
10952var CaptureUpdate = 3;
10953
10954// Global state that is reset at the beginning of calling `processUpdateQueue`.
10955// It should only be read right after calling `processUpdateQueue`, via
10956// `checkHasForceUpdateAfterProcessing`.
10957var hasForceUpdate = false;
10958
10959var didWarnUpdateInsideUpdate = void 0;
10960var currentlyProcessingQueue = void 0;
10961var resetCurrentlyProcessingQueue = void 0;
10962{
10963 didWarnUpdateInsideUpdate = false;
10964 currentlyProcessingQueue = null;
10965 resetCurrentlyProcessingQueue = function () {
10966 currentlyProcessingQueue = null;
10967 };
10968}
10969
10970function createUpdateQueue(baseState) {
10971 var queue = {
10972 baseState: baseState,
10973 firstUpdate: null,
10974 lastUpdate: null,
10975 firstCapturedUpdate: null,
10976 lastCapturedUpdate: null,
10977 firstEffect: null,
10978 lastEffect: null,
10979 firstCapturedEffect: null,
10980 lastCapturedEffect: null
10981 };
10982 return queue;
10983}
10984
10985function cloneUpdateQueue(currentQueue) {
10986 var queue = {
10987 baseState: currentQueue.baseState,
10988 firstUpdate: currentQueue.firstUpdate,
10989 lastUpdate: currentQueue.lastUpdate,
10990
10991 // TODO: With resuming, if we bail out and resuse the child tree, we should
10992 // keep these effects.
10993 firstCapturedUpdate: null,
10994 lastCapturedUpdate: null,
10995
10996 firstEffect: null,
10997 lastEffect: null,
10998
10999 firstCapturedEffect: null,
11000 lastCapturedEffect: null
11001 };
11002 return queue;
11003}
11004
11005function createUpdate(expirationTime) {
11006 return {
11007 expirationTime: expirationTime,
11008
11009 tag: UpdateState,
11010 payload: null,
11011 callback: null,
11012
11013 next: null,
11014 nextEffect: null
11015 };
11016}
11017
11018function appendUpdateToQueue(queue, update) {
11019 // Append the update to the end of the list.
11020 if (queue.lastUpdate === null) {
11021 // Queue is empty
11022 queue.firstUpdate = queue.lastUpdate = update;
11023 } else {
11024 queue.lastUpdate.next = update;
11025 queue.lastUpdate = update;
11026 }
11027}
11028
11029function enqueueUpdate(fiber, update) {
11030 // Update queues are created lazily.
11031 var alternate = fiber.alternate;
11032 var queue1 = void 0;
11033 var queue2 = void 0;
11034 if (alternate === null) {
11035 // There's only one fiber.
11036 queue1 = fiber.updateQueue;
11037 queue2 = null;
11038 if (queue1 === null) {
11039 queue1 = fiber.updateQueue = createUpdateQueue(fiber.memoizedState);
11040 }
11041 } else {
11042 // There are two owners.
11043 queue1 = fiber.updateQueue;
11044 queue2 = alternate.updateQueue;
11045 if (queue1 === null) {
11046 if (queue2 === null) {
11047 // Neither fiber has an update queue. Create new ones.
11048 queue1 = fiber.updateQueue = createUpdateQueue(fiber.memoizedState);
11049 queue2 = alternate.updateQueue = createUpdateQueue(alternate.memoizedState);
11050 } else {
11051 // Only one fiber has an update queue. Clone to create a new one.
11052 queue1 = fiber.updateQueue = cloneUpdateQueue(queue2);
11053 }
11054 } else {
11055 if (queue2 === null) {
11056 // Only one fiber has an update queue. Clone to create a new one.
11057 queue2 = alternate.updateQueue = cloneUpdateQueue(queue1);
11058 } else {
11059 // Both owners have an update queue.
11060 }
11061 }
11062 }
11063 if (queue2 === null || queue1 === queue2) {
11064 // There's only a single queue.
11065 appendUpdateToQueue(queue1, update);
11066 } else {
11067 // There are two queues. We need to append the update to both queues,
11068 // while accounting for the persistent structure of the list — we don't
11069 // want the same update to be added multiple times.
11070 if (queue1.lastUpdate === null || queue2.lastUpdate === null) {
11071 // One of the queues is not empty. We must add the update to both queues.
11072 appendUpdateToQueue(queue1, update);
11073 appendUpdateToQueue(queue2, update);
11074 } else {
11075 // Both queues are non-empty. The last update is the same in both lists,
11076 // because of structural sharing. So, only append to one of the lists.
11077 appendUpdateToQueue(queue1, update);
11078 // But we still need to update the `lastUpdate` pointer of queue2.
11079 queue2.lastUpdate = update;
11080 }
11081 }
11082
11083 {
11084 if (fiber.tag === ClassComponent && (currentlyProcessingQueue === queue1 || queue2 !== null && currentlyProcessingQueue === queue2) && !didWarnUpdateInsideUpdate) {
11085 warningWithoutStack$1(false, 'An update (setState, replaceState, or forceUpdate) was scheduled ' + 'from inside an update function. Update functions should be pure, ' + 'with zero side-effects. Consider using componentDidUpdate or a ' + 'callback.');
11086 didWarnUpdateInsideUpdate = true;
11087 }
11088 }
11089}
11090
11091function enqueueCapturedUpdate(workInProgress, update) {
11092 // Captured updates go into a separate list, and only on the work-in-
11093 // progress queue.
11094 var workInProgressQueue = workInProgress.updateQueue;
11095 if (workInProgressQueue === null) {
11096 workInProgressQueue = workInProgress.updateQueue = createUpdateQueue(workInProgress.memoizedState);
11097 } else {
11098 // TODO: I put this here rather than createWorkInProgress so that we don't
11099 // clone the queue unnecessarily. There's probably a better way to
11100 // structure this.
11101 workInProgressQueue = ensureWorkInProgressQueueIsAClone(workInProgress, workInProgressQueue);
11102 }
11103
11104 // Append the update to the end of the list.
11105 if (workInProgressQueue.lastCapturedUpdate === null) {
11106 // This is the first render phase update
11107 workInProgressQueue.firstCapturedUpdate = workInProgressQueue.lastCapturedUpdate = update;
11108 } else {
11109 workInProgressQueue.lastCapturedUpdate.next = update;
11110 workInProgressQueue.lastCapturedUpdate = update;
11111 }
11112}
11113
11114function ensureWorkInProgressQueueIsAClone(workInProgress, queue) {
11115 var current = workInProgress.alternate;
11116 if (current !== null) {
11117 // If the work-in-progress queue is equal to the current queue,
11118 // we need to clone it first.
11119 if (queue === current.updateQueue) {
11120 queue = workInProgress.updateQueue = cloneUpdateQueue(queue);
11121 }
11122 }
11123 return queue;
11124}
11125
11126function getStateFromUpdate(workInProgress, queue, update, prevState, nextProps, instance) {
11127 switch (update.tag) {
11128 case ReplaceState:
11129 {
11130 var _payload = update.payload;
11131 if (typeof _payload === 'function') {
11132 // Updater function
11133 {
11134 if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & StrictMode) {
11135 _payload.call(instance, prevState, nextProps);
11136 }
11137 }
11138 return _payload.call(instance, prevState, nextProps);
11139 }
11140 // State object
11141 return _payload;
11142 }
11143 case CaptureUpdate:
11144 {
11145 workInProgress.effectTag = workInProgress.effectTag & ~ShouldCapture | DidCapture;
11146 }
11147 // Intentional fallthrough
11148 case UpdateState:
11149 {
11150 var _payload2 = update.payload;
11151 var partialState = void 0;
11152 if (typeof _payload2 === 'function') {
11153 // Updater function
11154 {
11155 if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & StrictMode) {
11156 _payload2.call(instance, prevState, nextProps);
11157 }
11158 }
11159 partialState = _payload2.call(instance, prevState, nextProps);
11160 } else {
11161 // Partial state object
11162 partialState = _payload2;
11163 }
11164 if (partialState === null || partialState === undefined) {
11165 // Null and undefined are treated as no-ops.
11166 return prevState;
11167 }
11168 // Merge the partial state and the previous state.
11169 return _assign({}, prevState, partialState);
11170 }
11171 case ForceUpdate:
11172 {
11173 hasForceUpdate = true;
11174 return prevState;
11175 }
11176 }
11177 return prevState;
11178}
11179
11180function processUpdateQueue(workInProgress, queue, props, instance, renderExpirationTime) {
11181 hasForceUpdate = false;
11182
11183 queue = ensureWorkInProgressQueueIsAClone(workInProgress, queue);
11184
11185 {
11186 currentlyProcessingQueue = queue;
11187 }
11188
11189 // These values may change as we process the queue.
11190 var newBaseState = queue.baseState;
11191 var newFirstUpdate = null;
11192 var newExpirationTime = NoWork;
11193
11194 // Iterate through the list of updates to compute the result.
11195 var update = queue.firstUpdate;
11196 var resultState = newBaseState;
11197 while (update !== null) {
11198 var updateExpirationTime = update.expirationTime;
11199 if (updateExpirationTime < renderExpirationTime) {
11200 // This update does not have sufficient priority. Skip it.
11201 if (newFirstUpdate === null) {
11202 // This is the first skipped update. It will be the first update in
11203 // the new list.
11204 newFirstUpdate = update;
11205 // Since this is the first update that was skipped, the current result
11206 // is the new base state.
11207 newBaseState = resultState;
11208 }
11209 // Since this update will remain in the list, update the remaining
11210 // expiration time.
11211 if (newExpirationTime < updateExpirationTime) {
11212 newExpirationTime = updateExpirationTime;
11213 }
11214 } else {
11215 // This update does have sufficient priority. Process it and compute
11216 // a new result.
11217 resultState = getStateFromUpdate(workInProgress, queue, update, resultState, props, instance);
11218 var _callback = update.callback;
11219 if (_callback !== null) {
11220 workInProgress.effectTag |= Callback;
11221 // Set this to null, in case it was mutated during an aborted render.
11222 update.nextEffect = null;
11223 if (queue.lastEffect === null) {
11224 queue.firstEffect = queue.lastEffect = update;
11225 } else {
11226 queue.lastEffect.nextEffect = update;
11227 queue.lastEffect = update;
11228 }
11229 }
11230 }
11231 // Continue to the next update.
11232 update = update.next;
11233 }
11234
11235 // Separately, iterate though the list of captured updates.
11236 var newFirstCapturedUpdate = null;
11237 update = queue.firstCapturedUpdate;
11238 while (update !== null) {
11239 var _updateExpirationTime = update.expirationTime;
11240 if (_updateExpirationTime < renderExpirationTime) {
11241 // This update does not have sufficient priority. Skip it.
11242 if (newFirstCapturedUpdate === null) {
11243 // This is the first skipped captured update. It will be the first
11244 // update in the new list.
11245 newFirstCapturedUpdate = update;
11246 // If this is the first update that was skipped, the current result is
11247 // the new base state.
11248 if (newFirstUpdate === null) {
11249 newBaseState = resultState;
11250 }
11251 }
11252 // Since this update will remain in the list, update the remaining
11253 // expiration time.
11254 if (newExpirationTime < _updateExpirationTime) {
11255 newExpirationTime = _updateExpirationTime;
11256 }
11257 } else {
11258 // This update does have sufficient priority. Process it and compute
11259 // a new result.
11260 resultState = getStateFromUpdate(workInProgress, queue, update, resultState, props, instance);
11261 var _callback2 = update.callback;
11262 if (_callback2 !== null) {
11263 workInProgress.effectTag |= Callback;
11264 // Set this to null, in case it was mutated during an aborted render.
11265 update.nextEffect = null;
11266 if (queue.lastCapturedEffect === null) {
11267 queue.firstCapturedEffect = queue.lastCapturedEffect = update;
11268 } else {
11269 queue.lastCapturedEffect.nextEffect = update;
11270 queue.lastCapturedEffect = update;
11271 }
11272 }
11273 }
11274 update = update.next;
11275 }
11276
11277 if (newFirstUpdate === null) {
11278 queue.lastUpdate = null;
11279 }
11280 if (newFirstCapturedUpdate === null) {
11281 queue.lastCapturedUpdate = null;
11282 } else {
11283 workInProgress.effectTag |= Callback;
11284 }
11285 if (newFirstUpdate === null && newFirstCapturedUpdate === null) {
11286 // We processed every update, without skipping. That means the new base
11287 // state is the same as the result state.
11288 newBaseState = resultState;
11289 }
11290
11291 queue.baseState = newBaseState;
11292 queue.firstUpdate = newFirstUpdate;
11293 queue.firstCapturedUpdate = newFirstCapturedUpdate;
11294
11295 // Set the remaining expiration time to be whatever is remaining in the queue.
11296 // This should be fine because the only two other things that contribute to
11297 // expiration time are props and context. We're already in the middle of the
11298 // begin phase by the time we start processing the queue, so we've already
11299 // dealt with the props. Context in components that specify
11300 // shouldComponentUpdate is tricky; but we'll have to account for
11301 // that regardless.
11302 workInProgress.expirationTime = newExpirationTime;
11303 workInProgress.memoizedState = resultState;
11304
11305 {
11306 currentlyProcessingQueue = null;
11307 }
11308}
11309
11310function callCallback(callback, context) {
11311 !(typeof callback === 'function') ? invariant(false, 'Invalid argument passed as callback. Expected a function. Instead received: %s', callback) : void 0;
11312 callback.call(context);
11313}
11314
11315function resetHasForceUpdateBeforeProcessing() {
11316 hasForceUpdate = false;
11317}
11318
11319function checkHasForceUpdateAfterProcessing() {
11320 return hasForceUpdate;
11321}
11322
11323function commitUpdateQueue(finishedWork, finishedQueue, instance, renderExpirationTime) {
11324 // If the finished render included captured updates, and there are still
11325 // lower priority updates left over, we need to keep the captured updates
11326 // in the queue so that they are rebased and not dropped once we process the
11327 // queue again at the lower priority.
11328 if (finishedQueue.firstCapturedUpdate !== null) {
11329 // Join the captured update list to the end of the normal list.
11330 if (finishedQueue.lastUpdate !== null) {
11331 finishedQueue.lastUpdate.next = finishedQueue.firstCapturedUpdate;
11332 finishedQueue.lastUpdate = finishedQueue.lastCapturedUpdate;
11333 }
11334 // Clear the list of captured updates.
11335 finishedQueue.firstCapturedUpdate = finishedQueue.lastCapturedUpdate = null;
11336 }
11337
11338 // Commit the effects
11339 commitUpdateEffects(finishedQueue.firstEffect, instance);
11340 finishedQueue.firstEffect = finishedQueue.lastEffect = null;
11341
11342 commitUpdateEffects(finishedQueue.firstCapturedEffect, instance);
11343 finishedQueue.firstCapturedEffect = finishedQueue.lastCapturedEffect = null;
11344}
11345
11346function commitUpdateEffects(effect, instance) {
11347 while (effect !== null) {
11348 var _callback3 = effect.callback;
11349 if (_callback3 !== null) {
11350 effect.callback = null;
11351 callCallback(_callback3, instance);
11352 }
11353 effect = effect.nextEffect;
11354 }
11355}
11356
11357function createCapturedValue(value, source) {
11358 // If the value is an error, call this function immediately after it is thrown
11359 // so the stack is accurate.
11360 return {
11361 value: value,
11362 source: source,
11363 stack: getStackByFiberInDevAndProd(source)
11364 };
11365}
11366
11367var valueCursor = createCursor(null);
11368
11369var rendererSigil = void 0;
11370{
11371 // Use this to detect multiple renderers using the same context
11372 rendererSigil = {};
11373}
11374
11375var currentlyRenderingFiber = null;
11376var lastContextDependency = null;
11377var lastContextWithAllBitsObserved = null;
11378
11379function resetContextDependences() {
11380 // This is called right before React yields execution, to ensure `readContext`
11381 // cannot be called outside the render phase.
11382 currentlyRenderingFiber = null;
11383 lastContextDependency = null;
11384 lastContextWithAllBitsObserved = null;
11385}
11386
11387function pushProvider(providerFiber, nextValue) {
11388 var context = providerFiber.type._context;
11389
11390 if (isPrimaryRenderer) {
11391 push(valueCursor, context._currentValue, providerFiber);
11392
11393 context._currentValue = nextValue;
11394 {
11395 !(context._currentRenderer === undefined || context._currentRenderer === null || context._currentRenderer === rendererSigil) ? warningWithoutStack$1(false, 'Detected multiple renderers concurrently rendering the ' + 'same context provider. This is currently unsupported.') : void 0;
11396 context._currentRenderer = rendererSigil;
11397 }
11398 } else {
11399 push(valueCursor, context._currentValue2, providerFiber);
11400
11401 context._currentValue2 = nextValue;
11402 {
11403 !(context._currentRenderer2 === undefined || context._currentRenderer2 === null || context._currentRenderer2 === rendererSigil) ? warningWithoutStack$1(false, 'Detected multiple renderers concurrently rendering the ' + 'same context provider. This is currently unsupported.') : void 0;
11404 context._currentRenderer2 = rendererSigil;
11405 }
11406 }
11407}
11408
11409function popProvider(providerFiber) {
11410 var currentValue = valueCursor.current;
11411
11412 pop(valueCursor, providerFiber);
11413
11414 var context = providerFiber.type._context;
11415 if (isPrimaryRenderer) {
11416 context._currentValue = currentValue;
11417 } else {
11418 context._currentValue2 = currentValue;
11419 }
11420}
11421
11422function calculateChangedBits(context, newValue, oldValue) {
11423 // Use Object.is to compare the new context value to the old value. Inlined
11424 // Object.is polyfill.
11425 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
11426 if (oldValue === newValue && (oldValue !== 0 || 1 / oldValue === 1 / newValue) || oldValue !== oldValue && newValue !== newValue // eslint-disable-line no-self-compare
11427 ) {
11428 // No change
11429 return 0;
11430 } else {
11431 var changedBits = typeof context._calculateChangedBits === 'function' ? context._calculateChangedBits(oldValue, newValue) : maxSigned31BitInt;
11432
11433 {
11434 !((changedBits & maxSigned31BitInt) === changedBits) ? warning$1(false, 'calculateChangedBits: Expected the return value to be a ' + '31-bit integer. Instead received: %s', changedBits) : void 0;
11435 }
11436 return changedBits | 0;
11437 }
11438}
11439
11440function propagateContextChange(workInProgress, context, changedBits, renderExpirationTime) {
11441 var fiber = workInProgress.child;
11442 if (fiber !== null) {
11443 // Set the return pointer of the child to the work-in-progress fiber.
11444 fiber.return = workInProgress;
11445 }
11446 while (fiber !== null) {
11447 var nextFiber = void 0;
11448
11449 // Visit this fiber.
11450 var dependency = fiber.firstContextDependency;
11451 if (dependency !== null) {
11452 do {
11453 // Check if the context matches.
11454 if (dependency.context === context && (dependency.observedBits & changedBits) !== 0) {
11455 // Match! Schedule an update on this fiber.
11456
11457 if (fiber.tag === ClassComponent) {
11458 // Schedule a force update on the work-in-progress.
11459 var update = createUpdate(renderExpirationTime);
11460 update.tag = ForceUpdate;
11461 // TODO: Because we don't have a work-in-progress, this will add the
11462 // update to the current fiber, too, which means it will persist even if
11463 // this render is thrown away. Since it's a race condition, not sure it's
11464 // worth fixing.
11465 enqueueUpdate(fiber, update);
11466 }
11467
11468 if (fiber.expirationTime < renderExpirationTime) {
11469 fiber.expirationTime = renderExpirationTime;
11470 }
11471 var alternate = fiber.alternate;
11472 if (alternate !== null && alternate.expirationTime < renderExpirationTime) {
11473 alternate.expirationTime = renderExpirationTime;
11474 }
11475 // Update the child expiration time of all the ancestors, including
11476 // the alternates.
11477 var node = fiber.return;
11478 while (node !== null) {
11479 alternate = node.alternate;
11480 if (node.childExpirationTime < renderExpirationTime) {
11481 node.childExpirationTime = renderExpirationTime;
11482 if (alternate !== null && alternate.childExpirationTime < renderExpirationTime) {
11483 alternate.childExpirationTime = renderExpirationTime;
11484 }
11485 } else if (alternate !== null && alternate.childExpirationTime < renderExpirationTime) {
11486 alternate.childExpirationTime = renderExpirationTime;
11487 } else {
11488 // Neither alternate was updated, which means the rest of the
11489 // ancestor path already has sufficient priority.
11490 break;
11491 }
11492 node = node.return;
11493 }
11494 }
11495 nextFiber = fiber.child;
11496 dependency = dependency.next;
11497 } while (dependency !== null);
11498 } else if (fiber.tag === ContextProvider) {
11499 // Don't scan deeper if this is a matching provider
11500 nextFiber = fiber.type === workInProgress.type ? null : fiber.child;
11501 } else {
11502 // Traverse down.
11503 nextFiber = fiber.child;
11504 }
11505
11506 if (nextFiber !== null) {
11507 // Set the return pointer of the child to the work-in-progress fiber.
11508 nextFiber.return = fiber;
11509 } else {
11510 // No child. Traverse to next sibling.
11511 nextFiber = fiber;
11512 while (nextFiber !== null) {
11513 if (nextFiber === workInProgress) {
11514 // We're back to the root of this subtree. Exit.
11515 nextFiber = null;
11516 break;
11517 }
11518 var sibling = nextFiber.sibling;
11519 if (sibling !== null) {
11520 // Set the return pointer of the sibling to the work-in-progress fiber.
11521 sibling.return = nextFiber.return;
11522 nextFiber = sibling;
11523 break;
11524 }
11525 // No more siblings. Traverse up.
11526 nextFiber = nextFiber.return;
11527 }
11528 }
11529 fiber = nextFiber;
11530 }
11531}
11532
11533function prepareToReadContext(workInProgress, renderExpirationTime) {
11534 currentlyRenderingFiber = workInProgress;
11535 lastContextDependency = null;
11536 lastContextWithAllBitsObserved = null;
11537
11538 // Reset the work-in-progress list
11539 workInProgress.firstContextDependency = null;
11540}
11541
11542function readContext(context, observedBits) {
11543 if (lastContextWithAllBitsObserved === context) {
11544 // Nothing to do. We already observe everything in this context.
11545 } else if (observedBits === false || observedBits === 0) {
11546 // Do not observe any updates.
11547 } else {
11548 var resolvedObservedBits = void 0; // Avoid deopting on observable arguments or heterogeneous types.
11549 if (typeof observedBits !== 'number' || observedBits === maxSigned31BitInt) {
11550 // Observe all updates.
11551 lastContextWithAllBitsObserved = context;
11552 resolvedObservedBits = maxSigned31BitInt;
11553 } else {
11554 resolvedObservedBits = observedBits;
11555 }
11556
11557 var contextItem = {
11558 context: context,
11559 observedBits: resolvedObservedBits,
11560 next: null
11561 };
11562
11563 if (lastContextDependency === null) {
11564 !(currentlyRenderingFiber !== null) ? invariant(false, 'Context can only be read while React is rendering, e.g. inside the render method or getDerivedStateFromProps.') : void 0;
11565 // This is the first dependency in the list
11566 currentlyRenderingFiber.firstContextDependency = lastContextDependency = contextItem;
11567 } else {
11568 // Append a new context item.
11569 lastContextDependency = lastContextDependency.next = contextItem;
11570 }
11571 }
11572 return isPrimaryRenderer ? context._currentValue : context._currentValue2;
11573}
11574
11575var NoEffect$1 = /* */0;
11576var UnmountSnapshot = /* */2;
11577var UnmountMutation = /* */4;
11578var MountMutation = /* */8;
11579var UnmountLayout = /* */16;
11580var MountLayout = /* */32;
11581var MountPassive = /* */64;
11582var UnmountPassive = /* */128;
11583
11584function areHookInputsEqual(arr1, arr2) {
11585 // Don't bother comparing lengths in prod because these arrays should be
11586 // passed inline.
11587 {
11588 !(arr1.length === arr2.length) ? warning$1(false, 'Detected a variable number of hook dependencies. The length of the ' + 'dependencies array should be constant between renders.\n\n' + 'Previous: %s\n' + 'Incoming: %s', arr1.join(', '), arr2.join(', ')) : void 0;
11589 }
11590 for (var i = 0; i < arr1.length; i++) {
11591 // Inlined Object.is polyfill.
11592 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
11593 var val1 = arr1[i];
11594 var val2 = arr2[i];
11595 if (val1 === val2 && (val1 !== 0 || 1 / val1 === 1 / val2) || val1 !== val1 && val2 !== val2 // eslint-disable-line no-self-compare
11596 ) {
11597 continue;
11598 }
11599 return false;
11600 }
11601 return true;
11602}
11603
11604// These are set right before calling the component.
11605var renderExpirationTime = NoWork;
11606// The work-in-progress fiber. I've named it differently to distinguish it from
11607// the work-in-progress hook.
11608var currentlyRenderingFiber$1 = null;
11609
11610// Hooks are stored as a linked list on the fiber's memoizedState field. The
11611// current hook list is the list that belongs to the current fiber. The
11612// work-in-progress hook list is a new list that will be added to the
11613// work-in-progress fiber.
11614var firstCurrentHook = null;
11615var currentHook = null;
11616var firstWorkInProgressHook = null;
11617var workInProgressHook = null;
11618
11619var remainingExpirationTime = NoWork;
11620var componentUpdateQueue = null;
11621
11622// Updates scheduled during render will trigger an immediate re-render at the
11623// end of the current pass. We can't store these updates on the normal queue,
11624// because if the work is aborted, they should be discarded. Because this is
11625// a relatively rare case, we also don't want to add an additional field to
11626// either the hook or queue object types. So we store them in a lazily create
11627// map of queue -> render-phase updates, which are discarded once the component
11628// completes without re-rendering.
11629
11630// Whether the work-in-progress hook is a re-rendered hook
11631var isReRender = false;
11632// Whether an update was scheduled during the currently executing render pass.
11633var didScheduleRenderPhaseUpdate = false;
11634// Lazily created map of render-phase updates
11635var renderPhaseUpdates = null;
11636// Counter to prevent infinite loops.
11637var numberOfReRenders = 0;
11638var RE_RENDER_LIMIT = 25;
11639
11640function resolveCurrentlyRenderingFiber() {
11641 !(currentlyRenderingFiber$1 !== null) ? invariant(false, 'Hooks can only be called inside the body of a function component.') : void 0;
11642 return currentlyRenderingFiber$1;
11643}
11644
11645function prepareToUseHooks(current, workInProgress, nextRenderExpirationTime) {
11646 if (!enableHooks) {
11647 return;
11648 }
11649 renderExpirationTime = nextRenderExpirationTime;
11650 currentlyRenderingFiber$1 = workInProgress;
11651 firstCurrentHook = current !== null ? current.memoizedState : null;
11652
11653 // The following should have already been reset
11654 // currentHook = null;
11655 // workInProgressHook = null;
11656
11657 // remainingExpirationTime = NoWork;
11658 // componentUpdateQueue = null;
11659
11660 // isReRender = false;
11661 // didScheduleRenderPhaseUpdate = false;
11662 // renderPhaseUpdates = null;
11663 // numberOfReRenders = 0;
11664}
11665
11666function finishHooks(Component, props, children, refOrContext) {
11667 if (!enableHooks) {
11668 return children;
11669 }
11670
11671 // This must be called after every function component to prevent hooks from
11672 // being used in classes.
11673
11674 while (didScheduleRenderPhaseUpdate) {
11675 // Updates were scheduled during the render phase. They are stored in
11676 // the `renderPhaseUpdates` map. Call the component again, reusing the
11677 // work-in-progress hooks and applying the additional updates on top. Keep
11678 // restarting until no more updates are scheduled.
11679 didScheduleRenderPhaseUpdate = false;
11680 numberOfReRenders += 1;
11681
11682 // Start over from the beginning of the list
11683 currentHook = null;
11684 workInProgressHook = null;
11685 componentUpdateQueue = null;
11686
11687 children = Component(props, refOrContext);
11688 }
11689 renderPhaseUpdates = null;
11690 numberOfReRenders = 0;
11691
11692 var renderedWork = currentlyRenderingFiber$1;
11693
11694 renderedWork.memoizedState = firstWorkInProgressHook;
11695 renderedWork.expirationTime = remainingExpirationTime;
11696 renderedWork.updateQueue = componentUpdateQueue;
11697
11698 var didRenderTooFewHooks = currentHook !== null && currentHook.next !== null;
11699
11700 renderExpirationTime = NoWork;
11701 currentlyRenderingFiber$1 = null;
11702
11703 firstCurrentHook = null;
11704 currentHook = null;
11705 firstWorkInProgressHook = null;
11706 workInProgressHook = null;
11707
11708 remainingExpirationTime = NoWork;
11709 componentUpdateQueue = null;
11710
11711 // Always set during createWorkInProgress
11712 // isReRender = false;
11713
11714 // These were reset above
11715 // didScheduleRenderPhaseUpdate = false;
11716 // renderPhaseUpdates = null;
11717 // numberOfReRenders = 0;
11718
11719 !!didRenderTooFewHooks ? invariant(false, 'Rendered fewer hooks than expected. This may be caused by an accidental early return statement.') : void 0;
11720
11721 return children;
11722}
11723
11724function resetHooks() {
11725 if (!enableHooks) {
11726 return;
11727 }
11728
11729 // This is called instead of `finishHooks` if the component throws. It's also
11730 // called inside mountIndeterminateComponent if we determine the component
11731 // is a module-style component.
11732 renderExpirationTime = NoWork;
11733 currentlyRenderingFiber$1 = null;
11734
11735 firstCurrentHook = null;
11736 currentHook = null;
11737 firstWorkInProgressHook = null;
11738 workInProgressHook = null;
11739
11740 remainingExpirationTime = NoWork;
11741 componentUpdateQueue = null;
11742
11743 // Always set during createWorkInProgress
11744 // isReRender = false;
11745
11746 didScheduleRenderPhaseUpdate = false;
11747 renderPhaseUpdates = null;
11748 numberOfReRenders = 0;
11749}
11750
11751function createHook() {
11752 return {
11753 memoizedState: null,
11754
11755 baseState: null,
11756 queue: null,
11757 baseUpdate: null,
11758
11759 next: null
11760 };
11761}
11762
11763function cloneHook(hook) {
11764 return {
11765 memoizedState: hook.memoizedState,
11766
11767 baseState: hook.baseState,
11768 queue: hook.queue,
11769 baseUpdate: hook.baseUpdate,
11770
11771 next: null
11772 };
11773}
11774
11775function createWorkInProgressHook() {
11776 if (workInProgressHook === null) {
11777 // This is the first hook in the list
11778 if (firstWorkInProgressHook === null) {
11779 isReRender = false;
11780 currentHook = firstCurrentHook;
11781 if (currentHook === null) {
11782 // This is a newly mounted hook
11783 workInProgressHook = createHook();
11784 } else {
11785 // Clone the current hook.
11786 workInProgressHook = cloneHook(currentHook);
11787 }
11788 firstWorkInProgressHook = workInProgressHook;
11789 } else {
11790 // There's already a work-in-progress. Reuse it.
11791 isReRender = true;
11792 currentHook = firstCurrentHook;
11793 workInProgressHook = firstWorkInProgressHook;
11794 }
11795 } else {
11796 if (workInProgressHook.next === null) {
11797 isReRender = false;
11798 var hook = void 0;
11799 if (currentHook === null) {
11800 // This is a newly mounted hook
11801 hook = createHook();
11802 } else {
11803 currentHook = currentHook.next;
11804 if (currentHook === null) {
11805 // This is a newly mounted hook
11806 hook = createHook();
11807 } else {
11808 // Clone the current hook.
11809 hook = cloneHook(currentHook);
11810 }
11811 }
11812 // Append to the end of the list
11813 workInProgressHook = workInProgressHook.next = hook;
11814 } else {
11815 // There's already a work-in-progress. Reuse it.
11816 isReRender = true;
11817 workInProgressHook = workInProgressHook.next;
11818 currentHook = currentHook !== null ? currentHook.next : null;
11819 }
11820 }
11821 return workInProgressHook;
11822}
11823
11824function createFunctionComponentUpdateQueue() {
11825 return {
11826 lastEffect: null
11827 };
11828}
11829
11830function basicStateReducer(state, action) {
11831 return typeof action === 'function' ? action(state) : action;
11832}
11833
11834function useContext(context, observedBits) {
11835 // Ensure we're in a function component (class components support only the
11836 // .unstable_read() form)
11837 resolveCurrentlyRenderingFiber();
11838 return readContext(context, observedBits);
11839}
11840
11841function useState(initialState) {
11842 return useReducer(basicStateReducer,
11843 // useReducer has a special case to support lazy useState initializers
11844 initialState);
11845}
11846
11847function useReducer(reducer, initialState, initialAction) {
11848 currentlyRenderingFiber$1 = resolveCurrentlyRenderingFiber();
11849 workInProgressHook = createWorkInProgressHook();
11850 var queue = workInProgressHook.queue;
11851 if (queue !== null) {
11852 // Already have a queue, so this is an update.
11853 if (isReRender) {
11854 // This is a re-render. Apply the new render phase updates to the previous
11855 var _dispatch2 = queue.dispatch;
11856 if (renderPhaseUpdates !== null) {
11857 // Render phase updates are stored in a map of queue -> linked list
11858 var firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
11859 if (firstRenderPhaseUpdate !== undefined) {
11860 renderPhaseUpdates.delete(queue);
11861 var newState = workInProgressHook.memoizedState;
11862 var update = firstRenderPhaseUpdate;
11863 do {
11864 // Process this render phase update. We don't have to check the
11865 // priority because it will always be the same as the current
11866 // render's.
11867 var _action = update.action;
11868 newState = reducer(newState, _action);
11869 update = update.next;
11870 } while (update !== null);
11871
11872 workInProgressHook.memoizedState = newState;
11873
11874 // Don't persist the state accumlated from the render phase updates to
11875 // the base state unless the queue is empty.
11876 // TODO: Not sure if this is the desired semantics, but it's what we
11877 // do for gDSFP. I can't remember why.
11878 if (workInProgressHook.baseUpdate === queue.last) {
11879 workInProgressHook.baseState = newState;
11880 }
11881
11882 return [newState, _dispatch2];
11883 }
11884 }
11885 return [workInProgressHook.memoizedState, _dispatch2];
11886 }
11887
11888 // The last update in the entire queue
11889 var _last = queue.last;
11890 // The last update that is part of the base state.
11891 var _baseUpdate = workInProgressHook.baseUpdate;
11892
11893 // Find the first unprocessed update.
11894 var first = void 0;
11895 if (_baseUpdate !== null) {
11896 if (_last !== null) {
11897 // For the first update, the queue is a circular linked list where
11898 // `queue.last.next = queue.first`. Once the first update commits, and
11899 // the `baseUpdate` is no longer empty, we can unravel the list.
11900 _last.next = null;
11901 }
11902 first = _baseUpdate.next;
11903 } else {
11904 first = _last !== null ? _last.next : null;
11905 }
11906 if (first !== null) {
11907 var _newState = workInProgressHook.baseState;
11908 var newBaseState = null;
11909 var newBaseUpdate = null;
11910 var prevUpdate = _baseUpdate;
11911 var _update = first;
11912 var didSkip = false;
11913 do {
11914 var updateExpirationTime = _update.expirationTime;
11915 if (updateExpirationTime < renderExpirationTime) {
11916 // Priority is insufficient. Skip this update. If this is the first
11917 // skipped update, the previous update/state is the new base
11918 // update/state.
11919 if (!didSkip) {
11920 didSkip = true;
11921 newBaseUpdate = prevUpdate;
11922 newBaseState = _newState;
11923 }
11924 // Update the remaining priority in the queue.
11925 if (updateExpirationTime > remainingExpirationTime) {
11926 remainingExpirationTime = updateExpirationTime;
11927 }
11928 } else {
11929 // Process this update.
11930 var _action2 = _update.action;
11931 _newState = reducer(_newState, _action2);
11932 }
11933 prevUpdate = _update;
11934 _update = _update.next;
11935 } while (_update !== null && _update !== first);
11936
11937 if (!didSkip) {
11938 newBaseUpdate = prevUpdate;
11939 newBaseState = _newState;
11940 }
11941
11942 workInProgressHook.memoizedState = _newState;
11943 workInProgressHook.baseUpdate = newBaseUpdate;
11944 workInProgressHook.baseState = newBaseState;
11945 }
11946
11947 var _dispatch = queue.dispatch;
11948 return [workInProgressHook.memoizedState, _dispatch];
11949 }
11950
11951 // There's no existing queue, so this is the initial render.
11952 if (reducer === basicStateReducer) {
11953 // Special case for `useState`.
11954 if (typeof initialState === 'function') {
11955 initialState = initialState();
11956 }
11957 } else if (initialAction !== undefined && initialAction !== null) {
11958 initialState = reducer(initialState, initialAction);
11959 }
11960 workInProgressHook.memoizedState = workInProgressHook.baseState = initialState;
11961 queue = workInProgressHook.queue = {
11962 last: null,
11963 dispatch: null
11964 };
11965 var dispatch = queue.dispatch = dispatchAction.bind(null, currentlyRenderingFiber$1, queue);
11966 return [workInProgressHook.memoizedState, dispatch];
11967}
11968
11969function pushEffect(tag, create, destroy, inputs) {
11970 var effect = {
11971 tag: tag,
11972 create: create,
11973 destroy: destroy,
11974 inputs: inputs,
11975 // Circular
11976 next: null
11977 };
11978 if (componentUpdateQueue === null) {
11979 componentUpdateQueue = createFunctionComponentUpdateQueue();
11980 componentUpdateQueue.lastEffect = effect.next = effect;
11981 } else {
11982 var _lastEffect = componentUpdateQueue.lastEffect;
11983 if (_lastEffect === null) {
11984 componentUpdateQueue.lastEffect = effect.next = effect;
11985 } else {
11986 var firstEffect = _lastEffect.next;
11987 _lastEffect.next = effect;
11988 effect.next = firstEffect;
11989 componentUpdateQueue.lastEffect = effect;
11990 }
11991 }
11992 return effect;
11993}
11994
11995function useRef(initialValue) {
11996 currentlyRenderingFiber$1 = resolveCurrentlyRenderingFiber();
11997 workInProgressHook = createWorkInProgressHook();
11998 var ref = void 0;
11999
12000 if (workInProgressHook.memoizedState === null) {
12001 ref = { current: initialValue };
12002 {
12003 Object.seal(ref);
12004 }
12005 workInProgressHook.memoizedState = ref;
12006 } else {
12007 ref = workInProgressHook.memoizedState;
12008 }
12009 return ref;
12010}
12011
12012function useLayoutEffect(create, inputs) {
12013 useEffectImpl(Update, UnmountMutation | MountLayout, create, inputs);
12014}
12015
12016function useEffect(create, inputs) {
12017 useEffectImpl(Update | Passive, UnmountPassive | MountPassive, create, inputs);
12018}
12019
12020function useEffectImpl(fiberEffectTag, hookEffectTag, create, inputs) {
12021 currentlyRenderingFiber$1 = resolveCurrentlyRenderingFiber();
12022 workInProgressHook = createWorkInProgressHook();
12023
12024 var nextInputs = inputs !== undefined && inputs !== null ? inputs : [create];
12025 var destroy = null;
12026 if (currentHook !== null) {
12027 var prevEffect = currentHook.memoizedState;
12028 destroy = prevEffect.destroy;
12029 if (areHookInputsEqual(nextInputs, prevEffect.inputs)) {
12030 pushEffect(NoEffect$1, create, destroy, nextInputs);
12031 return;
12032 }
12033 }
12034
12035 currentlyRenderingFiber$1.effectTag |= fiberEffectTag;
12036 workInProgressHook.memoizedState = pushEffect(hookEffectTag, create, destroy, nextInputs);
12037}
12038
12039function useImperativeMethods(ref, create, inputs) {
12040 // TODO: If inputs are provided, should we skip comparing the ref itself?
12041 var nextInputs = inputs !== null && inputs !== undefined ? inputs.concat([ref]) : [ref, create];
12042
12043 // TODO: I've implemented this on top of useEffect because it's almost the
12044 // same thing, and it would require an equal amount of code. It doesn't seem
12045 // like a common enough use case to justify the additional size.
12046 useLayoutEffect(function () {
12047 if (typeof ref === 'function') {
12048 var refCallback = ref;
12049 var _inst = create();
12050 refCallback(_inst);
12051 return function () {
12052 return refCallback(null);
12053 };
12054 } else if (ref !== null && ref !== undefined) {
12055 var refObject = ref;
12056 var _inst2 = create();
12057 refObject.current = _inst2;
12058 return function () {
12059 refObject.current = null;
12060 };
12061 }
12062 }, nextInputs);
12063}
12064
12065function useCallback(callback, inputs) {
12066 currentlyRenderingFiber$1 = resolveCurrentlyRenderingFiber();
12067 workInProgressHook = createWorkInProgressHook();
12068
12069 var nextInputs = inputs !== undefined && inputs !== null ? inputs : [callback];
12070
12071 var prevState = workInProgressHook.memoizedState;
12072 if (prevState !== null) {
12073 var prevInputs = prevState[1];
12074 if (areHookInputsEqual(nextInputs, prevInputs)) {
12075 return prevState[0];
12076 }
12077 }
12078 workInProgressHook.memoizedState = [callback, nextInputs];
12079 return callback;
12080}
12081
12082function useMemo(nextCreate, inputs) {
12083 currentlyRenderingFiber$1 = resolveCurrentlyRenderingFiber();
12084 workInProgressHook = createWorkInProgressHook();
12085
12086 var nextInputs = inputs !== undefined && inputs !== null ? inputs : [nextCreate];
12087
12088 var prevState = workInProgressHook.memoizedState;
12089 if (prevState !== null) {
12090 var prevInputs = prevState[1];
12091 if (areHookInputsEqual(nextInputs, prevInputs)) {
12092 return prevState[0];
12093 }
12094 }
12095
12096 var nextValue = nextCreate();
12097 workInProgressHook.memoizedState = [nextValue, nextInputs];
12098 return nextValue;
12099}
12100
12101function dispatchAction(fiber, queue, action) {
12102 !(numberOfReRenders < RE_RENDER_LIMIT) ? invariant(false, 'Too many re-renders. React limits the number of renders to prevent an infinite loop.') : void 0;
12103
12104 var alternate = fiber.alternate;
12105 if (fiber === currentlyRenderingFiber$1 || alternate !== null && alternate === currentlyRenderingFiber$1) {
12106 // This is a render phase update. Stash it in a lazily-created map of
12107 // queue -> linked list of updates. After this render pass, we'll restart
12108 // and apply the stashed updates on top of the work-in-progress hook.
12109 didScheduleRenderPhaseUpdate = true;
12110 var update = {
12111 expirationTime: renderExpirationTime,
12112 action: action,
12113 next: null
12114 };
12115 if (renderPhaseUpdates === null) {
12116 renderPhaseUpdates = new Map();
12117 }
12118 var firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
12119 if (firstRenderPhaseUpdate === undefined) {
12120 renderPhaseUpdates.set(queue, update);
12121 } else {
12122 // Append the update to the end of the list.
12123 var lastRenderPhaseUpdate = firstRenderPhaseUpdate;
12124 while (lastRenderPhaseUpdate.next !== null) {
12125 lastRenderPhaseUpdate = lastRenderPhaseUpdate.next;
12126 }
12127 lastRenderPhaseUpdate.next = update;
12128 }
12129 } else {
12130 var currentTime = requestCurrentTime();
12131 var _expirationTime = computeExpirationForFiber(currentTime, fiber);
12132 var _update2 = {
12133 expirationTime: _expirationTime,
12134 action: action,
12135 next: null
12136 };
12137 flushPassiveEffects();
12138 // Append the update to the end of the list.
12139 var _last2 = queue.last;
12140 if (_last2 === null) {
12141 // This is the first update. Create a circular list.
12142 _update2.next = _update2;
12143 } else {
12144 var first = _last2.next;
12145 if (first !== null) {
12146 // Still circular.
12147 _update2.next = first;
12148 }
12149 _last2.next = _update2;
12150 }
12151 queue.last = _update2;
12152 scheduleWork(fiber, _expirationTime);
12153 }
12154}
12155
12156var NO_CONTEXT = {};
12157
12158var contextStackCursor$1 = createCursor(NO_CONTEXT);
12159var contextFiberStackCursor = createCursor(NO_CONTEXT);
12160var rootInstanceStackCursor = createCursor(NO_CONTEXT);
12161
12162function requiredContext(c) {
12163 !(c !== NO_CONTEXT) ? invariant(false, 'Expected host context to exist. This error is likely caused by a bug in React. Please file an issue.') : void 0;
12164 return c;
12165}
12166
12167function getRootHostContainer() {
12168 var rootInstance = requiredContext(rootInstanceStackCursor.current);
12169 return rootInstance;
12170}
12171
12172function pushHostContainer(fiber, nextRootInstance) {
12173 // Push current root instance onto the stack;
12174 // This allows us to reset root when portals are popped.
12175 push(rootInstanceStackCursor, nextRootInstance, fiber);
12176 // Track the context and the Fiber that provided it.
12177 // This enables us to pop only Fibers that provide unique contexts.
12178 push(contextFiberStackCursor, fiber, fiber);
12179
12180 // Finally, we need to push the host context to the stack.
12181 // However, we can't just call getRootHostContext() and push it because
12182 // we'd have a different number of entries on the stack depending on
12183 // whether getRootHostContext() throws somewhere in renderer code or not.
12184 // So we push an empty value first. This lets us safely unwind on errors.
12185 push(contextStackCursor$1, NO_CONTEXT, fiber);
12186 var nextRootContext = getRootHostContext(nextRootInstance);
12187 // Now that we know this function doesn't throw, replace it.
12188 pop(contextStackCursor$1, fiber);
12189 push(contextStackCursor$1, nextRootContext, fiber);
12190}
12191
12192function popHostContainer(fiber) {
12193 pop(contextStackCursor$1, fiber);
12194 pop(contextFiberStackCursor, fiber);
12195 pop(rootInstanceStackCursor, fiber);
12196}
12197
12198function getHostContext() {
12199 var context = requiredContext(contextStackCursor$1.current);
12200 return context;
12201}
12202
12203function pushHostContext(fiber) {
12204 var rootInstance = requiredContext(rootInstanceStackCursor.current);
12205 var context = requiredContext(contextStackCursor$1.current);
12206 var nextContext = getChildHostContext(context, fiber.type, rootInstance);
12207
12208 // Don't push this Fiber's context unless it's unique.
12209 if (context === nextContext) {
12210 return;
12211 }
12212
12213 // Track the context and the Fiber that provided it.
12214 // This enables us to pop only Fibers that provide unique contexts.
12215 push(contextFiberStackCursor, fiber, fiber);
12216 push(contextStackCursor$1, nextContext, fiber);
12217}
12218
12219function popHostContext(fiber) {
12220 // Do not pop unless this Fiber provided the current context.
12221 // pushHostContext() only pushes Fibers that provide unique contexts.
12222 if (contextFiberStackCursor.current !== fiber) {
12223 return;
12224 }
12225
12226 pop(contextStackCursor$1, fiber);
12227 pop(contextFiberStackCursor, fiber);
12228}
12229
12230var commitTime = 0;
12231var profilerStartTime = -1;
12232
12233function getCommitTime() {
12234 return commitTime;
12235}
12236
12237function recordCommitTime() {
12238 if (!enableProfilerTimer) {
12239 return;
12240 }
12241 commitTime = scheduler.unstable_now();
12242}
12243
12244function startProfilerTimer(fiber) {
12245 if (!enableProfilerTimer) {
12246 return;
12247 }
12248
12249 profilerStartTime = scheduler.unstable_now();
12250
12251 if (fiber.actualStartTime < 0) {
12252 fiber.actualStartTime = scheduler.unstable_now();
12253 }
12254}
12255
12256function stopProfilerTimerIfRunning(fiber) {
12257 if (!enableProfilerTimer) {
12258 return;
12259 }
12260 profilerStartTime = -1;
12261}
12262
12263function stopProfilerTimerIfRunningAndRecordDelta(fiber, overrideBaseTime) {
12264 if (!enableProfilerTimer) {
12265 return;
12266 }
12267
12268 if (profilerStartTime >= 0) {
12269 var elapsedTime = scheduler.unstable_now() - profilerStartTime;
12270 fiber.actualDuration += elapsedTime;
12271 if (overrideBaseTime) {
12272 fiber.selfBaseDuration = elapsedTime;
12273 }
12274 profilerStartTime = -1;
12275 }
12276}
12277
12278function resolveDefaultProps(Component, baseProps) {
12279 if (Component && Component.defaultProps) {
12280 // Resolve default props. Taken from ReactElement
12281 var props = _assign({}, baseProps);
12282 var defaultProps = Component.defaultProps;
12283 for (var propName in defaultProps) {
12284 if (props[propName] === undefined) {
12285 props[propName] = defaultProps[propName];
12286 }
12287 }
12288 return props;
12289 }
12290 return baseProps;
12291}
12292
12293function readLazyComponentType(lazyComponent) {
12294 var status = lazyComponent._status;
12295 var result = lazyComponent._result;
12296 switch (status) {
12297 case Resolved:
12298 {
12299 var Component = result;
12300 return Component;
12301 }
12302 case Rejected:
12303 {
12304 var error = result;
12305 throw error;
12306 }
12307 case Pending:
12308 {
12309 var thenable = result;
12310 throw thenable;
12311 }
12312 default:
12313 {
12314 lazyComponent._status = Pending;
12315 var ctor = lazyComponent._ctor;
12316 var _thenable = ctor();
12317 _thenable.then(function (moduleObject) {
12318 if (lazyComponent._status === Pending) {
12319 var defaultExport = moduleObject.default;
12320 {
12321 if (defaultExport === undefined) {
12322 warning$1(false, 'lazy: Expected the result of a dynamic import() call. ' + 'Instead received: %s\n\nYour code should look like: \n ' + "const MyComponent = lazy(() => import('./MyComponent'))", moduleObject);
12323 }
12324 }
12325 lazyComponent._status = Resolved;
12326 lazyComponent._result = defaultExport;
12327 }
12328 }, function (error) {
12329 if (lazyComponent._status === Pending) {
12330 lazyComponent._status = Rejected;
12331 lazyComponent._result = error;
12332 }
12333 });
12334 lazyComponent._result = _thenable;
12335 throw _thenable;
12336 }
12337 }
12338}
12339
12340var ReactCurrentOwner$4 = ReactSharedInternals.ReactCurrentOwner;
12341
12342function readContext$1(contextType) {
12343 var dispatcher = ReactCurrentOwner$4.currentDispatcher;
12344 return dispatcher.readContext(contextType);
12345}
12346
12347var fakeInternalInstance = {};
12348var isArray$1 = Array.isArray;
12349
12350// React.Component uses a shared frozen object by default.
12351// We'll use it to determine whether we need to initialize legacy refs.
12352var emptyRefsObject = new React.Component().refs;
12353
12354var didWarnAboutStateAssignmentForComponent = void 0;
12355var didWarnAboutUninitializedState = void 0;
12356var didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate = void 0;
12357var didWarnAboutLegacyLifecyclesAndDerivedState = void 0;
12358var didWarnAboutUndefinedDerivedState = void 0;
12359var warnOnUndefinedDerivedState = void 0;
12360var warnOnInvalidCallback$1 = void 0;
12361var didWarnAboutDirectlyAssigningPropsToState = void 0;
12362var didWarnAboutContextTypeAndContextTypes = void 0;
12363var didWarnAboutInvalidateContextType = void 0;
12364
12365{
12366 didWarnAboutStateAssignmentForComponent = new Set();
12367 didWarnAboutUninitializedState = new Set();
12368 didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate = new Set();
12369 didWarnAboutLegacyLifecyclesAndDerivedState = new Set();
12370 didWarnAboutDirectlyAssigningPropsToState = new Set();
12371 didWarnAboutUndefinedDerivedState = new Set();
12372 didWarnAboutContextTypeAndContextTypes = new Set();
12373 didWarnAboutInvalidateContextType = new Set();
12374
12375 var didWarnOnInvalidCallback = new Set();
12376
12377 warnOnInvalidCallback$1 = function (callback, callerName) {
12378 if (callback === null || typeof callback === 'function') {
12379 return;
12380 }
12381 var key = callerName + '_' + callback;
12382 if (!didWarnOnInvalidCallback.has(key)) {
12383 didWarnOnInvalidCallback.add(key);
12384 warningWithoutStack$1(false, '%s(...): Expected the last optional `callback` argument to be a ' + 'function. Instead received: %s.', callerName, callback);
12385 }
12386 };
12387
12388 warnOnUndefinedDerivedState = function (type, partialState) {
12389 if (partialState === undefined) {
12390 var componentName = getComponentName(type) || 'Component';
12391 if (!didWarnAboutUndefinedDerivedState.has(componentName)) {
12392 didWarnAboutUndefinedDerivedState.add(componentName);
12393 warningWithoutStack$1(false, '%s.getDerivedStateFromProps(): A valid state object (or null) must be returned. ' + 'You have returned undefined.', componentName);
12394 }
12395 }
12396 };
12397
12398 // This is so gross but it's at least non-critical and can be removed if
12399 // it causes problems. This is meant to give a nicer error message for
12400 // ReactDOM15.unstable_renderSubtreeIntoContainer(reactDOM16Component,
12401 // ...)) which otherwise throws a "_processChildContext is not a function"
12402 // exception.
12403 Object.defineProperty(fakeInternalInstance, '_processChildContext', {
12404 enumerable: false,
12405 value: function () {
12406 invariant(false, '_processChildContext is not available in React 16+. This likely means you have multiple copies of React and are attempting to nest a React 15 tree inside a React 16 tree using unstable_renderSubtreeIntoContainer, which isn\'t supported. Try to make sure you have only one copy of React (and ideally, switch to ReactDOM.createPortal).');
12407 }
12408 });
12409 Object.freeze(fakeInternalInstance);
12410}
12411
12412function applyDerivedStateFromProps(workInProgress, ctor, getDerivedStateFromProps, nextProps) {
12413 var prevState = workInProgress.memoizedState;
12414
12415 {
12416 if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & StrictMode) {
12417 // Invoke the function an extra time to help detect side-effects.
12418 getDerivedStateFromProps(nextProps, prevState);
12419 }
12420 }
12421
12422 var partialState = getDerivedStateFromProps(nextProps, prevState);
12423
12424 {
12425 warnOnUndefinedDerivedState(ctor, partialState);
12426 }
12427 // Merge the partial state and the previous state.
12428 var memoizedState = partialState === null || partialState === undefined ? prevState : _assign({}, prevState, partialState);
12429 workInProgress.memoizedState = memoizedState;
12430
12431 // Once the update queue is empty, persist the derived state onto the
12432 // base state.
12433 var updateQueue = workInProgress.updateQueue;
12434 if (updateQueue !== null && workInProgress.expirationTime === NoWork) {
12435 updateQueue.baseState = memoizedState;
12436 }
12437}
12438
12439var classComponentUpdater = {
12440 isMounted: isMounted,
12441 enqueueSetState: function (inst, payload, callback) {
12442 var fiber = get(inst);
12443 var currentTime = requestCurrentTime();
12444 var expirationTime = computeExpirationForFiber(currentTime, fiber);
12445
12446 var update = createUpdate(expirationTime);
12447 update.payload = payload;
12448 if (callback !== undefined && callback !== null) {
12449 {
12450 warnOnInvalidCallback$1(callback, 'setState');
12451 }
12452 update.callback = callback;
12453 }
12454
12455 flushPassiveEffects();
12456 enqueueUpdate(fiber, update);
12457 scheduleWork(fiber, expirationTime);
12458 },
12459 enqueueReplaceState: function (inst, payload, callback) {
12460 var fiber = get(inst);
12461 var currentTime = requestCurrentTime();
12462 var expirationTime = computeExpirationForFiber(currentTime, fiber);
12463
12464 var update = createUpdate(expirationTime);
12465 update.tag = ReplaceState;
12466 update.payload = payload;
12467
12468 if (callback !== undefined && callback !== null) {
12469 {
12470 warnOnInvalidCallback$1(callback, 'replaceState');
12471 }
12472 update.callback = callback;
12473 }
12474
12475 flushPassiveEffects();
12476 enqueueUpdate(fiber, update);
12477 scheduleWork(fiber, expirationTime);
12478 },
12479 enqueueForceUpdate: function (inst, callback) {
12480 var fiber = get(inst);
12481 var currentTime = requestCurrentTime();
12482 var expirationTime = computeExpirationForFiber(currentTime, fiber);
12483
12484 var update = createUpdate(expirationTime);
12485 update.tag = ForceUpdate;
12486
12487 if (callback !== undefined && callback !== null) {
12488 {
12489 warnOnInvalidCallback$1(callback, 'forceUpdate');
12490 }
12491 update.callback = callback;
12492 }
12493
12494 flushPassiveEffects();
12495 enqueueUpdate(fiber, update);
12496 scheduleWork(fiber, expirationTime);
12497 }
12498};
12499
12500function checkShouldComponentUpdate(workInProgress, ctor, oldProps, newProps, oldState, newState, nextContext) {
12501 var instance = workInProgress.stateNode;
12502 if (typeof instance.shouldComponentUpdate === 'function') {
12503 startPhaseTimer(workInProgress, 'shouldComponentUpdate');
12504 var shouldUpdate = instance.shouldComponentUpdate(newProps, newState, nextContext);
12505 stopPhaseTimer();
12506
12507 {
12508 !(shouldUpdate !== undefined) ? warningWithoutStack$1(false, '%s.shouldComponentUpdate(): Returned undefined instead of a ' + 'boolean value. Make sure to return true or false.', getComponentName(ctor) || 'Component') : void 0;
12509 }
12510
12511 return shouldUpdate;
12512 }
12513
12514 if (ctor.prototype && ctor.prototype.isPureReactComponent) {
12515 return !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState);
12516 }
12517
12518 return true;
12519}
12520
12521function checkClassInstance(workInProgress, ctor, newProps) {
12522 var instance = workInProgress.stateNode;
12523 {
12524 var name = getComponentName(ctor) || 'Component';
12525 var renderPresent = instance.render;
12526
12527 if (!renderPresent) {
12528 if (ctor.prototype && typeof ctor.prototype.render === 'function') {
12529 warningWithoutStack$1(false, '%s(...): No `render` method found on the returned component ' + 'instance: did you accidentally return an object from the constructor?', name);
12530 } else {
12531 warningWithoutStack$1(false, '%s(...): No `render` method found on the returned component ' + 'instance: you may have forgotten to define `render`.', name);
12532 }
12533 }
12534
12535 var noGetInitialStateOnES6 = !instance.getInitialState || instance.getInitialState.isReactClassApproved || instance.state;
12536 !noGetInitialStateOnES6 ? warningWithoutStack$1(false, 'getInitialState was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Did you mean to define a state property instead?', name) : void 0;
12537 var noGetDefaultPropsOnES6 = !instance.getDefaultProps || instance.getDefaultProps.isReactClassApproved;
12538 !noGetDefaultPropsOnES6 ? warningWithoutStack$1(false, 'getDefaultProps was defined on %s, a plain JavaScript class. ' + 'This is only supported for classes created using React.createClass. ' + 'Use a static property to define defaultProps instead.', name) : void 0;
12539 var noInstancePropTypes = !instance.propTypes;
12540 !noInstancePropTypes ? warningWithoutStack$1(false, 'propTypes was defined as an instance property on %s. Use a static ' + 'property to define propTypes instead.', name) : void 0;
12541 var noInstanceContextType = !instance.contextType;
12542 !noInstanceContextType ? warningWithoutStack$1(false, 'contextType was defined as an instance property on %s. Use a static ' + 'property to define contextType instead.', name) : void 0;
12543 var noInstanceContextTypes = !instance.contextTypes;
12544 !noInstanceContextTypes ? warningWithoutStack$1(false, 'contextTypes was defined as an instance property on %s. Use a static ' + 'property to define contextTypes instead.', name) : void 0;
12545
12546 if (ctor.contextType && ctor.contextTypes && !didWarnAboutContextTypeAndContextTypes.has(ctor)) {
12547 didWarnAboutContextTypeAndContextTypes.add(ctor);
12548 warningWithoutStack$1(false, '%s declares both contextTypes and contextType static properties. ' + 'The legacy contextTypes property will be ignored.', name);
12549 }
12550
12551 var noComponentShouldUpdate = typeof instance.componentShouldUpdate !== 'function';
12552 !noComponentShouldUpdate ? warningWithoutStack$1(false, '%s has a method called ' + 'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' + 'The name is phrased as a question because the function is ' + 'expected to return a value.', name) : void 0;
12553 if (ctor.prototype && ctor.prototype.isPureReactComponent && typeof instance.shouldComponentUpdate !== 'undefined') {
12554 warningWithoutStack$1(false, '%s has a method called shouldComponentUpdate(). ' + 'shouldComponentUpdate should not be used when extending React.PureComponent. ' + 'Please extend React.Component if shouldComponentUpdate is used.', getComponentName(ctor) || 'A pure component');
12555 }
12556 var noComponentDidUnmount = typeof instance.componentDidUnmount !== 'function';
12557 !noComponentDidUnmount ? warningWithoutStack$1(false, '%s has a method called ' + 'componentDidUnmount(). But there is no such lifecycle method. ' + 'Did you mean componentWillUnmount()?', name) : void 0;
12558 var noComponentDidReceiveProps = typeof instance.componentDidReceiveProps !== 'function';
12559 !noComponentDidReceiveProps ? warningWithoutStack$1(false, '%s has a method called ' + 'componentDidReceiveProps(). But there is no such lifecycle method. ' + 'If you meant to update the state in response to changing props, ' + 'use componentWillReceiveProps(). If you meant to fetch data or ' + 'run side-effects or mutations after React has updated the UI, use componentDidUpdate().', name) : void 0;
12560 var noComponentWillRecieveProps = typeof instance.componentWillRecieveProps !== 'function';
12561 !noComponentWillRecieveProps ? warningWithoutStack$1(false, '%s has a method called ' + 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?', name) : void 0;
12562 var noUnsafeComponentWillRecieveProps = typeof instance.UNSAFE_componentWillRecieveProps !== 'function';
12563 !noUnsafeComponentWillRecieveProps ? warningWithoutStack$1(false, '%s has a method called ' + 'UNSAFE_componentWillRecieveProps(). Did you mean UNSAFE_componentWillReceiveProps()?', name) : void 0;
12564 var hasMutatedProps = instance.props !== newProps;
12565 !(instance.props === undefined || !hasMutatedProps) ? warningWithoutStack$1(false, '%s(...): When calling super() in `%s`, make sure to pass ' + "up the same props that your component's constructor was passed.", name, name) : void 0;
12566 var noInstanceDefaultProps = !instance.defaultProps;
12567 !noInstanceDefaultProps ? warningWithoutStack$1(false, 'Setting defaultProps as an instance property on %s is not supported and will be ignored.' + ' Instead, define defaultProps as a static property on %s.', name, name) : void 0;
12568
12569 if (typeof instance.getSnapshotBeforeUpdate === 'function' && typeof instance.componentDidUpdate !== 'function' && !didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate.has(ctor)) {
12570 didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate.add(ctor);
12571 warningWithoutStack$1(false, '%s: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). ' + 'This component defines getSnapshotBeforeUpdate() only.', getComponentName(ctor));
12572 }
12573
12574 var noInstanceGetDerivedStateFromProps = typeof instance.getDerivedStateFromProps !== 'function';
12575 !noInstanceGetDerivedStateFromProps ? warningWithoutStack$1(false, '%s: getDerivedStateFromProps() is defined as an instance method ' + 'and will be ignored. Instead, declare it as a static method.', name) : void 0;
12576 var noInstanceGetDerivedStateFromCatch = typeof instance.getDerivedStateFromError !== 'function';
12577 !noInstanceGetDerivedStateFromCatch ? warningWithoutStack$1(false, '%s: getDerivedStateFromError() is defined as an instance method ' + 'and will be ignored. Instead, declare it as a static method.', name) : void 0;
12578 var noStaticGetSnapshotBeforeUpdate = typeof ctor.getSnapshotBeforeUpdate !== 'function';
12579 !noStaticGetSnapshotBeforeUpdate ? warningWithoutStack$1(false, '%s: getSnapshotBeforeUpdate() is defined as a static method ' + 'and will be ignored. Instead, declare it as an instance method.', name) : void 0;
12580 var _state = instance.state;
12581 if (_state && (typeof _state !== 'object' || isArray$1(_state))) {
12582 warningWithoutStack$1(false, '%s.state: must be set to an object or null', name);
12583 }
12584 if (typeof instance.getChildContext === 'function') {
12585 !(typeof ctor.childContextTypes === 'object') ? warningWithoutStack$1(false, '%s.getChildContext(): childContextTypes must be defined in order to ' + 'use getChildContext().', name) : void 0;
12586 }
12587 }
12588}
12589
12590function adoptClassInstance(workInProgress, instance) {
12591 instance.updater = classComponentUpdater;
12592 workInProgress.stateNode = instance;
12593 // The instance needs access to the fiber so that it can schedule updates
12594 set(instance, workInProgress);
12595 {
12596 instance._reactInternalInstance = fakeInternalInstance;
12597 }
12598}
12599
12600function constructClassInstance(workInProgress, ctor, props, renderExpirationTime) {
12601 var isLegacyContextConsumer = false;
12602 var unmaskedContext = emptyContextObject;
12603 var context = null;
12604 var contextType = ctor.contextType;
12605 if (typeof contextType === 'object' && contextType !== null) {
12606 {
12607 if (contextType.$$typeof !== REACT_CONTEXT_TYPE && !didWarnAboutInvalidateContextType.has(ctor)) {
12608 didWarnAboutInvalidateContextType.add(ctor);
12609 warningWithoutStack$1(false, '%s defines an invalid contextType. ' + 'contextType should point to the Context object returned by React.createContext(). ' + 'Did you accidentally pass the Context.Provider instead?', getComponentName(ctor) || 'Component');
12610 }
12611 }
12612
12613 context = readContext$1(contextType);
12614 } else {
12615 unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
12616 var contextTypes = ctor.contextTypes;
12617 isLegacyContextConsumer = contextTypes !== null && contextTypes !== undefined;
12618 context = isLegacyContextConsumer ? getMaskedContext(workInProgress, unmaskedContext) : emptyContextObject;
12619 }
12620
12621 // Instantiate twice to help detect side-effects.
12622 {
12623 if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & StrictMode) {
12624 new ctor(props, context); // eslint-disable-line no-new
12625 }
12626 }
12627
12628 var instance = new ctor(props, context);
12629 var state = workInProgress.memoizedState = instance.state !== null && instance.state !== undefined ? instance.state : null;
12630 adoptClassInstance(workInProgress, instance);
12631
12632 {
12633 if (typeof ctor.getDerivedStateFromProps === 'function' && state === null) {
12634 var componentName = getComponentName(ctor) || 'Component';
12635 if (!didWarnAboutUninitializedState.has(componentName)) {
12636 didWarnAboutUninitializedState.add(componentName);
12637 warningWithoutStack$1(false, '`%s` uses `getDerivedStateFromProps` but its initial state is ' + '%s. This is not recommended. Instead, define the initial state by ' + 'assigning an object to `this.state` in the constructor of `%s`. ' + 'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.', componentName, instance.state === null ? 'null' : 'undefined', componentName);
12638 }
12639 }
12640
12641 // If new component APIs are defined, "unsafe" lifecycles won't be called.
12642 // Warn about these lifecycles if they are present.
12643 // Don't warn about react-lifecycles-compat polyfilled methods though.
12644 if (typeof ctor.getDerivedStateFromProps === 'function' || typeof instance.getSnapshotBeforeUpdate === 'function') {
12645 var foundWillMountName = null;
12646 var foundWillReceivePropsName = null;
12647 var foundWillUpdateName = null;
12648 if (typeof instance.componentWillMount === 'function' && instance.componentWillMount.__suppressDeprecationWarning !== true) {
12649 foundWillMountName = 'componentWillMount';
12650 } else if (typeof instance.UNSAFE_componentWillMount === 'function') {
12651 foundWillMountName = 'UNSAFE_componentWillMount';
12652 }
12653 if (typeof instance.componentWillReceiveProps === 'function' && instance.componentWillReceiveProps.__suppressDeprecationWarning !== true) {
12654 foundWillReceivePropsName = 'componentWillReceiveProps';
12655 } else if (typeof instance.UNSAFE_componentWillReceiveProps === 'function') {
12656 foundWillReceivePropsName = 'UNSAFE_componentWillReceiveProps';
12657 }
12658 if (typeof instance.componentWillUpdate === 'function' && instance.componentWillUpdate.__suppressDeprecationWarning !== true) {
12659 foundWillUpdateName = 'componentWillUpdate';
12660 } else if (typeof instance.UNSAFE_componentWillUpdate === 'function') {
12661 foundWillUpdateName = 'UNSAFE_componentWillUpdate';
12662 }
12663 if (foundWillMountName !== null || foundWillReceivePropsName !== null || foundWillUpdateName !== null) {
12664 var _componentName = getComponentName(ctor) || 'Component';
12665 var newApiName = typeof ctor.getDerivedStateFromProps === 'function' ? 'getDerivedStateFromProps()' : 'getSnapshotBeforeUpdate()';
12666 if (!didWarnAboutLegacyLifecyclesAndDerivedState.has(_componentName)) {
12667 didWarnAboutLegacyLifecyclesAndDerivedState.add(_componentName);
12668 warningWithoutStack$1(false, 'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' + '%s uses %s but also contains the following legacy lifecycles:%s%s%s\n\n' + 'The above lifecycles should be removed. Learn more about this warning here:\n' + 'https://fb.me/react-async-component-lifecycle-hooks', _componentName, newApiName, foundWillMountName !== null ? '\n ' + foundWillMountName : '', foundWillReceivePropsName !== null ? '\n ' + foundWillReceivePropsName : '', foundWillUpdateName !== null ? '\n ' + foundWillUpdateName : '');
12669 }
12670 }
12671 }
12672 }
12673
12674 // Cache unmasked context so we can avoid recreating masked context unless necessary.
12675 // ReactFiberContext usually updates this cache but can't for newly-created instances.
12676 if (isLegacyContextConsumer) {
12677 cacheContext(workInProgress, unmaskedContext, context);
12678 }
12679
12680 return instance;
12681}
12682
12683function callComponentWillMount(workInProgress, instance) {
12684 startPhaseTimer(workInProgress, 'componentWillMount');
12685 var oldState = instance.state;
12686
12687 if (typeof instance.componentWillMount === 'function') {
12688 instance.componentWillMount();
12689 }
12690 if (typeof instance.UNSAFE_componentWillMount === 'function') {
12691 instance.UNSAFE_componentWillMount();
12692 }
12693
12694 stopPhaseTimer();
12695
12696 if (oldState !== instance.state) {
12697 {
12698 warningWithoutStack$1(false, '%s.componentWillMount(): Assigning directly to this.state is ' + "deprecated (except inside a component's " + 'constructor). Use setState instead.', getComponentName(workInProgress.type) || 'Component');
12699 }
12700 classComponentUpdater.enqueueReplaceState(instance, instance.state, null);
12701 }
12702}
12703
12704function callComponentWillReceiveProps(workInProgress, instance, newProps, nextContext) {
12705 var oldState = instance.state;
12706 startPhaseTimer(workInProgress, 'componentWillReceiveProps');
12707 if (typeof instance.componentWillReceiveProps === 'function') {
12708 instance.componentWillReceiveProps(newProps, nextContext);
12709 }
12710 if (typeof instance.UNSAFE_componentWillReceiveProps === 'function') {
12711 instance.UNSAFE_componentWillReceiveProps(newProps, nextContext);
12712 }
12713 stopPhaseTimer();
12714
12715 if (instance.state !== oldState) {
12716 {
12717 var componentName = getComponentName(workInProgress.type) || 'Component';
12718 if (!didWarnAboutStateAssignmentForComponent.has(componentName)) {
12719 didWarnAboutStateAssignmentForComponent.add(componentName);
12720 warningWithoutStack$1(false, '%s.componentWillReceiveProps(): Assigning directly to ' + "this.state is deprecated (except inside a component's " + 'constructor). Use setState instead.', componentName);
12721 }
12722 }
12723 classComponentUpdater.enqueueReplaceState(instance, instance.state, null);
12724 }
12725}
12726
12727// Invokes the mount life-cycles on a previously never rendered instance.
12728function mountClassInstance(workInProgress, ctor, newProps, renderExpirationTime) {
12729 {
12730 checkClassInstance(workInProgress, ctor, newProps);
12731 }
12732
12733 var instance = workInProgress.stateNode;
12734 instance.props = newProps;
12735 instance.state = workInProgress.memoizedState;
12736 instance.refs = emptyRefsObject;
12737
12738 var contextType = ctor.contextType;
12739 if (typeof contextType === 'object' && contextType !== null) {
12740 instance.context = readContext$1(contextType);
12741 } else {
12742 var unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
12743 instance.context = getMaskedContext(workInProgress, unmaskedContext);
12744 }
12745
12746 {
12747 if (instance.state === newProps) {
12748 var componentName = getComponentName(ctor) || 'Component';
12749 if (!didWarnAboutDirectlyAssigningPropsToState.has(componentName)) {
12750 didWarnAboutDirectlyAssigningPropsToState.add(componentName);
12751 warningWithoutStack$1(false, '%s: It is not recommended to assign props directly to state ' + "because updates to props won't be reflected in state. " + 'In most cases, it is better to use props directly.', componentName);
12752 }
12753 }
12754
12755 if (workInProgress.mode & StrictMode) {
12756 ReactStrictModeWarnings.recordUnsafeLifecycleWarnings(workInProgress, instance);
12757
12758 ReactStrictModeWarnings.recordLegacyContextWarning(workInProgress, instance);
12759 }
12760
12761 if (warnAboutDeprecatedLifecycles) {
12762 ReactStrictModeWarnings.recordDeprecationWarnings(workInProgress, instance);
12763 }
12764 }
12765
12766 var updateQueue = workInProgress.updateQueue;
12767 if (updateQueue !== null) {
12768 processUpdateQueue(workInProgress, updateQueue, newProps, instance, renderExpirationTime);
12769 instance.state = workInProgress.memoizedState;
12770 }
12771
12772 var getDerivedStateFromProps = ctor.getDerivedStateFromProps;
12773 if (typeof getDerivedStateFromProps === 'function') {
12774 applyDerivedStateFromProps(workInProgress, ctor, getDerivedStateFromProps, newProps);
12775 instance.state = workInProgress.memoizedState;
12776 }
12777
12778 // In order to support react-lifecycles-compat polyfilled components,
12779 // Unsafe lifecycles should not be invoked for components using the new APIs.
12780 if (typeof ctor.getDerivedStateFromProps !== 'function' && typeof instance.getSnapshotBeforeUpdate !== 'function' && (typeof instance.UNSAFE_componentWillMount === 'function' || typeof instance.componentWillMount === 'function')) {
12781 callComponentWillMount(workInProgress, instance);
12782 // If we had additional state updates during this life-cycle, let's
12783 // process them now.
12784 updateQueue = workInProgress.updateQueue;
12785 if (updateQueue !== null) {
12786 processUpdateQueue(workInProgress, updateQueue, newProps, instance, renderExpirationTime);
12787 instance.state = workInProgress.memoizedState;
12788 }
12789 }
12790
12791 if (typeof instance.componentDidMount === 'function') {
12792 workInProgress.effectTag |= Update;
12793 }
12794}
12795
12796function resumeMountClassInstance(workInProgress, ctor, newProps, renderExpirationTime) {
12797 var instance = workInProgress.stateNode;
12798
12799 var oldProps = workInProgress.memoizedProps;
12800 instance.props = oldProps;
12801
12802 var oldContext = instance.context;
12803 var contextType = ctor.contextType;
12804 var nextContext = void 0;
12805 if (typeof contextType === 'object' && contextType !== null) {
12806 nextContext = readContext$1(contextType);
12807 } else {
12808 var nextLegacyUnmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
12809 nextContext = getMaskedContext(workInProgress, nextLegacyUnmaskedContext);
12810 }
12811
12812 var getDerivedStateFromProps = ctor.getDerivedStateFromProps;
12813 var hasNewLifecycles = typeof getDerivedStateFromProps === 'function' || typeof instance.getSnapshotBeforeUpdate === 'function';
12814
12815 // Note: During these life-cycles, instance.props/instance.state are what
12816 // ever the previously attempted to render - not the "current". However,
12817 // during componentDidUpdate we pass the "current" props.
12818
12819 // In order to support react-lifecycles-compat polyfilled components,
12820 // Unsafe lifecycles should not be invoked for components using the new APIs.
12821 if (!hasNewLifecycles && (typeof instance.UNSAFE_componentWillReceiveProps === 'function' || typeof instance.componentWillReceiveProps === 'function')) {
12822 if (oldProps !== newProps || oldContext !== nextContext) {
12823 callComponentWillReceiveProps(workInProgress, instance, newProps, nextContext);
12824 }
12825 }
12826
12827 resetHasForceUpdateBeforeProcessing();
12828
12829 var oldState = workInProgress.memoizedState;
12830 var newState = instance.state = oldState;
12831 var updateQueue = workInProgress.updateQueue;
12832 if (updateQueue !== null) {
12833 processUpdateQueue(workInProgress, updateQueue, newProps, instance, renderExpirationTime);
12834 newState = workInProgress.memoizedState;
12835 }
12836 if (oldProps === newProps && oldState === newState && !hasContextChanged() && !checkHasForceUpdateAfterProcessing()) {
12837 // If an update was already in progress, we should schedule an Update
12838 // effect even though we're bailing out, so that cWU/cDU are called.
12839 if (typeof instance.componentDidMount === 'function') {
12840 workInProgress.effectTag |= Update;
12841 }
12842 return false;
12843 }
12844
12845 if (typeof getDerivedStateFromProps === 'function') {
12846 applyDerivedStateFromProps(workInProgress, ctor, getDerivedStateFromProps, newProps);
12847 newState = workInProgress.memoizedState;
12848 }
12849
12850 var shouldUpdate = checkHasForceUpdateAfterProcessing() || checkShouldComponentUpdate(workInProgress, ctor, oldProps, newProps, oldState, newState, nextContext);
12851
12852 if (shouldUpdate) {
12853 // In order to support react-lifecycles-compat polyfilled components,
12854 // Unsafe lifecycles should not be invoked for components using the new APIs.
12855 if (!hasNewLifecycles && (typeof instance.UNSAFE_componentWillMount === 'function' || typeof instance.componentWillMount === 'function')) {
12856 startPhaseTimer(workInProgress, 'componentWillMount');
12857 if (typeof instance.componentWillMount === 'function') {
12858 instance.componentWillMount();
12859 }
12860 if (typeof instance.UNSAFE_componentWillMount === 'function') {
12861 instance.UNSAFE_componentWillMount();
12862 }
12863 stopPhaseTimer();
12864 }
12865 if (typeof instance.componentDidMount === 'function') {
12866 workInProgress.effectTag |= Update;
12867 }
12868 } else {
12869 // If an update was already in progress, we should schedule an Update
12870 // effect even though we're bailing out, so that cWU/cDU are called.
12871 if (typeof instance.componentDidMount === 'function') {
12872 workInProgress.effectTag |= Update;
12873 }
12874
12875 // If shouldComponentUpdate returned false, we should still update the
12876 // memoized state to indicate that this work can be reused.
12877 workInProgress.memoizedProps = newProps;
12878 workInProgress.memoizedState = newState;
12879 }
12880
12881 // Update the existing instance's state, props, and context pointers even
12882 // if shouldComponentUpdate returns false.
12883 instance.props = newProps;
12884 instance.state = newState;
12885 instance.context = nextContext;
12886
12887 return shouldUpdate;
12888}
12889
12890// Invokes the update life-cycles and returns false if it shouldn't rerender.
12891function updateClassInstance(current, workInProgress, ctor, newProps, renderExpirationTime) {
12892 var instance = workInProgress.stateNode;
12893
12894 var oldProps = workInProgress.memoizedProps;
12895 instance.props = workInProgress.type === workInProgress.elementType ? oldProps : resolveDefaultProps(workInProgress.type, oldProps);
12896
12897 var oldContext = instance.context;
12898 var contextType = ctor.contextType;
12899 var nextContext = void 0;
12900 if (typeof contextType === 'object' && contextType !== null) {
12901 nextContext = readContext$1(contextType);
12902 } else {
12903 var nextUnmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
12904 nextContext = getMaskedContext(workInProgress, nextUnmaskedContext);
12905 }
12906
12907 var getDerivedStateFromProps = ctor.getDerivedStateFromProps;
12908 var hasNewLifecycles = typeof getDerivedStateFromProps === 'function' || typeof instance.getSnapshotBeforeUpdate === 'function';
12909
12910 // Note: During these life-cycles, instance.props/instance.state are what
12911 // ever the previously attempted to render - not the "current". However,
12912 // during componentDidUpdate we pass the "current" props.
12913
12914 // In order to support react-lifecycles-compat polyfilled components,
12915 // Unsafe lifecycles should not be invoked for components using the new APIs.
12916 if (!hasNewLifecycles && (typeof instance.UNSAFE_componentWillReceiveProps === 'function' || typeof instance.componentWillReceiveProps === 'function')) {
12917 if (oldProps !== newProps || oldContext !== nextContext) {
12918 callComponentWillReceiveProps(workInProgress, instance, newProps, nextContext);
12919 }
12920 }
12921
12922 resetHasForceUpdateBeforeProcessing();
12923
12924 var oldState = workInProgress.memoizedState;
12925 var newState = instance.state = oldState;
12926 var updateQueue = workInProgress.updateQueue;
12927 if (updateQueue !== null) {
12928 processUpdateQueue(workInProgress, updateQueue, newProps, instance, renderExpirationTime);
12929 newState = workInProgress.memoizedState;
12930 }
12931
12932 if (oldProps === newProps && oldState === newState && !hasContextChanged() && !checkHasForceUpdateAfterProcessing()) {
12933 // If an update was already in progress, we should schedule an Update
12934 // effect even though we're bailing out, so that cWU/cDU are called.
12935 if (typeof instance.componentDidUpdate === 'function') {
12936 if (oldProps !== current.memoizedProps || oldState !== current.memoizedState) {
12937 workInProgress.effectTag |= Update;
12938 }
12939 }
12940 if (typeof instance.getSnapshotBeforeUpdate === 'function') {
12941 if (oldProps !== current.memoizedProps || oldState !== current.memoizedState) {
12942 workInProgress.effectTag |= Snapshot;
12943 }
12944 }
12945 return false;
12946 }
12947
12948 if (typeof getDerivedStateFromProps === 'function') {
12949 applyDerivedStateFromProps(workInProgress, ctor, getDerivedStateFromProps, newProps);
12950 newState = workInProgress.memoizedState;
12951 }
12952
12953 var shouldUpdate = checkHasForceUpdateAfterProcessing() || checkShouldComponentUpdate(workInProgress, ctor, oldProps, newProps, oldState, newState, nextContext);
12954
12955 if (shouldUpdate) {
12956 // In order to support react-lifecycles-compat polyfilled components,
12957 // Unsafe lifecycles should not be invoked for components using the new APIs.
12958 if (!hasNewLifecycles && (typeof instance.UNSAFE_componentWillUpdate === 'function' || typeof instance.componentWillUpdate === 'function')) {
12959 startPhaseTimer(workInProgress, 'componentWillUpdate');
12960 if (typeof instance.componentWillUpdate === 'function') {
12961 instance.componentWillUpdate(newProps, newState, nextContext);
12962 }
12963 if (typeof instance.UNSAFE_componentWillUpdate === 'function') {
12964 instance.UNSAFE_componentWillUpdate(newProps, newState, nextContext);
12965 }
12966 stopPhaseTimer();
12967 }
12968 if (typeof instance.componentDidUpdate === 'function') {
12969 workInProgress.effectTag |= Update;
12970 }
12971 if (typeof instance.getSnapshotBeforeUpdate === 'function') {
12972 workInProgress.effectTag |= Snapshot;
12973 }
12974 } else {
12975 // If an update was already in progress, we should schedule an Update
12976 // effect even though we're bailing out, so that cWU/cDU are called.
12977 if (typeof instance.componentDidUpdate === 'function') {
12978 if (oldProps !== current.memoizedProps || oldState !== current.memoizedState) {
12979 workInProgress.effectTag |= Update;
12980 }
12981 }
12982 if (typeof instance.getSnapshotBeforeUpdate === 'function') {
12983 if (oldProps !== current.memoizedProps || oldState !== current.memoizedState) {
12984 workInProgress.effectTag |= Snapshot;
12985 }
12986 }
12987
12988 // If shouldComponentUpdate returned false, we should still update the
12989 // memoized props/state to indicate that this work can be reused.
12990 workInProgress.memoizedProps = newProps;
12991 workInProgress.memoizedState = newState;
12992 }
12993
12994 // Update the existing instance's state, props, and context pointers even
12995 // if shouldComponentUpdate returns false.
12996 instance.props = newProps;
12997 instance.state = newState;
12998 instance.context = nextContext;
12999
13000 return shouldUpdate;
13001}
13002
13003var didWarnAboutMaps = void 0;
13004var didWarnAboutGenerators = void 0;
13005var didWarnAboutStringRefInStrictMode = void 0;
13006var ownerHasKeyUseWarning = void 0;
13007var ownerHasFunctionTypeWarning = void 0;
13008var warnForMissingKey = function (child) {};
13009
13010{
13011 didWarnAboutMaps = false;
13012 didWarnAboutGenerators = false;
13013 didWarnAboutStringRefInStrictMode = {};
13014
13015 /**
13016 * Warn if there's no key explicitly set on dynamic arrays of children or
13017 * object keys are not valid. This allows us to keep track of children between
13018 * updates.
13019 */
13020 ownerHasKeyUseWarning = {};
13021 ownerHasFunctionTypeWarning = {};
13022
13023 warnForMissingKey = function (child) {
13024 if (child === null || typeof child !== 'object') {
13025 return;
13026 }
13027 if (!child._store || child._store.validated || child.key != null) {
13028 return;
13029 }
13030 !(typeof child._store === 'object') ? invariant(false, 'React Component in warnForMissingKey should have a _store. This error is likely caused by a bug in React. Please file an issue.') : void 0;
13031 child._store.validated = true;
13032
13033 var currentComponentErrorInfo = 'Each child in an array or iterator should have a unique ' + '"key" prop. See https://fb.me/react-warning-keys for ' + 'more information.' + getCurrentFiberStackInDev();
13034 if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
13035 return;
13036 }
13037 ownerHasKeyUseWarning[currentComponentErrorInfo] = true;
13038
13039 warning$1(false, 'Each child in an array or iterator should have a unique ' + '"key" prop. See https://fb.me/react-warning-keys for ' + 'more information.');
13040 };
13041}
13042
13043var isArray = Array.isArray;
13044
13045function coerceRef(returnFiber, current$$1, element) {
13046 var mixedRef = element.ref;
13047 if (mixedRef !== null && typeof mixedRef !== 'function' && typeof mixedRef !== 'object') {
13048 {
13049 if (returnFiber.mode & StrictMode) {
13050 var componentName = getComponentName(returnFiber.type) || 'Component';
13051 if (!didWarnAboutStringRefInStrictMode[componentName]) {
13052 warningWithoutStack$1(false, 'A string ref, "%s", has been found within a strict mode tree. ' + 'String refs are a source of potential bugs and should be avoided. ' + 'We recommend using createRef() instead.' + '\n%s' + '\n\nLearn more about using refs safely here:' + '\nhttps://fb.me/react-strict-mode-string-ref', mixedRef, getStackByFiberInDevAndProd(returnFiber));
13053 didWarnAboutStringRefInStrictMode[componentName] = true;
13054 }
13055 }
13056 }
13057
13058 if (element._owner) {
13059 var owner = element._owner;
13060 var inst = void 0;
13061 if (owner) {
13062 var ownerFiber = owner;
13063 !(ownerFiber.tag === ClassComponent) ? invariant(false, 'Function components cannot have refs.') : void 0;
13064 inst = ownerFiber.stateNode;
13065 }
13066 !inst ? invariant(false, 'Missing owner for string ref %s. This error is likely caused by a bug in React. Please file an issue.', mixedRef) : void 0;
13067 var stringRef = '' + mixedRef;
13068 // Check if previous string ref matches new string ref
13069 if (current$$1 !== null && current$$1.ref !== null && typeof current$$1.ref === 'function' && current$$1.ref._stringRef === stringRef) {
13070 return current$$1.ref;
13071 }
13072 var ref = function (value) {
13073 var refs = inst.refs;
13074 if (refs === emptyRefsObject) {
13075 // This is a lazy pooled frozen object, so we need to initialize.
13076 refs = inst.refs = {};
13077 }
13078 if (value === null) {
13079 delete refs[stringRef];
13080 } else {
13081 refs[stringRef] = value;
13082 }
13083 };
13084 ref._stringRef = stringRef;
13085 return ref;
13086 } else {
13087 !(typeof mixedRef === 'string') ? invariant(false, 'Expected ref to be a function, a string, an object returned by React.createRef(), or null.') : void 0;
13088 !element._owner ? invariant(false, 'Element ref was specified as a string (%s) but no owner was set. This could happen for one of the following reasons:\n1. You may be adding a ref to a function component\n2. You may be adding a ref to a component that was not created inside a component\'s render method\n3. You have multiple copies of React loaded\nSee https://fb.me/react-refs-must-have-owner for more information.', mixedRef) : void 0;
13089 }
13090 }
13091 return mixedRef;
13092}
13093
13094function throwOnInvalidObjectType(returnFiber, newChild) {
13095 if (returnFiber.type !== 'textarea') {
13096 var addendum = '';
13097 {
13098 addendum = ' If you meant to render a collection of children, use an array ' + 'instead.' + getCurrentFiberStackInDev();
13099 }
13100 invariant(false, 'Objects are not valid as a React child (found: %s).%s', Object.prototype.toString.call(newChild) === '[object Object]' ? 'object with keys {' + Object.keys(newChild).join(', ') + '}' : newChild, addendum);
13101 }
13102}
13103
13104function warnOnFunctionType() {
13105 var currentComponentErrorInfo = 'Functions are not valid as a React child. This may happen if ' + 'you return a Component instead of <Component /> from render. ' + 'Or maybe you meant to call this function rather than return it.' + getCurrentFiberStackInDev();
13106
13107 if (ownerHasFunctionTypeWarning[currentComponentErrorInfo]) {
13108 return;
13109 }
13110 ownerHasFunctionTypeWarning[currentComponentErrorInfo] = true;
13111
13112 warning$1(false, 'Functions are not valid as a React child. This may happen if ' + 'you return a Component instead of <Component /> from render. ' + 'Or maybe you meant to call this function rather than return it.');
13113}
13114
13115// This wrapper function exists because I expect to clone the code in each path
13116// to be able to optimize each path individually by branching early. This needs
13117// a compiler or we can do it manually. Helpers that don't need this branching
13118// live outside of this function.
13119function ChildReconciler(shouldTrackSideEffects) {
13120 function deleteChild(returnFiber, childToDelete) {
13121 if (!shouldTrackSideEffects) {
13122 // Noop.
13123 return;
13124 }
13125 // Deletions are added in reversed order so we add it to the front.
13126 // At this point, the return fiber's effect list is empty except for
13127 // deletions, so we can just append the deletion to the list. The remaining
13128 // effects aren't added until the complete phase. Once we implement
13129 // resuming, this may not be true.
13130 var last = returnFiber.lastEffect;
13131 if (last !== null) {
13132 last.nextEffect = childToDelete;
13133 returnFiber.lastEffect = childToDelete;
13134 } else {
13135 returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
13136 }
13137 childToDelete.nextEffect = null;
13138 childToDelete.effectTag = Deletion;
13139 }
13140
13141 function deleteRemainingChildren(returnFiber, currentFirstChild) {
13142 if (!shouldTrackSideEffects) {
13143 // Noop.
13144 return null;
13145 }
13146
13147 // TODO: For the shouldClone case, this could be micro-optimized a bit by
13148 // assuming that after the first child we've already added everything.
13149 var childToDelete = currentFirstChild;
13150 while (childToDelete !== null) {
13151 deleteChild(returnFiber, childToDelete);
13152 childToDelete = childToDelete.sibling;
13153 }
13154 return null;
13155 }
13156
13157 function mapRemainingChildren(returnFiber, currentFirstChild) {
13158 // Add the remaining children to a temporary map so that we can find them by
13159 // keys quickly. Implicit (null) keys get added to this set with their index
13160 var existingChildren = new Map();
13161
13162 var existingChild = currentFirstChild;
13163 while (existingChild !== null) {
13164 if (existingChild.key !== null) {
13165 existingChildren.set(existingChild.key, existingChild);
13166 } else {
13167 existingChildren.set(existingChild.index, existingChild);
13168 }
13169 existingChild = existingChild.sibling;
13170 }
13171 return existingChildren;
13172 }
13173
13174 function useFiber(fiber, pendingProps, expirationTime) {
13175 // We currently set sibling to null and index to 0 here because it is easy
13176 // to forget to do before returning it. E.g. for the single child case.
13177 var clone = createWorkInProgress(fiber, pendingProps, expirationTime);
13178 clone.index = 0;
13179 clone.sibling = null;
13180 return clone;
13181 }
13182
13183 function placeChild(newFiber, lastPlacedIndex, newIndex) {
13184 newFiber.index = newIndex;
13185 if (!shouldTrackSideEffects) {
13186 // Noop.
13187 return lastPlacedIndex;
13188 }
13189 var current$$1 = newFiber.alternate;
13190 if (current$$1 !== null) {
13191 var oldIndex = current$$1.index;
13192 if (oldIndex < lastPlacedIndex) {
13193 // This is a move.
13194 newFiber.effectTag = Placement;
13195 return lastPlacedIndex;
13196 } else {
13197 // This item can stay in place.
13198 return oldIndex;
13199 }
13200 } else {
13201 // This is an insertion.
13202 newFiber.effectTag = Placement;
13203 return lastPlacedIndex;
13204 }
13205 }
13206
13207 function placeSingleChild(newFiber) {
13208 // This is simpler for the single child case. We only need to do a
13209 // placement for inserting new children.
13210 if (shouldTrackSideEffects && newFiber.alternate === null) {
13211 newFiber.effectTag = Placement;
13212 }
13213 return newFiber;
13214 }
13215
13216 function updateTextNode(returnFiber, current$$1, textContent, expirationTime) {
13217 if (current$$1 === null || current$$1.tag !== HostText) {
13218 // Insert
13219 var created = createFiberFromText(textContent, returnFiber.mode, expirationTime);
13220 created.return = returnFiber;
13221 return created;
13222 } else {
13223 // Update
13224 var existing = useFiber(current$$1, textContent, expirationTime);
13225 existing.return = returnFiber;
13226 return existing;
13227 }
13228 }
13229
13230 function updateElement(returnFiber, current$$1, element, expirationTime) {
13231 if (current$$1 !== null && current$$1.elementType === element.type) {
13232 // Move based on index
13233 var existing = useFiber(current$$1, element.props, expirationTime);
13234 existing.ref = coerceRef(returnFiber, current$$1, element);
13235 existing.return = returnFiber;
13236 {
13237 existing._debugSource = element._source;
13238 existing._debugOwner = element._owner;
13239 }
13240 return existing;
13241 } else {
13242 // Insert
13243 var created = createFiberFromElement(element, returnFiber.mode, expirationTime);
13244 created.ref = coerceRef(returnFiber, current$$1, element);
13245 created.return = returnFiber;
13246 return created;
13247 }
13248 }
13249
13250 function updatePortal(returnFiber, current$$1, portal, expirationTime) {
13251 if (current$$1 === null || current$$1.tag !== HostPortal || current$$1.stateNode.containerInfo !== portal.containerInfo || current$$1.stateNode.implementation !== portal.implementation) {
13252 // Insert
13253 var created = createFiberFromPortal(portal, returnFiber.mode, expirationTime);
13254 created.return = returnFiber;
13255 return created;
13256 } else {
13257 // Update
13258 var existing = useFiber(current$$1, portal.children || [], expirationTime);
13259 existing.return = returnFiber;
13260 return existing;
13261 }
13262 }
13263
13264 function updateFragment(returnFiber, current$$1, fragment, expirationTime, key) {
13265 if (current$$1 === null || current$$1.tag !== Fragment) {
13266 // Insert
13267 var created = createFiberFromFragment(fragment, returnFiber.mode, expirationTime, key);
13268 created.return = returnFiber;
13269 return created;
13270 } else {
13271 // Update
13272 var existing = useFiber(current$$1, fragment, expirationTime);
13273 existing.return = returnFiber;
13274 return existing;
13275 }
13276 }
13277
13278 function createChild(returnFiber, newChild, expirationTime) {
13279 if (typeof newChild === 'string' || typeof newChild === 'number') {
13280 // Text nodes don't have keys. If the previous node is implicitly keyed
13281 // we can continue to replace it without aborting even if it is not a text
13282 // node.
13283 var created = createFiberFromText('' + newChild, returnFiber.mode, expirationTime);
13284 created.return = returnFiber;
13285 return created;
13286 }
13287
13288 if (typeof newChild === 'object' && newChild !== null) {
13289 switch (newChild.$$typeof) {
13290 case REACT_ELEMENT_TYPE:
13291 {
13292 var _created = createFiberFromElement(newChild, returnFiber.mode, expirationTime);
13293 _created.ref = coerceRef(returnFiber, null, newChild);
13294 _created.return = returnFiber;
13295 return _created;
13296 }
13297 case REACT_PORTAL_TYPE:
13298 {
13299 var _created2 = createFiberFromPortal(newChild, returnFiber.mode, expirationTime);
13300 _created2.return = returnFiber;
13301 return _created2;
13302 }
13303 }
13304
13305 if (isArray(newChild) || getIteratorFn(newChild)) {
13306 var _created3 = createFiberFromFragment(newChild, returnFiber.mode, expirationTime, null);
13307 _created3.return = returnFiber;
13308 return _created3;
13309 }
13310
13311 throwOnInvalidObjectType(returnFiber, newChild);
13312 }
13313
13314 {
13315 if (typeof newChild === 'function') {
13316 warnOnFunctionType();
13317 }
13318 }
13319
13320 return null;
13321 }
13322
13323 function updateSlot(returnFiber, oldFiber, newChild, expirationTime) {
13324 // Update the fiber if the keys match, otherwise return null.
13325
13326 var key = oldFiber !== null ? oldFiber.key : null;
13327
13328 if (typeof newChild === 'string' || typeof newChild === 'number') {
13329 // Text nodes don't have keys. If the previous node is implicitly keyed
13330 // we can continue to replace it without aborting even if it is not a text
13331 // node.
13332 if (key !== null) {
13333 return null;
13334 }
13335 return updateTextNode(returnFiber, oldFiber, '' + newChild, expirationTime);
13336 }
13337
13338 if (typeof newChild === 'object' && newChild !== null) {
13339 switch (newChild.$$typeof) {
13340 case REACT_ELEMENT_TYPE:
13341 {
13342 if (newChild.key === key) {
13343 if (newChild.type === REACT_FRAGMENT_TYPE) {
13344 return updateFragment(returnFiber, oldFiber, newChild.props.children, expirationTime, key);
13345 }
13346 return updateElement(returnFiber, oldFiber, newChild, expirationTime);
13347 } else {
13348 return null;
13349 }
13350 }
13351 case REACT_PORTAL_TYPE:
13352 {
13353 if (newChild.key === key) {
13354 return updatePortal(returnFiber, oldFiber, newChild, expirationTime);
13355 } else {
13356 return null;
13357 }
13358 }
13359 }
13360
13361 if (isArray(newChild) || getIteratorFn(newChild)) {
13362 if (key !== null) {
13363 return null;
13364 }
13365
13366 return updateFragment(returnFiber, oldFiber, newChild, expirationTime, null);
13367 }
13368
13369 throwOnInvalidObjectType(returnFiber, newChild);
13370 }
13371
13372 {
13373 if (typeof newChild === 'function') {
13374 warnOnFunctionType();
13375 }
13376 }
13377
13378 return null;
13379 }
13380
13381 function updateFromMap(existingChildren, returnFiber, newIdx, newChild, expirationTime) {
13382 if (typeof newChild === 'string' || typeof newChild === 'number') {
13383 // Text nodes don't have keys, so we neither have to check the old nor
13384 // new node for the key. If both are text nodes, they match.
13385 var matchedFiber = existingChildren.get(newIdx) || null;
13386 return updateTextNode(returnFiber, matchedFiber, '' + newChild, expirationTime);
13387 }
13388
13389 if (typeof newChild === 'object' && newChild !== null) {
13390 switch (newChild.$$typeof) {
13391 case REACT_ELEMENT_TYPE:
13392 {
13393 var _matchedFiber = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;
13394 if (newChild.type === REACT_FRAGMENT_TYPE) {
13395 return updateFragment(returnFiber, _matchedFiber, newChild.props.children, expirationTime, newChild.key);
13396 }
13397 return updateElement(returnFiber, _matchedFiber, newChild, expirationTime);
13398 }
13399 case REACT_PORTAL_TYPE:
13400 {
13401 var _matchedFiber2 = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;
13402 return updatePortal(returnFiber, _matchedFiber2, newChild, expirationTime);
13403 }
13404 }
13405
13406 if (isArray(newChild) || getIteratorFn(newChild)) {
13407 var _matchedFiber3 = existingChildren.get(newIdx) || null;
13408 return updateFragment(returnFiber, _matchedFiber3, newChild, expirationTime, null);
13409 }
13410
13411 throwOnInvalidObjectType(returnFiber, newChild);
13412 }
13413
13414 {
13415 if (typeof newChild === 'function') {
13416 warnOnFunctionType();
13417 }
13418 }
13419
13420 return null;
13421 }
13422
13423 /**
13424 * Warns if there is a duplicate or missing key
13425 */
13426 function warnOnInvalidKey(child, knownKeys) {
13427 {
13428 if (typeof child !== 'object' || child === null) {
13429 return knownKeys;
13430 }
13431 switch (child.$$typeof) {
13432 case REACT_ELEMENT_TYPE:
13433 case REACT_PORTAL_TYPE:
13434 warnForMissingKey(child);
13435 var key = child.key;
13436 if (typeof key !== 'string') {
13437 break;
13438 }
13439 if (knownKeys === null) {
13440 knownKeys = new Set();
13441 knownKeys.add(key);
13442 break;
13443 }
13444 if (!knownKeys.has(key)) {
13445 knownKeys.add(key);
13446 break;
13447 }
13448 warning$1(false, 'Encountered two children with the same key, `%s`. ' + 'Keys should be unique so that components maintain their identity ' + 'across updates. Non-unique keys may cause children to be ' + 'duplicated and/or omitted — the behavior is unsupported and ' + 'could change in a future version.', key);
13449 break;
13450 default:
13451 break;
13452 }
13453 }
13454 return knownKeys;
13455 }
13456
13457 function reconcileChildrenArray(returnFiber, currentFirstChild, newChildren, expirationTime) {
13458 // This algorithm can't optimize by searching from boths ends since we
13459 // don't have backpointers on fibers. I'm trying to see how far we can get
13460 // with that model. If it ends up not being worth the tradeoffs, we can
13461 // add it later.
13462
13463 // Even with a two ended optimization, we'd want to optimize for the case
13464 // where there are few changes and brute force the comparison instead of
13465 // going for the Map. It'd like to explore hitting that path first in
13466 // forward-only mode and only go for the Map once we notice that we need
13467 // lots of look ahead. This doesn't handle reversal as well as two ended
13468 // search but that's unusual. Besides, for the two ended optimization to
13469 // work on Iterables, we'd need to copy the whole set.
13470
13471 // In this first iteration, we'll just live with hitting the bad case
13472 // (adding everything to a Map) in for every insert/move.
13473
13474 // If you change this code, also update reconcileChildrenIterator() which
13475 // uses the same algorithm.
13476
13477 {
13478 // First, validate keys.
13479 var knownKeys = null;
13480 for (var i = 0; i < newChildren.length; i++) {
13481 var child = newChildren[i];
13482 knownKeys = warnOnInvalidKey(child, knownKeys);
13483 }
13484 }
13485
13486 var resultingFirstChild = null;
13487 var previousNewFiber = null;
13488
13489 var oldFiber = currentFirstChild;
13490 var lastPlacedIndex = 0;
13491 var newIdx = 0;
13492 var nextOldFiber = null;
13493 for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
13494 if (oldFiber.index > newIdx) {
13495 nextOldFiber = oldFiber;
13496 oldFiber = null;
13497 } else {
13498 nextOldFiber = oldFiber.sibling;
13499 }
13500 var newFiber = updateSlot(returnFiber, oldFiber, newChildren[newIdx], expirationTime);
13501 if (newFiber === null) {
13502 // TODO: This breaks on empty slots like null children. That's
13503 // unfortunate because it triggers the slow path all the time. We need
13504 // a better way to communicate whether this was a miss or null,
13505 // boolean, undefined, etc.
13506 if (oldFiber === null) {
13507 oldFiber = nextOldFiber;
13508 }
13509 break;
13510 }
13511 if (shouldTrackSideEffects) {
13512 if (oldFiber && newFiber.alternate === null) {
13513 // We matched the slot, but we didn't reuse the existing fiber, so we
13514 // need to delete the existing child.
13515 deleteChild(returnFiber, oldFiber);
13516 }
13517 }
13518 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
13519 if (previousNewFiber === null) {
13520 // TODO: Move out of the loop. This only happens for the first run.
13521 resultingFirstChild = newFiber;
13522 } else {
13523 // TODO: Defer siblings if we're not at the right index for this slot.
13524 // I.e. if we had null values before, then we want to defer this
13525 // for each null value. However, we also don't want to call updateSlot
13526 // with the previous one.
13527 previousNewFiber.sibling = newFiber;
13528 }
13529 previousNewFiber = newFiber;
13530 oldFiber = nextOldFiber;
13531 }
13532
13533 if (newIdx === newChildren.length) {
13534 // We've reached the end of the new children. We can delete the rest.
13535 deleteRemainingChildren(returnFiber, oldFiber);
13536 return resultingFirstChild;
13537 }
13538
13539 if (oldFiber === null) {
13540 // If we don't have any more existing children we can choose a fast path
13541 // since the rest will all be insertions.
13542 for (; newIdx < newChildren.length; newIdx++) {
13543 var _newFiber = createChild(returnFiber, newChildren[newIdx], expirationTime);
13544 if (!_newFiber) {
13545 continue;
13546 }
13547 lastPlacedIndex = placeChild(_newFiber, lastPlacedIndex, newIdx);
13548 if (previousNewFiber === null) {
13549 // TODO: Move out of the loop. This only happens for the first run.
13550 resultingFirstChild = _newFiber;
13551 } else {
13552 previousNewFiber.sibling = _newFiber;
13553 }
13554 previousNewFiber = _newFiber;
13555 }
13556 return resultingFirstChild;
13557 }
13558
13559 // Add all children to a key map for quick lookups.
13560 var existingChildren = mapRemainingChildren(returnFiber, oldFiber);
13561
13562 // Keep scanning and use the map to restore deleted items as moves.
13563 for (; newIdx < newChildren.length; newIdx++) {
13564 var _newFiber2 = updateFromMap(existingChildren, returnFiber, newIdx, newChildren[newIdx], expirationTime);
13565 if (_newFiber2) {
13566 if (shouldTrackSideEffects) {
13567 if (_newFiber2.alternate !== null) {
13568 // The new fiber is a work in progress, but if there exists a
13569 // current, that means that we reused the fiber. We need to delete
13570 // it from the child list so that we don't add it to the deletion
13571 // list.
13572 existingChildren.delete(_newFiber2.key === null ? newIdx : _newFiber2.key);
13573 }
13574 }
13575 lastPlacedIndex = placeChild(_newFiber2, lastPlacedIndex, newIdx);
13576 if (previousNewFiber === null) {
13577 resultingFirstChild = _newFiber2;
13578 } else {
13579 previousNewFiber.sibling = _newFiber2;
13580 }
13581 previousNewFiber = _newFiber2;
13582 }
13583 }
13584
13585 if (shouldTrackSideEffects) {
13586 // Any existing children that weren't consumed above were deleted. We need
13587 // to add them to the deletion list.
13588 existingChildren.forEach(function (child) {
13589 return deleteChild(returnFiber, child);
13590 });
13591 }
13592
13593 return resultingFirstChild;
13594 }
13595
13596 function reconcileChildrenIterator(returnFiber, currentFirstChild, newChildrenIterable, expirationTime) {
13597 // This is the same implementation as reconcileChildrenArray(),
13598 // but using the iterator instead.
13599
13600 var iteratorFn = getIteratorFn(newChildrenIterable);
13601 !(typeof iteratorFn === 'function') ? invariant(false, 'An object is not an iterable. This error is likely caused by a bug in React. Please file an issue.') : void 0;
13602
13603 {
13604 // We don't support rendering Generators because it's a mutation.
13605 // See https://github.com/facebook/react/issues/12995
13606 if (typeof Symbol === 'function' &&
13607 // $FlowFixMe Flow doesn't know about toStringTag
13608 newChildrenIterable[Symbol.toStringTag] === 'Generator') {
13609 !didWarnAboutGenerators ? warning$1(false, 'Using Generators as children is unsupported and will likely yield ' + 'unexpected results because enumerating a generator mutates it. ' + 'You may convert it to an array with `Array.from()` or the ' + '`[...spread]` operator before rendering. Keep in mind ' + 'you might need to polyfill these features for older browsers.') : void 0;
13610 didWarnAboutGenerators = true;
13611 }
13612
13613 // Warn about using Maps as children
13614 if (newChildrenIterable.entries === iteratorFn) {
13615 !didWarnAboutMaps ? warning$1(false, 'Using Maps as children is unsupported and will likely yield ' + 'unexpected results. Convert it to a sequence/iterable of keyed ' + 'ReactElements instead.') : void 0;
13616 didWarnAboutMaps = true;
13617 }
13618
13619 // First, validate keys.
13620 // We'll get a different iterator later for the main pass.
13621 var _newChildren = iteratorFn.call(newChildrenIterable);
13622 if (_newChildren) {
13623 var knownKeys = null;
13624 var _step = _newChildren.next();
13625 for (; !_step.done; _step = _newChildren.next()) {
13626 var child = _step.value;
13627 knownKeys = warnOnInvalidKey(child, knownKeys);
13628 }
13629 }
13630 }
13631
13632 var newChildren = iteratorFn.call(newChildrenIterable);
13633 !(newChildren != null) ? invariant(false, 'An iterable object provided no iterator.') : void 0;
13634
13635 var resultingFirstChild = null;
13636 var previousNewFiber = null;
13637
13638 var oldFiber = currentFirstChild;
13639 var lastPlacedIndex = 0;
13640 var newIdx = 0;
13641 var nextOldFiber = null;
13642
13643 var step = newChildren.next();
13644 for (; oldFiber !== null && !step.done; newIdx++, step = newChildren.next()) {
13645 if (oldFiber.index > newIdx) {
13646 nextOldFiber = oldFiber;
13647 oldFiber = null;
13648 } else {
13649 nextOldFiber = oldFiber.sibling;
13650 }
13651 var newFiber = updateSlot(returnFiber, oldFiber, step.value, expirationTime);
13652 if (newFiber === null) {
13653 // TODO: This breaks on empty slots like null children. That's
13654 // unfortunate because it triggers the slow path all the time. We need
13655 // a better way to communicate whether this was a miss or null,
13656 // boolean, undefined, etc.
13657 if (!oldFiber) {
13658 oldFiber = nextOldFiber;
13659 }
13660 break;
13661 }
13662 if (shouldTrackSideEffects) {
13663 if (oldFiber && newFiber.alternate === null) {
13664 // We matched the slot, but we didn't reuse the existing fiber, so we
13665 // need to delete the existing child.
13666 deleteChild(returnFiber, oldFiber);
13667 }
13668 }
13669 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
13670 if (previousNewFiber === null) {
13671 // TODO: Move out of the loop. This only happens for the first run.
13672 resultingFirstChild = newFiber;
13673 } else {
13674 // TODO: Defer siblings if we're not at the right index for this slot.
13675 // I.e. if we had null values before, then we want to defer this
13676 // for each null value. However, we also don't want to call updateSlot
13677 // with the previous one.
13678 previousNewFiber.sibling = newFiber;
13679 }
13680 previousNewFiber = newFiber;
13681 oldFiber = nextOldFiber;
13682 }
13683
13684 if (step.done) {
13685 // We've reached the end of the new children. We can delete the rest.
13686 deleteRemainingChildren(returnFiber, oldFiber);
13687 return resultingFirstChild;
13688 }
13689
13690 if (oldFiber === null) {
13691 // If we don't have any more existing children we can choose a fast path
13692 // since the rest will all be insertions.
13693 for (; !step.done; newIdx++, step = newChildren.next()) {
13694 var _newFiber3 = createChild(returnFiber, step.value, expirationTime);
13695 if (_newFiber3 === null) {
13696 continue;
13697 }
13698 lastPlacedIndex = placeChild(_newFiber3, lastPlacedIndex, newIdx);
13699 if (previousNewFiber === null) {
13700 // TODO: Move out of the loop. This only happens for the first run.
13701 resultingFirstChild = _newFiber3;
13702 } else {
13703 previousNewFiber.sibling = _newFiber3;
13704 }
13705 previousNewFiber = _newFiber3;
13706 }
13707 return resultingFirstChild;
13708 }
13709
13710 // Add all children to a key map for quick lookups.
13711 var existingChildren = mapRemainingChildren(returnFiber, oldFiber);
13712
13713 // Keep scanning and use the map to restore deleted items as moves.
13714 for (; !step.done; newIdx++, step = newChildren.next()) {
13715 var _newFiber4 = updateFromMap(existingChildren, returnFiber, newIdx, step.value, expirationTime);
13716 if (_newFiber4 !== null) {
13717 if (shouldTrackSideEffects) {
13718 if (_newFiber4.alternate !== null) {
13719 // The new fiber is a work in progress, but if there exists a
13720 // current, that means that we reused the fiber. We need to delete
13721 // it from the child list so that we don't add it to the deletion
13722 // list.
13723 existingChildren.delete(_newFiber4.key === null ? newIdx : _newFiber4.key);
13724 }
13725 }
13726 lastPlacedIndex = placeChild(_newFiber4, lastPlacedIndex, newIdx);
13727 if (previousNewFiber === null) {
13728 resultingFirstChild = _newFiber4;
13729 } else {
13730 previousNewFiber.sibling = _newFiber4;
13731 }
13732 previousNewFiber = _newFiber4;
13733 }
13734 }
13735
13736 if (shouldTrackSideEffects) {
13737 // Any existing children that weren't consumed above were deleted. We need
13738 // to add them to the deletion list.
13739 existingChildren.forEach(function (child) {
13740 return deleteChild(returnFiber, child);
13741 });
13742 }
13743
13744 return resultingFirstChild;
13745 }
13746
13747 function reconcileSingleTextNode(returnFiber, currentFirstChild, textContent, expirationTime) {
13748 // There's no need to check for keys on text nodes since we don't have a
13749 // way to define them.
13750 if (currentFirstChild !== null && currentFirstChild.tag === HostText) {
13751 // We already have an existing node so let's just update it and delete
13752 // the rest.
13753 deleteRemainingChildren(returnFiber, currentFirstChild.sibling);
13754 var existing = useFiber(currentFirstChild, textContent, expirationTime);
13755 existing.return = returnFiber;
13756 return existing;
13757 }
13758 // The existing first child is not a text node so we need to create one
13759 // and delete the existing ones.
13760 deleteRemainingChildren(returnFiber, currentFirstChild);
13761 var created = createFiberFromText(textContent, returnFiber.mode, expirationTime);
13762 created.return = returnFiber;
13763 return created;
13764 }
13765
13766 function reconcileSingleElement(returnFiber, currentFirstChild, element, expirationTime) {
13767 var key = element.key;
13768 var child = currentFirstChild;
13769 while (child !== null) {
13770 // TODO: If key === null and child.key === null, then this only applies to
13771 // the first item in the list.
13772 if (child.key === key) {
13773 if (child.tag === Fragment ? element.type === REACT_FRAGMENT_TYPE : child.elementType === element.type) {
13774 deleteRemainingChildren(returnFiber, child.sibling);
13775 var existing = useFiber(child, element.type === REACT_FRAGMENT_TYPE ? element.props.children : element.props, expirationTime);
13776 existing.ref = coerceRef(returnFiber, child, element);
13777 existing.return = returnFiber;
13778 {
13779 existing._debugSource = element._source;
13780 existing._debugOwner = element._owner;
13781 }
13782 return existing;
13783 } else {
13784 deleteRemainingChildren(returnFiber, child);
13785 break;
13786 }
13787 } else {
13788 deleteChild(returnFiber, child);
13789 }
13790 child = child.sibling;
13791 }
13792
13793 if (element.type === REACT_FRAGMENT_TYPE) {
13794 var created = createFiberFromFragment(element.props.children, returnFiber.mode, expirationTime, element.key);
13795 created.return = returnFiber;
13796 return created;
13797 } else {
13798 var _created4 = createFiberFromElement(element, returnFiber.mode, expirationTime);
13799 _created4.ref = coerceRef(returnFiber, currentFirstChild, element);
13800 _created4.return = returnFiber;
13801 return _created4;
13802 }
13803 }
13804
13805 function reconcileSinglePortal(returnFiber, currentFirstChild, portal, expirationTime) {
13806 var key = portal.key;
13807 var child = currentFirstChild;
13808 while (child !== null) {
13809 // TODO: If key === null and child.key === null, then this only applies to
13810 // the first item in the list.
13811 if (child.key === key) {
13812 if (child.tag === HostPortal && child.stateNode.containerInfo === portal.containerInfo && child.stateNode.implementation === portal.implementation) {
13813 deleteRemainingChildren(returnFiber, child.sibling);
13814 var existing = useFiber(child, portal.children || [], expirationTime);
13815 existing.return = returnFiber;
13816 return existing;
13817 } else {
13818 deleteRemainingChildren(returnFiber, child);
13819 break;
13820 }
13821 } else {
13822 deleteChild(returnFiber, child);
13823 }
13824 child = child.sibling;
13825 }
13826
13827 var created = createFiberFromPortal(portal, returnFiber.mode, expirationTime);
13828 created.return = returnFiber;
13829 return created;
13830 }
13831
13832 // This API will tag the children with the side-effect of the reconciliation
13833 // itself. They will be added to the side-effect list as we pass through the
13834 // children and the parent.
13835 function reconcileChildFibers(returnFiber, currentFirstChild, newChild, expirationTime) {
13836 // This function is not recursive.
13837 // If the top level item is an array, we treat it as a set of children,
13838 // not as a fragment. Nested arrays on the other hand will be treated as
13839 // fragment nodes. Recursion happens at the normal flow.
13840
13841 // Handle top level unkeyed fragments as if they were arrays.
13842 // This leads to an ambiguity between <>{[...]}</> and <>...</>.
13843 // We treat the ambiguous cases above the same.
13844 var isUnkeyedTopLevelFragment = typeof newChild === 'object' && newChild !== null && newChild.type === REACT_FRAGMENT_TYPE && newChild.key === null;
13845 if (isUnkeyedTopLevelFragment) {
13846 newChild = newChild.props.children;
13847 }
13848
13849 // Handle object types
13850 var isObject = typeof newChild === 'object' && newChild !== null;
13851
13852 if (isObject) {
13853 switch (newChild.$$typeof) {
13854 case REACT_ELEMENT_TYPE:
13855 return placeSingleChild(reconcileSingleElement(returnFiber, currentFirstChild, newChild, expirationTime));
13856 case REACT_PORTAL_TYPE:
13857 return placeSingleChild(reconcileSinglePortal(returnFiber, currentFirstChild, newChild, expirationTime));
13858 }
13859 }
13860
13861 if (typeof newChild === 'string' || typeof newChild === 'number') {
13862 return placeSingleChild(reconcileSingleTextNode(returnFiber, currentFirstChild, '' + newChild, expirationTime));
13863 }
13864
13865 if (isArray(newChild)) {
13866 return reconcileChildrenArray(returnFiber, currentFirstChild, newChild, expirationTime);
13867 }
13868
13869 if (getIteratorFn(newChild)) {
13870 return reconcileChildrenIterator(returnFiber, currentFirstChild, newChild, expirationTime);
13871 }
13872
13873 if (isObject) {
13874 throwOnInvalidObjectType(returnFiber, newChild);
13875 }
13876
13877 {
13878 if (typeof newChild === 'function') {
13879 warnOnFunctionType();
13880 }
13881 }
13882 if (typeof newChild === 'undefined' && !isUnkeyedTopLevelFragment) {
13883 // If the new child is undefined, and the return fiber is a composite
13884 // component, throw an error. If Fiber return types are disabled,
13885 // we already threw above.
13886 switch (returnFiber.tag) {
13887 case ClassComponent:
13888 {
13889 {
13890 var instance = returnFiber.stateNode;
13891 if (instance.render._isMockFunction) {
13892 // We allow auto-mocks to proceed as if they're returning null.
13893 break;
13894 }
13895 }
13896 }
13897 // Intentionally fall through to the next case, which handles both
13898 // functions and classes
13899 // eslint-disable-next-lined no-fallthrough
13900 case FunctionComponent:
13901 {
13902 var Component = returnFiber.type;
13903 invariant(false, '%s(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.', Component.displayName || Component.name || 'Component');
13904 }
13905 }
13906 }
13907
13908 // Remaining cases are all treated as empty.
13909 return deleteRemainingChildren(returnFiber, currentFirstChild);
13910 }
13911
13912 return reconcileChildFibers;
13913}
13914
13915var reconcileChildFibers = ChildReconciler(true);
13916var mountChildFibers = ChildReconciler(false);
13917
13918function cloneChildFibers(current$$1, workInProgress) {
13919 !(current$$1 === null || workInProgress.child === current$$1.child) ? invariant(false, 'Resuming work not yet implemented.') : void 0;
13920
13921 if (workInProgress.child === null) {
13922 return;
13923 }
13924
13925 var currentChild = workInProgress.child;
13926 var newChild = createWorkInProgress(currentChild, currentChild.pendingProps, currentChild.expirationTime);
13927 workInProgress.child = newChild;
13928
13929 newChild.return = workInProgress;
13930 while (currentChild.sibling !== null) {
13931 currentChild = currentChild.sibling;
13932 newChild = newChild.sibling = createWorkInProgress(currentChild, currentChild.pendingProps, currentChild.expirationTime);
13933 newChild.return = workInProgress;
13934 }
13935 newChild.sibling = null;
13936}
13937
13938// The deepest Fiber on the stack involved in a hydration context.
13939// This may have been an insertion or a hydration.
13940var hydrationParentFiber = null;
13941var nextHydratableInstance = null;
13942var isHydrating = false;
13943
13944function enterHydrationState(fiber) {
13945 if (!supportsHydration) {
13946 return false;
13947 }
13948
13949 var parentInstance = fiber.stateNode.containerInfo;
13950 nextHydratableInstance = getFirstHydratableChild(parentInstance);
13951 hydrationParentFiber = fiber;
13952 isHydrating = true;
13953 return true;
13954}
13955
13956function deleteHydratableInstance(returnFiber, instance) {
13957 {
13958 switch (returnFiber.tag) {
13959 case HostRoot:
13960 didNotHydrateContainerInstance(returnFiber.stateNode.containerInfo, instance);
13961 break;
13962 case HostComponent:
13963 didNotHydrateInstance(returnFiber.type, returnFiber.memoizedProps, returnFiber.stateNode, instance);
13964 break;
13965 }
13966 }
13967
13968 var childToDelete = createFiberFromHostInstanceForDeletion();
13969 childToDelete.stateNode = instance;
13970 childToDelete.return = returnFiber;
13971 childToDelete.effectTag = Deletion;
13972
13973 // This might seem like it belongs on progressedFirstDeletion. However,
13974 // these children are not part of the reconciliation list of children.
13975 // Even if we abort and rereconcile the children, that will try to hydrate
13976 // again and the nodes are still in the host tree so these will be
13977 // recreated.
13978 if (returnFiber.lastEffect !== null) {
13979 returnFiber.lastEffect.nextEffect = childToDelete;
13980 returnFiber.lastEffect = childToDelete;
13981 } else {
13982 returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
13983 }
13984}
13985
13986function insertNonHydratedInstance(returnFiber, fiber) {
13987 fiber.effectTag |= Placement;
13988 {
13989 switch (returnFiber.tag) {
13990 case HostRoot:
13991 {
13992 var parentContainer = returnFiber.stateNode.containerInfo;
13993 switch (fiber.tag) {
13994 case HostComponent:
13995 var type = fiber.type;
13996 var props = fiber.pendingProps;
13997 didNotFindHydratableContainerInstance(parentContainer, type, props);
13998 break;
13999 case HostText:
14000 var text = fiber.pendingProps;
14001 didNotFindHydratableContainerTextInstance(parentContainer, text);
14002 break;
14003 }
14004 break;
14005 }
14006 case HostComponent:
14007 {
14008 var parentType = returnFiber.type;
14009 var parentProps = returnFiber.memoizedProps;
14010 var parentInstance = returnFiber.stateNode;
14011 switch (fiber.tag) {
14012 case HostComponent:
14013 var _type = fiber.type;
14014 var _props = fiber.pendingProps;
14015 didNotFindHydratableInstance(parentType, parentProps, parentInstance, _type, _props);
14016 break;
14017 case HostText:
14018 var _text = fiber.pendingProps;
14019 didNotFindHydratableTextInstance(parentType, parentProps, parentInstance, _text);
14020 break;
14021 }
14022 break;
14023 }
14024 default:
14025 return;
14026 }
14027 }
14028}
14029
14030function tryHydrate(fiber, nextInstance) {
14031 switch (fiber.tag) {
14032 case HostComponent:
14033 {
14034 var type = fiber.type;
14035 var props = fiber.pendingProps;
14036 var instance = canHydrateInstance(nextInstance, type, props);
14037 if (instance !== null) {
14038 fiber.stateNode = instance;
14039 return true;
14040 }
14041 return false;
14042 }
14043 case HostText:
14044 {
14045 var text = fiber.pendingProps;
14046 var textInstance = canHydrateTextInstance(nextInstance, text);
14047 if (textInstance !== null) {
14048 fiber.stateNode = textInstance;
14049 return true;
14050 }
14051 return false;
14052 }
14053 default:
14054 return false;
14055 }
14056}
14057
14058function tryToClaimNextHydratableInstance(fiber) {
14059 if (!isHydrating) {
14060 return;
14061 }
14062 var nextInstance = nextHydratableInstance;
14063 if (!nextInstance) {
14064 // Nothing to hydrate. Make it an insertion.
14065 insertNonHydratedInstance(hydrationParentFiber, fiber);
14066 isHydrating = false;
14067 hydrationParentFiber = fiber;
14068 return;
14069 }
14070 var firstAttemptedInstance = nextInstance;
14071 if (!tryHydrate(fiber, nextInstance)) {
14072 // If we can't hydrate this instance let's try the next one.
14073 // We use this as a heuristic. It's based on intuition and not data so it
14074 // might be flawed or unnecessary.
14075 nextInstance = getNextHydratableSibling(firstAttemptedInstance);
14076 if (!nextInstance || !tryHydrate(fiber, nextInstance)) {
14077 // Nothing to hydrate. Make it an insertion.
14078 insertNonHydratedInstance(hydrationParentFiber, fiber);
14079 isHydrating = false;
14080 hydrationParentFiber = fiber;
14081 return;
14082 }
14083 // We matched the next one, we'll now assume that the first one was
14084 // superfluous and we'll delete it. Since we can't eagerly delete it
14085 // we'll have to schedule a deletion. To do that, this node needs a dummy
14086 // fiber associated with it.
14087 deleteHydratableInstance(hydrationParentFiber, firstAttemptedInstance);
14088 }
14089 hydrationParentFiber = fiber;
14090 nextHydratableInstance = getFirstHydratableChild(nextInstance);
14091}
14092
14093function prepareToHydrateHostInstance(fiber, rootContainerInstance, hostContext) {
14094 if (!supportsHydration) {
14095 invariant(false, 'Expected prepareToHydrateHostInstance() to never be called. This error is likely caused by a bug in React. Please file an issue.');
14096 }
14097
14098 var instance = fiber.stateNode;
14099 var updatePayload = hydrateInstance(instance, fiber.type, fiber.memoizedProps, rootContainerInstance, hostContext, fiber);
14100 // TODO: Type this specific to this type of component.
14101 fiber.updateQueue = updatePayload;
14102 // If the update payload indicates that there is a change or if there
14103 // is a new ref we mark this as an update.
14104 if (updatePayload !== null) {
14105 return true;
14106 }
14107 return false;
14108}
14109
14110function prepareToHydrateHostTextInstance(fiber) {
14111 if (!supportsHydration) {
14112 invariant(false, 'Expected prepareToHydrateHostTextInstance() to never be called. This error is likely caused by a bug in React. Please file an issue.');
14113 }
14114
14115 var textInstance = fiber.stateNode;
14116 var textContent = fiber.memoizedProps;
14117 var shouldUpdate = hydrateTextInstance(textInstance, textContent, fiber);
14118 {
14119 if (shouldUpdate) {
14120 // We assume that prepareToHydrateHostTextInstance is called in a context where the
14121 // hydration parent is the parent host component of this host text.
14122 var returnFiber = hydrationParentFiber;
14123 if (returnFiber !== null) {
14124 switch (returnFiber.tag) {
14125 case HostRoot:
14126 {
14127 var parentContainer = returnFiber.stateNode.containerInfo;
14128 didNotMatchHydratedContainerTextInstance(parentContainer, textInstance, textContent);
14129 break;
14130 }
14131 case HostComponent:
14132 {
14133 var parentType = returnFiber.type;
14134 var parentProps = returnFiber.memoizedProps;
14135 var parentInstance = returnFiber.stateNode;
14136 didNotMatchHydratedTextInstance(parentType, parentProps, parentInstance, textInstance, textContent);
14137 break;
14138 }
14139 }
14140 }
14141 }
14142 }
14143 return shouldUpdate;
14144}
14145
14146function popToNextHostParent(fiber) {
14147 var parent = fiber.return;
14148 while (parent !== null && parent.tag !== HostComponent && parent.tag !== HostRoot) {
14149 parent = parent.return;
14150 }
14151 hydrationParentFiber = parent;
14152}
14153
14154function popHydrationState(fiber) {
14155 if (!supportsHydration) {
14156 return false;
14157 }
14158 if (fiber !== hydrationParentFiber) {
14159 // We're deeper than the current hydration context, inside an inserted
14160 // tree.
14161 return false;
14162 }
14163 if (!isHydrating) {
14164 // If we're not currently hydrating but we're in a hydration context, then
14165 // we were an insertion and now need to pop up reenter hydration of our
14166 // siblings.
14167 popToNextHostParent(fiber);
14168 isHydrating = true;
14169 return false;
14170 }
14171
14172 var type = fiber.type;
14173
14174 // If we have any remaining hydratable nodes, we need to delete them now.
14175 // We only do this deeper than head and body since they tend to have random
14176 // other nodes in them. We also ignore components with pure text content in
14177 // side of them.
14178 // TODO: Better heuristic.
14179 if (fiber.tag !== HostComponent || type !== 'head' && type !== 'body' && !shouldSetTextContent(type, fiber.memoizedProps)) {
14180 var nextInstance = nextHydratableInstance;
14181 while (nextInstance) {
14182 deleteHydratableInstance(fiber, nextInstance);
14183 nextInstance = getNextHydratableSibling(nextInstance);
14184 }
14185 }
14186
14187 popToNextHostParent(fiber);
14188 nextHydratableInstance = hydrationParentFiber ? getNextHydratableSibling(fiber.stateNode) : null;
14189 return true;
14190}
14191
14192function resetHydrationState() {
14193 if (!supportsHydration) {
14194 return;
14195 }
14196
14197 hydrationParentFiber = null;
14198 nextHydratableInstance = null;
14199 isHydrating = false;
14200}
14201
14202var ReactCurrentOwner$3 = ReactSharedInternals.ReactCurrentOwner;
14203
14204var didWarnAboutBadClass = void 0;
14205var didWarnAboutContextTypeOnFunctionComponent = void 0;
14206var didWarnAboutGetDerivedStateOnFunctionComponent = void 0;
14207var didWarnAboutFunctionRefs = void 0;
14208var didWarnAboutReassigningProps = void 0;
14209
14210{
14211 didWarnAboutBadClass = {};
14212 didWarnAboutContextTypeOnFunctionComponent = {};
14213 didWarnAboutGetDerivedStateOnFunctionComponent = {};
14214 didWarnAboutFunctionRefs = {};
14215 didWarnAboutReassigningProps = false;
14216}
14217
14218function reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime) {
14219 if (current$$1 === null) {
14220 // If this is a fresh new component that hasn't been rendered yet, we
14221 // won't update its child set by applying minimal side-effects. Instead,
14222 // we will add them all to the child before it gets rendered. That means
14223 // we can optimize this reconciliation pass by not tracking side-effects.
14224 workInProgress.child = mountChildFibers(workInProgress, null, nextChildren, renderExpirationTime);
14225 } else {
14226 // If the current child is the same as the work in progress, it means that
14227 // we haven't yet started any work on these children. Therefore, we use
14228 // the clone algorithm to create a copy of all the current children.
14229
14230 // If we had any progressed work already, that is invalid at this point so
14231 // let's throw it out.
14232 workInProgress.child = reconcileChildFibers(workInProgress, current$$1.child, nextChildren, renderExpirationTime);
14233 }
14234}
14235
14236function forceUnmountCurrentAndReconcile(current$$1, workInProgress, nextChildren, renderExpirationTime) {
14237 // This function is fork of reconcileChildren. It's used in cases where we
14238 // want to reconcile without matching against the existing set. This has the
14239 // effect of all current children being unmounted; even if the type and key
14240 // are the same, the old child is unmounted and a new child is created.
14241 //
14242 // To do this, we're going to go through the reconcile algorithm twice. In
14243 // the first pass, we schedule a deletion for all the current children by
14244 // passing null.
14245 workInProgress.child = reconcileChildFibers(workInProgress, current$$1.child, null, renderExpirationTime);
14246 // In the second pass, we mount the new children. The trick here is that we
14247 // pass null in place of where we usually pass the current child set. This has
14248 // the effect of remounting all children regardless of whether their their
14249 // identity matches.
14250 workInProgress.child = reconcileChildFibers(workInProgress, null, nextChildren, renderExpirationTime);
14251}
14252
14253function updateForwardRef(current$$1, workInProgress, Component, nextProps, renderExpirationTime) {
14254 {
14255 if (workInProgress.type !== workInProgress.elementType) {
14256 // Lazy component props can't be validated in createElement
14257 // because they're only guaranteed to be resolved here.
14258 var innerPropTypes = Component.propTypes;
14259 if (innerPropTypes) {
14260 checkPropTypes(innerPropTypes, nextProps, // Resolved props
14261 'prop', getComponentName(Component), getCurrentFiberStackInDev);
14262 }
14263 }
14264 }
14265
14266 var render = Component.render;
14267 var ref = workInProgress.ref;
14268
14269 // The rest is a fork of updateFunctionComponent
14270 var nextChildren = void 0;
14271 prepareToReadContext(workInProgress, renderExpirationTime);
14272 prepareToUseHooks(current$$1, workInProgress, renderExpirationTime);
14273 {
14274 ReactCurrentOwner$3.current = workInProgress;
14275 setCurrentPhase('render');
14276 nextChildren = render(nextProps, ref);
14277 setCurrentPhase(null);
14278 }
14279 nextChildren = finishHooks(render, nextProps, nextChildren, ref);
14280
14281 // React DevTools reads this flag.
14282 workInProgress.effectTag |= PerformedWork;
14283 reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime);
14284 return workInProgress.child;
14285}
14286
14287function updateMemoComponent(current$$1, workInProgress, Component, nextProps, updateExpirationTime, renderExpirationTime) {
14288 if (current$$1 === null) {
14289 var type = Component.type;
14290 if (isSimpleFunctionComponent(type) && Component.compare === null &&
14291 // SimpleMemoComponent codepath doesn't resolve outer props either.
14292 Component.defaultProps === undefined) {
14293 // If this is a plain function component without default props,
14294 // and with only the default shallow comparison, we upgrade it
14295 // to a SimpleMemoComponent to allow fast path updates.
14296 workInProgress.tag = SimpleMemoComponent;
14297 workInProgress.type = type;
14298 {
14299 validateFunctionComponentInDev(workInProgress, type);
14300 }
14301 return updateSimpleMemoComponent(current$$1, workInProgress, type, nextProps, updateExpirationTime, renderExpirationTime);
14302 }
14303 {
14304 var innerPropTypes = type.propTypes;
14305 if (innerPropTypes) {
14306 // Inner memo component props aren't currently validated in createElement.
14307 // We could move it there, but we'd still need this for lazy code path.
14308 checkPropTypes(innerPropTypes, nextProps, // Resolved props
14309 'prop', getComponentName(type), getCurrentFiberStackInDev);
14310 }
14311 }
14312 var child = createFiberFromTypeAndProps(Component.type, null, nextProps, null, workInProgress.mode, renderExpirationTime);
14313 child.ref = workInProgress.ref;
14314 child.return = workInProgress;
14315 workInProgress.child = child;
14316 return child;
14317 }
14318 {
14319 var _type = Component.type;
14320 var _innerPropTypes = _type.propTypes;
14321 if (_innerPropTypes) {
14322 // Inner memo component props aren't currently validated in createElement.
14323 // We could move it there, but we'd still need this for lazy code path.
14324 checkPropTypes(_innerPropTypes, nextProps, // Resolved props
14325 'prop', getComponentName(_type), getCurrentFiberStackInDev);
14326 }
14327 }
14328 var currentChild = current$$1.child; // This is always exactly one child
14329 if (updateExpirationTime < renderExpirationTime) {
14330 // This will be the props with resolved defaultProps,
14331 // unlike current.memoizedProps which will be the unresolved ones.
14332 var prevProps = currentChild.memoizedProps;
14333 // Default to shallow comparison
14334 var compare = Component.compare;
14335 compare = compare !== null ? compare : shallowEqual;
14336 if (compare(prevProps, nextProps) && current$$1.ref === workInProgress.ref) {
14337 return bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime);
14338 }
14339 }
14340 // React DevTools reads this flag.
14341 workInProgress.effectTag |= PerformedWork;
14342 var newChild = createWorkInProgress(currentChild, nextProps, renderExpirationTime);
14343 newChild.ref = workInProgress.ref;
14344 newChild.return = workInProgress;
14345 workInProgress.child = newChild;
14346 return newChild;
14347}
14348
14349function updateSimpleMemoComponent(current$$1, workInProgress, Component, nextProps, updateExpirationTime, renderExpirationTime) {
14350 {
14351 if (workInProgress.type !== workInProgress.elementType) {
14352 // Lazy component props can't be validated in createElement
14353 // because they're only guaranteed to be resolved here.
14354 var outerMemoType = workInProgress.elementType;
14355 if (outerMemoType.$$typeof === REACT_LAZY_TYPE) {
14356 // We warn when you define propTypes on lazy()
14357 // so let's just skip over it to find memo() outer wrapper.
14358 // Inner props for memo are validated later.
14359 outerMemoType = refineResolvedLazyComponent(outerMemoType);
14360 }
14361 var outerPropTypes = outerMemoType && outerMemoType.propTypes;
14362 if (outerPropTypes) {
14363 checkPropTypes(outerPropTypes, nextProps, // Resolved (SimpleMemoComponent has no defaultProps)
14364 'prop', getComponentName(outerMemoType), getCurrentFiberStackInDev);
14365 }
14366 // Inner propTypes will be validated in the function component path.
14367 }
14368 }
14369 if (current$$1 !== null && updateExpirationTime < renderExpirationTime) {
14370 var prevProps = current$$1.memoizedProps;
14371 if (shallowEqual(prevProps, nextProps) && current$$1.ref === workInProgress.ref) {
14372 return bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime);
14373 }
14374 }
14375 return updateFunctionComponent(current$$1, workInProgress, Component, nextProps, renderExpirationTime);
14376}
14377
14378function updateFragment(current$$1, workInProgress, renderExpirationTime) {
14379 var nextChildren = workInProgress.pendingProps;
14380 reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime);
14381 return workInProgress.child;
14382}
14383
14384function updateMode(current$$1, workInProgress, renderExpirationTime) {
14385 var nextChildren = workInProgress.pendingProps.children;
14386 reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime);
14387 return workInProgress.child;
14388}
14389
14390function updateProfiler(current$$1, workInProgress, renderExpirationTime) {
14391 if (enableProfilerTimer) {
14392 workInProgress.effectTag |= Update;
14393 }
14394 var nextProps = workInProgress.pendingProps;
14395 var nextChildren = nextProps.children;
14396 reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime);
14397 return workInProgress.child;
14398}
14399
14400function markRef(current$$1, workInProgress) {
14401 var ref = workInProgress.ref;
14402 if (current$$1 === null && ref !== null || current$$1 !== null && current$$1.ref !== ref) {
14403 // Schedule a Ref effect
14404 workInProgress.effectTag |= Ref;
14405 }
14406}
14407
14408function updateFunctionComponent(current$$1, workInProgress, Component, nextProps, renderExpirationTime) {
14409 {
14410 if (workInProgress.type !== workInProgress.elementType) {
14411 // Lazy component props can't be validated in createElement
14412 // because they're only guaranteed to be resolved here.
14413 var innerPropTypes = Component.propTypes;
14414 if (innerPropTypes) {
14415 checkPropTypes(innerPropTypes, nextProps, // Resolved props
14416 'prop', getComponentName(Component), getCurrentFiberStackInDev);
14417 }
14418 }
14419 }
14420
14421 var unmaskedContext = getUnmaskedContext(workInProgress, Component, true);
14422 var context = getMaskedContext(workInProgress, unmaskedContext);
14423
14424 var nextChildren = void 0;
14425 prepareToReadContext(workInProgress, renderExpirationTime);
14426 prepareToUseHooks(current$$1, workInProgress, renderExpirationTime);
14427 {
14428 ReactCurrentOwner$3.current = workInProgress;
14429 setCurrentPhase('render');
14430 nextChildren = Component(nextProps, context);
14431 setCurrentPhase(null);
14432 }
14433 nextChildren = finishHooks(Component, nextProps, nextChildren, context);
14434
14435 // React DevTools reads this flag.
14436 workInProgress.effectTag |= PerformedWork;
14437 reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime);
14438 return workInProgress.child;
14439}
14440
14441function updateClassComponent(current$$1, workInProgress, Component, nextProps, renderExpirationTime) {
14442 {
14443 if (workInProgress.type !== workInProgress.elementType) {
14444 // Lazy component props can't be validated in createElement
14445 // because they're only guaranteed to be resolved here.
14446 var innerPropTypes = Component.propTypes;
14447 if (innerPropTypes) {
14448 checkPropTypes(innerPropTypes, nextProps, // Resolved props
14449 'prop', getComponentName(Component), getCurrentFiberStackInDev);
14450 }
14451 }
14452 }
14453
14454 // Push context providers early to prevent context stack mismatches.
14455 // During mounting we don't know the child context yet as the instance doesn't exist.
14456 // We will invalidate the child context in finishClassComponent() right after rendering.
14457 var hasContext = void 0;
14458 if (isContextProvider(Component)) {
14459 hasContext = true;
14460 pushContextProvider(workInProgress);
14461 } else {
14462 hasContext = false;
14463 }
14464 prepareToReadContext(workInProgress, renderExpirationTime);
14465
14466 var instance = workInProgress.stateNode;
14467 var shouldUpdate = void 0;
14468 if (instance === null) {
14469 if (current$$1 !== null) {
14470 // An class component without an instance only mounts if it suspended
14471 // inside a non- concurrent tree, in an inconsistent state. We want to
14472 // tree it like a new mount, even though an empty version of it already
14473 // committed. Disconnect the alternate pointers.
14474 current$$1.alternate = null;
14475 workInProgress.alternate = null;
14476 // Since this is conceptually a new fiber, schedule a Placement effect
14477 workInProgress.effectTag |= Placement;
14478 }
14479 // In the initial pass we might need to construct the instance.
14480 constructClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
14481 mountClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
14482 shouldUpdate = true;
14483 } else if (current$$1 === null) {
14484 // In a resume, we'll already have an instance we can reuse.
14485 shouldUpdate = resumeMountClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
14486 } else {
14487 shouldUpdate = updateClassInstance(current$$1, workInProgress, Component, nextProps, renderExpirationTime);
14488 }
14489 var nextUnitOfWork = finishClassComponent(current$$1, workInProgress, Component, shouldUpdate, hasContext, renderExpirationTime);
14490 {
14491 var inst = workInProgress.stateNode;
14492 if (inst.props !== nextProps) {
14493 !didWarnAboutReassigningProps ? warning$1(false, 'It looks like %s is reassigning its own `this.props` while rendering. ' + 'This is not supported and can lead to confusing bugs.', getComponentName(workInProgress.type) || 'a component') : void 0;
14494 didWarnAboutReassigningProps = true;
14495 }
14496 }
14497 return nextUnitOfWork;
14498}
14499
14500function finishClassComponent(current$$1, workInProgress, Component, shouldUpdate, hasContext, renderExpirationTime) {
14501 // Refs should update even if shouldComponentUpdate returns false
14502 markRef(current$$1, workInProgress);
14503
14504 var didCaptureError = (workInProgress.effectTag & DidCapture) !== NoEffect;
14505
14506 if (!shouldUpdate && !didCaptureError) {
14507 // Context providers should defer to sCU for rendering
14508 if (hasContext) {
14509 invalidateContextProvider(workInProgress, Component, false);
14510 }
14511
14512 return bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime);
14513 }
14514
14515 var instance = workInProgress.stateNode;
14516
14517 // Rerender
14518 ReactCurrentOwner$3.current = workInProgress;
14519 var nextChildren = void 0;
14520 if (didCaptureError && typeof Component.getDerivedStateFromError !== 'function') {
14521 // If we captured an error, but getDerivedStateFrom catch is not defined,
14522 // unmount all the children. componentDidCatch will schedule an update to
14523 // re-render a fallback. This is temporary until we migrate everyone to
14524 // the new API.
14525 // TODO: Warn in a future release.
14526 nextChildren = null;
14527
14528 if (enableProfilerTimer) {
14529 stopProfilerTimerIfRunning(workInProgress);
14530 }
14531 } else {
14532 {
14533 setCurrentPhase('render');
14534 nextChildren = instance.render();
14535 if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & StrictMode) {
14536 instance.render();
14537 }
14538 setCurrentPhase(null);
14539 }
14540 }
14541
14542 // React DevTools reads this flag.
14543 workInProgress.effectTag |= PerformedWork;
14544 if (current$$1 !== null && didCaptureError) {
14545 // If we're recovering from an error, reconcile without reusing any of
14546 // the existing children. Conceptually, the normal children and the children
14547 // that are shown on error are two different sets, so we shouldn't reuse
14548 // normal children even if their identities match.
14549 forceUnmountCurrentAndReconcile(current$$1, workInProgress, nextChildren, renderExpirationTime);
14550 } else {
14551 reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime);
14552 }
14553
14554 // Memoize state using the values we just used to render.
14555 // TODO: Restructure so we never read values from the instance.
14556 workInProgress.memoizedState = instance.state;
14557
14558 // The context might have changed so we need to recalculate it.
14559 if (hasContext) {
14560 invalidateContextProvider(workInProgress, Component, true);
14561 }
14562
14563 return workInProgress.child;
14564}
14565
14566function pushHostRootContext(workInProgress) {
14567 var root = workInProgress.stateNode;
14568 if (root.pendingContext) {
14569 pushTopLevelContextObject(workInProgress, root.pendingContext, root.pendingContext !== root.context);
14570 } else if (root.context) {
14571 // Should always be set
14572 pushTopLevelContextObject(workInProgress, root.context, false);
14573 }
14574 pushHostContainer(workInProgress, root.containerInfo);
14575}
14576
14577function updateHostRoot(current$$1, workInProgress, renderExpirationTime) {
14578 pushHostRootContext(workInProgress);
14579 var updateQueue = workInProgress.updateQueue;
14580 !(updateQueue !== null) ? invariant(false, 'If the root does not have an updateQueue, we should have already bailed out. This error is likely caused by a bug in React. Please file an issue.') : void 0;
14581 var nextProps = workInProgress.pendingProps;
14582 var prevState = workInProgress.memoizedState;
14583 var prevChildren = prevState !== null ? prevState.element : null;
14584 processUpdateQueue(workInProgress, updateQueue, nextProps, null, renderExpirationTime);
14585 var nextState = workInProgress.memoizedState;
14586 // Caution: React DevTools currently depends on this property
14587 // being called "element".
14588 var nextChildren = nextState.element;
14589 if (nextChildren === prevChildren) {
14590 // If the state is the same as before, that's a bailout because we had
14591 // no work that expires at this time.
14592 resetHydrationState();
14593 return bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime);
14594 }
14595 var root = workInProgress.stateNode;
14596 if ((current$$1 === null || current$$1.child === null) && root.hydrate && enterHydrationState(workInProgress)) {
14597 // If we don't have any current children this might be the first pass.
14598 // We always try to hydrate. If this isn't a hydration pass there won't
14599 // be any children to hydrate which is effectively the same thing as
14600 // not hydrating.
14601
14602 // This is a bit of a hack. We track the host root as a placement to
14603 // know that we're currently in a mounting state. That way isMounted
14604 // works as expected. We must reset this before committing.
14605 // TODO: Delete this when we delete isMounted and findDOMNode.
14606 workInProgress.effectTag |= Placement;
14607
14608 // Ensure that children mount into this root without tracking
14609 // side-effects. This ensures that we don't store Placement effects on
14610 // nodes that will be hydrated.
14611 workInProgress.child = mountChildFibers(workInProgress, null, nextChildren, renderExpirationTime);
14612 } else {
14613 // Otherwise reset hydration state in case we aborted and resumed another
14614 // root.
14615 reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime);
14616 resetHydrationState();
14617 }
14618 return workInProgress.child;
14619}
14620
14621function updateHostComponent(current$$1, workInProgress, renderExpirationTime) {
14622 pushHostContext(workInProgress);
14623
14624 if (current$$1 === null) {
14625 tryToClaimNextHydratableInstance(workInProgress);
14626 }
14627
14628 var type = workInProgress.type;
14629 var nextProps = workInProgress.pendingProps;
14630 var prevProps = current$$1 !== null ? current$$1.memoizedProps : null;
14631
14632 var nextChildren = nextProps.children;
14633 var isDirectTextChild = shouldSetTextContent(type, nextProps);
14634
14635 if (isDirectTextChild) {
14636 // We special case a direct text child of a host node. This is a common
14637 // case. We won't handle it as a reified child. We will instead handle
14638 // this in the host environment that also have access to this prop. That
14639 // avoids allocating another HostText fiber and traversing it.
14640 nextChildren = null;
14641 } else if (prevProps !== null && shouldSetTextContent(type, prevProps)) {
14642 // If we're switching from a direct text child to a normal child, or to
14643 // empty, we need to schedule the text content to be reset.
14644 workInProgress.effectTag |= ContentReset;
14645 }
14646
14647 markRef(current$$1, workInProgress);
14648
14649 // Check the host config to see if the children are offscreen/hidden.
14650 if (renderExpirationTime !== Never && workInProgress.mode & ConcurrentMode && shouldDeprioritizeSubtree(type, nextProps)) {
14651 // Schedule this fiber to re-render at offscreen priority. Then bailout.
14652 workInProgress.expirationTime = Never;
14653 return null;
14654 }
14655
14656 reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime);
14657 return workInProgress.child;
14658}
14659
14660function updateHostText(current$$1, workInProgress) {
14661 if (current$$1 === null) {
14662 tryToClaimNextHydratableInstance(workInProgress);
14663 }
14664 // Nothing to do here. This is terminal. We'll do the completion step
14665 // immediately after.
14666 return null;
14667}
14668
14669function mountLazyComponent(_current, workInProgress, elementType, updateExpirationTime, renderExpirationTime) {
14670 if (_current !== null) {
14671 // An lazy component only mounts if it suspended inside a non-
14672 // concurrent tree, in an inconsistent state. We want to treat it like
14673 // a new mount, even though an empty version of it already committed.
14674 // Disconnect the alternate pointers.
14675 _current.alternate = null;
14676 workInProgress.alternate = null;
14677 // Since this is conceptually a new fiber, schedule a Placement effect
14678 workInProgress.effectTag |= Placement;
14679 }
14680
14681 var props = workInProgress.pendingProps;
14682 // We can't start a User Timing measurement with correct label yet.
14683 // Cancel and resume right after we know the tag.
14684 cancelWorkTimer(workInProgress);
14685 var Component = readLazyComponentType(elementType);
14686 // Store the unwrapped component in the type.
14687 workInProgress.type = Component;
14688 var resolvedTag = workInProgress.tag = resolveLazyComponentTag(Component);
14689 startWorkTimer(workInProgress);
14690 var resolvedProps = resolveDefaultProps(Component, props);
14691 var child = void 0;
14692 switch (resolvedTag) {
14693 case FunctionComponent:
14694 {
14695 child = updateFunctionComponent(null, workInProgress, Component, resolvedProps, renderExpirationTime);
14696 break;
14697 }
14698 case ClassComponent:
14699 {
14700 child = updateClassComponent(null, workInProgress, Component, resolvedProps, renderExpirationTime);
14701 break;
14702 }
14703 case ForwardRef:
14704 {
14705 child = updateForwardRef(null, workInProgress, Component, resolvedProps, renderExpirationTime);
14706 break;
14707 }
14708 case MemoComponent:
14709 {
14710 {
14711 if (workInProgress.type !== workInProgress.elementType) {
14712 var outerPropTypes = Component.propTypes;
14713 if (outerPropTypes) {
14714 checkPropTypes(outerPropTypes, resolvedProps, // Resolved for outer only
14715 'prop', getComponentName(Component), getCurrentFiberStackInDev);
14716 }
14717 }
14718 }
14719 child = updateMemoComponent(null, workInProgress, Component, resolveDefaultProps(Component.type, resolvedProps), // The inner type can have defaults too
14720 updateExpirationTime, renderExpirationTime);
14721 break;
14722 }
14723 default:
14724 {
14725 var hint = '';
14726 {
14727 if (Component !== null && typeof Component === 'object' && Component.$$typeof === REACT_LAZY_TYPE) {
14728 hint = ' Did you wrap a component in React.lazy() more than once?';
14729 }
14730 }
14731 // This message intentionally doesn't mention ForwardRef or MemoComponent
14732 // because the fact that it's a separate type of work is an
14733 // implementation detail.
14734 invariant(false, 'Element type is invalid. Received a promise that resolves to: %s. Lazy element type must resolve to a class or function.%s', Component, hint);
14735 }
14736 }
14737 return child;
14738}
14739
14740function mountIncompleteClassComponent(_current, workInProgress, Component, nextProps, renderExpirationTime) {
14741 if (_current !== null) {
14742 // An incomplete component only mounts if it suspended inside a non-
14743 // concurrent tree, in an inconsistent state. We want to treat it like
14744 // a new mount, even though an empty version of it already committed.
14745 // Disconnect the alternate pointers.
14746 _current.alternate = null;
14747 workInProgress.alternate = null;
14748 // Since this is conceptually a new fiber, schedule a Placement effect
14749 workInProgress.effectTag |= Placement;
14750 }
14751
14752 // Promote the fiber to a class and try rendering again.
14753 workInProgress.tag = ClassComponent;
14754
14755 // The rest of this function is a fork of `updateClassComponent`
14756
14757 // Push context providers early to prevent context stack mismatches.
14758 // During mounting we don't know the child context yet as the instance doesn't exist.
14759 // We will invalidate the child context in finishClassComponent() right after rendering.
14760 var hasContext = void 0;
14761 if (isContextProvider(Component)) {
14762 hasContext = true;
14763 pushContextProvider(workInProgress);
14764 } else {
14765 hasContext = false;
14766 }
14767 prepareToReadContext(workInProgress, renderExpirationTime);
14768
14769 constructClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
14770 mountClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
14771
14772 return finishClassComponent(null, workInProgress, Component, true, hasContext, renderExpirationTime);
14773}
14774
14775function mountIndeterminateComponent(_current, workInProgress, Component, renderExpirationTime) {
14776 if (_current !== null) {
14777 // An indeterminate component only mounts if it suspended inside a non-
14778 // concurrent tree, in an inconsistent state. We want to treat it like
14779 // a new mount, even though an empty version of it already committed.
14780 // Disconnect the alternate pointers.
14781 _current.alternate = null;
14782 workInProgress.alternate = null;
14783 // Since this is conceptually a new fiber, schedule a Placement effect
14784 workInProgress.effectTag |= Placement;
14785 }
14786
14787 var props = workInProgress.pendingProps;
14788 var unmaskedContext = getUnmaskedContext(workInProgress, Component, false);
14789 var context = getMaskedContext(workInProgress, unmaskedContext);
14790
14791 prepareToReadContext(workInProgress, renderExpirationTime);
14792 prepareToUseHooks(null, workInProgress, renderExpirationTime);
14793
14794 var value = void 0;
14795
14796 {
14797 if (Component.prototype && typeof Component.prototype.render === 'function') {
14798 var componentName = getComponentName(Component) || 'Unknown';
14799
14800 if (!didWarnAboutBadClass[componentName]) {
14801 warningWithoutStack$1(false, "The <%s /> component appears to have a render method, but doesn't extend React.Component. " + 'This is likely to cause errors. Change %s to extend React.Component instead.', componentName, componentName);
14802 didWarnAboutBadClass[componentName] = true;
14803 }
14804 }
14805
14806 if (workInProgress.mode & StrictMode) {
14807 ReactStrictModeWarnings.recordLegacyContextWarning(workInProgress, null);
14808 }
14809
14810 ReactCurrentOwner$3.current = workInProgress;
14811 value = Component(props, context);
14812 }
14813 // React DevTools reads this flag.
14814 workInProgress.effectTag |= PerformedWork;
14815
14816 if (typeof value === 'object' && value !== null && typeof value.render === 'function' && value.$$typeof === undefined) {
14817 // Proceed under the assumption that this is a class instance
14818 workInProgress.tag = ClassComponent;
14819
14820 // Throw out any hooks that were used.
14821 resetHooks();
14822
14823 // Push context providers early to prevent context stack mismatches.
14824 // During mounting we don't know the child context yet as the instance doesn't exist.
14825 // We will invalidate the child context in finishClassComponent() right after rendering.
14826 var hasContext = false;
14827 if (isContextProvider(Component)) {
14828 hasContext = true;
14829 pushContextProvider(workInProgress);
14830 } else {
14831 hasContext = false;
14832 }
14833
14834 workInProgress.memoizedState = value.state !== null && value.state !== undefined ? value.state : null;
14835
14836 var getDerivedStateFromProps = Component.getDerivedStateFromProps;
14837 if (typeof getDerivedStateFromProps === 'function') {
14838 applyDerivedStateFromProps(workInProgress, Component, getDerivedStateFromProps, props);
14839 }
14840
14841 adoptClassInstance(workInProgress, value);
14842 mountClassInstance(workInProgress, Component, props, renderExpirationTime);
14843 return finishClassComponent(null, workInProgress, Component, true, hasContext, renderExpirationTime);
14844 } else {
14845 // Proceed under the assumption that this is a function component
14846 workInProgress.tag = FunctionComponent;
14847 value = finishHooks(Component, props, value, context);
14848 reconcileChildren(null, workInProgress, value, renderExpirationTime);
14849 {
14850 validateFunctionComponentInDev(workInProgress, Component);
14851 }
14852 return workInProgress.child;
14853 }
14854}
14855
14856function validateFunctionComponentInDev(workInProgress, Component) {
14857 if (Component) {
14858 !!Component.childContextTypes ? warningWithoutStack$1(false, '%s(...): childContextTypes cannot be defined on a function component.', Component.displayName || Component.name || 'Component') : void 0;
14859 }
14860 if (workInProgress.ref !== null) {
14861 var info = '';
14862 var ownerName = getCurrentFiberOwnerNameInDevOrNull();
14863 if (ownerName) {
14864 info += '\n\nCheck the render method of `' + ownerName + '`.';
14865 }
14866
14867 var warningKey = ownerName || workInProgress._debugID || '';
14868 var debugSource = workInProgress._debugSource;
14869 if (debugSource) {
14870 warningKey = debugSource.fileName + ':' + debugSource.lineNumber;
14871 }
14872 if (!didWarnAboutFunctionRefs[warningKey]) {
14873 didWarnAboutFunctionRefs[warningKey] = true;
14874 warning$1(false, 'Function components cannot be given refs. ' + 'Attempts to access this ref will fail.%s', info);
14875 }
14876 }
14877
14878 if (typeof Component.getDerivedStateFromProps === 'function') {
14879 var componentName = getComponentName(Component) || 'Unknown';
14880
14881 if (!didWarnAboutGetDerivedStateOnFunctionComponent[componentName]) {
14882 warningWithoutStack$1(false, '%s: Function components do not support getDerivedStateFromProps.', componentName);
14883 didWarnAboutGetDerivedStateOnFunctionComponent[componentName] = true;
14884 }
14885 }
14886
14887 if (typeof Component.contextType === 'object' && Component.contextType !== null) {
14888 var _componentName = getComponentName(Component) || 'Unknown';
14889
14890 if (!didWarnAboutContextTypeOnFunctionComponent[_componentName]) {
14891 warningWithoutStack$1(false, '%s: Function components do not support contextType.', _componentName);
14892 didWarnAboutContextTypeOnFunctionComponent[_componentName] = true;
14893 }
14894 }
14895}
14896
14897function updateSuspenseComponent(current$$1, workInProgress, renderExpirationTime) {
14898 var mode = workInProgress.mode;
14899 var nextProps = workInProgress.pendingProps;
14900
14901 // We should attempt to render the primary children unless this boundary
14902 // already suspended during this render (`alreadyCaptured` is true).
14903 var nextState = workInProgress.memoizedState;
14904
14905 var nextDidTimeout = void 0;
14906 if ((workInProgress.effectTag & DidCapture) === NoEffect) {
14907 // This is the first attempt.
14908 nextState = null;
14909 nextDidTimeout = false;
14910 } else {
14911 // Something in this boundary's subtree already suspended. Switch to
14912 // rendering the fallback children.
14913 nextState = {
14914 timedOutAt: nextState !== null ? nextState.timedOutAt : NoWork
14915 };
14916 nextDidTimeout = true;
14917 workInProgress.effectTag &= ~DidCapture;
14918 }
14919
14920 // This next part is a bit confusing. If the children timeout, we switch to
14921 // showing the fallback children in place of the "primary" children.
14922 // However, we don't want to delete the primary children because then their
14923 // state will be lost (both the React state and the host state, e.g.
14924 // uncontrolled form inputs). Instead we keep them mounted and hide them.
14925 // Both the fallback children AND the primary children are rendered at the
14926 // same time. Once the primary children are un-suspended, we can delete
14927 // the fallback children — don't need to preserve their state.
14928 //
14929 // The two sets of children are siblings in the host environment, but
14930 // semantically, for purposes of reconciliation, they are two separate sets.
14931 // So we store them using two fragment fibers.
14932 //
14933 // However, we want to avoid allocating extra fibers for every placeholder.
14934 // They're only necessary when the children time out, because that's the
14935 // only time when both sets are mounted.
14936 //
14937 // So, the extra fragment fibers are only used if the children time out.
14938 // Otherwise, we render the primary children directly. This requires some
14939 // custom reconciliation logic to preserve the state of the primary
14940 // children. It's essentially a very basic form of re-parenting.
14941
14942 // `child` points to the child fiber. In the normal case, this is the first
14943 // fiber of the primary children set. In the timed-out case, it's a
14944 // a fragment fiber containing the primary children.
14945 var child = void 0;
14946 // `next` points to the next fiber React should render. In the normal case,
14947 // it's the same as `child`: the first fiber of the primary children set.
14948 // In the timed-out case, it's a fragment fiber containing the *fallback*
14949 // children -- we skip over the primary children entirely.
14950 var next = void 0;
14951 if (current$$1 === null) {
14952 // This is the initial mount. This branch is pretty simple because there's
14953 // no previous state that needs to be preserved.
14954 if (nextDidTimeout) {
14955 // Mount separate fragments for primary and fallback children.
14956 var nextFallbackChildren = nextProps.fallback;
14957 var primaryChildFragment = createFiberFromFragment(null, mode, NoWork, null);
14958
14959 if ((workInProgress.mode & ConcurrentMode) === NoContext) {
14960 // Outside of concurrent mode, we commit the effects from the
14961 var progressedState = workInProgress.memoizedState;
14962 var progressedPrimaryChild = progressedState !== null ? workInProgress.child.child : workInProgress.child;
14963 primaryChildFragment.child = progressedPrimaryChild;
14964 }
14965
14966 var fallbackChildFragment = createFiberFromFragment(nextFallbackChildren, mode, renderExpirationTime, null);
14967 primaryChildFragment.sibling = fallbackChildFragment;
14968 child = primaryChildFragment;
14969 // Skip the primary children, and continue working on the
14970 // fallback children.
14971 next = fallbackChildFragment;
14972 child.return = next.return = workInProgress;
14973 } else {
14974 // Mount the primary children without an intermediate fragment fiber.
14975 var nextPrimaryChildren = nextProps.children;
14976 child = next = mountChildFibers(workInProgress, null, nextPrimaryChildren, renderExpirationTime);
14977 }
14978 } else {
14979 // This is an update. This branch is more complicated because we need to
14980 // ensure the state of the primary children is preserved.
14981 var prevState = current$$1.memoizedState;
14982 var prevDidTimeout = prevState !== null;
14983 if (prevDidTimeout) {
14984 // The current tree already timed out. That means each child set is
14985 var currentPrimaryChildFragment = current$$1.child;
14986 var currentFallbackChildFragment = currentPrimaryChildFragment.sibling;
14987 if (nextDidTimeout) {
14988 // Still timed out. Reuse the current primary children by cloning
14989 // its fragment. We're going to skip over these entirely.
14990 var _nextFallbackChildren = nextProps.fallback;
14991 var _primaryChildFragment = createWorkInProgress(currentPrimaryChildFragment, currentPrimaryChildFragment.pendingProps, NoWork);
14992
14993 if ((workInProgress.mode & ConcurrentMode) === NoContext) {
14994 // Outside of concurrent mode, we commit the effects from the
14995 var _progressedState = workInProgress.memoizedState;
14996 var _progressedPrimaryChild = _progressedState !== null ? workInProgress.child.child : workInProgress.child;
14997 if (_progressedPrimaryChild !== currentPrimaryChildFragment.child) {
14998 _primaryChildFragment.child = _progressedPrimaryChild;
14999 }
15000 }
15001
15002 // Because primaryChildFragment is a new fiber that we're inserting as the
15003 // parent of a new tree, we need to set its treeBaseDuration.
15004 if (enableProfilerTimer && workInProgress.mode & ProfileMode) {
15005 // treeBaseDuration is the sum of all the child tree base durations.
15006 var treeBaseDuration = 0;
15007 var hiddenChild = _primaryChildFragment.child;
15008 while (hiddenChild !== null) {
15009 treeBaseDuration += hiddenChild.treeBaseDuration;
15010 hiddenChild = hiddenChild.sibling;
15011 }
15012 _primaryChildFragment.treeBaseDuration = treeBaseDuration;
15013 }
15014
15015 // Clone the fallback child fragment, too. These we'll continue
15016 // working on.
15017 var _fallbackChildFragment = _primaryChildFragment.sibling = createWorkInProgress(currentFallbackChildFragment, _nextFallbackChildren, currentFallbackChildFragment.expirationTime);
15018 child = _primaryChildFragment;
15019 _primaryChildFragment.childExpirationTime = NoWork;
15020 // Skip the primary children, and continue working on the
15021 // fallback children.
15022 next = _fallbackChildFragment;
15023 child.return = next.return = workInProgress;
15024 } else {
15025 // No longer suspended. Switch back to showing the primary children,
15026 // and remove the intermediate fragment fiber.
15027 var _nextPrimaryChildren = nextProps.children;
15028 var currentPrimaryChild = currentPrimaryChildFragment.child;
15029 var primaryChild = reconcileChildFibers(workInProgress, currentPrimaryChild, _nextPrimaryChildren, renderExpirationTime);
15030
15031 // If this render doesn't suspend, we need to delete the fallback
15032 // children. Wait until the complete phase, after we've confirmed the
15033 // fallback is no longer needed.
15034 // TODO: Would it be better to store the fallback fragment on
15035 // the stateNode?
15036
15037 // Continue rendering the children, like we normally do.
15038 child = next = primaryChild;
15039 }
15040 } else {
15041 // The current tree has not already timed out. That means the primary
15042 // children are not wrapped in a fragment fiber.
15043 var _currentPrimaryChild = current$$1.child;
15044 if (nextDidTimeout) {
15045 // Timed out. Wrap the children in a fragment fiber to keep them
15046 // separate from the fallback children.
15047 var _nextFallbackChildren2 = nextProps.fallback;
15048 var _primaryChildFragment2 = createFiberFromFragment(
15049 // It shouldn't matter what the pending props are because we aren't
15050 // going to render this fragment.
15051 null, mode, NoWork, null);
15052 _primaryChildFragment2.child = _currentPrimaryChild;
15053
15054 // Even though we're creating a new fiber, there are no new children,
15055 // because we're reusing an already mounted tree. So we don't need to
15056 // schedule a placement.
15057 // primaryChildFragment.effectTag |= Placement;
15058
15059 if ((workInProgress.mode & ConcurrentMode) === NoContext) {
15060 // Outside of concurrent mode, we commit the effects from the
15061 var _progressedState2 = workInProgress.memoizedState;
15062 var _progressedPrimaryChild2 = _progressedState2 !== null ? workInProgress.child.child : workInProgress.child;
15063 _primaryChildFragment2.child = _progressedPrimaryChild2;
15064 }
15065
15066 // Because primaryChildFragment is a new fiber that we're inserting as the
15067 // parent of a new tree, we need to set its treeBaseDuration.
15068 if (enableProfilerTimer && workInProgress.mode & ProfileMode) {
15069 // treeBaseDuration is the sum of all the child tree base durations.
15070 var _treeBaseDuration = 0;
15071 var _hiddenChild = _primaryChildFragment2.child;
15072 while (_hiddenChild !== null) {
15073 _treeBaseDuration += _hiddenChild.treeBaseDuration;
15074 _hiddenChild = _hiddenChild.sibling;
15075 }
15076 _primaryChildFragment2.treeBaseDuration = _treeBaseDuration;
15077 }
15078
15079 // Create a fragment from the fallback children, too.
15080 var _fallbackChildFragment2 = _primaryChildFragment2.sibling = createFiberFromFragment(_nextFallbackChildren2, mode, renderExpirationTime, null);
15081 _fallbackChildFragment2.effectTag |= Placement;
15082 child = _primaryChildFragment2;
15083 _primaryChildFragment2.childExpirationTime = NoWork;
15084 // Skip the primary children, and continue working on the
15085 // fallback children.
15086 next = _fallbackChildFragment2;
15087 child.return = next.return = workInProgress;
15088 } else {
15089 // Still haven't timed out. Continue rendering the children, like we
15090 // normally do.
15091 var _nextPrimaryChildren2 = nextProps.children;
15092 next = child = reconcileChildFibers(workInProgress, _currentPrimaryChild, _nextPrimaryChildren2, renderExpirationTime);
15093 }
15094 }
15095 workInProgress.stateNode = current$$1.stateNode;
15096 }
15097
15098 workInProgress.memoizedState = nextState;
15099 workInProgress.child = child;
15100 return next;
15101}
15102
15103function updatePortalComponent(current$$1, workInProgress, renderExpirationTime) {
15104 pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);
15105 var nextChildren = workInProgress.pendingProps;
15106 if (current$$1 === null) {
15107 // Portals are special because we don't append the children during mount
15108 // but at commit. Therefore we need to track insertions which the normal
15109 // flow doesn't do during mount. This doesn't happen at the root because
15110 // the root always starts with a "current" with a null child.
15111 // TODO: Consider unifying this with how the root works.
15112 workInProgress.child = reconcileChildFibers(workInProgress, null, nextChildren, renderExpirationTime);
15113 } else {
15114 reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime);
15115 }
15116 return workInProgress.child;
15117}
15118
15119function updateContextProvider(current$$1, workInProgress, renderExpirationTime) {
15120 var providerType = workInProgress.type;
15121 var context = providerType._context;
15122
15123 var newProps = workInProgress.pendingProps;
15124 var oldProps = workInProgress.memoizedProps;
15125
15126 var newValue = newProps.value;
15127
15128 {
15129 var providerPropTypes = workInProgress.type.propTypes;
15130
15131 if (providerPropTypes) {
15132 checkPropTypes(providerPropTypes, newProps, 'prop', 'Context.Provider', getCurrentFiberStackInDev);
15133 }
15134 }
15135
15136 pushProvider(workInProgress, newValue);
15137
15138 if (oldProps !== null) {
15139 var oldValue = oldProps.value;
15140 var changedBits = calculateChangedBits(context, newValue, oldValue);
15141 if (changedBits === 0) {
15142 // No change. Bailout early if children are the same.
15143 if (oldProps.children === newProps.children && !hasContextChanged()) {
15144 return bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime);
15145 }
15146 } else {
15147 // The context value changed. Search for matching consumers and schedule
15148 // them to update.
15149 propagateContextChange(workInProgress, context, changedBits, renderExpirationTime);
15150 }
15151 }
15152
15153 var newChildren = newProps.children;
15154 reconcileChildren(current$$1, workInProgress, newChildren, renderExpirationTime);
15155 return workInProgress.child;
15156}
15157
15158var hasWarnedAboutUsingContextAsConsumer = false;
15159
15160function updateContextConsumer(current$$1, workInProgress, renderExpirationTime) {
15161 var context = workInProgress.type;
15162 // The logic below for Context differs depending on PROD or DEV mode. In
15163 // DEV mode, we create a separate object for Context.Consumer that acts
15164 // like a proxy to Context. This proxy object adds unnecessary code in PROD
15165 // so we use the old behaviour (Context.Consumer references Context) to
15166 // reduce size and overhead. The separate object references context via
15167 // a property called "_context", which also gives us the ability to check
15168 // in DEV mode if this property exists or not and warn if it does not.
15169 {
15170 if (context._context === undefined) {
15171 // This may be because it's a Context (rather than a Consumer).
15172 // Or it may be because it's older React where they're the same thing.
15173 // We only want to warn if we're sure it's a new React.
15174 if (context !== context.Consumer) {
15175 if (!hasWarnedAboutUsingContextAsConsumer) {
15176 hasWarnedAboutUsingContextAsConsumer = true;
15177 warning$1(false, 'Rendering <Context> directly is not supported and will be removed in ' + 'a future major release. Did you mean to render <Context.Consumer> instead?');
15178 }
15179 }
15180 } else {
15181 context = context._context;
15182 }
15183 }
15184 var newProps = workInProgress.pendingProps;
15185 var render = newProps.children;
15186
15187 {
15188 !(typeof render === 'function') ? warningWithoutStack$1(false, 'A context consumer was rendered with multiple children, or a child ' + "that isn't a function. A context consumer expects a single child " + 'that is a function. If you did pass a function, make sure there ' + 'is no trailing or leading whitespace around it.') : void 0;
15189 }
15190
15191 prepareToReadContext(workInProgress, renderExpirationTime);
15192 var newValue = readContext(context, newProps.unstable_observedBits);
15193 var newChildren = void 0;
15194 {
15195 ReactCurrentOwner$3.current = workInProgress;
15196 setCurrentPhase('render');
15197 newChildren = render(newValue);
15198 setCurrentPhase(null);
15199 }
15200
15201 // React DevTools reads this flag.
15202 workInProgress.effectTag |= PerformedWork;
15203 reconcileChildren(current$$1, workInProgress, newChildren, renderExpirationTime);
15204 return workInProgress.child;
15205}
15206
15207function bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime) {
15208 cancelWorkTimer(workInProgress);
15209
15210 if (current$$1 !== null) {
15211 // Reuse previous context list
15212 workInProgress.firstContextDependency = current$$1.firstContextDependency;
15213 }
15214
15215 if (enableProfilerTimer) {
15216 // Don't update "base" render times for bailouts.
15217 stopProfilerTimerIfRunning(workInProgress);
15218 }
15219
15220 // Check if the children have any pending work.
15221 var childExpirationTime = workInProgress.childExpirationTime;
15222 if (childExpirationTime < renderExpirationTime) {
15223 // The children don't have any work either. We can skip them.
15224 // TODO: Once we add back resuming, we should check if the children are
15225 // a work-in-progress set. If so, we need to transfer their effects.
15226 return null;
15227 } else {
15228 // This fiber doesn't have work, but its subtree does. Clone the child
15229 // fibers and continue.
15230 cloneChildFibers(current$$1, workInProgress);
15231 return workInProgress.child;
15232 }
15233}
15234
15235function beginWork(current$$1, workInProgress, renderExpirationTime) {
15236 var updateExpirationTime = workInProgress.expirationTime;
15237
15238 if (current$$1 !== null) {
15239 var oldProps = current$$1.memoizedProps;
15240 var newProps = workInProgress.pendingProps;
15241 if (oldProps === newProps && !hasContextChanged() && updateExpirationTime < renderExpirationTime) {
15242 // This fiber does not have any pending work. Bailout without entering
15243 // the begin phase. There's still some bookkeeping we that needs to be done
15244 // in this optimized path, mostly pushing stuff onto the stack.
15245 switch (workInProgress.tag) {
15246 case HostRoot:
15247 pushHostRootContext(workInProgress);
15248 resetHydrationState();
15249 break;
15250 case HostComponent:
15251 pushHostContext(workInProgress);
15252 break;
15253 case ClassComponent:
15254 {
15255 var Component = workInProgress.type;
15256 if (isContextProvider(Component)) {
15257 pushContextProvider(workInProgress);
15258 }
15259 break;
15260 }
15261 case HostPortal:
15262 pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);
15263 break;
15264 case ContextProvider:
15265 {
15266 var newValue = workInProgress.memoizedProps.value;
15267 pushProvider(workInProgress, newValue);
15268 break;
15269 }
15270 case Profiler:
15271 if (enableProfilerTimer) {
15272 workInProgress.effectTag |= Update;
15273 }
15274 break;
15275 case SuspenseComponent:
15276 {
15277 var state = workInProgress.memoizedState;
15278 var didTimeout = state !== null;
15279 if (didTimeout) {
15280 // If this boundary is currently timed out, we need to decide
15281 // whether to retry the primary children, or to skip over it and
15282 // go straight to the fallback. Check the priority of the primary
15283 var primaryChildFragment = workInProgress.child;
15284 var primaryChildExpirationTime = primaryChildFragment.childExpirationTime;
15285 if (primaryChildExpirationTime !== NoWork && primaryChildExpirationTime >= renderExpirationTime) {
15286 // The primary children have pending work. Use the normal path
15287 // to attempt to render the primary children again.
15288 return updateSuspenseComponent(current$$1, workInProgress, renderExpirationTime);
15289 } else {
15290 // The primary children do not have pending work with sufficient
15291 // priority. Bailout.
15292 var child = bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime);
15293 if (child !== null) {
15294 // The fallback children have pending work. Skip over the
15295 // primary children and work on the fallback.
15296 return child.sibling;
15297 } else {
15298 return null;
15299 }
15300 }
15301 }
15302 break;
15303 }
15304 }
15305 return bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime);
15306 }
15307 }
15308
15309 // Before entering the begin phase, clear the expiration time.
15310 workInProgress.expirationTime = NoWork;
15311
15312 switch (workInProgress.tag) {
15313 case IndeterminateComponent:
15314 {
15315 var elementType = workInProgress.elementType;
15316 return mountIndeterminateComponent(current$$1, workInProgress, elementType, renderExpirationTime);
15317 }
15318 case LazyComponent:
15319 {
15320 var _elementType = workInProgress.elementType;
15321 return mountLazyComponent(current$$1, workInProgress, _elementType, updateExpirationTime, renderExpirationTime);
15322 }
15323 case FunctionComponent:
15324 {
15325 var _Component = workInProgress.type;
15326 var unresolvedProps = workInProgress.pendingProps;
15327 var resolvedProps = workInProgress.elementType === _Component ? unresolvedProps : resolveDefaultProps(_Component, unresolvedProps);
15328 return updateFunctionComponent(current$$1, workInProgress, _Component, resolvedProps, renderExpirationTime);
15329 }
15330 case ClassComponent:
15331 {
15332 var _Component2 = workInProgress.type;
15333 var _unresolvedProps = workInProgress.pendingProps;
15334 var _resolvedProps = workInProgress.elementType === _Component2 ? _unresolvedProps : resolveDefaultProps(_Component2, _unresolvedProps);
15335 return updateClassComponent(current$$1, workInProgress, _Component2, _resolvedProps, renderExpirationTime);
15336 }
15337 case HostRoot:
15338 return updateHostRoot(current$$1, workInProgress, renderExpirationTime);
15339 case HostComponent:
15340 return updateHostComponent(current$$1, workInProgress, renderExpirationTime);
15341 case HostText:
15342 return updateHostText(current$$1, workInProgress);
15343 case SuspenseComponent:
15344 return updateSuspenseComponent(current$$1, workInProgress, renderExpirationTime);
15345 case HostPortal:
15346 return updatePortalComponent(current$$1, workInProgress, renderExpirationTime);
15347 case ForwardRef:
15348 {
15349 var type = workInProgress.type;
15350 var _unresolvedProps2 = workInProgress.pendingProps;
15351 var _resolvedProps2 = workInProgress.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
15352 return updateForwardRef(current$$1, workInProgress, type, _resolvedProps2, renderExpirationTime);
15353 }
15354 case Fragment:
15355 return updateFragment(current$$1, workInProgress, renderExpirationTime);
15356 case Mode:
15357 return updateMode(current$$1, workInProgress, renderExpirationTime);
15358 case Profiler:
15359 return updateProfiler(current$$1, workInProgress, renderExpirationTime);
15360 case ContextProvider:
15361 return updateContextProvider(current$$1, workInProgress, renderExpirationTime);
15362 case ContextConsumer:
15363 return updateContextConsumer(current$$1, workInProgress, renderExpirationTime);
15364 case MemoComponent:
15365 {
15366 var _type2 = workInProgress.type;
15367 var _unresolvedProps3 = workInProgress.pendingProps;
15368 // Resolve outer props first, then resolve inner props.
15369 var _resolvedProps3 = resolveDefaultProps(_type2, _unresolvedProps3);
15370 {
15371 if (workInProgress.type !== workInProgress.elementType) {
15372 var outerPropTypes = _type2.propTypes;
15373 if (outerPropTypes) {
15374 checkPropTypes(outerPropTypes, _resolvedProps3, // Resolved for outer only
15375 'prop', getComponentName(_type2), getCurrentFiberStackInDev);
15376 }
15377 }
15378 }
15379 _resolvedProps3 = resolveDefaultProps(_type2.type, _resolvedProps3);
15380 return updateMemoComponent(current$$1, workInProgress, _type2, _resolvedProps3, updateExpirationTime, renderExpirationTime);
15381 }
15382 case SimpleMemoComponent:
15383 {
15384 return updateSimpleMemoComponent(current$$1, workInProgress, workInProgress.type, workInProgress.pendingProps, updateExpirationTime, renderExpirationTime);
15385 }
15386 case IncompleteClassComponent:
15387 {
15388 var _Component3 = workInProgress.type;
15389 var _unresolvedProps4 = workInProgress.pendingProps;
15390 var _resolvedProps4 = workInProgress.elementType === _Component3 ? _unresolvedProps4 : resolveDefaultProps(_Component3, _unresolvedProps4);
15391 return mountIncompleteClassComponent(current$$1, workInProgress, _Component3, _resolvedProps4, renderExpirationTime);
15392 }
15393 default:
15394 invariant(false, 'Unknown unit of work tag. This error is likely caused by a bug in React. Please file an issue.');
15395 }
15396}
15397
15398function markUpdate(workInProgress) {
15399 // Tag the fiber with an update effect. This turns a Placement into
15400 // a PlacementAndUpdate.
15401 workInProgress.effectTag |= Update;
15402}
15403
15404function markRef$1(workInProgress) {
15405 workInProgress.effectTag |= Ref;
15406}
15407
15408var appendAllChildren = void 0;
15409var updateHostContainer = void 0;
15410var updateHostComponent$1 = void 0;
15411var updateHostText$1 = void 0;
15412if (supportsMutation) {
15413 // Mutation mode
15414
15415 appendAllChildren = function (parent, workInProgress, needsVisibilityToggle, isHidden) {
15416 // We only have the top Fiber that was created but we need recurse down its
15417 // children to find all the terminal nodes.
15418 var node = workInProgress.child;
15419 while (node !== null) {
15420 if (node.tag === HostComponent || node.tag === HostText) {
15421 appendInitialChild(parent, node.stateNode);
15422 } else if (node.tag === HostPortal) {
15423 // If we have a portal child, then we don't want to traverse
15424 // down its children. Instead, we'll get insertions from each child in
15425 // the portal directly.
15426 } else if (node.child !== null) {
15427 node.child.return = node;
15428 node = node.child;
15429 continue;
15430 }
15431 if (node === workInProgress) {
15432 return;
15433 }
15434 while (node.sibling === null) {
15435 if (node.return === null || node.return === workInProgress) {
15436 return;
15437 }
15438 node = node.return;
15439 }
15440 node.sibling.return = node.return;
15441 node = node.sibling;
15442 }
15443 };
15444
15445 updateHostContainer = function (workInProgress) {
15446 // Noop
15447 };
15448 updateHostComponent$1 = function (current, workInProgress, type, newProps, rootContainerInstance) {
15449 // If we have an alternate, that means this is an update and we need to
15450 // schedule a side-effect to do the updates.
15451 var oldProps = current.memoizedProps;
15452 if (oldProps === newProps) {
15453 // In mutation mode, this is sufficient for a bailout because
15454 // we won't touch this node even if children changed.
15455 return;
15456 }
15457
15458 // If we get updated because one of our children updated, we don't
15459 // have newProps so we'll have to reuse them.
15460 // TODO: Split the update API as separate for the props vs. children.
15461 // Even better would be if children weren't special cased at all tho.
15462 var instance = workInProgress.stateNode;
15463 var currentHostContext = getHostContext();
15464 // TODO: Experiencing an error where oldProps is null. Suggests a host
15465 // component is hitting the resume path. Figure out why. Possibly
15466 // related to `hidden`.
15467 var updatePayload = prepareUpdate(instance, type, oldProps, newProps, rootContainerInstance, currentHostContext);
15468 // TODO: Type this specific to this type of component.
15469 workInProgress.updateQueue = updatePayload;
15470 // If the update payload indicates that there is a change or if there
15471 // is a new ref we mark this as an update. All the work is done in commitWork.
15472 if (updatePayload) {
15473 markUpdate(workInProgress);
15474 }
15475 };
15476 updateHostText$1 = function (current, workInProgress, oldText, newText) {
15477 // If the text differs, mark it as an update. All the work in done in commitWork.
15478 if (oldText !== newText) {
15479 markUpdate(workInProgress);
15480 }
15481 };
15482} else if (supportsPersistence) {
15483 // Persistent host tree mode
15484
15485 appendAllChildren = function (parent, workInProgress, needsVisibilityToggle, isHidden) {
15486 // We only have the top Fiber that was created but we need recurse down its
15487 // children to find all the terminal nodes.
15488 var node = workInProgress.child;
15489 while (node !== null) {
15490 // eslint-disable-next-line no-labels
15491 branches: if (node.tag === HostComponent) {
15492 var instance = node.stateNode;
15493 if (needsVisibilityToggle) {
15494 var props = node.memoizedProps;
15495 var type = node.type;
15496 if (isHidden) {
15497 // This child is inside a timed out tree. Hide it.
15498 instance = cloneHiddenInstance(instance, type, props, node);
15499 } else {
15500 // This child was previously inside a timed out tree. If it was not
15501 // updated during this render, it may need to be unhidden. Clone
15502 // again to be sure.
15503 instance = cloneUnhiddenInstance(instance, type, props, node);
15504 }
15505 node.stateNode = instance;
15506 }
15507 appendInitialChild(parent, instance);
15508 } else if (node.tag === HostText) {
15509 var _instance = node.stateNode;
15510 if (needsVisibilityToggle) {
15511 var text = node.memoizedProps;
15512 var rootContainerInstance = getRootHostContainer();
15513 var currentHostContext = getHostContext();
15514 if (isHidden) {
15515 _instance = createHiddenTextInstance(text, rootContainerInstance, currentHostContext, workInProgress);
15516 } else {
15517 _instance = createTextInstance(text, rootContainerInstance, currentHostContext, workInProgress);
15518 }
15519 node.stateNode = _instance;
15520 }
15521 appendInitialChild(parent, _instance);
15522 } else if (node.tag === HostPortal) {
15523 // If we have a portal child, then we don't want to traverse
15524 // down its children. Instead, we'll get insertions from each child in
15525 // the portal directly.
15526 } else if (node.tag === SuspenseComponent) {
15527 var current = node.alternate;
15528 if (current !== null) {
15529 var oldState = current.memoizedState;
15530 var newState = node.memoizedState;
15531 var oldIsHidden = oldState !== null;
15532 var newIsHidden = newState !== null;
15533 if (oldIsHidden !== newIsHidden) {
15534 // The placeholder either just timed out or switched back to the normal
15535 // children after having previously timed out. Toggle the visibility of
15536 // the direct host children.
15537 var primaryChildParent = newIsHidden ? node.child : node;
15538 if (primaryChildParent !== null) {
15539 appendAllChildren(parent, primaryChildParent, true, newIsHidden);
15540 }
15541 // eslint-disable-next-line no-labels
15542 break branches;
15543 }
15544 }
15545 if (node.child !== null) {
15546 // Continue traversing like normal
15547 node.child.return = node;
15548 node = node.child;
15549 continue;
15550 }
15551 } else if (node.child !== null) {
15552 node.child.return = node;
15553 node = node.child;
15554 continue;
15555 }
15556 // $FlowFixMe This is correct but Flow is confused by the labeled break.
15557 node = node;
15558 if (node === workInProgress) {
15559 return;
15560 }
15561 while (node.sibling === null) {
15562 if (node.return === null || node.return === workInProgress) {
15563 return;
15564 }
15565 node = node.return;
15566 }
15567 node.sibling.return = node.return;
15568 node = node.sibling;
15569 }
15570 };
15571
15572 // An unfortunate fork of appendAllChildren because we have two different parent types.
15573 var appendAllChildrenToContainer = function (containerChildSet, workInProgress, needsVisibilityToggle, isHidden) {
15574 // We only have the top Fiber that was created but we need recurse down its
15575 // children to find all the terminal nodes.
15576 var node = workInProgress.child;
15577 while (node !== null) {
15578 // eslint-disable-next-line no-labels
15579 branches: if (node.tag === HostComponent) {
15580 var instance = node.stateNode;
15581 if (needsVisibilityToggle) {
15582 var props = node.memoizedProps;
15583 var type = node.type;
15584 if (isHidden) {
15585 // This child is inside a timed out tree. Hide it.
15586 instance = cloneHiddenInstance(instance, type, props, node);
15587 } else {
15588 // This child was previously inside a timed out tree. If it was not
15589 // updated during this render, it may need to be unhidden. Clone
15590 // again to be sure.
15591 instance = cloneUnhiddenInstance(instance, type, props, node);
15592 }
15593 node.stateNode = instance;
15594 }
15595 appendChildToContainerChildSet(containerChildSet, instance);
15596 } else if (node.tag === HostText) {
15597 var _instance2 = node.stateNode;
15598 if (needsVisibilityToggle) {
15599 var text = node.memoizedProps;
15600 var rootContainerInstance = getRootHostContainer();
15601 var currentHostContext = getHostContext();
15602 if (isHidden) {
15603 _instance2 = createHiddenTextInstance(text, rootContainerInstance, currentHostContext, workInProgress);
15604 } else {
15605 _instance2 = createTextInstance(text, rootContainerInstance, currentHostContext, workInProgress);
15606 }
15607 node.stateNode = _instance2;
15608 }
15609 appendChildToContainerChildSet(containerChildSet, _instance2);
15610 } else if (node.tag === HostPortal) {
15611 // If we have a portal child, then we don't want to traverse
15612 // down its children. Instead, we'll get insertions from each child in
15613 // the portal directly.
15614 } else if (node.tag === SuspenseComponent) {
15615 var current = node.alternate;
15616 if (current !== null) {
15617 var oldState = current.memoizedState;
15618 var newState = node.memoizedState;
15619 var oldIsHidden = oldState !== null;
15620 var newIsHidden = newState !== null;
15621 if (oldIsHidden !== newIsHidden) {
15622 // The placeholder either just timed out or switched back to the normal
15623 // children after having previously timed out. Toggle the visibility of
15624 // the direct host children.
15625 var primaryChildParent = newIsHidden ? node.child : node;
15626 if (primaryChildParent !== null) {
15627 appendAllChildrenToContainer(containerChildSet, primaryChildParent, true, newIsHidden);
15628 }
15629 // eslint-disable-next-line no-labels
15630 break branches;
15631 }
15632 }
15633 if (node.child !== null) {
15634 // Continue traversing like normal
15635 node.child.return = node;
15636 node = node.child;
15637 continue;
15638 }
15639 } else if (node.child !== null) {
15640 node.child.return = node;
15641 node = node.child;
15642 continue;
15643 }
15644 // $FlowFixMe This is correct but Flow is confused by the labeled break.
15645 node = node;
15646 if (node === workInProgress) {
15647 return;
15648 }
15649 while (node.sibling === null) {
15650 if (node.return === null || node.return === workInProgress) {
15651 return;
15652 }
15653 node = node.return;
15654 }
15655 node.sibling.return = node.return;
15656 node = node.sibling;
15657 }
15658 };
15659 updateHostContainer = function (workInProgress) {
15660 var portalOrRoot = workInProgress.stateNode;
15661 var childrenUnchanged = workInProgress.firstEffect === null;
15662 if (childrenUnchanged) {
15663 // No changes, just reuse the existing instance.
15664 } else {
15665 var container = portalOrRoot.containerInfo;
15666 var newChildSet = createContainerChildSet(container);
15667 // If children might have changed, we have to add them all to the set.
15668 appendAllChildrenToContainer(newChildSet, workInProgress, false, false);
15669 portalOrRoot.pendingChildren = newChildSet;
15670 // Schedule an update on the container to swap out the container.
15671 markUpdate(workInProgress);
15672 finalizeContainerChildren(container, newChildSet);
15673 }
15674 };
15675 updateHostComponent$1 = function (current, workInProgress, type, newProps, rootContainerInstance) {
15676 var currentInstance = current.stateNode;
15677 var oldProps = current.memoizedProps;
15678 // If there are no effects associated with this node, then none of our children had any updates.
15679 // This guarantees that we can reuse all of them.
15680 var childrenUnchanged = workInProgress.firstEffect === null;
15681 if (childrenUnchanged && oldProps === newProps) {
15682 // No changes, just reuse the existing instance.
15683 // Note that this might release a previous clone.
15684 workInProgress.stateNode = currentInstance;
15685 return;
15686 }
15687 var recyclableInstance = workInProgress.stateNode;
15688 var currentHostContext = getHostContext();
15689 var updatePayload = null;
15690 if (oldProps !== newProps) {
15691 updatePayload = prepareUpdate(recyclableInstance, type, oldProps, newProps, rootContainerInstance, currentHostContext);
15692 }
15693 if (childrenUnchanged && updatePayload === null) {
15694 // No changes, just reuse the existing instance.
15695 // Note that this might release a previous clone.
15696 workInProgress.stateNode = currentInstance;
15697 return;
15698 }
15699 var newInstance = cloneInstance(currentInstance, updatePayload, type, oldProps, newProps, workInProgress, childrenUnchanged, recyclableInstance);
15700 if (finalizeInitialChildren(newInstance, type, newProps, rootContainerInstance, currentHostContext)) {
15701 markUpdate(workInProgress);
15702 }
15703 workInProgress.stateNode = newInstance;
15704 if (childrenUnchanged) {
15705 // If there are no other effects in this tree, we need to flag this node as having one.
15706 // Even though we're not going to use it for anything.
15707 // Otherwise parents won't know that there are new children to propagate upwards.
15708 markUpdate(workInProgress);
15709 } else {
15710 // If children might have changed, we have to add them all to the set.
15711 appendAllChildren(newInstance, workInProgress, false, false);
15712 }
15713 };
15714 updateHostText$1 = function (current, workInProgress, oldText, newText) {
15715 if (oldText !== newText) {
15716 // If the text content differs, we'll create a new text instance for it.
15717 var rootContainerInstance = getRootHostContainer();
15718 var currentHostContext = getHostContext();
15719 workInProgress.stateNode = createTextInstance(newText, rootContainerInstance, currentHostContext, workInProgress);
15720 // We'll have to mark it as having an effect, even though we won't use the effect for anything.
15721 // This lets the parents know that at least one of their children has changed.
15722 markUpdate(workInProgress);
15723 }
15724 };
15725} else {
15726 // No host operations
15727 updateHostContainer = function (workInProgress) {
15728 // Noop
15729 };
15730 updateHostComponent$1 = function (current, workInProgress, type, newProps, rootContainerInstance) {
15731 // Noop
15732 };
15733 updateHostText$1 = function (current, workInProgress, oldText, newText) {
15734 // Noop
15735 };
15736}
15737
15738function completeWork(current, workInProgress, renderExpirationTime) {
15739 var newProps = workInProgress.pendingProps;
15740
15741 switch (workInProgress.tag) {
15742 case IndeterminateComponent:
15743 break;
15744 case LazyComponent:
15745 break;
15746 case SimpleMemoComponent:
15747 case FunctionComponent:
15748 break;
15749 case ClassComponent:
15750 {
15751 var Component = workInProgress.type;
15752 if (isContextProvider(Component)) {
15753 popContext(workInProgress);
15754 }
15755 break;
15756 }
15757 case HostRoot:
15758 {
15759 popHostContainer(workInProgress);
15760 popTopLevelContextObject(workInProgress);
15761 var fiberRoot = workInProgress.stateNode;
15762 if (fiberRoot.pendingContext) {
15763 fiberRoot.context = fiberRoot.pendingContext;
15764 fiberRoot.pendingContext = null;
15765 }
15766 if (current === null || current.child === null) {
15767 // If we hydrated, pop so that we can delete any remaining children
15768 // that weren't hydrated.
15769 popHydrationState(workInProgress);
15770 // This resets the hacky state to fix isMounted before committing.
15771 // TODO: Delete this when we delete isMounted and findDOMNode.
15772 workInProgress.effectTag &= ~Placement;
15773 }
15774 updateHostContainer(workInProgress);
15775 break;
15776 }
15777 case HostComponent:
15778 {
15779 popHostContext(workInProgress);
15780 var rootContainerInstance = getRootHostContainer();
15781 var type = workInProgress.type;
15782 if (current !== null && workInProgress.stateNode != null) {
15783 updateHostComponent$1(current, workInProgress, type, newProps, rootContainerInstance);
15784
15785 if (current.ref !== workInProgress.ref) {
15786 markRef$1(workInProgress);
15787 }
15788 } else {
15789 if (!newProps) {
15790 !(workInProgress.stateNode !== null) ? invariant(false, 'We must have new props for new mounts. This error is likely caused by a bug in React. Please file an issue.') : void 0;
15791 // This can happen when we abort work.
15792 break;
15793 }
15794
15795 var currentHostContext = getHostContext();
15796 // TODO: Move createInstance to beginWork and keep it on a context
15797 // "stack" as the parent. Then append children as we go in beginWork
15798 // or completeWork depending on we want to add then top->down or
15799 // bottom->up. Top->down is faster in IE11.
15800 var wasHydrated = popHydrationState(workInProgress);
15801 if (wasHydrated) {
15802 // TODO: Move this and createInstance step into the beginPhase
15803 // to consolidate.
15804 if (prepareToHydrateHostInstance(workInProgress, rootContainerInstance, currentHostContext)) {
15805 // If changes to the hydrated node needs to be applied at the
15806 // commit-phase we mark this as such.
15807 markUpdate(workInProgress);
15808 }
15809 } else {
15810 var instance = createInstance(type, newProps, rootContainerInstance, currentHostContext, workInProgress);
15811
15812 appendAllChildren(instance, workInProgress, false, false);
15813
15814 // Certain renderers require commit-time effects for initial mount.
15815 // (eg DOM renderer supports auto-focus for certain elements).
15816 // Make sure such renderers get scheduled for later work.
15817 if (finalizeInitialChildren(instance, type, newProps, rootContainerInstance, currentHostContext)) {
15818 markUpdate(workInProgress);
15819 }
15820 workInProgress.stateNode = instance;
15821 }
15822
15823 if (workInProgress.ref !== null) {
15824 // If there is a ref on a host node we need to schedule a callback
15825 markRef$1(workInProgress);
15826 }
15827 }
15828 break;
15829 }
15830 case HostText:
15831 {
15832 var newText = newProps;
15833 if (current && workInProgress.stateNode != null) {
15834 var oldText = current.memoizedProps;
15835 // If we have an alternate, that means this is an update and we need
15836 // to schedule a side-effect to do the updates.
15837 updateHostText$1(current, workInProgress, oldText, newText);
15838 } else {
15839 if (typeof newText !== 'string') {
15840 !(workInProgress.stateNode !== null) ? invariant(false, 'We must have new props for new mounts. This error is likely caused by a bug in React. Please file an issue.') : void 0;
15841 // This can happen when we abort work.
15842 }
15843 var _rootContainerInstance = getRootHostContainer();
15844 var _currentHostContext = getHostContext();
15845 var _wasHydrated = popHydrationState(workInProgress);
15846 if (_wasHydrated) {
15847 if (prepareToHydrateHostTextInstance(workInProgress)) {
15848 markUpdate(workInProgress);
15849 }
15850 } else {
15851 workInProgress.stateNode = createTextInstance(newText, _rootContainerInstance, _currentHostContext, workInProgress);
15852 }
15853 }
15854 break;
15855 }
15856 case ForwardRef:
15857 break;
15858 case SuspenseComponent:
15859 {
15860 var nextState = workInProgress.memoizedState;
15861 if ((workInProgress.effectTag & DidCapture) !== NoEffect) {
15862 // Something suspended. Re-render with the fallback children.
15863 workInProgress.expirationTime = renderExpirationTime;
15864 // Do not reset the effect list.
15865 return workInProgress;
15866 }
15867
15868 var nextDidTimeout = nextState !== null;
15869 var prevDidTimeout = current !== null && current.memoizedState !== null;
15870
15871 if (current !== null && !nextDidTimeout && prevDidTimeout) {
15872 // We just switched from the fallback to the normal children. Delete
15873 // the fallback.
15874 // TODO: Would it be better to store the fallback fragment on
15875 var currentFallbackChild = current.child.sibling;
15876 if (currentFallbackChild !== null) {
15877 // Deletions go at the beginning of the return fiber's effect list
15878 var first = workInProgress.firstEffect;
15879 if (first !== null) {
15880 workInProgress.firstEffect = currentFallbackChild;
15881 currentFallbackChild.nextEffect = first;
15882 } else {
15883 workInProgress.firstEffect = workInProgress.lastEffect = currentFallbackChild;
15884 currentFallbackChild.nextEffect = null;
15885 }
15886 currentFallbackChild.effectTag = Deletion;
15887 }
15888 }
15889
15890 // The children either timed out after previously being visible, or
15891 // were restored after previously being hidden. Schedule an effect
15892 // to update their visiblity.
15893 if (
15894 //
15895 nextDidTimeout !== prevDidTimeout ||
15896 // Outside concurrent mode, the primary children commit in an
15897 // inconsistent state, even if they are hidden. So if they are hidden,
15898 // we need to schedule an effect to re-hide them, just in case.
15899 (workInProgress.effectTag & ConcurrentMode) === NoContext && nextDidTimeout) {
15900 workInProgress.effectTag |= Update;
15901 }
15902 break;
15903 }
15904 case Fragment:
15905 break;
15906 case Mode:
15907 break;
15908 case Profiler:
15909 break;
15910 case HostPortal:
15911 popHostContainer(workInProgress);
15912 updateHostContainer(workInProgress);
15913 break;
15914 case ContextProvider:
15915 // Pop provider fiber
15916 popProvider(workInProgress);
15917 break;
15918 case ContextConsumer:
15919 break;
15920 case MemoComponent:
15921 break;
15922 case IncompleteClassComponent:
15923 {
15924 // Same as class component case. I put it down here so that the tags are
15925 // sequential to ensure this switch is compiled to a jump table.
15926 var _Component = workInProgress.type;
15927 if (isContextProvider(_Component)) {
15928 popContext(workInProgress);
15929 }
15930 break;
15931 }
15932 default:
15933 invariant(false, 'Unknown unit of work tag. This error is likely caused by a bug in React. Please file an issue.');
15934 }
15935
15936 return null;
15937}
15938
15939function shouldCaptureSuspense(workInProgress) {
15940 // In order to capture, the Suspense component must have a fallback prop.
15941 if (workInProgress.memoizedProps.fallback === undefined) {
15942 return false;
15943 }
15944 // If it was the primary children that just suspended, capture and render the
15945 // fallback. Otherwise, don't capture and bubble to the next boundary.
15946 var nextState = workInProgress.memoizedState;
15947 return nextState === null;
15948}
15949
15950// This module is forked in different environments.
15951// By default, return `true` to log errors to the console.
15952// Forks can return `false` if this isn't desirable.
15953function showErrorDialog(capturedError) {
15954 return true;
15955}
15956
15957function logCapturedError(capturedError) {
15958 var logError = showErrorDialog(capturedError);
15959
15960 // Allow injected showErrorDialog() to prevent default console.error logging.
15961 // This enables renderers like ReactNative to better manage redbox behavior.
15962 if (logError === false) {
15963 return;
15964 }
15965
15966 var error = capturedError.error;
15967 {
15968 var componentName = capturedError.componentName,
15969 componentStack = capturedError.componentStack,
15970 errorBoundaryName = capturedError.errorBoundaryName,
15971 errorBoundaryFound = capturedError.errorBoundaryFound,
15972 willRetry = capturedError.willRetry;
15973
15974 // Browsers support silencing uncaught errors by calling
15975 // `preventDefault()` in window `error` handler.
15976 // We record this information as an expando on the error.
15977
15978 if (error != null && error._suppressLogging) {
15979 if (errorBoundaryFound && willRetry) {
15980 // The error is recoverable and was silenced.
15981 // Ignore it and don't print the stack addendum.
15982 // This is handy for testing error boundaries without noise.
15983 return;
15984 }
15985 // The error is fatal. Since the silencing might have
15986 // been accidental, we'll surface it anyway.
15987 // However, the browser would have silenced the original error
15988 // so we'll print it first, and then print the stack addendum.
15989 console.error(error);
15990 // For a more detailed description of this block, see:
15991 // https://github.com/facebook/react/pull/13384
15992 }
15993
15994 var componentNameMessage = componentName ? 'The above error occurred in the <' + componentName + '> component:' : 'The above error occurred in one of your React components:';
15995
15996 var errorBoundaryMessage = void 0;
15997 // errorBoundaryFound check is sufficient; errorBoundaryName check is to satisfy Flow.
15998 if (errorBoundaryFound && errorBoundaryName) {
15999 if (willRetry) {
16000 errorBoundaryMessage = 'React will try to recreate this component tree from scratch ' + ('using the error boundary you provided, ' + errorBoundaryName + '.');
16001 } else {
16002 errorBoundaryMessage = 'This error was initially handled by the error boundary ' + errorBoundaryName + '.\n' + 'Recreating the tree from scratch failed so React will unmount the tree.';
16003 }
16004 } else {
16005 errorBoundaryMessage = 'Consider adding an error boundary to your tree to customize error handling behavior.\n' + 'Visit https://fb.me/react-error-boundaries to learn more about error boundaries.';
16006 }
16007 var combinedMessage = '' + componentNameMessage + componentStack + '\n\n' + ('' + errorBoundaryMessage);
16008
16009 // In development, we provide our own message with just the component stack.
16010 // We don't include the original error message and JS stack because the browser
16011 // has already printed it. Even if the application swallows the error, it is still
16012 // displayed by the browser thanks to the DEV-only fake event trick in ReactErrorUtils.
16013 console.error(combinedMessage);
16014 }
16015}
16016
16017var didWarnAboutUndefinedSnapshotBeforeUpdate = null;
16018{
16019 didWarnAboutUndefinedSnapshotBeforeUpdate = new Set();
16020}
16021
16022var PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
16023
16024function logError(boundary, errorInfo) {
16025 var source = errorInfo.source;
16026 var stack = errorInfo.stack;
16027 if (stack === null && source !== null) {
16028 stack = getStackByFiberInDevAndProd(source);
16029 }
16030
16031 var capturedError = {
16032 componentName: source !== null ? getComponentName(source.type) : null,
16033 componentStack: stack !== null ? stack : '',
16034 error: errorInfo.value,
16035 errorBoundary: null,
16036 errorBoundaryName: null,
16037 errorBoundaryFound: false,
16038 willRetry: false
16039 };
16040
16041 if (boundary !== null && boundary.tag === ClassComponent) {
16042 capturedError.errorBoundary = boundary.stateNode;
16043 capturedError.errorBoundaryName = getComponentName(boundary.type);
16044 capturedError.errorBoundaryFound = true;
16045 capturedError.willRetry = true;
16046 }
16047
16048 try {
16049 logCapturedError(capturedError);
16050 } catch (e) {
16051 // This method must not throw, or React internal state will get messed up.
16052 // If console.error is overridden, or logCapturedError() shows a dialog that throws,
16053 // we want to report this error outside of the normal stack as a last resort.
16054 // https://github.com/facebook/react/issues/13188
16055 setTimeout(function () {
16056 throw e;
16057 });
16058 }
16059}
16060
16061var callComponentWillUnmountWithTimer = function (current$$1, instance) {
16062 startPhaseTimer(current$$1, 'componentWillUnmount');
16063 instance.props = current$$1.memoizedProps;
16064 instance.state = current$$1.memoizedState;
16065 instance.componentWillUnmount();
16066 stopPhaseTimer();
16067};
16068
16069// Capture errors so they don't interrupt unmounting.
16070function safelyCallComponentWillUnmount(current$$1, instance) {
16071 {
16072 invokeGuardedCallback(null, callComponentWillUnmountWithTimer, null, current$$1, instance);
16073 if (hasCaughtError()) {
16074 var unmountError = clearCaughtError();
16075 captureCommitPhaseError(current$$1, unmountError);
16076 }
16077 }
16078}
16079
16080function safelyDetachRef(current$$1) {
16081 var ref = current$$1.ref;
16082 if (ref !== null) {
16083 if (typeof ref === 'function') {
16084 {
16085 invokeGuardedCallback(null, ref, null, null);
16086 if (hasCaughtError()) {
16087 var refError = clearCaughtError();
16088 captureCommitPhaseError(current$$1, refError);
16089 }
16090 }
16091 } else {
16092 ref.current = null;
16093 }
16094 }
16095}
16096
16097function safelyCallDestroy(current$$1, destroy) {
16098 {
16099 invokeGuardedCallback(null, destroy, null);
16100 if (hasCaughtError()) {
16101 var error = clearCaughtError();
16102 captureCommitPhaseError(current$$1, error);
16103 }
16104 }
16105}
16106
16107function commitBeforeMutationLifeCycles(current$$1, finishedWork) {
16108 switch (finishedWork.tag) {
16109 case FunctionComponent:
16110 case ForwardRef:
16111 case SimpleMemoComponent:
16112 {
16113 commitHookEffectList(UnmountSnapshot, NoEffect$1, finishedWork);
16114 return;
16115 }
16116 case ClassComponent:
16117 {
16118 if (finishedWork.effectTag & Snapshot) {
16119 if (current$$1 !== null) {
16120 var prevProps = current$$1.memoizedProps;
16121 var prevState = current$$1.memoizedState;
16122 startPhaseTimer(finishedWork, 'getSnapshotBeforeUpdate');
16123 var instance = finishedWork.stateNode;
16124 // We could update instance props and state here,
16125 // but instead we rely on them being set during last render.
16126 // TODO: revisit this when we implement resuming.
16127 {
16128 if (finishedWork.type === finishedWork.elementType && !didWarnAboutReassigningProps) {
16129 !(instance.props === finishedWork.memoizedProps) ? warning$1(false, 'Expected %s props to match memoized props before ' + 'getSnapshotBeforeUpdate. ' + 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.props`. ' + 'Please file an issue.', getComponentName(finishedWork.type) || 'instance') : void 0;
16130 !(instance.state === finishedWork.memoizedState) ? warning$1(false, 'Expected %s state to match memoized state before ' + 'getSnapshotBeforeUpdate. ' + 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.props`. ' + 'Please file an issue.', getComponentName(finishedWork.type) || 'instance') : void 0;
16131 }
16132 }
16133 var snapshot = instance.getSnapshotBeforeUpdate(finishedWork.elementType === finishedWork.type ? prevProps : resolveDefaultProps(finishedWork.type, prevProps), prevState);
16134 {
16135 var didWarnSet = didWarnAboutUndefinedSnapshotBeforeUpdate;
16136 if (snapshot === undefined && !didWarnSet.has(finishedWork.type)) {
16137 didWarnSet.add(finishedWork.type);
16138 warningWithoutStack$1(false, '%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' + 'must be returned. You have returned undefined.', getComponentName(finishedWork.type));
16139 }
16140 }
16141 instance.__reactInternalSnapshotBeforeUpdate = snapshot;
16142 stopPhaseTimer();
16143 }
16144 }
16145 return;
16146 }
16147 case HostRoot:
16148 case HostComponent:
16149 case HostText:
16150 case HostPortal:
16151 case IncompleteClassComponent:
16152 // Nothing to do for these component types
16153 return;
16154 default:
16155 {
16156 invariant(false, 'This unit of work tag should not have side-effects. This error is likely caused by a bug in React. Please file an issue.');
16157 }
16158 }
16159}
16160
16161function commitHookEffectList(unmountTag, mountTag, finishedWork) {
16162 if (!enableHooks) {
16163 return;
16164 }
16165 var updateQueue = finishedWork.updateQueue;
16166 var lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
16167 if (lastEffect !== null) {
16168 var firstEffect = lastEffect.next;
16169 var effect = firstEffect;
16170 do {
16171 if ((effect.tag & unmountTag) !== NoEffect$1) {
16172 // Unmount
16173 var destroy = effect.destroy;
16174 effect.destroy = null;
16175 if (destroy !== null) {
16176 destroy();
16177 }
16178 }
16179 if ((effect.tag & mountTag) !== NoEffect$1) {
16180 // Mount
16181 var create = effect.create;
16182 var _destroy = create();
16183 if (typeof _destroy !== 'function') {
16184 {
16185 if (_destroy !== null && _destroy !== undefined) {
16186 warningWithoutStack$1(false, 'useEffect function must return a cleanup function or ' + 'nothing.%s%s', typeof _destroy.then === 'function' ? '\n\nIt looks like you wrote useEffect(async () => ...) or returned a Promise. ' + 'Instead, you may write an async function separately ' + 'and then call it from inside the effect:\n\n' + 'async function fetchComment(commentId) {\n' + ' // You can await here\n' + '}\n\n' + 'useEffect(() => {\n' + ' fetchComment(commentId);\n' + '}, [commentId]);\n\n' + 'In the future, React will provide a more idiomatic solution for data fetching ' + "that doesn't involve writing effects manually." : '', getStackByFiberInDevAndProd(finishedWork));
16187 }
16188 }
16189 _destroy = null;
16190 }
16191 effect.destroy = _destroy;
16192 }
16193 effect = effect.next;
16194 } while (effect !== firstEffect);
16195 }
16196}
16197
16198function commitPassiveHookEffects(finishedWork) {
16199 commitHookEffectList(UnmountPassive, NoEffect$1, finishedWork);
16200 commitHookEffectList(NoEffect$1, MountPassive, finishedWork);
16201}
16202
16203function commitLifeCycles(finishedRoot, current$$1, finishedWork, committedExpirationTime) {
16204 switch (finishedWork.tag) {
16205 case FunctionComponent:
16206 case ForwardRef:
16207 case SimpleMemoComponent:
16208 {
16209 commitHookEffectList(UnmountLayout, MountLayout, finishedWork);
16210 break;
16211 }
16212 case ClassComponent:
16213 {
16214 var instance = finishedWork.stateNode;
16215 if (finishedWork.effectTag & Update) {
16216 if (current$$1 === null) {
16217 startPhaseTimer(finishedWork, 'componentDidMount');
16218 // We could update instance props and state here,
16219 // but instead we rely on them being set during last render.
16220 // TODO: revisit this when we implement resuming.
16221 {
16222 if (finishedWork.type === finishedWork.elementType && !didWarnAboutReassigningProps) {
16223 !(instance.props === finishedWork.memoizedProps) ? warning$1(false, 'Expected %s props to match memoized props before ' + 'componentDidMount. ' + 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.props`. ' + 'Please file an issue.', getComponentName(finishedWork.type) || 'instance') : void 0;
16224 !(instance.state === finishedWork.memoizedState) ? warning$1(false, 'Expected %s state to match memoized state before ' + 'componentDidMount. ' + 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.props`. ' + 'Please file an issue.', getComponentName(finishedWork.type) || 'instance') : void 0;
16225 }
16226 }
16227 instance.componentDidMount();
16228 stopPhaseTimer();
16229 } else {
16230 var prevProps = finishedWork.elementType === finishedWork.type ? current$$1.memoizedProps : resolveDefaultProps(finishedWork.type, current$$1.memoizedProps);
16231 var prevState = current$$1.memoizedState;
16232 startPhaseTimer(finishedWork, 'componentDidUpdate');
16233 // We could update instance props and state here,
16234 // but instead we rely on them being set during last render.
16235 // TODO: revisit this when we implement resuming.
16236 {
16237 if (finishedWork.type === finishedWork.elementType && !didWarnAboutReassigningProps) {
16238 !(instance.props === finishedWork.memoizedProps) ? warning$1(false, 'Expected %s props to match memoized props before ' + 'componentDidUpdate. ' + 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.props`. ' + 'Please file an issue.', getComponentName(finishedWork.type) || 'instance') : void 0;
16239 !(instance.state === finishedWork.memoizedState) ? warning$1(false, 'Expected %s state to match memoized state before ' + 'componentDidUpdate. ' + 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.props`. ' + 'Please file an issue.', getComponentName(finishedWork.type) || 'instance') : void 0;
16240 }
16241 }
16242 instance.componentDidUpdate(prevProps, prevState, instance.__reactInternalSnapshotBeforeUpdate);
16243 stopPhaseTimer();
16244 }
16245 }
16246 var updateQueue = finishedWork.updateQueue;
16247 if (updateQueue !== null) {
16248 {
16249 if (finishedWork.type === finishedWork.elementType && !didWarnAboutReassigningProps) {
16250 !(instance.props === finishedWork.memoizedProps) ? warning$1(false, 'Expected %s props to match memoized props before ' + 'processing the update queue. ' + 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.props`. ' + 'Please file an issue.', getComponentName(finishedWork.type) || 'instance') : void 0;
16251 !(instance.state === finishedWork.memoizedState) ? warning$1(false, 'Expected %s state to match memoized state before ' + 'processing the update queue. ' + 'This might either be because of a bug in React, or because ' + 'a component reassigns its own `this.props`. ' + 'Please file an issue.', getComponentName(finishedWork.type) || 'instance') : void 0;
16252 }
16253 }
16254 // We could update instance props and state here,
16255 // but instead we rely on them being set during last render.
16256 // TODO: revisit this when we implement resuming.
16257 commitUpdateQueue(finishedWork, updateQueue, instance, committedExpirationTime);
16258 }
16259 return;
16260 }
16261 case HostRoot:
16262 {
16263 var _updateQueue = finishedWork.updateQueue;
16264 if (_updateQueue !== null) {
16265 var _instance = null;
16266 if (finishedWork.child !== null) {
16267 switch (finishedWork.child.tag) {
16268 case HostComponent:
16269 _instance = getPublicInstance(finishedWork.child.stateNode);
16270 break;
16271 case ClassComponent:
16272 _instance = finishedWork.child.stateNode;
16273 break;
16274 }
16275 }
16276 commitUpdateQueue(finishedWork, _updateQueue, _instance, committedExpirationTime);
16277 }
16278 return;
16279 }
16280 case HostComponent:
16281 {
16282 var _instance2 = finishedWork.stateNode;
16283
16284 // Renderers may schedule work to be done after host components are mounted
16285 // (eg DOM renderer may schedule auto-focus for inputs and form controls).
16286 // These effects should only be committed when components are first mounted,
16287 // aka when there is no current/alternate.
16288 if (current$$1 === null && finishedWork.effectTag & Update) {
16289 var type = finishedWork.type;
16290 var props = finishedWork.memoizedProps;
16291 commitMount(_instance2, type, props, finishedWork);
16292 }
16293
16294 return;
16295 }
16296 case HostText:
16297 {
16298 // We have no life-cycles associated with text.
16299 return;
16300 }
16301 case HostPortal:
16302 {
16303 // We have no life-cycles associated with portals.
16304 return;
16305 }
16306 case Profiler:
16307 {
16308 if (enableProfilerTimer) {
16309 var onRender = finishedWork.memoizedProps.onRender;
16310
16311 if (enableSchedulerTracing) {
16312 onRender(finishedWork.memoizedProps.id, current$$1 === null ? 'mount' : 'update', finishedWork.actualDuration, finishedWork.treeBaseDuration, finishedWork.actualStartTime, getCommitTime(), finishedRoot.memoizedInteractions);
16313 } else {
16314 onRender(finishedWork.memoizedProps.id, current$$1 === null ? 'mount' : 'update', finishedWork.actualDuration, finishedWork.treeBaseDuration, finishedWork.actualStartTime, getCommitTime());
16315 }
16316 }
16317 return;
16318 }
16319 case SuspenseComponent:
16320 break;
16321 case IncompleteClassComponent:
16322 break;
16323 default:
16324 {
16325 invariant(false, 'This unit of work tag should not have side-effects. This error is likely caused by a bug in React. Please file an issue.');
16326 }
16327 }
16328}
16329
16330function hideOrUnhideAllChildren(finishedWork, isHidden) {
16331 if (supportsMutation) {
16332 // We only have the top Fiber that was inserted but we need recurse down its
16333 var node = finishedWork;
16334 while (true) {
16335 if (node.tag === HostComponent) {
16336 var instance = node.stateNode;
16337 if (isHidden) {
16338 hideInstance(instance);
16339 } else {
16340 unhideInstance(node.stateNode, node.memoizedProps);
16341 }
16342 } else if (node.tag === HostText) {
16343 var _instance3 = node.stateNode;
16344 if (isHidden) {
16345 hideTextInstance(_instance3);
16346 } else {
16347 unhideTextInstance(_instance3, node.memoizedProps);
16348 }
16349 } else if (node.tag === SuspenseComponent && node.memoizedState !== null) {
16350 // Found a nested Suspense component that timed out. Skip over the
16351 var fallbackChildFragment = node.child.sibling;
16352 fallbackChildFragment.return = node;
16353 node = fallbackChildFragment;
16354 continue;
16355 } else if (node.child !== null) {
16356 node.child.return = node;
16357 node = node.child;
16358 continue;
16359 }
16360 if (node === finishedWork) {
16361 return;
16362 }
16363 while (node.sibling === null) {
16364 if (node.return === null || node.return === finishedWork) {
16365 return;
16366 }
16367 node = node.return;
16368 }
16369 node.sibling.return = node.return;
16370 node = node.sibling;
16371 }
16372 }
16373}
16374
16375function commitAttachRef(finishedWork) {
16376 var ref = finishedWork.ref;
16377 if (ref !== null) {
16378 var instance = finishedWork.stateNode;
16379 var instanceToUse = void 0;
16380 switch (finishedWork.tag) {
16381 case HostComponent:
16382 instanceToUse = getPublicInstance(instance);
16383 break;
16384 default:
16385 instanceToUse = instance;
16386 }
16387 if (typeof ref === 'function') {
16388 ref(instanceToUse);
16389 } else {
16390 {
16391 if (!ref.hasOwnProperty('current')) {
16392 warningWithoutStack$1(false, 'Unexpected ref object provided for %s. ' + 'Use either a ref-setter function or React.createRef().%s', getComponentName(finishedWork.type), getStackByFiberInDevAndProd(finishedWork));
16393 }
16394 }
16395
16396 ref.current = instanceToUse;
16397 }
16398 }
16399}
16400
16401function commitDetachRef(current$$1) {
16402 var currentRef = current$$1.ref;
16403 if (currentRef !== null) {
16404 if (typeof currentRef === 'function') {
16405 currentRef(null);
16406 } else {
16407 currentRef.current = null;
16408 }
16409 }
16410}
16411
16412// User-originating errors (lifecycles and refs) should not interrupt
16413// deletion, so don't let them throw. Host-originating errors should
16414// interrupt deletion, so it's okay
16415function commitUnmount(current$$1) {
16416 onCommitUnmount(current$$1);
16417
16418 switch (current$$1.tag) {
16419 case FunctionComponent:
16420 case ForwardRef:
16421 case MemoComponent:
16422 case SimpleMemoComponent:
16423 {
16424 var updateQueue = current$$1.updateQueue;
16425 if (updateQueue !== null) {
16426 var lastEffect = updateQueue.lastEffect;
16427 if (lastEffect !== null) {
16428 var firstEffect = lastEffect.next;
16429 var effect = firstEffect;
16430 do {
16431 var destroy = effect.destroy;
16432 if (destroy !== null) {
16433 safelyCallDestroy(current$$1, destroy);
16434 }
16435 effect = effect.next;
16436 } while (effect !== firstEffect);
16437 }
16438 }
16439 break;
16440 }
16441 case ClassComponent:
16442 {
16443 safelyDetachRef(current$$1);
16444 var instance = current$$1.stateNode;
16445 if (typeof instance.componentWillUnmount === 'function') {
16446 safelyCallComponentWillUnmount(current$$1, instance);
16447 }
16448 return;
16449 }
16450 case HostComponent:
16451 {
16452 safelyDetachRef(current$$1);
16453 return;
16454 }
16455 case HostPortal:
16456 {
16457 // TODO: this is recursive.
16458 // We are also not using this parent because
16459 // the portal will get pushed immediately.
16460 if (supportsMutation) {
16461 unmountHostComponents(current$$1);
16462 } else if (supportsPersistence) {
16463 emptyPortalContainer(current$$1);
16464 }
16465 return;
16466 }
16467 }
16468}
16469
16470function commitNestedUnmounts(root) {
16471 // While we're inside a removed host node we don't want to call
16472 // removeChild on the inner nodes because they're removed by the top
16473 // call anyway. We also want to call componentWillUnmount on all
16474 // composites before this host node is removed from the tree. Therefore
16475 var node = root;
16476 while (true) {
16477 commitUnmount(node);
16478 // Visit children because they may contain more composite or host nodes.
16479 // Skip portals because commitUnmount() currently visits them recursively.
16480 if (node.child !== null && (
16481 // If we use mutation we drill down into portals using commitUnmount above.
16482 // If we don't use mutation we drill down into portals here instead.
16483 !supportsMutation || node.tag !== HostPortal)) {
16484 node.child.return = node;
16485 node = node.child;
16486 continue;
16487 }
16488 if (node === root) {
16489 return;
16490 }
16491 while (node.sibling === null) {
16492 if (node.return === null || node.return === root) {
16493 return;
16494 }
16495 node = node.return;
16496 }
16497 node.sibling.return = node.return;
16498 node = node.sibling;
16499 }
16500}
16501
16502function detachFiber(current$$1) {
16503 // Cut off the return pointers to disconnect it from the tree. Ideally, we
16504 // should clear the child pointer of the parent alternate to let this
16505 // get GC:ed but we don't know which for sure which parent is the current
16506 // one so we'll settle for GC:ing the subtree of this child. This child
16507 // itself will be GC:ed when the parent updates the next time.
16508 current$$1.return = null;
16509 current$$1.child = null;
16510 current$$1.memoizedState = null;
16511 current$$1.updateQueue = null;
16512 var alternate = current$$1.alternate;
16513 if (alternate !== null) {
16514 alternate.return = null;
16515 alternate.child = null;
16516 alternate.memoizedState = null;
16517 alternate.updateQueue = null;
16518 }
16519}
16520
16521function emptyPortalContainer(current$$1) {
16522 if (!supportsPersistence) {
16523 return;
16524 }
16525
16526 var portal = current$$1.stateNode;
16527 var containerInfo = portal.containerInfo;
16528
16529 var emptyChildSet = createContainerChildSet(containerInfo);
16530 replaceContainerChildren(containerInfo, emptyChildSet);
16531}
16532
16533function commitContainer(finishedWork) {
16534 if (!supportsPersistence) {
16535 return;
16536 }
16537
16538 switch (finishedWork.tag) {
16539 case ClassComponent:
16540 {
16541 return;
16542 }
16543 case HostComponent:
16544 {
16545 return;
16546 }
16547 case HostText:
16548 {
16549 return;
16550 }
16551 case HostRoot:
16552 case HostPortal:
16553 {
16554 var portalOrRoot = finishedWork.stateNode;
16555 var containerInfo = portalOrRoot.containerInfo,
16556 _pendingChildren = portalOrRoot.pendingChildren;
16557
16558 replaceContainerChildren(containerInfo, _pendingChildren);
16559 return;
16560 }
16561 default:
16562 {
16563 invariant(false, 'This unit of work tag should not have side-effects. This error is likely caused by a bug in React. Please file an issue.');
16564 }
16565 }
16566}
16567
16568function getHostParentFiber(fiber) {
16569 var parent = fiber.return;
16570 while (parent !== null) {
16571 if (isHostParent(parent)) {
16572 return parent;
16573 }
16574 parent = parent.return;
16575 }
16576 invariant(false, 'Expected to find a host parent. This error is likely caused by a bug in React. Please file an issue.');
16577}
16578
16579function isHostParent(fiber) {
16580 return fiber.tag === HostComponent || fiber.tag === HostRoot || fiber.tag === HostPortal;
16581}
16582
16583function getHostSibling(fiber) {
16584 // We're going to search forward into the tree until we find a sibling host
16585 // node. Unfortunately, if multiple insertions are done in a row we have to
16586 // search past them. This leads to exponential search for the next sibling.
16587 var node = fiber;
16588 siblings: while (true) {
16589 // If we didn't find anything, let's try the next sibling.
16590 while (node.sibling === null) {
16591 if (node.return === null || isHostParent(node.return)) {
16592 // If we pop out of the root or hit the parent the fiber we are the
16593 // last sibling.
16594 return null;
16595 }
16596 node = node.return;
16597 }
16598 node.sibling.return = node.return;
16599 node = node.sibling;
16600 while (node.tag !== HostComponent && node.tag !== HostText) {
16601 // If it is not host node and, we might have a host node inside it.
16602 // Try to search down until we find one.
16603 if (node.effectTag & Placement) {
16604 // If we don't have a child, try the siblings instead.
16605 continue siblings;
16606 }
16607 // If we don't have a child, try the siblings instead.
16608 // We also skip portals because they are not part of this host tree.
16609 if (node.child === null || node.tag === HostPortal) {
16610 continue siblings;
16611 } else {
16612 node.child.return = node;
16613 node = node.child;
16614 }
16615 }
16616 // Check if this host node is stable or about to be placed.
16617 if (!(node.effectTag & Placement)) {
16618 // Found it!
16619 return node.stateNode;
16620 }
16621 }
16622}
16623
16624function commitPlacement(finishedWork) {
16625 if (!supportsMutation) {
16626 return;
16627 }
16628
16629 // Recursively insert all host nodes into the parent.
16630 var parentFiber = getHostParentFiber(finishedWork);
16631
16632 // Note: these two variables *must* always be updated together.
16633 var parent = void 0;
16634 var isContainer = void 0;
16635
16636 switch (parentFiber.tag) {
16637 case HostComponent:
16638 parent = parentFiber.stateNode;
16639 isContainer = false;
16640 break;
16641 case HostRoot:
16642 parent = parentFiber.stateNode.containerInfo;
16643 isContainer = true;
16644 break;
16645 case HostPortal:
16646 parent = parentFiber.stateNode.containerInfo;
16647 isContainer = true;
16648 break;
16649 default:
16650 invariant(false, 'Invalid host parent fiber. This error is likely caused by a bug in React. Please file an issue.');
16651 }
16652 if (parentFiber.effectTag & ContentReset) {
16653 // Reset the text content of the parent before doing any insertions
16654 resetTextContent(parent);
16655 // Clear ContentReset from the effect tag
16656 parentFiber.effectTag &= ~ContentReset;
16657 }
16658
16659 var before = getHostSibling(finishedWork);
16660 // We only have the top Fiber that was inserted but we need recurse down its
16661 // children to find all the terminal nodes.
16662 var node = finishedWork;
16663 while (true) {
16664 if (node.tag === HostComponent || node.tag === HostText) {
16665 if (before) {
16666 if (isContainer) {
16667 insertInContainerBefore(parent, node.stateNode, before);
16668 } else {
16669 insertBefore(parent, node.stateNode, before);
16670 }
16671 } else {
16672 if (isContainer) {
16673 appendChildToContainer(parent, node.stateNode);
16674 } else {
16675 appendChild(parent, node.stateNode);
16676 }
16677 }
16678 } else if (node.tag === HostPortal) {
16679 // If the insertion itself is a portal, then we don't want to traverse
16680 // down its children. Instead, we'll get insertions from each child in
16681 // the portal directly.
16682 } else if (node.child !== null) {
16683 node.child.return = node;
16684 node = node.child;
16685 continue;
16686 }
16687 if (node === finishedWork) {
16688 return;
16689 }
16690 while (node.sibling === null) {
16691 if (node.return === null || node.return === finishedWork) {
16692 return;
16693 }
16694 node = node.return;
16695 }
16696 node.sibling.return = node.return;
16697 node = node.sibling;
16698 }
16699}
16700
16701function unmountHostComponents(current$$1) {
16702 // We only have the top Fiber that was deleted but we need recurse down its
16703 var node = current$$1;
16704
16705 // Each iteration, currentParent is populated with node's host parent if not
16706 // currentParentIsValid.
16707 var currentParentIsValid = false;
16708
16709 // Note: these two variables *must* always be updated together.
16710 var currentParent = void 0;
16711 var currentParentIsContainer = void 0;
16712
16713 while (true) {
16714 if (!currentParentIsValid) {
16715 var parent = node.return;
16716 findParent: while (true) {
16717 !(parent !== null) ? invariant(false, 'Expected to find a host parent. This error is likely caused by a bug in React. Please file an issue.') : void 0;
16718 switch (parent.tag) {
16719 case HostComponent:
16720 currentParent = parent.stateNode;
16721 currentParentIsContainer = false;
16722 break findParent;
16723 case HostRoot:
16724 currentParent = parent.stateNode.containerInfo;
16725 currentParentIsContainer = true;
16726 break findParent;
16727 case HostPortal:
16728 currentParent = parent.stateNode.containerInfo;
16729 currentParentIsContainer = true;
16730 break findParent;
16731 }
16732 parent = parent.return;
16733 }
16734 currentParentIsValid = true;
16735 }
16736
16737 if (node.tag === HostComponent || node.tag === HostText) {
16738 commitNestedUnmounts(node);
16739 // After all the children have unmounted, it is now safe to remove the
16740 // node from the tree.
16741 if (currentParentIsContainer) {
16742 removeChildFromContainer(currentParent, node.stateNode);
16743 } else {
16744 removeChild(currentParent, node.stateNode);
16745 }
16746 // Don't visit children because we already visited them.
16747 } else if (node.tag === HostPortal) {
16748 // When we go into a portal, it becomes the parent to remove from.
16749 // We will reassign it back when we pop the portal on the way up.
16750 currentParent = node.stateNode.containerInfo;
16751 currentParentIsContainer = true;
16752 // Visit children because portals might contain host components.
16753 if (node.child !== null) {
16754 node.child.return = node;
16755 node = node.child;
16756 continue;
16757 }
16758 } else {
16759 commitUnmount(node);
16760 // Visit children because we may find more host components below.
16761 if (node.child !== null) {
16762 node.child.return = node;
16763 node = node.child;
16764 continue;
16765 }
16766 }
16767 if (node === current$$1) {
16768 return;
16769 }
16770 while (node.sibling === null) {
16771 if (node.return === null || node.return === current$$1) {
16772 return;
16773 }
16774 node = node.return;
16775 if (node.tag === HostPortal) {
16776 // When we go out of the portal, we need to restore the parent.
16777 // Since we don't keep a stack of them, we will search for it.
16778 currentParentIsValid = false;
16779 }
16780 }
16781 node.sibling.return = node.return;
16782 node = node.sibling;
16783 }
16784}
16785
16786function commitDeletion(current$$1) {
16787 if (supportsMutation) {
16788 // Recursively delete all host nodes from the parent.
16789 // Detach refs and call componentWillUnmount() on the whole subtree.
16790 unmountHostComponents(current$$1);
16791 } else {
16792 // Detach refs and call componentWillUnmount() on the whole subtree.
16793 commitNestedUnmounts(current$$1);
16794 }
16795 detachFiber(current$$1);
16796}
16797
16798function commitWork(current$$1, finishedWork) {
16799 if (!supportsMutation) {
16800 switch (finishedWork.tag) {
16801 case FunctionComponent:
16802 case ForwardRef:
16803 case MemoComponent:
16804 case SimpleMemoComponent:
16805 {
16806 // Note: We currently never use MountMutation, but useLayout uses
16807 // UnmountMutation.
16808 commitHookEffectList(UnmountMutation, MountMutation, finishedWork);
16809 return;
16810 }
16811 }
16812
16813 commitContainer(finishedWork);
16814 return;
16815 }
16816
16817 switch (finishedWork.tag) {
16818 case FunctionComponent:
16819 case ForwardRef:
16820 case MemoComponent:
16821 case SimpleMemoComponent:
16822 {
16823 // Note: We currently never use MountMutation, but useLayout uses
16824 // UnmountMutation.
16825 commitHookEffectList(UnmountMutation, MountMutation, finishedWork);
16826 return;
16827 }
16828 case ClassComponent:
16829 {
16830 return;
16831 }
16832 case HostComponent:
16833 {
16834 var instance = finishedWork.stateNode;
16835 if (instance != null) {
16836 // Commit the work prepared earlier.
16837 var newProps = finishedWork.memoizedProps;
16838 // For hydration we reuse the update path but we treat the oldProps
16839 // as the newProps. The updatePayload will contain the real change in
16840 // this case.
16841 var oldProps = current$$1 !== null ? current$$1.memoizedProps : newProps;
16842 var type = finishedWork.type;
16843 // TODO: Type the updateQueue to be specific to host components.
16844 var updatePayload = finishedWork.updateQueue;
16845 finishedWork.updateQueue = null;
16846 if (updatePayload !== null) {
16847 commitUpdate(instance, updatePayload, type, oldProps, newProps, finishedWork);
16848 }
16849 }
16850 return;
16851 }
16852 case HostText:
16853 {
16854 !(finishedWork.stateNode !== null) ? invariant(false, 'This should have a text node initialized. This error is likely caused by a bug in React. Please file an issue.') : void 0;
16855 var textInstance = finishedWork.stateNode;
16856 var newText = finishedWork.memoizedProps;
16857 // For hydration we reuse the update path but we treat the oldProps
16858 // as the newProps. The updatePayload will contain the real change in
16859 // this case.
16860 var oldText = current$$1 !== null ? current$$1.memoizedProps : newText;
16861 commitTextUpdate(textInstance, oldText, newText);
16862 return;
16863 }
16864 case HostRoot:
16865 {
16866 return;
16867 }
16868 case Profiler:
16869 {
16870 return;
16871 }
16872 case SuspenseComponent:
16873 {
16874 var newState = finishedWork.memoizedState;
16875
16876 var newDidTimeout = void 0;
16877 var primaryChildParent = finishedWork;
16878 if (newState === null) {
16879 newDidTimeout = false;
16880 } else {
16881 newDidTimeout = true;
16882 primaryChildParent = finishedWork.child;
16883 if (newState.timedOutAt === NoWork) {
16884 // If the children had not already timed out, record the time.
16885 // This is used to compute the elapsed time during subsequent
16886 // attempts to render the children.
16887 newState.timedOutAt = requestCurrentTime();
16888 }
16889 }
16890
16891 if (primaryChildParent !== null) {
16892 hideOrUnhideAllChildren(primaryChildParent, newDidTimeout);
16893 }
16894
16895 // If this boundary just timed out, then it will have a set of thenables.
16896 // For each thenable, attach a listener so that when it resolves, React
16897 // attempts to re-render the boundary in the primary (pre-timeout) state.
16898 var thenables = finishedWork.updateQueue;
16899 if (thenables !== null) {
16900 finishedWork.updateQueue = null;
16901 var retryCache = finishedWork.stateNode;
16902 if (retryCache === null) {
16903 retryCache = finishedWork.stateNode = new PossiblyWeakSet();
16904 }
16905 thenables.forEach(function (thenable) {
16906 // Memoize using the boundary fiber to prevent redundant listeners.
16907 var retry = retryTimedOutBoundary.bind(null, finishedWork, thenable);
16908 if (enableSchedulerTracing) {
16909 retry = tracing.unstable_wrap(retry);
16910 }
16911 if (!retryCache.has(thenable)) {
16912 retryCache.add(thenable);
16913 thenable.then(retry, retry);
16914 }
16915 });
16916 }
16917
16918 return;
16919 }
16920 case IncompleteClassComponent:
16921 {
16922 return;
16923 }
16924 default:
16925 {
16926 invariant(false, 'This unit of work tag should not have side-effects. This error is likely caused by a bug in React. Please file an issue.');
16927 }
16928 }
16929}
16930
16931function commitResetTextContent(current$$1) {
16932 if (!supportsMutation) {
16933 return;
16934 }
16935 resetTextContent(current$$1.stateNode);
16936}
16937
16938var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
16939
16940function createRootErrorUpdate(fiber, errorInfo, expirationTime) {
16941 var update = createUpdate(expirationTime);
16942 // Unmount the root by rendering null.
16943 update.tag = CaptureUpdate;
16944 // Caution: React DevTools currently depends on this property
16945 // being called "element".
16946 update.payload = { element: null };
16947 var error = errorInfo.value;
16948 update.callback = function () {
16949 onUncaughtError(error);
16950 logError(fiber, errorInfo);
16951 };
16952 return update;
16953}
16954
16955function createClassErrorUpdate(fiber, errorInfo, expirationTime) {
16956 var update = createUpdate(expirationTime);
16957 update.tag = CaptureUpdate;
16958 var getDerivedStateFromError = fiber.type.getDerivedStateFromError;
16959 if (typeof getDerivedStateFromError === 'function') {
16960 var error = errorInfo.value;
16961 update.payload = function () {
16962 return getDerivedStateFromError(error);
16963 };
16964 }
16965
16966 var inst = fiber.stateNode;
16967 if (inst !== null && typeof inst.componentDidCatch === 'function') {
16968 update.callback = function callback() {
16969 if (typeof getDerivedStateFromError !== 'function') {
16970 // To preserve the preexisting retry behavior of error boundaries,
16971 // we keep track of which ones already failed during this batch.
16972 // This gets reset before we yield back to the browser.
16973 // TODO: Warn in strict mode if getDerivedStateFromError is
16974 // not defined.
16975 markLegacyErrorBoundaryAsFailed(this);
16976 }
16977 var error = errorInfo.value;
16978 var stack = errorInfo.stack;
16979 logError(fiber, errorInfo);
16980 this.componentDidCatch(error, {
16981 componentStack: stack !== null ? stack : ''
16982 });
16983 {
16984 if (typeof getDerivedStateFromError !== 'function') {
16985 // If componentDidCatch is the only error boundary method defined,
16986 // then it needs to call setState to recover from errors.
16987 // If no state update is scheduled then the boundary will swallow the error.
16988 !(fiber.expirationTime === Sync) ? warningWithoutStack$1(false, '%s: Error boundaries should implement getDerivedStateFromError(). ' + 'In that method, return a state update to display an error message or fallback UI.', getComponentName(fiber.type) || 'Unknown') : void 0;
16989 }
16990 }
16991 };
16992 }
16993 return update;
16994}
16995
16996function throwException(root, returnFiber, sourceFiber, value, renderExpirationTime) {
16997 // The source fiber did not complete.
16998 sourceFiber.effectTag |= Incomplete;
16999 // Its effect list is no longer valid.
17000 sourceFiber.firstEffect = sourceFiber.lastEffect = null;
17001
17002 if (value !== null && typeof value === 'object' && typeof value.then === 'function') {
17003 // This is a thenable.
17004 var thenable = value;
17005
17006 // Find the earliest timeout threshold of all the placeholders in the
17007 // ancestor path. We could avoid this traversal by storing the thresholds on
17008 // the stack, but we choose not to because we only hit this path if we're
17009 // IO-bound (i.e. if something suspends). Whereas the stack is used even in
17010 // the non-IO- bound case.
17011 var _workInProgress = returnFiber;
17012 var earliestTimeoutMs = -1;
17013 var startTimeMs = -1;
17014 do {
17015 if (_workInProgress.tag === SuspenseComponent) {
17016 var current$$1 = _workInProgress.alternate;
17017 if (current$$1 !== null) {
17018 var currentState = current$$1.memoizedState;
17019 if (currentState !== null) {
17020 // Reached a boundary that already timed out. Do not search
17021 // any further.
17022 var timedOutAt = currentState.timedOutAt;
17023 startTimeMs = expirationTimeToMs(timedOutAt);
17024 // Do not search any further.
17025 break;
17026 }
17027 }
17028 var timeoutPropMs = _workInProgress.pendingProps.maxDuration;
17029 if (typeof timeoutPropMs === 'number') {
17030 if (timeoutPropMs <= 0) {
17031 earliestTimeoutMs = 0;
17032 } else if (earliestTimeoutMs === -1 || timeoutPropMs < earliestTimeoutMs) {
17033 earliestTimeoutMs = timeoutPropMs;
17034 }
17035 }
17036 }
17037 _workInProgress = _workInProgress.return;
17038 } while (_workInProgress !== null);
17039
17040 // Schedule the nearest Suspense to re-render the timed out view.
17041 _workInProgress = returnFiber;
17042 do {
17043 if (_workInProgress.tag === SuspenseComponent && shouldCaptureSuspense(_workInProgress)) {
17044 // Found the nearest boundary.
17045
17046 // Stash the promise on the boundary fiber. If the boundary times out, we'll
17047 var thenables = _workInProgress.updateQueue;
17048 if (thenables === null) {
17049 _workInProgress.updateQueue = new Set([thenable]);
17050 } else {
17051 thenables.add(thenable);
17052 }
17053
17054 // If the boundary is outside of concurrent mode, we should *not*
17055 // suspend the commit. Pretend as if the suspended component rendered
17056 // null and keep rendering. In the commit phase, we'll schedule a
17057 // subsequent synchronous update to re-render the Suspense.
17058 //
17059 // Note: It doesn't matter whether the component that suspended was
17060 // inside a concurrent mode tree. If the Suspense is outside of it, we
17061 // should *not* suspend the commit.
17062 if ((_workInProgress.mode & ConcurrentMode) === NoEffect) {
17063 _workInProgress.effectTag |= DidCapture;
17064
17065 // We're going to commit this fiber even though it didn't complete.
17066 // But we shouldn't call any lifecycle methods or callbacks. Remove
17067 // all lifecycle effect tags.
17068 sourceFiber.effectTag &= ~(LifecycleEffectMask | Incomplete);
17069
17070 if (sourceFiber.tag === ClassComponent) {
17071 var currentSourceFiber = sourceFiber.alternate;
17072 if (currentSourceFiber === null) {
17073 // This is a new mount. Change the tag so it's not mistaken for a
17074 // completed class component. For example, we should not call
17075 // componentWillUnmount if it is deleted.
17076 sourceFiber.tag = IncompleteClassComponent;
17077 } else {
17078 // When we try rendering again, we should not reuse the current fiber,
17079 // since it's known to be in an inconsistent state. Use a force updte to
17080 // prevent a bail out.
17081 var update = createUpdate(Sync);
17082 update.tag = ForceUpdate;
17083 enqueueUpdate(sourceFiber, update);
17084 }
17085 }
17086
17087 // The source fiber did not complete. Mark it with Sync priority to
17088 // indicate that it still has pending work.
17089 sourceFiber.expirationTime = Sync;
17090
17091 // Exit without suspending.
17092 return;
17093 }
17094
17095 // Confirmed that the boundary is in a concurrent mode tree. Continue
17096 // with the normal suspend path.
17097
17098 // Attach a listener to the promise to "ping" the root and retry. But
17099 // only if one does not already exist for the current render expiration
17100 // time (which acts like a "thread ID" here).
17101 var pingCache = root.pingCache;
17102 var threadIDs = void 0;
17103 if (pingCache === null) {
17104 pingCache = root.pingCache = new PossiblyWeakMap();
17105 threadIDs = new Set();
17106 pingCache.set(thenable, threadIDs);
17107 } else {
17108 threadIDs = pingCache.get(thenable);
17109 if (threadIDs === undefined) {
17110 threadIDs = new Set();
17111 pingCache.set(thenable, threadIDs);
17112 }
17113 }
17114 if (!threadIDs.has(renderExpirationTime)) {
17115 // Memoize using the thread ID to prevent redundant listeners.
17116 threadIDs.add(renderExpirationTime);
17117 var ping = pingSuspendedRoot.bind(null, root, thenable, renderExpirationTime);
17118 if (enableSchedulerTracing) {
17119 ping = tracing.unstable_wrap(ping);
17120 }
17121 thenable.then(ping, ping);
17122 }
17123
17124 var absoluteTimeoutMs = void 0;
17125 if (earliestTimeoutMs === -1) {
17126 // If no explicit threshold is given, default to an abitrarily large
17127 // value. The actual size doesn't matter because the threshold for the
17128 // whole tree will be clamped to the expiration time.
17129 absoluteTimeoutMs = maxSigned31BitInt;
17130 } else {
17131 if (startTimeMs === -1) {
17132 // This suspend happened outside of any already timed-out
17133 // placeholders. We don't know exactly when the update was
17134 // scheduled, but we can infer an approximate start time from the
17135 // expiration time. First, find the earliest uncommitted expiration
17136 // time in the tree, including work that is suspended. Then subtract
17137 // the offset used to compute an async update's expiration time.
17138 // This will cause high priority (interactive) work to expire
17139 // earlier than necessary, but we can account for this by adjusting
17140 // for the Just Noticeable Difference.
17141 var earliestExpirationTime = findEarliestOutstandingPriorityLevel(root, renderExpirationTime);
17142 var earliestExpirationTimeMs = expirationTimeToMs(earliestExpirationTime);
17143 startTimeMs = earliestExpirationTimeMs - LOW_PRIORITY_EXPIRATION;
17144 }
17145 absoluteTimeoutMs = startTimeMs + earliestTimeoutMs;
17146 }
17147
17148 // Mark the earliest timeout in the suspended fiber's ancestor path.
17149 // After completing the root, we'll take the largest of all the
17150 // suspended fiber's timeouts and use it to compute a timeout for the
17151 // whole tree.
17152 renderDidSuspend(root, absoluteTimeoutMs, renderExpirationTime);
17153
17154 _workInProgress.effectTag |= ShouldCapture;
17155 _workInProgress.expirationTime = renderExpirationTime;
17156 return;
17157 }
17158 // This boundary already captured during this render. Continue to the next
17159 // boundary.
17160 _workInProgress = _workInProgress.return;
17161 } while (_workInProgress !== null);
17162 // No boundary was found. Fallthrough to error mode.
17163 // TODO: Use invariant so the message is stripped in prod?
17164 value = new Error((getComponentName(sourceFiber.type) || 'A React component') + ' suspended while rendering, but no fallback UI was specified.\n' + '\n' + 'Add a <Suspense fallback=...> component higher in the tree to ' + 'provide a loading indicator or placeholder to display.' + getStackByFiberInDevAndProd(sourceFiber));
17165 }
17166
17167 // We didn't find a boundary that could handle this type of exception. Start
17168 // over and traverse parent path again, this time treating the exception
17169 // as an error.
17170 renderDidError();
17171 value = createCapturedValue(value, sourceFiber);
17172 var workInProgress = returnFiber;
17173 do {
17174 switch (workInProgress.tag) {
17175 case HostRoot:
17176 {
17177 var _errorInfo = value;
17178 workInProgress.effectTag |= ShouldCapture;
17179 workInProgress.expirationTime = renderExpirationTime;
17180 var _update = createRootErrorUpdate(workInProgress, _errorInfo, renderExpirationTime);
17181 enqueueCapturedUpdate(workInProgress, _update);
17182 return;
17183 }
17184 case ClassComponent:
17185 // Capture and retry
17186 var errorInfo = value;
17187 var ctor = workInProgress.type;
17188 var instance = workInProgress.stateNode;
17189 if ((workInProgress.effectTag & DidCapture) === NoEffect && (typeof ctor.getDerivedStateFromError === 'function' || instance !== null && typeof instance.componentDidCatch === 'function' && !isAlreadyFailedLegacyErrorBoundary(instance))) {
17190 workInProgress.effectTag |= ShouldCapture;
17191 workInProgress.expirationTime = renderExpirationTime;
17192 // Schedule the error boundary to re-render using updated state
17193 var _update2 = createClassErrorUpdate(workInProgress, errorInfo, renderExpirationTime);
17194 enqueueCapturedUpdate(workInProgress, _update2);
17195 return;
17196 }
17197 break;
17198 default:
17199 break;
17200 }
17201 workInProgress = workInProgress.return;
17202 } while (workInProgress !== null);
17203}
17204
17205function unwindWork(workInProgress, renderExpirationTime) {
17206 switch (workInProgress.tag) {
17207 case ClassComponent:
17208 {
17209 var Component = workInProgress.type;
17210 if (isContextProvider(Component)) {
17211 popContext(workInProgress);
17212 }
17213 var effectTag = workInProgress.effectTag;
17214 if (effectTag & ShouldCapture) {
17215 workInProgress.effectTag = effectTag & ~ShouldCapture | DidCapture;
17216 return workInProgress;
17217 }
17218 return null;
17219 }
17220 case HostRoot:
17221 {
17222 popHostContainer(workInProgress);
17223 popTopLevelContextObject(workInProgress);
17224 var _effectTag = workInProgress.effectTag;
17225 !((_effectTag & DidCapture) === NoEffect) ? invariant(false, 'The root failed to unmount after an error. This is likely a bug in React. Please file an issue.') : void 0;
17226 workInProgress.effectTag = _effectTag & ~ShouldCapture | DidCapture;
17227 return workInProgress;
17228 }
17229 case HostComponent:
17230 {
17231 popHostContext(workInProgress);
17232 return null;
17233 }
17234 case SuspenseComponent:
17235 {
17236 var _effectTag2 = workInProgress.effectTag;
17237 if (_effectTag2 & ShouldCapture) {
17238 workInProgress.effectTag = _effectTag2 & ~ShouldCapture | DidCapture;
17239 // Captured a suspense effect. Re-render the boundary.
17240 return workInProgress;
17241 }
17242 return null;
17243 }
17244 case HostPortal:
17245 popHostContainer(workInProgress);
17246 return null;
17247 case ContextProvider:
17248 popProvider(workInProgress);
17249 return null;
17250 default:
17251 return null;
17252 }
17253}
17254
17255function unwindInterruptedWork(interruptedWork) {
17256 switch (interruptedWork.tag) {
17257 case ClassComponent:
17258 {
17259 var childContextTypes = interruptedWork.type.childContextTypes;
17260 if (childContextTypes !== null && childContextTypes !== undefined) {
17261 popContext(interruptedWork);
17262 }
17263 break;
17264 }
17265 case HostRoot:
17266 {
17267 popHostContainer(interruptedWork);
17268 popTopLevelContextObject(interruptedWork);
17269 break;
17270 }
17271 case HostComponent:
17272 {
17273 popHostContext(interruptedWork);
17274 break;
17275 }
17276 case HostPortal:
17277 popHostContainer(interruptedWork);
17278 break;
17279 case ContextProvider:
17280 popProvider(interruptedWork);
17281 break;
17282 default:
17283 break;
17284 }
17285}
17286
17287var Dispatcher = {
17288 readContext: readContext,
17289 useCallback: useCallback,
17290 useContext: useContext,
17291 useEffect: useEffect,
17292 useImperativeMethods: useImperativeMethods,
17293 useLayoutEffect: useLayoutEffect,
17294 useMemo: useMemo,
17295 useReducer: useReducer,
17296 useRef: useRef,
17297 useState: useState
17298};
17299var DispatcherWithoutHooks = {
17300 readContext: readContext
17301};
17302
17303var ReactCurrentOwner$2 = ReactSharedInternals.ReactCurrentOwner;
17304
17305
17306var didWarnAboutStateTransition = void 0;
17307var didWarnSetStateChildContext = void 0;
17308var warnAboutUpdateOnUnmounted = void 0;
17309var warnAboutInvalidUpdates = void 0;
17310
17311if (enableSchedulerTracing) {
17312 // Provide explicit error message when production+profiling bundle of e.g. react-dom
17313 // is used with production (non-profiling) bundle of scheduler/tracing
17314 !(tracing.__interactionsRef != null && tracing.__interactionsRef.current != null) ? invariant(false, 'It is not supported to run the profiling version of a renderer (for example, `react-dom/profiling`) without also replacing the `scheduler/tracing` module with `scheduler/tracing-profiling`. Your bundler might have a setting for aliasing both modules. Learn more at http://fb.me/react-profiling') : void 0;
17315}
17316
17317{
17318 didWarnAboutStateTransition = false;
17319 didWarnSetStateChildContext = false;
17320 var didWarnStateUpdateForUnmountedComponent = {};
17321
17322 warnAboutUpdateOnUnmounted = function (fiber, isClass) {
17323 // We show the whole stack but dedupe on the top component's name because
17324 // the problematic code almost always lies inside that component.
17325 var componentName = getComponentName(fiber.type) || 'ReactComponent';
17326 if (didWarnStateUpdateForUnmountedComponent[componentName]) {
17327 return;
17328 }
17329 warningWithoutStack$1(false, "Can't perform a React state update on an unmounted component. This " + 'is a no-op, but it indicates a memory leak in your application. To ' + 'fix, cancel all subscriptions and asynchronous tasks in %s.%s', isClass ? 'the componentWillUnmount method' : 'a useEffect cleanup function', getStackByFiberInDevAndProd(fiber));
17330 didWarnStateUpdateForUnmountedComponent[componentName] = true;
17331 };
17332
17333 warnAboutInvalidUpdates = function (instance) {
17334 switch (phase) {
17335 case 'getChildContext':
17336 if (didWarnSetStateChildContext) {
17337 return;
17338 }
17339 warningWithoutStack$1(false, 'setState(...): Cannot call setState() inside getChildContext()');
17340 didWarnSetStateChildContext = true;
17341 break;
17342 case 'render':
17343 if (didWarnAboutStateTransition) {
17344 return;
17345 }
17346 warningWithoutStack$1(false, 'Cannot update during an existing state transition (such as within ' + '`render`). Render methods should be a pure function of props and state.');
17347 didWarnAboutStateTransition = true;
17348 break;
17349 }
17350 };
17351}
17352
17353// Used to ensure computeUniqueAsyncExpiration is monotonically decreasing.
17354var lastUniqueAsyncExpiration = Sync - 1;
17355
17356// Represents the expiration time that incoming updates should use. (If this
17357// is NoWork, use the default strategy: async updates in async mode, sync
17358// updates in sync mode.)
17359var expirationContext = NoWork;
17360
17361var isWorking = false;
17362
17363// The next work in progress fiber that we're currently working on.
17364var nextUnitOfWork = null;
17365var nextRoot = null;
17366// The time at which we're currently rendering work.
17367var nextRenderExpirationTime = NoWork;
17368var nextLatestAbsoluteTimeoutMs = -1;
17369var nextRenderDidError = false;
17370
17371// The next fiber with an effect that we're currently committing.
17372var nextEffect = null;
17373
17374var isCommitting$1 = false;
17375var rootWithPendingPassiveEffects = null;
17376var passiveEffectCallbackHandle = null;
17377var passiveEffectCallback = null;
17378
17379var legacyErrorBoundariesThatAlreadyFailed = null;
17380
17381// Used for performance tracking.
17382var interruptedBy = null;
17383
17384var stashedWorkInProgressProperties = void 0;
17385var replayUnitOfWork = void 0;
17386var mayReplayFailedUnitOfWork = void 0;
17387var isReplayingFailedUnitOfWork = void 0;
17388var originalReplayError = void 0;
17389var rethrowOriginalError = void 0;
17390if (true && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
17391 stashedWorkInProgressProperties = null;
17392 mayReplayFailedUnitOfWork = true;
17393 isReplayingFailedUnitOfWork = false;
17394 originalReplayError = null;
17395 replayUnitOfWork = function (failedUnitOfWork, thrownValue, isYieldy) {
17396 if (thrownValue !== null && typeof thrownValue === 'object' && typeof thrownValue.then === 'function') {
17397 // Don't replay promises. Treat everything else like an error.
17398 // TODO: Need to figure out a different strategy if/when we add
17399 // support for catching other types.
17400 return;
17401 }
17402
17403 // Restore the original state of the work-in-progress
17404 if (stashedWorkInProgressProperties === null) {
17405 // This should never happen. Don't throw because this code is DEV-only.
17406 warningWithoutStack$1(false, 'Could not replay rendering after an error. This is likely a bug in React. ' + 'Please file an issue.');
17407 return;
17408 }
17409 assignFiberPropertiesInDEV(failedUnitOfWork, stashedWorkInProgressProperties);
17410
17411 switch (failedUnitOfWork.tag) {
17412 case HostRoot:
17413 popHostContainer(failedUnitOfWork);
17414 popTopLevelContextObject(failedUnitOfWork);
17415 break;
17416 case HostComponent:
17417 popHostContext(failedUnitOfWork);
17418 break;
17419 case ClassComponent:
17420 {
17421 var Component = failedUnitOfWork.type;
17422 if (isContextProvider(Component)) {
17423 popContext(failedUnitOfWork);
17424 }
17425 break;
17426 }
17427 case HostPortal:
17428 popHostContainer(failedUnitOfWork);
17429 break;
17430 case ContextProvider:
17431 popProvider(failedUnitOfWork);
17432 break;
17433 }
17434 // Replay the begin phase.
17435 isReplayingFailedUnitOfWork = true;
17436 originalReplayError = thrownValue;
17437 invokeGuardedCallback(null, workLoop, null, isYieldy);
17438 isReplayingFailedUnitOfWork = false;
17439 originalReplayError = null;
17440 if (hasCaughtError()) {
17441 var replayError = clearCaughtError();
17442 if (replayError != null && thrownValue != null) {
17443 try {
17444 // Reading the expando property is intentionally
17445 // inside `try` because it might be a getter or Proxy.
17446 if (replayError._suppressLogging) {
17447 // Also suppress logging for the original error.
17448 thrownValue._suppressLogging = true;
17449 }
17450 } catch (inner) {
17451 // Ignore.
17452 }
17453 }
17454 } else {
17455 // If the begin phase did not fail the second time, set this pointer
17456 // back to the original value.
17457 nextUnitOfWork = failedUnitOfWork;
17458 }
17459 };
17460 rethrowOriginalError = function () {
17461 throw originalReplayError;
17462 };
17463}
17464
17465function resetStack() {
17466 if (nextUnitOfWork !== null) {
17467 var interruptedWork = nextUnitOfWork.return;
17468 while (interruptedWork !== null) {
17469 unwindInterruptedWork(interruptedWork);
17470 interruptedWork = interruptedWork.return;
17471 }
17472 }
17473
17474 {
17475 ReactStrictModeWarnings.discardPendingWarnings();
17476 checkThatStackIsEmpty();
17477 }
17478
17479 nextRoot = null;
17480 nextRenderExpirationTime = NoWork;
17481 nextLatestAbsoluteTimeoutMs = -1;
17482 nextRenderDidError = false;
17483 nextUnitOfWork = null;
17484}
17485
17486function commitAllHostEffects() {
17487 while (nextEffect !== null) {
17488 {
17489 setCurrentFiber(nextEffect);
17490 }
17491 recordEffect();
17492
17493 var effectTag = nextEffect.effectTag;
17494
17495 if (effectTag & ContentReset) {
17496 commitResetTextContent(nextEffect);
17497 }
17498
17499 if (effectTag & Ref) {
17500 var current$$1 = nextEffect.alternate;
17501 if (current$$1 !== null) {
17502 commitDetachRef(current$$1);
17503 }
17504 }
17505
17506 // The following switch statement is only concerned about placement,
17507 // updates, and deletions. To avoid needing to add a case for every
17508 // possible bitmap value, we remove the secondary effects from the
17509 // effect tag and switch on that value.
17510 var primaryEffectTag = effectTag & (Placement | Update | Deletion);
17511 switch (primaryEffectTag) {
17512 case Placement:
17513 {
17514 commitPlacement(nextEffect);
17515 // Clear the "placement" from effect tag so that we know that this is inserted, before
17516 // any life-cycles like componentDidMount gets called.
17517 // TODO: findDOMNode doesn't rely on this any more but isMounted
17518 // does and isMounted is deprecated anyway so we should be able
17519 // to kill this.
17520 nextEffect.effectTag &= ~Placement;
17521 break;
17522 }
17523 case PlacementAndUpdate:
17524 {
17525 // Placement
17526 commitPlacement(nextEffect);
17527 // Clear the "placement" from effect tag so that we know that this is inserted, before
17528 // any life-cycles like componentDidMount gets called.
17529 nextEffect.effectTag &= ~Placement;
17530
17531 // Update
17532 var _current = nextEffect.alternate;
17533 commitWork(_current, nextEffect);
17534 break;
17535 }
17536 case Update:
17537 {
17538 var _current2 = nextEffect.alternate;
17539 commitWork(_current2, nextEffect);
17540 break;
17541 }
17542 case Deletion:
17543 {
17544 commitDeletion(nextEffect);
17545 break;
17546 }
17547 }
17548 nextEffect = nextEffect.nextEffect;
17549 }
17550
17551 {
17552 resetCurrentFiber();
17553 }
17554}
17555
17556function commitBeforeMutationLifecycles() {
17557 while (nextEffect !== null) {
17558 {
17559 setCurrentFiber(nextEffect);
17560 }
17561
17562 var effectTag = nextEffect.effectTag;
17563 if (effectTag & Snapshot) {
17564 recordEffect();
17565 var current$$1 = nextEffect.alternate;
17566 commitBeforeMutationLifeCycles(current$$1, nextEffect);
17567 }
17568
17569 nextEffect = nextEffect.nextEffect;
17570 }
17571
17572 {
17573 resetCurrentFiber();
17574 }
17575}
17576
17577function commitAllLifeCycles(finishedRoot, committedExpirationTime) {
17578 {
17579 ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings();
17580 ReactStrictModeWarnings.flushLegacyContextWarning();
17581
17582 if (warnAboutDeprecatedLifecycles) {
17583 ReactStrictModeWarnings.flushPendingDeprecationWarnings();
17584 }
17585 }
17586 while (nextEffect !== null) {
17587 var effectTag = nextEffect.effectTag;
17588
17589 if (effectTag & (Update | Callback)) {
17590 recordEffect();
17591 var current$$1 = nextEffect.alternate;
17592 commitLifeCycles(finishedRoot, current$$1, nextEffect, committedExpirationTime);
17593 }
17594
17595 if (effectTag & Ref) {
17596 recordEffect();
17597 commitAttachRef(nextEffect);
17598 }
17599
17600 if (enableHooks && effectTag & Passive) {
17601 rootWithPendingPassiveEffects = finishedRoot;
17602 }
17603
17604 nextEffect = nextEffect.nextEffect;
17605 }
17606}
17607
17608function commitPassiveEffects(root, firstEffect) {
17609 rootWithPendingPassiveEffects = null;
17610 passiveEffectCallbackHandle = null;
17611 passiveEffectCallback = null;
17612
17613 // Set this to true to prevent re-entrancy
17614 var previousIsRendering = isRendering;
17615 isRendering = true;
17616
17617 var effect = firstEffect;
17618 do {
17619 if (effect.effectTag & Passive) {
17620 var didError = false;
17621 var error = void 0;
17622 {
17623 invokeGuardedCallback(null, commitPassiveHookEffects, null, effect);
17624 if (hasCaughtError()) {
17625 didError = true;
17626 error = clearCaughtError();
17627 }
17628 }
17629 if (didError) {
17630 captureCommitPhaseError(effect, error);
17631 }
17632 }
17633 effect = effect.nextEffect;
17634 } while (effect !== null);
17635
17636 isRendering = previousIsRendering;
17637
17638 // Check if work was scheduled by one of the effects
17639 var rootExpirationTime = root.expirationTime;
17640 if (rootExpirationTime !== NoWork) {
17641 requestWork(root, rootExpirationTime);
17642 }
17643}
17644
17645function isAlreadyFailedLegacyErrorBoundary(instance) {
17646 return legacyErrorBoundariesThatAlreadyFailed !== null && legacyErrorBoundariesThatAlreadyFailed.has(instance);
17647}
17648
17649function markLegacyErrorBoundaryAsFailed(instance) {
17650 if (legacyErrorBoundariesThatAlreadyFailed === null) {
17651 legacyErrorBoundariesThatAlreadyFailed = new Set([instance]);
17652 } else {
17653 legacyErrorBoundariesThatAlreadyFailed.add(instance);
17654 }
17655}
17656
17657function flushPassiveEffects() {
17658 if (passiveEffectCallback !== null) {
17659 scheduler.unstable_cancelCallback(passiveEffectCallbackHandle);
17660 // We call the scheduled callback instead of commitPassiveEffects directly
17661 // to ensure tracing works correctly.
17662 passiveEffectCallback();
17663 }
17664}
17665
17666function commitRoot(root, finishedWork) {
17667 isWorking = true;
17668 isCommitting$1 = true;
17669 startCommitTimer();
17670
17671 !(root.current !== finishedWork) ? invariant(false, 'Cannot commit the same tree as before. This is probably a bug related to the return field. This error is likely caused by a bug in React. Please file an issue.') : void 0;
17672 var committedExpirationTime = root.pendingCommitExpirationTime;
17673 !(committedExpirationTime !== NoWork) ? invariant(false, 'Cannot commit an incomplete root. This error is likely caused by a bug in React. Please file an issue.') : void 0;
17674 root.pendingCommitExpirationTime = NoWork;
17675
17676 // Update the pending priority levels to account for the work that we are
17677 // about to commit. This needs to happen before calling the lifecycles, since
17678 // they may schedule additional updates.
17679 var updateExpirationTimeBeforeCommit = finishedWork.expirationTime;
17680 var childExpirationTimeBeforeCommit = finishedWork.childExpirationTime;
17681 var earliestRemainingTimeBeforeCommit = childExpirationTimeBeforeCommit > updateExpirationTimeBeforeCommit ? childExpirationTimeBeforeCommit : updateExpirationTimeBeforeCommit;
17682 markCommittedPriorityLevels(root, earliestRemainingTimeBeforeCommit);
17683
17684 var prevInteractions = null;
17685 if (enableSchedulerTracing) {
17686 // Restore any pending interactions at this point,
17687 // So that cascading work triggered during the render phase will be accounted for.
17688 prevInteractions = tracing.__interactionsRef.current;
17689 tracing.__interactionsRef.current = root.memoizedInteractions;
17690 }
17691
17692 // Reset this to null before calling lifecycles
17693 ReactCurrentOwner$2.current = null;
17694
17695 var firstEffect = void 0;
17696 if (finishedWork.effectTag > PerformedWork) {
17697 // A fiber's effect list consists only of its children, not itself. So if
17698 // the root has an effect, we need to add it to the end of the list. The
17699 // resulting list is the set that would belong to the root's parent, if
17700 // it had one; that is, all the effects in the tree including the root.
17701 if (finishedWork.lastEffect !== null) {
17702 finishedWork.lastEffect.nextEffect = finishedWork;
17703 firstEffect = finishedWork.firstEffect;
17704 } else {
17705 firstEffect = finishedWork;
17706 }
17707 } else {
17708 // There is no effect on the root.
17709 firstEffect = finishedWork.firstEffect;
17710 }
17711
17712 prepareForCommit(root.containerInfo);
17713
17714 // Invoke instances of getSnapshotBeforeUpdate before mutation.
17715 nextEffect = firstEffect;
17716 startCommitSnapshotEffectsTimer();
17717 while (nextEffect !== null) {
17718 var didError = false;
17719 var error = void 0;
17720 {
17721 invokeGuardedCallback(null, commitBeforeMutationLifecycles, null);
17722 if (hasCaughtError()) {
17723 didError = true;
17724 error = clearCaughtError();
17725 }
17726 }
17727 if (didError) {
17728 !(nextEffect !== null) ? invariant(false, 'Should have next effect. This error is likely caused by a bug in React. Please file an issue.') : void 0;
17729 captureCommitPhaseError(nextEffect, error);
17730 // Clean-up
17731 if (nextEffect !== null) {
17732 nextEffect = nextEffect.nextEffect;
17733 }
17734 }
17735 }
17736 stopCommitSnapshotEffectsTimer();
17737
17738 if (enableProfilerTimer) {
17739 // Mark the current commit time to be shared by all Profilers in this batch.
17740 // This enables them to be grouped later.
17741 recordCommitTime();
17742 }
17743
17744 // Commit all the side-effects within a tree. We'll do this in two passes.
17745 // The first pass performs all the host insertions, updates, deletions and
17746 // ref unmounts.
17747 nextEffect = firstEffect;
17748 startCommitHostEffectsTimer();
17749 while (nextEffect !== null) {
17750 var _didError = false;
17751 var _error = void 0;
17752 {
17753 invokeGuardedCallback(null, commitAllHostEffects, null);
17754 if (hasCaughtError()) {
17755 _didError = true;
17756 _error = clearCaughtError();
17757 }
17758 }
17759 if (_didError) {
17760 !(nextEffect !== null) ? invariant(false, 'Should have next effect. This error is likely caused by a bug in React. Please file an issue.') : void 0;
17761 captureCommitPhaseError(nextEffect, _error);
17762 // Clean-up
17763 if (nextEffect !== null) {
17764 nextEffect = nextEffect.nextEffect;
17765 }
17766 }
17767 }
17768 stopCommitHostEffectsTimer();
17769
17770 resetAfterCommit(root.containerInfo);
17771
17772 // The work-in-progress tree is now the current tree. This must come after
17773 // the first pass of the commit phase, so that the previous tree is still
17774 // current during componentWillUnmount, but before the second pass, so that
17775 // the finished work is current during componentDidMount/Update.
17776 root.current = finishedWork;
17777
17778 // In the second pass we'll perform all life-cycles and ref callbacks.
17779 // Life-cycles happen as a separate pass so that all placements, updates,
17780 // and deletions in the entire tree have already been invoked.
17781 // This pass also triggers any renderer-specific initial effects.
17782 nextEffect = firstEffect;
17783 startCommitLifeCyclesTimer();
17784 while (nextEffect !== null) {
17785 var _didError2 = false;
17786 var _error2 = void 0;
17787 {
17788 invokeGuardedCallback(null, commitAllLifeCycles, null, root, committedExpirationTime);
17789 if (hasCaughtError()) {
17790 _didError2 = true;
17791 _error2 = clearCaughtError();
17792 }
17793 }
17794 if (_didError2) {
17795 !(nextEffect !== null) ? invariant(false, 'Should have next effect. This error is likely caused by a bug in React. Please file an issue.') : void 0;
17796 captureCommitPhaseError(nextEffect, _error2);
17797 if (nextEffect !== null) {
17798 nextEffect = nextEffect.nextEffect;
17799 }
17800 }
17801 }
17802
17803 if (enableHooks && firstEffect !== null && rootWithPendingPassiveEffects !== null) {
17804 // This commit included a passive effect. These do not need to fire until
17805 // after the next paint. Schedule an callback to fire them in an async
17806 // event. To ensure serial execution, the callback will be flushed early if
17807 // we enter rootWithPendingPassiveEffects commit phase before then.
17808 var callback = commitPassiveEffects.bind(null, root, firstEffect);
17809 if (enableSchedulerTracing) {
17810 // TODO: Avoid this extra callback by mutating the tracing ref directly,
17811 // like we do at the beginning of commitRoot. I've opted not to do that
17812 // here because that code is still in flux.
17813 callback = tracing.unstable_wrap(callback);
17814 }
17815 passiveEffectCallbackHandle = scheduler.unstable_scheduleCallback(callback);
17816 passiveEffectCallback = callback;
17817 }
17818
17819 isCommitting$1 = false;
17820 isWorking = false;
17821 stopCommitLifeCyclesTimer();
17822 stopCommitTimer();
17823 onCommitRoot(finishedWork.stateNode);
17824 if (true && ReactFiberInstrumentation_1.debugTool) {
17825 ReactFiberInstrumentation_1.debugTool.onCommitWork(finishedWork);
17826 }
17827
17828 var updateExpirationTimeAfterCommit = finishedWork.expirationTime;
17829 var childExpirationTimeAfterCommit = finishedWork.childExpirationTime;
17830 var earliestRemainingTimeAfterCommit = childExpirationTimeAfterCommit > updateExpirationTimeAfterCommit ? childExpirationTimeAfterCommit : updateExpirationTimeAfterCommit;
17831 if (earliestRemainingTimeAfterCommit === NoWork) {
17832 // If there's no remaining work, we can clear the set of already failed
17833 // error boundaries.
17834 legacyErrorBoundariesThatAlreadyFailed = null;
17835 }
17836 onCommit(root, earliestRemainingTimeAfterCommit);
17837
17838 if (enableSchedulerTracing) {
17839 tracing.__interactionsRef.current = prevInteractions;
17840
17841 var subscriber = void 0;
17842
17843 try {
17844 subscriber = tracing.__subscriberRef.current;
17845 if (subscriber !== null && root.memoizedInteractions.size > 0) {
17846 var threadID = computeThreadID(committedExpirationTime, root.interactionThreadID);
17847 subscriber.onWorkStopped(root.memoizedInteractions, threadID);
17848 }
17849 } catch (error) {
17850 // It's not safe for commitRoot() to throw.
17851 // Store the error for now and we'll re-throw in finishRendering().
17852 if (!hasUnhandledError) {
17853 hasUnhandledError = true;
17854 unhandledError = error;
17855 }
17856 } finally {
17857 // Clear completed interactions from the pending Map.
17858 // Unless the render was suspended or cascading work was scheduled,
17859 // In which case– leave pending interactions until the subsequent render.
17860 var pendingInteractionMap = root.pendingInteractionMap;
17861 pendingInteractionMap.forEach(function (scheduledInteractions, scheduledExpirationTime) {
17862 // Only decrement the pending interaction count if we're done.
17863 // If there's still work at the current priority,
17864 // That indicates that we are waiting for suspense data.
17865 if (scheduledExpirationTime > earliestRemainingTimeAfterCommit) {
17866 pendingInteractionMap.delete(scheduledExpirationTime);
17867
17868 scheduledInteractions.forEach(function (interaction) {
17869 interaction.__count--;
17870
17871 if (subscriber !== null && interaction.__count === 0) {
17872 try {
17873 subscriber.onInteractionScheduledWorkCompleted(interaction);
17874 } catch (error) {
17875 // It's not safe for commitRoot() to throw.
17876 // Store the error for now and we'll re-throw in finishRendering().
17877 if (!hasUnhandledError) {
17878 hasUnhandledError = true;
17879 unhandledError = error;
17880 }
17881 }
17882 }
17883 });
17884 }
17885 });
17886 }
17887 }
17888}
17889
17890function resetChildExpirationTime(workInProgress, renderTime) {
17891 if (renderTime !== Never && workInProgress.childExpirationTime === Never) {
17892 // The children of this component are hidden. Don't bubble their
17893 // expiration times.
17894 return;
17895 }
17896
17897 var newChildExpirationTime = NoWork;
17898
17899 // Bubble up the earliest expiration time.
17900 if (enableProfilerTimer && workInProgress.mode & ProfileMode) {
17901 // We're in profiling mode.
17902 // Let's use this same traversal to update the render durations.
17903 var actualDuration = workInProgress.actualDuration;
17904 var treeBaseDuration = workInProgress.selfBaseDuration;
17905
17906 // When a fiber is cloned, its actualDuration is reset to 0.
17907 // This value will only be updated if work is done on the fiber (i.e. it doesn't bailout).
17908 // When work is done, it should bubble to the parent's actualDuration.
17909 // If the fiber has not been cloned though, (meaning no work was done),
17910 // Then this value will reflect the amount of time spent working on a previous render.
17911 // In that case it should not bubble.
17912 // We determine whether it was cloned by comparing the child pointer.
17913 var shouldBubbleActualDurations = workInProgress.alternate === null || workInProgress.child !== workInProgress.alternate.child;
17914
17915 var child = workInProgress.child;
17916 while (child !== null) {
17917 var childUpdateExpirationTime = child.expirationTime;
17918 var childChildExpirationTime = child.childExpirationTime;
17919 if (childUpdateExpirationTime > newChildExpirationTime) {
17920 newChildExpirationTime = childUpdateExpirationTime;
17921 }
17922 if (childChildExpirationTime > newChildExpirationTime) {
17923 newChildExpirationTime = childChildExpirationTime;
17924 }
17925 if (shouldBubbleActualDurations) {
17926 actualDuration += child.actualDuration;
17927 }
17928 treeBaseDuration += child.treeBaseDuration;
17929 child = child.sibling;
17930 }
17931 workInProgress.actualDuration = actualDuration;
17932 workInProgress.treeBaseDuration = treeBaseDuration;
17933 } else {
17934 var _child = workInProgress.child;
17935 while (_child !== null) {
17936 var _childUpdateExpirationTime = _child.expirationTime;
17937 var _childChildExpirationTime = _child.childExpirationTime;
17938 if (_childUpdateExpirationTime > newChildExpirationTime) {
17939 newChildExpirationTime = _childUpdateExpirationTime;
17940 }
17941 if (_childChildExpirationTime > newChildExpirationTime) {
17942 newChildExpirationTime = _childChildExpirationTime;
17943 }
17944 _child = _child.sibling;
17945 }
17946 }
17947
17948 workInProgress.childExpirationTime = newChildExpirationTime;
17949}
17950
17951function completeUnitOfWork(workInProgress) {
17952 // Attempt to complete the current unit of work, then move to the
17953 // next sibling. If there are no more siblings, return to the
17954 // parent fiber.
17955 while (true) {
17956 // The current, flushed, state of this fiber is the alternate.
17957 // Ideally nothing should rely on this, but relying on it here
17958 // means that we don't need an additional field on the work in
17959 // progress.
17960 var current$$1 = workInProgress.alternate;
17961 {
17962 setCurrentFiber(workInProgress);
17963 }
17964
17965 var returnFiber = workInProgress.return;
17966 var siblingFiber = workInProgress.sibling;
17967
17968 if ((workInProgress.effectTag & Incomplete) === NoEffect) {
17969 if (true && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
17970 // Don't replay if it fails during completion phase.
17971 mayReplayFailedUnitOfWork = false;
17972 }
17973 // This fiber completed.
17974 // Remember we're completing this unit so we can find a boundary if it fails.
17975 nextUnitOfWork = workInProgress;
17976 if (enableProfilerTimer) {
17977 if (workInProgress.mode & ProfileMode) {
17978 startProfilerTimer(workInProgress);
17979 }
17980 nextUnitOfWork = completeWork(current$$1, workInProgress, nextRenderExpirationTime);
17981 if (workInProgress.mode & ProfileMode) {
17982 // Update render duration assuming we didn't error.
17983 stopProfilerTimerIfRunningAndRecordDelta(workInProgress, false);
17984 }
17985 } else {
17986 nextUnitOfWork = completeWork(current$$1, workInProgress, nextRenderExpirationTime);
17987 }
17988 if (true && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
17989 // We're out of completion phase so replaying is fine now.
17990 mayReplayFailedUnitOfWork = true;
17991 }
17992 stopWorkTimer(workInProgress);
17993 resetChildExpirationTime(workInProgress, nextRenderExpirationTime);
17994 {
17995 resetCurrentFiber();
17996 }
17997
17998 if (nextUnitOfWork !== null) {
17999 // Completing this fiber spawned new work. Work on that next.
18000 return nextUnitOfWork;
18001 }
18002
18003 if (returnFiber !== null &&
18004 // Do not append effects to parents if a sibling failed to complete
18005 (returnFiber.effectTag & Incomplete) === NoEffect) {
18006 // Append all the effects of the subtree and this fiber onto the effect
18007 // list of the parent. The completion order of the children affects the
18008 // side-effect order.
18009 if (returnFiber.firstEffect === null) {
18010 returnFiber.firstEffect = workInProgress.firstEffect;
18011 }
18012 if (workInProgress.lastEffect !== null) {
18013 if (returnFiber.lastEffect !== null) {
18014 returnFiber.lastEffect.nextEffect = workInProgress.firstEffect;
18015 }
18016 returnFiber.lastEffect = workInProgress.lastEffect;
18017 }
18018
18019 // If this fiber had side-effects, we append it AFTER the children's
18020 // side-effects. We can perform certain side-effects earlier if
18021 // needed, by doing multiple passes over the effect list. We don't want
18022 // to schedule our own side-effect on our own list because if end up
18023 // reusing children we'll schedule this effect onto itself since we're
18024 // at the end.
18025 var effectTag = workInProgress.effectTag;
18026 // Skip both NoWork and PerformedWork tags when creating the effect list.
18027 // PerformedWork effect is read by React DevTools but shouldn't be committed.
18028 if (effectTag > PerformedWork) {
18029 if (returnFiber.lastEffect !== null) {
18030 returnFiber.lastEffect.nextEffect = workInProgress;
18031 } else {
18032 returnFiber.firstEffect = workInProgress;
18033 }
18034 returnFiber.lastEffect = workInProgress;
18035 }
18036 }
18037
18038 if (true && ReactFiberInstrumentation_1.debugTool) {
18039 ReactFiberInstrumentation_1.debugTool.onCompleteWork(workInProgress);
18040 }
18041
18042 if (siblingFiber !== null) {
18043 // If there is more work to do in this returnFiber, do that next.
18044 return siblingFiber;
18045 } else if (returnFiber !== null) {
18046 // If there's no more work in this returnFiber. Complete the returnFiber.
18047 workInProgress = returnFiber;
18048 continue;
18049 } else {
18050 // We've reached the root.
18051 return null;
18052 }
18053 } else {
18054 if (enableProfilerTimer && workInProgress.mode & ProfileMode) {
18055 // Record the render duration for the fiber that errored.
18056 stopProfilerTimerIfRunningAndRecordDelta(workInProgress, false);
18057
18058 // Include the time spent working on failed children before continuing.
18059 var actualDuration = workInProgress.actualDuration;
18060 var child = workInProgress.child;
18061 while (child !== null) {
18062 actualDuration += child.actualDuration;
18063 child = child.sibling;
18064 }
18065 workInProgress.actualDuration = actualDuration;
18066 }
18067
18068 // This fiber did not complete because something threw. Pop values off
18069 // the stack without entering the complete phase. If this is a boundary,
18070 // capture values if possible.
18071 var next = unwindWork(workInProgress, nextRenderExpirationTime);
18072 // Because this fiber did not complete, don't reset its expiration time.
18073 if (workInProgress.effectTag & DidCapture) {
18074 // Restarting an error boundary
18075 stopFailedWorkTimer(workInProgress);
18076 } else {
18077 stopWorkTimer(workInProgress);
18078 }
18079
18080 {
18081 resetCurrentFiber();
18082 }
18083
18084 if (next !== null) {
18085 stopWorkTimer(workInProgress);
18086 if (true && ReactFiberInstrumentation_1.debugTool) {
18087 ReactFiberInstrumentation_1.debugTool.onCompleteWork(workInProgress);
18088 }
18089
18090 // If completing this work spawned new work, do that next. We'll come
18091 // back here again.
18092 // Since we're restarting, remove anything that is not a host effect
18093 // from the effect tag.
18094 next.effectTag &= HostEffectMask;
18095 return next;
18096 }
18097
18098 if (returnFiber !== null) {
18099 // Mark the parent fiber as incomplete and clear its effect list.
18100 returnFiber.firstEffect = returnFiber.lastEffect = null;
18101 returnFiber.effectTag |= Incomplete;
18102 }
18103
18104 if (true && ReactFiberInstrumentation_1.debugTool) {
18105 ReactFiberInstrumentation_1.debugTool.onCompleteWork(workInProgress);
18106 }
18107
18108 if (siblingFiber !== null) {
18109 // If there is more work to do in this returnFiber, do that next.
18110 return siblingFiber;
18111 } else if (returnFiber !== null) {
18112 // If there's no more work in this returnFiber. Complete the returnFiber.
18113 workInProgress = returnFiber;
18114 continue;
18115 } else {
18116 return null;
18117 }
18118 }
18119 }
18120
18121 // Without this explicit null return Flow complains of invalid return type
18122 // TODO Remove the above while(true) loop
18123 // eslint-disable-next-line no-unreachable
18124 return null;
18125}
18126
18127function performUnitOfWork(workInProgress) {
18128 // The current, flushed, state of this fiber is the alternate.
18129 // Ideally nothing should rely on this, but relying on it here
18130 // means that we don't need an additional field on the work in
18131 // progress.
18132 var current$$1 = workInProgress.alternate;
18133
18134 // See if beginning this work spawns more work.
18135 startWorkTimer(workInProgress);
18136 {
18137 setCurrentFiber(workInProgress);
18138 }
18139
18140 if (true && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
18141 stashedWorkInProgressProperties = assignFiberPropertiesInDEV(stashedWorkInProgressProperties, workInProgress);
18142 }
18143
18144 var next = void 0;
18145 if (enableProfilerTimer) {
18146 if (workInProgress.mode & ProfileMode) {
18147 startProfilerTimer(workInProgress);
18148 }
18149
18150 next = beginWork(current$$1, workInProgress, nextRenderExpirationTime);
18151 workInProgress.memoizedProps = workInProgress.pendingProps;
18152
18153 if (workInProgress.mode & ProfileMode) {
18154 // Record the render duration assuming we didn't bailout (or error).
18155 stopProfilerTimerIfRunningAndRecordDelta(workInProgress, true);
18156 }
18157 } else {
18158 next = beginWork(current$$1, workInProgress, nextRenderExpirationTime);
18159 workInProgress.memoizedProps = workInProgress.pendingProps;
18160 }
18161
18162 {
18163 resetCurrentFiber();
18164 if (isReplayingFailedUnitOfWork) {
18165 // Currently replaying a failed unit of work. This should be unreachable,
18166 // because the render phase is meant to be idempotent, and it should
18167 // have thrown again. Since it didn't, rethrow the original error, so
18168 // React's internal stack is not misaligned.
18169 rethrowOriginalError();
18170 }
18171 }
18172 if (true && ReactFiberInstrumentation_1.debugTool) {
18173 ReactFiberInstrumentation_1.debugTool.onBeginWork(workInProgress);
18174 }
18175
18176 if (next === null) {
18177 // If this doesn't spawn new work, complete the current work.
18178 next = completeUnitOfWork(workInProgress);
18179 }
18180
18181 ReactCurrentOwner$2.current = null;
18182
18183 return next;
18184}
18185
18186function workLoop(isYieldy) {
18187 if (!isYieldy) {
18188 // Flush work without yielding
18189 while (nextUnitOfWork !== null) {
18190 nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
18191 }
18192 } else {
18193 // Flush asynchronous work until there's a higher priority event
18194 while (nextUnitOfWork !== null && !shouldYieldToRenderer()) {
18195 nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
18196 }
18197 }
18198}
18199
18200function renderRoot(root, isYieldy) {
18201 !!isWorking ? invariant(false, 'renderRoot was called recursively. This error is likely caused by a bug in React. Please file an issue.') : void 0;
18202
18203 flushPassiveEffects();
18204
18205 isWorking = true;
18206 if (enableHooks) {
18207 ReactCurrentOwner$2.currentDispatcher = Dispatcher;
18208 } else {
18209 ReactCurrentOwner$2.currentDispatcher = DispatcherWithoutHooks;
18210 }
18211
18212 var expirationTime = root.nextExpirationTimeToWorkOn;
18213
18214 // Check if we're starting from a fresh stack, or if we're resuming from
18215 // previously yielded work.
18216 if (expirationTime !== nextRenderExpirationTime || root !== nextRoot || nextUnitOfWork === null) {
18217 // Reset the stack and start working from the root.
18218 resetStack();
18219 nextRoot = root;
18220 nextRenderExpirationTime = expirationTime;
18221 nextUnitOfWork = createWorkInProgress(nextRoot.current, null, nextRenderExpirationTime);
18222 root.pendingCommitExpirationTime = NoWork;
18223
18224 if (enableSchedulerTracing) {
18225 // Determine which interactions this batch of work currently includes,
18226 // So that we can accurately attribute time spent working on it,
18227 var interactions = new Set();
18228 root.pendingInteractionMap.forEach(function (scheduledInteractions, scheduledExpirationTime) {
18229 if (scheduledExpirationTime >= expirationTime) {
18230 scheduledInteractions.forEach(function (interaction) {
18231 return interactions.add(interaction);
18232 });
18233 }
18234 });
18235
18236 // Store the current set of interactions on the FiberRoot for a few reasons:
18237 // We can re-use it in hot functions like renderRoot() without having to recalculate it.
18238 // We will also use it in commitWork() to pass to any Profiler onRender() hooks.
18239 // This also provides DevTools with a way to access it when the onCommitRoot() hook is called.
18240 root.memoizedInteractions = interactions;
18241
18242 if (interactions.size > 0) {
18243 var subscriber = tracing.__subscriberRef.current;
18244 if (subscriber !== null) {
18245 var threadID = computeThreadID(expirationTime, root.interactionThreadID);
18246 try {
18247 subscriber.onWorkStarted(interactions, threadID);
18248 } catch (error) {
18249 // Work thrown by an interaction tracing subscriber should be rethrown,
18250 // But only once it's safe (to avoid leaveing the scheduler in an invalid state).
18251 // Store the error for now and we'll re-throw in finishRendering().
18252 if (!hasUnhandledError) {
18253 hasUnhandledError = true;
18254 unhandledError = error;
18255 }
18256 }
18257 }
18258 }
18259 }
18260 }
18261
18262 var prevInteractions = null;
18263 if (enableSchedulerTracing) {
18264 // We're about to start new traced work.
18265 // Restore pending interactions so cascading work triggered during the render phase will be accounted for.
18266 prevInteractions = tracing.__interactionsRef.current;
18267 tracing.__interactionsRef.current = root.memoizedInteractions;
18268 }
18269
18270 var didFatal = false;
18271
18272 startWorkLoopTimer(nextUnitOfWork);
18273
18274 do {
18275 try {
18276 workLoop(isYieldy);
18277 } catch (thrownValue) {
18278 resetContextDependences();
18279 resetHooks();
18280
18281 // Reset in case completion throws.
18282 // This is only used in DEV and when replaying is on.
18283 var mayReplay = void 0;
18284 if (true && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
18285 mayReplay = mayReplayFailedUnitOfWork;
18286 mayReplayFailedUnitOfWork = true;
18287 }
18288
18289 if (nextUnitOfWork === null) {
18290 // This is a fatal error.
18291 didFatal = true;
18292 onUncaughtError(thrownValue);
18293 } else {
18294 if (enableProfilerTimer && nextUnitOfWork.mode & ProfileMode) {
18295 // Record the time spent rendering before an error was thrown.
18296 // This avoids inaccurate Profiler durations in the case of a suspended render.
18297 stopProfilerTimerIfRunningAndRecordDelta(nextUnitOfWork, true);
18298 }
18299
18300 {
18301 // Reset global debug state
18302 // We assume this is defined in DEV
18303 resetCurrentlyProcessingQueue();
18304 }
18305
18306 if (true && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
18307 if (mayReplay) {
18308 var failedUnitOfWork = nextUnitOfWork;
18309 replayUnitOfWork(failedUnitOfWork, thrownValue, isYieldy);
18310 }
18311 }
18312
18313 // TODO: we already know this isn't true in some cases.
18314 // At least this shows a nicer error message until we figure out the cause.
18315 // https://github.com/facebook/react/issues/12449#issuecomment-386727431
18316 !(nextUnitOfWork !== null) ? invariant(false, 'Failed to replay rendering after an error. This is likely caused by a bug in React. Please file an issue with a reproducing case to help us find it.') : void 0;
18317
18318 var sourceFiber = nextUnitOfWork;
18319 var returnFiber = sourceFiber.return;
18320 if (returnFiber === null) {
18321 // This is the root. The root could capture its own errors. However,
18322 // we don't know if it errors before or after we pushed the host
18323 // context. This information is needed to avoid a stack mismatch.
18324 // Because we're not sure, treat this as a fatal error. We could track
18325 // which phase it fails in, but doesn't seem worth it. At least
18326 // for now.
18327 didFatal = true;
18328 onUncaughtError(thrownValue);
18329 } else {
18330 throwException(root, returnFiber, sourceFiber, thrownValue, nextRenderExpirationTime);
18331 nextUnitOfWork = completeUnitOfWork(sourceFiber);
18332 continue;
18333 }
18334 }
18335 }
18336 break;
18337 } while (true);
18338
18339 if (enableSchedulerTracing) {
18340 // Traced work is done for now; restore the previous interactions.
18341 tracing.__interactionsRef.current = prevInteractions;
18342 }
18343
18344 // We're done performing work. Time to clean up.
18345 isWorking = false;
18346 ReactCurrentOwner$2.currentDispatcher = null;
18347 resetContextDependences();
18348 resetHooks();
18349
18350 // Yield back to main thread.
18351 if (didFatal) {
18352 var _didCompleteRoot = false;
18353 stopWorkLoopTimer(interruptedBy, _didCompleteRoot);
18354 interruptedBy = null;
18355 // There was a fatal error.
18356 {
18357 resetStackAfterFatalErrorInDev();
18358 }
18359 // `nextRoot` points to the in-progress root. A non-null value indicates
18360 // that we're in the middle of an async render. Set it to null to indicate
18361 // there's no more work to be done in the current batch.
18362 nextRoot = null;
18363 onFatal(root);
18364 return;
18365 }
18366
18367 if (nextUnitOfWork !== null) {
18368 // There's still remaining async work in this tree, but we ran out of time
18369 // in the current frame. Yield back to the renderer. Unless we're
18370 // interrupted by a higher priority update, we'll continue later from where
18371 // we left off.
18372 var _didCompleteRoot2 = false;
18373 stopWorkLoopTimer(interruptedBy, _didCompleteRoot2);
18374 interruptedBy = null;
18375 onYield(root);
18376 return;
18377 }
18378
18379 // We completed the whole tree.
18380 var didCompleteRoot = true;
18381 stopWorkLoopTimer(interruptedBy, didCompleteRoot);
18382 var rootWorkInProgress = root.current.alternate;
18383 !(rootWorkInProgress !== null) ? invariant(false, 'Finished root should have a work-in-progress. This error is likely caused by a bug in React. Please file an issue.') : void 0;
18384
18385 // `nextRoot` points to the in-progress root. A non-null value indicates
18386 // that we're in the middle of an async render. Set it to null to indicate
18387 // there's no more work to be done in the current batch.
18388 nextRoot = null;
18389 interruptedBy = null;
18390
18391 if (nextRenderDidError) {
18392 // There was an error
18393 if (hasLowerPriorityWork(root, expirationTime)) {
18394 // There's lower priority work. If so, it may have the effect of fixing
18395 // the exception that was just thrown. Exit without committing. This is
18396 // similar to a suspend, but without a timeout because we're not waiting
18397 // for a promise to resolve. React will restart at the lower
18398 // priority level.
18399 markSuspendedPriorityLevel(root, expirationTime);
18400 var suspendedExpirationTime = expirationTime;
18401 var rootExpirationTime = root.expirationTime;
18402 onSuspend(root, rootWorkInProgress, suspendedExpirationTime, rootExpirationTime, -1 // Indicates no timeout
18403 );
18404 return;
18405 } else if (
18406 // There's no lower priority work, but we're rendering asynchronously.
18407 // Synchronsouly attempt to render the same level one more time. This is
18408 // similar to a suspend, but without a timeout because we're not waiting
18409 // for a promise to resolve.
18410 !root.didError && isYieldy) {
18411 root.didError = true;
18412 var _suspendedExpirationTime = root.nextExpirationTimeToWorkOn = expirationTime;
18413 var _rootExpirationTime = root.expirationTime = Sync;
18414 onSuspend(root, rootWorkInProgress, _suspendedExpirationTime, _rootExpirationTime, -1 // Indicates no timeout
18415 );
18416 return;
18417 }
18418 }
18419
18420 if (isYieldy && nextLatestAbsoluteTimeoutMs !== -1) {
18421 // The tree was suspended.
18422 var _suspendedExpirationTime2 = expirationTime;
18423 markSuspendedPriorityLevel(root, _suspendedExpirationTime2);
18424
18425 // Find the earliest uncommitted expiration time in the tree, including
18426 // work that is suspended. The timeout threshold cannot be longer than
18427 // the overall expiration.
18428 var earliestExpirationTime = findEarliestOutstandingPriorityLevel(root, expirationTime);
18429 var earliestExpirationTimeMs = expirationTimeToMs(earliestExpirationTime);
18430 if (earliestExpirationTimeMs < nextLatestAbsoluteTimeoutMs) {
18431 nextLatestAbsoluteTimeoutMs = earliestExpirationTimeMs;
18432 }
18433
18434 // Subtract the current time from the absolute timeout to get the number
18435 // of milliseconds until the timeout. In other words, convert an absolute
18436 // timestamp to a relative time. This is the value that is passed
18437 // to `setTimeout`.
18438 var currentTimeMs = expirationTimeToMs(requestCurrentTime());
18439 var msUntilTimeout = nextLatestAbsoluteTimeoutMs - currentTimeMs;
18440 msUntilTimeout = msUntilTimeout < 0 ? 0 : msUntilTimeout;
18441
18442 // TODO: Account for the Just Noticeable Difference
18443
18444 var _rootExpirationTime2 = root.expirationTime;
18445 onSuspend(root, rootWorkInProgress, _suspendedExpirationTime2, _rootExpirationTime2, msUntilTimeout);
18446 return;
18447 }
18448
18449 // Ready to commit.
18450 onComplete(root, rootWorkInProgress, expirationTime);
18451}
18452
18453function captureCommitPhaseError(sourceFiber, value) {
18454 var expirationTime = Sync;
18455 var fiber = sourceFiber.return;
18456 while (fiber !== null) {
18457 switch (fiber.tag) {
18458 case ClassComponent:
18459 var ctor = fiber.type;
18460 var instance = fiber.stateNode;
18461 if (typeof ctor.getDerivedStateFromError === 'function' || typeof instance.componentDidCatch === 'function' && !isAlreadyFailedLegacyErrorBoundary(instance)) {
18462 var errorInfo = createCapturedValue(value, sourceFiber);
18463 var update = createClassErrorUpdate(fiber, errorInfo, expirationTime);
18464 enqueueUpdate(fiber, update);
18465 scheduleWork(fiber, expirationTime);
18466 return;
18467 }
18468 break;
18469 case HostRoot:
18470 {
18471 var _errorInfo = createCapturedValue(value, sourceFiber);
18472 var _update = createRootErrorUpdate(fiber, _errorInfo, expirationTime);
18473 enqueueUpdate(fiber, _update);
18474 scheduleWork(fiber, expirationTime);
18475 return;
18476 }
18477 }
18478 fiber = fiber.return;
18479 }
18480
18481 if (sourceFiber.tag === HostRoot) {
18482 // Error was thrown at the root. There is no parent, so the root
18483 // itself should capture it.
18484 var rootFiber = sourceFiber;
18485 var _errorInfo2 = createCapturedValue(value, rootFiber);
18486 var _update2 = createRootErrorUpdate(rootFiber, _errorInfo2, expirationTime);
18487 enqueueUpdate(rootFiber, _update2);
18488 scheduleWork(rootFiber, expirationTime);
18489 }
18490}
18491
18492function computeThreadID(expirationTime, interactionThreadID) {
18493 // Interaction threads are unique per root and expiration time.
18494 return expirationTime * 1000 + interactionThreadID;
18495}
18496
18497// Creates a unique async expiration time.
18498function computeUniqueAsyncExpiration() {
18499 var currentTime = requestCurrentTime();
18500 var result = computeAsyncExpiration(currentTime);
18501 if (result >= lastUniqueAsyncExpiration) {
18502 // Since we assume the current time monotonically increases, we only hit
18503 // this branch when computeUniqueAsyncExpiration is fired multiple times
18504 // within a 200ms window (or whatever the async bucket size is).
18505 result = lastUniqueAsyncExpiration - 1;
18506 }
18507 lastUniqueAsyncExpiration = result;
18508 return lastUniqueAsyncExpiration;
18509}
18510
18511function computeExpirationForFiber(currentTime, fiber) {
18512 var expirationTime = void 0;
18513 if (expirationContext !== NoWork) {
18514 // An explicit expiration context was set;
18515 expirationTime = expirationContext;
18516 } else if (isWorking) {
18517 if (isCommitting$1) {
18518 // Updates that occur during the commit phase should have sync priority
18519 // by default.
18520 expirationTime = Sync;
18521 } else {
18522 // Updates during the render phase should expire at the same time as
18523 // the work that is being rendered.
18524 expirationTime = nextRenderExpirationTime;
18525 }
18526 } else {
18527 // No explicit expiration context was set, and we're not currently
18528 // performing work. Calculate a new expiration time.
18529 if (fiber.mode & ConcurrentMode) {
18530 if (isBatchingInteractiveUpdates) {
18531 // This is an interactive update
18532 expirationTime = computeInteractiveExpiration(currentTime);
18533 } else {
18534 // This is an async update
18535 expirationTime = computeAsyncExpiration(currentTime);
18536 }
18537 // If we're in the middle of rendering a tree, do not update at the same
18538 // expiration time that is already rendering.
18539 if (nextRoot !== null && expirationTime === nextRenderExpirationTime) {
18540 expirationTime -= 1;
18541 }
18542 } else {
18543 // This is a sync update
18544 expirationTime = Sync;
18545 }
18546 }
18547 if (isBatchingInteractiveUpdates) {
18548 // This is an interactive update. Keep track of the lowest pending
18549 // interactive expiration time. This allows us to synchronously flush
18550 // all interactive updates when needed.
18551 if (lowestPriorityPendingInteractiveExpirationTime === NoWork || expirationTime < lowestPriorityPendingInteractiveExpirationTime) {
18552 lowestPriorityPendingInteractiveExpirationTime = expirationTime;
18553 }
18554 }
18555 return expirationTime;
18556}
18557
18558function renderDidSuspend(root, absoluteTimeoutMs, suspendedTime) {
18559 // Schedule the timeout.
18560 if (absoluteTimeoutMs >= 0 && nextLatestAbsoluteTimeoutMs < absoluteTimeoutMs) {
18561 nextLatestAbsoluteTimeoutMs = absoluteTimeoutMs;
18562 }
18563}
18564
18565function renderDidError() {
18566 nextRenderDidError = true;
18567}
18568
18569function pingSuspendedRoot(root, thenable, pingTime) {
18570 // A promise that previously suspended React from committing has resolved.
18571 // If React is still suspended, try again at the previous level (pingTime).
18572
18573 var pingCache = root.pingCache;
18574 if (pingCache !== null) {
18575 // The thenable resolved, so we no longer need to memoize, because it will
18576 // never be thrown again.
18577 pingCache.delete(thenable);
18578 }
18579
18580 if (nextRoot !== null && nextRenderExpirationTime === pingTime) {
18581 // Received a ping at the same priority level at which we're currently
18582 // rendering. Restart from the root.
18583 nextRoot = null;
18584 } else {
18585 // Confirm that the root is still suspended at this level. Otherwise exit.
18586 if (isPriorityLevelSuspended(root, pingTime)) {
18587 // Ping at the original level
18588 markPingedPriorityLevel(root, pingTime);
18589 var rootExpirationTime = root.expirationTime;
18590 if (rootExpirationTime !== NoWork) {
18591 requestWork(root, rootExpirationTime);
18592 }
18593 }
18594 }
18595}
18596
18597function retryTimedOutBoundary(boundaryFiber, thenable) {
18598 // The boundary fiber (a Suspense component) previously timed out and was
18599 // rendered in its fallback state. One of the promises that suspended it has
18600 // resolved, which means at least part of the tree was likely unblocked. Try
18601 var retryCache = boundaryFiber.stateNode;
18602 if (retryCache !== null) {
18603 // The thenable resolved, so we no longer need to memoize, because it will
18604 // never be thrown again.
18605 retryCache.delete(thenable);
18606 }
18607
18608 var currentTime = requestCurrentTime();
18609 var retryTime = computeExpirationForFiber(currentTime, boundaryFiber);
18610 var root = scheduleWorkToRoot(boundaryFiber, retryTime);
18611 if (root !== null) {
18612 markPendingPriorityLevel(root, retryTime);
18613 var rootExpirationTime = root.expirationTime;
18614 if (rootExpirationTime !== NoWork) {
18615 requestWork(root, rootExpirationTime);
18616 }
18617 }
18618}
18619
18620function scheduleWorkToRoot(fiber, expirationTime) {
18621 recordScheduleUpdate();
18622
18623 {
18624 if (fiber.tag === ClassComponent) {
18625 var instance = fiber.stateNode;
18626 warnAboutInvalidUpdates(instance);
18627 }
18628 }
18629
18630 // Update the source fiber's expiration time
18631 if (fiber.expirationTime < expirationTime) {
18632 fiber.expirationTime = expirationTime;
18633 }
18634 var alternate = fiber.alternate;
18635 if (alternate !== null && alternate.expirationTime < expirationTime) {
18636 alternate.expirationTime = expirationTime;
18637 }
18638 // Walk the parent path to the root and update the child expiration time.
18639 var node = fiber.return;
18640 var root = null;
18641 if (node === null && fiber.tag === HostRoot) {
18642 root = fiber.stateNode;
18643 } else {
18644 while (node !== null) {
18645 alternate = node.alternate;
18646 if (node.childExpirationTime < expirationTime) {
18647 node.childExpirationTime = expirationTime;
18648 if (alternate !== null && alternate.childExpirationTime < expirationTime) {
18649 alternate.childExpirationTime = expirationTime;
18650 }
18651 } else if (alternate !== null && alternate.childExpirationTime < expirationTime) {
18652 alternate.childExpirationTime = expirationTime;
18653 }
18654 if (node.return === null && node.tag === HostRoot) {
18655 root = node.stateNode;
18656 break;
18657 }
18658 node = node.return;
18659 }
18660 }
18661
18662 if (enableSchedulerTracing) {
18663 if (root !== null) {
18664 var interactions = tracing.__interactionsRef.current;
18665 if (interactions.size > 0) {
18666 var pendingInteractionMap = root.pendingInteractionMap;
18667 var pendingInteractions = pendingInteractionMap.get(expirationTime);
18668 if (pendingInteractions != null) {
18669 interactions.forEach(function (interaction) {
18670 if (!pendingInteractions.has(interaction)) {
18671 // Update the pending async work count for previously unscheduled interaction.
18672 interaction.__count++;
18673 }
18674
18675 pendingInteractions.add(interaction);
18676 });
18677 } else {
18678 pendingInteractionMap.set(expirationTime, new Set(interactions));
18679
18680 // Update the pending async work count for the current interactions.
18681 interactions.forEach(function (interaction) {
18682 interaction.__count++;
18683 });
18684 }
18685
18686 var subscriber = tracing.__subscriberRef.current;
18687 if (subscriber !== null) {
18688 var threadID = computeThreadID(expirationTime, root.interactionThreadID);
18689 subscriber.onWorkScheduled(interactions, threadID);
18690 }
18691 }
18692 }
18693 }
18694 return root;
18695}
18696
18697function scheduleWork(fiber, expirationTime) {
18698 var root = scheduleWorkToRoot(fiber, expirationTime);
18699 if (root === null) {
18700 {
18701 switch (fiber.tag) {
18702 case ClassComponent:
18703 warnAboutUpdateOnUnmounted(fiber, true);
18704 break;
18705 case FunctionComponent:
18706 case ForwardRef:
18707 case MemoComponent:
18708 case SimpleMemoComponent:
18709 warnAboutUpdateOnUnmounted(fiber, false);
18710 break;
18711 }
18712 }
18713 return;
18714 }
18715
18716 if (!isWorking && nextRenderExpirationTime !== NoWork && expirationTime > nextRenderExpirationTime) {
18717 // This is an interruption. (Used for performance tracking.)
18718 interruptedBy = fiber;
18719 resetStack();
18720 }
18721 markPendingPriorityLevel(root, expirationTime);
18722 if (
18723 // If we're in the render phase, we don't need to schedule this root
18724 // for an update, because we'll do it before we exit...
18725 !isWorking || isCommitting$1 ||
18726 // ...unless this is a different root than the one we're rendering.
18727 nextRoot !== root) {
18728 var rootExpirationTime = root.expirationTime;
18729 requestWork(root, rootExpirationTime);
18730 }
18731 if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {
18732 // Reset this back to zero so subsequent updates don't throw.
18733 nestedUpdateCount = 0;
18734 invariant(false, 'Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.');
18735 }
18736}
18737
18738function syncUpdates(fn, a, b, c, d) {
18739 var previousExpirationContext = expirationContext;
18740 expirationContext = Sync;
18741 try {
18742 return fn(a, b, c, d);
18743 } finally {
18744 expirationContext = previousExpirationContext;
18745 }
18746}
18747
18748// TODO: Everything below this is written as if it has been lifted to the
18749// renderers. I'll do this in a follow-up.
18750
18751// Linked-list of roots
18752var firstScheduledRoot = null;
18753var lastScheduledRoot = null;
18754
18755var callbackExpirationTime = NoWork;
18756var callbackID = void 0;
18757var isRendering = false;
18758var nextFlushedRoot = null;
18759var nextFlushedExpirationTime = NoWork;
18760var lowestPriorityPendingInteractiveExpirationTime = NoWork;
18761var hasUnhandledError = false;
18762var unhandledError = null;
18763
18764var isBatchingUpdates = false;
18765var isUnbatchingUpdates = false;
18766var isBatchingInteractiveUpdates = false;
18767
18768var completedBatches = null;
18769
18770var originalStartTimeMs = scheduler.unstable_now();
18771var currentRendererTime = msToExpirationTime(originalStartTimeMs);
18772var currentSchedulerTime = currentRendererTime;
18773
18774// Use these to prevent an infinite loop of nested updates
18775var NESTED_UPDATE_LIMIT = 50;
18776var nestedUpdateCount = 0;
18777var lastCommittedRootDuringThisBatch = null;
18778
18779function recomputeCurrentRendererTime() {
18780 var currentTimeMs = scheduler.unstable_now() - originalStartTimeMs;
18781 currentRendererTime = msToExpirationTime(currentTimeMs);
18782}
18783
18784function scheduleCallbackWithExpirationTime(root, expirationTime) {
18785 if (callbackExpirationTime !== NoWork) {
18786 // A callback is already scheduled. Check its expiration time (timeout).
18787 if (expirationTime < callbackExpirationTime) {
18788 // Existing callback has sufficient timeout. Exit.
18789 return;
18790 } else {
18791 if (callbackID !== null) {
18792 // Existing callback has insufficient timeout. Cancel and schedule a
18793 // new one.
18794 scheduler.unstable_cancelCallback(callbackID);
18795 }
18796 }
18797 // The request callback timer is already running. Don't start a new one.
18798 } else {
18799 startRequestCallbackTimer();
18800 }
18801
18802 callbackExpirationTime = expirationTime;
18803 var currentMs = scheduler.unstable_now() - originalStartTimeMs;
18804 var expirationTimeMs = expirationTimeToMs(expirationTime);
18805 var timeout = expirationTimeMs - currentMs;
18806 callbackID = scheduler.unstable_scheduleCallback(performAsyncWork, { timeout: timeout });
18807}
18808
18809// For every call to renderRoot, one of onFatal, onComplete, onSuspend, and
18810// onYield is called upon exiting. We use these in lieu of returning a tuple.
18811// I've also chosen not to inline them into renderRoot because these will
18812// eventually be lifted into the renderer.
18813function onFatal(root) {
18814 root.finishedWork = null;
18815}
18816
18817function onComplete(root, finishedWork, expirationTime) {
18818 root.pendingCommitExpirationTime = expirationTime;
18819 root.finishedWork = finishedWork;
18820}
18821
18822function onSuspend(root, finishedWork, suspendedExpirationTime, rootExpirationTime, msUntilTimeout) {
18823 root.expirationTime = rootExpirationTime;
18824 if (msUntilTimeout === 0 && !shouldYieldToRenderer()) {
18825 // Don't wait an additional tick. Commit the tree immediately.
18826 root.pendingCommitExpirationTime = suspendedExpirationTime;
18827 root.finishedWork = finishedWork;
18828 } else if (msUntilTimeout > 0) {
18829 // Wait `msUntilTimeout` milliseconds before committing.
18830 root.timeoutHandle = scheduleTimeout(onTimeout.bind(null, root, finishedWork, suspendedExpirationTime), msUntilTimeout);
18831 }
18832}
18833
18834function onYield(root) {
18835 root.finishedWork = null;
18836}
18837
18838function onTimeout(root, finishedWork, suspendedExpirationTime) {
18839 // The root timed out. Commit it.
18840 root.pendingCommitExpirationTime = suspendedExpirationTime;
18841 root.finishedWork = finishedWork;
18842 // Read the current time before entering the commit phase. We can be
18843 // certain this won't cause tearing related to batching of event updates
18844 // because we're at the top of a timer event.
18845 recomputeCurrentRendererTime();
18846 currentSchedulerTime = currentRendererTime;
18847 flushRoot(root, suspendedExpirationTime);
18848}
18849
18850function onCommit(root, expirationTime) {
18851 root.expirationTime = expirationTime;
18852 root.finishedWork = null;
18853}
18854
18855function requestCurrentTime() {
18856 // requestCurrentTime is called by the scheduler to compute an expiration
18857 // time.
18858 //
18859 // Expiration times are computed by adding to the current time (the start
18860 // time). However, if two updates are scheduled within the same event, we
18861 // should treat their start times as simultaneous, even if the actual clock
18862 // time has advanced between the first and second call.
18863
18864 // In other words, because expiration times determine how updates are batched,
18865 // we want all updates of like priority that occur within the same event to
18866 // receive the same expiration time. Otherwise we get tearing.
18867 //
18868 // We keep track of two separate times: the current "renderer" time and the
18869 // current "scheduler" time. The renderer time can be updated whenever; it
18870 // only exists to minimize the calls performance.now.
18871 //
18872 // But the scheduler time can only be updated if there's no pending work, or
18873 // if we know for certain that we're not in the middle of an event.
18874
18875 if (isRendering) {
18876 // We're already rendering. Return the most recently read time.
18877 return currentSchedulerTime;
18878 }
18879 // Check if there's pending work.
18880 findHighestPriorityRoot();
18881 if (nextFlushedExpirationTime === NoWork || nextFlushedExpirationTime === Never) {
18882 // If there's no pending work, or if the pending work is offscreen, we can
18883 // read the current time without risk of tearing.
18884 recomputeCurrentRendererTime();
18885 currentSchedulerTime = currentRendererTime;
18886 return currentSchedulerTime;
18887 }
18888 // There's already pending work. We might be in the middle of a browser
18889 // event. If we were to read the current time, it could cause multiple updates
18890 // within the same event to receive different expiration times, leading to
18891 // tearing. Return the last read time. During the next idle callback, the
18892 // time will be updated.
18893 return currentSchedulerTime;
18894}
18895
18896// requestWork is called by the scheduler whenever a root receives an update.
18897// It's up to the renderer to call renderRoot at some point in the future.
18898function requestWork(root, expirationTime) {
18899 addRootToSchedule(root, expirationTime);
18900 if (isRendering) {
18901 // Prevent reentrancy. Remaining work will be scheduled at the end of
18902 // the currently rendering batch.
18903 return;
18904 }
18905
18906 if (isBatchingUpdates) {
18907 // Flush work at the end of the batch.
18908 if (isUnbatchingUpdates) {
18909 // ...unless we're inside unbatchedUpdates, in which case we should
18910 // flush it now.
18911 nextFlushedRoot = root;
18912 nextFlushedExpirationTime = Sync;
18913 performWorkOnRoot(root, Sync, false);
18914 }
18915 return;
18916 }
18917
18918 // TODO: Get rid of Sync and use current time?
18919 if (expirationTime === Sync) {
18920 performSyncWork();
18921 } else {
18922 scheduleCallbackWithExpirationTime(root, expirationTime);
18923 }
18924}
18925
18926function addRootToSchedule(root, expirationTime) {
18927 // Add the root to the schedule.
18928 // Check if this root is already part of the schedule.
18929 if (root.nextScheduledRoot === null) {
18930 // This root is not already scheduled. Add it.
18931 root.expirationTime = expirationTime;
18932 if (lastScheduledRoot === null) {
18933 firstScheduledRoot = lastScheduledRoot = root;
18934 root.nextScheduledRoot = root;
18935 } else {
18936 lastScheduledRoot.nextScheduledRoot = root;
18937 lastScheduledRoot = root;
18938 lastScheduledRoot.nextScheduledRoot = firstScheduledRoot;
18939 }
18940 } else {
18941 // This root is already scheduled, but its priority may have increased.
18942 var remainingExpirationTime = root.expirationTime;
18943 if (expirationTime > remainingExpirationTime) {
18944 // Update the priority.
18945 root.expirationTime = expirationTime;
18946 }
18947 }
18948}
18949
18950function findHighestPriorityRoot() {
18951 var highestPriorityWork = NoWork;
18952 var highestPriorityRoot = null;
18953 if (lastScheduledRoot !== null) {
18954 var previousScheduledRoot = lastScheduledRoot;
18955 var root = firstScheduledRoot;
18956 while (root !== null) {
18957 var remainingExpirationTime = root.expirationTime;
18958 if (remainingExpirationTime === NoWork) {
18959 // This root no longer has work. Remove it from the scheduler.
18960
18961 // TODO: This check is redudant, but Flow is confused by the branch
18962 // below where we set lastScheduledRoot to null, even though we break
18963 // from the loop right after.
18964 !(previousScheduledRoot !== null && lastScheduledRoot !== null) ? invariant(false, 'Should have a previous and last root. This error is likely caused by a bug in React. Please file an issue.') : void 0;
18965 if (root === root.nextScheduledRoot) {
18966 // This is the only root in the list.
18967 root.nextScheduledRoot = null;
18968 firstScheduledRoot = lastScheduledRoot = null;
18969 break;
18970 } else if (root === firstScheduledRoot) {
18971 // This is the first root in the list.
18972 var next = root.nextScheduledRoot;
18973 firstScheduledRoot = next;
18974 lastScheduledRoot.nextScheduledRoot = next;
18975 root.nextScheduledRoot = null;
18976 } else if (root === lastScheduledRoot) {
18977 // This is the last root in the list.
18978 lastScheduledRoot = previousScheduledRoot;
18979 lastScheduledRoot.nextScheduledRoot = firstScheduledRoot;
18980 root.nextScheduledRoot = null;
18981 break;
18982 } else {
18983 previousScheduledRoot.nextScheduledRoot = root.nextScheduledRoot;
18984 root.nextScheduledRoot = null;
18985 }
18986 root = previousScheduledRoot.nextScheduledRoot;
18987 } else {
18988 if (remainingExpirationTime > highestPriorityWork) {
18989 // Update the priority, if it's higher
18990 highestPriorityWork = remainingExpirationTime;
18991 highestPriorityRoot = root;
18992 }
18993 if (root === lastScheduledRoot) {
18994 break;
18995 }
18996 if (highestPriorityWork === Sync) {
18997 // Sync is highest priority by definition so
18998 // we can stop searching.
18999 break;
19000 }
19001 previousScheduledRoot = root;
19002 root = root.nextScheduledRoot;
19003 }
19004 }
19005 }
19006
19007 nextFlushedRoot = highestPriorityRoot;
19008 nextFlushedExpirationTime = highestPriorityWork;
19009}
19010
19011// TODO: This wrapper exists because many of the older tests (the ones that use
19012// flushDeferredPri) rely on the number of times `shouldYield` is called. We
19013// should get rid of it.
19014var didYield = false;
19015function shouldYieldToRenderer() {
19016 if (didYield) {
19017 return true;
19018 }
19019 if (scheduler.unstable_shouldYield()) {
19020 didYield = true;
19021 return true;
19022 }
19023 return false;
19024}
19025
19026function performAsyncWork() {
19027 try {
19028 if (!shouldYieldToRenderer()) {
19029 // The callback timed out. That means at least one update has expired.
19030 // Iterate through the root schedule. If they contain expired work, set
19031 // the next render expiration time to the current time. This has the effect
19032 // of flushing all expired work in a single batch, instead of flushing each
19033 // level one at a time.
19034 if (firstScheduledRoot !== null) {
19035 recomputeCurrentRendererTime();
19036 var root = firstScheduledRoot;
19037 do {
19038 didExpireAtExpirationTime(root, currentRendererTime);
19039 // The root schedule is circular, so this is never null.
19040 root = root.nextScheduledRoot;
19041 } while (root !== firstScheduledRoot);
19042 }
19043 }
19044 performWork(NoWork, true);
19045 } finally {
19046 didYield = false;
19047 }
19048}
19049
19050function performSyncWork() {
19051 performWork(Sync, false);
19052}
19053
19054function performWork(minExpirationTime, isYieldy) {
19055 // Keep working on roots until there's no more work, or until there's a higher
19056 // priority event.
19057 findHighestPriorityRoot();
19058
19059 if (isYieldy) {
19060 recomputeCurrentRendererTime();
19061 currentSchedulerTime = currentRendererTime;
19062
19063 if (enableUserTimingAPI) {
19064 var didExpire = nextFlushedExpirationTime > currentRendererTime;
19065 var timeout = expirationTimeToMs(nextFlushedExpirationTime);
19066 stopRequestCallbackTimer(didExpire, timeout);
19067 }
19068
19069 while (nextFlushedRoot !== null && nextFlushedExpirationTime !== NoWork && minExpirationTime <= nextFlushedExpirationTime && !(didYield && currentRendererTime > nextFlushedExpirationTime)) {
19070 performWorkOnRoot(nextFlushedRoot, nextFlushedExpirationTime, currentRendererTime > nextFlushedExpirationTime);
19071 findHighestPriorityRoot();
19072 recomputeCurrentRendererTime();
19073 currentSchedulerTime = currentRendererTime;
19074 }
19075 } else {
19076 while (nextFlushedRoot !== null && nextFlushedExpirationTime !== NoWork && minExpirationTime <= nextFlushedExpirationTime) {
19077 performWorkOnRoot(nextFlushedRoot, nextFlushedExpirationTime, false);
19078 findHighestPriorityRoot();
19079 }
19080 }
19081
19082 // We're done flushing work. Either we ran out of time in this callback,
19083 // or there's no more work left with sufficient priority.
19084
19085 // If we're inside a callback, set this to false since we just completed it.
19086 if (isYieldy) {
19087 callbackExpirationTime = NoWork;
19088 callbackID = null;
19089 }
19090 // If there's work left over, schedule a new callback.
19091 if (nextFlushedExpirationTime !== NoWork) {
19092 scheduleCallbackWithExpirationTime(nextFlushedRoot, nextFlushedExpirationTime);
19093 }
19094
19095 // Clean-up.
19096 finishRendering();
19097}
19098
19099function flushRoot(root, expirationTime) {
19100 !!isRendering ? invariant(false, 'work.commit(): Cannot commit while already rendering. This likely means you attempted to commit from inside a lifecycle method.') : void 0;
19101 // Perform work on root as if the given expiration time is the current time.
19102 // This has the effect of synchronously flushing all work up to and
19103 // including the given time.
19104 nextFlushedRoot = root;
19105 nextFlushedExpirationTime = expirationTime;
19106 performWorkOnRoot(root, expirationTime, false);
19107 // Flush any sync work that was scheduled by lifecycles
19108 performSyncWork();
19109}
19110
19111function finishRendering() {
19112 nestedUpdateCount = 0;
19113 lastCommittedRootDuringThisBatch = null;
19114
19115 if (completedBatches !== null) {
19116 var batches = completedBatches;
19117 completedBatches = null;
19118 for (var i = 0; i < batches.length; i++) {
19119 var batch = batches[i];
19120 try {
19121 batch._onComplete();
19122 } catch (error) {
19123 if (!hasUnhandledError) {
19124 hasUnhandledError = true;
19125 unhandledError = error;
19126 }
19127 }
19128 }
19129 }
19130
19131 if (hasUnhandledError) {
19132 var error = unhandledError;
19133 unhandledError = null;
19134 hasUnhandledError = false;
19135 throw error;
19136 }
19137}
19138
19139function performWorkOnRoot(root, expirationTime, isYieldy) {
19140 !!isRendering ? invariant(false, 'performWorkOnRoot was called recursively. This error is likely caused by a bug in React. Please file an issue.') : void 0;
19141
19142 isRendering = true;
19143
19144 // Check if this is async work or sync/expired work.
19145 if (!isYieldy) {
19146 // Flush work without yielding.
19147 // TODO: Non-yieldy work does not necessarily imply expired work. A renderer
19148 // may want to perform some work without yielding, but also without
19149 // requiring the root to complete (by triggering placeholders).
19150
19151 var finishedWork = root.finishedWork;
19152 if (finishedWork !== null) {
19153 // This root is already complete. We can commit it.
19154 completeRoot(root, finishedWork, expirationTime);
19155 } else {
19156 root.finishedWork = null;
19157 // If this root previously suspended, clear its existing timeout, since
19158 // we're about to try rendering again.
19159 var timeoutHandle = root.timeoutHandle;
19160 if (timeoutHandle !== noTimeout) {
19161 root.timeoutHandle = noTimeout;
19162 // $FlowFixMe Complains noTimeout is not a TimeoutID, despite the check above
19163 cancelTimeout(timeoutHandle);
19164 }
19165 renderRoot(root, isYieldy);
19166 finishedWork = root.finishedWork;
19167 if (finishedWork !== null) {
19168 // We've completed the root. Commit it.
19169 completeRoot(root, finishedWork, expirationTime);
19170 }
19171 }
19172 } else {
19173 // Flush async work.
19174 var _finishedWork = root.finishedWork;
19175 if (_finishedWork !== null) {
19176 // This root is already complete. We can commit it.
19177 completeRoot(root, _finishedWork, expirationTime);
19178 } else {
19179 root.finishedWork = null;
19180 // If this root previously suspended, clear its existing timeout, since
19181 // we're about to try rendering again.
19182 var _timeoutHandle = root.timeoutHandle;
19183 if (_timeoutHandle !== noTimeout) {
19184 root.timeoutHandle = noTimeout;
19185 // $FlowFixMe Complains noTimeout is not a TimeoutID, despite the check above
19186 cancelTimeout(_timeoutHandle);
19187 }
19188 renderRoot(root, isYieldy);
19189 _finishedWork = root.finishedWork;
19190 if (_finishedWork !== null) {
19191 // We've completed the root. Check the if we should yield one more time
19192 // before committing.
19193 if (!shouldYieldToRenderer()) {
19194 // Still time left. Commit the root.
19195 completeRoot(root, _finishedWork, expirationTime);
19196 } else {
19197 // There's no time left. Mark this root as complete. We'll come
19198 // back and commit it later.
19199 root.finishedWork = _finishedWork;
19200 }
19201 }
19202 }
19203 }
19204
19205 isRendering = false;
19206}
19207
19208function completeRoot(root, finishedWork, expirationTime) {
19209 // Check if there's a batch that matches this expiration time.
19210 var firstBatch = root.firstBatch;
19211 if (firstBatch !== null && firstBatch._expirationTime >= expirationTime) {
19212 if (completedBatches === null) {
19213 completedBatches = [firstBatch];
19214 } else {
19215 completedBatches.push(firstBatch);
19216 }
19217 if (firstBatch._defer) {
19218 // This root is blocked from committing by a batch. Unschedule it until
19219 // we receive another update.
19220 root.finishedWork = finishedWork;
19221 root.expirationTime = NoWork;
19222 return;
19223 }
19224 }
19225
19226 // Commit the root.
19227 root.finishedWork = null;
19228
19229 // Check if this is a nested update (a sync update scheduled during the
19230 // commit phase).
19231 if (root === lastCommittedRootDuringThisBatch) {
19232 // If the next root is the same as the previous root, this is a nested
19233 // update. To prevent an infinite loop, increment the nested update count.
19234 nestedUpdateCount++;
19235 } else {
19236 // Reset whenever we switch roots.
19237 lastCommittedRootDuringThisBatch = root;
19238 nestedUpdateCount = 0;
19239 }
19240 commitRoot(root, finishedWork);
19241}
19242
19243function onUncaughtError(error) {
19244 !(nextFlushedRoot !== null) ? invariant(false, 'Should be working on a root. This error is likely caused by a bug in React. Please file an issue.') : void 0;
19245 // Unschedule this root so we don't work on it again until there's
19246 // another update.
19247 nextFlushedRoot.expirationTime = NoWork;
19248 if (!hasUnhandledError) {
19249 hasUnhandledError = true;
19250 unhandledError = error;
19251 }
19252}
19253
19254// TODO: Batching should be implemented at the renderer level, not inside
19255// the reconciler.
19256function batchedUpdates$1(fn, a) {
19257 var previousIsBatchingUpdates = isBatchingUpdates;
19258 isBatchingUpdates = true;
19259 try {
19260 return fn(a);
19261 } finally {
19262 isBatchingUpdates = previousIsBatchingUpdates;
19263 if (!isBatchingUpdates && !isRendering) {
19264 performSyncWork();
19265 }
19266 }
19267}
19268
19269// TODO: Batching should be implemented at the renderer level, not inside
19270// the reconciler.
19271function unbatchedUpdates(fn, a) {
19272 if (isBatchingUpdates && !isUnbatchingUpdates) {
19273 isUnbatchingUpdates = true;
19274 try {
19275 return fn(a);
19276 } finally {
19277 isUnbatchingUpdates = false;
19278 }
19279 }
19280 return fn(a);
19281}
19282
19283// TODO: Batching should be implemented at the renderer level, not within
19284// the reconciler.
19285function flushSync(fn, a) {
19286 !!isRendering ? invariant(false, 'flushSync was called from inside a lifecycle method. It cannot be called when React is already rendering.') : void 0;
19287 var previousIsBatchingUpdates = isBatchingUpdates;
19288 isBatchingUpdates = true;
19289 try {
19290 return syncUpdates(fn, a);
19291 } finally {
19292 isBatchingUpdates = previousIsBatchingUpdates;
19293 performSyncWork();
19294 }
19295}
19296
19297function interactiveUpdates$1(fn, a, b) {
19298 if (isBatchingInteractiveUpdates) {
19299 return fn(a, b);
19300 }
19301 // If there are any pending interactive updates, synchronously flush them.
19302 // This needs to happen before we read any handlers, because the effect of
19303 // the previous event may influence which handlers are called during
19304 // this event.
19305 if (!isBatchingUpdates && !isRendering && lowestPriorityPendingInteractiveExpirationTime !== NoWork) {
19306 // Synchronously flush pending interactive updates.
19307 performWork(lowestPriorityPendingInteractiveExpirationTime, false);
19308 lowestPriorityPendingInteractiveExpirationTime = NoWork;
19309 }
19310 var previousIsBatchingInteractiveUpdates = isBatchingInteractiveUpdates;
19311 var previousIsBatchingUpdates = isBatchingUpdates;
19312 isBatchingInteractiveUpdates = true;
19313 isBatchingUpdates = true;
19314 try {
19315 return fn(a, b);
19316 } finally {
19317 isBatchingInteractiveUpdates = previousIsBatchingInteractiveUpdates;
19318 isBatchingUpdates = previousIsBatchingUpdates;
19319 if (!isBatchingUpdates && !isRendering) {
19320 performSyncWork();
19321 }
19322 }
19323}
19324
19325function flushInteractiveUpdates$1() {
19326 if (!isRendering && lowestPriorityPendingInteractiveExpirationTime !== NoWork) {
19327 // Synchronously flush pending interactive updates.
19328 performWork(lowestPriorityPendingInteractiveExpirationTime, false);
19329 lowestPriorityPendingInteractiveExpirationTime = NoWork;
19330 }
19331}
19332
19333function flushControlled(fn) {
19334 var previousIsBatchingUpdates = isBatchingUpdates;
19335 isBatchingUpdates = true;
19336 try {
19337 syncUpdates(fn);
19338 } finally {
19339 isBatchingUpdates = previousIsBatchingUpdates;
19340 if (!isBatchingUpdates && !isRendering) {
19341 performSyncWork();
19342 }
19343 }
19344}
19345
19346// 0 is PROD, 1 is DEV.
19347// Might add PROFILE later.
19348
19349
19350var didWarnAboutNestedUpdates = void 0;
19351var didWarnAboutFindNodeInStrictMode = void 0;
19352
19353{
19354 didWarnAboutNestedUpdates = false;
19355 didWarnAboutFindNodeInStrictMode = {};
19356}
19357
19358function getContextForSubtree(parentComponent) {
19359 if (!parentComponent) {
19360 return emptyContextObject;
19361 }
19362
19363 var fiber = get(parentComponent);
19364 var parentContext = findCurrentUnmaskedContext(fiber);
19365
19366 if (fiber.tag === ClassComponent) {
19367 var Component = fiber.type;
19368 if (isContextProvider(Component)) {
19369 return processChildContext(fiber, Component, parentContext);
19370 }
19371 }
19372
19373 return parentContext;
19374}
19375
19376function scheduleRootUpdate(current$$1, element, expirationTime, callback) {
19377 {
19378 if (phase === 'render' && current !== null && !didWarnAboutNestedUpdates) {
19379 didWarnAboutNestedUpdates = true;
19380 warningWithoutStack$1(false, 'Render methods should be a pure function of props and state; ' + 'triggering nested component updates from render is not allowed. ' + 'If necessary, trigger nested updates in componentDidUpdate.\n\n' + 'Check the render method of %s.', getComponentName(current.type) || 'Unknown');
19381 }
19382 }
19383
19384 var update = createUpdate(expirationTime);
19385 // Caution: React DevTools currently depends on this property
19386 // being called "element".
19387 update.payload = { element: element };
19388
19389 callback = callback === undefined ? null : callback;
19390 if (callback !== null) {
19391 !(typeof callback === 'function') ? warningWithoutStack$1(false, 'render(...): Expected the last optional `callback` argument to be a ' + 'function. Instead received: %s.', callback) : void 0;
19392 update.callback = callback;
19393 }
19394
19395 flushPassiveEffects();
19396 enqueueUpdate(current$$1, update);
19397 scheduleWork(current$$1, expirationTime);
19398
19399 return expirationTime;
19400}
19401
19402function updateContainerAtExpirationTime(element, container, parentComponent, expirationTime, callback) {
19403 // TODO: If this is a nested container, this won't be the root.
19404 var current$$1 = container.current;
19405
19406 {
19407 if (ReactFiberInstrumentation_1.debugTool) {
19408 if (current$$1.alternate === null) {
19409 ReactFiberInstrumentation_1.debugTool.onMountContainer(container);
19410 } else if (element === null) {
19411 ReactFiberInstrumentation_1.debugTool.onUnmountContainer(container);
19412 } else {
19413 ReactFiberInstrumentation_1.debugTool.onUpdateContainer(container);
19414 }
19415 }
19416 }
19417
19418 var context = getContextForSubtree(parentComponent);
19419 if (container.context === null) {
19420 container.context = context;
19421 } else {
19422 container.pendingContext = context;
19423 }
19424
19425 return scheduleRootUpdate(current$$1, element, expirationTime, callback);
19426}
19427
19428function findHostInstance(component) {
19429 var fiber = get(component);
19430 if (fiber === undefined) {
19431 if (typeof component.render === 'function') {
19432 invariant(false, 'Unable to find node on an unmounted component.');
19433 } else {
19434 invariant(false, 'Argument appears to not be a ReactComponent. Keys: %s', Object.keys(component));
19435 }
19436 }
19437 var hostFiber = findCurrentHostFiber(fiber);
19438 if (hostFiber === null) {
19439 return null;
19440 }
19441 return hostFiber.stateNode;
19442}
19443
19444function findHostInstanceWithWarning(component, methodName) {
19445 {
19446 var fiber = get(component);
19447 if (fiber === undefined) {
19448 if (typeof component.render === 'function') {
19449 invariant(false, 'Unable to find node on an unmounted component.');
19450 } else {
19451 invariant(false, 'Argument appears to not be a ReactComponent. Keys: %s', Object.keys(component));
19452 }
19453 }
19454 var hostFiber = findCurrentHostFiber(fiber);
19455 if (hostFiber === null) {
19456 return null;
19457 }
19458 if (hostFiber.mode & StrictMode) {
19459 var componentName = getComponentName(fiber.type) || 'Component';
19460 if (!didWarnAboutFindNodeInStrictMode[componentName]) {
19461 didWarnAboutFindNodeInStrictMode[componentName] = true;
19462 if (fiber.mode & StrictMode) {
19463 warningWithoutStack$1(false, '%s is deprecated in StrictMode. ' + '%s was passed an instance of %s which is inside StrictMode. ' + 'Instead, add a ref directly to the element you want to reference.' + '\n%s' + '\n\nLearn more about using refs safely here:' + '\nhttps://fb.me/react-strict-mode-find-node', methodName, methodName, componentName, getStackByFiberInDevAndProd(hostFiber));
19464 } else {
19465 warningWithoutStack$1(false, '%s is deprecated in StrictMode. ' + '%s was passed an instance of %s which renders StrictMode children. ' + 'Instead, add a ref directly to the element you want to reference.' + '\n%s' + '\n\nLearn more about using refs safely here:' + '\nhttps://fb.me/react-strict-mode-find-node', methodName, methodName, componentName, getStackByFiberInDevAndProd(hostFiber));
19466 }
19467 }
19468 }
19469 return hostFiber.stateNode;
19470 }
19471 return findHostInstance(component);
19472}
19473
19474function createContainer(containerInfo, isConcurrent, hydrate) {
19475 return createFiberRoot(containerInfo, isConcurrent, hydrate);
19476}
19477
19478function updateContainer(element, container, parentComponent, callback) {
19479 var current$$1 = container.current;
19480 var currentTime = requestCurrentTime();
19481 var expirationTime = computeExpirationForFiber(currentTime, current$$1);
19482 return updateContainerAtExpirationTime(element, container, parentComponent, expirationTime, callback);
19483}
19484
19485function getPublicRootInstance(container) {
19486 var containerFiber = container.current;
19487 if (!containerFiber.child) {
19488 return null;
19489 }
19490 switch (containerFiber.child.tag) {
19491 case HostComponent:
19492 return getPublicInstance(containerFiber.child.stateNode);
19493 default:
19494 return containerFiber.child.stateNode;
19495 }
19496}
19497
19498function findHostInstanceWithNoPortals(fiber) {
19499 var hostFiber = findCurrentHostFiberWithNoPortals(fiber);
19500 if (hostFiber === null) {
19501 return null;
19502 }
19503 return hostFiber.stateNode;
19504}
19505
19506var overrideProps = null;
19507
19508{
19509 var copyWithSetImpl = function (obj, path, idx, value) {
19510 if (idx >= path.length) {
19511 return value;
19512 }
19513 var key = path[idx];
19514 var updated = Array.isArray(obj) ? obj.slice() : _assign({}, obj);
19515 // $FlowFixMe number or string is fine here
19516 updated[key] = copyWithSetImpl(obj[key], path, idx + 1, value);
19517 return updated;
19518 };
19519
19520 var copyWithSet = function (obj, path, value) {
19521 return copyWithSetImpl(obj, path, 0, value);
19522 };
19523
19524 // Support DevTools props for function components, forwardRef, memo, host components, etc.
19525 overrideProps = function (fiber, path, value) {
19526 flushPassiveEffects();
19527 fiber.pendingProps = copyWithSet(fiber.memoizedProps, path, value);
19528 if (fiber.alternate) {
19529 fiber.alternate.pendingProps = fiber.pendingProps;
19530 }
19531 scheduleWork(fiber, Sync);
19532 };
19533}
19534
19535function injectIntoDevTools(devToolsConfig) {
19536 var findFiberByHostInstance = devToolsConfig.findFiberByHostInstance;
19537
19538 return injectInternals(_assign({}, devToolsConfig, {
19539 overrideProps: overrideProps,
19540 findHostInstanceByFiber: function (fiber) {
19541 var hostFiber = findCurrentHostFiber(fiber);
19542 if (hostFiber === null) {
19543 return null;
19544 }
19545 return hostFiber.stateNode;
19546 },
19547 findFiberByHostInstance: function (instance) {
19548 if (!findFiberByHostInstance) {
19549 // Might not be implemented by the renderer.
19550 return null;
19551 }
19552 return findFiberByHostInstance(instance);
19553 }
19554 }));
19555}
19556
19557// This file intentionally does *not* have the Flow annotation.
19558// Don't add it. See `./inline-typed.js` for an explanation.
19559
19560function createPortal$1(children, containerInfo,
19561// TODO: figure out the API for cross-renderer implementation.
19562implementation) {
19563 var key = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
19564
19565 return {
19566 // This tag allow us to uniquely identify this as a React Portal
19567 $$typeof: REACT_PORTAL_TYPE,
19568 key: key == null ? null : '' + key,
19569 children: children,
19570 containerInfo: containerInfo,
19571 implementation: implementation
19572 };
19573}
19574
19575// TODO: this is special because it gets imported during build.
19576
19577var ReactVersion = '16.7.0';
19578
19579// TODO: This type is shared between the reconciler and ReactDOM, but will
19580// eventually be lifted out to the renderer.
19581var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
19582
19583var topLevelUpdateWarnings = void 0;
19584var warnOnInvalidCallback = void 0;
19585var didWarnAboutUnstableCreatePortal = false;
19586
19587{
19588 if (typeof Map !== 'function' ||
19589 // $FlowIssue Flow incorrectly thinks Map has no prototype
19590 Map.prototype == null || typeof Map.prototype.forEach !== 'function' || typeof Set !== 'function' ||
19591 // $FlowIssue Flow incorrectly thinks Set has no prototype
19592 Set.prototype == null || typeof Set.prototype.clear !== 'function' || typeof Set.prototype.forEach !== 'function') {
19593 warningWithoutStack$1(false, 'React depends on Map and Set built-in types. Make sure that you load a ' + 'polyfill in older browsers. https://fb.me/react-polyfills');
19594 }
19595
19596 topLevelUpdateWarnings = function (container) {
19597 if (container._reactRootContainer && container.nodeType !== COMMENT_NODE) {
19598 var hostInstance = findHostInstanceWithNoPortals(container._reactRootContainer._internalRoot.current);
19599 if (hostInstance) {
19600 !(hostInstance.parentNode === container) ? warningWithoutStack$1(false, 'render(...): It looks like the React-rendered content of this ' + 'container was removed without using React. This is not ' + 'supported and will cause errors. Instead, call ' + 'ReactDOM.unmountComponentAtNode to empty a container.') : void 0;
19601 }
19602 }
19603
19604 var isRootRenderedBySomeReact = !!container._reactRootContainer;
19605 var rootEl = getReactRootElementInContainer(container);
19606 var hasNonRootReactChild = !!(rootEl && getInstanceFromNode$1(rootEl));
19607
19608 !(!hasNonRootReactChild || isRootRenderedBySomeReact) ? warningWithoutStack$1(false, 'render(...): Replacing React-rendered children with a new root ' + 'component. If you intended to update the children of this node, ' + 'you should instead have the existing children update their state ' + 'and render the new components instead of calling ReactDOM.render.') : void 0;
19609
19610 !(container.nodeType !== ELEMENT_NODE || !container.tagName || container.tagName.toUpperCase() !== 'BODY') ? warningWithoutStack$1(false, 'render(): Rendering components directly into document.body is ' + 'discouraged, since its children are often manipulated by third-party ' + 'scripts and browser extensions. This may lead to subtle ' + 'reconciliation issues. Try rendering into a container element created ' + 'for your app.') : void 0;
19611 };
19612
19613 warnOnInvalidCallback = function (callback, callerName) {
19614 !(callback === null || typeof callback === 'function') ? warningWithoutStack$1(false, '%s(...): Expected the last optional `callback` argument to be a ' + 'function. Instead received: %s.', callerName, callback) : void 0;
19615 };
19616}
19617
19618setRestoreImplementation(restoreControlledState$1);
19619
19620function ReactBatch(root) {
19621 var expirationTime = computeUniqueAsyncExpiration();
19622 this._expirationTime = expirationTime;
19623 this._root = root;
19624 this._next = null;
19625 this._callbacks = null;
19626 this._didComplete = false;
19627 this._hasChildren = false;
19628 this._children = null;
19629 this._defer = true;
19630}
19631ReactBatch.prototype.render = function (children) {
19632 !this._defer ? invariant(false, 'batch.render: Cannot render a batch that already committed.') : void 0;
19633 this._hasChildren = true;
19634 this._children = children;
19635 var internalRoot = this._root._internalRoot;
19636 var expirationTime = this._expirationTime;
19637 var work = new ReactWork();
19638 updateContainerAtExpirationTime(children, internalRoot, null, expirationTime, work._onCommit);
19639 return work;
19640};
19641ReactBatch.prototype.then = function (onComplete) {
19642 if (this._didComplete) {
19643 onComplete();
19644 return;
19645 }
19646 var callbacks = this._callbacks;
19647 if (callbacks === null) {
19648 callbacks = this._callbacks = [];
19649 }
19650 callbacks.push(onComplete);
19651};
19652ReactBatch.prototype.commit = function () {
19653 var internalRoot = this._root._internalRoot;
19654 var firstBatch = internalRoot.firstBatch;
19655 !(this._defer && firstBatch !== null) ? invariant(false, 'batch.commit: Cannot commit a batch multiple times.') : void 0;
19656
19657 if (!this._hasChildren) {
19658 // This batch is empty. Return.
19659 this._next = null;
19660 this._defer = false;
19661 return;
19662 }
19663
19664 var expirationTime = this._expirationTime;
19665
19666 // Ensure this is the first batch in the list.
19667 if (firstBatch !== this) {
19668 // This batch is not the earliest batch. We need to move it to the front.
19669 // Update its expiration time to be the expiration time of the earliest
19670 // batch, so that we can flush it without flushing the other batches.
19671 if (this._hasChildren) {
19672 expirationTime = this._expirationTime = firstBatch._expirationTime;
19673 // Rendering this batch again ensures its children will be the final state
19674 // when we flush (updates are processed in insertion order: last
19675 // update wins).
19676 // TODO: This forces a restart. Should we print a warning?
19677 this.render(this._children);
19678 }
19679
19680 // Remove the batch from the list.
19681 var previous = null;
19682 var batch = firstBatch;
19683 while (batch !== this) {
19684 previous = batch;
19685 batch = batch._next;
19686 }
19687 !(previous !== null) ? invariant(false, 'batch.commit: Cannot commit a batch multiple times.') : void 0;
19688 previous._next = batch._next;
19689
19690 // Add it to the front.
19691 this._next = firstBatch;
19692 firstBatch = internalRoot.firstBatch = this;
19693 }
19694
19695 // Synchronously flush all the work up to this batch's expiration time.
19696 this._defer = false;
19697 flushRoot(internalRoot, expirationTime);
19698
19699 // Pop the batch from the list.
19700 var next = this._next;
19701 this._next = null;
19702 firstBatch = internalRoot.firstBatch = next;
19703
19704 // Append the next earliest batch's children to the update queue.
19705 if (firstBatch !== null && firstBatch._hasChildren) {
19706 firstBatch.render(firstBatch._children);
19707 }
19708};
19709ReactBatch.prototype._onComplete = function () {
19710 if (this._didComplete) {
19711 return;
19712 }
19713 this._didComplete = true;
19714 var callbacks = this._callbacks;
19715 if (callbacks === null) {
19716 return;
19717 }
19718 // TODO: Error handling.
19719 for (var i = 0; i < callbacks.length; i++) {
19720 var _callback = callbacks[i];
19721 _callback();
19722 }
19723};
19724
19725function ReactWork() {
19726 this._callbacks = null;
19727 this._didCommit = false;
19728 // TODO: Avoid need to bind by replacing callbacks in the update queue with
19729 // list of Work objects.
19730 this._onCommit = this._onCommit.bind(this);
19731}
19732ReactWork.prototype.then = function (onCommit) {
19733 if (this._didCommit) {
19734 onCommit();
19735 return;
19736 }
19737 var callbacks = this._callbacks;
19738 if (callbacks === null) {
19739 callbacks = this._callbacks = [];
19740 }
19741 callbacks.push(onCommit);
19742};
19743ReactWork.prototype._onCommit = function () {
19744 if (this._didCommit) {
19745 return;
19746 }
19747 this._didCommit = true;
19748 var callbacks = this._callbacks;
19749 if (callbacks === null) {
19750 return;
19751 }
19752 // TODO: Error handling.
19753 for (var i = 0; i < callbacks.length; i++) {
19754 var _callback2 = callbacks[i];
19755 !(typeof _callback2 === 'function') ? invariant(false, 'Invalid argument passed as callback. Expected a function. Instead received: %s', _callback2) : void 0;
19756 _callback2();
19757 }
19758};
19759
19760function ReactRoot(container, isConcurrent, hydrate) {
19761 var root = createContainer(container, isConcurrent, hydrate);
19762 this._internalRoot = root;
19763}
19764ReactRoot.prototype.render = function (children, callback) {
19765 var root = this._internalRoot;
19766 var work = new ReactWork();
19767 callback = callback === undefined ? null : callback;
19768 {
19769 warnOnInvalidCallback(callback, 'render');
19770 }
19771 if (callback !== null) {
19772 work.then(callback);
19773 }
19774 updateContainer(children, root, null, work._onCommit);
19775 return work;
19776};
19777ReactRoot.prototype.unmount = function (callback) {
19778 var root = this._internalRoot;
19779 var work = new ReactWork();
19780 callback = callback === undefined ? null : callback;
19781 {
19782 warnOnInvalidCallback(callback, 'render');
19783 }
19784 if (callback !== null) {
19785 work.then(callback);
19786 }
19787 updateContainer(null, root, null, work._onCommit);
19788 return work;
19789};
19790ReactRoot.prototype.legacy_renderSubtreeIntoContainer = function (parentComponent, children, callback) {
19791 var root = this._internalRoot;
19792 var work = new ReactWork();
19793 callback = callback === undefined ? null : callback;
19794 {
19795 warnOnInvalidCallback(callback, 'render');
19796 }
19797 if (callback !== null) {
19798 work.then(callback);
19799 }
19800 updateContainer(children, root, parentComponent, work._onCommit);
19801 return work;
19802};
19803ReactRoot.prototype.createBatch = function () {
19804 var batch = new ReactBatch(this);
19805 var expirationTime = batch._expirationTime;
19806
19807 var internalRoot = this._internalRoot;
19808 var firstBatch = internalRoot.firstBatch;
19809 if (firstBatch === null) {
19810 internalRoot.firstBatch = batch;
19811 batch._next = null;
19812 } else {
19813 // Insert sorted by expiration time then insertion order
19814 var insertAfter = null;
19815 var insertBefore = firstBatch;
19816 while (insertBefore !== null && insertBefore._expirationTime >= expirationTime) {
19817 insertAfter = insertBefore;
19818 insertBefore = insertBefore._next;
19819 }
19820 batch._next = insertBefore;
19821 if (insertAfter !== null) {
19822 insertAfter._next = batch;
19823 }
19824 }
19825
19826 return batch;
19827};
19828
19829/**
19830 * True if the supplied DOM node is a valid node element.
19831 *
19832 * @param {?DOMElement} node The candidate DOM node.
19833 * @return {boolean} True if the DOM is a valid DOM node.
19834 * @internal
19835 */
19836function isValidContainer(node) {
19837 return !!(node && (node.nodeType === ELEMENT_NODE || node.nodeType === DOCUMENT_NODE || node.nodeType === DOCUMENT_FRAGMENT_NODE || node.nodeType === COMMENT_NODE && node.nodeValue === ' react-mount-point-unstable '));
19838}
19839
19840function getReactRootElementInContainer(container) {
19841 if (!container) {
19842 return null;
19843 }
19844
19845 if (container.nodeType === DOCUMENT_NODE) {
19846 return container.documentElement;
19847 } else {
19848 return container.firstChild;
19849 }
19850}
19851
19852function shouldHydrateDueToLegacyHeuristic(container) {
19853 var rootElement = getReactRootElementInContainer(container);
19854 return !!(rootElement && rootElement.nodeType === ELEMENT_NODE && rootElement.hasAttribute(ROOT_ATTRIBUTE_NAME));
19855}
19856
19857setBatchingImplementation(batchedUpdates$1, interactiveUpdates$1, flushInteractiveUpdates$1);
19858
19859var warnedAboutHydrateAPI = false;
19860
19861function legacyCreateRootFromDOMContainer(container, forceHydrate) {
19862 var shouldHydrate = forceHydrate || shouldHydrateDueToLegacyHeuristic(container);
19863 // First clear any existing content.
19864 if (!shouldHydrate) {
19865 var warned = false;
19866 var rootSibling = void 0;
19867 while (rootSibling = container.lastChild) {
19868 {
19869 if (!warned && rootSibling.nodeType === ELEMENT_NODE && rootSibling.hasAttribute(ROOT_ATTRIBUTE_NAME)) {
19870 warned = true;
19871 warningWithoutStack$1(false, 'render(): Target node has markup rendered by React, but there ' + 'are unrelated nodes as well. This is most commonly caused by ' + 'white-space inserted around server-rendered markup.');
19872 }
19873 }
19874 container.removeChild(rootSibling);
19875 }
19876 }
19877 {
19878 if (shouldHydrate && !forceHydrate && !warnedAboutHydrateAPI) {
19879 warnedAboutHydrateAPI = true;
19880 lowPriorityWarning$1(false, 'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' + 'will stop working in React v17. Replace the ReactDOM.render() call ' + 'with ReactDOM.hydrate() if you want React to attach to the server HTML.');
19881 }
19882 }
19883 // Legacy roots are not async by default.
19884 var isConcurrent = false;
19885 return new ReactRoot(container, isConcurrent, shouldHydrate);
19886}
19887
19888function legacyRenderSubtreeIntoContainer(parentComponent, children, container, forceHydrate, callback) {
19889 // TODO: Ensure all entry points contain this check
19890 !isValidContainer(container) ? invariant(false, 'Target container is not a DOM element.') : void 0;
19891
19892 {
19893 topLevelUpdateWarnings(container);
19894 }
19895
19896 // TODO: Without `any` type, Flow says "Property cannot be accessed on any
19897 // member of intersection type." Whyyyyyy.
19898 var root = container._reactRootContainer;
19899 if (!root) {
19900 // Initial mount
19901 root = container._reactRootContainer = legacyCreateRootFromDOMContainer(container, forceHydrate);
19902 if (typeof callback === 'function') {
19903 var originalCallback = callback;
19904 callback = function () {
19905 var instance = getPublicRootInstance(root._internalRoot);
19906 originalCallback.call(instance);
19907 };
19908 }
19909 // Initial mount should not be batched.
19910 unbatchedUpdates(function () {
19911 if (parentComponent != null) {
19912 root.legacy_renderSubtreeIntoContainer(parentComponent, children, callback);
19913 } else {
19914 root.render(children, callback);
19915 }
19916 });
19917 } else {
19918 if (typeof callback === 'function') {
19919 var _originalCallback = callback;
19920 callback = function () {
19921 var instance = getPublicRootInstance(root._internalRoot);
19922 _originalCallback.call(instance);
19923 };
19924 }
19925 // Update
19926 if (parentComponent != null) {
19927 root.legacy_renderSubtreeIntoContainer(parentComponent, children, callback);
19928 } else {
19929 root.render(children, callback);
19930 }
19931 }
19932 return getPublicRootInstance(root._internalRoot);
19933}
19934
19935function createPortal$$1(children, container) {
19936 var key = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
19937
19938 !isValidContainer(container) ? invariant(false, 'Target container is not a DOM element.') : void 0;
19939 // TODO: pass ReactDOM portal implementation as third argument
19940 return createPortal$1(children, container, null, key);
19941}
19942
19943var ReactDOM = {
19944 createPortal: createPortal$$1,
19945
19946 findDOMNode: function (componentOrElement) {
19947 {
19948 var owner = ReactCurrentOwner.current;
19949 if (owner !== null && owner.stateNode !== null) {
19950 var warnedAboutRefsInRender = owner.stateNode._warnedAboutRefsInRender;
19951 !warnedAboutRefsInRender ? warningWithoutStack$1(false, '%s is accessing findDOMNode inside its render(). ' + 'render() should be a pure function of props and state. It should ' + 'never access something that requires stale data from the previous ' + 'render, such as refs. Move this logic to componentDidMount and ' + 'componentDidUpdate instead.', getComponentName(owner.type) || 'A component') : void 0;
19952 owner.stateNode._warnedAboutRefsInRender = true;
19953 }
19954 }
19955 if (componentOrElement == null) {
19956 return null;
19957 }
19958 if (componentOrElement.nodeType === ELEMENT_NODE) {
19959 return componentOrElement;
19960 }
19961 {
19962 return findHostInstanceWithWarning(componentOrElement, 'findDOMNode');
19963 }
19964 return findHostInstance(componentOrElement);
19965 },
19966 hydrate: function (element, container, callback) {
19967 // TODO: throw or warn if we couldn't hydrate?
19968 return legacyRenderSubtreeIntoContainer(null, element, container, true, callback);
19969 },
19970 render: function (element, container, callback) {
19971 return legacyRenderSubtreeIntoContainer(null, element, container, false, callback);
19972 },
19973 unstable_renderSubtreeIntoContainer: function (parentComponent, element, containerNode, callback) {
19974 !(parentComponent != null && has(parentComponent)) ? invariant(false, 'parentComponent must be a valid React Component') : void 0;
19975 return legacyRenderSubtreeIntoContainer(parentComponent, element, containerNode, false, callback);
19976 },
19977 unmountComponentAtNode: function (container) {
19978 !isValidContainer(container) ? invariant(false, 'unmountComponentAtNode(...): Target container is not a DOM element.') : void 0;
19979
19980 if (container._reactRootContainer) {
19981 {
19982 var rootEl = getReactRootElementInContainer(container);
19983 var renderedByDifferentReact = rootEl && !getInstanceFromNode$1(rootEl);
19984 !!renderedByDifferentReact ? warningWithoutStack$1(false, "unmountComponentAtNode(): The node you're attempting to unmount " + 'was rendered by another copy of React.') : void 0;
19985 }
19986
19987 // Unmount should not be batched.
19988 unbatchedUpdates(function () {
19989 legacyRenderSubtreeIntoContainer(null, null, container, false, function () {
19990 container._reactRootContainer = null;
19991 });
19992 });
19993 // If you call unmountComponentAtNode twice in quick succession, you'll
19994 // get `true` twice. That's probably fine?
19995 return true;
19996 } else {
19997 {
19998 var _rootEl = getReactRootElementInContainer(container);
19999 var hasNonRootReactChild = !!(_rootEl && getInstanceFromNode$1(_rootEl));
20000
20001 // Check if the container itself is a React root node.
20002 var isContainerReactRoot = container.nodeType === ELEMENT_NODE && isValidContainer(container.parentNode) && !!container.parentNode._reactRootContainer;
20003
20004 !!hasNonRootReactChild ? warningWithoutStack$1(false, "unmountComponentAtNode(): The node you're attempting to unmount " + 'was rendered by React and is not a top-level container. %s', isContainerReactRoot ? 'You may have accidentally passed in a React root node instead ' + 'of its container.' : 'Instead, have the parent component update its state and ' + 'rerender in order to remove this component.') : void 0;
20005 }
20006
20007 return false;
20008 }
20009 },
20010
20011
20012 // Temporary alias since we already shipped React 16 RC with it.
20013 // TODO: remove in React 17.
20014 unstable_createPortal: function () {
20015 if (!didWarnAboutUnstableCreatePortal) {
20016 didWarnAboutUnstableCreatePortal = true;
20017 lowPriorityWarning$1(false, 'The ReactDOM.unstable_createPortal() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactDOM.createPortal() instead. It has the exact same API, ' + 'but without the "unstable_" prefix.');
20018 }
20019 return createPortal$$1.apply(undefined, arguments);
20020 },
20021
20022
20023 unstable_batchedUpdates: batchedUpdates$1,
20024
20025 unstable_interactiveUpdates: interactiveUpdates$1,
20026
20027 flushSync: flushSync,
20028
20029 unstable_createRoot: createRoot,
20030 unstable_flushControlled: flushControlled,
20031
20032 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
20033 // Keep in sync with ReactDOMUnstableNativeDependencies.js
20034 // and ReactTestUtils.js. This is an array for better minification.
20035 Events: [getInstanceFromNode$1, getNodeFromInstance$1, getFiberCurrentPropsFromNode$1, injection.injectEventPluginsByName, eventNameDispatchConfigs, accumulateTwoPhaseDispatches, accumulateDirectDispatches, enqueueStateRestore, restoreStateIfNeeded, dispatchEvent, runEventsInBatch]
20036 }
20037};
20038
20039function createRoot(container, options) {
20040 var functionName = enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot';
20041 !isValidContainer(container) ? invariant(false, '%s(...): Target container is not a DOM element.', functionName) : void 0;
20042 var hydrate = options != null && options.hydrate === true;
20043 return new ReactRoot(container, true, hydrate);
20044}
20045
20046if (enableStableConcurrentModeAPIs) {
20047 ReactDOM.createRoot = createRoot;
20048 ReactDOM.unstable_createRoot = undefined;
20049}
20050
20051var foundDevTools = injectIntoDevTools({
20052 findFiberByHostInstance: getClosestInstanceFromNode,
20053 bundleType: 1,
20054 version: ReactVersion,
20055 rendererPackageName: 'react-dom'
20056});
20057
20058{
20059 if (!foundDevTools && canUseDOM && window.top === window.self) {
20060 // If we're in Chrome or Firefox, provide a download link if not installed.
20061 if (navigator.userAgent.indexOf('Chrome') > -1 && navigator.userAgent.indexOf('Edge') === -1 || navigator.userAgent.indexOf('Firefox') > -1) {
20062 var protocol = window.location.protocol;
20063 // Don't warn in exotic cases like chrome-extension://.
20064 if (/^(https?|file):$/.test(protocol)) {
20065 console.info('%cDownload the React DevTools ' + 'for a better development experience: ' + 'https://fb.me/react-devtools' + (protocol === 'file:' ? '\nYou might need to use a local HTTP server (instead of file://): ' + 'https://fb.me/react-devtools-faq' : ''), 'font-weight:bold');
20066 }
20067 }
20068 }
20069}
20070
20071
20072
20073var ReactDOM$2 = Object.freeze({
20074 default: ReactDOM
20075});
20076
20077var ReactDOM$3 = ( ReactDOM$2 && ReactDOM ) || ReactDOM$2;
20078
20079// TODO: decide on the top-level export form.
20080// This is hacky but makes it work with both Rollup and Jest.
20081var reactDom = ReactDOM$3.default || ReactDOM$3;
20082
20083module.exports = reactDom;
20084 })();
20085}