UNPKG

792 kBJavaScriptView Raw
1/** @license React v16.8.6
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(function (global, factory) {
13 typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
14 typeof define === 'function' && define.amd ? define(['react'], factory) :
15 (global.ReactDOM = factory(global.React));
16}(this, (function (React) { 'use strict';
17
18/**
19 * Use invariant() to assert state which your program assumes to be true.
20 *
21 * Provide sprintf-style format (only %s is supported) and arguments
22 * to provide information about what broke and what you were
23 * expecting.
24 *
25 * The invariant message will be stripped in production, but the invariant
26 * will remain to ensure logic does not differ in production.
27 */
28
29var validateFormat = function () {};
30
31{
32 validateFormat = function (format) {
33 if (format === undefined) {
34 throw new Error('invariant requires an error message argument');
35 }
36 };
37}
38
39function invariant(condition, format, a, b, c, d, e, f) {
40 validateFormat(format);
41
42 if (!condition) {
43 var error = void 0;
44 if (format === undefined) {
45 error = new Error('Minified exception occurred; use the non-minified dev environment ' + 'for the full error message and additional helpful warnings.');
46 } else {
47 var args = [a, b, c, d, e, f];
48 var argIndex = 0;
49 error = new Error(format.replace(/%s/g, function () {
50 return args[argIndex++];
51 }));
52 error.name = 'Invariant Violation';
53 }
54
55 error.framesToPop = 1; // we don't care about invariant's own frame
56 throw error;
57 }
58}
59
60// Relying on the `invariant()` implementation lets us
61// preserve the format and params in the www builds.
62
63!React ? invariant(false, 'ReactDOM was loaded before React. Make sure you load the React package before loading ReactDOM.') : void 0;
64
65var invokeGuardedCallbackImpl = function (name, func, context, a, b, c, d, e, f) {
66 var funcArgs = Array.prototype.slice.call(arguments, 3);
67 try {
68 func.apply(context, funcArgs);
69 } catch (error) {
70 this.onError(error);
71 }
72};
73
74{
75 // In DEV mode, we swap out invokeGuardedCallback for a special version
76 // that plays more nicely with the browser's DevTools. The idea is to preserve
77 // "Pause on exceptions" behavior. Because React wraps all user-provided
78 // functions in invokeGuardedCallback, and the production version of
79 // invokeGuardedCallback uses a try-catch, all user exceptions are treated
80 // like caught exceptions, and the DevTools won't pause unless the developer
81 // takes the extra step of enabling pause on caught exceptions. This is
82 // unintuitive, though, because even though React has caught the error, from
83 // the developer's perspective, the error is uncaught.
84 //
85 // To preserve the expected "Pause on exceptions" behavior, we don't use a
86 // try-catch in DEV. Instead, we synchronously dispatch a fake event to a fake
87 // DOM node, and call the user-provided callback from inside an event handler
88 // for that fake event. If the callback throws, the error is "captured" using
89 // a global event handler. But because the error happens in a different
90 // event loop context, it does not interrupt the normal program flow.
91 // Effectively, this gives us try-catch behavior without actually using
92 // try-catch. Neat!
93
94 // Check that the browser supports the APIs we need to implement our special
95 // DEV version of invokeGuardedCallback
96 if (typeof window !== 'undefined' && typeof window.dispatchEvent === 'function' && typeof document !== 'undefined' && typeof document.createEvent === 'function') {
97 var fakeNode = document.createElement('react');
98
99 var invokeGuardedCallbackDev = function (name, func, context, a, b, c, d, e, f) {
100 // If document doesn't exist we know for sure we will crash in this method
101 // when we call document.createEvent(). However this can cause confusing
102 // errors: https://github.com/facebookincubator/create-react-app/issues/3482
103 // So we preemptively throw with a better message instead.
104 !(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;
105 var evt = document.createEvent('Event');
106
107 // Keeps track of whether the user-provided callback threw an error. We
108 // set this to true at the beginning, then set it to false right after
109 // calling the function. If the function errors, `didError` will never be
110 // set to false. This strategy works even if the browser is flaky and
111 // fails to call our global error handler, because it doesn't rely on
112 // the error event at all.
113 var didError = true;
114
115 // Keeps track of the value of window.event so that we can reset it
116 // during the callback to let user code access window.event in the
117 // browsers that support it.
118 var windowEvent = window.event;
119
120 // Keeps track of the descriptor of window.event to restore it after event
121 // dispatching: https://github.com/facebook/react/issues/13688
122 var windowEventDescriptor = Object.getOwnPropertyDescriptor(window, 'event');
123
124 // Create an event handler for our fake event. We will synchronously
125 // dispatch our fake event using `dispatchEvent`. Inside the handler, we
126 // call the user-provided callback.
127 var funcArgs = Array.prototype.slice.call(arguments, 3);
128 function callCallback() {
129 // We immediately remove the callback from event listeners so that
130 // nested `invokeGuardedCallback` calls do not clash. Otherwise, a
131 // nested call would trigger the fake event handlers of any call higher
132 // in the stack.
133 fakeNode.removeEventListener(evtType, callCallback, false);
134
135 // We check for window.hasOwnProperty('event') to prevent the
136 // window.event assignment in both IE <= 10 as they throw an error
137 // "Member not found" in strict mode, and in Firefox which does not
138 // support window.event.
139 if (typeof window.event !== 'undefined' && window.hasOwnProperty('event')) {
140 window.event = windowEvent;
141 }
142
143 func.apply(context, funcArgs);
144 didError = false;
145 }
146
147 // Create a global error event handler. We use this to capture the value
148 // that was thrown. It's possible that this error handler will fire more
149 // than once; for example, if non-React code also calls `dispatchEvent`
150 // and a handler for that event throws. We should be resilient to most of
151 // those cases. Even if our error event handler fires more than once, the
152 // last error event is always used. If the callback actually does error,
153 // we know that the last error event is the correct one, because it's not
154 // possible for anything else to have happened in between our callback
155 // erroring and the code that follows the `dispatchEvent` call below. If
156 // the callback doesn't error, but the error event was fired, we know to
157 // ignore it because `didError` will be false, as described above.
158 var error = void 0;
159 // Use this to track whether the error event is ever called.
160 var didSetError = false;
161 var isCrossOriginError = false;
162
163 function handleWindowError(event) {
164 error = event.error;
165 didSetError = true;
166 if (error === null && event.colno === 0 && event.lineno === 0) {
167 isCrossOriginError = true;
168 }
169 if (event.defaultPrevented) {
170 // Some other error handler has prevented default.
171 // Browsers silence the error report if this happens.
172 // We'll remember this to later decide whether to log it or not.
173 if (error != null && typeof error === 'object') {
174 try {
175 error._suppressLogging = true;
176 } catch (inner) {
177 // Ignore.
178 }
179 }
180 }
181 }
182
183 // Create a fake event type.
184 var evtType = 'react-' + (name ? name : 'invokeguardedcallback');
185
186 // Attach our event handlers
187 window.addEventListener('error', handleWindowError);
188 fakeNode.addEventListener(evtType, callCallback, false);
189
190 // Synchronously dispatch our fake event. If the user-provided function
191 // errors, it will trigger our global error handler.
192 evt.initEvent(evtType, false, false);
193 fakeNode.dispatchEvent(evt);
194
195 if (windowEventDescriptor) {
196 Object.defineProperty(window, 'event', windowEventDescriptor);
197 }
198
199 if (didError) {
200 if (!didSetError) {
201 // The callback errored, but the error event never fired.
202 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.');
203 } else if (isCrossOriginError) {
204 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.');
205 }
206 this.onError(error);
207 }
208
209 // Remove our event listeners
210 window.removeEventListener('error', handleWindowError);
211 };
212
213 invokeGuardedCallbackImpl = invokeGuardedCallbackDev;
214 }
215}
216
217var invokeGuardedCallbackImpl$1 = invokeGuardedCallbackImpl;
218
219// Used by Fiber to simulate a try-catch.
220var hasError = false;
221var caughtError = null;
222
223// Used by event system to capture/rethrow the first error.
224var hasRethrowError = false;
225var rethrowError = null;
226
227var reporter = {
228 onError: function (error) {
229 hasError = true;
230 caughtError = error;
231 }
232};
233
234/**
235 * Call a function while guarding against errors that happens within it.
236 * Returns an error if it throws, otherwise null.
237 *
238 * In production, this is implemented using a try-catch. The reason we don't
239 * use a try-catch directly is so that we can swap out a different
240 * implementation in DEV mode.
241 *
242 * @param {String} name of the guard to use for logging or debugging
243 * @param {Function} func The function to invoke
244 * @param {*} context The context to use when calling the function
245 * @param {...*} args Arguments for function
246 */
247function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) {
248 hasError = false;
249 caughtError = null;
250 invokeGuardedCallbackImpl$1.apply(reporter, arguments);
251}
252
253/**
254 * Same as invokeGuardedCallback, but instead of returning an error, it stores
255 * it in a global so it can be rethrown by `rethrowCaughtError` later.
256 * TODO: See if caughtError and rethrowError can be unified.
257 *
258 * @param {String} name of the guard to use for logging or debugging
259 * @param {Function} func The function to invoke
260 * @param {*} context The context to use when calling the function
261 * @param {...*} args Arguments for function
262 */
263function invokeGuardedCallbackAndCatchFirstError(name, func, context, a, b, c, d, e, f) {
264 invokeGuardedCallback.apply(this, arguments);
265 if (hasError) {
266 var error = clearCaughtError();
267 if (!hasRethrowError) {
268 hasRethrowError = true;
269 rethrowError = error;
270 }
271 }
272}
273
274/**
275 * During execution of guarded functions we will capture the first error which
276 * we will rethrow to be handled by the top level error handler.
277 */
278function rethrowCaughtError() {
279 if (hasRethrowError) {
280 var error = rethrowError;
281 hasRethrowError = false;
282 rethrowError = null;
283 throw error;
284 }
285}
286
287function hasCaughtError() {
288 return hasError;
289}
290
291function clearCaughtError() {
292 if (hasError) {
293 var error = caughtError;
294 hasError = false;
295 caughtError = null;
296 return error;
297 } else {
298 invariant(false, 'clearCaughtError was called but no error was captured. This error is likely caused by a bug in React. Please file an issue.');
299 }
300}
301
302/**
303 * Injectable ordering of event plugins.
304 */
305var eventPluginOrder = null;
306
307/**
308 * Injectable mapping from names to event plugin modules.
309 */
310var namesToPlugins = {};
311
312/**
313 * Recomputes the plugin list using the injected plugins and plugin ordering.
314 *
315 * @private
316 */
317function recomputePluginOrdering() {
318 if (!eventPluginOrder) {
319 // Wait until an `eventPluginOrder` is injected.
320 return;
321 }
322 for (var pluginName in namesToPlugins) {
323 var pluginModule = namesToPlugins[pluginName];
324 var pluginIndex = eventPluginOrder.indexOf(pluginName);
325 !(pluginIndex > -1) ? invariant(false, 'EventPluginRegistry: Cannot inject event plugins that do not exist in the plugin ordering, `%s`.', pluginName) : void 0;
326 if (plugins[pluginIndex]) {
327 continue;
328 }
329 !pluginModule.extractEvents ? invariant(false, 'EventPluginRegistry: Event plugins must implement an `extractEvents` method, but `%s` does not.', pluginName) : void 0;
330 plugins[pluginIndex] = pluginModule;
331 var publishedEvents = pluginModule.eventTypes;
332 for (var eventName in publishedEvents) {
333 !publishEventForPlugin(publishedEvents[eventName], pluginModule, eventName) ? invariant(false, 'EventPluginRegistry: Failed to publish event `%s` for plugin `%s`.', eventName, pluginName) : void 0;
334 }
335 }
336}
337
338/**
339 * Publishes an event so that it can be dispatched by the supplied plugin.
340 *
341 * @param {object} dispatchConfig Dispatch configuration for the event.
342 * @param {object} PluginModule Plugin publishing the event.
343 * @return {boolean} True if the event was successfully published.
344 * @private
345 */
346function publishEventForPlugin(dispatchConfig, pluginModule, eventName) {
347 !!eventNameDispatchConfigs.hasOwnProperty(eventName) ? invariant(false, 'EventPluginHub: More than one plugin attempted to publish the same event name, `%s`.', eventName) : void 0;
348 eventNameDispatchConfigs[eventName] = dispatchConfig;
349
350 var phasedRegistrationNames = dispatchConfig.phasedRegistrationNames;
351 if (phasedRegistrationNames) {
352 for (var phaseName in phasedRegistrationNames) {
353 if (phasedRegistrationNames.hasOwnProperty(phaseName)) {
354 var phasedRegistrationName = phasedRegistrationNames[phaseName];
355 publishRegistrationName(phasedRegistrationName, pluginModule, eventName);
356 }
357 }
358 return true;
359 } else if (dispatchConfig.registrationName) {
360 publishRegistrationName(dispatchConfig.registrationName, pluginModule, eventName);
361 return true;
362 }
363 return false;
364}
365
366/**
367 * Publishes a registration name that is used to identify dispatched events.
368 *
369 * @param {string} registrationName Registration name to add.
370 * @param {object} PluginModule Plugin publishing the event.
371 * @private
372 */
373function publishRegistrationName(registrationName, pluginModule, eventName) {
374 !!registrationNameModules[registrationName] ? invariant(false, 'EventPluginHub: More than one plugin attempted to publish the same registration name, `%s`.', registrationName) : void 0;
375 registrationNameModules[registrationName] = pluginModule;
376 registrationNameDependencies[registrationName] = pluginModule.eventTypes[eventName].dependencies;
377
378 {
379 var lowerCasedName = registrationName.toLowerCase();
380 possibleRegistrationNames[lowerCasedName] = registrationName;
381
382 if (registrationName === 'onDoubleClick') {
383 possibleRegistrationNames.ondblclick = registrationName;
384 }
385 }
386}
387
388/**
389 * Registers plugins so that they can extract and dispatch events.
390 *
391 * @see {EventPluginHub}
392 */
393
394/**
395 * Ordered list of injected plugins.
396 */
397var plugins = [];
398
399/**
400 * Mapping from event name to dispatch config
401 */
402var eventNameDispatchConfigs = {};
403
404/**
405 * Mapping from registration name to plugin module
406 */
407var registrationNameModules = {};
408
409/**
410 * Mapping from registration name to event name
411 */
412var registrationNameDependencies = {};
413
414/**
415 * Mapping from lowercase registration names to the properly cased version,
416 * used to warn in the case of missing event handlers. Available
417 * only in true.
418 * @type {Object}
419 */
420var possibleRegistrationNames = {};
421// Trust the developer to only use possibleRegistrationNames in true
422
423/**
424 * Injects an ordering of plugins (by plugin name). This allows the ordering
425 * to be decoupled from injection of the actual plugins so that ordering is
426 * always deterministic regardless of packaging, on-the-fly injection, etc.
427 *
428 * @param {array} InjectedEventPluginOrder
429 * @internal
430 * @see {EventPluginHub.injection.injectEventPluginOrder}
431 */
432function injectEventPluginOrder(injectedEventPluginOrder) {
433 !!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;
434 // Clone the ordering so it cannot be dynamically mutated.
435 eventPluginOrder = Array.prototype.slice.call(injectedEventPluginOrder);
436 recomputePluginOrdering();
437}
438
439/**
440 * Injects plugins to be used by `EventPluginHub`. The plugin names must be
441 * in the ordering injected by `injectEventPluginOrder`.
442 *
443 * Plugins can be injected as part of page initialization or on-the-fly.
444 *
445 * @param {object} injectedNamesToPlugins Map from names to plugin modules.
446 * @internal
447 * @see {EventPluginHub.injection.injectEventPluginsByName}
448 */
449function injectEventPluginsByName(injectedNamesToPlugins) {
450 var isOrderingDirty = false;
451 for (var pluginName in injectedNamesToPlugins) {
452 if (!injectedNamesToPlugins.hasOwnProperty(pluginName)) {
453 continue;
454 }
455 var pluginModule = injectedNamesToPlugins[pluginName];
456 if (!namesToPlugins.hasOwnProperty(pluginName) || namesToPlugins[pluginName] !== pluginModule) {
457 !!namesToPlugins[pluginName] ? invariant(false, 'EventPluginRegistry: Cannot inject two different event plugins using the same name, `%s`.', pluginName) : void 0;
458 namesToPlugins[pluginName] = pluginModule;
459 isOrderingDirty = true;
460 }
461 }
462 if (isOrderingDirty) {
463 recomputePluginOrdering();
464 }
465}
466
467/**
468 * Similar to invariant but only logs a warning if the condition is not met.
469 * This can be used to log issues in development environments in critical
470 * paths. Removing the logging code for production environments will keep the
471 * same logic and follow the same code paths.
472 */
473
474var warningWithoutStack = function () {};
475
476{
477 warningWithoutStack = function (condition, format) {
478 for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
479 args[_key - 2] = arguments[_key];
480 }
481
482 if (format === undefined) {
483 throw new Error('`warningWithoutStack(condition, format, ...args)` requires a warning ' + 'message argument');
484 }
485 if (args.length > 8) {
486 // Check before the condition to catch violations early.
487 throw new Error('warningWithoutStack() currently supports at most 8 arguments.');
488 }
489 if (condition) {
490 return;
491 }
492 if (typeof console !== 'undefined') {
493 var argsWithFormat = args.map(function (item) {
494 return '' + item;
495 });
496 argsWithFormat.unshift('Warning: ' + format);
497
498 // We intentionally don't use spread (or .apply) directly because it
499 // breaks IE9: https://github.com/facebook/react/issues/13610
500 Function.prototype.apply.call(console.error, console, argsWithFormat);
501 }
502 try {
503 // --- Welcome to debugging React ---
504 // This error was thrown as a convenience so that you can use this stack
505 // to find the callsite that caused this warning to fire.
506 var argIndex = 0;
507 var message = 'Warning: ' + format.replace(/%s/g, function () {
508 return args[argIndex++];
509 });
510 throw new Error(message);
511 } catch (x) {}
512 };
513}
514
515var warningWithoutStack$1 = warningWithoutStack;
516
517var getFiberCurrentPropsFromNode = null;
518var getInstanceFromNode = null;
519var getNodeFromInstance = null;
520
521function setComponentTree(getFiberCurrentPropsFromNodeImpl, getInstanceFromNodeImpl, getNodeFromInstanceImpl) {
522 getFiberCurrentPropsFromNode = getFiberCurrentPropsFromNodeImpl;
523 getInstanceFromNode = getInstanceFromNodeImpl;
524 getNodeFromInstance = getNodeFromInstanceImpl;
525 {
526 !(getNodeFromInstance && getInstanceFromNode) ? warningWithoutStack$1(false, 'EventPluginUtils.setComponentTree(...): Injected ' + 'module is missing getNodeFromInstance or getInstanceFromNode.') : void 0;
527 }
528}
529
530var validateEventDispatches = void 0;
531{
532 validateEventDispatches = function (event) {
533 var dispatchListeners = event._dispatchListeners;
534 var dispatchInstances = event._dispatchInstances;
535
536 var listenersIsArr = Array.isArray(dispatchListeners);
537 var listenersLen = listenersIsArr ? dispatchListeners.length : dispatchListeners ? 1 : 0;
538
539 var instancesIsArr = Array.isArray(dispatchInstances);
540 var instancesLen = instancesIsArr ? dispatchInstances.length : dispatchInstances ? 1 : 0;
541
542 !(instancesIsArr === listenersIsArr && instancesLen === listenersLen) ? warningWithoutStack$1(false, 'EventPluginUtils: Invalid `event`.') : void 0;
543 };
544}
545
546/**
547 * Dispatch the event to the listener.
548 * @param {SyntheticEvent} event SyntheticEvent to handle
549 * @param {function} listener Application-level callback
550 * @param {*} inst Internal component instance
551 */
552function executeDispatch(event, listener, inst) {
553 var type = event.type || 'unknown-event';
554 event.currentTarget = getNodeFromInstance(inst);
555 invokeGuardedCallbackAndCatchFirstError(type, listener, undefined, event);
556 event.currentTarget = null;
557}
558
559/**
560 * Standard/simple iteration through an event's collected dispatches.
561 */
562function executeDispatchesInOrder(event) {
563 var dispatchListeners = event._dispatchListeners;
564 var dispatchInstances = event._dispatchInstances;
565 {
566 validateEventDispatches(event);
567 }
568 if (Array.isArray(dispatchListeners)) {
569 for (var i = 0; i < dispatchListeners.length; i++) {
570 if (event.isPropagationStopped()) {
571 break;
572 }
573 // Listeners and Instances are two parallel arrays that are always in sync.
574 executeDispatch(event, dispatchListeners[i], dispatchInstances[i]);
575 }
576 } else if (dispatchListeners) {
577 executeDispatch(event, dispatchListeners, dispatchInstances);
578 }
579 event._dispatchListeners = null;
580 event._dispatchInstances = null;
581}
582
583/**
584 * @see executeDispatchesInOrderStopAtTrueImpl
585 */
586
587
588/**
589 * Execution of a "direct" dispatch - there must be at most one dispatch
590 * accumulated on the event or it is considered an error. It doesn't really make
591 * sense for an event with multiple dispatches (bubbled) to keep track of the
592 * return values at each dispatch execution, but it does tend to make sense when
593 * dealing with "direct" dispatches.
594 *
595 * @return {*} The return value of executing the single dispatch.
596 */
597
598
599/**
600 * @param {SyntheticEvent} event
601 * @return {boolean} True iff number of dispatches accumulated is greater than 0.
602 */
603
604/**
605 * Accumulates items that must not be null or undefined into the first one. This
606 * is used to conserve memory by avoiding array allocations, and thus sacrifices
607 * API cleanness. Since `current` can be null before being passed in and not
608 * null after this function, make sure to assign it back to `current`:
609 *
610 * `a = accumulateInto(a, b);`
611 *
612 * This API should be sparingly used. Try `accumulate` for something cleaner.
613 *
614 * @return {*|array<*>} An accumulation of items.
615 */
616
617function accumulateInto(current, next) {
618 !(next != null) ? invariant(false, 'accumulateInto(...): Accumulated items must not be null or undefined.') : void 0;
619
620 if (current == null) {
621 return next;
622 }
623
624 // Both are not empty. Warning: Never call x.concat(y) when you are not
625 // certain that x is an Array (x could be a string with concat method).
626 if (Array.isArray(current)) {
627 if (Array.isArray(next)) {
628 current.push.apply(current, next);
629 return current;
630 }
631 current.push(next);
632 return current;
633 }
634
635 if (Array.isArray(next)) {
636 // A bit too dangerous to mutate `next`.
637 return [current].concat(next);
638 }
639
640 return [current, next];
641}
642
643/**
644 * @param {array} arr an "accumulation" of items which is either an Array or
645 * a single item. Useful when paired with the `accumulate` module. This is a
646 * simple utility that allows us to reason about a collection of items, but
647 * handling the case when there is exactly one item (and we do not need to
648 * allocate an array).
649 * @param {function} cb Callback invoked with each element or a collection.
650 * @param {?} [scope] Scope used as `this` in a callback.
651 */
652function forEachAccumulated(arr, cb, scope) {
653 if (Array.isArray(arr)) {
654 arr.forEach(cb, scope);
655 } else if (arr) {
656 cb.call(scope, arr);
657 }
658}
659
660/**
661 * Internal queue of events that have accumulated their dispatches and are
662 * waiting to have their dispatches executed.
663 */
664var eventQueue = null;
665
666/**
667 * Dispatches an event and releases it back into the pool, unless persistent.
668 *
669 * @param {?object} event Synthetic event to be dispatched.
670 * @private
671 */
672var executeDispatchesAndRelease = function (event) {
673 if (event) {
674 executeDispatchesInOrder(event);
675
676 if (!event.isPersistent()) {
677 event.constructor.release(event);
678 }
679 }
680};
681var executeDispatchesAndReleaseTopLevel = function (e) {
682 return executeDispatchesAndRelease(e);
683};
684
685function isInteractive(tag) {
686 return tag === 'button' || tag === 'input' || tag === 'select' || tag === 'textarea';
687}
688
689function shouldPreventMouseEvent(name, type, props) {
690 switch (name) {
691 case 'onClick':
692 case 'onClickCapture':
693 case 'onDoubleClick':
694 case 'onDoubleClickCapture':
695 case 'onMouseDown':
696 case 'onMouseDownCapture':
697 case 'onMouseMove':
698 case 'onMouseMoveCapture':
699 case 'onMouseUp':
700 case 'onMouseUpCapture':
701 return !!(props.disabled && isInteractive(type));
702 default:
703 return false;
704 }
705}
706
707/**
708 * This is a unified interface for event plugins to be installed and configured.
709 *
710 * Event plugins can implement the following properties:
711 *
712 * `extractEvents` {function(string, DOMEventTarget, string, object): *}
713 * Required. When a top-level event is fired, this method is expected to
714 * extract synthetic events that will in turn be queued and dispatched.
715 *
716 * `eventTypes` {object}
717 * Optional, plugins that fire events must publish a mapping of registration
718 * names that are used to register listeners. Values of this mapping must
719 * be objects that contain `registrationName` or `phasedRegistrationNames`.
720 *
721 * `executeDispatch` {function(object, function, string)}
722 * Optional, allows plugins to override how an event gets dispatched. By
723 * default, the listener is simply invoked.
724 *
725 * Each plugin that is injected into `EventsPluginHub` is immediately operable.
726 *
727 * @public
728 */
729
730/**
731 * Methods for injecting dependencies.
732 */
733var injection = {
734 /**
735 * @param {array} InjectedEventPluginOrder
736 * @public
737 */
738 injectEventPluginOrder: injectEventPluginOrder,
739
740 /**
741 * @param {object} injectedNamesToPlugins Map from names to plugin modules.
742 */
743 injectEventPluginsByName: injectEventPluginsByName
744};
745
746/**
747 * @param {object} inst The instance, which is the source of events.
748 * @param {string} registrationName Name of listener (e.g. `onClick`).
749 * @return {?function} The stored callback.
750 */
751function getListener(inst, registrationName) {
752 var listener = void 0;
753
754 // TODO: shouldPreventMouseEvent is DOM-specific and definitely should not
755 // live here; needs to be moved to a better place soon
756 var stateNode = inst.stateNode;
757 if (!stateNode) {
758 // Work in progress (ex: onload events in incremental mode).
759 return null;
760 }
761 var props = getFiberCurrentPropsFromNode(stateNode);
762 if (!props) {
763 // Work in progress.
764 return null;
765 }
766 listener = props[registrationName];
767 if (shouldPreventMouseEvent(registrationName, inst.type, props)) {
768 return null;
769 }
770 !(!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;
771 return listener;
772}
773
774/**
775 * Allows registered plugins an opportunity to extract events from top-level
776 * native browser events.
777 *
778 * @return {*} An accumulation of synthetic events.
779 * @internal
780 */
781function extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
782 var events = null;
783 for (var i = 0; i < plugins.length; i++) {
784 // Not every plugin in the ordering may be loaded at runtime.
785 var possiblePlugin = plugins[i];
786 if (possiblePlugin) {
787 var extractedEvents = possiblePlugin.extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget);
788 if (extractedEvents) {
789 events = accumulateInto(events, extractedEvents);
790 }
791 }
792 }
793 return events;
794}
795
796function runEventsInBatch(events) {
797 if (events !== null) {
798 eventQueue = accumulateInto(eventQueue, events);
799 }
800
801 // Set `eventQueue` to null before processing it so that we can tell if more
802 // events get enqueued while processing.
803 var processingEventQueue = eventQueue;
804 eventQueue = null;
805
806 if (!processingEventQueue) {
807 return;
808 }
809
810 forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseTopLevel);
811 !!eventQueue ? invariant(false, 'processEventQueue(): Additional events were enqueued while processing an event queue. Support for this has not yet been implemented.') : void 0;
812 // This would be a good time to rethrow if any of the event handlers threw.
813 rethrowCaughtError();
814}
815
816function runExtractedEventsInBatch(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
817 var events = extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget);
818 runEventsInBatch(events);
819}
820
821var FunctionComponent = 0;
822var ClassComponent = 1;
823var IndeterminateComponent = 2; // Before we know whether it is function or class
824var HostRoot = 3; // Root of a host tree. Could be nested inside another node.
825var HostPortal = 4; // A subtree. Could be an entry point to a different renderer.
826var HostComponent = 5;
827var HostText = 6;
828var Fragment = 7;
829var Mode = 8;
830var ContextConsumer = 9;
831var ContextProvider = 10;
832var ForwardRef = 11;
833var Profiler = 12;
834var SuspenseComponent = 13;
835var MemoComponent = 14;
836var SimpleMemoComponent = 15;
837var LazyComponent = 16;
838var IncompleteClassComponent = 17;
839var DehydratedSuspenseComponent = 18;
840
841var randomKey = Math.random().toString(36).slice(2);
842var internalInstanceKey = '__reactInternalInstance$' + randomKey;
843var internalEventHandlersKey = '__reactEventHandlers$' + randomKey;
844
845function precacheFiberNode(hostInst, node) {
846 node[internalInstanceKey] = hostInst;
847}
848
849/**
850 * Given a DOM node, return the closest ReactDOMComponent or
851 * ReactDOMTextComponent instance ancestor.
852 */
853function getClosestInstanceFromNode(node) {
854 if (node[internalInstanceKey]) {
855 return node[internalInstanceKey];
856 }
857
858 while (!node[internalInstanceKey]) {
859 if (node.parentNode) {
860 node = node.parentNode;
861 } else {
862 // Top of the tree. This node must not be part of a React tree (or is
863 // unmounted, potentially).
864 return null;
865 }
866 }
867
868 var inst = node[internalInstanceKey];
869 if (inst.tag === HostComponent || inst.tag === HostText) {
870 // In Fiber, this will always be the deepest root.
871 return inst;
872 }
873
874 return null;
875}
876
877/**
878 * Given a DOM node, return the ReactDOMComponent or ReactDOMTextComponent
879 * instance, or null if the node was not rendered by this React.
880 */
881function getInstanceFromNode$1(node) {
882 var inst = node[internalInstanceKey];
883 if (inst) {
884 if (inst.tag === HostComponent || inst.tag === HostText) {
885 return inst;
886 } else {
887 return null;
888 }
889 }
890 return null;
891}
892
893/**
894 * Given a ReactDOMComponent or ReactDOMTextComponent, return the corresponding
895 * DOM node.
896 */
897function getNodeFromInstance$1(inst) {
898 if (inst.tag === HostComponent || inst.tag === HostText) {
899 // In Fiber this, is just the state node right now. We assume it will be
900 // a host component or host text.
901 return inst.stateNode;
902 }
903
904 // Without this first invariant, passing a non-DOM-component triggers the next
905 // invariant for a missing parent, which is super confusing.
906 invariant(false, 'getNodeFromInstance: Invalid argument.');
907}
908
909function getFiberCurrentPropsFromNode$1(node) {
910 return node[internalEventHandlersKey] || null;
911}
912
913function updateFiberProps(node, props) {
914 node[internalEventHandlersKey] = props;
915}
916
917function getParent(inst) {
918 do {
919 inst = inst.return;
920 // TODO: If this is a HostRoot we might want to bail out.
921 // That is depending on if we want nested subtrees (layers) to bubble
922 // events to their parent. We could also go through parentNode on the
923 // host node but that wouldn't work for React Native and doesn't let us
924 // do the portal feature.
925 } while (inst && inst.tag !== HostComponent);
926 if (inst) {
927 return inst;
928 }
929 return null;
930}
931
932/**
933 * Return the lowest common ancestor of A and B, or null if they are in
934 * different trees.
935 */
936function getLowestCommonAncestor(instA, instB) {
937 var depthA = 0;
938 for (var tempA = instA; tempA; tempA = getParent(tempA)) {
939 depthA++;
940 }
941 var depthB = 0;
942 for (var tempB = instB; tempB; tempB = getParent(tempB)) {
943 depthB++;
944 }
945
946 // If A is deeper, crawl up.
947 while (depthA - depthB > 0) {
948 instA = getParent(instA);
949 depthA--;
950 }
951
952 // If B is deeper, crawl up.
953 while (depthB - depthA > 0) {
954 instB = getParent(instB);
955 depthB--;
956 }
957
958 // Walk in lockstep until we find a match.
959 var depth = depthA;
960 while (depth--) {
961 if (instA === instB || instA === instB.alternate) {
962 return instA;
963 }
964 instA = getParent(instA);
965 instB = getParent(instB);
966 }
967 return null;
968}
969
970/**
971 * Return if A is an ancestor of B.
972 */
973
974
975/**
976 * Return the parent instance of the passed-in instance.
977 */
978
979
980/**
981 * Simulates the traversal of a two-phase, capture/bubble event dispatch.
982 */
983function traverseTwoPhase(inst, fn, arg) {
984 var path = [];
985 while (inst) {
986 path.push(inst);
987 inst = getParent(inst);
988 }
989 var i = void 0;
990 for (i = path.length; i-- > 0;) {
991 fn(path[i], 'captured', arg);
992 }
993 for (i = 0; i < path.length; i++) {
994 fn(path[i], 'bubbled', arg);
995 }
996}
997
998/**
999 * Traverses the ID hierarchy and invokes the supplied `cb` on any IDs that
1000 * should would receive a `mouseEnter` or `mouseLeave` event.
1001 *
1002 * Does not invoke the callback on the nearest common ancestor because nothing
1003 * "entered" or "left" that element.
1004 */
1005function traverseEnterLeave(from, to, fn, argFrom, argTo) {
1006 var common = from && to ? getLowestCommonAncestor(from, to) : null;
1007 var pathFrom = [];
1008 while (true) {
1009 if (!from) {
1010 break;
1011 }
1012 if (from === common) {
1013 break;
1014 }
1015 var alternate = from.alternate;
1016 if (alternate !== null && alternate === common) {
1017 break;
1018 }
1019 pathFrom.push(from);
1020 from = getParent(from);
1021 }
1022 var pathTo = [];
1023 while (true) {
1024 if (!to) {
1025 break;
1026 }
1027 if (to === common) {
1028 break;
1029 }
1030 var _alternate = to.alternate;
1031 if (_alternate !== null && _alternate === common) {
1032 break;
1033 }
1034 pathTo.push(to);
1035 to = getParent(to);
1036 }
1037 for (var i = 0; i < pathFrom.length; i++) {
1038 fn(pathFrom[i], 'bubbled', argFrom);
1039 }
1040 for (var _i = pathTo.length; _i-- > 0;) {
1041 fn(pathTo[_i], 'captured', argTo);
1042 }
1043}
1044
1045/**
1046 * Some event types have a notion of different registration names for different
1047 * "phases" of propagation. This finds listeners by a given phase.
1048 */
1049function listenerAtPhase(inst, event, propagationPhase) {
1050 var registrationName = event.dispatchConfig.phasedRegistrationNames[propagationPhase];
1051 return getListener(inst, registrationName);
1052}
1053
1054/**
1055 * A small set of propagation patterns, each of which will accept a small amount
1056 * of information, and generate a set of "dispatch ready event objects" - which
1057 * are sets of events that have already been annotated with a set of dispatched
1058 * listener functions/ids. The API is designed this way to discourage these
1059 * propagation strategies from actually executing the dispatches, since we
1060 * always want to collect the entire set of dispatches before executing even a
1061 * single one.
1062 */
1063
1064/**
1065 * Tags a `SyntheticEvent` with dispatched listeners. Creating this function
1066 * here, allows us to not have to bind or create functions for each event.
1067 * Mutating the event's members allows us to not have to create a wrapping
1068 * "dispatch" object that pairs the event with the listener.
1069 */
1070function accumulateDirectionalDispatches(inst, phase, event) {
1071 {
1072 !inst ? warningWithoutStack$1(false, 'Dispatching inst must not be null') : void 0;
1073 }
1074 var listener = listenerAtPhase(inst, event, phase);
1075 if (listener) {
1076 event._dispatchListeners = accumulateInto(event._dispatchListeners, listener);
1077 event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);
1078 }
1079}
1080
1081/**
1082 * Collect dispatches (must be entirely collected before dispatching - see unit
1083 * tests). Lazily allocate the array to conserve memory. We must loop through
1084 * each event and perform the traversal for each one. We cannot perform a
1085 * single traversal for the entire collection of events because each event may
1086 * have a different target.
1087 */
1088function accumulateTwoPhaseDispatchesSingle(event) {
1089 if (event && event.dispatchConfig.phasedRegistrationNames) {
1090 traverseTwoPhase(event._targetInst, accumulateDirectionalDispatches, event);
1091 }
1092}
1093
1094/**
1095 * Accumulates without regard to direction, does not look for phased
1096 * registration names. Same as `accumulateDirectDispatchesSingle` but without
1097 * requiring that the `dispatchMarker` be the same as the dispatched ID.
1098 */
1099function accumulateDispatches(inst, ignoredDirection, event) {
1100 if (inst && event && event.dispatchConfig.registrationName) {
1101 var registrationName = event.dispatchConfig.registrationName;
1102 var listener = getListener(inst, registrationName);
1103 if (listener) {
1104 event._dispatchListeners = accumulateInto(event._dispatchListeners, listener);
1105 event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);
1106 }
1107 }
1108}
1109
1110/**
1111 * Accumulates dispatches on an `SyntheticEvent`, but only for the
1112 * `dispatchMarker`.
1113 * @param {SyntheticEvent} event
1114 */
1115function accumulateDirectDispatchesSingle(event) {
1116 if (event && event.dispatchConfig.registrationName) {
1117 accumulateDispatches(event._targetInst, null, event);
1118 }
1119}
1120
1121function accumulateTwoPhaseDispatches(events) {
1122 forEachAccumulated(events, accumulateTwoPhaseDispatchesSingle);
1123}
1124
1125
1126
1127function accumulateEnterLeaveDispatches(leave, enter, from, to) {
1128 traverseEnterLeave(from, to, accumulateDispatches, leave, enter);
1129}
1130
1131function accumulateDirectDispatches(events) {
1132 forEachAccumulated(events, accumulateDirectDispatchesSingle);
1133}
1134
1135var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
1136
1137// Do not uses the below two methods directly!
1138// Instead use constants exported from DOMTopLevelEventTypes in ReactDOM.
1139// (It is the only module that is allowed to access these methods.)
1140
1141function unsafeCastStringToDOMTopLevelType(topLevelType) {
1142 return topLevelType;
1143}
1144
1145function unsafeCastDOMTopLevelTypeToString(topLevelType) {
1146 return topLevelType;
1147}
1148
1149/**
1150 * Generate a mapping of standard vendor prefixes using the defined style property and event name.
1151 *
1152 * @param {string} styleProp
1153 * @param {string} eventName
1154 * @returns {object}
1155 */
1156function makePrefixMap(styleProp, eventName) {
1157 var prefixes = {};
1158
1159 prefixes[styleProp.toLowerCase()] = eventName.toLowerCase();
1160 prefixes['Webkit' + styleProp] = 'webkit' + eventName;
1161 prefixes['Moz' + styleProp] = 'moz' + eventName;
1162
1163 return prefixes;
1164}
1165
1166/**
1167 * A list of event names to a configurable list of vendor prefixes.
1168 */
1169var vendorPrefixes = {
1170 animationend: makePrefixMap('Animation', 'AnimationEnd'),
1171 animationiteration: makePrefixMap('Animation', 'AnimationIteration'),
1172 animationstart: makePrefixMap('Animation', 'AnimationStart'),
1173 transitionend: makePrefixMap('Transition', 'TransitionEnd')
1174};
1175
1176/**
1177 * Event names that have already been detected and prefixed (if applicable).
1178 */
1179var prefixedEventNames = {};
1180
1181/**
1182 * Element to check for prefixes on.
1183 */
1184var style = {};
1185
1186/**
1187 * Bootstrap if a DOM exists.
1188 */
1189if (canUseDOM) {
1190 style = document.createElement('div').style;
1191
1192 // On some platforms, in particular some releases of Android 4.x,
1193 // the un-prefixed "animation" and "transition" properties are defined on the
1194 // style object but the events that fire will still be prefixed, so we need
1195 // to check if the un-prefixed events are usable, and if not remove them from the map.
1196 if (!('AnimationEvent' in window)) {
1197 delete vendorPrefixes.animationend.animation;
1198 delete vendorPrefixes.animationiteration.animation;
1199 delete vendorPrefixes.animationstart.animation;
1200 }
1201
1202 // Same as above
1203 if (!('TransitionEvent' in window)) {
1204 delete vendorPrefixes.transitionend.transition;
1205 }
1206}
1207
1208/**
1209 * Attempts to determine the correct vendor prefixed event name.
1210 *
1211 * @param {string} eventName
1212 * @returns {string}
1213 */
1214function getVendorPrefixedEventName(eventName) {
1215 if (prefixedEventNames[eventName]) {
1216 return prefixedEventNames[eventName];
1217 } else if (!vendorPrefixes[eventName]) {
1218 return eventName;
1219 }
1220
1221 var prefixMap = vendorPrefixes[eventName];
1222
1223 for (var styleProp in prefixMap) {
1224 if (prefixMap.hasOwnProperty(styleProp) && styleProp in style) {
1225 return prefixedEventNames[eventName] = prefixMap[styleProp];
1226 }
1227 }
1228
1229 return eventName;
1230}
1231
1232/**
1233 * To identify top level events in ReactDOM, we use constants defined by this
1234 * module. This is the only module that uses the unsafe* methods to express
1235 * that the constants actually correspond to the browser event names. This lets
1236 * us save some bundle size by avoiding a top level type -> event name map.
1237 * The rest of ReactDOM code should import top level types from this file.
1238 */
1239var TOP_ABORT = unsafeCastStringToDOMTopLevelType('abort');
1240var TOP_ANIMATION_END = unsafeCastStringToDOMTopLevelType(getVendorPrefixedEventName('animationend'));
1241var TOP_ANIMATION_ITERATION = unsafeCastStringToDOMTopLevelType(getVendorPrefixedEventName('animationiteration'));
1242var TOP_ANIMATION_START = unsafeCastStringToDOMTopLevelType(getVendorPrefixedEventName('animationstart'));
1243var TOP_BLUR = unsafeCastStringToDOMTopLevelType('blur');
1244var TOP_CAN_PLAY = unsafeCastStringToDOMTopLevelType('canplay');
1245var TOP_CAN_PLAY_THROUGH = unsafeCastStringToDOMTopLevelType('canplaythrough');
1246var TOP_CANCEL = unsafeCastStringToDOMTopLevelType('cancel');
1247var TOP_CHANGE = unsafeCastStringToDOMTopLevelType('change');
1248var TOP_CLICK = unsafeCastStringToDOMTopLevelType('click');
1249var TOP_CLOSE = unsafeCastStringToDOMTopLevelType('close');
1250var TOP_COMPOSITION_END = unsafeCastStringToDOMTopLevelType('compositionend');
1251var TOP_COMPOSITION_START = unsafeCastStringToDOMTopLevelType('compositionstart');
1252var TOP_COMPOSITION_UPDATE = unsafeCastStringToDOMTopLevelType('compositionupdate');
1253var TOP_CONTEXT_MENU = unsafeCastStringToDOMTopLevelType('contextmenu');
1254var TOP_COPY = unsafeCastStringToDOMTopLevelType('copy');
1255var TOP_CUT = unsafeCastStringToDOMTopLevelType('cut');
1256var TOP_DOUBLE_CLICK = unsafeCastStringToDOMTopLevelType('dblclick');
1257var TOP_AUX_CLICK = unsafeCastStringToDOMTopLevelType('auxclick');
1258var TOP_DRAG = unsafeCastStringToDOMTopLevelType('drag');
1259var TOP_DRAG_END = unsafeCastStringToDOMTopLevelType('dragend');
1260var TOP_DRAG_ENTER = unsafeCastStringToDOMTopLevelType('dragenter');
1261var TOP_DRAG_EXIT = unsafeCastStringToDOMTopLevelType('dragexit');
1262var TOP_DRAG_LEAVE = unsafeCastStringToDOMTopLevelType('dragleave');
1263var TOP_DRAG_OVER = unsafeCastStringToDOMTopLevelType('dragover');
1264var TOP_DRAG_START = unsafeCastStringToDOMTopLevelType('dragstart');
1265var TOP_DROP = unsafeCastStringToDOMTopLevelType('drop');
1266var TOP_DURATION_CHANGE = unsafeCastStringToDOMTopLevelType('durationchange');
1267var TOP_EMPTIED = unsafeCastStringToDOMTopLevelType('emptied');
1268var TOP_ENCRYPTED = unsafeCastStringToDOMTopLevelType('encrypted');
1269var TOP_ENDED = unsafeCastStringToDOMTopLevelType('ended');
1270var TOP_ERROR = unsafeCastStringToDOMTopLevelType('error');
1271var TOP_FOCUS = unsafeCastStringToDOMTopLevelType('focus');
1272var TOP_GOT_POINTER_CAPTURE = unsafeCastStringToDOMTopLevelType('gotpointercapture');
1273var TOP_INPUT = unsafeCastStringToDOMTopLevelType('input');
1274var TOP_INVALID = unsafeCastStringToDOMTopLevelType('invalid');
1275var TOP_KEY_DOWN = unsafeCastStringToDOMTopLevelType('keydown');
1276var TOP_KEY_PRESS = unsafeCastStringToDOMTopLevelType('keypress');
1277var TOP_KEY_UP = unsafeCastStringToDOMTopLevelType('keyup');
1278var TOP_LOAD = unsafeCastStringToDOMTopLevelType('load');
1279var TOP_LOAD_START = unsafeCastStringToDOMTopLevelType('loadstart');
1280var TOP_LOADED_DATA = unsafeCastStringToDOMTopLevelType('loadeddata');
1281var TOP_LOADED_METADATA = unsafeCastStringToDOMTopLevelType('loadedmetadata');
1282var TOP_LOST_POINTER_CAPTURE = unsafeCastStringToDOMTopLevelType('lostpointercapture');
1283var TOP_MOUSE_DOWN = unsafeCastStringToDOMTopLevelType('mousedown');
1284var TOP_MOUSE_MOVE = unsafeCastStringToDOMTopLevelType('mousemove');
1285var TOP_MOUSE_OUT = unsafeCastStringToDOMTopLevelType('mouseout');
1286var TOP_MOUSE_OVER = unsafeCastStringToDOMTopLevelType('mouseover');
1287var TOP_MOUSE_UP = unsafeCastStringToDOMTopLevelType('mouseup');
1288var TOP_PASTE = unsafeCastStringToDOMTopLevelType('paste');
1289var TOP_PAUSE = unsafeCastStringToDOMTopLevelType('pause');
1290var TOP_PLAY = unsafeCastStringToDOMTopLevelType('play');
1291var TOP_PLAYING = unsafeCastStringToDOMTopLevelType('playing');
1292var TOP_POINTER_CANCEL = unsafeCastStringToDOMTopLevelType('pointercancel');
1293var TOP_POINTER_DOWN = unsafeCastStringToDOMTopLevelType('pointerdown');
1294
1295
1296var TOP_POINTER_MOVE = unsafeCastStringToDOMTopLevelType('pointermove');
1297var TOP_POINTER_OUT = unsafeCastStringToDOMTopLevelType('pointerout');
1298var TOP_POINTER_OVER = unsafeCastStringToDOMTopLevelType('pointerover');
1299var TOP_POINTER_UP = unsafeCastStringToDOMTopLevelType('pointerup');
1300var TOP_PROGRESS = unsafeCastStringToDOMTopLevelType('progress');
1301var TOP_RATE_CHANGE = unsafeCastStringToDOMTopLevelType('ratechange');
1302var TOP_RESET = unsafeCastStringToDOMTopLevelType('reset');
1303var TOP_SCROLL = unsafeCastStringToDOMTopLevelType('scroll');
1304var TOP_SEEKED = unsafeCastStringToDOMTopLevelType('seeked');
1305var TOP_SEEKING = unsafeCastStringToDOMTopLevelType('seeking');
1306var TOP_SELECTION_CHANGE = unsafeCastStringToDOMTopLevelType('selectionchange');
1307var TOP_STALLED = unsafeCastStringToDOMTopLevelType('stalled');
1308var TOP_SUBMIT = unsafeCastStringToDOMTopLevelType('submit');
1309var TOP_SUSPEND = unsafeCastStringToDOMTopLevelType('suspend');
1310var TOP_TEXT_INPUT = unsafeCastStringToDOMTopLevelType('textInput');
1311var TOP_TIME_UPDATE = unsafeCastStringToDOMTopLevelType('timeupdate');
1312var TOP_TOGGLE = unsafeCastStringToDOMTopLevelType('toggle');
1313var TOP_TOUCH_CANCEL = unsafeCastStringToDOMTopLevelType('touchcancel');
1314var TOP_TOUCH_END = unsafeCastStringToDOMTopLevelType('touchend');
1315var TOP_TOUCH_MOVE = unsafeCastStringToDOMTopLevelType('touchmove');
1316var TOP_TOUCH_START = unsafeCastStringToDOMTopLevelType('touchstart');
1317var TOP_TRANSITION_END = unsafeCastStringToDOMTopLevelType(getVendorPrefixedEventName('transitionend'));
1318var TOP_VOLUME_CHANGE = unsafeCastStringToDOMTopLevelType('volumechange');
1319var TOP_WAITING = unsafeCastStringToDOMTopLevelType('waiting');
1320var TOP_WHEEL = unsafeCastStringToDOMTopLevelType('wheel');
1321
1322// List of events that need to be individually attached to media elements.
1323// Note that events in this list will *not* be listened to at the top level
1324// unless they're explicitly whitelisted in `ReactBrowserEventEmitter.listenTo`.
1325var 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];
1326
1327function getRawEventName(topLevelType) {
1328 return unsafeCastDOMTopLevelTypeToString(topLevelType);
1329}
1330
1331/**
1332 * These variables store information about text content of a target node,
1333 * allowing comparison of content before and after a given event.
1334 *
1335 * Identify the node where selection currently begins, then observe
1336 * both its text content and its current position in the DOM. Since the
1337 * browser may natively replace the target node during composition, we can
1338 * use its position to find its replacement.
1339 *
1340 *
1341 */
1342
1343var root = null;
1344var startText = null;
1345var fallbackText = null;
1346
1347function initialize(nativeEventTarget) {
1348 root = nativeEventTarget;
1349 startText = getText();
1350 return true;
1351}
1352
1353function reset() {
1354 root = null;
1355 startText = null;
1356 fallbackText = null;
1357}
1358
1359function getData() {
1360 if (fallbackText) {
1361 return fallbackText;
1362 }
1363
1364 var start = void 0;
1365 var startValue = startText;
1366 var startLength = startValue.length;
1367 var end = void 0;
1368 var endValue = getText();
1369 var endLength = endValue.length;
1370
1371 for (start = 0; start < startLength; start++) {
1372 if (startValue[start] !== endValue[start]) {
1373 break;
1374 }
1375 }
1376
1377 var minEnd = startLength - start;
1378 for (end = 1; end <= minEnd; end++) {
1379 if (startValue[startLength - end] !== endValue[endLength - end]) {
1380 break;
1381 }
1382 }
1383
1384 var sliceTail = end > 1 ? 1 - end : undefined;
1385 fallbackText = endValue.slice(start, sliceTail);
1386 return fallbackText;
1387}
1388
1389function getText() {
1390 if ('value' in root) {
1391 return root.value;
1392 }
1393 return root.textContent;
1394}
1395
1396var ReactInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
1397
1398var _assign = ReactInternals.assign;
1399
1400/* eslint valid-typeof: 0 */
1401
1402var EVENT_POOL_SIZE = 10;
1403
1404/**
1405 * @interface Event
1406 * @see http://www.w3.org/TR/DOM-Level-3-Events/
1407 */
1408var EventInterface = {
1409 type: null,
1410 target: null,
1411 // currentTarget is set when dispatching; no use in copying it here
1412 currentTarget: function () {
1413 return null;
1414 },
1415 eventPhase: null,
1416 bubbles: null,
1417 cancelable: null,
1418 timeStamp: function (event) {
1419 return event.timeStamp || Date.now();
1420 },
1421 defaultPrevented: null,
1422 isTrusted: null
1423};
1424
1425function functionThatReturnsTrue() {
1426 return true;
1427}
1428
1429function functionThatReturnsFalse() {
1430 return false;
1431}
1432
1433/**
1434 * Synthetic events are dispatched by event plugins, typically in response to a
1435 * top-level event delegation handler.
1436 *
1437 * These systems should generally use pooling to reduce the frequency of garbage
1438 * collection. The system should check `isPersistent` to determine whether the
1439 * event should be released into the pool after being dispatched. Users that
1440 * need a persisted event should invoke `persist`.
1441 *
1442 * Synthetic events (and subclasses) implement the DOM Level 3 Events API by
1443 * normalizing browser quirks. Subclasses do not necessarily have to implement a
1444 * DOM interface; custom application-specific events can also subclass this.
1445 *
1446 * @param {object} dispatchConfig Configuration used to dispatch this event.
1447 * @param {*} targetInst Marker identifying the event target.
1448 * @param {object} nativeEvent Native browser event.
1449 * @param {DOMEventTarget} nativeEventTarget Target node.
1450 */
1451function SyntheticEvent(dispatchConfig, targetInst, nativeEvent, nativeEventTarget) {
1452 {
1453 // these have a getter/setter for warnings
1454 delete this.nativeEvent;
1455 delete this.preventDefault;
1456 delete this.stopPropagation;
1457 delete this.isDefaultPrevented;
1458 delete this.isPropagationStopped;
1459 }
1460
1461 this.dispatchConfig = dispatchConfig;
1462 this._targetInst = targetInst;
1463 this.nativeEvent = nativeEvent;
1464
1465 var Interface = this.constructor.Interface;
1466 for (var propName in Interface) {
1467 if (!Interface.hasOwnProperty(propName)) {
1468 continue;
1469 }
1470 {
1471 delete this[propName]; // this has a getter/setter for warnings
1472 }
1473 var normalize = Interface[propName];
1474 if (normalize) {
1475 this[propName] = normalize(nativeEvent);
1476 } else {
1477 if (propName === 'target') {
1478 this.target = nativeEventTarget;
1479 } else {
1480 this[propName] = nativeEvent[propName];
1481 }
1482 }
1483 }
1484
1485 var defaultPrevented = nativeEvent.defaultPrevented != null ? nativeEvent.defaultPrevented : nativeEvent.returnValue === false;
1486 if (defaultPrevented) {
1487 this.isDefaultPrevented = functionThatReturnsTrue;
1488 } else {
1489 this.isDefaultPrevented = functionThatReturnsFalse;
1490 }
1491 this.isPropagationStopped = functionThatReturnsFalse;
1492 return this;
1493}
1494
1495_assign(SyntheticEvent.prototype, {
1496 preventDefault: function () {
1497 this.defaultPrevented = true;
1498 var event = this.nativeEvent;
1499 if (!event) {
1500 return;
1501 }
1502
1503 if (event.preventDefault) {
1504 event.preventDefault();
1505 } else if (typeof event.returnValue !== 'unknown') {
1506 event.returnValue = false;
1507 }
1508 this.isDefaultPrevented = functionThatReturnsTrue;
1509 },
1510
1511 stopPropagation: function () {
1512 var event = this.nativeEvent;
1513 if (!event) {
1514 return;
1515 }
1516
1517 if (event.stopPropagation) {
1518 event.stopPropagation();
1519 } else if (typeof event.cancelBubble !== 'unknown') {
1520 // The ChangeEventPlugin registers a "propertychange" event for
1521 // IE. This event does not support bubbling or cancelling, and
1522 // any references to cancelBubble throw "Member not found". A
1523 // typeof check of "unknown" circumvents this issue (and is also
1524 // IE specific).
1525 event.cancelBubble = true;
1526 }
1527
1528 this.isPropagationStopped = functionThatReturnsTrue;
1529 },
1530
1531 /**
1532 * We release all dispatched `SyntheticEvent`s after each event loop, adding
1533 * them back into the pool. This allows a way to hold onto a reference that
1534 * won't be added back into the pool.
1535 */
1536 persist: function () {
1537 this.isPersistent = functionThatReturnsTrue;
1538 },
1539
1540 /**
1541 * Checks if this event should be released back into the pool.
1542 *
1543 * @return {boolean} True if this should not be released, false otherwise.
1544 */
1545 isPersistent: functionThatReturnsFalse,
1546
1547 /**
1548 * `PooledClass` looks for `destructor` on each instance it releases.
1549 */
1550 destructor: function () {
1551 var Interface = this.constructor.Interface;
1552 for (var propName in Interface) {
1553 {
1554 Object.defineProperty(this, propName, getPooledWarningPropertyDefinition(propName, Interface[propName]));
1555 }
1556 }
1557 this.dispatchConfig = null;
1558 this._targetInst = null;
1559 this.nativeEvent = null;
1560 this.isDefaultPrevented = functionThatReturnsFalse;
1561 this.isPropagationStopped = functionThatReturnsFalse;
1562 this._dispatchListeners = null;
1563 this._dispatchInstances = null;
1564 {
1565 Object.defineProperty(this, 'nativeEvent', getPooledWarningPropertyDefinition('nativeEvent', null));
1566 Object.defineProperty(this, 'isDefaultPrevented', getPooledWarningPropertyDefinition('isDefaultPrevented', functionThatReturnsFalse));
1567 Object.defineProperty(this, 'isPropagationStopped', getPooledWarningPropertyDefinition('isPropagationStopped', functionThatReturnsFalse));
1568 Object.defineProperty(this, 'preventDefault', getPooledWarningPropertyDefinition('preventDefault', function () {}));
1569 Object.defineProperty(this, 'stopPropagation', getPooledWarningPropertyDefinition('stopPropagation', function () {}));
1570 }
1571 }
1572});
1573
1574SyntheticEvent.Interface = EventInterface;
1575
1576/**
1577 * Helper to reduce boilerplate when creating subclasses.
1578 */
1579SyntheticEvent.extend = function (Interface) {
1580 var Super = this;
1581
1582 var E = function () {};
1583 E.prototype = Super.prototype;
1584 var prototype = new E();
1585
1586 function Class() {
1587 return Super.apply(this, arguments);
1588 }
1589 _assign(prototype, Class.prototype);
1590 Class.prototype = prototype;
1591 Class.prototype.constructor = Class;
1592
1593 Class.Interface = _assign({}, Super.Interface, Interface);
1594 Class.extend = Super.extend;
1595 addEventPoolingTo(Class);
1596
1597 return Class;
1598};
1599
1600addEventPoolingTo(SyntheticEvent);
1601
1602/**
1603 * Helper to nullify syntheticEvent instance properties when destructing
1604 *
1605 * @param {String} propName
1606 * @param {?object} getVal
1607 * @return {object} defineProperty object
1608 */
1609function getPooledWarningPropertyDefinition(propName, getVal) {
1610 var isFunction = typeof getVal === 'function';
1611 return {
1612 configurable: true,
1613 set: set,
1614 get: get
1615 };
1616
1617 function set(val) {
1618 var action = isFunction ? 'setting the method' : 'setting the property';
1619 warn(action, 'This is effectively a no-op');
1620 return val;
1621 }
1622
1623 function get() {
1624 var action = isFunction ? 'accessing the method' : 'accessing the property';
1625 var result = isFunction ? 'This is a no-op function' : 'This is set to null';
1626 warn(action, result);
1627 return getVal;
1628 }
1629
1630 function warn(action, result) {
1631 var warningCondition = false;
1632 !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;
1633 }
1634}
1635
1636function getPooledEvent(dispatchConfig, targetInst, nativeEvent, nativeInst) {
1637 var EventConstructor = this;
1638 if (EventConstructor.eventPool.length) {
1639 var instance = EventConstructor.eventPool.pop();
1640 EventConstructor.call(instance, dispatchConfig, targetInst, nativeEvent, nativeInst);
1641 return instance;
1642 }
1643 return new EventConstructor(dispatchConfig, targetInst, nativeEvent, nativeInst);
1644}
1645
1646function releasePooledEvent(event) {
1647 var EventConstructor = this;
1648 !(event instanceof EventConstructor) ? invariant(false, 'Trying to release an event instance into a pool of a different type.') : void 0;
1649 event.destructor();
1650 if (EventConstructor.eventPool.length < EVENT_POOL_SIZE) {
1651 EventConstructor.eventPool.push(event);
1652 }
1653}
1654
1655function addEventPoolingTo(EventConstructor) {
1656 EventConstructor.eventPool = [];
1657 EventConstructor.getPooled = getPooledEvent;
1658 EventConstructor.release = releasePooledEvent;
1659}
1660
1661/**
1662 * @interface Event
1663 * @see http://www.w3.org/TR/DOM-Level-3-Events/#events-compositionevents
1664 */
1665var SyntheticCompositionEvent = SyntheticEvent.extend({
1666 data: null
1667});
1668
1669/**
1670 * @interface Event
1671 * @see http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105
1672 * /#events-inputevents
1673 */
1674var SyntheticInputEvent = SyntheticEvent.extend({
1675 data: null
1676});
1677
1678var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
1679var START_KEYCODE = 229;
1680
1681var canUseCompositionEvent = canUseDOM && 'CompositionEvent' in window;
1682
1683var documentMode = null;
1684if (canUseDOM && 'documentMode' in document) {
1685 documentMode = document.documentMode;
1686}
1687
1688// Webkit offers a very useful `textInput` event that can be used to
1689// directly represent `beforeInput`. The IE `textinput` event is not as
1690// useful, so we don't use it.
1691var canUseTextInputEvent = canUseDOM && 'TextEvent' in window && !documentMode;
1692
1693// In IE9+, we have access to composition events, but the data supplied
1694// by the native compositionend event may be incorrect. Japanese ideographic
1695// spaces, for instance (\u3000) are not recorded correctly.
1696var useFallbackCompositionData = canUseDOM && (!canUseCompositionEvent || documentMode && documentMode > 8 && documentMode <= 11);
1697
1698var SPACEBAR_CODE = 32;
1699var SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE);
1700
1701// Events and their corresponding property names.
1702var eventTypes = {
1703 beforeInput: {
1704 phasedRegistrationNames: {
1705 bubbled: 'onBeforeInput',
1706 captured: 'onBeforeInputCapture'
1707 },
1708 dependencies: [TOP_COMPOSITION_END, TOP_KEY_PRESS, TOP_TEXT_INPUT, TOP_PASTE]
1709 },
1710 compositionEnd: {
1711 phasedRegistrationNames: {
1712 bubbled: 'onCompositionEnd',
1713 captured: 'onCompositionEndCapture'
1714 },
1715 dependencies: [TOP_BLUR, TOP_COMPOSITION_END, TOP_KEY_DOWN, TOP_KEY_PRESS, TOP_KEY_UP, TOP_MOUSE_DOWN]
1716 },
1717 compositionStart: {
1718 phasedRegistrationNames: {
1719 bubbled: 'onCompositionStart',
1720 captured: 'onCompositionStartCapture'
1721 },
1722 dependencies: [TOP_BLUR, TOP_COMPOSITION_START, TOP_KEY_DOWN, TOP_KEY_PRESS, TOP_KEY_UP, TOP_MOUSE_DOWN]
1723 },
1724 compositionUpdate: {
1725 phasedRegistrationNames: {
1726 bubbled: 'onCompositionUpdate',
1727 captured: 'onCompositionUpdateCapture'
1728 },
1729 dependencies: [TOP_BLUR, TOP_COMPOSITION_UPDATE, TOP_KEY_DOWN, TOP_KEY_PRESS, TOP_KEY_UP, TOP_MOUSE_DOWN]
1730 }
1731};
1732
1733// Track whether we've ever handled a keypress on the space key.
1734var hasSpaceKeypress = false;
1735
1736/**
1737 * Return whether a native keypress event is assumed to be a command.
1738 * This is required because Firefox fires `keypress` events for key commands
1739 * (cut, copy, select-all, etc.) even though no character is inserted.
1740 */
1741function isKeypressCommand(nativeEvent) {
1742 return (nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) &&
1743 // ctrlKey && altKey is equivalent to AltGr, and is not a command.
1744 !(nativeEvent.ctrlKey && nativeEvent.altKey);
1745}
1746
1747/**
1748 * Translate native top level events into event types.
1749 *
1750 * @param {string} topLevelType
1751 * @return {object}
1752 */
1753function getCompositionEventType(topLevelType) {
1754 switch (topLevelType) {
1755 case TOP_COMPOSITION_START:
1756 return eventTypes.compositionStart;
1757 case TOP_COMPOSITION_END:
1758 return eventTypes.compositionEnd;
1759 case TOP_COMPOSITION_UPDATE:
1760 return eventTypes.compositionUpdate;
1761 }
1762}
1763
1764/**
1765 * Does our fallback best-guess model think this event signifies that
1766 * composition has begun?
1767 *
1768 * @param {string} topLevelType
1769 * @param {object} nativeEvent
1770 * @return {boolean}
1771 */
1772function isFallbackCompositionStart(topLevelType, nativeEvent) {
1773 return topLevelType === TOP_KEY_DOWN && nativeEvent.keyCode === START_KEYCODE;
1774}
1775
1776/**
1777 * Does our fallback mode think that this event is the end of composition?
1778 *
1779 * @param {string} topLevelType
1780 * @param {object} nativeEvent
1781 * @return {boolean}
1782 */
1783function isFallbackCompositionEnd(topLevelType, nativeEvent) {
1784 switch (topLevelType) {
1785 case TOP_KEY_UP:
1786 // Command keys insert or clear IME input.
1787 return END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1;
1788 case TOP_KEY_DOWN:
1789 // Expect IME keyCode on each keydown. If we get any other
1790 // code we must have exited earlier.
1791 return nativeEvent.keyCode !== START_KEYCODE;
1792 case TOP_KEY_PRESS:
1793 case TOP_MOUSE_DOWN:
1794 case TOP_BLUR:
1795 // Events are not possible without cancelling IME.
1796 return true;
1797 default:
1798 return false;
1799 }
1800}
1801
1802/**
1803 * Google Input Tools provides composition data via a CustomEvent,
1804 * with the `data` property populated in the `detail` object. If this
1805 * is available on the event object, use it. If not, this is a plain
1806 * composition event and we have nothing special to extract.
1807 *
1808 * @param {object} nativeEvent
1809 * @return {?string}
1810 */
1811function getDataFromCustomEvent(nativeEvent) {
1812 var detail = nativeEvent.detail;
1813 if (typeof detail === 'object' && 'data' in detail) {
1814 return detail.data;
1815 }
1816 return null;
1817}
1818
1819/**
1820 * Check if a composition event was triggered by Korean IME.
1821 * Our fallback mode does not work well with IE's Korean IME,
1822 * so just use native composition events when Korean IME is used.
1823 * Although CompositionEvent.locale property is deprecated,
1824 * it is available in IE, where our fallback mode is enabled.
1825 *
1826 * @param {object} nativeEvent
1827 * @return {boolean}
1828 */
1829function isUsingKoreanIME(nativeEvent) {
1830 return nativeEvent.locale === 'ko';
1831}
1832
1833// Track the current IME composition status, if any.
1834var isComposing = false;
1835
1836/**
1837 * @return {?object} A SyntheticCompositionEvent.
1838 */
1839function extractCompositionEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
1840 var eventType = void 0;
1841 var fallbackData = void 0;
1842
1843 if (canUseCompositionEvent) {
1844 eventType = getCompositionEventType(topLevelType);
1845 } else if (!isComposing) {
1846 if (isFallbackCompositionStart(topLevelType, nativeEvent)) {
1847 eventType = eventTypes.compositionStart;
1848 }
1849 } else if (isFallbackCompositionEnd(topLevelType, nativeEvent)) {
1850 eventType = eventTypes.compositionEnd;
1851 }
1852
1853 if (!eventType) {
1854 return null;
1855 }
1856
1857 if (useFallbackCompositionData && !isUsingKoreanIME(nativeEvent)) {
1858 // The current composition is stored statically and must not be
1859 // overwritten while composition continues.
1860 if (!isComposing && eventType === eventTypes.compositionStart) {
1861 isComposing = initialize(nativeEventTarget);
1862 } else if (eventType === eventTypes.compositionEnd) {
1863 if (isComposing) {
1864 fallbackData = getData();
1865 }
1866 }
1867 }
1868
1869 var event = SyntheticCompositionEvent.getPooled(eventType, targetInst, nativeEvent, nativeEventTarget);
1870
1871 if (fallbackData) {
1872 // Inject data generated from fallback path into the synthetic event.
1873 // This matches the property of native CompositionEventInterface.
1874 event.data = fallbackData;
1875 } else {
1876 var customData = getDataFromCustomEvent(nativeEvent);
1877 if (customData !== null) {
1878 event.data = customData;
1879 }
1880 }
1881
1882 accumulateTwoPhaseDispatches(event);
1883 return event;
1884}
1885
1886/**
1887 * @param {TopLevelType} topLevelType Number from `TopLevelType`.
1888 * @param {object} nativeEvent Native browser event.
1889 * @return {?string} The string corresponding to this `beforeInput` event.
1890 */
1891function getNativeBeforeInputChars(topLevelType, nativeEvent) {
1892 switch (topLevelType) {
1893 case TOP_COMPOSITION_END:
1894 return getDataFromCustomEvent(nativeEvent);
1895 case TOP_KEY_PRESS:
1896 /**
1897 * If native `textInput` events are available, our goal is to make
1898 * use of them. However, there is a special case: the spacebar key.
1899 * In Webkit, preventing default on a spacebar `textInput` event
1900 * cancels character insertion, but it *also* causes the browser
1901 * to fall back to its default spacebar behavior of scrolling the
1902 * page.
1903 *
1904 * Tracking at:
1905 * https://code.google.com/p/chromium/issues/detail?id=355103
1906 *
1907 * To avoid this issue, use the keypress event as if no `textInput`
1908 * event is available.
1909 */
1910 var which = nativeEvent.which;
1911 if (which !== SPACEBAR_CODE) {
1912 return null;
1913 }
1914
1915 hasSpaceKeypress = true;
1916 return SPACEBAR_CHAR;
1917
1918 case TOP_TEXT_INPUT:
1919 // Record the characters to be added to the DOM.
1920 var chars = nativeEvent.data;
1921
1922 // If it's a spacebar character, assume that we have already handled
1923 // it at the keypress level and bail immediately. Android Chrome
1924 // doesn't give us keycodes, so we need to ignore it.
1925 if (chars === SPACEBAR_CHAR && hasSpaceKeypress) {
1926 return null;
1927 }
1928
1929 return chars;
1930
1931 default:
1932 // For other native event types, do nothing.
1933 return null;
1934 }
1935}
1936
1937/**
1938 * For browsers that do not provide the `textInput` event, extract the
1939 * appropriate string to use for SyntheticInputEvent.
1940 *
1941 * @param {number} topLevelType Number from `TopLevelEventTypes`.
1942 * @param {object} nativeEvent Native browser event.
1943 * @return {?string} The fallback string for this `beforeInput` event.
1944 */
1945function getFallbackBeforeInputChars(topLevelType, nativeEvent) {
1946 // If we are currently composing (IME) and using a fallback to do so,
1947 // try to extract the composed characters from the fallback object.
1948 // If composition event is available, we extract a string only at
1949 // compositionevent, otherwise extract it at fallback events.
1950 if (isComposing) {
1951 if (topLevelType === TOP_COMPOSITION_END || !canUseCompositionEvent && isFallbackCompositionEnd(topLevelType, nativeEvent)) {
1952 var chars = getData();
1953 reset();
1954 isComposing = false;
1955 return chars;
1956 }
1957 return null;
1958 }
1959
1960 switch (topLevelType) {
1961 case TOP_PASTE:
1962 // If a paste event occurs after a keypress, throw out the input
1963 // chars. Paste events should not lead to BeforeInput events.
1964 return null;
1965 case TOP_KEY_PRESS:
1966 /**
1967 * As of v27, Firefox may fire keypress events even when no character
1968 * will be inserted. A few possibilities:
1969 *
1970 * - `which` is `0`. Arrow keys, Esc key, etc.
1971 *
1972 * - `which` is the pressed key code, but no char is available.
1973 * Ex: 'AltGr + d` in Polish. There is no modified character for
1974 * this key combination and no character is inserted into the
1975 * document, but FF fires the keypress for char code `100` anyway.
1976 * No `input` event will occur.
1977 *
1978 * - `which` is the pressed key code, but a command combination is
1979 * being used. Ex: `Cmd+C`. No character is inserted, and no
1980 * `input` event will occur.
1981 */
1982 if (!isKeypressCommand(nativeEvent)) {
1983 // IE fires the `keypress` event when a user types an emoji via
1984 // Touch keyboard of Windows. In such a case, the `char` property
1985 // holds an emoji character like `\uD83D\uDE0A`. Because its length
1986 // is 2, the property `which` does not represent an emoji correctly.
1987 // In such a case, we directly return the `char` property instead of
1988 // using `which`.
1989 if (nativeEvent.char && nativeEvent.char.length > 1) {
1990 return nativeEvent.char;
1991 } else if (nativeEvent.which) {
1992 return String.fromCharCode(nativeEvent.which);
1993 }
1994 }
1995 return null;
1996 case TOP_COMPOSITION_END:
1997 return useFallbackCompositionData && !isUsingKoreanIME(nativeEvent) ? null : nativeEvent.data;
1998 default:
1999 return null;
2000 }
2001}
2002
2003/**
2004 * Extract a SyntheticInputEvent for `beforeInput`, based on either native
2005 * `textInput` or fallback behavior.
2006 *
2007 * @return {?object} A SyntheticInputEvent.
2008 */
2009function extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
2010 var chars = void 0;
2011
2012 if (canUseTextInputEvent) {
2013 chars = getNativeBeforeInputChars(topLevelType, nativeEvent);
2014 } else {
2015 chars = getFallbackBeforeInputChars(topLevelType, nativeEvent);
2016 }
2017
2018 // If no characters are being inserted, no BeforeInput event should
2019 // be fired.
2020 if (!chars) {
2021 return null;
2022 }
2023
2024 var event = SyntheticInputEvent.getPooled(eventTypes.beforeInput, targetInst, nativeEvent, nativeEventTarget);
2025
2026 event.data = chars;
2027 accumulateTwoPhaseDispatches(event);
2028 return event;
2029}
2030
2031/**
2032 * Create an `onBeforeInput` event to match
2033 * http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/#events-inputevents.
2034 *
2035 * This event plugin is based on the native `textInput` event
2036 * available in Chrome, Safari, Opera, and IE. This event fires after
2037 * `onKeyPress` and `onCompositionEnd`, but before `onInput`.
2038 *
2039 * `beforeInput` is spec'd but not implemented in any browsers, and
2040 * the `input` event does not provide any useful information about what has
2041 * actually been added, contrary to the spec. Thus, `textInput` is the best
2042 * available event to identify the characters that have actually been inserted
2043 * into the target node.
2044 *
2045 * This plugin is also responsible for emitting `composition` events, thus
2046 * allowing us to share composition fallback code for both `beforeInput` and
2047 * `composition` event types.
2048 */
2049var BeforeInputEventPlugin = {
2050 eventTypes: eventTypes,
2051
2052 extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
2053 var composition = extractCompositionEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget);
2054
2055 var beforeInput = extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget);
2056
2057 if (composition === null) {
2058 return beforeInput;
2059 }
2060
2061 if (beforeInput === null) {
2062 return composition;
2063 }
2064
2065 return [composition, beforeInput];
2066 }
2067};
2068
2069// Use to restore controlled state after a change event has fired.
2070
2071var restoreImpl = null;
2072var restoreTarget = null;
2073var restoreQueue = null;
2074
2075function restoreStateOfTarget(target) {
2076 // We perform this translation at the end of the event loop so that we
2077 // always receive the correct fiber here
2078 var internalInstance = getInstanceFromNode(target);
2079 if (!internalInstance) {
2080 // Unmounted
2081 return;
2082 }
2083 !(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;
2084 var props = getFiberCurrentPropsFromNode(internalInstance.stateNode);
2085 restoreImpl(internalInstance.stateNode, internalInstance.type, props);
2086}
2087
2088function setRestoreImplementation(impl) {
2089 restoreImpl = impl;
2090}
2091
2092function enqueueStateRestore(target) {
2093 if (restoreTarget) {
2094 if (restoreQueue) {
2095 restoreQueue.push(target);
2096 } else {
2097 restoreQueue = [target];
2098 }
2099 } else {
2100 restoreTarget = target;
2101 }
2102}
2103
2104function needsStateRestore() {
2105 return restoreTarget !== null || restoreQueue !== null;
2106}
2107
2108function restoreStateIfNeeded() {
2109 if (!restoreTarget) {
2110 return;
2111 }
2112 var target = restoreTarget;
2113 var queuedTargets = restoreQueue;
2114 restoreTarget = null;
2115 restoreQueue = null;
2116
2117 restoreStateOfTarget(target);
2118 if (queuedTargets) {
2119 for (var i = 0; i < queuedTargets.length; i++) {
2120 restoreStateOfTarget(queuedTargets[i]);
2121 }
2122 }
2123}
2124
2125// Used as a way to call batchedUpdates when we don't have a reference to
2126// the renderer. Such as when we're dispatching events or if third party
2127// libraries need to call batchedUpdates. Eventually, this API will go away when
2128// everything is batched by default. We'll then have a similar API to opt-out of
2129// scheduled work and instead do synchronous work.
2130
2131// Defaults
2132var _batchedUpdatesImpl = function (fn, bookkeeping) {
2133 return fn(bookkeeping);
2134};
2135var _interactiveUpdatesImpl = function (fn, a, b) {
2136 return fn(a, b);
2137};
2138var _flushInteractiveUpdatesImpl = function () {};
2139
2140var isBatching = false;
2141function batchedUpdates(fn, bookkeeping) {
2142 if (isBatching) {
2143 // If we are currently inside another batch, we need to wait until it
2144 // fully completes before restoring state.
2145 return fn(bookkeeping);
2146 }
2147 isBatching = true;
2148 try {
2149 return _batchedUpdatesImpl(fn, bookkeeping);
2150 } finally {
2151 // Here we wait until all updates have propagated, which is important
2152 // when using controlled components within layers:
2153 // https://github.com/facebook/react/issues/1698
2154 // Then we restore state of any controlled component.
2155 isBatching = false;
2156 var controlledComponentsHavePendingUpdates = needsStateRestore();
2157 if (controlledComponentsHavePendingUpdates) {
2158 // If a controlled event was fired, we may need to restore the state of
2159 // the DOM node back to the controlled value. This is necessary when React
2160 // bails out of the update without touching the DOM.
2161 _flushInteractiveUpdatesImpl();
2162 restoreStateIfNeeded();
2163 }
2164 }
2165}
2166
2167function interactiveUpdates(fn, a, b) {
2168 return _interactiveUpdatesImpl(fn, a, b);
2169}
2170
2171
2172
2173function setBatchingImplementation(batchedUpdatesImpl, interactiveUpdatesImpl, flushInteractiveUpdatesImpl) {
2174 _batchedUpdatesImpl = batchedUpdatesImpl;
2175 _interactiveUpdatesImpl = interactiveUpdatesImpl;
2176 _flushInteractiveUpdatesImpl = flushInteractiveUpdatesImpl;
2177}
2178
2179/**
2180 * @see http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary
2181 */
2182var supportedInputTypes = {
2183 color: true,
2184 date: true,
2185 datetime: true,
2186 'datetime-local': true,
2187 email: true,
2188 month: true,
2189 number: true,
2190 password: true,
2191 range: true,
2192 search: true,
2193 tel: true,
2194 text: true,
2195 time: true,
2196 url: true,
2197 week: true
2198};
2199
2200function isTextInputElement(elem) {
2201 var nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
2202
2203 if (nodeName === 'input') {
2204 return !!supportedInputTypes[elem.type];
2205 }
2206
2207 if (nodeName === 'textarea') {
2208 return true;
2209 }
2210
2211 return false;
2212}
2213
2214/**
2215 * HTML nodeType values that represent the type of the node
2216 */
2217
2218var ELEMENT_NODE = 1;
2219var TEXT_NODE = 3;
2220var COMMENT_NODE = 8;
2221var DOCUMENT_NODE = 9;
2222var DOCUMENT_FRAGMENT_NODE = 11;
2223
2224/**
2225 * Gets the target node from a native browser event by accounting for
2226 * inconsistencies in browser DOM APIs.
2227 *
2228 * @param {object} nativeEvent Native browser event.
2229 * @return {DOMEventTarget} Target node.
2230 */
2231function getEventTarget(nativeEvent) {
2232 // Fallback to nativeEvent.srcElement for IE9
2233 // https://github.com/facebook/react/issues/12506
2234 var target = nativeEvent.target || nativeEvent.srcElement || window;
2235
2236 // Normalize SVG <use> element events #4963
2237 if (target.correspondingUseElement) {
2238 target = target.correspondingUseElement;
2239 }
2240
2241 // Safari may fire events on text nodes (Node.TEXT_NODE is 3).
2242 // @see http://www.quirksmode.org/js/events_properties.html
2243 return target.nodeType === TEXT_NODE ? target.parentNode : target;
2244}
2245
2246/**
2247 * Checks if an event is supported in the current execution environment.
2248 *
2249 * NOTE: This will not work correctly for non-generic events such as `change`,
2250 * `reset`, `load`, `error`, and `select`.
2251 *
2252 * Borrows from Modernizr.
2253 *
2254 * @param {string} eventNameSuffix Event name, e.g. "click".
2255 * @return {boolean} True if the event is supported.
2256 * @internal
2257 * @license Modernizr 3.0.0pre (Custom Build) | MIT
2258 */
2259function isEventSupported(eventNameSuffix) {
2260 if (!canUseDOM) {
2261 return false;
2262 }
2263
2264 var eventName = 'on' + eventNameSuffix;
2265 var isSupported = eventName in document;
2266
2267 if (!isSupported) {
2268 var element = document.createElement('div');
2269 element.setAttribute(eventName, 'return;');
2270 isSupported = typeof element[eventName] === 'function';
2271 }
2272
2273 return isSupported;
2274}
2275
2276function isCheckable(elem) {
2277 var type = elem.type;
2278 var nodeName = elem.nodeName;
2279 return nodeName && nodeName.toLowerCase() === 'input' && (type === 'checkbox' || type === 'radio');
2280}
2281
2282function getTracker(node) {
2283 return node._valueTracker;
2284}
2285
2286function detachTracker(node) {
2287 node._valueTracker = null;
2288}
2289
2290function getValueFromNode(node) {
2291 var value = '';
2292 if (!node) {
2293 return value;
2294 }
2295
2296 if (isCheckable(node)) {
2297 value = node.checked ? 'true' : 'false';
2298 } else {
2299 value = node.value;
2300 }
2301
2302 return value;
2303}
2304
2305function trackValueOnNode(node) {
2306 var valueField = isCheckable(node) ? 'checked' : 'value';
2307 var descriptor = Object.getOwnPropertyDescriptor(node.constructor.prototype, valueField);
2308
2309 var currentValue = '' + node[valueField];
2310
2311 // if someone has already defined a value or Safari, then bail
2312 // and don't track value will cause over reporting of changes,
2313 // but it's better then a hard failure
2314 // (needed for certain tests that spyOn input values and Safari)
2315 if (node.hasOwnProperty(valueField) || typeof descriptor === 'undefined' || typeof descriptor.get !== 'function' || typeof descriptor.set !== 'function') {
2316 return;
2317 }
2318 var get = descriptor.get,
2319 set = descriptor.set;
2320
2321 Object.defineProperty(node, valueField, {
2322 configurable: true,
2323 get: function () {
2324 return get.call(this);
2325 },
2326 set: function (value) {
2327 currentValue = '' + value;
2328 set.call(this, value);
2329 }
2330 });
2331 // We could've passed this the first time
2332 // but it triggers a bug in IE11 and Edge 14/15.
2333 // Calling defineProperty() again should be equivalent.
2334 // https://github.com/facebook/react/issues/11768
2335 Object.defineProperty(node, valueField, {
2336 enumerable: descriptor.enumerable
2337 });
2338
2339 var tracker = {
2340 getValue: function () {
2341 return currentValue;
2342 },
2343 setValue: function (value) {
2344 currentValue = '' + value;
2345 },
2346 stopTracking: function () {
2347 detachTracker(node);
2348 delete node[valueField];
2349 }
2350 };
2351 return tracker;
2352}
2353
2354function track(node) {
2355 if (getTracker(node)) {
2356 return;
2357 }
2358
2359 // TODO: Once it's just Fiber we can move this to node._wrapperState
2360 node._valueTracker = trackValueOnNode(node);
2361}
2362
2363function updateValueIfChanged(node) {
2364 if (!node) {
2365 return false;
2366 }
2367
2368 var tracker = getTracker(node);
2369 // if there is no tracker at this point it's unlikely
2370 // that trying again will succeed
2371 if (!tracker) {
2372 return true;
2373 }
2374
2375 var lastValue = tracker.getValue();
2376 var nextValue = getValueFromNode(node);
2377 if (nextValue !== lastValue) {
2378 tracker.setValue(nextValue);
2379 return true;
2380 }
2381 return false;
2382}
2383
2384var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
2385
2386// Prevent newer renderers from RTE when used with older react package versions.
2387// Current owner and dispatcher used to share the same ref,
2388// but PR #14548 split them out to better support the react-debug-tools package.
2389if (!ReactSharedInternals.hasOwnProperty('ReactCurrentDispatcher')) {
2390 ReactSharedInternals.ReactCurrentDispatcher = {
2391 current: null
2392 };
2393}
2394
2395var BEFORE_SLASH_RE = /^(.*)[\\\/]/;
2396
2397var describeComponentFrame = function (name, source, ownerName) {
2398 var sourceInfo = '';
2399 if (source) {
2400 var path = source.fileName;
2401 var fileName = path.replace(BEFORE_SLASH_RE, '');
2402 {
2403 // In DEV, include code for a common special case:
2404 // prefer "folder/index.js" instead of just "index.js".
2405 if (/^index\./.test(fileName)) {
2406 var match = path.match(BEFORE_SLASH_RE);
2407 if (match) {
2408 var pathBeforeSlash = match[1];
2409 if (pathBeforeSlash) {
2410 var folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
2411 fileName = folderName + '/' + fileName;
2412 }
2413 }
2414 }
2415 }
2416 sourceInfo = ' (at ' + fileName + ':' + source.lineNumber + ')';
2417 } else if (ownerName) {
2418 sourceInfo = ' (created by ' + ownerName + ')';
2419 }
2420 return '\n in ' + (name || 'Unknown') + sourceInfo;
2421};
2422
2423// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
2424// nor polyfill, then a plain number is used for performance.
2425var hasSymbol = typeof Symbol === 'function' && Symbol.for;
2426
2427var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
2428var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
2429var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
2430var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
2431var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
2432var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
2433var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace;
2434
2435var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
2436var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
2437var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
2438var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
2439var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
2440
2441var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
2442var FAUX_ITERATOR_SYMBOL = '@@iterator';
2443
2444function getIteratorFn(maybeIterable) {
2445 if (maybeIterable === null || typeof maybeIterable !== 'object') {
2446 return null;
2447 }
2448 var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
2449 if (typeof maybeIterator === 'function') {
2450 return maybeIterator;
2451 }
2452 return null;
2453}
2454
2455var Pending = 0;
2456var Resolved = 1;
2457var Rejected = 2;
2458
2459function refineResolvedLazyComponent(lazyComponent) {
2460 return lazyComponent._status === Resolved ? lazyComponent._result : null;
2461}
2462
2463function getWrappedName(outerType, innerType, wrapperName) {
2464 var functionName = innerType.displayName || innerType.name || '';
2465 return outerType.displayName || (functionName !== '' ? wrapperName + '(' + functionName + ')' : wrapperName);
2466}
2467
2468function getComponentName(type) {
2469 if (type == null) {
2470 // Host root, text node or just invalid type.
2471 return null;
2472 }
2473 {
2474 if (typeof type.tag === 'number') {
2475 warningWithoutStack$1(false, 'Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.');
2476 }
2477 }
2478 if (typeof type === 'function') {
2479 return type.displayName || type.name || null;
2480 }
2481 if (typeof type === 'string') {
2482 return type;
2483 }
2484 switch (type) {
2485 case REACT_CONCURRENT_MODE_TYPE:
2486 return 'ConcurrentMode';
2487 case REACT_FRAGMENT_TYPE:
2488 return 'Fragment';
2489 case REACT_PORTAL_TYPE:
2490 return 'Portal';
2491 case REACT_PROFILER_TYPE:
2492 return 'Profiler';
2493 case REACT_STRICT_MODE_TYPE:
2494 return 'StrictMode';
2495 case REACT_SUSPENSE_TYPE:
2496 return 'Suspense';
2497 }
2498 if (typeof type === 'object') {
2499 switch (type.$$typeof) {
2500 case REACT_CONTEXT_TYPE:
2501 return 'Context.Consumer';
2502 case REACT_PROVIDER_TYPE:
2503 return 'Context.Provider';
2504 case REACT_FORWARD_REF_TYPE:
2505 return getWrappedName(type, type.render, 'ForwardRef');
2506 case REACT_MEMO_TYPE:
2507 return getComponentName(type.type);
2508 case REACT_LAZY_TYPE:
2509 {
2510 var thenable = type;
2511 var resolvedThenable = refineResolvedLazyComponent(thenable);
2512 if (resolvedThenable) {
2513 return getComponentName(resolvedThenable);
2514 }
2515 }
2516 }
2517 }
2518 return null;
2519}
2520
2521var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
2522
2523function describeFiber(fiber) {
2524 switch (fiber.tag) {
2525 case HostRoot:
2526 case HostPortal:
2527 case HostText:
2528 case Fragment:
2529 case ContextProvider:
2530 case ContextConsumer:
2531 return '';
2532 default:
2533 var owner = fiber._debugOwner;
2534 var source = fiber._debugSource;
2535 var name = getComponentName(fiber.type);
2536 var ownerName = null;
2537 if (owner) {
2538 ownerName = getComponentName(owner.type);
2539 }
2540 return describeComponentFrame(name, source, ownerName);
2541 }
2542}
2543
2544function getStackByFiberInDevAndProd(workInProgress) {
2545 var info = '';
2546 var node = workInProgress;
2547 do {
2548 info += describeFiber(node);
2549 node = node.return;
2550 } while (node);
2551 return info;
2552}
2553
2554var current = null;
2555var phase = null;
2556
2557function getCurrentFiberOwnerNameInDevOrNull() {
2558 {
2559 if (current === null) {
2560 return null;
2561 }
2562 var owner = current._debugOwner;
2563 if (owner !== null && typeof owner !== 'undefined') {
2564 return getComponentName(owner.type);
2565 }
2566 }
2567 return null;
2568}
2569
2570function getCurrentFiberStackInDev() {
2571 {
2572 if (current === null) {
2573 return '';
2574 }
2575 // Safe because if current fiber exists, we are reconciling,
2576 // and it is guaranteed to be the work-in-progress version.
2577 return getStackByFiberInDevAndProd(current);
2578 }
2579 return '';
2580}
2581
2582function resetCurrentFiber() {
2583 {
2584 ReactDebugCurrentFrame.getCurrentStack = null;
2585 current = null;
2586 phase = null;
2587 }
2588}
2589
2590function setCurrentFiber(fiber) {
2591 {
2592 ReactDebugCurrentFrame.getCurrentStack = getCurrentFiberStackInDev;
2593 current = fiber;
2594 phase = null;
2595 }
2596}
2597
2598function setCurrentPhase(lifeCyclePhase) {
2599 {
2600 phase = lifeCyclePhase;
2601 }
2602}
2603
2604/**
2605 * Similar to invariant but only logs a warning if the condition is not met.
2606 * This can be used to log issues in development environments in critical
2607 * paths. Removing the logging code for production environments will keep the
2608 * same logic and follow the same code paths.
2609 */
2610
2611var warning = warningWithoutStack$1;
2612
2613{
2614 warning = function (condition, format) {
2615 if (condition) {
2616 return;
2617 }
2618 var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
2619 var stack = ReactDebugCurrentFrame.getStackAddendum();
2620 // eslint-disable-next-line react-internal/warning-and-invariant-args
2621
2622 for (var _len = arguments.length, args = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
2623 args[_key - 2] = arguments[_key];
2624 }
2625
2626 warningWithoutStack$1.apply(undefined, [false, format + '%s'].concat(args, [stack]));
2627 };
2628}
2629
2630var warning$1 = warning;
2631
2632// A reserved attribute.
2633// It is handled by React separately and shouldn't be written to the DOM.
2634var RESERVED = 0;
2635
2636// A simple string attribute.
2637// Attributes that aren't in the whitelist are presumed to have this type.
2638var STRING = 1;
2639
2640// A string attribute that accepts booleans in React. In HTML, these are called
2641// "enumerated" attributes with "true" and "false" as possible values.
2642// When true, it should be set to a "true" string.
2643// When false, it should be set to a "false" string.
2644var BOOLEANISH_STRING = 2;
2645
2646// A real boolean attribute.
2647// When true, it should be present (set either to an empty string or its name).
2648// When false, it should be omitted.
2649var BOOLEAN = 3;
2650
2651// An attribute that can be used as a flag as well as with a value.
2652// When true, it should be present (set either to an empty string or its name).
2653// When false, it should be omitted.
2654// For any other value, should be present with that value.
2655var OVERLOADED_BOOLEAN = 4;
2656
2657// An attribute that must be numeric or parse as a numeric.
2658// When falsy, it should be removed.
2659var NUMERIC = 5;
2660
2661// An attribute that must be positive numeric or parse as a positive numeric.
2662// When falsy, it should be removed.
2663var POSITIVE_NUMERIC = 6;
2664
2665/* eslint-disable max-len */
2666var 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';
2667/* eslint-enable max-len */
2668var ATTRIBUTE_NAME_CHAR = ATTRIBUTE_NAME_START_CHAR + '\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040';
2669
2670
2671var ROOT_ATTRIBUTE_NAME = 'data-reactroot';
2672var VALID_ATTRIBUTE_NAME_REGEX = new RegExp('^[' + ATTRIBUTE_NAME_START_CHAR + '][' + ATTRIBUTE_NAME_CHAR + ']*$');
2673
2674var hasOwnProperty = Object.prototype.hasOwnProperty;
2675var illegalAttributeNameCache = {};
2676var validatedAttributeNameCache = {};
2677
2678function isAttributeNameSafe(attributeName) {
2679 if (hasOwnProperty.call(validatedAttributeNameCache, attributeName)) {
2680 return true;
2681 }
2682 if (hasOwnProperty.call(illegalAttributeNameCache, attributeName)) {
2683 return false;
2684 }
2685 if (VALID_ATTRIBUTE_NAME_REGEX.test(attributeName)) {
2686 validatedAttributeNameCache[attributeName] = true;
2687 return true;
2688 }
2689 illegalAttributeNameCache[attributeName] = true;
2690 {
2691 warning$1(false, 'Invalid attribute name: `%s`', attributeName);
2692 }
2693 return false;
2694}
2695
2696function shouldIgnoreAttribute(name, propertyInfo, isCustomComponentTag) {
2697 if (propertyInfo !== null) {
2698 return propertyInfo.type === RESERVED;
2699 }
2700 if (isCustomComponentTag) {
2701 return false;
2702 }
2703 if (name.length > 2 && (name[0] === 'o' || name[0] === 'O') && (name[1] === 'n' || name[1] === 'N')) {
2704 return true;
2705 }
2706 return false;
2707}
2708
2709function shouldRemoveAttributeWithWarning(name, value, propertyInfo, isCustomComponentTag) {
2710 if (propertyInfo !== null && propertyInfo.type === RESERVED) {
2711 return false;
2712 }
2713 switch (typeof value) {
2714 case 'function':
2715 // $FlowIssue symbol is perfectly valid here
2716 case 'symbol':
2717 // eslint-disable-line
2718 return true;
2719 case 'boolean':
2720 {
2721 if (isCustomComponentTag) {
2722 return false;
2723 }
2724 if (propertyInfo !== null) {
2725 return !propertyInfo.acceptsBooleans;
2726 } else {
2727 var prefix = name.toLowerCase().slice(0, 5);
2728 return prefix !== 'data-' && prefix !== 'aria-';
2729 }
2730 }
2731 default:
2732 return false;
2733 }
2734}
2735
2736function shouldRemoveAttribute(name, value, propertyInfo, isCustomComponentTag) {
2737 if (value === null || typeof value === 'undefined') {
2738 return true;
2739 }
2740 if (shouldRemoveAttributeWithWarning(name, value, propertyInfo, isCustomComponentTag)) {
2741 return true;
2742 }
2743 if (isCustomComponentTag) {
2744 return false;
2745 }
2746 if (propertyInfo !== null) {
2747 switch (propertyInfo.type) {
2748 case BOOLEAN:
2749 return !value;
2750 case OVERLOADED_BOOLEAN:
2751 return value === false;
2752 case NUMERIC:
2753 return isNaN(value);
2754 case POSITIVE_NUMERIC:
2755 return isNaN(value) || value < 1;
2756 }
2757 }
2758 return false;
2759}
2760
2761function getPropertyInfo(name) {
2762 return properties.hasOwnProperty(name) ? properties[name] : null;
2763}
2764
2765function PropertyInfoRecord(name, type, mustUseProperty, attributeName, attributeNamespace) {
2766 this.acceptsBooleans = type === BOOLEANISH_STRING || type === BOOLEAN || type === OVERLOADED_BOOLEAN;
2767 this.attributeName = attributeName;
2768 this.attributeNamespace = attributeNamespace;
2769 this.mustUseProperty = mustUseProperty;
2770 this.propertyName = name;
2771 this.type = type;
2772}
2773
2774// When adding attributes to this list, be sure to also add them to
2775// the `possibleStandardNames` module to ensure casing and incorrect
2776// name warnings.
2777var properties = {};
2778
2779// These props are reserved by React. They shouldn't be written to the DOM.
2780['children', 'dangerouslySetInnerHTML',
2781// TODO: This prevents the assignment of defaultValue to regular
2782// elements (not just inputs). Now that ReactDOMInput assigns to the
2783// defaultValue property -- do we need this?
2784'defaultValue', 'defaultChecked', 'innerHTML', 'suppressContentEditableWarning', 'suppressHydrationWarning', 'style'].forEach(function (name) {
2785 properties[name] = new PropertyInfoRecord(name, RESERVED, false, // mustUseProperty
2786 name, // attributeName
2787 null);
2788} // attributeNamespace
2789);
2790
2791// A few React string attributes have a different name.
2792// This is a mapping from React prop names to the attribute names.
2793[['acceptCharset', 'accept-charset'], ['className', 'class'], ['htmlFor', 'for'], ['httpEquiv', 'http-equiv']].forEach(function (_ref) {
2794 var name = _ref[0],
2795 attributeName = _ref[1];
2796
2797 properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
2798 attributeName, // attributeName
2799 null);
2800} // attributeNamespace
2801);
2802
2803// These are "enumerated" HTML attributes that accept "true" and "false".
2804// In React, we let users pass `true` and `false` even though technically
2805// these aren't boolean attributes (they are coerced to strings).
2806['contentEditable', 'draggable', 'spellCheck', 'value'].forEach(function (name) {
2807 properties[name] = new PropertyInfoRecord(name, BOOLEANISH_STRING, false, // mustUseProperty
2808 name.toLowerCase(), // attributeName
2809 null);
2810} // attributeNamespace
2811);
2812
2813// These are "enumerated" SVG attributes that accept "true" and "false".
2814// In React, we let users pass `true` and `false` even though technically
2815// these aren't boolean attributes (they are coerced to strings).
2816// Since these are SVG attributes, their attribute names are case-sensitive.
2817['autoReverse', 'externalResourcesRequired', 'focusable', 'preserveAlpha'].forEach(function (name) {
2818 properties[name] = new PropertyInfoRecord(name, BOOLEANISH_STRING, false, // mustUseProperty
2819 name, // attributeName
2820 null);
2821} // attributeNamespace
2822);
2823
2824// These are HTML boolean attributes.
2825['allowFullScreen', 'async',
2826// Note: there is a special case that prevents it from being written to the DOM
2827// on the client side because the browsers are inconsistent. Instead we call focus().
2828'autoFocus', 'autoPlay', 'controls', 'default', 'defer', 'disabled', 'formNoValidate', 'hidden', 'loop', 'noModule', 'noValidate', 'open', 'playsInline', 'readOnly', 'required', 'reversed', 'scoped', 'seamless',
2829// Microdata
2830'itemScope'].forEach(function (name) {
2831 properties[name] = new PropertyInfoRecord(name, BOOLEAN, false, // mustUseProperty
2832 name.toLowerCase(), // attributeName
2833 null);
2834} // attributeNamespace
2835);
2836
2837// These are the few React props that we set as DOM properties
2838// rather than attributes. These are all booleans.
2839['checked',
2840// Note: `option.selected` is not updated if `select.multiple` is
2841// disabled with `removeAttribute`. We have special logic for handling this.
2842'multiple', 'muted', 'selected'].forEach(function (name) {
2843 properties[name] = new PropertyInfoRecord(name, BOOLEAN, true, // mustUseProperty
2844 name, // attributeName
2845 null);
2846} // attributeNamespace
2847);
2848
2849// These are HTML attributes that are "overloaded booleans": they behave like
2850// booleans, but can also accept a string value.
2851['capture', 'download'].forEach(function (name) {
2852 properties[name] = new PropertyInfoRecord(name, OVERLOADED_BOOLEAN, false, // mustUseProperty
2853 name, // attributeName
2854 null);
2855} // attributeNamespace
2856);
2857
2858// These are HTML attributes that must be positive numbers.
2859['cols', 'rows', 'size', 'span'].forEach(function (name) {
2860 properties[name] = new PropertyInfoRecord(name, POSITIVE_NUMERIC, false, // mustUseProperty
2861 name, // attributeName
2862 null);
2863} // attributeNamespace
2864);
2865
2866// These are HTML attributes that must be numbers.
2867['rowSpan', 'start'].forEach(function (name) {
2868 properties[name] = new PropertyInfoRecord(name, NUMERIC, false, // mustUseProperty
2869 name.toLowerCase(), // attributeName
2870 null);
2871} // attributeNamespace
2872);
2873
2874var CAMELIZE = /[\-\:]([a-z])/g;
2875var capitalize = function (token) {
2876 return token[1].toUpperCase();
2877};
2878
2879// This is a list of all SVG attributes that need special casing, namespacing,
2880// or boolean value assignment. Regular attributes that just accept strings
2881// and have the same names are omitted, just like in the HTML whitelist.
2882// Some of these attributes can be hard to find. This list was created by
2883// scrapping the MDN documentation.
2884['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) {
2885 var name = attributeName.replace(CAMELIZE, capitalize);
2886 properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
2887 attributeName, null);
2888} // attributeNamespace
2889);
2890
2891// String SVG attributes with the xlink namespace.
2892['xlink:actuate', 'xlink:arcrole', 'xlink:href', 'xlink:role', 'xlink:show', 'xlink:title', 'xlink:type'].forEach(function (attributeName) {
2893 var name = attributeName.replace(CAMELIZE, capitalize);
2894 properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
2895 attributeName, 'http://www.w3.org/1999/xlink');
2896});
2897
2898// String SVG attributes with the xml namespace.
2899['xml:base', 'xml:lang', 'xml:space'].forEach(function (attributeName) {
2900 var name = attributeName.replace(CAMELIZE, capitalize);
2901 properties[name] = new PropertyInfoRecord(name, STRING, false, // mustUseProperty
2902 attributeName, 'http://www.w3.org/XML/1998/namespace');
2903});
2904
2905// These attribute exists both in HTML and SVG.
2906// The attribute name is case-sensitive in SVG so we can't just use
2907// the React name like we do for attributes that exist only in HTML.
2908['tabIndex', 'crossOrigin'].forEach(function (attributeName) {
2909 properties[attributeName] = new PropertyInfoRecord(attributeName, STRING, false, // mustUseProperty
2910 attributeName.toLowerCase(), // attributeName
2911 null);
2912} // attributeNamespace
2913);
2914
2915/**
2916 * Get the value for a property on a node. Only used in DEV for SSR validation.
2917 * The "expected" argument is used as a hint of what the expected value is.
2918 * Some properties have multiple equivalent values.
2919 */
2920function getValueForProperty(node, name, expected, propertyInfo) {
2921 {
2922 if (propertyInfo.mustUseProperty) {
2923 var propertyName = propertyInfo.propertyName;
2924
2925 return node[propertyName];
2926 } else {
2927 var attributeName = propertyInfo.attributeName;
2928
2929 var stringValue = null;
2930
2931 if (propertyInfo.type === OVERLOADED_BOOLEAN) {
2932 if (node.hasAttribute(attributeName)) {
2933 var value = node.getAttribute(attributeName);
2934 if (value === '') {
2935 return true;
2936 }
2937 if (shouldRemoveAttribute(name, expected, propertyInfo, false)) {
2938 return value;
2939 }
2940 if (value === '' + expected) {
2941 return expected;
2942 }
2943 return value;
2944 }
2945 } else if (node.hasAttribute(attributeName)) {
2946 if (shouldRemoveAttribute(name, expected, propertyInfo, false)) {
2947 // We had an attribute but shouldn't have had one, so read it
2948 // for the error message.
2949 return node.getAttribute(attributeName);
2950 }
2951 if (propertyInfo.type === BOOLEAN) {
2952 // If this was a boolean, it doesn't matter what the value is
2953 // the fact that we have it is the same as the expected.
2954 return expected;
2955 }
2956 // Even if this property uses a namespace we use getAttribute
2957 // because we assume its namespaced name is the same as our config.
2958 // To use getAttributeNS we need the local name which we don't have
2959 // in our config atm.
2960 stringValue = node.getAttribute(attributeName);
2961 }
2962
2963 if (shouldRemoveAttribute(name, expected, propertyInfo, false)) {
2964 return stringValue === null ? expected : stringValue;
2965 } else if (stringValue === '' + expected) {
2966 return expected;
2967 } else {
2968 return stringValue;
2969 }
2970 }
2971 }
2972}
2973
2974/**
2975 * Get the value for a attribute on a node. Only used in DEV for SSR validation.
2976 * The third argument is used as a hint of what the expected value is. Some
2977 * attributes have multiple equivalent values.
2978 */
2979function getValueForAttribute(node, name, expected) {
2980 {
2981 if (!isAttributeNameSafe(name)) {
2982 return;
2983 }
2984 if (!node.hasAttribute(name)) {
2985 return expected === undefined ? undefined : null;
2986 }
2987 var value = node.getAttribute(name);
2988 if (value === '' + expected) {
2989 return expected;
2990 }
2991 return value;
2992 }
2993}
2994
2995/**
2996 * Sets the value for a property on a node.
2997 *
2998 * @param {DOMElement} node
2999 * @param {string} name
3000 * @param {*} value
3001 */
3002function setValueForProperty(node, name, value, isCustomComponentTag) {
3003 var propertyInfo = getPropertyInfo(name);
3004 if (shouldIgnoreAttribute(name, propertyInfo, isCustomComponentTag)) {
3005 return;
3006 }
3007 if (shouldRemoveAttribute(name, value, propertyInfo, isCustomComponentTag)) {
3008 value = null;
3009 }
3010 // If the prop isn't in the special list, treat it as a simple attribute.
3011 if (isCustomComponentTag || propertyInfo === null) {
3012 if (isAttributeNameSafe(name)) {
3013 var _attributeName = name;
3014 if (value === null) {
3015 node.removeAttribute(_attributeName);
3016 } else {
3017 node.setAttribute(_attributeName, '' + value);
3018 }
3019 }
3020 return;
3021 }
3022 var mustUseProperty = propertyInfo.mustUseProperty;
3023
3024 if (mustUseProperty) {
3025 var propertyName = propertyInfo.propertyName;
3026
3027 if (value === null) {
3028 var type = propertyInfo.type;
3029
3030 node[propertyName] = type === BOOLEAN ? false : '';
3031 } else {
3032 // Contrary to `setAttribute`, object properties are properly
3033 // `toString`ed by IE8/9.
3034 node[propertyName] = value;
3035 }
3036 return;
3037 }
3038 // The rest are treated as attributes with special cases.
3039 var attributeName = propertyInfo.attributeName,
3040 attributeNamespace = propertyInfo.attributeNamespace;
3041
3042 if (value === null) {
3043 node.removeAttribute(attributeName);
3044 } else {
3045 var _type = propertyInfo.type;
3046
3047 var attributeValue = void 0;
3048 if (_type === BOOLEAN || _type === OVERLOADED_BOOLEAN && value === true) {
3049 attributeValue = '';
3050 } else {
3051 // `setAttribute` with objects becomes only `[object]` in IE8/9,
3052 // ('' + value) makes it output the correct toString()-value.
3053 attributeValue = '' + value;
3054 }
3055 if (attributeNamespace) {
3056 node.setAttributeNS(attributeNamespace, attributeName, attributeValue);
3057 } else {
3058 node.setAttribute(attributeName, attributeValue);
3059 }
3060 }
3061}
3062
3063// Flow does not allow string concatenation of most non-string types. To work
3064// around this limitation, we use an opaque type that can only be obtained by
3065// passing the value through getToStringValue first.
3066function toString(value) {
3067 return '' + value;
3068}
3069
3070function getToStringValue(value) {
3071 switch (typeof value) {
3072 case 'boolean':
3073 case 'number':
3074 case 'object':
3075 case 'string':
3076 case 'undefined':
3077 return value;
3078 default:
3079 // function, symbol are assigned as empty strings
3080 return '';
3081 }
3082}
3083
3084/**
3085 * Copyright (c) 2013-present, Facebook, Inc.
3086 *
3087 * This source code is licensed under the MIT license found in the
3088 * LICENSE file in the root directory of this source tree.
3089 */
3090
3091
3092
3093var ReactPropTypesSecret$1 = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
3094
3095var ReactPropTypesSecret_1 = ReactPropTypesSecret$1;
3096
3097/**
3098 * Copyright (c) 2013-present, Facebook, Inc.
3099 *
3100 * This source code is licensed under the MIT license found in the
3101 * LICENSE file in the root directory of this source tree.
3102 */
3103
3104
3105
3106var printWarning = function() {};
3107
3108{
3109 var ReactPropTypesSecret = ReactPropTypesSecret_1;
3110 var loggedTypeFailures = {};
3111
3112 printWarning = function(text) {
3113 var message = 'Warning: ' + text;
3114 if (typeof console !== 'undefined') {
3115 console.error(message);
3116 }
3117 try {
3118 // --- Welcome to debugging React ---
3119 // This error was thrown as a convenience so that you can use this stack
3120 // to find the callsite that caused this warning to fire.
3121 throw new Error(message);
3122 } catch (x) {}
3123 };
3124}
3125
3126/**
3127 * Assert that the values match with the type specs.
3128 * Error messages are memorized and will only be shown once.
3129 *
3130 * @param {object} typeSpecs Map of name to a ReactPropType
3131 * @param {object} values Runtime values that need to be type-checked
3132 * @param {string} location e.g. "prop", "context", "child context"
3133 * @param {string} componentName Name of the component for error messages.
3134 * @param {?Function} getStack Returns the component stack.
3135 * @private
3136 */
3137function checkPropTypes(typeSpecs, values, location, componentName, getStack) {
3138 {
3139 for (var typeSpecName in typeSpecs) {
3140 if (typeSpecs.hasOwnProperty(typeSpecName)) {
3141 var error;
3142 // Prop type validation may throw. In case they do, we don't want to
3143 // fail the render phase where it didn't fail before. So we log it.
3144 // After these have been cleaned up, we'll let them throw.
3145 try {
3146 // This is intentionally an invariant that gets caught. It's the same
3147 // behavior as without this statement except with a better message.
3148 if (typeof typeSpecs[typeSpecName] !== 'function') {
3149 var err = Error(
3150 (componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' +
3151 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.'
3152 );
3153 err.name = 'Invariant Violation';
3154 throw err;
3155 }
3156 error = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, ReactPropTypesSecret);
3157 } catch (ex) {
3158 error = ex;
3159 }
3160 if (error && !(error instanceof Error)) {
3161 printWarning(
3162 (componentName || 'React class') + ': type specification of ' +
3163 location + ' `' + typeSpecName + '` is invalid; the type checker ' +
3164 'function must return `null` or an `Error` but returned a ' + typeof error + '. ' +
3165 'You may have forgotten to pass an argument to the type checker ' +
3166 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' +
3167 'shape all require an argument).'
3168 );
3169
3170 }
3171 if (error instanceof Error && !(error.message in loggedTypeFailures)) {
3172 // Only monitor this failure once because there tends to be a lot of the
3173 // same error.
3174 loggedTypeFailures[error.message] = true;
3175
3176 var stack = getStack ? getStack() : '';
3177
3178 printWarning(
3179 'Failed ' + location + ' type: ' + error.message + (stack != null ? stack : '')
3180 );
3181 }
3182 }
3183 }
3184 }
3185}
3186
3187var checkPropTypes_1 = checkPropTypes;
3188
3189var ReactDebugCurrentFrame$1 = null;
3190
3191var ReactControlledValuePropTypes = {
3192 checkPropTypes: null
3193};
3194
3195{
3196 ReactDebugCurrentFrame$1 = ReactSharedInternals.ReactDebugCurrentFrame;
3197
3198 var hasReadOnlyValue = {
3199 button: true,
3200 checkbox: true,
3201 image: true,
3202 hidden: true,
3203 radio: true,
3204 reset: true,
3205 submit: true
3206 };
3207
3208 var propTypes = {
3209 value: function (props, propName, componentName) {
3210 if (hasReadOnlyValue[props.type] || props.onChange || props.readOnly || props.disabled || props[propName] == null) {
3211 return null;
3212 }
3213 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`.');
3214 },
3215 checked: function (props, propName, componentName) {
3216 if (props.onChange || props.readOnly || props.disabled || props[propName] == null) {
3217 return null;
3218 }
3219 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`.');
3220 }
3221 };
3222
3223 /**
3224 * Provide a linked `value` attribute for controlled forms. You should not use
3225 * this outside of the ReactDOM controlled form components.
3226 */
3227 ReactControlledValuePropTypes.checkPropTypes = function (tagName, props) {
3228 checkPropTypes_1(propTypes, props, 'prop', tagName, ReactDebugCurrentFrame$1.getStackAddendum);
3229 };
3230}
3231
3232var enableUserTimingAPI = true;
3233
3234// Helps identify side effects in begin-phase lifecycle hooks and setState reducers:
3235var debugRenderPhaseSideEffects = false;
3236
3237// In some cases, StrictMode should also double-render lifecycles.
3238// This can be confusing for tests though,
3239// And it can be bad for performance in production.
3240// This feature flag can be used to control the behavior:
3241var debugRenderPhaseSideEffectsForStrictMode = true;
3242
3243// To preserve the "Pause on caught exceptions" behavior of the debugger, we
3244// replay the begin phase of a failed component inside invokeGuardedCallback.
3245var replayFailedUnitOfWorkWithInvokeGuardedCallback = true;
3246
3247// Warn about deprecated, async-unsafe lifecycles; relates to RFC #6:
3248var warnAboutDeprecatedLifecycles = false;
3249
3250// Gather advanced timing metrics for Profiler subtrees.
3251var enableProfilerTimer = true;
3252
3253// Trace which interactions trigger each commit.
3254var enableSchedulerTracing = true;
3255
3256// Only used in www builds.
3257var enableSuspenseServerRenderer = false; // TODO: true? Here it might just be false.
3258
3259// Only used in www builds.
3260
3261
3262// Only used in www builds.
3263
3264
3265// React Fire: prevent the value and checked attributes from syncing
3266// with their related DOM properties
3267var disableInputAttributeSyncing = false;
3268
3269// These APIs will no longer be "unstable" in the upcoming 16.7 release,
3270// Control this behavior with a flag to support 16.6 minor releases in the meanwhile.
3271var enableStableConcurrentModeAPIs = false;
3272
3273var warnAboutShorthandPropertyCollision = false;
3274
3275// TODO: direct imports like some-package/src/* are bad. Fix me.
3276var didWarnValueDefaultValue = false;
3277var didWarnCheckedDefaultChecked = false;
3278var didWarnControlledToUncontrolled = false;
3279var didWarnUncontrolledToControlled = false;
3280
3281function isControlled(props) {
3282 var usesChecked = props.type === 'checkbox' || props.type === 'radio';
3283 return usesChecked ? props.checked != null : props.value != null;
3284}
3285
3286/**
3287 * Implements an <input> host component that allows setting these optional
3288 * props: `checked`, `value`, `defaultChecked`, and `defaultValue`.
3289 *
3290 * If `checked` or `value` are not supplied (or null/undefined), user actions
3291 * that affect the checked state or value will trigger updates to the element.
3292 *
3293 * If they are supplied (and not null/undefined), the rendered element will not
3294 * trigger updates to the element. Instead, the props must change in order for
3295 * the rendered element to be updated.
3296 *
3297 * The rendered element will be initialized as unchecked (or `defaultChecked`)
3298 * with an empty value (or `defaultValue`).
3299 *
3300 * See http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html
3301 */
3302
3303function getHostProps(element, props) {
3304 var node = element;
3305 var checked = props.checked;
3306
3307 var hostProps = _assign({}, props, {
3308 defaultChecked: undefined,
3309 defaultValue: undefined,
3310 value: undefined,
3311 checked: checked != null ? checked : node._wrapperState.initialChecked
3312 });
3313
3314 return hostProps;
3315}
3316
3317function initWrapperState(element, props) {
3318 {
3319 ReactControlledValuePropTypes.checkPropTypes('input', props);
3320
3321 if (props.checked !== undefined && props.defaultChecked !== undefined && !didWarnCheckedDefaultChecked) {
3322 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);
3323 didWarnCheckedDefaultChecked = true;
3324 }
3325 if (props.value !== undefined && props.defaultValue !== undefined && !didWarnValueDefaultValue) {
3326 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);
3327 didWarnValueDefaultValue = true;
3328 }
3329 }
3330
3331 var node = element;
3332 var defaultValue = props.defaultValue == null ? '' : props.defaultValue;
3333
3334 node._wrapperState = {
3335 initialChecked: props.checked != null ? props.checked : props.defaultChecked,
3336 initialValue: getToStringValue(props.value != null ? props.value : defaultValue),
3337 controlled: isControlled(props)
3338 };
3339}
3340
3341function updateChecked(element, props) {
3342 var node = element;
3343 var checked = props.checked;
3344 if (checked != null) {
3345 setValueForProperty(node, 'checked', checked, false);
3346 }
3347}
3348
3349function updateWrapper(element, props) {
3350 var node = element;
3351 {
3352 var _controlled = isControlled(props);
3353
3354 if (!node._wrapperState.controlled && _controlled && !didWarnUncontrolledToControlled) {
3355 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);
3356 didWarnUncontrolledToControlled = true;
3357 }
3358 if (node._wrapperState.controlled && !_controlled && !didWarnControlledToUncontrolled) {
3359 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);
3360 didWarnControlledToUncontrolled = true;
3361 }
3362 }
3363
3364 updateChecked(element, props);
3365
3366 var value = getToStringValue(props.value);
3367 var type = props.type;
3368
3369 if (value != null) {
3370 if (type === 'number') {
3371 if (value === 0 && node.value === '' ||
3372 // We explicitly want to coerce to number here if possible.
3373 // eslint-disable-next-line
3374 node.value != value) {
3375 node.value = toString(value);
3376 }
3377 } else if (node.value !== toString(value)) {
3378 node.value = toString(value);
3379 }
3380 } else if (type === 'submit' || type === 'reset') {
3381 // Submit/reset inputs need the attribute removed completely to avoid
3382 // blank-text buttons.
3383 node.removeAttribute('value');
3384 return;
3385 }
3386
3387 if (disableInputAttributeSyncing) {
3388 // When not syncing the value attribute, React only assigns a new value
3389 // whenever the defaultValue React prop has changed. When not present,
3390 // React does nothing
3391 if (props.hasOwnProperty('defaultValue')) {
3392 setDefaultValue(node, props.type, getToStringValue(props.defaultValue));
3393 }
3394 } else {
3395 // When syncing the value attribute, the value comes from a cascade of
3396 // properties:
3397 // 1. The value React property
3398 // 2. The defaultValue React property
3399 // 3. Otherwise there should be no change
3400 if (props.hasOwnProperty('value')) {
3401 setDefaultValue(node, props.type, value);
3402 } else if (props.hasOwnProperty('defaultValue')) {
3403 setDefaultValue(node, props.type, getToStringValue(props.defaultValue));
3404 }
3405 }
3406
3407 if (disableInputAttributeSyncing) {
3408 // When not syncing the checked attribute, the attribute is directly
3409 // controllable from the defaultValue React property. It needs to be
3410 // updated as new props come in.
3411 if (props.defaultChecked == null) {
3412 node.removeAttribute('checked');
3413 } else {
3414 node.defaultChecked = !!props.defaultChecked;
3415 }
3416 } else {
3417 // When syncing the checked attribute, it only changes when it needs
3418 // to be removed, such as transitioning from a checkbox into a text input
3419 if (props.checked == null && props.defaultChecked != null) {
3420 node.defaultChecked = !!props.defaultChecked;
3421 }
3422 }
3423}
3424
3425function postMountWrapper(element, props, isHydrating) {
3426 var node = element;
3427
3428 // Do not assign value if it is already set. This prevents user text input
3429 // from being lost during SSR hydration.
3430 if (props.hasOwnProperty('value') || props.hasOwnProperty('defaultValue')) {
3431 var type = props.type;
3432 var isButton = type === 'submit' || type === 'reset';
3433
3434 // Avoid setting value attribute on submit/reset inputs as it overrides the
3435 // default value provided by the browser. See: #12872
3436 if (isButton && (props.value === undefined || props.value === null)) {
3437 return;
3438 }
3439
3440 var _initialValue = toString(node._wrapperState.initialValue);
3441
3442 // Do not assign value if it is already set. This prevents user text input
3443 // from being lost during SSR hydration.
3444 if (!isHydrating) {
3445 if (disableInputAttributeSyncing) {
3446 var value = getToStringValue(props.value);
3447
3448 // When not syncing the value attribute, the value property points
3449 // directly to the React prop. Only assign it if it exists.
3450 if (value != null) {
3451 // Always assign on buttons so that it is possible to assign an
3452 // empty string to clear button text.
3453 //
3454 // Otherwise, do not re-assign the value property if is empty. This
3455 // potentially avoids a DOM write and prevents Firefox (~60.0.1) from
3456 // prematurely marking required inputs as invalid. Equality is compared
3457 // to the current value in case the browser provided value is not an
3458 // empty string.
3459 if (isButton || value !== node.value) {
3460 node.value = toString(value);
3461 }
3462 }
3463 } else {
3464 // When syncing the value attribute, the value property should use
3465 // the wrapperState._initialValue property. This uses:
3466 //
3467 // 1. The value React property when present
3468 // 2. The defaultValue React property when present
3469 // 3. An empty string
3470 if (_initialValue !== node.value) {
3471 node.value = _initialValue;
3472 }
3473 }
3474 }
3475
3476 if (disableInputAttributeSyncing) {
3477 // When not syncing the value attribute, assign the value attribute
3478 // directly from the defaultValue React property (when present)
3479 var defaultValue = getToStringValue(props.defaultValue);
3480 if (defaultValue != null) {
3481 node.defaultValue = toString(defaultValue);
3482 }
3483 } else {
3484 // Otherwise, the value attribute is synchronized to the property,
3485 // so we assign defaultValue to the same thing as the value property
3486 // assignment step above.
3487 node.defaultValue = _initialValue;
3488 }
3489 }
3490
3491 // Normally, we'd just do `node.checked = node.checked` upon initial mount, less this bug
3492 // this is needed to work around a chrome bug where setting defaultChecked
3493 // will sometimes influence the value of checked (even after detachment).
3494 // Reference: https://bugs.chromium.org/p/chromium/issues/detail?id=608416
3495 // We need to temporarily unset name to avoid disrupting radio button groups.
3496 var name = node.name;
3497 if (name !== '') {
3498 node.name = '';
3499 }
3500
3501 if (disableInputAttributeSyncing) {
3502 // When not syncing the checked attribute, the checked property
3503 // never gets assigned. It must be manually set. We don't want
3504 // to do this when hydrating so that existing user input isn't
3505 // modified
3506 if (!isHydrating) {
3507 updateChecked(element, props);
3508 }
3509
3510 // Only assign the checked attribute if it is defined. This saves
3511 // a DOM write when controlling the checked attribute isn't needed
3512 // (text inputs, submit/reset)
3513 if (props.hasOwnProperty('defaultChecked')) {
3514 node.defaultChecked = !node.defaultChecked;
3515 node.defaultChecked = !!props.defaultChecked;
3516 }
3517 } else {
3518 // When syncing the checked attribute, both the checked property and
3519 // attribute are assigned at the same time using defaultChecked. This uses:
3520 //
3521 // 1. The checked React property when present
3522 // 2. The defaultChecked React property when present
3523 // 3. Otherwise, false
3524 node.defaultChecked = !node.defaultChecked;
3525 node.defaultChecked = !!node._wrapperState.initialChecked;
3526 }
3527
3528 if (name !== '') {
3529 node.name = name;
3530 }
3531}
3532
3533function restoreControlledState(element, props) {
3534 var node = element;
3535 updateWrapper(node, props);
3536 updateNamedCousins(node, props);
3537}
3538
3539function updateNamedCousins(rootNode, props) {
3540 var name = props.name;
3541 if (props.type === 'radio' && name != null) {
3542 var queryRoot = rootNode;
3543
3544 while (queryRoot.parentNode) {
3545 queryRoot = queryRoot.parentNode;
3546 }
3547
3548 // If `rootNode.form` was non-null, then we could try `form.elements`,
3549 // but that sometimes behaves strangely in IE8. We could also try using
3550 // `form.getElementsByName`, but that will only return direct children
3551 // and won't include inputs that use the HTML5 `form=` attribute. Since
3552 // the input might not even be in a form. It might not even be in the
3553 // document. Let's just use the local `querySelectorAll` to ensure we don't
3554 // miss anything.
3555 var group = queryRoot.querySelectorAll('input[name=' + JSON.stringify('' + name) + '][type="radio"]');
3556
3557 for (var i = 0; i < group.length; i++) {
3558 var otherNode = group[i];
3559 if (otherNode === rootNode || otherNode.form !== rootNode.form) {
3560 continue;
3561 }
3562 // This will throw if radio buttons rendered by different copies of React
3563 // and the same name are rendered into the same form (same as #1939).
3564 // That's probably okay; we don't support it just as we don't support
3565 // mixing React radio buttons with non-React ones.
3566 var otherProps = getFiberCurrentPropsFromNode$1(otherNode);
3567 !otherProps ? invariant(false, 'ReactDOMInput: Mixing React and non-React radio inputs with the same `name` is not supported.') : void 0;
3568
3569 // We need update the tracked value on the named cousin since the value
3570 // was changed but the input saw no event or value set
3571 updateValueIfChanged(otherNode);
3572
3573 // If this is a controlled radio button group, forcing the input that
3574 // was previously checked to update will cause it to be come re-checked
3575 // as appropriate.
3576 updateWrapper(otherNode, otherProps);
3577 }
3578 }
3579}
3580
3581// In Chrome, assigning defaultValue to certain input types triggers input validation.
3582// For number inputs, the display value loses trailing decimal points. For email inputs,
3583// Chrome raises "The specified value <x> is not a valid email address".
3584//
3585// Here we check to see if the defaultValue has actually changed, avoiding these problems
3586// when the user is inputting text
3587//
3588// https://github.com/facebook/react/issues/7253
3589function setDefaultValue(node, type, value) {
3590 if (
3591 // Focused number inputs synchronize on blur. See ChangeEventPlugin.js
3592 type !== 'number' || node.ownerDocument.activeElement !== node) {
3593 if (value == null) {
3594 node.defaultValue = toString(node._wrapperState.initialValue);
3595 } else if (node.defaultValue !== toString(value)) {
3596 node.defaultValue = toString(value);
3597 }
3598 }
3599}
3600
3601var eventTypes$1 = {
3602 change: {
3603 phasedRegistrationNames: {
3604 bubbled: 'onChange',
3605 captured: 'onChangeCapture'
3606 },
3607 dependencies: [TOP_BLUR, TOP_CHANGE, TOP_CLICK, TOP_FOCUS, TOP_INPUT, TOP_KEY_DOWN, TOP_KEY_UP, TOP_SELECTION_CHANGE]
3608 }
3609};
3610
3611function createAndAccumulateChangeEvent(inst, nativeEvent, target) {
3612 var event = SyntheticEvent.getPooled(eventTypes$1.change, inst, nativeEvent, target);
3613 event.type = 'change';
3614 // Flag this event loop as needing state restore.
3615 enqueueStateRestore(target);
3616 accumulateTwoPhaseDispatches(event);
3617 return event;
3618}
3619/**
3620 * For IE shims
3621 */
3622var activeElement = null;
3623var activeElementInst = null;
3624
3625/**
3626 * SECTION: handle `change` event
3627 */
3628function shouldUseChangeEvent(elem) {
3629 var nodeName = elem.nodeName && elem.nodeName.toLowerCase();
3630 return nodeName === 'select' || nodeName === 'input' && elem.type === 'file';
3631}
3632
3633function manualDispatchChangeEvent(nativeEvent) {
3634 var event = createAndAccumulateChangeEvent(activeElementInst, nativeEvent, getEventTarget(nativeEvent));
3635
3636 // If change and propertychange bubbled, we'd just bind to it like all the
3637 // other events and have it go through ReactBrowserEventEmitter. Since it
3638 // doesn't, we manually listen for the events and so we have to enqueue and
3639 // process the abstract event manually.
3640 //
3641 // Batching is necessary here in order to ensure that all event handlers run
3642 // before the next rerender (including event handlers attached to ancestor
3643 // elements instead of directly on the input). Without this, controlled
3644 // components don't work properly in conjunction with event bubbling because
3645 // the component is rerendered and the value reverted before all the event
3646 // handlers can run. See https://github.com/facebook/react/issues/708.
3647 batchedUpdates(runEventInBatch, event);
3648}
3649
3650function runEventInBatch(event) {
3651 runEventsInBatch(event);
3652}
3653
3654function getInstIfValueChanged(targetInst) {
3655 var targetNode = getNodeFromInstance$1(targetInst);
3656 if (updateValueIfChanged(targetNode)) {
3657 return targetInst;
3658 }
3659}
3660
3661function getTargetInstForChangeEvent(topLevelType, targetInst) {
3662 if (topLevelType === TOP_CHANGE) {
3663 return targetInst;
3664 }
3665}
3666
3667/**
3668 * SECTION: handle `input` event
3669 */
3670var isInputEventSupported = false;
3671if (canUseDOM) {
3672 // IE9 claims to support the input event but fails to trigger it when
3673 // deleting text, so we ignore its input events.
3674 isInputEventSupported = isEventSupported('input') && (!document.documentMode || document.documentMode > 9);
3675}
3676
3677/**
3678 * (For IE <=9) Starts tracking propertychange events on the passed-in element
3679 * and override the value property so that we can distinguish user events from
3680 * value changes in JS.
3681 */
3682function startWatchingForValueChange(target, targetInst) {
3683 activeElement = target;
3684 activeElementInst = targetInst;
3685 activeElement.attachEvent('onpropertychange', handlePropertyChange);
3686}
3687
3688/**
3689 * (For IE <=9) Removes the event listeners from the currently-tracked element,
3690 * if any exists.
3691 */
3692function stopWatchingForValueChange() {
3693 if (!activeElement) {
3694 return;
3695 }
3696 activeElement.detachEvent('onpropertychange', handlePropertyChange);
3697 activeElement = null;
3698 activeElementInst = null;
3699}
3700
3701/**
3702 * (For IE <=9) Handles a propertychange event, sending a `change` event if
3703 * the value of the active element has changed.
3704 */
3705function handlePropertyChange(nativeEvent) {
3706 if (nativeEvent.propertyName !== 'value') {
3707 return;
3708 }
3709 if (getInstIfValueChanged(activeElementInst)) {
3710 manualDispatchChangeEvent(nativeEvent);
3711 }
3712}
3713
3714function handleEventsForInputEventPolyfill(topLevelType, target, targetInst) {
3715 if (topLevelType === TOP_FOCUS) {
3716 // In IE9, propertychange fires for most input events but is buggy and
3717 // doesn't fire when text is deleted, but conveniently, selectionchange
3718 // appears to fire in all of the remaining cases so we catch those and
3719 // forward the event if the value has changed
3720 // In either case, we don't want to call the event handler if the value
3721 // is changed from JS so we redefine a setter for `.value` that updates
3722 // our activeElementValue variable, allowing us to ignore those changes
3723 //
3724 // stopWatching() should be a noop here but we call it just in case we
3725 // missed a blur event somehow.
3726 stopWatchingForValueChange();
3727 startWatchingForValueChange(target, targetInst);
3728 } else if (topLevelType === TOP_BLUR) {
3729 stopWatchingForValueChange();
3730 }
3731}
3732
3733// For IE8 and IE9.
3734function getTargetInstForInputEventPolyfill(topLevelType, targetInst) {
3735 if (topLevelType === TOP_SELECTION_CHANGE || topLevelType === TOP_KEY_UP || topLevelType === TOP_KEY_DOWN) {
3736 // On the selectionchange event, the target is just document which isn't
3737 // helpful for us so just check activeElement instead.
3738 //
3739 // 99% of the time, keydown and keyup aren't necessary. IE8 fails to fire
3740 // propertychange on the first input event after setting `value` from a
3741 // script and fires only keydown, keypress, keyup. Catching keyup usually
3742 // gets it and catching keydown lets us fire an event for the first
3743 // keystroke if user does a key repeat (it'll be a little delayed: right
3744 // before the second keystroke). Other input methods (e.g., paste) seem to
3745 // fire selectionchange normally.
3746 return getInstIfValueChanged(activeElementInst);
3747 }
3748}
3749
3750/**
3751 * SECTION: handle `click` event
3752 */
3753function shouldUseClickEvent(elem) {
3754 // Use the `click` event to detect changes to checkbox and radio inputs.
3755 // This approach works across all browsers, whereas `change` does not fire
3756 // until `blur` in IE8.
3757 var nodeName = elem.nodeName;
3758 return nodeName && nodeName.toLowerCase() === 'input' && (elem.type === 'checkbox' || elem.type === 'radio');
3759}
3760
3761function getTargetInstForClickEvent(topLevelType, targetInst) {
3762 if (topLevelType === TOP_CLICK) {
3763 return getInstIfValueChanged(targetInst);
3764 }
3765}
3766
3767function getTargetInstForInputOrChangeEvent(topLevelType, targetInst) {
3768 if (topLevelType === TOP_INPUT || topLevelType === TOP_CHANGE) {
3769 return getInstIfValueChanged(targetInst);
3770 }
3771}
3772
3773function handleControlledInputBlur(node) {
3774 var state = node._wrapperState;
3775
3776 if (!state || !state.controlled || node.type !== 'number') {
3777 return;
3778 }
3779
3780 if (!disableInputAttributeSyncing) {
3781 // If controlled, assign the value attribute to the current value on blur
3782 setDefaultValue(node, 'number', node.value);
3783 }
3784}
3785
3786/**
3787 * This plugin creates an `onChange` event that normalizes change events
3788 * across form elements. This event fires at a time when it's possible to
3789 * change the element's value without seeing a flicker.
3790 *
3791 * Supported elements are:
3792 * - input (see `isTextInputElement`)
3793 * - textarea
3794 * - select
3795 */
3796var ChangeEventPlugin = {
3797 eventTypes: eventTypes$1,
3798
3799 _isInputEventSupported: isInputEventSupported,
3800
3801 extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
3802 var targetNode = targetInst ? getNodeFromInstance$1(targetInst) : window;
3803
3804 var getTargetInstFunc = void 0,
3805 handleEventFunc = void 0;
3806 if (shouldUseChangeEvent(targetNode)) {
3807 getTargetInstFunc = getTargetInstForChangeEvent;
3808 } else if (isTextInputElement(targetNode)) {
3809 if (isInputEventSupported) {
3810 getTargetInstFunc = getTargetInstForInputOrChangeEvent;
3811 } else {
3812 getTargetInstFunc = getTargetInstForInputEventPolyfill;
3813 handleEventFunc = handleEventsForInputEventPolyfill;
3814 }
3815 } else if (shouldUseClickEvent(targetNode)) {
3816 getTargetInstFunc = getTargetInstForClickEvent;
3817 }
3818
3819 if (getTargetInstFunc) {
3820 var inst = getTargetInstFunc(topLevelType, targetInst);
3821 if (inst) {
3822 var event = createAndAccumulateChangeEvent(inst, nativeEvent, nativeEventTarget);
3823 return event;
3824 }
3825 }
3826
3827 if (handleEventFunc) {
3828 handleEventFunc(topLevelType, targetNode, targetInst);
3829 }
3830
3831 // When blurring, set the value attribute for number inputs
3832 if (topLevelType === TOP_BLUR) {
3833 handleControlledInputBlur(targetNode);
3834 }
3835 }
3836};
3837
3838/**
3839 * Module that is injectable into `EventPluginHub`, that specifies a
3840 * deterministic ordering of `EventPlugin`s. A convenient way to reason about
3841 * plugins, without having to package every one of them. This is better than
3842 * having plugins be ordered in the same order that they are injected because
3843 * that ordering would be influenced by the packaging order.
3844 * `ResponderEventPlugin` must occur before `SimpleEventPlugin` so that
3845 * preventing default on events is convenient in `SimpleEventPlugin` handlers.
3846 */
3847var DOMEventPluginOrder = ['ResponderEventPlugin', 'SimpleEventPlugin', 'EnterLeaveEventPlugin', 'ChangeEventPlugin', 'SelectEventPlugin', 'BeforeInputEventPlugin'];
3848
3849var SyntheticUIEvent = SyntheticEvent.extend({
3850 view: null,
3851 detail: null
3852});
3853
3854var modifierKeyToProp = {
3855 Alt: 'altKey',
3856 Control: 'ctrlKey',
3857 Meta: 'metaKey',
3858 Shift: 'shiftKey'
3859};
3860
3861// Older browsers (Safari <= 10, iOS Safari <= 10.2) do not support
3862// getModifierState. If getModifierState is not supported, we map it to a set of
3863// modifier keys exposed by the event. In this case, Lock-keys are not supported.
3864/**
3865 * Translation from modifier key to the associated property in the event.
3866 * @see http://www.w3.org/TR/DOM-Level-3-Events/#keys-Modifiers
3867 */
3868
3869function modifierStateGetter(keyArg) {
3870 var syntheticEvent = this;
3871 var nativeEvent = syntheticEvent.nativeEvent;
3872 if (nativeEvent.getModifierState) {
3873 return nativeEvent.getModifierState(keyArg);
3874 }
3875 var keyProp = modifierKeyToProp[keyArg];
3876 return keyProp ? !!nativeEvent[keyProp] : false;
3877}
3878
3879function getEventModifierState(nativeEvent) {
3880 return modifierStateGetter;
3881}
3882
3883var previousScreenX = 0;
3884var previousScreenY = 0;
3885// Use flags to signal movementX/Y has already been set
3886var isMovementXSet = false;
3887var isMovementYSet = false;
3888
3889/**
3890 * @interface MouseEvent
3891 * @see http://www.w3.org/TR/DOM-Level-3-Events/
3892 */
3893var SyntheticMouseEvent = SyntheticUIEvent.extend({
3894 screenX: null,
3895 screenY: null,
3896 clientX: null,
3897 clientY: null,
3898 pageX: null,
3899 pageY: null,
3900 ctrlKey: null,
3901 shiftKey: null,
3902 altKey: null,
3903 metaKey: null,
3904 getModifierState: getEventModifierState,
3905 button: null,
3906 buttons: null,
3907 relatedTarget: function (event) {
3908 return event.relatedTarget || (event.fromElement === event.srcElement ? event.toElement : event.fromElement);
3909 },
3910 movementX: function (event) {
3911 if ('movementX' in event) {
3912 return event.movementX;
3913 }
3914
3915 var screenX = previousScreenX;
3916 previousScreenX = event.screenX;
3917
3918 if (!isMovementXSet) {
3919 isMovementXSet = true;
3920 return 0;
3921 }
3922
3923 return event.type === 'mousemove' ? event.screenX - screenX : 0;
3924 },
3925 movementY: function (event) {
3926 if ('movementY' in event) {
3927 return event.movementY;
3928 }
3929
3930 var screenY = previousScreenY;
3931 previousScreenY = event.screenY;
3932
3933 if (!isMovementYSet) {
3934 isMovementYSet = true;
3935 return 0;
3936 }
3937
3938 return event.type === 'mousemove' ? event.screenY - screenY : 0;
3939 }
3940});
3941
3942/**
3943 * @interface PointerEvent
3944 * @see http://www.w3.org/TR/pointerevents/
3945 */
3946var SyntheticPointerEvent = SyntheticMouseEvent.extend({
3947 pointerId: null,
3948 width: null,
3949 height: null,
3950 pressure: null,
3951 tangentialPressure: null,
3952 tiltX: null,
3953 tiltY: null,
3954 twist: null,
3955 pointerType: null,
3956 isPrimary: null
3957});
3958
3959var eventTypes$2 = {
3960 mouseEnter: {
3961 registrationName: 'onMouseEnter',
3962 dependencies: [TOP_MOUSE_OUT, TOP_MOUSE_OVER]
3963 },
3964 mouseLeave: {
3965 registrationName: 'onMouseLeave',
3966 dependencies: [TOP_MOUSE_OUT, TOP_MOUSE_OVER]
3967 },
3968 pointerEnter: {
3969 registrationName: 'onPointerEnter',
3970 dependencies: [TOP_POINTER_OUT, TOP_POINTER_OVER]
3971 },
3972 pointerLeave: {
3973 registrationName: 'onPointerLeave',
3974 dependencies: [TOP_POINTER_OUT, TOP_POINTER_OVER]
3975 }
3976};
3977
3978var EnterLeaveEventPlugin = {
3979 eventTypes: eventTypes$2,
3980
3981 /**
3982 * For almost every interaction we care about, there will be both a top-level
3983 * `mouseover` and `mouseout` event that occurs. Only use `mouseout` so that
3984 * we do not extract duplicate events. However, moving the mouse into the
3985 * browser from outside will not fire a `mouseout` event. In this case, we use
3986 * the `mouseover` top-level event.
3987 */
3988 extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
3989 var isOverEvent = topLevelType === TOP_MOUSE_OVER || topLevelType === TOP_POINTER_OVER;
3990 var isOutEvent = topLevelType === TOP_MOUSE_OUT || topLevelType === TOP_POINTER_OUT;
3991
3992 if (isOverEvent && (nativeEvent.relatedTarget || nativeEvent.fromElement)) {
3993 return null;
3994 }
3995
3996 if (!isOutEvent && !isOverEvent) {
3997 // Must not be a mouse or pointer in or out - ignoring.
3998 return null;
3999 }
4000
4001 var win = void 0;
4002 if (nativeEventTarget.window === nativeEventTarget) {
4003 // `nativeEventTarget` is probably a window object.
4004 win = nativeEventTarget;
4005 } else {
4006 // TODO: Figure out why `ownerDocument` is sometimes undefined in IE8.
4007 var doc = nativeEventTarget.ownerDocument;
4008 if (doc) {
4009 win = doc.defaultView || doc.parentWindow;
4010 } else {
4011 win = window;
4012 }
4013 }
4014
4015 var from = void 0;
4016 var to = void 0;
4017 if (isOutEvent) {
4018 from = targetInst;
4019 var related = nativeEvent.relatedTarget || nativeEvent.toElement;
4020 to = related ? getClosestInstanceFromNode(related) : null;
4021 } else {
4022 // Moving to a node from outside the window.
4023 from = null;
4024 to = targetInst;
4025 }
4026
4027 if (from === to) {
4028 // Nothing pertains to our managed components.
4029 return null;
4030 }
4031
4032 var eventInterface = void 0,
4033 leaveEventType = void 0,
4034 enterEventType = void 0,
4035 eventTypePrefix = void 0;
4036
4037 if (topLevelType === TOP_MOUSE_OUT || topLevelType === TOP_MOUSE_OVER) {
4038 eventInterface = SyntheticMouseEvent;
4039 leaveEventType = eventTypes$2.mouseLeave;
4040 enterEventType = eventTypes$2.mouseEnter;
4041 eventTypePrefix = 'mouse';
4042 } else if (topLevelType === TOP_POINTER_OUT || topLevelType === TOP_POINTER_OVER) {
4043 eventInterface = SyntheticPointerEvent;
4044 leaveEventType = eventTypes$2.pointerLeave;
4045 enterEventType = eventTypes$2.pointerEnter;
4046 eventTypePrefix = 'pointer';
4047 }
4048
4049 var fromNode = from == null ? win : getNodeFromInstance$1(from);
4050 var toNode = to == null ? win : getNodeFromInstance$1(to);
4051
4052 var leave = eventInterface.getPooled(leaveEventType, from, nativeEvent, nativeEventTarget);
4053 leave.type = eventTypePrefix + 'leave';
4054 leave.target = fromNode;
4055 leave.relatedTarget = toNode;
4056
4057 var enter = eventInterface.getPooled(enterEventType, to, nativeEvent, nativeEventTarget);
4058 enter.type = eventTypePrefix + 'enter';
4059 enter.target = toNode;
4060 enter.relatedTarget = fromNode;
4061
4062 accumulateEnterLeaveDispatches(leave, enter, from, to);
4063
4064 return [leave, enter];
4065 }
4066};
4067
4068/**
4069 * inlined Object.is polyfill to avoid requiring consumers ship their own
4070 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
4071 */
4072function is(x, y) {
4073 return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
4074 ;
4075}
4076
4077var hasOwnProperty$1 = Object.prototype.hasOwnProperty;
4078
4079/**
4080 * Performs equality by iterating through keys on an object and returning false
4081 * when any key has values which are not strictly equal between the arguments.
4082 * Returns true when the values of all keys are strictly equal.
4083 */
4084function shallowEqual(objA, objB) {
4085 if (is(objA, objB)) {
4086 return true;
4087 }
4088
4089 if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
4090 return false;
4091 }
4092
4093 var keysA = Object.keys(objA);
4094 var keysB = Object.keys(objB);
4095
4096 if (keysA.length !== keysB.length) {
4097 return false;
4098 }
4099
4100 // Test for A's keys different from B.
4101 for (var i = 0; i < keysA.length; i++) {
4102 if (!hasOwnProperty$1.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
4103 return false;
4104 }
4105 }
4106
4107 return true;
4108}
4109
4110/**
4111 * `ReactInstanceMap` maintains a mapping from a public facing stateful
4112 * instance (key) and the internal representation (value). This allows public
4113 * methods to accept the user facing instance as an argument and map them back
4114 * to internal methods.
4115 *
4116 * Note that this module is currently shared and assumed to be stateless.
4117 * If this becomes an actual Map, that will break.
4118 */
4119
4120/**
4121 * This API should be called `delete` but we'd have to make sure to always
4122 * transform these to strings for IE support. When this transform is fully
4123 * supported we can rename it.
4124 */
4125
4126
4127function get(key) {
4128 return key._reactInternalFiber;
4129}
4130
4131function has(key) {
4132 return key._reactInternalFiber !== undefined;
4133}
4134
4135function set(key, value) {
4136 key._reactInternalFiber = value;
4137}
4138
4139// Don't change these two values. They're used by React Dev Tools.
4140var NoEffect = /* */0;
4141var PerformedWork = /* */1;
4142
4143// You can change the rest (and add more).
4144var Placement = /* */2;
4145var Update = /* */4;
4146var PlacementAndUpdate = /* */6;
4147var Deletion = /* */8;
4148var ContentReset = /* */16;
4149var Callback = /* */32;
4150var DidCapture = /* */64;
4151var Ref = /* */128;
4152var Snapshot = /* */256;
4153var Passive = /* */512;
4154
4155// Passive & Update & Callback & Ref & Snapshot
4156var LifecycleEffectMask = /* */932;
4157
4158// Union of all host effects
4159var HostEffectMask = /* */1023;
4160
4161var Incomplete = /* */1024;
4162var ShouldCapture = /* */2048;
4163
4164var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner;
4165
4166var MOUNTING = 1;
4167var MOUNTED = 2;
4168var UNMOUNTED = 3;
4169
4170function isFiberMountedImpl(fiber) {
4171 var node = fiber;
4172 if (!fiber.alternate) {
4173 // If there is no alternate, this might be a new tree that isn't inserted
4174 // yet. If it is, then it will have a pending insertion effect on it.
4175 if ((node.effectTag & Placement) !== NoEffect) {
4176 return MOUNTING;
4177 }
4178 while (node.return) {
4179 node = node.return;
4180 if ((node.effectTag & Placement) !== NoEffect) {
4181 return MOUNTING;
4182 }
4183 }
4184 } else {
4185 while (node.return) {
4186 node = node.return;
4187 }
4188 }
4189 if (node.tag === HostRoot) {
4190 // TODO: Check if this was a nested HostRoot when used with
4191 // renderContainerIntoSubtree.
4192 return MOUNTED;
4193 }
4194 // If we didn't hit the root, that means that we're in an disconnected tree
4195 // that has been unmounted.
4196 return UNMOUNTED;
4197}
4198
4199function isFiberMounted(fiber) {
4200 return isFiberMountedImpl(fiber) === MOUNTED;
4201}
4202
4203function isMounted(component) {
4204 {
4205 var owner = ReactCurrentOwner$1.current;
4206 if (owner !== null && owner.tag === ClassComponent) {
4207 var ownerFiber = owner;
4208 var instance = ownerFiber.stateNode;
4209 !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;
4210 instance._warnedAboutRefsInRender = true;
4211 }
4212 }
4213
4214 var fiber = get(component);
4215 if (!fiber) {
4216 return false;
4217 }
4218 return isFiberMountedImpl(fiber) === MOUNTED;
4219}
4220
4221function assertIsMounted(fiber) {
4222 !(isFiberMountedImpl(fiber) === MOUNTED) ? invariant(false, 'Unable to find node on an unmounted component.') : void 0;
4223}
4224
4225function findCurrentFiberUsingSlowPath(fiber) {
4226 var alternate = fiber.alternate;
4227 if (!alternate) {
4228 // If there is no alternate, then we only need to check if it is mounted.
4229 var state = isFiberMountedImpl(fiber);
4230 !(state !== UNMOUNTED) ? invariant(false, 'Unable to find node on an unmounted component.') : void 0;
4231 if (state === MOUNTING) {
4232 return null;
4233 }
4234 return fiber;
4235 }
4236 // If we have two possible branches, we'll walk backwards up to the root
4237 // to see what path the root points to. On the way we may hit one of the
4238 // special cases and we'll deal with them.
4239 var a = fiber;
4240 var b = alternate;
4241 while (true) {
4242 var parentA = a.return;
4243 var parentB = parentA ? parentA.alternate : null;
4244 if (!parentA || !parentB) {
4245 // We're at the root.
4246 break;
4247 }
4248
4249 // If both copies of the parent fiber point to the same child, we can
4250 // assume that the child is current. This happens when we bailout on low
4251 // priority: the bailed out fiber's child reuses the current child.
4252 if (parentA.child === parentB.child) {
4253 var child = parentA.child;
4254 while (child) {
4255 if (child === a) {
4256 // We've determined that A is the current branch.
4257 assertIsMounted(parentA);
4258 return fiber;
4259 }
4260 if (child === b) {
4261 // We've determined that B is the current branch.
4262 assertIsMounted(parentA);
4263 return alternate;
4264 }
4265 child = child.sibling;
4266 }
4267 // We should never have an alternate for any mounting node. So the only
4268 // way this could possibly happen is if this was unmounted, if at all.
4269 invariant(false, 'Unable to find node on an unmounted component.');
4270 }
4271
4272 if (a.return !== b.return) {
4273 // The return pointer of A and the return pointer of B point to different
4274 // fibers. We assume that return pointers never criss-cross, so A must
4275 // belong to the child set of A.return, and B must belong to the child
4276 // set of B.return.
4277 a = parentA;
4278 b = parentB;
4279 } else {
4280 // The return pointers point to the same fiber. We'll have to use the
4281 // default, slow path: scan the child sets of each parent alternate to see
4282 // which child belongs to which set.
4283 //
4284 // Search parent A's child set
4285 var didFindChild = false;
4286 var _child = parentA.child;
4287 while (_child) {
4288 if (_child === a) {
4289 didFindChild = true;
4290 a = parentA;
4291 b = parentB;
4292 break;
4293 }
4294 if (_child === b) {
4295 didFindChild = true;
4296 b = parentA;
4297 a = parentB;
4298 break;
4299 }
4300 _child = _child.sibling;
4301 }
4302 if (!didFindChild) {
4303 // Search parent B's child set
4304 _child = parentB.child;
4305 while (_child) {
4306 if (_child === a) {
4307 didFindChild = true;
4308 a = parentB;
4309 b = parentA;
4310 break;
4311 }
4312 if (_child === b) {
4313 didFindChild = true;
4314 b = parentB;
4315 a = parentA;
4316 break;
4317 }
4318 _child = _child.sibling;
4319 }
4320 !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;
4321 }
4322 }
4323
4324 !(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;
4325 }
4326 // If the root is not a host container, we're in a disconnected tree. I.e.
4327 // unmounted.
4328 !(a.tag === HostRoot) ? invariant(false, 'Unable to find node on an unmounted component.') : void 0;
4329 if (a.stateNode.current === a) {
4330 // We've determined that A is the current branch.
4331 return fiber;
4332 }
4333 // Otherwise B has to be current branch.
4334 return alternate;
4335}
4336
4337function findCurrentHostFiber(parent) {
4338 var currentParent = findCurrentFiberUsingSlowPath(parent);
4339 if (!currentParent) {
4340 return null;
4341 }
4342
4343 // Next we'll drill down this component to find the first HostComponent/Text.
4344 var node = currentParent;
4345 while (true) {
4346 if (node.tag === HostComponent || node.tag === HostText) {
4347 return node;
4348 } else if (node.child) {
4349 node.child.return = node;
4350 node = node.child;
4351 continue;
4352 }
4353 if (node === currentParent) {
4354 return null;
4355 }
4356 while (!node.sibling) {
4357 if (!node.return || node.return === currentParent) {
4358 return null;
4359 }
4360 node = node.return;
4361 }
4362 node.sibling.return = node.return;
4363 node = node.sibling;
4364 }
4365 // Flow needs the return null here, but ESLint complains about it.
4366 // eslint-disable-next-line no-unreachable
4367 return null;
4368}
4369
4370function findCurrentHostFiberWithNoPortals(parent) {
4371 var currentParent = findCurrentFiberUsingSlowPath(parent);
4372 if (!currentParent) {
4373 return null;
4374 }
4375
4376 // Next we'll drill down this component to find the first HostComponent/Text.
4377 var node = currentParent;
4378 while (true) {
4379 if (node.tag === HostComponent || node.tag === HostText) {
4380 return node;
4381 } else if (node.child && node.tag !== HostPortal) {
4382 node.child.return = node;
4383 node = node.child;
4384 continue;
4385 }
4386 if (node === currentParent) {
4387 return null;
4388 }
4389 while (!node.sibling) {
4390 if (!node.return || node.return === currentParent) {
4391 return null;
4392 }
4393 node = node.return;
4394 }
4395 node.sibling.return = node.return;
4396 node = node.sibling;
4397 }
4398 // Flow needs the return null here, but ESLint complains about it.
4399 // eslint-disable-next-line no-unreachable
4400 return null;
4401}
4402
4403function addEventBubbleListener(element, eventType, listener) {
4404 element.addEventListener(eventType, listener, false);
4405}
4406
4407function addEventCaptureListener(element, eventType, listener) {
4408 element.addEventListener(eventType, listener, true);
4409}
4410
4411/**
4412 * @interface Event
4413 * @see http://www.w3.org/TR/css3-animations/#AnimationEvent-interface
4414 * @see https://developer.mozilla.org/en-US/docs/Web/API/AnimationEvent
4415 */
4416var SyntheticAnimationEvent = SyntheticEvent.extend({
4417 animationName: null,
4418 elapsedTime: null,
4419 pseudoElement: null
4420});
4421
4422/**
4423 * @interface Event
4424 * @see http://www.w3.org/TR/clipboard-apis/
4425 */
4426var SyntheticClipboardEvent = SyntheticEvent.extend({
4427 clipboardData: function (event) {
4428 return 'clipboardData' in event ? event.clipboardData : window.clipboardData;
4429 }
4430});
4431
4432/**
4433 * @interface FocusEvent
4434 * @see http://www.w3.org/TR/DOM-Level-3-Events/
4435 */
4436var SyntheticFocusEvent = SyntheticUIEvent.extend({
4437 relatedTarget: null
4438});
4439
4440/**
4441 * `charCode` represents the actual "character code" and is safe to use with
4442 * `String.fromCharCode`. As such, only keys that correspond to printable
4443 * characters produce a valid `charCode`, the only exception to this is Enter.
4444 * The Tab-key is considered non-printable and does not have a `charCode`,
4445 * presumably because it does not produce a tab-character in browsers.
4446 *
4447 * @param {object} nativeEvent Native browser event.
4448 * @return {number} Normalized `charCode` property.
4449 */
4450function getEventCharCode(nativeEvent) {
4451 var charCode = void 0;
4452 var keyCode = nativeEvent.keyCode;
4453
4454 if ('charCode' in nativeEvent) {
4455 charCode = nativeEvent.charCode;
4456
4457 // FF does not set `charCode` for the Enter-key, check against `keyCode`.
4458 if (charCode === 0 && keyCode === 13) {
4459 charCode = 13;
4460 }
4461 } else {
4462 // IE8 does not implement `charCode`, but `keyCode` has the correct value.
4463 charCode = keyCode;
4464 }
4465
4466 // IE and Edge (on Windows) and Chrome / Safari (on Windows and Linux)
4467 // report Enter as charCode 10 when ctrl is pressed.
4468 if (charCode === 10) {
4469 charCode = 13;
4470 }
4471
4472 // Some non-printable keys are reported in `charCode`/`keyCode`, discard them.
4473 // Must not discard the (non-)printable Enter-key.
4474 if (charCode >= 32 || charCode === 13) {
4475 return charCode;
4476 }
4477
4478 return 0;
4479}
4480
4481/**
4482 * Normalization of deprecated HTML5 `key` values
4483 * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Key_names
4484 */
4485var normalizeKey = {
4486 Esc: 'Escape',
4487 Spacebar: ' ',
4488 Left: 'ArrowLeft',
4489 Up: 'ArrowUp',
4490 Right: 'ArrowRight',
4491 Down: 'ArrowDown',
4492 Del: 'Delete',
4493 Win: 'OS',
4494 Menu: 'ContextMenu',
4495 Apps: 'ContextMenu',
4496 Scroll: 'ScrollLock',
4497 MozPrintableKey: 'Unidentified'
4498};
4499
4500/**
4501 * Translation from legacy `keyCode` to HTML5 `key`
4502 * Only special keys supported, all others depend on keyboard layout or browser
4503 * @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent#Key_names
4504 */
4505var translateToKey = {
4506 '8': 'Backspace',
4507 '9': 'Tab',
4508 '12': 'Clear',
4509 '13': 'Enter',
4510 '16': 'Shift',
4511 '17': 'Control',
4512 '18': 'Alt',
4513 '19': 'Pause',
4514 '20': 'CapsLock',
4515 '27': 'Escape',
4516 '32': ' ',
4517 '33': 'PageUp',
4518 '34': 'PageDown',
4519 '35': 'End',
4520 '36': 'Home',
4521 '37': 'ArrowLeft',
4522 '38': 'ArrowUp',
4523 '39': 'ArrowRight',
4524 '40': 'ArrowDown',
4525 '45': 'Insert',
4526 '46': 'Delete',
4527 '112': 'F1',
4528 '113': 'F2',
4529 '114': 'F3',
4530 '115': 'F4',
4531 '116': 'F5',
4532 '117': 'F6',
4533 '118': 'F7',
4534 '119': 'F8',
4535 '120': 'F9',
4536 '121': 'F10',
4537 '122': 'F11',
4538 '123': 'F12',
4539 '144': 'NumLock',
4540 '145': 'ScrollLock',
4541 '224': 'Meta'
4542};
4543
4544/**
4545 * @param {object} nativeEvent Native browser event.
4546 * @return {string} Normalized `key` property.
4547 */
4548function getEventKey(nativeEvent) {
4549 if (nativeEvent.key) {
4550 // Normalize inconsistent values reported by browsers due to
4551 // implementations of a working draft specification.
4552
4553 // FireFox implements `key` but returns `MozPrintableKey` for all
4554 // printable characters (normalized to `Unidentified`), ignore it.
4555 var key = normalizeKey[nativeEvent.key] || nativeEvent.key;
4556 if (key !== 'Unidentified') {
4557 return key;
4558 }
4559 }
4560
4561 // Browser does not implement `key`, polyfill as much of it as we can.
4562 if (nativeEvent.type === 'keypress') {
4563 var charCode = getEventCharCode(nativeEvent);
4564
4565 // The enter-key is technically both printable and non-printable and can
4566 // thus be captured by `keypress`, no other non-printable key should.
4567 return charCode === 13 ? 'Enter' : String.fromCharCode(charCode);
4568 }
4569 if (nativeEvent.type === 'keydown' || nativeEvent.type === 'keyup') {
4570 // While user keyboard layout determines the actual meaning of each
4571 // `keyCode` value, almost all function keys have a universal value.
4572 return translateToKey[nativeEvent.keyCode] || 'Unidentified';
4573 }
4574 return '';
4575}
4576
4577/**
4578 * @interface KeyboardEvent
4579 * @see http://www.w3.org/TR/DOM-Level-3-Events/
4580 */
4581var SyntheticKeyboardEvent = SyntheticUIEvent.extend({
4582 key: getEventKey,
4583 location: null,
4584 ctrlKey: null,
4585 shiftKey: null,
4586 altKey: null,
4587 metaKey: null,
4588 repeat: null,
4589 locale: null,
4590 getModifierState: getEventModifierState,
4591 // Legacy Interface
4592 charCode: function (event) {
4593 // `charCode` is the result of a KeyPress event and represents the value of
4594 // the actual printable character.
4595
4596 // KeyPress is deprecated, but its replacement is not yet final and not
4597 // implemented in any major browser. Only KeyPress has charCode.
4598 if (event.type === 'keypress') {
4599 return getEventCharCode(event);
4600 }
4601 return 0;
4602 },
4603 keyCode: function (event) {
4604 // `keyCode` is the result of a KeyDown/Up event and represents the value of
4605 // physical keyboard key.
4606
4607 // The actual meaning of the value depends on the users' keyboard layout
4608 // which cannot be detected. Assuming that it is a US keyboard layout
4609 // provides a surprisingly accurate mapping for US and European users.
4610 // Due to this, it is left to the user to implement at this time.
4611 if (event.type === 'keydown' || event.type === 'keyup') {
4612 return event.keyCode;
4613 }
4614 return 0;
4615 },
4616 which: function (event) {
4617 // `which` is an alias for either `keyCode` or `charCode` depending on the
4618 // type of the event.
4619 if (event.type === 'keypress') {
4620 return getEventCharCode(event);
4621 }
4622 if (event.type === 'keydown' || event.type === 'keyup') {
4623 return event.keyCode;
4624 }
4625 return 0;
4626 }
4627});
4628
4629/**
4630 * @interface DragEvent
4631 * @see http://www.w3.org/TR/DOM-Level-3-Events/
4632 */
4633var SyntheticDragEvent = SyntheticMouseEvent.extend({
4634 dataTransfer: null
4635});
4636
4637/**
4638 * @interface TouchEvent
4639 * @see http://www.w3.org/TR/touch-events/
4640 */
4641var SyntheticTouchEvent = SyntheticUIEvent.extend({
4642 touches: null,
4643 targetTouches: null,
4644 changedTouches: null,
4645 altKey: null,
4646 metaKey: null,
4647 ctrlKey: null,
4648 shiftKey: null,
4649 getModifierState: getEventModifierState
4650});
4651
4652/**
4653 * @interface Event
4654 * @see http://www.w3.org/TR/2009/WD-css3-transitions-20090320/#transition-events-
4655 * @see https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent
4656 */
4657var SyntheticTransitionEvent = SyntheticEvent.extend({
4658 propertyName: null,
4659 elapsedTime: null,
4660 pseudoElement: null
4661});
4662
4663/**
4664 * @interface WheelEvent
4665 * @see http://www.w3.org/TR/DOM-Level-3-Events/
4666 */
4667var SyntheticWheelEvent = SyntheticMouseEvent.extend({
4668 deltaX: function (event) {
4669 return 'deltaX' in event ? event.deltaX : // Fallback to `wheelDeltaX` for Webkit and normalize (right is positive).
4670 'wheelDeltaX' in event ? -event.wheelDeltaX : 0;
4671 },
4672 deltaY: function (event) {
4673 return 'deltaY' in event ? event.deltaY : // Fallback to `wheelDeltaY` for Webkit and normalize (down is positive).
4674 'wheelDeltaY' in event ? -event.wheelDeltaY : // Fallback to `wheelDelta` for IE<9 and normalize (down is positive).
4675 'wheelDelta' in event ? -event.wheelDelta : 0;
4676 },
4677
4678 deltaZ: null,
4679
4680 // Browsers without "deltaMode" is reporting in raw wheel delta where one
4681 // notch on the scroll is always +/- 120, roughly equivalent to pixels.
4682 // A good approximation of DOM_DELTA_LINE (1) is 5% of viewport size or
4683 // ~40 pixels, for DOM_DELTA_SCREEN (2) it is 87.5% of viewport size.
4684 deltaMode: null
4685});
4686
4687/**
4688 * Turns
4689 * ['abort', ...]
4690 * into
4691 * eventTypes = {
4692 * 'abort': {
4693 * phasedRegistrationNames: {
4694 * bubbled: 'onAbort',
4695 * captured: 'onAbortCapture',
4696 * },
4697 * dependencies: [TOP_ABORT],
4698 * },
4699 * ...
4700 * };
4701 * topLevelEventsToDispatchConfig = new Map([
4702 * [TOP_ABORT, { sameConfig }],
4703 * ]);
4704 */
4705
4706var 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']];
4707var 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']];
4708
4709var eventTypes$4 = {};
4710var topLevelEventsToDispatchConfig = {};
4711
4712function addEventTypeNameToConfig(_ref, isInteractive) {
4713 var topEvent = _ref[0],
4714 event = _ref[1];
4715
4716 var capitalizedEvent = event[0].toUpperCase() + event.slice(1);
4717 var onEvent = 'on' + capitalizedEvent;
4718
4719 var type = {
4720 phasedRegistrationNames: {
4721 bubbled: onEvent,
4722 captured: onEvent + 'Capture'
4723 },
4724 dependencies: [topEvent],
4725 isInteractive: isInteractive
4726 };
4727 eventTypes$4[event] = type;
4728 topLevelEventsToDispatchConfig[topEvent] = type;
4729}
4730
4731interactiveEventTypeNames.forEach(function (eventTuple) {
4732 addEventTypeNameToConfig(eventTuple, true);
4733});
4734nonInteractiveEventTypeNames.forEach(function (eventTuple) {
4735 addEventTypeNameToConfig(eventTuple, false);
4736});
4737
4738// Only used in DEV for exhaustiveness validation.
4739var 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];
4740
4741var SimpleEventPlugin = {
4742 eventTypes: eventTypes$4,
4743
4744 isInteractiveTopLevelEventType: function (topLevelType) {
4745 var config = topLevelEventsToDispatchConfig[topLevelType];
4746 return config !== undefined && config.isInteractive === true;
4747 },
4748
4749
4750 extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
4751 var dispatchConfig = topLevelEventsToDispatchConfig[topLevelType];
4752 if (!dispatchConfig) {
4753 return null;
4754 }
4755 var EventConstructor = void 0;
4756 switch (topLevelType) {
4757 case TOP_KEY_PRESS:
4758 // Firefox creates a keypress event for function keys too. This removes
4759 // the unwanted keypress events. Enter is however both printable and
4760 // non-printable. One would expect Tab to be as well (but it isn't).
4761 if (getEventCharCode(nativeEvent) === 0) {
4762 return null;
4763 }
4764 /* falls through */
4765 case TOP_KEY_DOWN:
4766 case TOP_KEY_UP:
4767 EventConstructor = SyntheticKeyboardEvent;
4768 break;
4769 case TOP_BLUR:
4770 case TOP_FOCUS:
4771 EventConstructor = SyntheticFocusEvent;
4772 break;
4773 case TOP_CLICK:
4774 // Firefox creates a click event on right mouse clicks. This removes the
4775 // unwanted click events.
4776 if (nativeEvent.button === 2) {
4777 return null;
4778 }
4779 /* falls through */
4780 case TOP_AUX_CLICK:
4781 case TOP_DOUBLE_CLICK:
4782 case TOP_MOUSE_DOWN:
4783 case TOP_MOUSE_MOVE:
4784 case TOP_MOUSE_UP:
4785 // TODO: Disabled elements should not respond to mouse events
4786 /* falls through */
4787 case TOP_MOUSE_OUT:
4788 case TOP_MOUSE_OVER:
4789 case TOP_CONTEXT_MENU:
4790 EventConstructor = SyntheticMouseEvent;
4791 break;
4792 case TOP_DRAG:
4793 case TOP_DRAG_END:
4794 case TOP_DRAG_ENTER:
4795 case TOP_DRAG_EXIT:
4796 case TOP_DRAG_LEAVE:
4797 case TOP_DRAG_OVER:
4798 case TOP_DRAG_START:
4799 case TOP_DROP:
4800 EventConstructor = SyntheticDragEvent;
4801 break;
4802 case TOP_TOUCH_CANCEL:
4803 case TOP_TOUCH_END:
4804 case TOP_TOUCH_MOVE:
4805 case TOP_TOUCH_START:
4806 EventConstructor = SyntheticTouchEvent;
4807 break;
4808 case TOP_ANIMATION_END:
4809 case TOP_ANIMATION_ITERATION:
4810 case TOP_ANIMATION_START:
4811 EventConstructor = SyntheticAnimationEvent;
4812 break;
4813 case TOP_TRANSITION_END:
4814 EventConstructor = SyntheticTransitionEvent;
4815 break;
4816 case TOP_SCROLL:
4817 EventConstructor = SyntheticUIEvent;
4818 break;
4819 case TOP_WHEEL:
4820 EventConstructor = SyntheticWheelEvent;
4821 break;
4822 case TOP_COPY:
4823 case TOP_CUT:
4824 case TOP_PASTE:
4825 EventConstructor = SyntheticClipboardEvent;
4826 break;
4827 case TOP_GOT_POINTER_CAPTURE:
4828 case TOP_LOST_POINTER_CAPTURE:
4829 case TOP_POINTER_CANCEL:
4830 case TOP_POINTER_DOWN:
4831 case TOP_POINTER_MOVE:
4832 case TOP_POINTER_OUT:
4833 case TOP_POINTER_OVER:
4834 case TOP_POINTER_UP:
4835 EventConstructor = SyntheticPointerEvent;
4836 break;
4837 default:
4838 {
4839 if (knownHTMLTopLevelTypes.indexOf(topLevelType) === -1) {
4840 warningWithoutStack$1(false, 'SimpleEventPlugin: Unhandled event type, `%s`. This warning ' + 'is likely caused by a bug in React. Please file an issue.', topLevelType);
4841 }
4842 }
4843 // HTML Events
4844 // @see http://www.w3.org/TR/html5/index.html#events-0
4845 EventConstructor = SyntheticEvent;
4846 break;
4847 }
4848 var event = EventConstructor.getPooled(dispatchConfig, targetInst, nativeEvent, nativeEventTarget);
4849 accumulateTwoPhaseDispatches(event);
4850 return event;
4851 }
4852};
4853
4854var isInteractiveTopLevelEventType = SimpleEventPlugin.isInteractiveTopLevelEventType;
4855
4856
4857var CALLBACK_BOOKKEEPING_POOL_SIZE = 10;
4858var callbackBookkeepingPool = [];
4859
4860/**
4861 * Find the deepest React component completely containing the root of the
4862 * passed-in instance (for use when entire React trees are nested within each
4863 * other). If React trees are not nested, returns null.
4864 */
4865function findRootContainerNode(inst) {
4866 // TODO: It may be a good idea to cache this to prevent unnecessary DOM
4867 // traversal, but caching is difficult to do correctly without using a
4868 // mutation observer to listen for all DOM changes.
4869 while (inst.return) {
4870 inst = inst.return;
4871 }
4872 if (inst.tag !== HostRoot) {
4873 // This can happen if we're in a detached tree.
4874 return null;
4875 }
4876 return inst.stateNode.containerInfo;
4877}
4878
4879// Used to store ancestor hierarchy in top level callback
4880function getTopLevelCallbackBookKeeping(topLevelType, nativeEvent, targetInst) {
4881 if (callbackBookkeepingPool.length) {
4882 var instance = callbackBookkeepingPool.pop();
4883 instance.topLevelType = topLevelType;
4884 instance.nativeEvent = nativeEvent;
4885 instance.targetInst = targetInst;
4886 return instance;
4887 }
4888 return {
4889 topLevelType: topLevelType,
4890 nativeEvent: nativeEvent,
4891 targetInst: targetInst,
4892 ancestors: []
4893 };
4894}
4895
4896function releaseTopLevelCallbackBookKeeping(instance) {
4897 instance.topLevelType = null;
4898 instance.nativeEvent = null;
4899 instance.targetInst = null;
4900 instance.ancestors.length = 0;
4901 if (callbackBookkeepingPool.length < CALLBACK_BOOKKEEPING_POOL_SIZE) {
4902 callbackBookkeepingPool.push(instance);
4903 }
4904}
4905
4906function handleTopLevel(bookKeeping) {
4907 var targetInst = bookKeeping.targetInst;
4908
4909 // Loop through the hierarchy, in case there's any nested components.
4910 // It's important that we build the array of ancestors before calling any
4911 // event handlers, because event handlers can modify the DOM, leading to
4912 // inconsistencies with ReactMount's node cache. See #1105.
4913 var ancestor = targetInst;
4914 do {
4915 if (!ancestor) {
4916 bookKeeping.ancestors.push(ancestor);
4917 break;
4918 }
4919 var root = findRootContainerNode(ancestor);
4920 if (!root) {
4921 break;
4922 }
4923 bookKeeping.ancestors.push(ancestor);
4924 ancestor = getClosestInstanceFromNode(root);
4925 } while (ancestor);
4926
4927 for (var i = 0; i < bookKeeping.ancestors.length; i++) {
4928 targetInst = bookKeeping.ancestors[i];
4929 runExtractedEventsInBatch(bookKeeping.topLevelType, targetInst, bookKeeping.nativeEvent, getEventTarget(bookKeeping.nativeEvent));
4930 }
4931}
4932
4933// TODO: can we stop exporting these?
4934var _enabled = true;
4935
4936function setEnabled(enabled) {
4937 _enabled = !!enabled;
4938}
4939
4940function isEnabled() {
4941 return _enabled;
4942}
4943
4944/**
4945 * Traps top-level events by using event bubbling.
4946 *
4947 * @param {number} topLevelType Number from `TopLevelEventTypes`.
4948 * @param {object} element Element on which to attach listener.
4949 * @return {?object} An object with a remove function which will forcefully
4950 * remove the listener.
4951 * @internal
4952 */
4953function trapBubbledEvent(topLevelType, element) {
4954 if (!element) {
4955 return null;
4956 }
4957 var dispatch = isInteractiveTopLevelEventType(topLevelType) ? dispatchInteractiveEvent : dispatchEvent;
4958
4959 addEventBubbleListener(element, getRawEventName(topLevelType),
4960 // Check if interactive and wrap in interactiveUpdates
4961 dispatch.bind(null, topLevelType));
4962}
4963
4964/**
4965 * Traps a top-level event by using event capturing.
4966 *
4967 * @param {number} topLevelType Number from `TopLevelEventTypes`.
4968 * @param {object} element Element on which to attach listener.
4969 * @return {?object} An object with a remove function which will forcefully
4970 * remove the listener.
4971 * @internal
4972 */
4973function trapCapturedEvent(topLevelType, element) {
4974 if (!element) {
4975 return null;
4976 }
4977 var dispatch = isInteractiveTopLevelEventType(topLevelType) ? dispatchInteractiveEvent : dispatchEvent;
4978
4979 addEventCaptureListener(element, getRawEventName(topLevelType),
4980 // Check if interactive and wrap in interactiveUpdates
4981 dispatch.bind(null, topLevelType));
4982}
4983
4984function dispatchInteractiveEvent(topLevelType, nativeEvent) {
4985 interactiveUpdates(dispatchEvent, topLevelType, nativeEvent);
4986}
4987
4988function dispatchEvent(topLevelType, nativeEvent) {
4989 if (!_enabled) {
4990 return;
4991 }
4992
4993 var nativeEventTarget = getEventTarget(nativeEvent);
4994 var targetInst = getClosestInstanceFromNode(nativeEventTarget);
4995 if (targetInst !== null && typeof targetInst.tag === 'number' && !isFiberMounted(targetInst)) {
4996 // If we get an event (ex: img onload) before committing that
4997 // component's mount, ignore it for now (that is, treat it as if it was an
4998 // event on a non-React tree). We might also consider queueing events and
4999 // dispatching them after the mount.
5000 targetInst = null;
5001 }
5002
5003 var bookKeeping = getTopLevelCallbackBookKeeping(topLevelType, nativeEvent, targetInst);
5004
5005 try {
5006 // Event queue being processed in the same cycle allows
5007 // `preventDefault`.
5008 batchedUpdates(handleTopLevel, bookKeeping);
5009 } finally {
5010 releaseTopLevelCallbackBookKeeping(bookKeeping);
5011 }
5012}
5013
5014/**
5015 * Summary of `ReactBrowserEventEmitter` event handling:
5016 *
5017 * - Top-level delegation is used to trap most native browser events. This
5018 * may only occur in the main thread and is the responsibility of
5019 * ReactDOMEventListener, which is injected and can therefore support
5020 * pluggable event sources. This is the only work that occurs in the main
5021 * thread.
5022 *
5023 * - We normalize and de-duplicate events to account for browser quirks. This
5024 * may be done in the worker thread.
5025 *
5026 * - Forward these native events (with the associated top-level type used to
5027 * trap it) to `EventPluginHub`, which in turn will ask plugins if they want
5028 * to extract any synthetic events.
5029 *
5030 * - The `EventPluginHub` will then process each event by annotating them with
5031 * "dispatches", a sequence of listeners and IDs that care about that event.
5032 *
5033 * - The `EventPluginHub` then dispatches the events.
5034 *
5035 * Overview of React and the event system:
5036 *
5037 * +------------+ .
5038 * | DOM | .
5039 * +------------+ .
5040 * | .
5041 * v .
5042 * +------------+ .
5043 * | ReactEvent | .
5044 * | Listener | .
5045 * +------------+ . +-----------+
5046 * | . +--------+|SimpleEvent|
5047 * | . | |Plugin |
5048 * +-----|------+ . v +-----------+
5049 * | | | . +--------------+ +------------+
5050 * | +-----------.--->|EventPluginHub| | Event |
5051 * | | . | | +-----------+ | Propagators|
5052 * | ReactEvent | . | | |TapEvent | |------------|
5053 * | Emitter | . | |<---+|Plugin | |other plugin|
5054 * | | . | | +-----------+ | utilities |
5055 * | +-----------.--->| | +------------+
5056 * | | | . +--------------+
5057 * +-----|------+ . ^ +-----------+
5058 * | . | |Enter/Leave|
5059 * + . +-------+|Plugin |
5060 * +-------------+ . +-----------+
5061 * | application | .
5062 * |-------------| .
5063 * | | .
5064 * | | .
5065 * +-------------+ .
5066 * .
5067 * React Core . General Purpose Event Plugin System
5068 */
5069
5070var alreadyListeningTo = {};
5071var reactTopListenersCounter = 0;
5072
5073/**
5074 * To ensure no conflicts with other potential React instances on the page
5075 */
5076var topListenersIDKey = '_reactListenersID' + ('' + Math.random()).slice(2);
5077
5078function getListeningForDocument(mountAt) {
5079 // In IE8, `mountAt` is a host object and doesn't have `hasOwnProperty`
5080 // directly.
5081 if (!Object.prototype.hasOwnProperty.call(mountAt, topListenersIDKey)) {
5082 mountAt[topListenersIDKey] = reactTopListenersCounter++;
5083 alreadyListeningTo[mountAt[topListenersIDKey]] = {};
5084 }
5085 return alreadyListeningTo[mountAt[topListenersIDKey]];
5086}
5087
5088/**
5089 * We listen for bubbled touch events on the document object.
5090 *
5091 * Firefox v8.01 (and possibly others) exhibited strange behavior when
5092 * mounting `onmousemove` events at some node that was not the document
5093 * element. The symptoms were that if your mouse is not moving over something
5094 * contained within that mount point (for example on the background) the
5095 * top-level listeners for `onmousemove` won't be called. However, if you
5096 * register the `mousemove` on the document object, then it will of course
5097 * catch all `mousemove`s. This along with iOS quirks, justifies restricting
5098 * top-level listeners to the document object only, at least for these
5099 * movement types of events and possibly all events.
5100 *
5101 * @see http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
5102 *
5103 * Also, `keyup`/`keypress`/`keydown` do not bubble to the window on IE, but
5104 * they bubble to document.
5105 *
5106 * @param {string} registrationName Name of listener (e.g. `onClick`).
5107 * @param {object} mountAt Container where to mount the listener
5108 */
5109function listenTo(registrationName, mountAt) {
5110 var isListening = getListeningForDocument(mountAt);
5111 var dependencies = registrationNameDependencies[registrationName];
5112
5113 for (var i = 0; i < dependencies.length; i++) {
5114 var dependency = dependencies[i];
5115 if (!(isListening.hasOwnProperty(dependency) && isListening[dependency])) {
5116 switch (dependency) {
5117 case TOP_SCROLL:
5118 trapCapturedEvent(TOP_SCROLL, mountAt);
5119 break;
5120 case TOP_FOCUS:
5121 case TOP_BLUR:
5122 trapCapturedEvent(TOP_FOCUS, mountAt);
5123 trapCapturedEvent(TOP_BLUR, mountAt);
5124 // We set the flag for a single dependency later in this function,
5125 // but this ensures we mark both as attached rather than just one.
5126 isListening[TOP_BLUR] = true;
5127 isListening[TOP_FOCUS] = true;
5128 break;
5129 case TOP_CANCEL:
5130 case TOP_CLOSE:
5131 if (isEventSupported(getRawEventName(dependency))) {
5132 trapCapturedEvent(dependency, mountAt);
5133 }
5134 break;
5135 case TOP_INVALID:
5136 case TOP_SUBMIT:
5137 case TOP_RESET:
5138 // We listen to them on the target DOM elements.
5139 // Some of them bubble so we don't want them to fire twice.
5140 break;
5141 default:
5142 // By default, listen on the top level to all non-media events.
5143 // Media events don't bubble so adding the listener wouldn't do anything.
5144 var isMediaEvent = mediaEventTypes.indexOf(dependency) !== -1;
5145 if (!isMediaEvent) {
5146 trapBubbledEvent(dependency, mountAt);
5147 }
5148 break;
5149 }
5150 isListening[dependency] = true;
5151 }
5152 }
5153}
5154
5155function isListeningToAllDependencies(registrationName, mountAt) {
5156 var isListening = getListeningForDocument(mountAt);
5157 var dependencies = registrationNameDependencies[registrationName];
5158 for (var i = 0; i < dependencies.length; i++) {
5159 var dependency = dependencies[i];
5160 if (!(isListening.hasOwnProperty(dependency) && isListening[dependency])) {
5161 return false;
5162 }
5163 }
5164 return true;
5165}
5166
5167function getActiveElement(doc) {
5168 doc = doc || (typeof document !== 'undefined' ? document : undefined);
5169 if (typeof doc === 'undefined') {
5170 return null;
5171 }
5172 try {
5173 return doc.activeElement || doc.body;
5174 } catch (e) {
5175 return doc.body;
5176 }
5177}
5178
5179/**
5180 * Given any node return the first leaf node without children.
5181 *
5182 * @param {DOMElement|DOMTextNode} node
5183 * @return {DOMElement|DOMTextNode}
5184 */
5185function getLeafNode(node) {
5186 while (node && node.firstChild) {
5187 node = node.firstChild;
5188 }
5189 return node;
5190}
5191
5192/**
5193 * Get the next sibling within a container. This will walk up the
5194 * DOM if a node's siblings have been exhausted.
5195 *
5196 * @param {DOMElement|DOMTextNode} node
5197 * @return {?DOMElement|DOMTextNode}
5198 */
5199function getSiblingNode(node) {
5200 while (node) {
5201 if (node.nextSibling) {
5202 return node.nextSibling;
5203 }
5204 node = node.parentNode;
5205 }
5206}
5207
5208/**
5209 * Get object describing the nodes which contain characters at offset.
5210 *
5211 * @param {DOMElement|DOMTextNode} root
5212 * @param {number} offset
5213 * @return {?object}
5214 */
5215function getNodeForCharacterOffset(root, offset) {
5216 var node = getLeafNode(root);
5217 var nodeStart = 0;
5218 var nodeEnd = 0;
5219
5220 while (node) {
5221 if (node.nodeType === TEXT_NODE) {
5222 nodeEnd = nodeStart + node.textContent.length;
5223
5224 if (nodeStart <= offset && nodeEnd >= offset) {
5225 return {
5226 node: node,
5227 offset: offset - nodeStart
5228 };
5229 }
5230
5231 nodeStart = nodeEnd;
5232 }
5233
5234 node = getLeafNode(getSiblingNode(node));
5235 }
5236}
5237
5238/**
5239 * @param {DOMElement} outerNode
5240 * @return {?object}
5241 */
5242function getOffsets(outerNode) {
5243 var ownerDocument = outerNode.ownerDocument;
5244
5245 var win = ownerDocument && ownerDocument.defaultView || window;
5246 var selection = win.getSelection && win.getSelection();
5247
5248 if (!selection || selection.rangeCount === 0) {
5249 return null;
5250 }
5251
5252 var anchorNode = selection.anchorNode,
5253 anchorOffset = selection.anchorOffset,
5254 focusNode = selection.focusNode,
5255 focusOffset = selection.focusOffset;
5256
5257 // In Firefox, anchorNode and focusNode can be "anonymous divs", e.g. the
5258 // up/down buttons on an <input type="number">. Anonymous divs do not seem to
5259 // expose properties, triggering a "Permission denied error" if any of its
5260 // properties are accessed. The only seemingly possible way to avoid erroring
5261 // is to access a property that typically works for non-anonymous divs and
5262 // catch any error that may otherwise arise. See
5263 // https://bugzilla.mozilla.org/show_bug.cgi?id=208427
5264
5265 try {
5266 /* eslint-disable no-unused-expressions */
5267 anchorNode.nodeType;
5268 focusNode.nodeType;
5269 /* eslint-enable no-unused-expressions */
5270 } catch (e) {
5271 return null;
5272 }
5273
5274 return getModernOffsetsFromPoints(outerNode, anchorNode, anchorOffset, focusNode, focusOffset);
5275}
5276
5277/**
5278 * Returns {start, end} where `start` is the character/codepoint index of
5279 * (anchorNode, anchorOffset) within the textContent of `outerNode`, and
5280 * `end` is the index of (focusNode, focusOffset).
5281 *
5282 * Returns null if you pass in garbage input but we should probably just crash.
5283 *
5284 * Exported only for testing.
5285 */
5286function getModernOffsetsFromPoints(outerNode, anchorNode, anchorOffset, focusNode, focusOffset) {
5287 var length = 0;
5288 var start = -1;
5289 var end = -1;
5290 var indexWithinAnchor = 0;
5291 var indexWithinFocus = 0;
5292 var node = outerNode;
5293 var parentNode = null;
5294
5295 outer: while (true) {
5296 var next = null;
5297
5298 while (true) {
5299 if (node === anchorNode && (anchorOffset === 0 || node.nodeType === TEXT_NODE)) {
5300 start = length + anchorOffset;
5301 }
5302 if (node === focusNode && (focusOffset === 0 || node.nodeType === TEXT_NODE)) {
5303 end = length + focusOffset;
5304 }
5305
5306 if (node.nodeType === TEXT_NODE) {
5307 length += node.nodeValue.length;
5308 }
5309
5310 if ((next = node.firstChild) === null) {
5311 break;
5312 }
5313 // Moving from `node` to its first child `next`.
5314 parentNode = node;
5315 node = next;
5316 }
5317
5318 while (true) {
5319 if (node === outerNode) {
5320 // If `outerNode` has children, this is always the second time visiting
5321 // it. If it has no children, this is still the first loop, and the only
5322 // valid selection is anchorNode and focusNode both equal to this node
5323 // and both offsets 0, in which case we will have handled above.
5324 break outer;
5325 }
5326 if (parentNode === anchorNode && ++indexWithinAnchor === anchorOffset) {
5327 start = length;
5328 }
5329 if (parentNode === focusNode && ++indexWithinFocus === focusOffset) {
5330 end = length;
5331 }
5332 if ((next = node.nextSibling) !== null) {
5333 break;
5334 }
5335 node = parentNode;
5336 parentNode = node.parentNode;
5337 }
5338
5339 // Moving from `node` to its next sibling `next`.
5340 node = next;
5341 }
5342
5343 if (start === -1 || end === -1) {
5344 // This should never happen. (Would happen if the anchor/focus nodes aren't
5345 // actually inside the passed-in node.)
5346 return null;
5347 }
5348
5349 return {
5350 start: start,
5351 end: end
5352 };
5353}
5354
5355/**
5356 * In modern non-IE browsers, we can support both forward and backward
5357 * selections.
5358 *
5359 * Note: IE10+ supports the Selection object, but it does not support
5360 * the `extend` method, which means that even in modern IE, it's not possible
5361 * to programmatically create a backward selection. Thus, for all IE
5362 * versions, we use the old IE API to create our selections.
5363 *
5364 * @param {DOMElement|DOMTextNode} node
5365 * @param {object} offsets
5366 */
5367function setOffsets(node, offsets) {
5368 var doc = node.ownerDocument || document;
5369 var win = doc && doc.defaultView || window;
5370
5371 // Edge fails with "Object expected" in some scenarios.
5372 // (For instance: TinyMCE editor used in a list component that supports pasting to add more,
5373 // fails when pasting 100+ items)
5374 if (!win.getSelection) {
5375 return;
5376 }
5377
5378 var selection = win.getSelection();
5379 var length = node.textContent.length;
5380 var start = Math.min(offsets.start, length);
5381 var end = offsets.end === undefined ? start : Math.min(offsets.end, length);
5382
5383 // IE 11 uses modern selection, but doesn't support the extend method.
5384 // Flip backward selections, so we can set with a single range.
5385 if (!selection.extend && start > end) {
5386 var temp = end;
5387 end = start;
5388 start = temp;
5389 }
5390
5391 var startMarker = getNodeForCharacterOffset(node, start);
5392 var endMarker = getNodeForCharacterOffset(node, end);
5393
5394 if (startMarker && endMarker) {
5395 if (selection.rangeCount === 1 && selection.anchorNode === startMarker.node && selection.anchorOffset === startMarker.offset && selection.focusNode === endMarker.node && selection.focusOffset === endMarker.offset) {
5396 return;
5397 }
5398 var range = doc.createRange();
5399 range.setStart(startMarker.node, startMarker.offset);
5400 selection.removeAllRanges();
5401
5402 if (start > end) {
5403 selection.addRange(range);
5404 selection.extend(endMarker.node, endMarker.offset);
5405 } else {
5406 range.setEnd(endMarker.node, endMarker.offset);
5407 selection.addRange(range);
5408 }
5409 }
5410}
5411
5412function isTextNode(node) {
5413 return node && node.nodeType === TEXT_NODE;
5414}
5415
5416function containsNode(outerNode, innerNode) {
5417 if (!outerNode || !innerNode) {
5418 return false;
5419 } else if (outerNode === innerNode) {
5420 return true;
5421 } else if (isTextNode(outerNode)) {
5422 return false;
5423 } else if (isTextNode(innerNode)) {
5424 return containsNode(outerNode, innerNode.parentNode);
5425 } else if ('contains' in outerNode) {
5426 return outerNode.contains(innerNode);
5427 } else if (outerNode.compareDocumentPosition) {
5428 return !!(outerNode.compareDocumentPosition(innerNode) & 16);
5429 } else {
5430 return false;
5431 }
5432}
5433
5434function isInDocument(node) {
5435 return node && node.ownerDocument && containsNode(node.ownerDocument.documentElement, node);
5436}
5437
5438function isSameOriginFrame(iframe) {
5439 try {
5440 // Accessing the contentDocument of a HTMLIframeElement can cause the browser
5441 // to throw, e.g. if it has a cross-origin src attribute.
5442 // Safari will show an error in the console when the access results in "Blocked a frame with origin". e.g:
5443 // iframe.contentDocument.defaultView;
5444 // A safety way is to access one of the cross origin properties: Window or Location
5445 // Which might result in "SecurityError" DOM Exception and it is compatible to Safari.
5446 // https://html.spec.whatwg.org/multipage/browsers.html#integration-with-idl
5447
5448 return typeof iframe.contentWindow.location.href === 'string';
5449 } catch (err) {
5450 return false;
5451 }
5452}
5453
5454function getActiveElementDeep() {
5455 var win = window;
5456 var element = getActiveElement();
5457 while (element instanceof win.HTMLIFrameElement) {
5458 if (isSameOriginFrame(element)) {
5459 win = element.contentWindow;
5460 } else {
5461 return element;
5462 }
5463 element = getActiveElement(win.document);
5464 }
5465 return element;
5466}
5467
5468/**
5469 * @ReactInputSelection: React input selection module. Based on Selection.js,
5470 * but modified to be suitable for react and has a couple of bug fixes (doesn't
5471 * assume buttons have range selections allowed).
5472 * Input selection module for React.
5473 */
5474
5475/**
5476 * @hasSelectionCapabilities: we get the element types that support selection
5477 * from https://html.spec.whatwg.org/#do-not-apply, looking at `selectionStart`
5478 * and `selectionEnd` rows.
5479 */
5480function hasSelectionCapabilities(elem) {
5481 var nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
5482 return nodeName && (nodeName === 'input' && (elem.type === 'text' || elem.type === 'search' || elem.type === 'tel' || elem.type === 'url' || elem.type === 'password') || nodeName === 'textarea' || elem.contentEditable === 'true');
5483}
5484
5485function getSelectionInformation() {
5486 var focusedElem = getActiveElementDeep();
5487 return {
5488 focusedElem: focusedElem,
5489 selectionRange: hasSelectionCapabilities(focusedElem) ? getSelection$1(focusedElem) : null
5490 };
5491}
5492
5493/**
5494 * @restoreSelection: If any selection information was potentially lost,
5495 * restore it. This is useful when performing operations that could remove dom
5496 * nodes and place them back in, resulting in focus being lost.
5497 */
5498function restoreSelection(priorSelectionInformation) {
5499 var curFocusedElem = getActiveElementDeep();
5500 var priorFocusedElem = priorSelectionInformation.focusedElem;
5501 var priorSelectionRange = priorSelectionInformation.selectionRange;
5502 if (curFocusedElem !== priorFocusedElem && isInDocument(priorFocusedElem)) {
5503 if (priorSelectionRange !== null && hasSelectionCapabilities(priorFocusedElem)) {
5504 setSelection(priorFocusedElem, priorSelectionRange);
5505 }
5506
5507 // Focusing a node can change the scroll position, which is undesirable
5508 var ancestors = [];
5509 var ancestor = priorFocusedElem;
5510 while (ancestor = ancestor.parentNode) {
5511 if (ancestor.nodeType === ELEMENT_NODE) {
5512 ancestors.push({
5513 element: ancestor,
5514 left: ancestor.scrollLeft,
5515 top: ancestor.scrollTop
5516 });
5517 }
5518 }
5519
5520 if (typeof priorFocusedElem.focus === 'function') {
5521 priorFocusedElem.focus();
5522 }
5523
5524 for (var i = 0; i < ancestors.length; i++) {
5525 var info = ancestors[i];
5526 info.element.scrollLeft = info.left;
5527 info.element.scrollTop = info.top;
5528 }
5529 }
5530}
5531
5532/**
5533 * @getSelection: Gets the selection bounds of a focused textarea, input or
5534 * contentEditable node.
5535 * -@input: Look up selection bounds of this input
5536 * -@return {start: selectionStart, end: selectionEnd}
5537 */
5538function getSelection$1(input) {
5539 var selection = void 0;
5540
5541 if ('selectionStart' in input) {
5542 // Modern browser with input or textarea.
5543 selection = {
5544 start: input.selectionStart,
5545 end: input.selectionEnd
5546 };
5547 } else {
5548 // Content editable or old IE textarea.
5549 selection = getOffsets(input);
5550 }
5551
5552 return selection || { start: 0, end: 0 };
5553}
5554
5555/**
5556 * @setSelection: Sets the selection bounds of a textarea or input and focuses
5557 * the input.
5558 * -@input Set selection bounds of this input or textarea
5559 * -@offsets Object of same form that is returned from get*
5560 */
5561function setSelection(input, offsets) {
5562 var start = offsets.start,
5563 end = offsets.end;
5564
5565 if (end === undefined) {
5566 end = start;
5567 }
5568
5569 if ('selectionStart' in input) {
5570 input.selectionStart = start;
5571 input.selectionEnd = Math.min(end, input.value.length);
5572 } else {
5573 setOffsets(input, offsets);
5574 }
5575}
5576
5577var skipSelectionChangeEvent = canUseDOM && 'documentMode' in document && document.documentMode <= 11;
5578
5579var eventTypes$3 = {
5580 select: {
5581 phasedRegistrationNames: {
5582 bubbled: 'onSelect',
5583 captured: 'onSelectCapture'
5584 },
5585 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]
5586 }
5587};
5588
5589var activeElement$1 = null;
5590var activeElementInst$1 = null;
5591var lastSelection = null;
5592var mouseDown = false;
5593
5594/**
5595 * Get an object which is a unique representation of the current selection.
5596 *
5597 * The return value will not be consistent across nodes or browsers, but
5598 * two identical selections on the same node will return identical objects.
5599 *
5600 * @param {DOMElement} node
5601 * @return {object}
5602 */
5603function getSelection(node) {
5604 if ('selectionStart' in node && hasSelectionCapabilities(node)) {
5605 return {
5606 start: node.selectionStart,
5607 end: node.selectionEnd
5608 };
5609 } else {
5610 var win = node.ownerDocument && node.ownerDocument.defaultView || window;
5611 var selection = win.getSelection();
5612 return {
5613 anchorNode: selection.anchorNode,
5614 anchorOffset: selection.anchorOffset,
5615 focusNode: selection.focusNode,
5616 focusOffset: selection.focusOffset
5617 };
5618 }
5619}
5620
5621/**
5622 * Get document associated with the event target.
5623 *
5624 * @param {object} nativeEventTarget
5625 * @return {Document}
5626 */
5627function getEventTargetDocument(eventTarget) {
5628 return eventTarget.window === eventTarget ? eventTarget.document : eventTarget.nodeType === DOCUMENT_NODE ? eventTarget : eventTarget.ownerDocument;
5629}
5630
5631/**
5632 * Poll selection to see whether it's changed.
5633 *
5634 * @param {object} nativeEvent
5635 * @param {object} nativeEventTarget
5636 * @return {?SyntheticEvent}
5637 */
5638function constructSelectEvent(nativeEvent, nativeEventTarget) {
5639 // Ensure we have the right element, and that the user is not dragging a
5640 // selection (this matches native `select` event behavior). In HTML5, select
5641 // fires only on input and textarea thus if there's no focused element we
5642 // won't dispatch.
5643 var doc = getEventTargetDocument(nativeEventTarget);
5644
5645 if (mouseDown || activeElement$1 == null || activeElement$1 !== getActiveElement(doc)) {
5646 return null;
5647 }
5648
5649 // Only fire when selection has actually changed.
5650 var currentSelection = getSelection(activeElement$1);
5651 if (!lastSelection || !shallowEqual(lastSelection, currentSelection)) {
5652 lastSelection = currentSelection;
5653
5654 var syntheticEvent = SyntheticEvent.getPooled(eventTypes$3.select, activeElementInst$1, nativeEvent, nativeEventTarget);
5655
5656 syntheticEvent.type = 'select';
5657 syntheticEvent.target = activeElement$1;
5658
5659 accumulateTwoPhaseDispatches(syntheticEvent);
5660
5661 return syntheticEvent;
5662 }
5663
5664 return null;
5665}
5666
5667/**
5668 * This plugin creates an `onSelect` event that normalizes select events
5669 * across form elements.
5670 *
5671 * Supported elements are:
5672 * - input (see `isTextInputElement`)
5673 * - textarea
5674 * - contentEditable
5675 *
5676 * This differs from native browser implementations in the following ways:
5677 * - Fires on contentEditable fields as well as inputs.
5678 * - Fires for collapsed selection.
5679 * - Fires after user input.
5680 */
5681var SelectEventPlugin = {
5682 eventTypes: eventTypes$3,
5683
5684 extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
5685 var doc = getEventTargetDocument(nativeEventTarget);
5686 // Track whether all listeners exists for this plugin. If none exist, we do
5687 // not extract events. See #3639.
5688 if (!doc || !isListeningToAllDependencies('onSelect', doc)) {
5689 return null;
5690 }
5691
5692 var targetNode = targetInst ? getNodeFromInstance$1(targetInst) : window;
5693
5694 switch (topLevelType) {
5695 // Track the input node that has focus.
5696 case TOP_FOCUS:
5697 if (isTextInputElement(targetNode) || targetNode.contentEditable === 'true') {
5698 activeElement$1 = targetNode;
5699 activeElementInst$1 = targetInst;
5700 lastSelection = null;
5701 }
5702 break;
5703 case TOP_BLUR:
5704 activeElement$1 = null;
5705 activeElementInst$1 = null;
5706 lastSelection = null;
5707 break;
5708 // Don't fire the event while the user is dragging. This matches the
5709 // semantics of the native select event.
5710 case TOP_MOUSE_DOWN:
5711 mouseDown = true;
5712 break;
5713 case TOP_CONTEXT_MENU:
5714 case TOP_MOUSE_UP:
5715 case TOP_DRAG_END:
5716 mouseDown = false;
5717 return constructSelectEvent(nativeEvent, nativeEventTarget);
5718 // Chrome and IE fire non-standard event when selection is changed (and
5719 // sometimes when it hasn't). IE's event fires out of order with respect
5720 // to key and input events on deletion, so we discard it.
5721 //
5722 // Firefox doesn't support selectionchange, so check selection status
5723 // after each key entry. The selection changes after keydown and before
5724 // keyup, but we check on keydown as well in the case of holding down a
5725 // key, when multiple keydown events are fired but only one keyup is.
5726 // This is also our approach for IE handling, for the reason above.
5727 case TOP_SELECTION_CHANGE:
5728 if (skipSelectionChangeEvent) {
5729 break;
5730 }
5731 // falls through
5732 case TOP_KEY_DOWN:
5733 case TOP_KEY_UP:
5734 return constructSelectEvent(nativeEvent, nativeEventTarget);
5735 }
5736
5737 return null;
5738 }
5739};
5740
5741/**
5742 * Inject modules for resolving DOM hierarchy and plugin ordering.
5743 */
5744injection.injectEventPluginOrder(DOMEventPluginOrder);
5745setComponentTree(getFiberCurrentPropsFromNode$1, getInstanceFromNode$1, getNodeFromInstance$1);
5746
5747/**
5748 * Some important event plugins included by default (without having to require
5749 * them).
5750 */
5751injection.injectEventPluginsByName({
5752 SimpleEventPlugin: SimpleEventPlugin,
5753 EnterLeaveEventPlugin: EnterLeaveEventPlugin,
5754 ChangeEventPlugin: ChangeEventPlugin,
5755 SelectEventPlugin: SelectEventPlugin,
5756 BeforeInputEventPlugin: BeforeInputEventPlugin
5757});
5758
5759var didWarnSelectedSetOnOption = false;
5760var didWarnInvalidChild = false;
5761
5762function flattenChildren(children) {
5763 var content = '';
5764
5765 // Flatten children. We'll warn if they are invalid
5766 // during validateProps() which runs for hydration too.
5767 // Note that this would throw on non-element objects.
5768 // Elements are stringified (which is normally irrelevant
5769 // but matters for <fbt>).
5770 React.Children.forEach(children, function (child) {
5771 if (child == null) {
5772 return;
5773 }
5774 content += child;
5775 // Note: we don't warn about invalid children here.
5776 // Instead, this is done separately below so that
5777 // it happens during the hydration codepath too.
5778 });
5779
5780 return content;
5781}
5782
5783/**
5784 * Implements an <option> host component that warns when `selected` is set.
5785 */
5786
5787function validateProps(element, props) {
5788 {
5789 // This mirrors the codepath above, but runs for hydration too.
5790 // Warn about invalid children here so that client and hydration are consistent.
5791 // TODO: this seems like it could cause a DEV-only throw for hydration
5792 // if children contains a non-element object. We should try to avoid that.
5793 if (typeof props.children === 'object' && props.children !== null) {
5794 React.Children.forEach(props.children, function (child) {
5795 if (child == null) {
5796 return;
5797 }
5798 if (typeof child === 'string' || typeof child === 'number') {
5799 return;
5800 }
5801 if (typeof child.type !== 'string') {
5802 return;
5803 }
5804 if (!didWarnInvalidChild) {
5805 didWarnInvalidChild = true;
5806 warning$1(false, 'Only strings and numbers are supported as <option> children.');
5807 }
5808 });
5809 }
5810
5811 // TODO: Remove support for `selected` in <option>.
5812 if (props.selected != null && !didWarnSelectedSetOnOption) {
5813 warning$1(false, 'Use the `defaultValue` or `value` props on <select> instead of ' + 'setting `selected` on <option>.');
5814 didWarnSelectedSetOnOption = true;
5815 }
5816 }
5817}
5818
5819function postMountWrapper$1(element, props) {
5820 // value="" should make a value attribute (#6219)
5821 if (props.value != null) {
5822 element.setAttribute('value', toString(getToStringValue(props.value)));
5823 }
5824}
5825
5826function getHostProps$1(element, props) {
5827 var hostProps = _assign({ children: undefined }, props);
5828 var content = flattenChildren(props.children);
5829
5830 if (content) {
5831 hostProps.children = content;
5832 }
5833
5834 return hostProps;
5835}
5836
5837// TODO: direct imports like some-package/src/* are bad. Fix me.
5838var didWarnValueDefaultValue$1 = void 0;
5839
5840{
5841 didWarnValueDefaultValue$1 = false;
5842}
5843
5844function getDeclarationErrorAddendum() {
5845 var ownerName = getCurrentFiberOwnerNameInDevOrNull();
5846 if (ownerName) {
5847 return '\n\nCheck the render method of `' + ownerName + '`.';
5848 }
5849 return '';
5850}
5851
5852var valuePropNames = ['value', 'defaultValue'];
5853
5854/**
5855 * Validation function for `value` and `defaultValue`.
5856 */
5857function checkSelectPropTypes(props) {
5858 ReactControlledValuePropTypes.checkPropTypes('select', props);
5859
5860 for (var i = 0; i < valuePropNames.length; i++) {
5861 var propName = valuePropNames[i];
5862 if (props[propName] == null) {
5863 continue;
5864 }
5865 var isArray = Array.isArray(props[propName]);
5866 if (props.multiple && !isArray) {
5867 warning$1(false, 'The `%s` prop supplied to <select> must be an array if ' + '`multiple` is true.%s', propName, getDeclarationErrorAddendum());
5868 } else if (!props.multiple && isArray) {
5869 warning$1(false, 'The `%s` prop supplied to <select> must be a scalar ' + 'value if `multiple` is false.%s', propName, getDeclarationErrorAddendum());
5870 }
5871 }
5872}
5873
5874function updateOptions(node, multiple, propValue, setDefaultSelected) {
5875 var options = node.options;
5876
5877 if (multiple) {
5878 var selectedValues = propValue;
5879 var selectedValue = {};
5880 for (var i = 0; i < selectedValues.length; i++) {
5881 // Prefix to avoid chaos with special keys.
5882 selectedValue['$' + selectedValues[i]] = true;
5883 }
5884 for (var _i = 0; _i < options.length; _i++) {
5885 var selected = selectedValue.hasOwnProperty('$' + options[_i].value);
5886 if (options[_i].selected !== selected) {
5887 options[_i].selected = selected;
5888 }
5889 if (selected && setDefaultSelected) {
5890 options[_i].defaultSelected = true;
5891 }
5892 }
5893 } else {
5894 // Do not set `select.value` as exact behavior isn't consistent across all
5895 // browsers for all cases.
5896 var _selectedValue = toString(getToStringValue(propValue));
5897 var defaultSelected = null;
5898 for (var _i2 = 0; _i2 < options.length; _i2++) {
5899 if (options[_i2].value === _selectedValue) {
5900 options[_i2].selected = true;
5901 if (setDefaultSelected) {
5902 options[_i2].defaultSelected = true;
5903 }
5904 return;
5905 }
5906 if (defaultSelected === null && !options[_i2].disabled) {
5907 defaultSelected = options[_i2];
5908 }
5909 }
5910 if (defaultSelected !== null) {
5911 defaultSelected.selected = true;
5912 }
5913 }
5914}
5915
5916/**
5917 * Implements a <select> host component that allows optionally setting the
5918 * props `value` and `defaultValue`. If `multiple` is false, the prop must be a
5919 * stringable. If `multiple` is true, the prop must be an array of stringables.
5920 *
5921 * If `value` is not supplied (or null/undefined), user actions that change the
5922 * selected option will trigger updates to the rendered options.
5923 *
5924 * If it is supplied (and not null/undefined), the rendered options will not
5925 * update in response to user actions. Instead, the `value` prop must change in
5926 * order for the rendered options to update.
5927 *
5928 * If `defaultValue` is provided, any options with the supplied values will be
5929 * selected.
5930 */
5931
5932function getHostProps$2(element, props) {
5933 return _assign({}, props, {
5934 value: undefined
5935 });
5936}
5937
5938function initWrapperState$1(element, props) {
5939 var node = element;
5940 {
5941 checkSelectPropTypes(props);
5942 }
5943
5944 node._wrapperState = {
5945 wasMultiple: !!props.multiple
5946 };
5947
5948 {
5949 if (props.value !== undefined && props.defaultValue !== undefined && !didWarnValueDefaultValue$1) {
5950 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');
5951 didWarnValueDefaultValue$1 = true;
5952 }
5953 }
5954}
5955
5956function postMountWrapper$2(element, props) {
5957 var node = element;
5958 node.multiple = !!props.multiple;
5959 var value = props.value;
5960 if (value != null) {
5961 updateOptions(node, !!props.multiple, value, false);
5962 } else if (props.defaultValue != null) {
5963 updateOptions(node, !!props.multiple, props.defaultValue, true);
5964 }
5965}
5966
5967function postUpdateWrapper(element, props) {
5968 var node = element;
5969 var wasMultiple = node._wrapperState.wasMultiple;
5970 node._wrapperState.wasMultiple = !!props.multiple;
5971
5972 var value = props.value;
5973 if (value != null) {
5974 updateOptions(node, !!props.multiple, value, false);
5975 } else if (wasMultiple !== !!props.multiple) {
5976 // For simplicity, reapply `defaultValue` if `multiple` is toggled.
5977 if (props.defaultValue != null) {
5978 updateOptions(node, !!props.multiple, props.defaultValue, true);
5979 } else {
5980 // Revert the select back to its default unselected state.
5981 updateOptions(node, !!props.multiple, props.multiple ? [] : '', false);
5982 }
5983 }
5984}
5985
5986function restoreControlledState$2(element, props) {
5987 var node = element;
5988 var value = props.value;
5989
5990 if (value != null) {
5991 updateOptions(node, !!props.multiple, value, false);
5992 }
5993}
5994
5995var didWarnValDefaultVal = false;
5996
5997/**
5998 * Implements a <textarea> host component that allows setting `value`, and
5999 * `defaultValue`. This differs from the traditional DOM API because value is
6000 * usually set as PCDATA children.
6001 *
6002 * If `value` is not supplied (or null/undefined), user actions that affect the
6003 * value will trigger updates to the element.
6004 *
6005 * If `value` is supplied (and not null/undefined), the rendered element will
6006 * not trigger updates to the element. Instead, the `value` prop must change in
6007 * order for the rendered element to be updated.
6008 *
6009 * The rendered element will be initialized with an empty value, the prop
6010 * `defaultValue` if specified, or the children content (deprecated).
6011 */
6012
6013function getHostProps$3(element, props) {
6014 var node = element;
6015 !(props.dangerouslySetInnerHTML == null) ? invariant(false, '`dangerouslySetInnerHTML` does not make sense on <textarea>.') : void 0;
6016
6017 // Always set children to the same thing. In IE9, the selection range will
6018 // get reset if `textContent` is mutated. We could add a check in setTextContent
6019 // to only set the value if/when the value differs from the node value (which would
6020 // completely solve this IE9 bug), but Sebastian+Sophie seemed to like this
6021 // solution. The value can be a boolean or object so that's why it's forced
6022 // to be a string.
6023 var hostProps = _assign({}, props, {
6024 value: undefined,
6025 defaultValue: undefined,
6026 children: toString(node._wrapperState.initialValue)
6027 });
6028
6029 return hostProps;
6030}
6031
6032function initWrapperState$2(element, props) {
6033 var node = element;
6034 {
6035 ReactControlledValuePropTypes.checkPropTypes('textarea', props);
6036 if (props.value !== undefined && props.defaultValue !== undefined && !didWarnValDefaultVal) {
6037 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');
6038 didWarnValDefaultVal = true;
6039 }
6040 }
6041
6042 var initialValue = props.value;
6043
6044 // Only bother fetching default value if we're going to use it
6045 if (initialValue == null) {
6046 var defaultValue = props.defaultValue;
6047 // TODO (yungsters): Remove support for children content in <textarea>.
6048 var children = props.children;
6049 if (children != null) {
6050 {
6051 warning$1(false, 'Use the `defaultValue` or `value` props instead of setting ' + 'children on <textarea>.');
6052 }
6053 !(defaultValue == null) ? invariant(false, 'If you supply `defaultValue` on a <textarea>, do not pass children.') : void 0;
6054 if (Array.isArray(children)) {
6055 !(children.length <= 1) ? invariant(false, '<textarea> can only have at most one child.') : void 0;
6056 children = children[0];
6057 }
6058
6059 defaultValue = children;
6060 }
6061 if (defaultValue == null) {
6062 defaultValue = '';
6063 }
6064 initialValue = defaultValue;
6065 }
6066
6067 node._wrapperState = {
6068 initialValue: getToStringValue(initialValue)
6069 };
6070}
6071
6072function updateWrapper$1(element, props) {
6073 var node = element;
6074 var value = getToStringValue(props.value);
6075 var defaultValue = getToStringValue(props.defaultValue);
6076 if (value != null) {
6077 // Cast `value` to a string to ensure the value is set correctly. While
6078 // browsers typically do this as necessary, jsdom doesn't.
6079 var newValue = toString(value);
6080 // To avoid side effects (such as losing text selection), only set value if changed
6081 if (newValue !== node.value) {
6082 node.value = newValue;
6083 }
6084 if (props.defaultValue == null && node.defaultValue !== newValue) {
6085 node.defaultValue = newValue;
6086 }
6087 }
6088 if (defaultValue != null) {
6089 node.defaultValue = toString(defaultValue);
6090 }
6091}
6092
6093function postMountWrapper$3(element, props) {
6094 var node = element;
6095 // This is in postMount because we need access to the DOM node, which is not
6096 // available until after the component has mounted.
6097 var textContent = node.textContent;
6098
6099 // Only set node.value if textContent is equal to the expected
6100 // initial value. In IE10/IE11 there is a bug where the placeholder attribute
6101 // will populate textContent as well.
6102 // https://developer.microsoft.com/microsoft-edge/platform/issues/101525/
6103 if (textContent === node._wrapperState.initialValue) {
6104 node.value = textContent;
6105 }
6106}
6107
6108function restoreControlledState$3(element, props) {
6109 // DOM component is still mounted; update
6110 updateWrapper$1(element, props);
6111}
6112
6113var HTML_NAMESPACE$1 = 'http://www.w3.org/1999/xhtml';
6114var MATH_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';
6115var SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
6116
6117var Namespaces = {
6118 html: HTML_NAMESPACE$1,
6119 mathml: MATH_NAMESPACE,
6120 svg: SVG_NAMESPACE
6121};
6122
6123// Assumes there is no parent namespace.
6124function getIntrinsicNamespace(type) {
6125 switch (type) {
6126 case 'svg':
6127 return SVG_NAMESPACE;
6128 case 'math':
6129 return MATH_NAMESPACE;
6130 default:
6131 return HTML_NAMESPACE$1;
6132 }
6133}
6134
6135function getChildNamespace(parentNamespace, type) {
6136 if (parentNamespace == null || parentNamespace === HTML_NAMESPACE$1) {
6137 // No (or default) parent namespace: potential entry point.
6138 return getIntrinsicNamespace(type);
6139 }
6140 if (parentNamespace === SVG_NAMESPACE && type === 'foreignObject') {
6141 // We're leaving SVG.
6142 return HTML_NAMESPACE$1;
6143 }
6144 // By default, pass namespace below.
6145 return parentNamespace;
6146}
6147
6148/* globals MSApp */
6149
6150/**
6151 * Create a function which has 'unsafe' privileges (required by windows8 apps)
6152 */
6153var createMicrosoftUnsafeLocalFunction = function (func) {
6154 if (typeof MSApp !== 'undefined' && MSApp.execUnsafeLocalFunction) {
6155 return function (arg0, arg1, arg2, arg3) {
6156 MSApp.execUnsafeLocalFunction(function () {
6157 return func(arg0, arg1, arg2, arg3);
6158 });
6159 };
6160 } else {
6161 return func;
6162 }
6163};
6164
6165// SVG temp container for IE lacking innerHTML
6166var reusableSVGContainer = void 0;
6167
6168/**
6169 * Set the innerHTML property of a node
6170 *
6171 * @param {DOMElement} node
6172 * @param {string} html
6173 * @internal
6174 */
6175var setInnerHTML = createMicrosoftUnsafeLocalFunction(function (node, html) {
6176 // IE does not have innerHTML for SVG nodes, so instead we inject the
6177 // new markup in a temp node and then move the child nodes across into
6178 // the target node
6179
6180 if (node.namespaceURI === Namespaces.svg && !('innerHTML' in node)) {
6181 reusableSVGContainer = reusableSVGContainer || document.createElement('div');
6182 reusableSVGContainer.innerHTML = '<svg>' + html + '</svg>';
6183 var svgNode = reusableSVGContainer.firstChild;
6184 while (node.firstChild) {
6185 node.removeChild(node.firstChild);
6186 }
6187 while (svgNode.firstChild) {
6188 node.appendChild(svgNode.firstChild);
6189 }
6190 } else {
6191 node.innerHTML = html;
6192 }
6193});
6194
6195/**
6196 * Set the textContent property of a node. For text updates, it's faster
6197 * to set the `nodeValue` of the Text node directly instead of using
6198 * `.textContent` which will remove the existing node and create a new one.
6199 *
6200 * @param {DOMElement} node
6201 * @param {string} text
6202 * @internal
6203 */
6204var setTextContent = function (node, text) {
6205 if (text) {
6206 var firstChild = node.firstChild;
6207
6208 if (firstChild && firstChild === node.lastChild && firstChild.nodeType === TEXT_NODE) {
6209 firstChild.nodeValue = text;
6210 return;
6211 }
6212 }
6213 node.textContent = text;
6214};
6215
6216// List derived from Gecko source code:
6217// https://github.com/mozilla/gecko-dev/blob/4e638efc71/layout/style/test/property_database.js
6218var shorthandToLonghand = {
6219 animation: ['animationDelay', 'animationDirection', 'animationDuration', 'animationFillMode', 'animationIterationCount', 'animationName', 'animationPlayState', 'animationTimingFunction'],
6220 background: ['backgroundAttachment', 'backgroundClip', 'backgroundColor', 'backgroundImage', 'backgroundOrigin', 'backgroundPositionX', 'backgroundPositionY', 'backgroundRepeat', 'backgroundSize'],
6221 backgroundPosition: ['backgroundPositionX', 'backgroundPositionY'],
6222 border: ['borderBottomColor', 'borderBottomStyle', 'borderBottomWidth', 'borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderTopColor', 'borderTopStyle', 'borderTopWidth'],
6223 borderBlockEnd: ['borderBlockEndColor', 'borderBlockEndStyle', 'borderBlockEndWidth'],
6224 borderBlockStart: ['borderBlockStartColor', 'borderBlockStartStyle', 'borderBlockStartWidth'],
6225 borderBottom: ['borderBottomColor', 'borderBottomStyle', 'borderBottomWidth'],
6226 borderColor: ['borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor'],
6227 borderImage: ['borderImageOutset', 'borderImageRepeat', 'borderImageSlice', 'borderImageSource', 'borderImageWidth'],
6228 borderInlineEnd: ['borderInlineEndColor', 'borderInlineEndStyle', 'borderInlineEndWidth'],
6229 borderInlineStart: ['borderInlineStartColor', 'borderInlineStartStyle', 'borderInlineStartWidth'],
6230 borderLeft: ['borderLeftColor', 'borderLeftStyle', 'borderLeftWidth'],
6231 borderRadius: ['borderBottomLeftRadius', 'borderBottomRightRadius', 'borderTopLeftRadius', 'borderTopRightRadius'],
6232 borderRight: ['borderRightColor', 'borderRightStyle', 'borderRightWidth'],
6233 borderStyle: ['borderBottomStyle', 'borderLeftStyle', 'borderRightStyle', 'borderTopStyle'],
6234 borderTop: ['borderTopColor', 'borderTopStyle', 'borderTopWidth'],
6235 borderWidth: ['borderBottomWidth', 'borderLeftWidth', 'borderRightWidth', 'borderTopWidth'],
6236 columnRule: ['columnRuleColor', 'columnRuleStyle', 'columnRuleWidth'],
6237 columns: ['columnCount', 'columnWidth'],
6238 flex: ['flexBasis', 'flexGrow', 'flexShrink'],
6239 flexFlow: ['flexDirection', 'flexWrap'],
6240 font: ['fontFamily', 'fontFeatureSettings', 'fontKerning', 'fontLanguageOverride', 'fontSize', 'fontSizeAdjust', 'fontStretch', 'fontStyle', 'fontVariant', 'fontVariantAlternates', 'fontVariantCaps', 'fontVariantEastAsian', 'fontVariantLigatures', 'fontVariantNumeric', 'fontVariantPosition', 'fontWeight', 'lineHeight'],
6241 fontVariant: ['fontVariantAlternates', 'fontVariantCaps', 'fontVariantEastAsian', 'fontVariantLigatures', 'fontVariantNumeric', 'fontVariantPosition'],
6242 gap: ['columnGap', 'rowGap'],
6243 grid: ['gridAutoColumns', 'gridAutoFlow', 'gridAutoRows', 'gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows'],
6244 gridArea: ['gridColumnEnd', 'gridColumnStart', 'gridRowEnd', 'gridRowStart'],
6245 gridColumn: ['gridColumnEnd', 'gridColumnStart'],
6246 gridColumnGap: ['columnGap'],
6247 gridGap: ['columnGap', 'rowGap'],
6248 gridRow: ['gridRowEnd', 'gridRowStart'],
6249 gridRowGap: ['rowGap'],
6250 gridTemplate: ['gridTemplateAreas', 'gridTemplateColumns', 'gridTemplateRows'],
6251 listStyle: ['listStyleImage', 'listStylePosition', 'listStyleType'],
6252 margin: ['marginBottom', 'marginLeft', 'marginRight', 'marginTop'],
6253 marker: ['markerEnd', 'markerMid', 'markerStart'],
6254 mask: ['maskClip', 'maskComposite', 'maskImage', 'maskMode', 'maskOrigin', 'maskPositionX', 'maskPositionY', 'maskRepeat', 'maskSize'],
6255 maskPosition: ['maskPositionX', 'maskPositionY'],
6256 outline: ['outlineColor', 'outlineStyle', 'outlineWidth'],
6257 overflow: ['overflowX', 'overflowY'],
6258 padding: ['paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop'],
6259 placeContent: ['alignContent', 'justifyContent'],
6260 placeItems: ['alignItems', 'justifyItems'],
6261 placeSelf: ['alignSelf', 'justifySelf'],
6262 textDecoration: ['textDecorationColor', 'textDecorationLine', 'textDecorationStyle'],
6263 textEmphasis: ['textEmphasisColor', 'textEmphasisStyle'],
6264 transition: ['transitionDelay', 'transitionDuration', 'transitionProperty', 'transitionTimingFunction'],
6265 wordWrap: ['overflowWrap']
6266};
6267
6268/**
6269 * CSS properties which accept numbers but are not in units of "px".
6270 */
6271var isUnitlessNumber = {
6272 animationIterationCount: true,
6273 borderImageOutset: true,
6274 borderImageSlice: true,
6275 borderImageWidth: true,
6276 boxFlex: true,
6277 boxFlexGroup: true,
6278 boxOrdinalGroup: true,
6279 columnCount: true,
6280 columns: true,
6281 flex: true,
6282 flexGrow: true,
6283 flexPositive: true,
6284 flexShrink: true,
6285 flexNegative: true,
6286 flexOrder: true,
6287 gridArea: true,
6288 gridRow: true,
6289 gridRowEnd: true,
6290 gridRowSpan: true,
6291 gridRowStart: true,
6292 gridColumn: true,
6293 gridColumnEnd: true,
6294 gridColumnSpan: true,
6295 gridColumnStart: true,
6296 fontWeight: true,
6297 lineClamp: true,
6298 lineHeight: true,
6299 opacity: true,
6300 order: true,
6301 orphans: true,
6302 tabSize: true,
6303 widows: true,
6304 zIndex: true,
6305 zoom: true,
6306
6307 // SVG-related properties
6308 fillOpacity: true,
6309 floodOpacity: true,
6310 stopOpacity: true,
6311 strokeDasharray: true,
6312 strokeDashoffset: true,
6313 strokeMiterlimit: true,
6314 strokeOpacity: true,
6315 strokeWidth: true
6316};
6317
6318/**
6319 * @param {string} prefix vendor-specific prefix, eg: Webkit
6320 * @param {string} key style name, eg: transitionDuration
6321 * @return {string} style name prefixed with `prefix`, properly camelCased, eg:
6322 * WebkitTransitionDuration
6323 */
6324function prefixKey(prefix, key) {
6325 return prefix + key.charAt(0).toUpperCase() + key.substring(1);
6326}
6327
6328/**
6329 * Support style names that may come passed in prefixed by adding permutations
6330 * of vendor prefixes.
6331 */
6332var prefixes = ['Webkit', 'ms', 'Moz', 'O'];
6333
6334// Using Object.keys here, or else the vanilla for-in loop makes IE8 go into an
6335// infinite loop, because it iterates over the newly added props too.
6336Object.keys(isUnitlessNumber).forEach(function (prop) {
6337 prefixes.forEach(function (prefix) {
6338 isUnitlessNumber[prefixKey(prefix, prop)] = isUnitlessNumber[prop];
6339 });
6340});
6341
6342/**
6343 * Convert a value into the proper css writable value. The style name `name`
6344 * should be logical (no hyphens), as specified
6345 * in `CSSProperty.isUnitlessNumber`.
6346 *
6347 * @param {string} name CSS property name such as `topMargin`.
6348 * @param {*} value CSS property value such as `10px`.
6349 * @return {string} Normalized style value with dimensions applied.
6350 */
6351function dangerousStyleValue(name, value, isCustomProperty) {
6352 // Note that we've removed escapeTextForBrowser() calls here since the
6353 // whole string will be escaped when the attribute is injected into
6354 // the markup. If you provide unsafe user data here they can inject
6355 // arbitrary CSS which may be problematic (I couldn't repro this):
6356 // https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet
6357 // http://www.thespanner.co.uk/2007/11/26/ultimate-xss-css-injection/
6358 // This is not an XSS hole but instead a potential CSS injection issue
6359 // which has lead to a greater discussion about how we're going to
6360 // trust URLs moving forward. See #2115901
6361
6362 var isEmpty = value == null || typeof value === 'boolean' || value === '';
6363 if (isEmpty) {
6364 return '';
6365 }
6366
6367 if (!isCustomProperty && typeof value === 'number' && value !== 0 && !(isUnitlessNumber.hasOwnProperty(name) && isUnitlessNumber[name])) {
6368 return value + 'px'; // Presumes implicit 'px' suffix for unitless numbers
6369 }
6370
6371 return ('' + value).trim();
6372}
6373
6374var uppercasePattern = /([A-Z])/g;
6375var msPattern = /^ms-/;
6376
6377/**
6378 * Hyphenates a camelcased CSS property name, for example:
6379 *
6380 * > hyphenateStyleName('backgroundColor')
6381 * < "background-color"
6382 * > hyphenateStyleName('MozTransition')
6383 * < "-moz-transition"
6384 * > hyphenateStyleName('msTransition')
6385 * < "-ms-transition"
6386 *
6387 * As Modernizr suggests (http://modernizr.com/docs/#prefixed), an `ms` prefix
6388 * is converted to `-ms-`.
6389 */
6390function hyphenateStyleName(name) {
6391 return name.replace(uppercasePattern, '-$1').toLowerCase().replace(msPattern, '-ms-');
6392}
6393
6394var warnValidStyle = function () {};
6395
6396{
6397 // 'msTransform' is correct, but the other prefixes should be capitalized
6398 var badVendoredStyleNamePattern = /^(?:webkit|moz|o)[A-Z]/;
6399 var msPattern$1 = /^-ms-/;
6400 var hyphenPattern = /-(.)/g;
6401
6402 // style values shouldn't contain a semicolon
6403 var badStyleValueWithSemicolonPattern = /;\s*$/;
6404
6405 var warnedStyleNames = {};
6406 var warnedStyleValues = {};
6407 var warnedForNaNValue = false;
6408 var warnedForInfinityValue = false;
6409
6410 var camelize = function (string) {
6411 return string.replace(hyphenPattern, function (_, character) {
6412 return character.toUpperCase();
6413 });
6414 };
6415
6416 var warnHyphenatedStyleName = function (name) {
6417 if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
6418 return;
6419 }
6420
6421 warnedStyleNames[name] = true;
6422 warning$1(false, 'Unsupported style property %s. Did you mean %s?', name,
6423 // As Andi Smith suggests
6424 // (http://www.andismith.com/blog/2012/02/modernizr-prefixed/), an `-ms` prefix
6425 // is converted to lowercase `ms`.
6426 camelize(name.replace(msPattern$1, 'ms-')));
6427 };
6428
6429 var warnBadVendoredStyleName = function (name) {
6430 if (warnedStyleNames.hasOwnProperty(name) && warnedStyleNames[name]) {
6431 return;
6432 }
6433
6434 warnedStyleNames[name] = true;
6435 warning$1(false, 'Unsupported vendor-prefixed style property %s. Did you mean %s?', name, name.charAt(0).toUpperCase() + name.slice(1));
6436 };
6437
6438 var warnStyleValueWithSemicolon = function (name, value) {
6439 if (warnedStyleValues.hasOwnProperty(value) && warnedStyleValues[value]) {
6440 return;
6441 }
6442
6443 warnedStyleValues[value] = true;
6444 warning$1(false, "Style property values shouldn't contain a semicolon. " + 'Try "%s: %s" instead.', name, value.replace(badStyleValueWithSemicolonPattern, ''));
6445 };
6446
6447 var warnStyleValueIsNaN = function (name, value) {
6448 if (warnedForNaNValue) {
6449 return;
6450 }
6451
6452 warnedForNaNValue = true;
6453 warning$1(false, '`NaN` is an invalid value for the `%s` css style property.', name);
6454 };
6455
6456 var warnStyleValueIsInfinity = function (name, value) {
6457 if (warnedForInfinityValue) {
6458 return;
6459 }
6460
6461 warnedForInfinityValue = true;
6462 warning$1(false, '`Infinity` is an invalid value for the `%s` css style property.', name);
6463 };
6464
6465 warnValidStyle = function (name, value) {
6466 if (name.indexOf('-') > -1) {
6467 warnHyphenatedStyleName(name);
6468 } else if (badVendoredStyleNamePattern.test(name)) {
6469 warnBadVendoredStyleName(name);
6470 } else if (badStyleValueWithSemicolonPattern.test(value)) {
6471 warnStyleValueWithSemicolon(name, value);
6472 }
6473
6474 if (typeof value === 'number') {
6475 if (isNaN(value)) {
6476 warnStyleValueIsNaN(name, value);
6477 } else if (!isFinite(value)) {
6478 warnStyleValueIsInfinity(name, value);
6479 }
6480 }
6481 };
6482}
6483
6484var warnValidStyle$1 = warnValidStyle;
6485
6486/**
6487 * Operations for dealing with CSS properties.
6488 */
6489
6490/**
6491 * This creates a string that is expected to be equivalent to the style
6492 * attribute generated by server-side rendering. It by-passes warnings and
6493 * security checks so it's not safe to use this value for anything other than
6494 * comparison. It is only used in DEV for SSR validation.
6495 */
6496function createDangerousStringForStyles(styles) {
6497 {
6498 var serialized = '';
6499 var delimiter = '';
6500 for (var styleName in styles) {
6501 if (!styles.hasOwnProperty(styleName)) {
6502 continue;
6503 }
6504 var styleValue = styles[styleName];
6505 if (styleValue != null) {
6506 var isCustomProperty = styleName.indexOf('--') === 0;
6507 serialized += delimiter + hyphenateStyleName(styleName) + ':';
6508 serialized += dangerousStyleValue(styleName, styleValue, isCustomProperty);
6509
6510 delimiter = ';';
6511 }
6512 }
6513 return serialized || null;
6514 }
6515}
6516
6517/**
6518 * Sets the value for multiple styles on a node. If a value is specified as
6519 * '' (empty string), the corresponding style property will be unset.
6520 *
6521 * @param {DOMElement} node
6522 * @param {object} styles
6523 */
6524function setValueForStyles(node, styles) {
6525 var style = node.style;
6526 for (var styleName in styles) {
6527 if (!styles.hasOwnProperty(styleName)) {
6528 continue;
6529 }
6530 var isCustomProperty = styleName.indexOf('--') === 0;
6531 {
6532 if (!isCustomProperty) {
6533 warnValidStyle$1(styleName, styles[styleName]);
6534 }
6535 }
6536 var styleValue = dangerousStyleValue(styleName, styles[styleName], isCustomProperty);
6537 if (styleName === 'float') {
6538 styleName = 'cssFloat';
6539 }
6540 if (isCustomProperty) {
6541 style.setProperty(styleName, styleValue);
6542 } else {
6543 style[styleName] = styleValue;
6544 }
6545 }
6546}
6547
6548function isValueEmpty(value) {
6549 return value == null || typeof value === 'boolean' || value === '';
6550}
6551
6552/**
6553 * Given {color: 'red', overflow: 'hidden'} returns {
6554 * color: 'color',
6555 * overflowX: 'overflow',
6556 * overflowY: 'overflow',
6557 * }. This can be read as "the overflowY property was set by the overflow
6558 * shorthand". That is, the values are the property that each was derived from.
6559 */
6560function expandShorthandMap(styles) {
6561 var expanded = {};
6562 for (var key in styles) {
6563 var longhands = shorthandToLonghand[key] || [key];
6564 for (var i = 0; i < longhands.length; i++) {
6565 expanded[longhands[i]] = key;
6566 }
6567 }
6568 return expanded;
6569}
6570
6571/**
6572 * When mixing shorthand and longhand property names, we warn during updates if
6573 * we expect an incorrect result to occur. In particular, we warn for:
6574 *
6575 * Updating a shorthand property (longhand gets overwritten):
6576 * {font: 'foo', fontVariant: 'bar'} -> {font: 'baz', fontVariant: 'bar'}
6577 * becomes .style.font = 'baz'
6578 * Removing a shorthand property (longhand gets lost too):
6579 * {font: 'foo', fontVariant: 'bar'} -> {fontVariant: 'bar'}
6580 * becomes .style.font = ''
6581 * Removing a longhand property (should revert to shorthand; doesn't):
6582 * {font: 'foo', fontVariant: 'bar'} -> {font: 'foo'}
6583 * becomes .style.fontVariant = ''
6584 */
6585function validateShorthandPropertyCollisionInDev(styleUpdates, nextStyles) {
6586 if (!warnAboutShorthandPropertyCollision) {
6587 return;
6588 }
6589
6590 if (!nextStyles) {
6591 return;
6592 }
6593
6594 var expandedUpdates = expandShorthandMap(styleUpdates);
6595 var expandedStyles = expandShorthandMap(nextStyles);
6596 var warnedAbout = {};
6597 for (var key in expandedUpdates) {
6598 var originalKey = expandedUpdates[key];
6599 var correctOriginalKey = expandedStyles[key];
6600 if (correctOriginalKey && originalKey !== correctOriginalKey) {
6601 var warningKey = originalKey + ',' + correctOriginalKey;
6602 if (warnedAbout[warningKey]) {
6603 continue;
6604 }
6605 warnedAbout[warningKey] = true;
6606 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);
6607 }
6608 }
6609}
6610
6611// For HTML, certain tags should omit their close tag. We keep a whitelist for
6612// those special-case tags.
6613
6614var omittedCloseTags = {
6615 area: true,
6616 base: true,
6617 br: true,
6618 col: true,
6619 embed: true,
6620 hr: true,
6621 img: true,
6622 input: true,
6623 keygen: true,
6624 link: true,
6625 meta: true,
6626 param: true,
6627 source: true,
6628 track: true,
6629 wbr: true
6630 // NOTE: menuitem's close tag should be omitted, but that causes problems.
6631};
6632
6633// For HTML, certain tags cannot have children. This has the same purpose as
6634// `omittedCloseTags` except that `menuitem` should still have its closing tag.
6635
6636var voidElementTags = _assign({
6637 menuitem: true
6638}, omittedCloseTags);
6639
6640// TODO: We can remove this if we add invariantWithStack()
6641// or add stack by default to invariants where possible.
6642var HTML$1 = '__html';
6643
6644var ReactDebugCurrentFrame$2 = null;
6645{
6646 ReactDebugCurrentFrame$2 = ReactSharedInternals.ReactDebugCurrentFrame;
6647}
6648
6649function assertValidProps(tag, props) {
6650 if (!props) {
6651 return;
6652 }
6653 // Note the use of `==` which checks for null or undefined.
6654 if (voidElementTags[tag]) {
6655 !(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;
6656 }
6657 if (props.dangerouslySetInnerHTML != null) {
6658 !(props.children == null) ? invariant(false, 'Can only set one of `children` or `props.dangerouslySetInnerHTML`.') : void 0;
6659 !(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;
6660 }
6661 {
6662 !(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;
6663 }
6664 !(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;
6665}
6666
6667function isCustomComponent(tagName, props) {
6668 if (tagName.indexOf('-') === -1) {
6669 return typeof props.is === 'string';
6670 }
6671 switch (tagName) {
6672 // These are reserved SVG and MathML elements.
6673 // We don't mind this whitelist too much because we expect it to never grow.
6674 // The alternative is to track the namespace in a few places which is convoluted.
6675 // https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
6676 case 'annotation-xml':
6677 case 'color-profile':
6678 case 'font-face':
6679 case 'font-face-src':
6680 case 'font-face-uri':
6681 case 'font-face-format':
6682 case 'font-face-name':
6683 case 'missing-glyph':
6684 return false;
6685 default:
6686 return true;
6687 }
6688}
6689
6690// When adding attributes to the HTML or SVG whitelist, be sure to
6691// also add them to this module to ensure casing and incorrect name
6692// warnings.
6693var possibleStandardNames = {
6694 // HTML
6695 accept: 'accept',
6696 acceptcharset: 'acceptCharset',
6697 'accept-charset': 'acceptCharset',
6698 accesskey: 'accessKey',
6699 action: 'action',
6700 allowfullscreen: 'allowFullScreen',
6701 alt: 'alt',
6702 as: 'as',
6703 async: 'async',
6704 autocapitalize: 'autoCapitalize',
6705 autocomplete: 'autoComplete',
6706 autocorrect: 'autoCorrect',
6707 autofocus: 'autoFocus',
6708 autoplay: 'autoPlay',
6709 autosave: 'autoSave',
6710 capture: 'capture',
6711 cellpadding: 'cellPadding',
6712 cellspacing: 'cellSpacing',
6713 challenge: 'challenge',
6714 charset: 'charSet',
6715 checked: 'checked',
6716 children: 'children',
6717 cite: 'cite',
6718 class: 'className',
6719 classid: 'classID',
6720 classname: 'className',
6721 cols: 'cols',
6722 colspan: 'colSpan',
6723 content: 'content',
6724 contenteditable: 'contentEditable',
6725 contextmenu: 'contextMenu',
6726 controls: 'controls',
6727 controlslist: 'controlsList',
6728 coords: 'coords',
6729 crossorigin: 'crossOrigin',
6730 dangerouslysetinnerhtml: 'dangerouslySetInnerHTML',
6731 data: 'data',
6732 datetime: 'dateTime',
6733 default: 'default',
6734 defaultchecked: 'defaultChecked',
6735 defaultvalue: 'defaultValue',
6736 defer: 'defer',
6737 dir: 'dir',
6738 disabled: 'disabled',
6739 download: 'download',
6740 draggable: 'draggable',
6741 enctype: 'encType',
6742 for: 'htmlFor',
6743 form: 'form',
6744 formmethod: 'formMethod',
6745 formaction: 'formAction',
6746 formenctype: 'formEncType',
6747 formnovalidate: 'formNoValidate',
6748 formtarget: 'formTarget',
6749 frameborder: 'frameBorder',
6750 headers: 'headers',
6751 height: 'height',
6752 hidden: 'hidden',
6753 high: 'high',
6754 href: 'href',
6755 hreflang: 'hrefLang',
6756 htmlfor: 'htmlFor',
6757 httpequiv: 'httpEquiv',
6758 'http-equiv': 'httpEquiv',
6759 icon: 'icon',
6760 id: 'id',
6761 innerhtml: 'innerHTML',
6762 inputmode: 'inputMode',
6763 integrity: 'integrity',
6764 is: 'is',
6765 itemid: 'itemID',
6766 itemprop: 'itemProp',
6767 itemref: 'itemRef',
6768 itemscope: 'itemScope',
6769 itemtype: 'itemType',
6770 keyparams: 'keyParams',
6771 keytype: 'keyType',
6772 kind: 'kind',
6773 label: 'label',
6774 lang: 'lang',
6775 list: 'list',
6776 loop: 'loop',
6777 low: 'low',
6778 manifest: 'manifest',
6779 marginwidth: 'marginWidth',
6780 marginheight: 'marginHeight',
6781 max: 'max',
6782 maxlength: 'maxLength',
6783 media: 'media',
6784 mediagroup: 'mediaGroup',
6785 method: 'method',
6786 min: 'min',
6787 minlength: 'minLength',
6788 multiple: 'multiple',
6789 muted: 'muted',
6790 name: 'name',
6791 nomodule: 'noModule',
6792 nonce: 'nonce',
6793 novalidate: 'noValidate',
6794 open: 'open',
6795 optimum: 'optimum',
6796 pattern: 'pattern',
6797 placeholder: 'placeholder',
6798 playsinline: 'playsInline',
6799 poster: 'poster',
6800 preload: 'preload',
6801 profile: 'profile',
6802 radiogroup: 'radioGroup',
6803 readonly: 'readOnly',
6804 referrerpolicy: 'referrerPolicy',
6805 rel: 'rel',
6806 required: 'required',
6807 reversed: 'reversed',
6808 role: 'role',
6809 rows: 'rows',
6810 rowspan: 'rowSpan',
6811 sandbox: 'sandbox',
6812 scope: 'scope',
6813 scoped: 'scoped',
6814 scrolling: 'scrolling',
6815 seamless: 'seamless',
6816 selected: 'selected',
6817 shape: 'shape',
6818 size: 'size',
6819 sizes: 'sizes',
6820 span: 'span',
6821 spellcheck: 'spellCheck',
6822 src: 'src',
6823 srcdoc: 'srcDoc',
6824 srclang: 'srcLang',
6825 srcset: 'srcSet',
6826 start: 'start',
6827 step: 'step',
6828 style: 'style',
6829 summary: 'summary',
6830 tabindex: 'tabIndex',
6831 target: 'target',
6832 title: 'title',
6833 type: 'type',
6834 usemap: 'useMap',
6835 value: 'value',
6836 width: 'width',
6837 wmode: 'wmode',
6838 wrap: 'wrap',
6839
6840 // SVG
6841 about: 'about',
6842 accentheight: 'accentHeight',
6843 'accent-height': 'accentHeight',
6844 accumulate: 'accumulate',
6845 additive: 'additive',
6846 alignmentbaseline: 'alignmentBaseline',
6847 'alignment-baseline': 'alignmentBaseline',
6848 allowreorder: 'allowReorder',
6849 alphabetic: 'alphabetic',
6850 amplitude: 'amplitude',
6851 arabicform: 'arabicForm',
6852 'arabic-form': 'arabicForm',
6853 ascent: 'ascent',
6854 attributename: 'attributeName',
6855 attributetype: 'attributeType',
6856 autoreverse: 'autoReverse',
6857 azimuth: 'azimuth',
6858 basefrequency: 'baseFrequency',
6859 baselineshift: 'baselineShift',
6860 'baseline-shift': 'baselineShift',
6861 baseprofile: 'baseProfile',
6862 bbox: 'bbox',
6863 begin: 'begin',
6864 bias: 'bias',
6865 by: 'by',
6866 calcmode: 'calcMode',
6867 capheight: 'capHeight',
6868 'cap-height': 'capHeight',
6869 clip: 'clip',
6870 clippath: 'clipPath',
6871 'clip-path': 'clipPath',
6872 clippathunits: 'clipPathUnits',
6873 cliprule: 'clipRule',
6874 'clip-rule': 'clipRule',
6875 color: 'color',
6876 colorinterpolation: 'colorInterpolation',
6877 'color-interpolation': 'colorInterpolation',
6878 colorinterpolationfilters: 'colorInterpolationFilters',
6879 'color-interpolation-filters': 'colorInterpolationFilters',
6880 colorprofile: 'colorProfile',
6881 'color-profile': 'colorProfile',
6882 colorrendering: 'colorRendering',
6883 'color-rendering': 'colorRendering',
6884 contentscripttype: 'contentScriptType',
6885 contentstyletype: 'contentStyleType',
6886 cursor: 'cursor',
6887 cx: 'cx',
6888 cy: 'cy',
6889 d: 'd',
6890 datatype: 'datatype',
6891 decelerate: 'decelerate',
6892 descent: 'descent',
6893 diffuseconstant: 'diffuseConstant',
6894 direction: 'direction',
6895 display: 'display',
6896 divisor: 'divisor',
6897 dominantbaseline: 'dominantBaseline',
6898 'dominant-baseline': 'dominantBaseline',
6899 dur: 'dur',
6900 dx: 'dx',
6901 dy: 'dy',
6902 edgemode: 'edgeMode',
6903 elevation: 'elevation',
6904 enablebackground: 'enableBackground',
6905 'enable-background': 'enableBackground',
6906 end: 'end',
6907 exponent: 'exponent',
6908 externalresourcesrequired: 'externalResourcesRequired',
6909 fill: 'fill',
6910 fillopacity: 'fillOpacity',
6911 'fill-opacity': 'fillOpacity',
6912 fillrule: 'fillRule',
6913 'fill-rule': 'fillRule',
6914 filter: 'filter',
6915 filterres: 'filterRes',
6916 filterunits: 'filterUnits',
6917 floodopacity: 'floodOpacity',
6918 'flood-opacity': 'floodOpacity',
6919 floodcolor: 'floodColor',
6920 'flood-color': 'floodColor',
6921 focusable: 'focusable',
6922 fontfamily: 'fontFamily',
6923 'font-family': 'fontFamily',
6924 fontsize: 'fontSize',
6925 'font-size': 'fontSize',
6926 fontsizeadjust: 'fontSizeAdjust',
6927 'font-size-adjust': 'fontSizeAdjust',
6928 fontstretch: 'fontStretch',
6929 'font-stretch': 'fontStretch',
6930 fontstyle: 'fontStyle',
6931 'font-style': 'fontStyle',
6932 fontvariant: 'fontVariant',
6933 'font-variant': 'fontVariant',
6934 fontweight: 'fontWeight',
6935 'font-weight': 'fontWeight',
6936 format: 'format',
6937 from: 'from',
6938 fx: 'fx',
6939 fy: 'fy',
6940 g1: 'g1',
6941 g2: 'g2',
6942 glyphname: 'glyphName',
6943 'glyph-name': 'glyphName',
6944 glyphorientationhorizontal: 'glyphOrientationHorizontal',
6945 'glyph-orientation-horizontal': 'glyphOrientationHorizontal',
6946 glyphorientationvertical: 'glyphOrientationVertical',
6947 'glyph-orientation-vertical': 'glyphOrientationVertical',
6948 glyphref: 'glyphRef',
6949 gradienttransform: 'gradientTransform',
6950 gradientunits: 'gradientUnits',
6951 hanging: 'hanging',
6952 horizadvx: 'horizAdvX',
6953 'horiz-adv-x': 'horizAdvX',
6954 horizoriginx: 'horizOriginX',
6955 'horiz-origin-x': 'horizOriginX',
6956 ideographic: 'ideographic',
6957 imagerendering: 'imageRendering',
6958 'image-rendering': 'imageRendering',
6959 in2: 'in2',
6960 in: 'in',
6961 inlist: 'inlist',
6962 intercept: 'intercept',
6963 k1: 'k1',
6964 k2: 'k2',
6965 k3: 'k3',
6966 k4: 'k4',
6967 k: 'k',
6968 kernelmatrix: 'kernelMatrix',
6969 kernelunitlength: 'kernelUnitLength',
6970 kerning: 'kerning',
6971 keypoints: 'keyPoints',
6972 keysplines: 'keySplines',
6973 keytimes: 'keyTimes',
6974 lengthadjust: 'lengthAdjust',
6975 letterspacing: 'letterSpacing',
6976 'letter-spacing': 'letterSpacing',
6977 lightingcolor: 'lightingColor',
6978 'lighting-color': 'lightingColor',
6979 limitingconeangle: 'limitingConeAngle',
6980 local: 'local',
6981 markerend: 'markerEnd',
6982 'marker-end': 'markerEnd',
6983 markerheight: 'markerHeight',
6984 markermid: 'markerMid',
6985 'marker-mid': 'markerMid',
6986 markerstart: 'markerStart',
6987 'marker-start': 'markerStart',
6988 markerunits: 'markerUnits',
6989 markerwidth: 'markerWidth',
6990 mask: 'mask',
6991 maskcontentunits: 'maskContentUnits',
6992 maskunits: 'maskUnits',
6993 mathematical: 'mathematical',
6994 mode: 'mode',
6995 numoctaves: 'numOctaves',
6996 offset: 'offset',
6997 opacity: 'opacity',
6998 operator: 'operator',
6999 order: 'order',
7000 orient: 'orient',
7001 orientation: 'orientation',
7002 origin: 'origin',
7003 overflow: 'overflow',
7004 overlineposition: 'overlinePosition',
7005 'overline-position': 'overlinePosition',
7006 overlinethickness: 'overlineThickness',
7007 'overline-thickness': 'overlineThickness',
7008 paintorder: 'paintOrder',
7009 'paint-order': 'paintOrder',
7010 panose1: 'panose1',
7011 'panose-1': 'panose1',
7012 pathlength: 'pathLength',
7013 patterncontentunits: 'patternContentUnits',
7014 patterntransform: 'patternTransform',
7015 patternunits: 'patternUnits',
7016 pointerevents: 'pointerEvents',
7017 'pointer-events': 'pointerEvents',
7018 points: 'points',
7019 pointsatx: 'pointsAtX',
7020 pointsaty: 'pointsAtY',
7021 pointsatz: 'pointsAtZ',
7022 prefix: 'prefix',
7023 preservealpha: 'preserveAlpha',
7024 preserveaspectratio: 'preserveAspectRatio',
7025 primitiveunits: 'primitiveUnits',
7026 property: 'property',
7027 r: 'r',
7028 radius: 'radius',
7029 refx: 'refX',
7030 refy: 'refY',
7031 renderingintent: 'renderingIntent',
7032 'rendering-intent': 'renderingIntent',
7033 repeatcount: 'repeatCount',
7034 repeatdur: 'repeatDur',
7035 requiredextensions: 'requiredExtensions',
7036 requiredfeatures: 'requiredFeatures',
7037 resource: 'resource',
7038 restart: 'restart',
7039 result: 'result',
7040 results: 'results',
7041 rotate: 'rotate',
7042 rx: 'rx',
7043 ry: 'ry',
7044 scale: 'scale',
7045 security: 'security',
7046 seed: 'seed',
7047 shaperendering: 'shapeRendering',
7048 'shape-rendering': 'shapeRendering',
7049 slope: 'slope',
7050 spacing: 'spacing',
7051 specularconstant: 'specularConstant',
7052 specularexponent: 'specularExponent',
7053 speed: 'speed',
7054 spreadmethod: 'spreadMethod',
7055 startoffset: 'startOffset',
7056 stddeviation: 'stdDeviation',
7057 stemh: 'stemh',
7058 stemv: 'stemv',
7059 stitchtiles: 'stitchTiles',
7060 stopcolor: 'stopColor',
7061 'stop-color': 'stopColor',
7062 stopopacity: 'stopOpacity',
7063 'stop-opacity': 'stopOpacity',
7064 strikethroughposition: 'strikethroughPosition',
7065 'strikethrough-position': 'strikethroughPosition',
7066 strikethroughthickness: 'strikethroughThickness',
7067 'strikethrough-thickness': 'strikethroughThickness',
7068 string: 'string',
7069 stroke: 'stroke',
7070 strokedasharray: 'strokeDasharray',
7071 'stroke-dasharray': 'strokeDasharray',
7072 strokedashoffset: 'strokeDashoffset',
7073 'stroke-dashoffset': 'strokeDashoffset',
7074 strokelinecap: 'strokeLinecap',
7075 'stroke-linecap': 'strokeLinecap',
7076 strokelinejoin: 'strokeLinejoin',
7077 'stroke-linejoin': 'strokeLinejoin',
7078 strokemiterlimit: 'strokeMiterlimit',
7079 'stroke-miterlimit': 'strokeMiterlimit',
7080 strokewidth: 'strokeWidth',
7081 'stroke-width': 'strokeWidth',
7082 strokeopacity: 'strokeOpacity',
7083 'stroke-opacity': 'strokeOpacity',
7084 suppresscontenteditablewarning: 'suppressContentEditableWarning',
7085 suppresshydrationwarning: 'suppressHydrationWarning',
7086 surfacescale: 'surfaceScale',
7087 systemlanguage: 'systemLanguage',
7088 tablevalues: 'tableValues',
7089 targetx: 'targetX',
7090 targety: 'targetY',
7091 textanchor: 'textAnchor',
7092 'text-anchor': 'textAnchor',
7093 textdecoration: 'textDecoration',
7094 'text-decoration': 'textDecoration',
7095 textlength: 'textLength',
7096 textrendering: 'textRendering',
7097 'text-rendering': 'textRendering',
7098 to: 'to',
7099 transform: 'transform',
7100 typeof: 'typeof',
7101 u1: 'u1',
7102 u2: 'u2',
7103 underlineposition: 'underlinePosition',
7104 'underline-position': 'underlinePosition',
7105 underlinethickness: 'underlineThickness',
7106 'underline-thickness': 'underlineThickness',
7107 unicode: 'unicode',
7108 unicodebidi: 'unicodeBidi',
7109 'unicode-bidi': 'unicodeBidi',
7110 unicoderange: 'unicodeRange',
7111 'unicode-range': 'unicodeRange',
7112 unitsperem: 'unitsPerEm',
7113 'units-per-em': 'unitsPerEm',
7114 unselectable: 'unselectable',
7115 valphabetic: 'vAlphabetic',
7116 'v-alphabetic': 'vAlphabetic',
7117 values: 'values',
7118 vectoreffect: 'vectorEffect',
7119 'vector-effect': 'vectorEffect',
7120 version: 'version',
7121 vertadvy: 'vertAdvY',
7122 'vert-adv-y': 'vertAdvY',
7123 vertoriginx: 'vertOriginX',
7124 'vert-origin-x': 'vertOriginX',
7125 vertoriginy: 'vertOriginY',
7126 'vert-origin-y': 'vertOriginY',
7127 vhanging: 'vHanging',
7128 'v-hanging': 'vHanging',
7129 videographic: 'vIdeographic',
7130 'v-ideographic': 'vIdeographic',
7131 viewbox: 'viewBox',
7132 viewtarget: 'viewTarget',
7133 visibility: 'visibility',
7134 vmathematical: 'vMathematical',
7135 'v-mathematical': 'vMathematical',
7136 vocab: 'vocab',
7137 widths: 'widths',
7138 wordspacing: 'wordSpacing',
7139 'word-spacing': 'wordSpacing',
7140 writingmode: 'writingMode',
7141 'writing-mode': 'writingMode',
7142 x1: 'x1',
7143 x2: 'x2',
7144 x: 'x',
7145 xchannelselector: 'xChannelSelector',
7146 xheight: 'xHeight',
7147 'x-height': 'xHeight',
7148 xlinkactuate: 'xlinkActuate',
7149 'xlink:actuate': 'xlinkActuate',
7150 xlinkarcrole: 'xlinkArcrole',
7151 'xlink:arcrole': 'xlinkArcrole',
7152 xlinkhref: 'xlinkHref',
7153 'xlink:href': 'xlinkHref',
7154 xlinkrole: 'xlinkRole',
7155 'xlink:role': 'xlinkRole',
7156 xlinkshow: 'xlinkShow',
7157 'xlink:show': 'xlinkShow',
7158 xlinktitle: 'xlinkTitle',
7159 'xlink:title': 'xlinkTitle',
7160 xlinktype: 'xlinkType',
7161 'xlink:type': 'xlinkType',
7162 xmlbase: 'xmlBase',
7163 'xml:base': 'xmlBase',
7164 xmllang: 'xmlLang',
7165 'xml:lang': 'xmlLang',
7166 xmlns: 'xmlns',
7167 'xml:space': 'xmlSpace',
7168 xmlnsxlink: 'xmlnsXlink',
7169 'xmlns:xlink': 'xmlnsXlink',
7170 xmlspace: 'xmlSpace',
7171 y1: 'y1',
7172 y2: 'y2',
7173 y: 'y',
7174 ychannelselector: 'yChannelSelector',
7175 z: 'z',
7176 zoomandpan: 'zoomAndPan'
7177};
7178
7179var ariaProperties = {
7180 'aria-current': 0, // state
7181 'aria-details': 0,
7182 'aria-disabled': 0, // state
7183 'aria-hidden': 0, // state
7184 'aria-invalid': 0, // state
7185 'aria-keyshortcuts': 0,
7186 'aria-label': 0,
7187 'aria-roledescription': 0,
7188 // Widget Attributes
7189 'aria-autocomplete': 0,
7190 'aria-checked': 0,
7191 'aria-expanded': 0,
7192 'aria-haspopup': 0,
7193 'aria-level': 0,
7194 'aria-modal': 0,
7195 'aria-multiline': 0,
7196 'aria-multiselectable': 0,
7197 'aria-orientation': 0,
7198 'aria-placeholder': 0,
7199 'aria-pressed': 0,
7200 'aria-readonly': 0,
7201 'aria-required': 0,
7202 'aria-selected': 0,
7203 'aria-sort': 0,
7204 'aria-valuemax': 0,
7205 'aria-valuemin': 0,
7206 'aria-valuenow': 0,
7207 'aria-valuetext': 0,
7208 // Live Region Attributes
7209 'aria-atomic': 0,
7210 'aria-busy': 0,
7211 'aria-live': 0,
7212 'aria-relevant': 0,
7213 // Drag-and-Drop Attributes
7214 'aria-dropeffect': 0,
7215 'aria-grabbed': 0,
7216 // Relationship Attributes
7217 'aria-activedescendant': 0,
7218 'aria-colcount': 0,
7219 'aria-colindex': 0,
7220 'aria-colspan': 0,
7221 'aria-controls': 0,
7222 'aria-describedby': 0,
7223 'aria-errormessage': 0,
7224 'aria-flowto': 0,
7225 'aria-labelledby': 0,
7226 'aria-owns': 0,
7227 'aria-posinset': 0,
7228 'aria-rowcount': 0,
7229 'aria-rowindex': 0,
7230 'aria-rowspan': 0,
7231 'aria-setsize': 0
7232};
7233
7234var warnedProperties = {};
7235var rARIA = new RegExp('^(aria)-[' + ATTRIBUTE_NAME_CHAR + ']*$');
7236var rARIACamel = new RegExp('^(aria)[A-Z][' + ATTRIBUTE_NAME_CHAR + ']*$');
7237
7238var hasOwnProperty$2 = Object.prototype.hasOwnProperty;
7239
7240function validateProperty(tagName, name) {
7241 if (hasOwnProperty$2.call(warnedProperties, name) && warnedProperties[name]) {
7242 return true;
7243 }
7244
7245 if (rARIACamel.test(name)) {
7246 var ariaName = 'aria-' + name.slice(4).toLowerCase();
7247 var correctName = ariaProperties.hasOwnProperty(ariaName) ? ariaName : null;
7248
7249 // If this is an aria-* attribute, but is not listed in the known DOM
7250 // DOM properties, then it is an invalid aria-* attribute.
7251 if (correctName == null) {
7252 warning$1(false, 'Invalid ARIA attribute `%s`. ARIA attributes follow the pattern aria-* and must be lowercase.', name);
7253 warnedProperties[name] = true;
7254 return true;
7255 }
7256 // aria-* attributes should be lowercase; suggest the lowercase version.
7257 if (name !== correctName) {
7258 warning$1(false, 'Invalid ARIA attribute `%s`. Did you mean `%s`?', name, correctName);
7259 warnedProperties[name] = true;
7260 return true;
7261 }
7262 }
7263
7264 if (rARIA.test(name)) {
7265 var lowerCasedName = name.toLowerCase();
7266 var standardName = ariaProperties.hasOwnProperty(lowerCasedName) ? lowerCasedName : null;
7267
7268 // If this is an aria-* attribute, but is not listed in the known DOM
7269 // DOM properties, then it is an invalid aria-* attribute.
7270 if (standardName == null) {
7271 warnedProperties[name] = true;
7272 return false;
7273 }
7274 // aria-* attributes should be lowercase; suggest the lowercase version.
7275 if (name !== standardName) {
7276 warning$1(false, 'Unknown ARIA attribute `%s`. Did you mean `%s`?', name, standardName);
7277 warnedProperties[name] = true;
7278 return true;
7279 }
7280 }
7281
7282 return true;
7283}
7284
7285function warnInvalidARIAProps(type, props) {
7286 var invalidProps = [];
7287
7288 for (var key in props) {
7289 var isValid = validateProperty(type, key);
7290 if (!isValid) {
7291 invalidProps.push(key);
7292 }
7293 }
7294
7295 var unknownPropString = invalidProps.map(function (prop) {
7296 return '`' + prop + '`';
7297 }).join(', ');
7298
7299 if (invalidProps.length === 1) {
7300 warning$1(false, 'Invalid aria prop %s on <%s> tag. ' + 'For details, see https://fb.me/invalid-aria-prop', unknownPropString, type);
7301 } else if (invalidProps.length > 1) {
7302 warning$1(false, 'Invalid aria props %s on <%s> tag. ' + 'For details, see https://fb.me/invalid-aria-prop', unknownPropString, type);
7303 }
7304}
7305
7306function validateProperties(type, props) {
7307 if (isCustomComponent(type, props)) {
7308 return;
7309 }
7310 warnInvalidARIAProps(type, props);
7311}
7312
7313var didWarnValueNull = false;
7314
7315function validateProperties$1(type, props) {
7316 if (type !== 'input' && type !== 'textarea' && type !== 'select') {
7317 return;
7318 }
7319
7320 if (props != null && props.value === null && !didWarnValueNull) {
7321 didWarnValueNull = true;
7322 if (type === 'select' && props.multiple) {
7323 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);
7324 } else {
7325 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);
7326 }
7327 }
7328}
7329
7330var validateProperty$1 = function () {};
7331
7332{
7333 var warnedProperties$1 = {};
7334 var _hasOwnProperty = Object.prototype.hasOwnProperty;
7335 var EVENT_NAME_REGEX = /^on./;
7336 var INVALID_EVENT_NAME_REGEX = /^on[^A-Z]/;
7337 var rARIA$1 = new RegExp('^(aria)-[' + ATTRIBUTE_NAME_CHAR + ']*$');
7338 var rARIACamel$1 = new RegExp('^(aria)[A-Z][' + ATTRIBUTE_NAME_CHAR + ']*$');
7339
7340 validateProperty$1 = function (tagName, name, value, canUseEventSystem) {
7341 if (_hasOwnProperty.call(warnedProperties$1, name) && warnedProperties$1[name]) {
7342 return true;
7343 }
7344
7345 var lowerCasedName = name.toLowerCase();
7346 if (lowerCasedName === 'onfocusin' || lowerCasedName === 'onfocusout') {
7347 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.');
7348 warnedProperties$1[name] = true;
7349 return true;
7350 }
7351
7352 // We can't rely on the event system being injected on the server.
7353 if (canUseEventSystem) {
7354 if (registrationNameModules.hasOwnProperty(name)) {
7355 return true;
7356 }
7357 var registrationName = possibleRegistrationNames.hasOwnProperty(lowerCasedName) ? possibleRegistrationNames[lowerCasedName] : null;
7358 if (registrationName != null) {
7359 warning$1(false, 'Invalid event handler property `%s`. Did you mean `%s`?', name, registrationName);
7360 warnedProperties$1[name] = true;
7361 return true;
7362 }
7363 if (EVENT_NAME_REGEX.test(name)) {
7364 warning$1(false, 'Unknown event handler property `%s`. It will be ignored.', name);
7365 warnedProperties$1[name] = true;
7366 return true;
7367 }
7368 } else if (EVENT_NAME_REGEX.test(name)) {
7369 // If no event plugins have been injected, we are in a server environment.
7370 // So we can't tell if the event name is correct for sure, but we can filter
7371 // out known bad ones like `onclick`. We can't suggest a specific replacement though.
7372 if (INVALID_EVENT_NAME_REGEX.test(name)) {
7373 warning$1(false, 'Invalid event handler property `%s`. ' + 'React events use the camelCase naming convention, for example `onClick`.', name);
7374 }
7375 warnedProperties$1[name] = true;
7376 return true;
7377 }
7378
7379 // Let the ARIA attribute hook validate ARIA attributes
7380 if (rARIA$1.test(name) || rARIACamel$1.test(name)) {
7381 return true;
7382 }
7383
7384 if (lowerCasedName === 'innerhtml') {
7385 warning$1(false, 'Directly setting property `innerHTML` is not permitted. ' + 'For more information, lookup documentation on `dangerouslySetInnerHTML`.');
7386 warnedProperties$1[name] = true;
7387 return true;
7388 }
7389
7390 if (lowerCasedName === 'aria') {
7391 warning$1(false, 'The `aria` attribute is reserved for future use in React. ' + 'Pass individual `aria-` attributes instead.');
7392 warnedProperties$1[name] = true;
7393 return true;
7394 }
7395
7396 if (lowerCasedName === 'is' && value !== null && value !== undefined && typeof value !== 'string') {
7397 warning$1(false, 'Received a `%s` for a string attribute `is`. If this is expected, cast ' + 'the value to a string.', typeof value);
7398 warnedProperties$1[name] = true;
7399 return true;
7400 }
7401
7402 if (typeof value === 'number' && isNaN(value)) {
7403 warning$1(false, 'Received NaN for the `%s` attribute. If this is expected, cast ' + 'the value to a string.', name);
7404 warnedProperties$1[name] = true;
7405 return true;
7406 }
7407
7408 var propertyInfo = getPropertyInfo(name);
7409 var isReserved = propertyInfo !== null && propertyInfo.type === RESERVED;
7410
7411 // Known attributes should match the casing specified in the property config.
7412 if (possibleStandardNames.hasOwnProperty(lowerCasedName)) {
7413 var standardName = possibleStandardNames[lowerCasedName];
7414 if (standardName !== name) {
7415 warning$1(false, 'Invalid DOM property `%s`. Did you mean `%s`?', name, standardName);
7416 warnedProperties$1[name] = true;
7417 return true;
7418 }
7419 } else if (!isReserved && name !== lowerCasedName) {
7420 // Unknown attributes should have lowercase casing since that's how they
7421 // will be cased anyway with server rendering.
7422 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);
7423 warnedProperties$1[name] = true;
7424 return true;
7425 }
7426
7427 if (typeof value === 'boolean' && shouldRemoveAttributeWithWarning(name, value, propertyInfo, false)) {
7428 if (value) {
7429 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);
7430 } else {
7431 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);
7432 }
7433 warnedProperties$1[name] = true;
7434 return true;
7435 }
7436
7437 // Now that we've validated casing, do not validate
7438 // data types for reserved props
7439 if (isReserved) {
7440 return true;
7441 }
7442
7443 // Warn when a known attribute is a bad type
7444 if (shouldRemoveAttributeWithWarning(name, value, propertyInfo, false)) {
7445 warnedProperties$1[name] = true;
7446 return false;
7447 }
7448
7449 // Warn when passing the strings 'false' or 'true' into a boolean prop
7450 if ((value === 'false' || value === 'true') && propertyInfo !== null && propertyInfo.type === BOOLEAN) {
7451 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);
7452 warnedProperties$1[name] = true;
7453 return true;
7454 }
7455
7456 return true;
7457 };
7458}
7459
7460var warnUnknownProperties = function (type, props, canUseEventSystem) {
7461 var unknownProps = [];
7462 for (var key in props) {
7463 var isValid = validateProperty$1(type, key, props[key], canUseEventSystem);
7464 if (!isValid) {
7465 unknownProps.push(key);
7466 }
7467 }
7468
7469 var unknownPropString = unknownProps.map(function (prop) {
7470 return '`' + prop + '`';
7471 }).join(', ');
7472 if (unknownProps.length === 1) {
7473 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);
7474 } else if (unknownProps.length > 1) {
7475 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);
7476 }
7477};
7478
7479function validateProperties$2(type, props, canUseEventSystem) {
7480 if (isCustomComponent(type, props)) {
7481 return;
7482 }
7483 warnUnknownProperties(type, props, canUseEventSystem);
7484}
7485
7486// TODO: direct imports like some-package/src/* are bad. Fix me.
7487var didWarnInvalidHydration = false;
7488var didWarnShadyDOM = false;
7489
7490var DANGEROUSLY_SET_INNER_HTML = 'dangerouslySetInnerHTML';
7491var SUPPRESS_CONTENT_EDITABLE_WARNING = 'suppressContentEditableWarning';
7492var SUPPRESS_HYDRATION_WARNING$1 = 'suppressHydrationWarning';
7493var AUTOFOCUS = 'autoFocus';
7494var CHILDREN = 'children';
7495var STYLE$1 = 'style';
7496var HTML = '__html';
7497
7498var HTML_NAMESPACE = Namespaces.html;
7499
7500
7501var warnedUnknownTags = void 0;
7502var suppressHydrationWarning = void 0;
7503
7504var validatePropertiesInDevelopment = void 0;
7505var warnForTextDifference = void 0;
7506var warnForPropDifference = void 0;
7507var warnForExtraAttributes = void 0;
7508var warnForInvalidEventListener = void 0;
7509var canDiffStyleForHydrationWarning = void 0;
7510
7511var normalizeMarkupForTextOrAttribute = void 0;
7512var normalizeHTML = void 0;
7513
7514{
7515 warnedUnknownTags = {
7516 // Chrome is the only major browser not shipping <time>. But as of July
7517 // 2017 it intends to ship it due to widespread usage. We intentionally
7518 // *don't* warn for <time> even if it's unrecognized by Chrome because
7519 // it soon will be, and many apps have been using it anyway.
7520 time: true,
7521 // There are working polyfills for <dialog>. Let people use it.
7522 dialog: true,
7523 // Electron ships a custom <webview> tag to display external web content in
7524 // an isolated frame and process.
7525 // This tag is not present in non Electron environments such as JSDom which
7526 // is often used for testing purposes.
7527 // @see https://electronjs.org/docs/api/webview-tag
7528 webview: true
7529 };
7530
7531 validatePropertiesInDevelopment = function (type, props) {
7532 validateProperties(type, props);
7533 validateProperties$1(type, props);
7534 validateProperties$2(type, props, /* canUseEventSystem */true);
7535 };
7536
7537 // IE 11 parses & normalizes the style attribute as opposed to other
7538 // browsers. It adds spaces and sorts the properties in some
7539 // non-alphabetical order. Handling that would require sorting CSS
7540 // properties in the client & server versions or applying
7541 // `expectedStyle` to a temporary DOM node to read its `style` attribute
7542 // normalized. Since it only affects IE, we're skipping style warnings
7543 // in that browser completely in favor of doing all that work.
7544 // See https://github.com/facebook/react/issues/11807
7545 canDiffStyleForHydrationWarning = canUseDOM && !document.documentMode;
7546
7547 // HTML parsing normalizes CR and CRLF to LF.
7548 // It also can turn \u0000 into \uFFFD inside attributes.
7549 // https://www.w3.org/TR/html5/single-page.html#preprocessing-the-input-stream
7550 // If we have a mismatch, it might be caused by that.
7551 // We will still patch up in this case but not fire the warning.
7552 var NORMALIZE_NEWLINES_REGEX = /\r\n?/g;
7553 var NORMALIZE_NULL_AND_REPLACEMENT_REGEX = /\u0000|\uFFFD/g;
7554
7555 normalizeMarkupForTextOrAttribute = function (markup) {
7556 var markupString = typeof markup === 'string' ? markup : '' + markup;
7557 return markupString.replace(NORMALIZE_NEWLINES_REGEX, '\n').replace(NORMALIZE_NULL_AND_REPLACEMENT_REGEX, '');
7558 };
7559
7560 warnForTextDifference = function (serverText, clientText) {
7561 if (didWarnInvalidHydration) {
7562 return;
7563 }
7564 var normalizedClientText = normalizeMarkupForTextOrAttribute(clientText);
7565 var normalizedServerText = normalizeMarkupForTextOrAttribute(serverText);
7566 if (normalizedServerText === normalizedClientText) {
7567 return;
7568 }
7569 didWarnInvalidHydration = true;
7570 warningWithoutStack$1(false, 'Text content did not match. Server: "%s" Client: "%s"', normalizedServerText, normalizedClientText);
7571 };
7572
7573 warnForPropDifference = function (propName, serverValue, clientValue) {
7574 if (didWarnInvalidHydration) {
7575 return;
7576 }
7577 var normalizedClientValue = normalizeMarkupForTextOrAttribute(clientValue);
7578 var normalizedServerValue = normalizeMarkupForTextOrAttribute(serverValue);
7579 if (normalizedServerValue === normalizedClientValue) {
7580 return;
7581 }
7582 didWarnInvalidHydration = true;
7583 warningWithoutStack$1(false, 'Prop `%s` did not match. Server: %s Client: %s', propName, JSON.stringify(normalizedServerValue), JSON.stringify(normalizedClientValue));
7584 };
7585
7586 warnForExtraAttributes = function (attributeNames) {
7587 if (didWarnInvalidHydration) {
7588 return;
7589 }
7590 didWarnInvalidHydration = true;
7591 var names = [];
7592 attributeNames.forEach(function (name) {
7593 names.push(name);
7594 });
7595 warningWithoutStack$1(false, 'Extra attributes from the server: %s', names);
7596 };
7597
7598 warnForInvalidEventListener = function (registrationName, listener) {
7599 if (listener === false) {
7600 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);
7601 } else {
7602 warning$1(false, 'Expected `%s` listener to be a function, instead got a value of `%s` type.', registrationName, typeof listener);
7603 }
7604 };
7605
7606 // Parse the HTML and read it back to normalize the HTML string so that it
7607 // can be used for comparison.
7608 normalizeHTML = function (parent, html) {
7609 // We could have created a separate document here to avoid
7610 // re-initializing custom elements if they exist. But this breaks
7611 // how <noscript> is being handled. So we use the same document.
7612 // See the discussion in https://github.com/facebook/react/pull/11157.
7613 var testElement = parent.namespaceURI === HTML_NAMESPACE ? parent.ownerDocument.createElement(parent.tagName) : parent.ownerDocument.createElementNS(parent.namespaceURI, parent.tagName);
7614 testElement.innerHTML = html;
7615 return testElement.innerHTML;
7616 };
7617}
7618
7619function ensureListeningTo(rootContainerElement, registrationName) {
7620 var isDocumentOrFragment = rootContainerElement.nodeType === DOCUMENT_NODE || rootContainerElement.nodeType === DOCUMENT_FRAGMENT_NODE;
7621 var doc = isDocumentOrFragment ? rootContainerElement : rootContainerElement.ownerDocument;
7622 listenTo(registrationName, doc);
7623}
7624
7625function getOwnerDocumentFromRootContainer(rootContainerElement) {
7626 return rootContainerElement.nodeType === DOCUMENT_NODE ? rootContainerElement : rootContainerElement.ownerDocument;
7627}
7628
7629function noop() {}
7630
7631function trapClickOnNonInteractiveElement(node) {
7632 // Mobile Safari does not fire properly bubble click events on
7633 // non-interactive elements, which means delegated click listeners do not
7634 // fire. The workaround for this bug involves attaching an empty click
7635 // listener on the target node.
7636 // http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
7637 // Just set it using the onclick property so that we don't have to manage any
7638 // bookkeeping for it. Not sure if we need to clear it when the listener is
7639 // removed.
7640 // TODO: Only do this for the relevant Safaris maybe?
7641 node.onclick = noop;
7642}
7643
7644function setInitialDOMProperties(tag, domElement, rootContainerElement, nextProps, isCustomComponentTag) {
7645 for (var propKey in nextProps) {
7646 if (!nextProps.hasOwnProperty(propKey)) {
7647 continue;
7648 }
7649 var nextProp = nextProps[propKey];
7650 if (propKey === STYLE$1) {
7651 {
7652 if (nextProp) {
7653 // Freeze the next style object so that we can assume it won't be
7654 // mutated. We have already warned for this in the past.
7655 Object.freeze(nextProp);
7656 }
7657 }
7658 // Relies on `updateStylesByID` not mutating `styleUpdates`.
7659 setValueForStyles(domElement, nextProp);
7660 } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
7661 var nextHtml = nextProp ? nextProp[HTML] : undefined;
7662 if (nextHtml != null) {
7663 setInnerHTML(domElement, nextHtml);
7664 }
7665 } else if (propKey === CHILDREN) {
7666 if (typeof nextProp === 'string') {
7667 // Avoid setting initial textContent when the text is empty. In IE11 setting
7668 // textContent on a <textarea> will cause the placeholder to not
7669 // show within the <textarea> until it has been focused and blurred again.
7670 // https://github.com/facebook/react/issues/6731#issuecomment-254874553
7671 var canSetTextContent = tag !== 'textarea' || nextProp !== '';
7672 if (canSetTextContent) {
7673 setTextContent(domElement, nextProp);
7674 }
7675 } else if (typeof nextProp === 'number') {
7676 setTextContent(domElement, '' + nextProp);
7677 }
7678 } else if (propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING$1) {
7679 // Noop
7680 } else if (propKey === AUTOFOCUS) {
7681 // We polyfill it separately on the client during commit.
7682 // We could have excluded it in the property list instead of
7683 // adding a special case here, but then it wouldn't be emitted
7684 // on server rendering (but we *do* want to emit it in SSR).
7685 } else if (registrationNameModules.hasOwnProperty(propKey)) {
7686 if (nextProp != null) {
7687 if (true && typeof nextProp !== 'function') {
7688 warnForInvalidEventListener(propKey, nextProp);
7689 }
7690 ensureListeningTo(rootContainerElement, propKey);
7691 }
7692 } else if (nextProp != null) {
7693 setValueForProperty(domElement, propKey, nextProp, isCustomComponentTag);
7694 }
7695 }
7696}
7697
7698function updateDOMProperties(domElement, updatePayload, wasCustomComponentTag, isCustomComponentTag) {
7699 // TODO: Handle wasCustomComponentTag
7700 for (var i = 0; i < updatePayload.length; i += 2) {
7701 var propKey = updatePayload[i];
7702 var propValue = updatePayload[i + 1];
7703 if (propKey === STYLE$1) {
7704 setValueForStyles(domElement, propValue);
7705 } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
7706 setInnerHTML(domElement, propValue);
7707 } else if (propKey === CHILDREN) {
7708 setTextContent(domElement, propValue);
7709 } else {
7710 setValueForProperty(domElement, propKey, propValue, isCustomComponentTag);
7711 }
7712 }
7713}
7714
7715function createElement(type, props, rootContainerElement, parentNamespace) {
7716 var isCustomComponentTag = void 0;
7717
7718 // We create tags in the namespace of their parent container, except HTML
7719 // tags get no namespace.
7720 var ownerDocument = getOwnerDocumentFromRootContainer(rootContainerElement);
7721 var domElement = void 0;
7722 var namespaceURI = parentNamespace;
7723 if (namespaceURI === HTML_NAMESPACE) {
7724 namespaceURI = getIntrinsicNamespace(type);
7725 }
7726 if (namespaceURI === HTML_NAMESPACE) {
7727 {
7728 isCustomComponentTag = isCustomComponent(type, props);
7729 // Should this check be gated by parent namespace? Not sure we want to
7730 // allow <SVG> or <mATH>.
7731 !(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;
7732 }
7733
7734 if (type === 'script') {
7735 // Create the script via .innerHTML so its "parser-inserted" flag is
7736 // set to true and it does not execute
7737 var div = ownerDocument.createElement('div');
7738 div.innerHTML = '<script><' + '/script>'; // eslint-disable-line
7739 // This is guaranteed to yield a script element.
7740 var firstChild = div.firstChild;
7741 domElement = div.removeChild(firstChild);
7742 } else if (typeof props.is === 'string') {
7743 // $FlowIssue `createElement` should be updated for Web Components
7744 domElement = ownerDocument.createElement(type, { is: props.is });
7745 } else {
7746 // Separate else branch instead of using `props.is || undefined` above because of a Firefox bug.
7747 // See discussion in https://github.com/facebook/react/pull/6896
7748 // and discussion in https://bugzilla.mozilla.org/show_bug.cgi?id=1276240
7749 domElement = ownerDocument.createElement(type);
7750 // Normally attributes are assigned in `setInitialDOMProperties`, however the `multiple` and `size`
7751 // attributes on `select`s needs to be added before `option`s are inserted.
7752 // This prevents:
7753 // - a bug where the `select` does not scroll to the correct option because singular
7754 // `select` elements automatically pick the first item #13222
7755 // - a bug where the `select` set the first item as selected despite the `size` attribute #14239
7756 // See https://github.com/facebook/react/issues/13222
7757 // and https://github.com/facebook/react/issues/14239
7758 if (type === 'select') {
7759 var node = domElement;
7760 if (props.multiple) {
7761 node.multiple = true;
7762 } else if (props.size) {
7763 // Setting a size greater than 1 causes a select to behave like `multiple=true`, where
7764 // it is possible that no option is selected.
7765 //
7766 // This is only necessary when a select in "single selection mode".
7767 node.size = props.size;
7768 }
7769 }
7770 }
7771 } else {
7772 domElement = ownerDocument.createElementNS(namespaceURI, type);
7773 }
7774
7775 {
7776 if (namespaceURI === HTML_NAMESPACE) {
7777 if (!isCustomComponentTag && Object.prototype.toString.call(domElement) === '[object HTMLUnknownElement]' && !Object.prototype.hasOwnProperty.call(warnedUnknownTags, type)) {
7778 warnedUnknownTags[type] = true;
7779 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);
7780 }
7781 }
7782 }
7783
7784 return domElement;
7785}
7786
7787function createTextNode(text, rootContainerElement) {
7788 return getOwnerDocumentFromRootContainer(rootContainerElement).createTextNode(text);
7789}
7790
7791function setInitialProperties(domElement, tag, rawProps, rootContainerElement) {
7792 var isCustomComponentTag = isCustomComponent(tag, rawProps);
7793 {
7794 validatePropertiesInDevelopment(tag, rawProps);
7795 if (isCustomComponentTag && !didWarnShadyDOM && domElement.shadyRoot) {
7796 warning$1(false, '%s is using shady DOM. Using shady DOM with React can ' + 'cause things to break subtly.', getCurrentFiberOwnerNameInDevOrNull() || 'A component');
7797 didWarnShadyDOM = true;
7798 }
7799 }
7800
7801 // TODO: Make sure that we check isMounted before firing any of these events.
7802 var props = void 0;
7803 switch (tag) {
7804 case 'iframe':
7805 case 'object':
7806 trapBubbledEvent(TOP_LOAD, domElement);
7807 props = rawProps;
7808 break;
7809 case 'video':
7810 case 'audio':
7811 // Create listener for each media event
7812 for (var i = 0; i < mediaEventTypes.length; i++) {
7813 trapBubbledEvent(mediaEventTypes[i], domElement);
7814 }
7815 props = rawProps;
7816 break;
7817 case 'source':
7818 trapBubbledEvent(TOP_ERROR, domElement);
7819 props = rawProps;
7820 break;
7821 case 'img':
7822 case 'image':
7823 case 'link':
7824 trapBubbledEvent(TOP_ERROR, domElement);
7825 trapBubbledEvent(TOP_LOAD, domElement);
7826 props = rawProps;
7827 break;
7828 case 'form':
7829 trapBubbledEvent(TOP_RESET, domElement);
7830 trapBubbledEvent(TOP_SUBMIT, domElement);
7831 props = rawProps;
7832 break;
7833 case 'details':
7834 trapBubbledEvent(TOP_TOGGLE, domElement);
7835 props = rawProps;
7836 break;
7837 case 'input':
7838 initWrapperState(domElement, rawProps);
7839 props = getHostProps(domElement, rawProps);
7840 trapBubbledEvent(TOP_INVALID, domElement);
7841 // For controlled components we always need to ensure we're listening
7842 // to onChange. Even if there is no listener.
7843 ensureListeningTo(rootContainerElement, 'onChange');
7844 break;
7845 case 'option':
7846 validateProps(domElement, rawProps);
7847 props = getHostProps$1(domElement, rawProps);
7848 break;
7849 case 'select':
7850 initWrapperState$1(domElement, rawProps);
7851 props = getHostProps$2(domElement, rawProps);
7852 trapBubbledEvent(TOP_INVALID, domElement);
7853 // For controlled components we always need to ensure we're listening
7854 // to onChange. Even if there is no listener.
7855 ensureListeningTo(rootContainerElement, 'onChange');
7856 break;
7857 case 'textarea':
7858 initWrapperState$2(domElement, rawProps);
7859 props = getHostProps$3(domElement, rawProps);
7860 trapBubbledEvent(TOP_INVALID, domElement);
7861 // For controlled components we always need to ensure we're listening
7862 // to onChange. Even if there is no listener.
7863 ensureListeningTo(rootContainerElement, 'onChange');
7864 break;
7865 default:
7866 props = rawProps;
7867 }
7868
7869 assertValidProps(tag, props);
7870
7871 setInitialDOMProperties(tag, domElement, rootContainerElement, props, isCustomComponentTag);
7872
7873 switch (tag) {
7874 case 'input':
7875 // TODO: Make sure we check if this is still unmounted or do any clean
7876 // up necessary since we never stop tracking anymore.
7877 track(domElement);
7878 postMountWrapper(domElement, rawProps, false);
7879 break;
7880 case 'textarea':
7881 // TODO: Make sure we check if this is still unmounted or do any clean
7882 // up necessary since we never stop tracking anymore.
7883 track(domElement);
7884 postMountWrapper$3(domElement, rawProps);
7885 break;
7886 case 'option':
7887 postMountWrapper$1(domElement, rawProps);
7888 break;
7889 case 'select':
7890 postMountWrapper$2(domElement, rawProps);
7891 break;
7892 default:
7893 if (typeof props.onClick === 'function') {
7894 // TODO: This cast may not be sound for SVG, MathML or custom elements.
7895 trapClickOnNonInteractiveElement(domElement);
7896 }
7897 break;
7898 }
7899}
7900
7901// Calculate the diff between the two objects.
7902function diffProperties(domElement, tag, lastRawProps, nextRawProps, rootContainerElement) {
7903 {
7904 validatePropertiesInDevelopment(tag, nextRawProps);
7905 }
7906
7907 var updatePayload = null;
7908
7909 var lastProps = void 0;
7910 var nextProps = void 0;
7911 switch (tag) {
7912 case 'input':
7913 lastProps = getHostProps(domElement, lastRawProps);
7914 nextProps = getHostProps(domElement, nextRawProps);
7915 updatePayload = [];
7916 break;
7917 case 'option':
7918 lastProps = getHostProps$1(domElement, lastRawProps);
7919 nextProps = getHostProps$1(domElement, nextRawProps);
7920 updatePayload = [];
7921 break;
7922 case 'select':
7923 lastProps = getHostProps$2(domElement, lastRawProps);
7924 nextProps = getHostProps$2(domElement, nextRawProps);
7925 updatePayload = [];
7926 break;
7927 case 'textarea':
7928 lastProps = getHostProps$3(domElement, lastRawProps);
7929 nextProps = getHostProps$3(domElement, nextRawProps);
7930 updatePayload = [];
7931 break;
7932 default:
7933 lastProps = lastRawProps;
7934 nextProps = nextRawProps;
7935 if (typeof lastProps.onClick !== 'function' && typeof nextProps.onClick === 'function') {
7936 // TODO: This cast may not be sound for SVG, MathML or custom elements.
7937 trapClickOnNonInteractiveElement(domElement);
7938 }
7939 break;
7940 }
7941
7942 assertValidProps(tag, nextProps);
7943
7944 var propKey = void 0;
7945 var styleName = void 0;
7946 var styleUpdates = null;
7947 for (propKey in lastProps) {
7948 if (nextProps.hasOwnProperty(propKey) || !lastProps.hasOwnProperty(propKey) || lastProps[propKey] == null) {
7949 continue;
7950 }
7951 if (propKey === STYLE$1) {
7952 var lastStyle = lastProps[propKey];
7953 for (styleName in lastStyle) {
7954 if (lastStyle.hasOwnProperty(styleName)) {
7955 if (!styleUpdates) {
7956 styleUpdates = {};
7957 }
7958 styleUpdates[styleName] = '';
7959 }
7960 }
7961 } else if (propKey === DANGEROUSLY_SET_INNER_HTML || propKey === CHILDREN) {
7962 // Noop. This is handled by the clear text mechanism.
7963 } else if (propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING$1) {
7964 // Noop
7965 } else if (propKey === AUTOFOCUS) {
7966 // Noop. It doesn't work on updates anyway.
7967 } else if (registrationNameModules.hasOwnProperty(propKey)) {
7968 // This is a special case. If any listener updates we need to ensure
7969 // that the "current" fiber pointer gets updated so we need a commit
7970 // to update this element.
7971 if (!updatePayload) {
7972 updatePayload = [];
7973 }
7974 } else {
7975 // For all other deleted properties we add it to the queue. We use
7976 // the whitelist in the commit phase instead.
7977 (updatePayload = updatePayload || []).push(propKey, null);
7978 }
7979 }
7980 for (propKey in nextProps) {
7981 var nextProp = nextProps[propKey];
7982 var lastProp = lastProps != null ? lastProps[propKey] : undefined;
7983 if (!nextProps.hasOwnProperty(propKey) || nextProp === lastProp || nextProp == null && lastProp == null) {
7984 continue;
7985 }
7986 if (propKey === STYLE$1) {
7987 {
7988 if (nextProp) {
7989 // Freeze the next style object so that we can assume it won't be
7990 // mutated. We have already warned for this in the past.
7991 Object.freeze(nextProp);
7992 }
7993 }
7994 if (lastProp) {
7995 // Unset styles on `lastProp` but not on `nextProp`.
7996 for (styleName in lastProp) {
7997 if (lastProp.hasOwnProperty(styleName) && (!nextProp || !nextProp.hasOwnProperty(styleName))) {
7998 if (!styleUpdates) {
7999 styleUpdates = {};
8000 }
8001 styleUpdates[styleName] = '';
8002 }
8003 }
8004 // Update styles that changed since `lastProp`.
8005 for (styleName in nextProp) {
8006 if (nextProp.hasOwnProperty(styleName) && lastProp[styleName] !== nextProp[styleName]) {
8007 if (!styleUpdates) {
8008 styleUpdates = {};
8009 }
8010 styleUpdates[styleName] = nextProp[styleName];
8011 }
8012 }
8013 } else {
8014 // Relies on `updateStylesByID` not mutating `styleUpdates`.
8015 if (!styleUpdates) {
8016 if (!updatePayload) {
8017 updatePayload = [];
8018 }
8019 updatePayload.push(propKey, styleUpdates);
8020 }
8021 styleUpdates = nextProp;
8022 }
8023 } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
8024 var nextHtml = nextProp ? nextProp[HTML] : undefined;
8025 var lastHtml = lastProp ? lastProp[HTML] : undefined;
8026 if (nextHtml != null) {
8027 if (lastHtml !== nextHtml) {
8028 (updatePayload = updatePayload || []).push(propKey, '' + nextHtml);
8029 }
8030 } else {
8031 // TODO: It might be too late to clear this if we have children
8032 // inserted already.
8033 }
8034 } else if (propKey === CHILDREN) {
8035 if (lastProp !== nextProp && (typeof nextProp === 'string' || typeof nextProp === 'number')) {
8036 (updatePayload = updatePayload || []).push(propKey, '' + nextProp);
8037 }
8038 } else if (propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING$1) {
8039 // Noop
8040 } else if (registrationNameModules.hasOwnProperty(propKey)) {
8041 if (nextProp != null) {
8042 // We eagerly listen to this even though we haven't committed yet.
8043 if (true && typeof nextProp !== 'function') {
8044 warnForInvalidEventListener(propKey, nextProp);
8045 }
8046 ensureListeningTo(rootContainerElement, propKey);
8047 }
8048 if (!updatePayload && lastProp !== nextProp) {
8049 // This is a special case. If any listener updates we need to ensure
8050 // that the "current" props pointer gets updated so we need a commit
8051 // to update this element.
8052 updatePayload = [];
8053 }
8054 } else {
8055 // For any other property we always add it to the queue and then we
8056 // filter it out using the whitelist during the commit.
8057 (updatePayload = updatePayload || []).push(propKey, nextProp);
8058 }
8059 }
8060 if (styleUpdates) {
8061 {
8062 validateShorthandPropertyCollisionInDev(styleUpdates, nextProps[STYLE$1]);
8063 }
8064 (updatePayload = updatePayload || []).push(STYLE$1, styleUpdates);
8065 }
8066 return updatePayload;
8067}
8068
8069// Apply the diff.
8070function updateProperties(domElement, updatePayload, tag, lastRawProps, nextRawProps) {
8071 // Update checked *before* name.
8072 // In the middle of an update, it is possible to have multiple checked.
8073 // When a checked radio tries to change name, browser makes another radio's checked false.
8074 if (tag === 'input' && nextRawProps.type === 'radio' && nextRawProps.name != null) {
8075 updateChecked(domElement, nextRawProps);
8076 }
8077
8078 var wasCustomComponentTag = isCustomComponent(tag, lastRawProps);
8079 var isCustomComponentTag = isCustomComponent(tag, nextRawProps);
8080 // Apply the diff.
8081 updateDOMProperties(domElement, updatePayload, wasCustomComponentTag, isCustomComponentTag);
8082
8083 // TODO: Ensure that an update gets scheduled if any of the special props
8084 // changed.
8085 switch (tag) {
8086 case 'input':
8087 // Update the wrapper around inputs *after* updating props. This has to
8088 // happen after `updateDOMProperties`. Otherwise HTML5 input validations
8089 // raise warnings and prevent the new value from being assigned.
8090 updateWrapper(domElement, nextRawProps);
8091 break;
8092 case 'textarea':
8093 updateWrapper$1(domElement, nextRawProps);
8094 break;
8095 case 'select':
8096 // <select> value update needs to occur after <option> children
8097 // reconciliation
8098 postUpdateWrapper(domElement, nextRawProps);
8099 break;
8100 }
8101}
8102
8103function getPossibleStandardName(propName) {
8104 {
8105 var lowerCasedName = propName.toLowerCase();
8106 if (!possibleStandardNames.hasOwnProperty(lowerCasedName)) {
8107 return null;
8108 }
8109 return possibleStandardNames[lowerCasedName] || null;
8110 }
8111 return null;
8112}
8113
8114function diffHydratedProperties(domElement, tag, rawProps, parentNamespace, rootContainerElement) {
8115 var isCustomComponentTag = void 0;
8116 var extraAttributeNames = void 0;
8117
8118 {
8119 suppressHydrationWarning = rawProps[SUPPRESS_HYDRATION_WARNING$1] === true;
8120 isCustomComponentTag = isCustomComponent(tag, rawProps);
8121 validatePropertiesInDevelopment(tag, rawProps);
8122 if (isCustomComponentTag && !didWarnShadyDOM && domElement.shadyRoot) {
8123 warning$1(false, '%s is using shady DOM. Using shady DOM with React can ' + 'cause things to break subtly.', getCurrentFiberOwnerNameInDevOrNull() || 'A component');
8124 didWarnShadyDOM = true;
8125 }
8126 }
8127
8128 // TODO: Make sure that we check isMounted before firing any of these events.
8129 switch (tag) {
8130 case 'iframe':
8131 case 'object':
8132 trapBubbledEvent(TOP_LOAD, domElement);
8133 break;
8134 case 'video':
8135 case 'audio':
8136 // Create listener for each media event
8137 for (var i = 0; i < mediaEventTypes.length; i++) {
8138 trapBubbledEvent(mediaEventTypes[i], domElement);
8139 }
8140 break;
8141 case 'source':
8142 trapBubbledEvent(TOP_ERROR, domElement);
8143 break;
8144 case 'img':
8145 case 'image':
8146 case 'link':
8147 trapBubbledEvent(TOP_ERROR, domElement);
8148 trapBubbledEvent(TOP_LOAD, domElement);
8149 break;
8150 case 'form':
8151 trapBubbledEvent(TOP_RESET, domElement);
8152 trapBubbledEvent(TOP_SUBMIT, domElement);
8153 break;
8154 case 'details':
8155 trapBubbledEvent(TOP_TOGGLE, domElement);
8156 break;
8157 case 'input':
8158 initWrapperState(domElement, rawProps);
8159 trapBubbledEvent(TOP_INVALID, domElement);
8160 // For controlled components we always need to ensure we're listening
8161 // to onChange. Even if there is no listener.
8162 ensureListeningTo(rootContainerElement, 'onChange');
8163 break;
8164 case 'option':
8165 validateProps(domElement, rawProps);
8166 break;
8167 case 'select':
8168 initWrapperState$1(domElement, rawProps);
8169 trapBubbledEvent(TOP_INVALID, domElement);
8170 // For controlled components we always need to ensure we're listening
8171 // to onChange. Even if there is no listener.
8172 ensureListeningTo(rootContainerElement, 'onChange');
8173 break;
8174 case 'textarea':
8175 initWrapperState$2(domElement, rawProps);
8176 trapBubbledEvent(TOP_INVALID, domElement);
8177 // For controlled components we always need to ensure we're listening
8178 // to onChange. Even if there is no listener.
8179 ensureListeningTo(rootContainerElement, 'onChange');
8180 break;
8181 }
8182
8183 assertValidProps(tag, rawProps);
8184
8185 {
8186 extraAttributeNames = new Set();
8187 var attributes = domElement.attributes;
8188 for (var _i = 0; _i < attributes.length; _i++) {
8189 var name = attributes[_i].name.toLowerCase();
8190 switch (name) {
8191 // Built-in SSR attribute is whitelisted
8192 case 'data-reactroot':
8193 break;
8194 // Controlled attributes are not validated
8195 // TODO: Only ignore them on controlled tags.
8196 case 'value':
8197 break;
8198 case 'checked':
8199 break;
8200 case 'selected':
8201 break;
8202 default:
8203 // Intentionally use the original name.
8204 // See discussion in https://github.com/facebook/react/pull/10676.
8205 extraAttributeNames.add(attributes[_i].name);
8206 }
8207 }
8208 }
8209
8210 var updatePayload = null;
8211 for (var propKey in rawProps) {
8212 if (!rawProps.hasOwnProperty(propKey)) {
8213 continue;
8214 }
8215 var nextProp = rawProps[propKey];
8216 if (propKey === CHILDREN) {
8217 // For text content children we compare against textContent. This
8218 // might match additional HTML that is hidden when we read it using
8219 // textContent. E.g. "foo" will match "f<span>oo</span>" but that still
8220 // satisfies our requirement. Our requirement is not to produce perfect
8221 // HTML and attributes. Ideally we should preserve structure but it's
8222 // ok not to if the visible content is still enough to indicate what
8223 // even listeners these nodes might be wired up to.
8224 // TODO: Warn if there is more than a single textNode as a child.
8225 // TODO: Should we use domElement.firstChild.nodeValue to compare?
8226 if (typeof nextProp === 'string') {
8227 if (domElement.textContent !== nextProp) {
8228 if (true && !suppressHydrationWarning) {
8229 warnForTextDifference(domElement.textContent, nextProp);
8230 }
8231 updatePayload = [CHILDREN, nextProp];
8232 }
8233 } else if (typeof nextProp === 'number') {
8234 if (domElement.textContent !== '' + nextProp) {
8235 if (true && !suppressHydrationWarning) {
8236 warnForTextDifference(domElement.textContent, nextProp);
8237 }
8238 updatePayload = [CHILDREN, '' + nextProp];
8239 }
8240 }
8241 } else if (registrationNameModules.hasOwnProperty(propKey)) {
8242 if (nextProp != null) {
8243 if (true && typeof nextProp !== 'function') {
8244 warnForInvalidEventListener(propKey, nextProp);
8245 }
8246 ensureListeningTo(rootContainerElement, propKey);
8247 }
8248 } else if (true &&
8249 // Convince Flow we've calculated it (it's DEV-only in this method.)
8250 typeof isCustomComponentTag === 'boolean') {
8251 // Validate that the properties correspond to their expected values.
8252 var serverValue = void 0;
8253 var propertyInfo = getPropertyInfo(propKey);
8254 if (suppressHydrationWarning) {
8255 // Don't bother comparing. We're ignoring all these warnings.
8256 } else if (propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING$1 ||
8257 // Controlled attributes are not validated
8258 // TODO: Only ignore them on controlled tags.
8259 propKey === 'value' || propKey === 'checked' || propKey === 'selected') {
8260 // Noop
8261 } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
8262 var serverHTML = domElement.innerHTML;
8263 var nextHtml = nextProp ? nextProp[HTML] : undefined;
8264 var expectedHTML = normalizeHTML(domElement, nextHtml != null ? nextHtml : '');
8265 if (expectedHTML !== serverHTML) {
8266 warnForPropDifference(propKey, serverHTML, expectedHTML);
8267 }
8268 } else if (propKey === STYLE$1) {
8269 // $FlowFixMe - Should be inferred as not undefined.
8270 extraAttributeNames.delete(propKey);
8271
8272 if (canDiffStyleForHydrationWarning) {
8273 var expectedStyle = createDangerousStringForStyles(nextProp);
8274 serverValue = domElement.getAttribute('style');
8275 if (expectedStyle !== serverValue) {
8276 warnForPropDifference(propKey, serverValue, expectedStyle);
8277 }
8278 }
8279 } else if (isCustomComponentTag) {
8280 // $FlowFixMe - Should be inferred as not undefined.
8281 extraAttributeNames.delete(propKey.toLowerCase());
8282 serverValue = getValueForAttribute(domElement, propKey, nextProp);
8283
8284 if (nextProp !== serverValue) {
8285 warnForPropDifference(propKey, serverValue, nextProp);
8286 }
8287 } else if (!shouldIgnoreAttribute(propKey, propertyInfo, isCustomComponentTag) && !shouldRemoveAttribute(propKey, nextProp, propertyInfo, isCustomComponentTag)) {
8288 var isMismatchDueToBadCasing = false;
8289 if (propertyInfo !== null) {
8290 // $FlowFixMe - Should be inferred as not undefined.
8291 extraAttributeNames.delete(propertyInfo.attributeName);
8292 serverValue = getValueForProperty(domElement, propKey, nextProp, propertyInfo);
8293 } else {
8294 var ownNamespace = parentNamespace;
8295 if (ownNamespace === HTML_NAMESPACE) {
8296 ownNamespace = getIntrinsicNamespace(tag);
8297 }
8298 if (ownNamespace === HTML_NAMESPACE) {
8299 // $FlowFixMe - Should be inferred as not undefined.
8300 extraAttributeNames.delete(propKey.toLowerCase());
8301 } else {
8302 var standardName = getPossibleStandardName(propKey);
8303 if (standardName !== null && standardName !== propKey) {
8304 // If an SVG prop is supplied with bad casing, it will
8305 // be successfully parsed from HTML, but will produce a mismatch
8306 // (and would be incorrectly rendered on the client).
8307 // However, we already warn about bad casing elsewhere.
8308 // So we'll skip the misleading extra mismatch warning in this case.
8309 isMismatchDueToBadCasing = true;
8310 // $FlowFixMe - Should be inferred as not undefined.
8311 extraAttributeNames.delete(standardName);
8312 }
8313 // $FlowFixMe - Should be inferred as not undefined.
8314 extraAttributeNames.delete(propKey);
8315 }
8316 serverValue = getValueForAttribute(domElement, propKey, nextProp);
8317 }
8318
8319 if (nextProp !== serverValue && !isMismatchDueToBadCasing) {
8320 warnForPropDifference(propKey, serverValue, nextProp);
8321 }
8322 }
8323 }
8324 }
8325
8326 {
8327 // $FlowFixMe - Should be inferred as not undefined.
8328 if (extraAttributeNames.size > 0 && !suppressHydrationWarning) {
8329 // $FlowFixMe - Should be inferred as not undefined.
8330 warnForExtraAttributes(extraAttributeNames);
8331 }
8332 }
8333
8334 switch (tag) {
8335 case 'input':
8336 // TODO: Make sure we check if this is still unmounted or do any clean
8337 // up necessary since we never stop tracking anymore.
8338 track(domElement);
8339 postMountWrapper(domElement, rawProps, true);
8340 break;
8341 case 'textarea':
8342 // TODO: Make sure we check if this is still unmounted or do any clean
8343 // up necessary since we never stop tracking anymore.
8344 track(domElement);
8345 postMountWrapper$3(domElement, rawProps);
8346 break;
8347 case 'select':
8348 case 'option':
8349 // For input and textarea we current always set the value property at
8350 // post mount to force it to diverge from attributes. However, for
8351 // option and select we don't quite do the same thing and select
8352 // is not resilient to the DOM state changing so we don't do that here.
8353 // TODO: Consider not doing this for input and textarea.
8354 break;
8355 default:
8356 if (typeof rawProps.onClick === 'function') {
8357 // TODO: This cast may not be sound for SVG, MathML or custom elements.
8358 trapClickOnNonInteractiveElement(domElement);
8359 }
8360 break;
8361 }
8362
8363 return updatePayload;
8364}
8365
8366function diffHydratedText(textNode, text) {
8367 var isDifferent = textNode.nodeValue !== text;
8368 return isDifferent;
8369}
8370
8371function warnForUnmatchedText(textNode, text) {
8372 {
8373 warnForTextDifference(textNode.nodeValue, text);
8374 }
8375}
8376
8377function warnForDeletedHydratableElement(parentNode, child) {
8378 {
8379 if (didWarnInvalidHydration) {
8380 return;
8381 }
8382 didWarnInvalidHydration = true;
8383 warningWithoutStack$1(false, 'Did not expect server HTML to contain a <%s> in <%s>.', child.nodeName.toLowerCase(), parentNode.nodeName.toLowerCase());
8384 }
8385}
8386
8387function warnForDeletedHydratableText(parentNode, child) {
8388 {
8389 if (didWarnInvalidHydration) {
8390 return;
8391 }
8392 didWarnInvalidHydration = true;
8393 warningWithoutStack$1(false, 'Did not expect server HTML to contain the text node "%s" in <%s>.', child.nodeValue, parentNode.nodeName.toLowerCase());
8394 }
8395}
8396
8397function warnForInsertedHydratedElement(parentNode, tag, props) {
8398 {
8399 if (didWarnInvalidHydration) {
8400 return;
8401 }
8402 didWarnInvalidHydration = true;
8403 warningWithoutStack$1(false, 'Expected server HTML to contain a matching <%s> in <%s>.', tag, parentNode.nodeName.toLowerCase());
8404 }
8405}
8406
8407function warnForInsertedHydratedText(parentNode, text) {
8408 {
8409 if (text === '') {
8410 // We expect to insert empty text nodes since they're not represented in
8411 // the HTML.
8412 // TODO: Remove this special case if we can just avoid inserting empty
8413 // text nodes.
8414 return;
8415 }
8416 if (didWarnInvalidHydration) {
8417 return;
8418 }
8419 didWarnInvalidHydration = true;
8420 warningWithoutStack$1(false, 'Expected server HTML to contain a matching text node for "%s" in <%s>.', text, parentNode.nodeName.toLowerCase());
8421 }
8422}
8423
8424function restoreControlledState$1(domElement, tag, props) {
8425 switch (tag) {
8426 case 'input':
8427 restoreControlledState(domElement, props);
8428 return;
8429 case 'textarea':
8430 restoreControlledState$3(domElement, props);
8431 return;
8432 case 'select':
8433 restoreControlledState$2(domElement, props);
8434 return;
8435 }
8436}
8437
8438// TODO: direct imports like some-package/src/* are bad. Fix me.
8439var validateDOMNesting = function () {};
8440var updatedAncestorInfo = function () {};
8441
8442{
8443 // This validation code was written based on the HTML5 parsing spec:
8444 // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope
8445 //
8446 // Note: this does not catch all invalid nesting, nor does it try to (as it's
8447 // not clear what practical benefit doing so provides); instead, we warn only
8448 // for cases where the parser will give a parse tree differing from what React
8449 // intended. For example, <b><div></div></b> is invalid but we don't warn
8450 // because it still parses correctly; we do warn for other cases like nested
8451 // <p> tags where the beginning of the second element implicitly closes the
8452 // first, causing a confusing mess.
8453
8454 // https://html.spec.whatwg.org/multipage/syntax.html#special
8455 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'];
8456
8457 // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-scope
8458 var inScopeTags = ['applet', 'caption', 'html', 'table', 'td', 'th', 'marquee', 'object', 'template',
8459
8460 // https://html.spec.whatwg.org/multipage/syntax.html#html-integration-point
8461 // TODO: Distinguish by namespace here -- for <title>, including it here
8462 // errs on the side of fewer warnings
8463 'foreignObject', 'desc', 'title'];
8464
8465 // https://html.spec.whatwg.org/multipage/syntax.html#has-an-element-in-button-scope
8466 var buttonScopeTags = inScopeTags.concat(['button']);
8467
8468 // https://html.spec.whatwg.org/multipage/syntax.html#generate-implied-end-tags
8469 var impliedEndTags = ['dd', 'dt', 'li', 'option', 'optgroup', 'p', 'rp', 'rt'];
8470
8471 var emptyAncestorInfo = {
8472 current: null,
8473
8474 formTag: null,
8475 aTagInScope: null,
8476 buttonTagInScope: null,
8477 nobrTagInScope: null,
8478 pTagInButtonScope: null,
8479
8480 listItemTagAutoclosing: null,
8481 dlItemTagAutoclosing: null
8482 };
8483
8484 updatedAncestorInfo = function (oldInfo, tag) {
8485 var ancestorInfo = _assign({}, oldInfo || emptyAncestorInfo);
8486 var info = { tag: tag };
8487
8488 if (inScopeTags.indexOf(tag) !== -1) {
8489 ancestorInfo.aTagInScope = null;
8490 ancestorInfo.buttonTagInScope = null;
8491 ancestorInfo.nobrTagInScope = null;
8492 }
8493 if (buttonScopeTags.indexOf(tag) !== -1) {
8494 ancestorInfo.pTagInButtonScope = null;
8495 }
8496
8497 // See rules for 'li', 'dd', 'dt' start tags in
8498 // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody
8499 if (specialTags.indexOf(tag) !== -1 && tag !== 'address' && tag !== 'div' && tag !== 'p') {
8500 ancestorInfo.listItemTagAutoclosing = null;
8501 ancestorInfo.dlItemTagAutoclosing = null;
8502 }
8503
8504 ancestorInfo.current = info;
8505
8506 if (tag === 'form') {
8507 ancestorInfo.formTag = info;
8508 }
8509 if (tag === 'a') {
8510 ancestorInfo.aTagInScope = info;
8511 }
8512 if (tag === 'button') {
8513 ancestorInfo.buttonTagInScope = info;
8514 }
8515 if (tag === 'nobr') {
8516 ancestorInfo.nobrTagInScope = info;
8517 }
8518 if (tag === 'p') {
8519 ancestorInfo.pTagInButtonScope = info;
8520 }
8521 if (tag === 'li') {
8522 ancestorInfo.listItemTagAutoclosing = info;
8523 }
8524 if (tag === 'dd' || tag === 'dt') {
8525 ancestorInfo.dlItemTagAutoclosing = info;
8526 }
8527
8528 return ancestorInfo;
8529 };
8530
8531 /**
8532 * Returns whether
8533 */
8534 var isTagValidWithParent = function (tag, parentTag) {
8535 // First, let's check if we're in an unusual parsing mode...
8536 switch (parentTag) {
8537 // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inselect
8538 case 'select':
8539 return tag === 'option' || tag === 'optgroup' || tag === '#text';
8540 case 'optgroup':
8541 return tag === 'option' || tag === '#text';
8542 // Strictly speaking, seeing an <option> doesn't mean we're in a <select>
8543 // but
8544 case 'option':
8545 return tag === '#text';
8546 // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intd
8547 // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incaption
8548 // No special behavior since these rules fall back to "in body" mode for
8549 // all except special table nodes which cause bad parsing behavior anyway.
8550
8551 // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intr
8552 case 'tr':
8553 return tag === 'th' || tag === 'td' || tag === 'style' || tag === 'script' || tag === 'template';
8554 // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intbody
8555 case 'tbody':
8556 case 'thead':
8557 case 'tfoot':
8558 return tag === 'tr' || tag === 'style' || tag === 'script' || tag === 'template';
8559 // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incolgroup
8560 case 'colgroup':
8561 return tag === 'col' || tag === 'template';
8562 // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intable
8563 case 'table':
8564 return tag === 'caption' || tag === 'colgroup' || tag === 'tbody' || tag === 'tfoot' || tag === 'thead' || tag === 'style' || tag === 'script' || tag === 'template';
8565 // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inhead
8566 case 'head':
8567 return tag === 'base' || tag === 'basefont' || tag === 'bgsound' || tag === 'link' || tag === 'meta' || tag === 'title' || tag === 'noscript' || tag === 'noframes' || tag === 'style' || tag === 'script' || tag === 'template';
8568 // https://html.spec.whatwg.org/multipage/semantics.html#the-html-element
8569 case 'html':
8570 return tag === 'head' || tag === 'body';
8571 case '#document':
8572 return tag === 'html';
8573 }
8574
8575 // Probably in the "in body" parsing mode, so we outlaw only tag combos
8576 // where the parsing rules cause implicit opens or closes to be added.
8577 // https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody
8578 switch (tag) {
8579 case 'h1':
8580 case 'h2':
8581 case 'h3':
8582 case 'h4':
8583 case 'h5':
8584 case 'h6':
8585 return parentTag !== 'h1' && parentTag !== 'h2' && parentTag !== 'h3' && parentTag !== 'h4' && parentTag !== 'h5' && parentTag !== 'h6';
8586
8587 case 'rp':
8588 case 'rt':
8589 return impliedEndTags.indexOf(parentTag) === -1;
8590
8591 case 'body':
8592 case 'caption':
8593 case 'col':
8594 case 'colgroup':
8595 case 'frame':
8596 case 'head':
8597 case 'html':
8598 case 'tbody':
8599 case 'td':
8600 case 'tfoot':
8601 case 'th':
8602 case 'thead':
8603 case 'tr':
8604 // These tags are only valid with a few parents that have special child
8605 // parsing rules -- if we're down here, then none of those matched and
8606 // so we allow it only if we don't know what the parent is, as all other
8607 // cases are invalid.
8608 return parentTag == null;
8609 }
8610
8611 return true;
8612 };
8613
8614 /**
8615 * Returns whether
8616 */
8617 var findInvalidAncestorForTag = function (tag, ancestorInfo) {
8618 switch (tag) {
8619 case 'address':
8620 case 'article':
8621 case 'aside':
8622 case 'blockquote':
8623 case 'center':
8624 case 'details':
8625 case 'dialog':
8626 case 'dir':
8627 case 'div':
8628 case 'dl':
8629 case 'fieldset':
8630 case 'figcaption':
8631 case 'figure':
8632 case 'footer':
8633 case 'header':
8634 case 'hgroup':
8635 case 'main':
8636 case 'menu':
8637 case 'nav':
8638 case 'ol':
8639 case 'p':
8640 case 'section':
8641 case 'summary':
8642 case 'ul':
8643 case 'pre':
8644 case 'listing':
8645 case 'table':
8646 case 'hr':
8647 case 'xmp':
8648 case 'h1':
8649 case 'h2':
8650 case 'h3':
8651 case 'h4':
8652 case 'h5':
8653 case 'h6':
8654 return ancestorInfo.pTagInButtonScope;
8655
8656 case 'form':
8657 return ancestorInfo.formTag || ancestorInfo.pTagInButtonScope;
8658
8659 case 'li':
8660 return ancestorInfo.listItemTagAutoclosing;
8661
8662 case 'dd':
8663 case 'dt':
8664 return ancestorInfo.dlItemTagAutoclosing;
8665
8666 case 'button':
8667 return ancestorInfo.buttonTagInScope;
8668
8669 case 'a':
8670 // Spec says something about storing a list of markers, but it sounds
8671 // equivalent to this check.
8672 return ancestorInfo.aTagInScope;
8673
8674 case 'nobr':
8675 return ancestorInfo.nobrTagInScope;
8676 }
8677
8678 return null;
8679 };
8680
8681 var didWarn = {};
8682
8683 validateDOMNesting = function (childTag, childText, ancestorInfo) {
8684 ancestorInfo = ancestorInfo || emptyAncestorInfo;
8685 var parentInfo = ancestorInfo.current;
8686 var parentTag = parentInfo && parentInfo.tag;
8687
8688 if (childText != null) {
8689 !(childTag == null) ? warningWithoutStack$1(false, 'validateDOMNesting: when childText is passed, childTag should be null') : void 0;
8690 childTag = '#text';
8691 }
8692
8693 var invalidParent = isTagValidWithParent(childTag, parentTag) ? null : parentInfo;
8694 var invalidAncestor = invalidParent ? null : findInvalidAncestorForTag(childTag, ancestorInfo);
8695 var invalidParentOrAncestor = invalidParent || invalidAncestor;
8696 if (!invalidParentOrAncestor) {
8697 return;
8698 }
8699
8700 var ancestorTag = invalidParentOrAncestor.tag;
8701 var addendum = getCurrentFiberStackInDev();
8702
8703 var warnKey = !!invalidParent + '|' + childTag + '|' + ancestorTag + '|' + addendum;
8704 if (didWarn[warnKey]) {
8705 return;
8706 }
8707 didWarn[warnKey] = true;
8708
8709 var tagDisplayName = childTag;
8710 var whitespaceInfo = '';
8711 if (childTag === '#text') {
8712 if (/\S/.test(childText)) {
8713 tagDisplayName = 'Text nodes';
8714 } else {
8715 tagDisplayName = 'Whitespace text nodes';
8716 whitespaceInfo = " Make sure you don't have any extra whitespace between tags on " + 'each line of your source code.';
8717 }
8718 } else {
8719 tagDisplayName = '<' + childTag + '>';
8720 }
8721
8722 if (invalidParent) {
8723 var info = '';
8724 if (ancestorTag === 'table' && childTag === 'tr') {
8725 info += ' Add a <tbody> to your code to match the DOM tree generated by ' + 'the browser.';
8726 }
8727 warningWithoutStack$1(false, 'validateDOMNesting(...): %s cannot appear as a child of <%s>.%s%s%s', tagDisplayName, ancestorTag, whitespaceInfo, info, addendum);
8728 } else {
8729 warningWithoutStack$1(false, 'validateDOMNesting(...): %s cannot appear as a descendant of ' + '<%s>.%s', tagDisplayName, ancestorTag, addendum);
8730 }
8731 };
8732}
8733
8734var ReactInternals$1 = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
8735
8736var _ReactInternals$Sched = ReactInternals$1.Scheduler;
8737var unstable_cancelCallback = _ReactInternals$Sched.unstable_cancelCallback;
8738var unstable_now = _ReactInternals$Sched.unstable_now;
8739var unstable_scheduleCallback = _ReactInternals$Sched.unstable_scheduleCallback;
8740var unstable_shouldYield = _ReactInternals$Sched.unstable_shouldYield;
8741var unstable_getFirstCallbackNode = _ReactInternals$Sched.unstable_getFirstCallbackNode;
8742var unstable_runWithPriority = _ReactInternals$Sched.unstable_runWithPriority;
8743var unstable_next = _ReactInternals$Sched.unstable_next;
8744var unstable_continueExecution = _ReactInternals$Sched.unstable_continueExecution;
8745var unstable_pauseExecution = _ReactInternals$Sched.unstable_pauseExecution;
8746var unstable_getCurrentPriorityLevel = _ReactInternals$Sched.unstable_getCurrentPriorityLevel;
8747var unstable_ImmediatePriority = _ReactInternals$Sched.unstable_ImmediatePriority;
8748var unstable_UserBlockingPriority = _ReactInternals$Sched.unstable_UserBlockingPriority;
8749var unstable_NormalPriority = _ReactInternals$Sched.unstable_NormalPriority;
8750var unstable_LowPriority = _ReactInternals$Sched.unstable_LowPriority;
8751var unstable_IdlePriority = _ReactInternals$Sched.unstable_IdlePriority;
8752
8753// Renderers that don't support persistence
8754// can re-export everything from this module.
8755
8756function shim() {
8757 invariant(false, 'The current renderer does not support persistence. This error is likely caused by a bug in React. Please file an issue.');
8758}
8759
8760// Persistence (when unsupported)
8761var supportsPersistence = false;
8762var cloneInstance = shim;
8763var createContainerChildSet = shim;
8764var appendChildToContainerChildSet = shim;
8765var finalizeContainerChildren = shim;
8766var replaceContainerChildren = shim;
8767var cloneHiddenInstance = shim;
8768var cloneUnhiddenInstance = shim;
8769var createHiddenTextInstance = shim;
8770
8771var SUPPRESS_HYDRATION_WARNING = void 0;
8772{
8773 SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
8774}
8775
8776var SUSPENSE_START_DATA = '$';
8777var SUSPENSE_END_DATA = '/$';
8778
8779var STYLE = 'style';
8780
8781var eventsEnabled = null;
8782var selectionInformation = null;
8783
8784function shouldAutoFocusHostComponent(type, props) {
8785 switch (type) {
8786 case 'button':
8787 case 'input':
8788 case 'select':
8789 case 'textarea':
8790 return !!props.autoFocus;
8791 }
8792 return false;
8793}
8794
8795function getRootHostContext(rootContainerInstance) {
8796 var type = void 0;
8797 var namespace = void 0;
8798 var nodeType = rootContainerInstance.nodeType;
8799 switch (nodeType) {
8800 case DOCUMENT_NODE:
8801 case DOCUMENT_FRAGMENT_NODE:
8802 {
8803 type = nodeType === DOCUMENT_NODE ? '#document' : '#fragment';
8804 var root = rootContainerInstance.documentElement;
8805 namespace = root ? root.namespaceURI : getChildNamespace(null, '');
8806 break;
8807 }
8808 default:
8809 {
8810 var container = nodeType === COMMENT_NODE ? rootContainerInstance.parentNode : rootContainerInstance;
8811 var ownNamespace = container.namespaceURI || null;
8812 type = container.tagName;
8813 namespace = getChildNamespace(ownNamespace, type);
8814 break;
8815 }
8816 }
8817 {
8818 var validatedTag = type.toLowerCase();
8819 var _ancestorInfo = updatedAncestorInfo(null, validatedTag);
8820 return { namespace: namespace, ancestorInfo: _ancestorInfo };
8821 }
8822 return namespace;
8823}
8824
8825function getChildHostContext(parentHostContext, type, rootContainerInstance) {
8826 {
8827 var parentHostContextDev = parentHostContext;
8828 var _namespace = getChildNamespace(parentHostContextDev.namespace, type);
8829 var _ancestorInfo2 = updatedAncestorInfo(parentHostContextDev.ancestorInfo, type);
8830 return { namespace: _namespace, ancestorInfo: _ancestorInfo2 };
8831 }
8832 var parentNamespace = parentHostContext;
8833 return getChildNamespace(parentNamespace, type);
8834}
8835
8836function getPublicInstance(instance) {
8837 return instance;
8838}
8839
8840function prepareForCommit(containerInfo) {
8841 eventsEnabled = isEnabled();
8842 selectionInformation = getSelectionInformation();
8843 setEnabled(false);
8844}
8845
8846function resetAfterCommit(containerInfo) {
8847 restoreSelection(selectionInformation);
8848 selectionInformation = null;
8849 setEnabled(eventsEnabled);
8850 eventsEnabled = null;
8851}
8852
8853function createInstance(type, props, rootContainerInstance, hostContext, internalInstanceHandle) {
8854 var parentNamespace = void 0;
8855 {
8856 // TODO: take namespace into account when validating.
8857 var hostContextDev = hostContext;
8858 validateDOMNesting(type, null, hostContextDev.ancestorInfo);
8859 if (typeof props.children === 'string' || typeof props.children === 'number') {
8860 var string = '' + props.children;
8861 var ownAncestorInfo = updatedAncestorInfo(hostContextDev.ancestorInfo, type);
8862 validateDOMNesting(null, string, ownAncestorInfo);
8863 }
8864 parentNamespace = hostContextDev.namespace;
8865 }
8866 var domElement = createElement(type, props, rootContainerInstance, parentNamespace);
8867 precacheFiberNode(internalInstanceHandle, domElement);
8868 updateFiberProps(domElement, props);
8869 return domElement;
8870}
8871
8872function appendInitialChild(parentInstance, child) {
8873 parentInstance.appendChild(child);
8874}
8875
8876function finalizeInitialChildren(domElement, type, props, rootContainerInstance, hostContext) {
8877 setInitialProperties(domElement, type, props, rootContainerInstance);
8878 return shouldAutoFocusHostComponent(type, props);
8879}
8880
8881function prepareUpdate(domElement, type, oldProps, newProps, rootContainerInstance, hostContext) {
8882 {
8883 var hostContextDev = hostContext;
8884 if (typeof newProps.children !== typeof oldProps.children && (typeof newProps.children === 'string' || typeof newProps.children === 'number')) {
8885 var string = '' + newProps.children;
8886 var ownAncestorInfo = updatedAncestorInfo(hostContextDev.ancestorInfo, type);
8887 validateDOMNesting(null, string, ownAncestorInfo);
8888 }
8889 }
8890 return diffProperties(domElement, type, oldProps, newProps, rootContainerInstance);
8891}
8892
8893function shouldSetTextContent(type, props) {
8894 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;
8895}
8896
8897function shouldDeprioritizeSubtree(type, props) {
8898 return !!props.hidden;
8899}
8900
8901function createTextInstance(text, rootContainerInstance, hostContext, internalInstanceHandle) {
8902 {
8903 var hostContextDev = hostContext;
8904 validateDOMNesting(null, text, hostContextDev.ancestorInfo);
8905 }
8906 var textNode = createTextNode(text, rootContainerInstance);
8907 precacheFiberNode(internalInstanceHandle, textNode);
8908 return textNode;
8909}
8910
8911var isPrimaryRenderer = true;
8912// This initialization code may run even on server environments
8913// if a component just imports ReactDOM (e.g. for findDOMNode).
8914// Some environments might not have setTimeout or clearTimeout.
8915var scheduleTimeout = typeof setTimeout === 'function' ? setTimeout : undefined;
8916var cancelTimeout = typeof clearTimeout === 'function' ? clearTimeout : undefined;
8917var noTimeout = -1;
8918var schedulePassiveEffects = unstable_scheduleCallback;
8919var cancelPassiveEffects = unstable_cancelCallback;
8920
8921// -------------------
8922// Mutation
8923// -------------------
8924
8925var supportsMutation = true;
8926
8927function commitMount(domElement, type, newProps, internalInstanceHandle) {
8928 // Despite the naming that might imply otherwise, this method only
8929 // fires if there is an `Update` effect scheduled during mounting.
8930 // This happens if `finalizeInitialChildren` returns `true` (which it
8931 // does to implement the `autoFocus` attribute on the client). But
8932 // there are also other cases when this might happen (such as patching
8933 // up text content during hydration mismatch). So we'll check this again.
8934 if (shouldAutoFocusHostComponent(type, newProps)) {
8935 domElement.focus();
8936 }
8937}
8938
8939function commitUpdate(domElement, updatePayload, type, oldProps, newProps, internalInstanceHandle) {
8940 // Update the props handle so that we know which props are the ones with
8941 // with current event handlers.
8942 updateFiberProps(domElement, newProps);
8943 // Apply the diff to the DOM node.
8944 updateProperties(domElement, updatePayload, type, oldProps, newProps);
8945}
8946
8947function resetTextContent(domElement) {
8948 setTextContent(domElement, '');
8949}
8950
8951function commitTextUpdate(textInstance, oldText, newText) {
8952 textInstance.nodeValue = newText;
8953}
8954
8955function appendChild(parentInstance, child) {
8956 parentInstance.appendChild(child);
8957}
8958
8959function appendChildToContainer(container, child) {
8960 var parentNode = void 0;
8961 if (container.nodeType === COMMENT_NODE) {
8962 parentNode = container.parentNode;
8963 parentNode.insertBefore(child, container);
8964 } else {
8965 parentNode = container;
8966 parentNode.appendChild(child);
8967 }
8968 // This container might be used for a portal.
8969 // If something inside a portal is clicked, that click should bubble
8970 // through the React tree. However, on Mobile Safari the click would
8971 // never bubble through the *DOM* tree unless an ancestor with onclick
8972 // event exists. So we wouldn't see it and dispatch it.
8973 // This is why we ensure that non React root containers have inline onclick
8974 // defined.
8975 // https://github.com/facebook/react/issues/11918
8976 var reactRootContainer = container._reactRootContainer;
8977 if ((reactRootContainer === null || reactRootContainer === undefined) && parentNode.onclick === null) {
8978 // TODO: This cast may not be sound for SVG, MathML or custom elements.
8979 trapClickOnNonInteractiveElement(parentNode);
8980 }
8981}
8982
8983function insertBefore(parentInstance, child, beforeChild) {
8984 parentInstance.insertBefore(child, beforeChild);
8985}
8986
8987function insertInContainerBefore(container, child, beforeChild) {
8988 if (container.nodeType === COMMENT_NODE) {
8989 container.parentNode.insertBefore(child, beforeChild);
8990 } else {
8991 container.insertBefore(child, beforeChild);
8992 }
8993}
8994
8995function removeChild(parentInstance, child) {
8996 parentInstance.removeChild(child);
8997}
8998
8999function removeChildFromContainer(container, child) {
9000 if (container.nodeType === COMMENT_NODE) {
9001 container.parentNode.removeChild(child);
9002 } else {
9003 container.removeChild(child);
9004 }
9005}
9006
9007function clearSuspenseBoundary(parentInstance, suspenseInstance) {
9008 var node = suspenseInstance;
9009 // Delete all nodes within this suspense boundary.
9010 // There might be nested nodes so we need to keep track of how
9011 // deep we are and only break out when we're back on top.
9012 var depth = 0;
9013 do {
9014 var nextNode = node.nextSibling;
9015 parentInstance.removeChild(node);
9016 if (nextNode && nextNode.nodeType === COMMENT_NODE) {
9017 var data = nextNode.data;
9018 if (data === SUSPENSE_END_DATA) {
9019 if (depth === 0) {
9020 parentInstance.removeChild(nextNode);
9021 return;
9022 } else {
9023 depth--;
9024 }
9025 } else if (data === SUSPENSE_START_DATA) {
9026 depth++;
9027 }
9028 }
9029 node = nextNode;
9030 } while (node);
9031 // TODO: Warn, we didn't find the end comment boundary.
9032}
9033
9034function clearSuspenseBoundaryFromContainer(container, suspenseInstance) {
9035 if (container.nodeType === COMMENT_NODE) {
9036 clearSuspenseBoundary(container.parentNode, suspenseInstance);
9037 } else if (container.nodeType === ELEMENT_NODE) {
9038 clearSuspenseBoundary(container, suspenseInstance);
9039 } else {
9040 // Document nodes should never contain suspense boundaries.
9041 }
9042}
9043
9044function hideInstance(instance) {
9045 // TODO: Does this work for all element types? What about MathML? Should we
9046 // pass host context to this method?
9047 instance = instance;
9048 instance.style.display = 'none';
9049}
9050
9051function hideTextInstance(textInstance) {
9052 textInstance.nodeValue = '';
9053}
9054
9055function unhideInstance(instance, props) {
9056 instance = instance;
9057 var styleProp = props[STYLE];
9058 var display = styleProp !== undefined && styleProp !== null && styleProp.hasOwnProperty('display') ? styleProp.display : null;
9059 instance.style.display = dangerousStyleValue('display', display);
9060}
9061
9062function unhideTextInstance(textInstance, text) {
9063 textInstance.nodeValue = text;
9064}
9065
9066// -------------------
9067// Hydration
9068// -------------------
9069
9070var supportsHydration = true;
9071
9072function canHydrateInstance(instance, type, props) {
9073 if (instance.nodeType !== ELEMENT_NODE || type.toLowerCase() !== instance.nodeName.toLowerCase()) {
9074 return null;
9075 }
9076 // This has now been refined to an element node.
9077 return instance;
9078}
9079
9080function canHydrateTextInstance(instance, text) {
9081 if (text === '' || instance.nodeType !== TEXT_NODE) {
9082 // Empty strings are not parsed by HTML so there won't be a correct match here.
9083 return null;
9084 }
9085 // This has now been refined to a text node.
9086 return instance;
9087}
9088
9089function canHydrateSuspenseInstance(instance) {
9090 if (instance.nodeType !== COMMENT_NODE) {
9091 // Empty strings are not parsed by HTML so there won't be a correct match here.
9092 return null;
9093 }
9094 // This has now been refined to a suspense node.
9095 return instance;
9096}
9097
9098function getNextHydratableSibling(instance) {
9099 var node = instance.nextSibling;
9100 // Skip non-hydratable nodes.
9101 while (node && node.nodeType !== ELEMENT_NODE && node.nodeType !== TEXT_NODE && (!enableSuspenseServerRenderer || node.nodeType !== COMMENT_NODE || node.data !== SUSPENSE_START_DATA)) {
9102 node = node.nextSibling;
9103 }
9104 return node;
9105}
9106
9107function getFirstHydratableChild(parentInstance) {
9108 var next = parentInstance.firstChild;
9109 // Skip non-hydratable nodes.
9110 while (next && next.nodeType !== ELEMENT_NODE && next.nodeType !== TEXT_NODE && (!enableSuspenseServerRenderer || next.nodeType !== COMMENT_NODE || next.data !== SUSPENSE_START_DATA)) {
9111 next = next.nextSibling;
9112 }
9113 return next;
9114}
9115
9116function hydrateInstance(instance, type, props, rootContainerInstance, hostContext, internalInstanceHandle) {
9117 precacheFiberNode(internalInstanceHandle, instance);
9118 // TODO: Possibly defer this until the commit phase where all the events
9119 // get attached.
9120 updateFiberProps(instance, props);
9121 var parentNamespace = void 0;
9122 {
9123 var hostContextDev = hostContext;
9124 parentNamespace = hostContextDev.namespace;
9125 }
9126 return diffHydratedProperties(instance, type, props, parentNamespace, rootContainerInstance);
9127}
9128
9129function hydrateTextInstance(textInstance, text, internalInstanceHandle) {
9130 precacheFiberNode(internalInstanceHandle, textInstance);
9131 return diffHydratedText(textInstance, text);
9132}
9133
9134function getNextHydratableInstanceAfterSuspenseInstance(suspenseInstance) {
9135 var node = suspenseInstance.nextSibling;
9136 // Skip past all nodes within this suspense boundary.
9137 // There might be nested nodes so we need to keep track of how
9138 // deep we are and only break out when we're back on top.
9139 var depth = 0;
9140 while (node) {
9141 if (node.nodeType === COMMENT_NODE) {
9142 var data = node.data;
9143 if (data === SUSPENSE_END_DATA) {
9144 if (depth === 0) {
9145 return getNextHydratableSibling(node);
9146 } else {
9147 depth--;
9148 }
9149 } else if (data === SUSPENSE_START_DATA) {
9150 depth++;
9151 }
9152 }
9153 node = node.nextSibling;
9154 }
9155 // TODO: Warn, we didn't find the end comment boundary.
9156 return null;
9157}
9158
9159function didNotMatchHydratedContainerTextInstance(parentContainer, textInstance, text) {
9160 {
9161 warnForUnmatchedText(textInstance, text);
9162 }
9163}
9164
9165function didNotMatchHydratedTextInstance(parentType, parentProps, parentInstance, textInstance, text) {
9166 if (true && parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
9167 warnForUnmatchedText(textInstance, text);
9168 }
9169}
9170
9171function didNotHydrateContainerInstance(parentContainer, instance) {
9172 {
9173 if (instance.nodeType === ELEMENT_NODE) {
9174 warnForDeletedHydratableElement(parentContainer, instance);
9175 } else if (instance.nodeType === COMMENT_NODE) {
9176 // TODO: warnForDeletedHydratableSuspenseBoundary
9177 } else {
9178 warnForDeletedHydratableText(parentContainer, instance);
9179 }
9180 }
9181}
9182
9183function didNotHydrateInstance(parentType, parentProps, parentInstance, instance) {
9184 if (true && parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
9185 if (instance.nodeType === ELEMENT_NODE) {
9186 warnForDeletedHydratableElement(parentInstance, instance);
9187 } else if (instance.nodeType === COMMENT_NODE) {
9188 // TODO: warnForDeletedHydratableSuspenseBoundary
9189 } else {
9190 warnForDeletedHydratableText(parentInstance, instance);
9191 }
9192 }
9193}
9194
9195function didNotFindHydratableContainerInstance(parentContainer, type, props) {
9196 {
9197 warnForInsertedHydratedElement(parentContainer, type, props);
9198 }
9199}
9200
9201function didNotFindHydratableContainerTextInstance(parentContainer, text) {
9202 {
9203 warnForInsertedHydratedText(parentContainer, text);
9204 }
9205}
9206
9207
9208
9209function didNotFindHydratableInstance(parentType, parentProps, parentInstance, type, props) {
9210 if (true && parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
9211 warnForInsertedHydratedElement(parentInstance, type, props);
9212 }
9213}
9214
9215function didNotFindHydratableTextInstance(parentType, parentProps, parentInstance, text) {
9216 if (true && parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
9217 warnForInsertedHydratedText(parentInstance, text);
9218 }
9219}
9220
9221function didNotFindHydratableSuspenseInstance(parentType, parentProps, parentInstance) {
9222 if (true && parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
9223 // TODO: warnForInsertedHydratedSuspense(parentInstance);
9224 }
9225}
9226
9227// Prefix measurements so that it's possible to filter them.
9228// Longer prefixes are hard to read in DevTools.
9229var reactEmoji = '\u269B';
9230var warningEmoji = '\u26D4';
9231var supportsUserTiming = typeof performance !== 'undefined' && typeof performance.mark === 'function' && typeof performance.clearMarks === 'function' && typeof performance.measure === 'function' && typeof performance.clearMeasures === 'function';
9232
9233// Keep track of current fiber so that we know the path to unwind on pause.
9234// TODO: this looks the same as nextUnitOfWork in scheduler. Can we unify them?
9235var currentFiber = null;
9236// If we're in the middle of user code, which fiber and method is it?
9237// Reusing `currentFiber` would be confusing for this because user code fiber
9238// can change during commit phase too, but we don't need to unwind it (since
9239// lifecycles in the commit phase don't resemble a tree).
9240var currentPhase = null;
9241var currentPhaseFiber = null;
9242// Did lifecycle hook schedule an update? This is often a performance problem,
9243// so we will keep track of it, and include it in the report.
9244// Track commits caused by cascading updates.
9245var isCommitting = false;
9246var hasScheduledUpdateInCurrentCommit = false;
9247var hasScheduledUpdateInCurrentPhase = false;
9248var commitCountInCurrentWorkLoop = 0;
9249var effectCountInCurrentCommit = 0;
9250var isWaitingForCallback = false;
9251// During commits, we only show a measurement once per method name
9252// to avoid stretch the commit phase with measurement overhead.
9253var labelsInCurrentCommit = new Set();
9254
9255var formatMarkName = function (markName) {
9256 return reactEmoji + ' ' + markName;
9257};
9258
9259var formatLabel = function (label, warning) {
9260 var prefix = warning ? warningEmoji + ' ' : reactEmoji + ' ';
9261 var suffix = warning ? ' Warning: ' + warning : '';
9262 return '' + prefix + label + suffix;
9263};
9264
9265var beginMark = function (markName) {
9266 performance.mark(formatMarkName(markName));
9267};
9268
9269var clearMark = function (markName) {
9270 performance.clearMarks(formatMarkName(markName));
9271};
9272
9273var endMark = function (label, markName, warning) {
9274 var formattedMarkName = formatMarkName(markName);
9275 var formattedLabel = formatLabel(label, warning);
9276 try {
9277 performance.measure(formattedLabel, formattedMarkName);
9278 } catch (err) {}
9279 // If previous mark was missing for some reason, this will throw.
9280 // This could only happen if React crashed in an unexpected place earlier.
9281 // Don't pile on with more errors.
9282
9283 // Clear marks immediately to avoid growing buffer.
9284 performance.clearMarks(formattedMarkName);
9285 performance.clearMeasures(formattedLabel);
9286};
9287
9288var getFiberMarkName = function (label, debugID) {
9289 return label + ' (#' + debugID + ')';
9290};
9291
9292var getFiberLabel = function (componentName, isMounted, phase) {
9293 if (phase === null) {
9294 // These are composite component total time measurements.
9295 return componentName + ' [' + (isMounted ? 'update' : 'mount') + ']';
9296 } else {
9297 // Composite component methods.
9298 return componentName + '.' + phase;
9299 }
9300};
9301
9302var beginFiberMark = function (fiber, phase) {
9303 var componentName = getComponentName(fiber.type) || 'Unknown';
9304 var debugID = fiber._debugID;
9305 var isMounted = fiber.alternate !== null;
9306 var label = getFiberLabel(componentName, isMounted, phase);
9307
9308 if (isCommitting && labelsInCurrentCommit.has(label)) {
9309 // During the commit phase, we don't show duplicate labels because
9310 // there is a fixed overhead for every measurement, and we don't
9311 // want to stretch the commit phase beyond necessary.
9312 return false;
9313 }
9314 labelsInCurrentCommit.add(label);
9315
9316 var markName = getFiberMarkName(label, debugID);
9317 beginMark(markName);
9318 return true;
9319};
9320
9321var clearFiberMark = function (fiber, phase) {
9322 var componentName = getComponentName(fiber.type) || 'Unknown';
9323 var debugID = fiber._debugID;
9324 var isMounted = fiber.alternate !== null;
9325 var label = getFiberLabel(componentName, isMounted, phase);
9326 var markName = getFiberMarkName(label, debugID);
9327 clearMark(markName);
9328};
9329
9330var endFiberMark = function (fiber, phase, warning) {
9331 var componentName = getComponentName(fiber.type) || 'Unknown';
9332 var debugID = fiber._debugID;
9333 var isMounted = fiber.alternate !== null;
9334 var label = getFiberLabel(componentName, isMounted, phase);
9335 var markName = getFiberMarkName(label, debugID);
9336 endMark(label, markName, warning);
9337};
9338
9339var shouldIgnoreFiber = function (fiber) {
9340 // Host components should be skipped in the timeline.
9341 // We could check typeof fiber.type, but does this work with RN?
9342 switch (fiber.tag) {
9343 case HostRoot:
9344 case HostComponent:
9345 case HostText:
9346 case HostPortal:
9347 case Fragment:
9348 case ContextProvider:
9349 case ContextConsumer:
9350 case Mode:
9351 return true;
9352 default:
9353 return false;
9354 }
9355};
9356
9357var clearPendingPhaseMeasurement = function () {
9358 if (currentPhase !== null && currentPhaseFiber !== null) {
9359 clearFiberMark(currentPhaseFiber, currentPhase);
9360 }
9361 currentPhaseFiber = null;
9362 currentPhase = null;
9363 hasScheduledUpdateInCurrentPhase = false;
9364};
9365
9366var pauseTimers = function () {
9367 // Stops all currently active measurements so that they can be resumed
9368 // if we continue in a later deferred loop from the same unit of work.
9369 var fiber = currentFiber;
9370 while (fiber) {
9371 if (fiber._debugIsCurrentlyTiming) {
9372 endFiberMark(fiber, null, null);
9373 }
9374 fiber = fiber.return;
9375 }
9376};
9377
9378var resumeTimersRecursively = function (fiber) {
9379 if (fiber.return !== null) {
9380 resumeTimersRecursively(fiber.return);
9381 }
9382 if (fiber._debugIsCurrentlyTiming) {
9383 beginFiberMark(fiber, null);
9384 }
9385};
9386
9387var resumeTimers = function () {
9388 // Resumes all measurements that were active during the last deferred loop.
9389 if (currentFiber !== null) {
9390 resumeTimersRecursively(currentFiber);
9391 }
9392};
9393
9394function recordEffect() {
9395 if (enableUserTimingAPI) {
9396 effectCountInCurrentCommit++;
9397 }
9398}
9399
9400function recordScheduleUpdate() {
9401 if (enableUserTimingAPI) {
9402 if (isCommitting) {
9403 hasScheduledUpdateInCurrentCommit = true;
9404 }
9405 if (currentPhase !== null && currentPhase !== 'componentWillMount' && currentPhase !== 'componentWillReceiveProps') {
9406 hasScheduledUpdateInCurrentPhase = true;
9407 }
9408 }
9409}
9410
9411function startRequestCallbackTimer() {
9412 if (enableUserTimingAPI) {
9413 if (supportsUserTiming && !isWaitingForCallback) {
9414 isWaitingForCallback = true;
9415 beginMark('(Waiting for async callback...)');
9416 }
9417 }
9418}
9419
9420function stopRequestCallbackTimer(didExpire, expirationTime) {
9421 if (enableUserTimingAPI) {
9422 if (supportsUserTiming) {
9423 isWaitingForCallback = false;
9424 var warning = didExpire ? 'React was blocked by main thread' : null;
9425 endMark('(Waiting for async callback... will force flush in ' + expirationTime + ' ms)', '(Waiting for async callback...)', warning);
9426 }
9427 }
9428}
9429
9430function startWorkTimer(fiber) {
9431 if (enableUserTimingAPI) {
9432 if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {
9433 return;
9434 }
9435 // If we pause, this is the fiber to unwind from.
9436 currentFiber = fiber;
9437 if (!beginFiberMark(fiber, null)) {
9438 return;
9439 }
9440 fiber._debugIsCurrentlyTiming = true;
9441 }
9442}
9443
9444function cancelWorkTimer(fiber) {
9445 if (enableUserTimingAPI) {
9446 if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {
9447 return;
9448 }
9449 // Remember we shouldn't complete measurement for this fiber.
9450 // Otherwise flamechart will be deep even for small updates.
9451 fiber._debugIsCurrentlyTiming = false;
9452 clearFiberMark(fiber, null);
9453 }
9454}
9455
9456function stopWorkTimer(fiber) {
9457 if (enableUserTimingAPI) {
9458 if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {
9459 return;
9460 }
9461 // If we pause, its parent is the fiber to unwind from.
9462 currentFiber = fiber.return;
9463 if (!fiber._debugIsCurrentlyTiming) {
9464 return;
9465 }
9466 fiber._debugIsCurrentlyTiming = false;
9467 endFiberMark(fiber, null, null);
9468 }
9469}
9470
9471function stopFailedWorkTimer(fiber) {
9472 if (enableUserTimingAPI) {
9473 if (!supportsUserTiming || shouldIgnoreFiber(fiber)) {
9474 return;
9475 }
9476 // If we pause, its parent is the fiber to unwind from.
9477 currentFiber = fiber.return;
9478 if (!fiber._debugIsCurrentlyTiming) {
9479 return;
9480 }
9481 fiber._debugIsCurrentlyTiming = false;
9482 var warning = fiber.tag === SuspenseComponent || fiber.tag === DehydratedSuspenseComponent ? 'Rendering was suspended' : 'An error was thrown inside this error boundary';
9483 endFiberMark(fiber, null, warning);
9484 }
9485}
9486
9487function startPhaseTimer(fiber, phase) {
9488 if (enableUserTimingAPI) {
9489 if (!supportsUserTiming) {
9490 return;
9491 }
9492 clearPendingPhaseMeasurement();
9493 if (!beginFiberMark(fiber, phase)) {
9494 return;
9495 }
9496 currentPhaseFiber = fiber;
9497 currentPhase = phase;
9498 }
9499}
9500
9501function stopPhaseTimer() {
9502 if (enableUserTimingAPI) {
9503 if (!supportsUserTiming) {
9504 return;
9505 }
9506 if (currentPhase !== null && currentPhaseFiber !== null) {
9507 var warning = hasScheduledUpdateInCurrentPhase ? 'Scheduled a cascading update' : null;
9508 endFiberMark(currentPhaseFiber, currentPhase, warning);
9509 }
9510 currentPhase = null;
9511 currentPhaseFiber = null;
9512 }
9513}
9514
9515function startWorkLoopTimer(nextUnitOfWork) {
9516 if (enableUserTimingAPI) {
9517 currentFiber = nextUnitOfWork;
9518 if (!supportsUserTiming) {
9519 return;
9520 }
9521 commitCountInCurrentWorkLoop = 0;
9522 // This is top level call.
9523 // Any other measurements are performed within.
9524 beginMark('(React Tree Reconciliation)');
9525 // Resume any measurements that were in progress during the last loop.
9526 resumeTimers();
9527 }
9528}
9529
9530function stopWorkLoopTimer(interruptedBy, didCompleteRoot) {
9531 if (enableUserTimingAPI) {
9532 if (!supportsUserTiming) {
9533 return;
9534 }
9535 var warning = null;
9536 if (interruptedBy !== null) {
9537 if (interruptedBy.tag === HostRoot) {
9538 warning = 'A top-level update interrupted the previous render';
9539 } else {
9540 var componentName = getComponentName(interruptedBy.type) || 'Unknown';
9541 warning = 'An update to ' + componentName + ' interrupted the previous render';
9542 }
9543 } else if (commitCountInCurrentWorkLoop > 1) {
9544 warning = 'There were cascading updates';
9545 }
9546 commitCountInCurrentWorkLoop = 0;
9547 var label = didCompleteRoot ? '(React Tree Reconciliation: Completed Root)' : '(React Tree Reconciliation: Yielded)';
9548 // Pause any measurements until the next loop.
9549 pauseTimers();
9550 endMark(label, '(React Tree Reconciliation)', warning);
9551 }
9552}
9553
9554function startCommitTimer() {
9555 if (enableUserTimingAPI) {
9556 if (!supportsUserTiming) {
9557 return;
9558 }
9559 isCommitting = true;
9560 hasScheduledUpdateInCurrentCommit = false;
9561 labelsInCurrentCommit.clear();
9562 beginMark('(Committing Changes)');
9563 }
9564}
9565
9566function stopCommitTimer() {
9567 if (enableUserTimingAPI) {
9568 if (!supportsUserTiming) {
9569 return;
9570 }
9571
9572 var warning = null;
9573 if (hasScheduledUpdateInCurrentCommit) {
9574 warning = 'Lifecycle hook scheduled a cascading update';
9575 } else if (commitCountInCurrentWorkLoop > 0) {
9576 warning = 'Caused by a cascading update in earlier commit';
9577 }
9578 hasScheduledUpdateInCurrentCommit = false;
9579 commitCountInCurrentWorkLoop++;
9580 isCommitting = false;
9581 labelsInCurrentCommit.clear();
9582
9583 endMark('(Committing Changes)', '(Committing Changes)', warning);
9584 }
9585}
9586
9587function startCommitSnapshotEffectsTimer() {
9588 if (enableUserTimingAPI) {
9589 if (!supportsUserTiming) {
9590 return;
9591 }
9592 effectCountInCurrentCommit = 0;
9593 beginMark('(Committing Snapshot Effects)');
9594 }
9595}
9596
9597function stopCommitSnapshotEffectsTimer() {
9598 if (enableUserTimingAPI) {
9599 if (!supportsUserTiming) {
9600 return;
9601 }
9602 var count = effectCountInCurrentCommit;
9603 effectCountInCurrentCommit = 0;
9604 endMark('(Committing Snapshot Effects: ' + count + ' Total)', '(Committing Snapshot Effects)', null);
9605 }
9606}
9607
9608function startCommitHostEffectsTimer() {
9609 if (enableUserTimingAPI) {
9610 if (!supportsUserTiming) {
9611 return;
9612 }
9613 effectCountInCurrentCommit = 0;
9614 beginMark('(Committing Host Effects)');
9615 }
9616}
9617
9618function stopCommitHostEffectsTimer() {
9619 if (enableUserTimingAPI) {
9620 if (!supportsUserTiming) {
9621 return;
9622 }
9623 var count = effectCountInCurrentCommit;
9624 effectCountInCurrentCommit = 0;
9625 endMark('(Committing Host Effects: ' + count + ' Total)', '(Committing Host Effects)', null);
9626 }
9627}
9628
9629function startCommitLifeCyclesTimer() {
9630 if (enableUserTimingAPI) {
9631 if (!supportsUserTiming) {
9632 return;
9633 }
9634 effectCountInCurrentCommit = 0;
9635 beginMark('(Calling Lifecycle Methods)');
9636 }
9637}
9638
9639function stopCommitLifeCyclesTimer() {
9640 if (enableUserTimingAPI) {
9641 if (!supportsUserTiming) {
9642 return;
9643 }
9644 var count = effectCountInCurrentCommit;
9645 effectCountInCurrentCommit = 0;
9646 endMark('(Calling Lifecycle Methods: ' + count + ' Total)', '(Calling Lifecycle Methods)', null);
9647 }
9648}
9649
9650var valueStack = [];
9651
9652var fiberStack = void 0;
9653
9654{
9655 fiberStack = [];
9656}
9657
9658var index = -1;
9659
9660function createCursor(defaultValue) {
9661 return {
9662 current: defaultValue
9663 };
9664}
9665
9666function pop(cursor, fiber) {
9667 if (index < 0) {
9668 {
9669 warningWithoutStack$1(false, 'Unexpected pop.');
9670 }
9671 return;
9672 }
9673
9674 {
9675 if (fiber !== fiberStack[index]) {
9676 warningWithoutStack$1(false, 'Unexpected Fiber popped.');
9677 }
9678 }
9679
9680 cursor.current = valueStack[index];
9681
9682 valueStack[index] = null;
9683
9684 {
9685 fiberStack[index] = null;
9686 }
9687
9688 index--;
9689}
9690
9691function push(cursor, value, fiber) {
9692 index++;
9693
9694 valueStack[index] = cursor.current;
9695
9696 {
9697 fiberStack[index] = fiber;
9698 }
9699
9700 cursor.current = value;
9701}
9702
9703function checkThatStackIsEmpty() {
9704 {
9705 if (index !== -1) {
9706 warningWithoutStack$1(false, 'Expected an empty stack. Something was not reset properly.');
9707 }
9708 }
9709}
9710
9711function resetStackAfterFatalErrorInDev() {
9712 {
9713 index = -1;
9714 valueStack.length = 0;
9715 fiberStack.length = 0;
9716 }
9717}
9718
9719var warnedAboutMissingGetChildContext = void 0;
9720
9721{
9722 warnedAboutMissingGetChildContext = {};
9723}
9724
9725var emptyContextObject = {};
9726{
9727 Object.freeze(emptyContextObject);
9728}
9729
9730// A cursor to the current merged context object on the stack.
9731var contextStackCursor = createCursor(emptyContextObject);
9732// A cursor to a boolean indicating whether the context has changed.
9733var didPerformWorkStackCursor = createCursor(false);
9734// Keep track of the previous context object that was on the stack.
9735// We use this to get access to the parent context after we have already
9736// pushed the next context provider, and now need to merge their contexts.
9737var previousContext = emptyContextObject;
9738
9739function getUnmaskedContext(workInProgress, Component, didPushOwnContextIfProvider) {
9740 if (didPushOwnContextIfProvider && isContextProvider(Component)) {
9741 // If the fiber is a context provider itself, when we read its context
9742 // we may have already pushed its own child context on the stack. A context
9743 // provider should not "see" its own child context. Therefore we read the
9744 // previous (parent) context instead for a context provider.
9745 return previousContext;
9746 }
9747 return contextStackCursor.current;
9748}
9749
9750function cacheContext(workInProgress, unmaskedContext, maskedContext) {
9751 var instance = workInProgress.stateNode;
9752 instance.__reactInternalMemoizedUnmaskedChildContext = unmaskedContext;
9753 instance.__reactInternalMemoizedMaskedChildContext = maskedContext;
9754}
9755
9756function getMaskedContext(workInProgress, unmaskedContext) {
9757 var type = workInProgress.type;
9758 var contextTypes = type.contextTypes;
9759 if (!contextTypes) {
9760 return emptyContextObject;
9761 }
9762
9763 // Avoid recreating masked context unless unmasked context has changed.
9764 // Failing to do this will result in unnecessary calls to componentWillReceiveProps.
9765 // This may trigger infinite loops if componentWillReceiveProps calls setState.
9766 var instance = workInProgress.stateNode;
9767 if (instance && instance.__reactInternalMemoizedUnmaskedChildContext === unmaskedContext) {
9768 return instance.__reactInternalMemoizedMaskedChildContext;
9769 }
9770
9771 var context = {};
9772 for (var key in contextTypes) {
9773 context[key] = unmaskedContext[key];
9774 }
9775
9776 {
9777 var name = getComponentName(type) || 'Unknown';
9778 checkPropTypes_1(contextTypes, context, 'context', name, getCurrentFiberStackInDev);
9779 }
9780
9781 // Cache unmasked context so we can avoid recreating masked context unless necessary.
9782 // Context is created before the class component is instantiated so check for instance.
9783 if (instance) {
9784 cacheContext(workInProgress, unmaskedContext, context);
9785 }
9786
9787 return context;
9788}
9789
9790function hasContextChanged() {
9791 return didPerformWorkStackCursor.current;
9792}
9793
9794function isContextProvider(type) {
9795 var childContextTypes = type.childContextTypes;
9796 return childContextTypes !== null && childContextTypes !== undefined;
9797}
9798
9799function popContext(fiber) {
9800 pop(didPerformWorkStackCursor, fiber);
9801 pop(contextStackCursor, fiber);
9802}
9803
9804function popTopLevelContextObject(fiber) {
9805 pop(didPerformWorkStackCursor, fiber);
9806 pop(contextStackCursor, fiber);
9807}
9808
9809function pushTopLevelContextObject(fiber, context, didChange) {
9810 !(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;
9811
9812 push(contextStackCursor, context, fiber);
9813 push(didPerformWorkStackCursor, didChange, fiber);
9814}
9815
9816function processChildContext(fiber, type, parentContext) {
9817 var instance = fiber.stateNode;
9818 var childContextTypes = type.childContextTypes;
9819
9820 // TODO (bvaughn) Replace this behavior with an invariant() in the future.
9821 // It has only been added in Fiber to match the (unintentional) behavior in Stack.
9822 if (typeof instance.getChildContext !== 'function') {
9823 {
9824 var componentName = getComponentName(type) || 'Unknown';
9825
9826 if (!warnedAboutMissingGetChildContext[componentName]) {
9827 warnedAboutMissingGetChildContext[componentName] = true;
9828 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);
9829 }
9830 }
9831 return parentContext;
9832 }
9833
9834 var childContext = void 0;
9835 {
9836 setCurrentPhase('getChildContext');
9837 }
9838 startPhaseTimer(fiber, 'getChildContext');
9839 childContext = instance.getChildContext();
9840 stopPhaseTimer();
9841 {
9842 setCurrentPhase(null);
9843 }
9844 for (var contextKey in childContext) {
9845 !(contextKey in childContextTypes) ? invariant(false, '%s.getChildContext(): key "%s" is not defined in childContextTypes.', getComponentName(type) || 'Unknown', contextKey) : void 0;
9846 }
9847 {
9848 var name = getComponentName(type) || 'Unknown';
9849 checkPropTypes_1(childContextTypes, childContext, 'child context', name,
9850 // In practice, there is one case in which we won't get a stack. It's when
9851 // somebody calls unstable_renderSubtreeIntoContainer() and we process
9852 // context from the parent component instance. The stack will be missing
9853 // because it's outside of the reconciliation, and so the pointer has not
9854 // been set. This is rare and doesn't matter. We'll also remove that API.
9855 getCurrentFiberStackInDev);
9856 }
9857
9858 return _assign({}, parentContext, childContext);
9859}
9860
9861function pushContextProvider(workInProgress) {
9862 var instance = workInProgress.stateNode;
9863 // We push the context as early as possible to ensure stack integrity.
9864 // If the instance does not exist yet, we will push null at first,
9865 // and replace it on the stack later when invalidating the context.
9866 var memoizedMergedChildContext = instance && instance.__reactInternalMemoizedMergedChildContext || emptyContextObject;
9867
9868 // Remember the parent context so we can merge with it later.
9869 // Inherit the parent's did-perform-work value to avoid inadvertently blocking updates.
9870 previousContext = contextStackCursor.current;
9871 push(contextStackCursor, memoizedMergedChildContext, workInProgress);
9872 push(didPerformWorkStackCursor, didPerformWorkStackCursor.current, workInProgress);
9873
9874 return true;
9875}
9876
9877function invalidateContextProvider(workInProgress, type, didChange) {
9878 var instance = workInProgress.stateNode;
9879 !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;
9880
9881 if (didChange) {
9882 // Merge parent and own context.
9883 // Skip this if we're not updating due to sCU.
9884 // This avoids unnecessarily recomputing memoized values.
9885 var mergedContext = processChildContext(workInProgress, type, previousContext);
9886 instance.__reactInternalMemoizedMergedChildContext = mergedContext;
9887
9888 // Replace the old (or empty) context with the new one.
9889 // It is important to unwind the context in the reverse order.
9890 pop(didPerformWorkStackCursor, workInProgress);
9891 pop(contextStackCursor, workInProgress);
9892 // Now push the new context and mark that it has changed.
9893 push(contextStackCursor, mergedContext, workInProgress);
9894 push(didPerformWorkStackCursor, didChange, workInProgress);
9895 } else {
9896 pop(didPerformWorkStackCursor, workInProgress);
9897 push(didPerformWorkStackCursor, didChange, workInProgress);
9898 }
9899}
9900
9901function findCurrentUnmaskedContext(fiber) {
9902 // Currently this is only used with renderSubtreeIntoContainer; not sure if it
9903 // makes sense elsewhere
9904 !(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;
9905
9906 var node = fiber;
9907 do {
9908 switch (node.tag) {
9909 case HostRoot:
9910 return node.stateNode.context;
9911 case ClassComponent:
9912 {
9913 var Component = node.type;
9914 if (isContextProvider(Component)) {
9915 return node.stateNode.__reactInternalMemoizedMergedChildContext;
9916 }
9917 break;
9918 }
9919 }
9920 node = node.return;
9921 } while (node !== null);
9922 invariant(false, 'Found unexpected detached subtree parent. This error is likely caused by a bug in React. Please file an issue.');
9923}
9924
9925var onCommitFiberRoot = null;
9926var onCommitFiberUnmount = null;
9927var hasLoggedError = false;
9928
9929function catchErrors(fn) {
9930 return function (arg) {
9931 try {
9932 return fn(arg);
9933 } catch (err) {
9934 if (true && !hasLoggedError) {
9935 hasLoggedError = true;
9936 warningWithoutStack$1(false, 'React DevTools encountered an error: %s', err);
9937 }
9938 }
9939 };
9940}
9941
9942var isDevToolsPresent = typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined';
9943
9944function injectInternals(internals) {
9945 if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
9946 // No DevTools
9947 return false;
9948 }
9949 var hook = __REACT_DEVTOOLS_GLOBAL_HOOK__;
9950 if (hook.isDisabled) {
9951 // This isn't a real property on the hook, but it can be set to opt out
9952 // of DevTools integration and associated warnings and logs.
9953 // https://github.com/facebook/react/issues/3877
9954 return true;
9955 }
9956 if (!hook.supportsFiber) {
9957 {
9958 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');
9959 }
9960 // DevTools exists, even though it doesn't support Fiber.
9961 return true;
9962 }
9963 try {
9964 var rendererID = hook.inject(internals);
9965 // We have successfully injected, so now it is safe to set up hooks.
9966 onCommitFiberRoot = catchErrors(function (root) {
9967 return hook.onCommitFiberRoot(rendererID, root);
9968 });
9969 onCommitFiberUnmount = catchErrors(function (fiber) {
9970 return hook.onCommitFiberUnmount(rendererID, fiber);
9971 });
9972 } catch (err) {
9973 // Catch all errors because it is unsafe to throw during initialization.
9974 {
9975 warningWithoutStack$1(false, 'React DevTools encountered an error: %s.', err);
9976 }
9977 }
9978 // DevTools exists
9979 return true;
9980}
9981
9982function onCommitRoot(root) {
9983 if (typeof onCommitFiberRoot === 'function') {
9984 onCommitFiberRoot(root);
9985 }
9986}
9987
9988function onCommitUnmount(fiber) {
9989 if (typeof onCommitFiberUnmount === 'function') {
9990 onCommitFiberUnmount(fiber);
9991 }
9992}
9993
9994// Max 31 bit integer. The max integer size in V8 for 32-bit systems.
9995// Math.pow(2, 30) - 1
9996// 0b111111111111111111111111111111
9997var maxSigned31BitInt = 1073741823;
9998
9999var NoWork = 0;
10000var Never = 1;
10001var Sync = maxSigned31BitInt;
10002
10003var UNIT_SIZE = 10;
10004var MAGIC_NUMBER_OFFSET = maxSigned31BitInt - 1;
10005
10006// 1 unit of expiration time represents 10ms.
10007function msToExpirationTime(ms) {
10008 // Always add an offset so that we don't clash with the magic number for NoWork.
10009 return MAGIC_NUMBER_OFFSET - (ms / UNIT_SIZE | 0);
10010}
10011
10012function expirationTimeToMs(expirationTime) {
10013 return (MAGIC_NUMBER_OFFSET - expirationTime) * UNIT_SIZE;
10014}
10015
10016function ceiling(num, precision) {
10017 return ((num / precision | 0) + 1) * precision;
10018}
10019
10020function computeExpirationBucket(currentTime, expirationInMs, bucketSizeMs) {
10021 return MAGIC_NUMBER_OFFSET - ceiling(MAGIC_NUMBER_OFFSET - currentTime + expirationInMs / UNIT_SIZE, bucketSizeMs / UNIT_SIZE);
10022}
10023
10024var LOW_PRIORITY_EXPIRATION = 5000;
10025var LOW_PRIORITY_BATCH_SIZE = 250;
10026
10027function computeAsyncExpiration(currentTime) {
10028 return computeExpirationBucket(currentTime, LOW_PRIORITY_EXPIRATION, LOW_PRIORITY_BATCH_SIZE);
10029}
10030
10031// We intentionally set a higher expiration time for interactive updates in
10032// dev than in production.
10033//
10034// If the main thread is being blocked so long that you hit the expiration,
10035// it's a problem that could be solved with better scheduling.
10036//
10037// People will be more likely to notice this and fix it with the long
10038// expiration time in development.
10039//
10040// In production we opt for better UX at the risk of masking scheduling
10041// problems, by expiring fast.
10042var HIGH_PRIORITY_EXPIRATION = 500;
10043var HIGH_PRIORITY_BATCH_SIZE = 100;
10044
10045function computeInteractiveExpiration(currentTime) {
10046 return computeExpirationBucket(currentTime, HIGH_PRIORITY_EXPIRATION, HIGH_PRIORITY_BATCH_SIZE);
10047}
10048
10049var NoContext = 0;
10050var ConcurrentMode = 1;
10051var StrictMode = 2;
10052var ProfileMode = 4;
10053
10054var hasBadMapPolyfill = void 0;
10055
10056{
10057 hasBadMapPolyfill = false;
10058 try {
10059 var nonExtensibleObject = Object.preventExtensions({});
10060 var testMap = new Map([[nonExtensibleObject, null]]);
10061 var testSet = new Set([nonExtensibleObject]);
10062 // This is necessary for Rollup to not consider these unused.
10063 // https://github.com/rollup/rollup/issues/1771
10064 // TODO: we can remove these if Rollup fixes the bug.
10065 testMap.set(0, 0);
10066 testSet.add(0);
10067 } catch (e) {
10068 // TODO: Consider warning about bad polyfills
10069 hasBadMapPolyfill = true;
10070 }
10071}
10072
10073// A Fiber is work on a Component that needs to be done or was done. There can
10074// be more than one per component.
10075
10076
10077var debugCounter = void 0;
10078
10079{
10080 debugCounter = 1;
10081}
10082
10083function FiberNode(tag, pendingProps, key, mode) {
10084 // Instance
10085 this.tag = tag;
10086 this.key = key;
10087 this.elementType = null;
10088 this.type = null;
10089 this.stateNode = null;
10090
10091 // Fiber
10092 this.return = null;
10093 this.child = null;
10094 this.sibling = null;
10095 this.index = 0;
10096
10097 this.ref = null;
10098
10099 this.pendingProps = pendingProps;
10100 this.memoizedProps = null;
10101 this.updateQueue = null;
10102 this.memoizedState = null;
10103 this.contextDependencies = null;
10104
10105 this.mode = mode;
10106
10107 // Effects
10108 this.effectTag = NoEffect;
10109 this.nextEffect = null;
10110
10111 this.firstEffect = null;
10112 this.lastEffect = null;
10113
10114 this.expirationTime = NoWork;
10115 this.childExpirationTime = NoWork;
10116
10117 this.alternate = null;
10118
10119 if (enableProfilerTimer) {
10120 // Note: The following is done to avoid a v8 performance cliff.
10121 //
10122 // Initializing the fields below to smis and later updating them with
10123 // double values will cause Fibers to end up having separate shapes.
10124 // This behavior/bug has something to do with Object.preventExtension().
10125 // Fortunately this only impacts DEV builds.
10126 // Unfortunately it makes React unusably slow for some applications.
10127 // To work around this, initialize the fields below with doubles.
10128 //
10129 // Learn more about this here:
10130 // https://github.com/facebook/react/issues/14365
10131 // https://bugs.chromium.org/p/v8/issues/detail?id=8538
10132 this.actualDuration = Number.NaN;
10133 this.actualStartTime = Number.NaN;
10134 this.selfBaseDuration = Number.NaN;
10135 this.treeBaseDuration = Number.NaN;
10136
10137 // It's okay to replace the initial doubles with smis after initialization.
10138 // This won't trigger the performance cliff mentioned above,
10139 // and it simplifies other profiler code (including DevTools).
10140 this.actualDuration = 0;
10141 this.actualStartTime = -1;
10142 this.selfBaseDuration = 0;
10143 this.treeBaseDuration = 0;
10144 }
10145
10146 {
10147 this._debugID = debugCounter++;
10148 this._debugSource = null;
10149 this._debugOwner = null;
10150 this._debugIsCurrentlyTiming = false;
10151 this._debugHookTypes = null;
10152 if (!hasBadMapPolyfill && typeof Object.preventExtensions === 'function') {
10153 Object.preventExtensions(this);
10154 }
10155 }
10156}
10157
10158// This is a constructor function, rather than a POJO constructor, still
10159// please ensure we do the following:
10160// 1) Nobody should add any instance methods on this. Instance methods can be
10161// more difficult to predict when they get optimized and they are almost
10162// never inlined properly in static compilers.
10163// 2) Nobody should rely on `instanceof Fiber` for type testing. We should
10164// always know when it is a fiber.
10165// 3) We might want to experiment with using numeric keys since they are easier
10166// to optimize in a non-JIT environment.
10167// 4) We can easily go from a constructor to a createFiber object literal if that
10168// is faster.
10169// 5) It should be easy to port this to a C struct and keep a C implementation
10170// compatible.
10171var createFiber = function (tag, pendingProps, key, mode) {
10172 // $FlowFixMe: the shapes are exact here but Flow doesn't like constructors
10173 return new FiberNode(tag, pendingProps, key, mode);
10174};
10175
10176function shouldConstruct(Component) {
10177 var prototype = Component.prototype;
10178 return !!(prototype && prototype.isReactComponent);
10179}
10180
10181function isSimpleFunctionComponent(type) {
10182 return typeof type === 'function' && !shouldConstruct(type) && type.defaultProps === undefined;
10183}
10184
10185function resolveLazyComponentTag(Component) {
10186 if (typeof Component === 'function') {
10187 return shouldConstruct(Component) ? ClassComponent : FunctionComponent;
10188 } else if (Component !== undefined && Component !== null) {
10189 var $$typeof = Component.$$typeof;
10190 if ($$typeof === REACT_FORWARD_REF_TYPE) {
10191 return ForwardRef;
10192 }
10193 if ($$typeof === REACT_MEMO_TYPE) {
10194 return MemoComponent;
10195 }
10196 }
10197 return IndeterminateComponent;
10198}
10199
10200// This is used to create an alternate fiber to do work on.
10201function createWorkInProgress(current, pendingProps, expirationTime) {
10202 var workInProgress = current.alternate;
10203 if (workInProgress === null) {
10204 // We use a double buffering pooling technique because we know that we'll
10205 // only ever need at most two versions of a tree. We pool the "other" unused
10206 // node that we're free to reuse. This is lazily created to avoid allocating
10207 // extra objects for things that are never updated. It also allow us to
10208 // reclaim the extra memory if needed.
10209 workInProgress = createFiber(current.tag, pendingProps, current.key, current.mode);
10210 workInProgress.elementType = current.elementType;
10211 workInProgress.type = current.type;
10212 workInProgress.stateNode = current.stateNode;
10213
10214 {
10215 // DEV-only fields
10216 workInProgress._debugID = current._debugID;
10217 workInProgress._debugSource = current._debugSource;
10218 workInProgress._debugOwner = current._debugOwner;
10219 workInProgress._debugHookTypes = current._debugHookTypes;
10220 }
10221
10222 workInProgress.alternate = current;
10223 current.alternate = workInProgress;
10224 } else {
10225 workInProgress.pendingProps = pendingProps;
10226
10227 // We already have an alternate.
10228 // Reset the effect tag.
10229 workInProgress.effectTag = NoEffect;
10230
10231 // The effect list is no longer valid.
10232 workInProgress.nextEffect = null;
10233 workInProgress.firstEffect = null;
10234 workInProgress.lastEffect = null;
10235
10236 if (enableProfilerTimer) {
10237 // We intentionally reset, rather than copy, actualDuration & actualStartTime.
10238 // This prevents time from endlessly accumulating in new commits.
10239 // This has the downside of resetting values for different priority renders,
10240 // But works for yielding (the common case) and should support resuming.
10241 workInProgress.actualDuration = 0;
10242 workInProgress.actualStartTime = -1;
10243 }
10244 }
10245
10246 workInProgress.childExpirationTime = current.childExpirationTime;
10247 workInProgress.expirationTime = current.expirationTime;
10248
10249 workInProgress.child = current.child;
10250 workInProgress.memoizedProps = current.memoizedProps;
10251 workInProgress.memoizedState = current.memoizedState;
10252 workInProgress.updateQueue = current.updateQueue;
10253 workInProgress.contextDependencies = current.contextDependencies;
10254
10255 // These will be overridden during the parent's reconciliation
10256 workInProgress.sibling = current.sibling;
10257 workInProgress.index = current.index;
10258 workInProgress.ref = current.ref;
10259
10260 if (enableProfilerTimer) {
10261 workInProgress.selfBaseDuration = current.selfBaseDuration;
10262 workInProgress.treeBaseDuration = current.treeBaseDuration;
10263 }
10264
10265 return workInProgress;
10266}
10267
10268function createHostRootFiber(isConcurrent) {
10269 var mode = isConcurrent ? ConcurrentMode | StrictMode : NoContext;
10270
10271 if (enableProfilerTimer && isDevToolsPresent) {
10272 // Always collect profile timings when DevTools are present.
10273 // This enables DevTools to start capturing timing at any point–
10274 // Without some nodes in the tree having empty base times.
10275 mode |= ProfileMode;
10276 }
10277
10278 return createFiber(HostRoot, null, null, mode);
10279}
10280
10281function createFiberFromTypeAndProps(type, // React$ElementType
10282key, pendingProps, owner, mode, expirationTime) {
10283 var fiber = void 0;
10284
10285 var fiberTag = IndeterminateComponent;
10286 // The resolved type is set if we know what the final type will be. I.e. it's not lazy.
10287 var resolvedType = type;
10288 if (typeof type === 'function') {
10289 if (shouldConstruct(type)) {
10290 fiberTag = ClassComponent;
10291 }
10292 } else if (typeof type === 'string') {
10293 fiberTag = HostComponent;
10294 } else {
10295 getTag: switch (type) {
10296 case REACT_FRAGMENT_TYPE:
10297 return createFiberFromFragment(pendingProps.children, mode, expirationTime, key);
10298 case REACT_CONCURRENT_MODE_TYPE:
10299 return createFiberFromMode(pendingProps, mode | ConcurrentMode | StrictMode, expirationTime, key);
10300 case REACT_STRICT_MODE_TYPE:
10301 return createFiberFromMode(pendingProps, mode | StrictMode, expirationTime, key);
10302 case REACT_PROFILER_TYPE:
10303 return createFiberFromProfiler(pendingProps, mode, expirationTime, key);
10304 case REACT_SUSPENSE_TYPE:
10305 return createFiberFromSuspense(pendingProps, mode, expirationTime, key);
10306 default:
10307 {
10308 if (typeof type === 'object' && type !== null) {
10309 switch (type.$$typeof) {
10310 case REACT_PROVIDER_TYPE:
10311 fiberTag = ContextProvider;
10312 break getTag;
10313 case REACT_CONTEXT_TYPE:
10314 // This is a consumer
10315 fiberTag = ContextConsumer;
10316 break getTag;
10317 case REACT_FORWARD_REF_TYPE:
10318 fiberTag = ForwardRef;
10319 break getTag;
10320 case REACT_MEMO_TYPE:
10321 fiberTag = MemoComponent;
10322 break getTag;
10323 case REACT_LAZY_TYPE:
10324 fiberTag = LazyComponent;
10325 resolvedType = null;
10326 break getTag;
10327 }
10328 }
10329 var info = '';
10330 {
10331 if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
10332 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.';
10333 }
10334 var ownerName = owner ? getComponentName(owner.type) : null;
10335 if (ownerName) {
10336 info += '\n\nCheck the render method of `' + ownerName + '`.';
10337 }
10338 }
10339 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);
10340 }
10341 }
10342 }
10343
10344 fiber = createFiber(fiberTag, pendingProps, key, mode);
10345 fiber.elementType = type;
10346 fiber.type = resolvedType;
10347 fiber.expirationTime = expirationTime;
10348
10349 return fiber;
10350}
10351
10352function createFiberFromElement(element, mode, expirationTime) {
10353 var owner = null;
10354 {
10355 owner = element._owner;
10356 }
10357 var type = element.type;
10358 var key = element.key;
10359 var pendingProps = element.props;
10360 var fiber = createFiberFromTypeAndProps(type, key, pendingProps, owner, mode, expirationTime);
10361 {
10362 fiber._debugSource = element._source;
10363 fiber._debugOwner = element._owner;
10364 }
10365 return fiber;
10366}
10367
10368function createFiberFromFragment(elements, mode, expirationTime, key) {
10369 var fiber = createFiber(Fragment, elements, key, mode);
10370 fiber.expirationTime = expirationTime;
10371 return fiber;
10372}
10373
10374function createFiberFromProfiler(pendingProps, mode, expirationTime, key) {
10375 {
10376 if (typeof pendingProps.id !== 'string' || typeof pendingProps.onRender !== 'function') {
10377 warningWithoutStack$1(false, 'Profiler must specify an "id" string and "onRender" function as props');
10378 }
10379 }
10380
10381 var fiber = createFiber(Profiler, pendingProps, key, mode | ProfileMode);
10382 // TODO: The Profiler fiber shouldn't have a type. It has a tag.
10383 fiber.elementType = REACT_PROFILER_TYPE;
10384 fiber.type = REACT_PROFILER_TYPE;
10385 fiber.expirationTime = expirationTime;
10386
10387 return fiber;
10388}
10389
10390function createFiberFromMode(pendingProps, mode, expirationTime, key) {
10391 var fiber = createFiber(Mode, pendingProps, key, mode);
10392
10393 // TODO: The Mode fiber shouldn't have a type. It has a tag.
10394 var type = (mode & ConcurrentMode) === NoContext ? REACT_STRICT_MODE_TYPE : REACT_CONCURRENT_MODE_TYPE;
10395 fiber.elementType = type;
10396 fiber.type = type;
10397
10398 fiber.expirationTime = expirationTime;
10399 return fiber;
10400}
10401
10402function createFiberFromSuspense(pendingProps, mode, expirationTime, key) {
10403 var fiber = createFiber(SuspenseComponent, pendingProps, key, mode);
10404
10405 // TODO: The SuspenseComponent fiber shouldn't have a type. It has a tag.
10406 var type = REACT_SUSPENSE_TYPE;
10407 fiber.elementType = type;
10408 fiber.type = type;
10409
10410 fiber.expirationTime = expirationTime;
10411 return fiber;
10412}
10413
10414function createFiberFromText(content, mode, expirationTime) {
10415 var fiber = createFiber(HostText, content, null, mode);
10416 fiber.expirationTime = expirationTime;
10417 return fiber;
10418}
10419
10420function createFiberFromHostInstanceForDeletion() {
10421 var fiber = createFiber(HostComponent, null, null, NoContext);
10422 // TODO: These should not need a type.
10423 fiber.elementType = 'DELETED';
10424 fiber.type = 'DELETED';
10425 return fiber;
10426}
10427
10428function createFiberFromPortal(portal, mode, expirationTime) {
10429 var pendingProps = portal.children !== null ? portal.children : [];
10430 var fiber = createFiber(HostPortal, pendingProps, portal.key, mode);
10431 fiber.expirationTime = expirationTime;
10432 fiber.stateNode = {
10433 containerInfo: portal.containerInfo,
10434 pendingChildren: null, // Used by persistent updates
10435 implementation: portal.implementation
10436 };
10437 return fiber;
10438}
10439
10440// Used for stashing WIP properties to replay failed work in DEV.
10441function assignFiberPropertiesInDEV(target, source) {
10442 if (target === null) {
10443 // This Fiber's initial properties will always be overwritten.
10444 // We only use a Fiber to ensure the same hidden class so DEV isn't slow.
10445 target = createFiber(IndeterminateComponent, null, null, NoContext);
10446 }
10447
10448 // This is intentionally written as a list of all properties.
10449 // We tried to use Object.assign() instead but this is called in
10450 // the hottest path, and Object.assign() was too slow:
10451 // https://github.com/facebook/react/issues/12502
10452 // This code is DEV-only so size is not a concern.
10453
10454 target.tag = source.tag;
10455 target.key = source.key;
10456 target.elementType = source.elementType;
10457 target.type = source.type;
10458 target.stateNode = source.stateNode;
10459 target.return = source.return;
10460 target.child = source.child;
10461 target.sibling = source.sibling;
10462 target.index = source.index;
10463 target.ref = source.ref;
10464 target.pendingProps = source.pendingProps;
10465 target.memoizedProps = source.memoizedProps;
10466 target.updateQueue = source.updateQueue;
10467 target.memoizedState = source.memoizedState;
10468 target.contextDependencies = source.contextDependencies;
10469 target.mode = source.mode;
10470 target.effectTag = source.effectTag;
10471 target.nextEffect = source.nextEffect;
10472 target.firstEffect = source.firstEffect;
10473 target.lastEffect = source.lastEffect;
10474 target.expirationTime = source.expirationTime;
10475 target.childExpirationTime = source.childExpirationTime;
10476 target.alternate = source.alternate;
10477 if (enableProfilerTimer) {
10478 target.actualDuration = source.actualDuration;
10479 target.actualStartTime = source.actualStartTime;
10480 target.selfBaseDuration = source.selfBaseDuration;
10481 target.treeBaseDuration = source.treeBaseDuration;
10482 }
10483 target._debugID = source._debugID;
10484 target._debugSource = source._debugSource;
10485 target._debugOwner = source._debugOwner;
10486 target._debugIsCurrentlyTiming = source._debugIsCurrentlyTiming;
10487 target._debugHookTypes = source._debugHookTypes;
10488 return target;
10489}
10490
10491var ReactInternals$2 = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
10492
10493var _ReactInternals$Sched$1 = ReactInternals$2.SchedulerTracing;
10494var __interactionsRef = _ReactInternals$Sched$1.__interactionsRef;
10495var __subscriberRef = _ReactInternals$Sched$1.__subscriberRef;
10496var unstable_clear = _ReactInternals$Sched$1.unstable_clear;
10497var unstable_getCurrent = _ReactInternals$Sched$1.unstable_getCurrent;
10498var unstable_getThreadID = _ReactInternals$Sched$1.unstable_getThreadID;
10499var unstable_subscribe = _ReactInternals$Sched$1.unstable_subscribe;
10500var unstable_trace = _ReactInternals$Sched$1.unstable_trace;
10501var unstable_unsubscribe = _ReactInternals$Sched$1.unstable_unsubscribe;
10502var unstable_wrap = _ReactInternals$Sched$1.unstable_wrap;
10503
10504// TODO: This should be lifted into the renderer.
10505
10506
10507// The following attributes are only used by interaction tracing builds.
10508// They enable interactions to be associated with their async work,
10509// And expose interaction metadata to the React DevTools Profiler plugin.
10510// Note that these attributes are only defined when the enableSchedulerTracing flag is enabled.
10511
10512
10513// Exported FiberRoot type includes all properties,
10514// To avoid requiring potentially error-prone :any casts throughout the project.
10515// Profiling properties are only safe to access in profiling builds (when enableSchedulerTracing is true).
10516// The types are defined separately within this file to ensure they stay in sync.
10517// (We don't have to use an inline :any cast when enableSchedulerTracing is disabled.)
10518
10519
10520function createFiberRoot(containerInfo, isConcurrent, hydrate) {
10521 // Cyclic construction. This cheats the type system right now because
10522 // stateNode is any.
10523 var uninitializedFiber = createHostRootFiber(isConcurrent);
10524
10525 var root = void 0;
10526 if (enableSchedulerTracing) {
10527 root = {
10528 current: uninitializedFiber,
10529 containerInfo: containerInfo,
10530 pendingChildren: null,
10531
10532 earliestPendingTime: NoWork,
10533 latestPendingTime: NoWork,
10534 earliestSuspendedTime: NoWork,
10535 latestSuspendedTime: NoWork,
10536 latestPingedTime: NoWork,
10537
10538 pingCache: null,
10539
10540 didError: false,
10541
10542 pendingCommitExpirationTime: NoWork,
10543 finishedWork: null,
10544 timeoutHandle: noTimeout,
10545 context: null,
10546 pendingContext: null,
10547 hydrate: hydrate,
10548 nextExpirationTimeToWorkOn: NoWork,
10549 expirationTime: NoWork,
10550 firstBatch: null,
10551 nextScheduledRoot: null,
10552
10553 interactionThreadID: unstable_getThreadID(),
10554 memoizedInteractions: new Set(),
10555 pendingInteractionMap: new Map()
10556 };
10557 } else {
10558 root = {
10559 current: uninitializedFiber,
10560 containerInfo: containerInfo,
10561 pendingChildren: null,
10562
10563 pingCache: null,
10564
10565 earliestPendingTime: NoWork,
10566 latestPendingTime: NoWork,
10567 earliestSuspendedTime: NoWork,
10568 latestSuspendedTime: NoWork,
10569 latestPingedTime: NoWork,
10570
10571 didError: false,
10572
10573 pendingCommitExpirationTime: NoWork,
10574 finishedWork: null,
10575 timeoutHandle: noTimeout,
10576 context: null,
10577 pendingContext: null,
10578 hydrate: hydrate,
10579 nextExpirationTimeToWorkOn: NoWork,
10580 expirationTime: NoWork,
10581 firstBatch: null,
10582 nextScheduledRoot: null
10583 };
10584 }
10585
10586 uninitializedFiber.stateNode = root;
10587
10588 // The reason for the way the Flow types are structured in this file,
10589 // Is to avoid needing :any casts everywhere interaction tracing fields are used.
10590 // Unfortunately that requires an :any cast for non-interaction tracing capable builds.
10591 // $FlowFixMe Remove this :any cast and replace it with something better.
10592 return root;
10593}
10594
10595/**
10596 * Forked from fbjs/warning:
10597 * https://github.com/facebook/fbjs/blob/e66ba20ad5be433eb54423f2b097d829324d9de6/packages/fbjs/src/__forks__/warning.js
10598 *
10599 * Only change is we use console.warn instead of console.error,
10600 * and do nothing when 'console' is not supported.
10601 * This really simplifies the code.
10602 * ---
10603 * Similar to invariant but only logs a warning if the condition is not met.
10604 * This can be used to log issues in development environments in critical
10605 * paths. Removing the logging code for production environments will keep the
10606 * same logic and follow the same code paths.
10607 */
10608
10609var lowPriorityWarning = function () {};
10610
10611{
10612 var printWarning$1 = function (format) {
10613 for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
10614 args[_key - 1] = arguments[_key];
10615 }
10616
10617 var argIndex = 0;
10618 var message = 'Warning: ' + format.replace(/%s/g, function () {
10619 return args[argIndex++];
10620 });
10621 if (typeof console !== 'undefined') {
10622 console.warn(message);
10623 }
10624 try {
10625 // --- Welcome to debugging React ---
10626 // This error was thrown as a convenience so that you can use this stack
10627 // to find the callsite that caused this warning to fire.
10628 throw new Error(message);
10629 } catch (x) {}
10630 };
10631
10632 lowPriorityWarning = function (condition, format) {
10633 if (format === undefined) {
10634 throw new Error('`lowPriorityWarning(condition, format, ...args)` requires a warning ' + 'message argument');
10635 }
10636 if (!condition) {
10637 for (var _len2 = arguments.length, args = Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
10638 args[_key2 - 2] = arguments[_key2];
10639 }
10640
10641 printWarning$1.apply(undefined, [format].concat(args));
10642 }
10643 };
10644}
10645
10646var lowPriorityWarning$1 = lowPriorityWarning;
10647
10648var ReactStrictModeWarnings = {
10649 discardPendingWarnings: function () {},
10650 flushPendingDeprecationWarnings: function () {},
10651 flushPendingUnsafeLifecycleWarnings: function () {},
10652 recordDeprecationWarnings: function (fiber, instance) {},
10653 recordUnsafeLifecycleWarnings: function (fiber, instance) {},
10654 recordLegacyContextWarning: function (fiber, instance) {},
10655 flushLegacyContextWarning: function () {}
10656};
10657
10658{
10659 var LIFECYCLE_SUGGESTIONS = {
10660 UNSAFE_componentWillMount: 'componentDidMount',
10661 UNSAFE_componentWillReceiveProps: 'static getDerivedStateFromProps',
10662 UNSAFE_componentWillUpdate: 'componentDidUpdate'
10663 };
10664
10665 var pendingComponentWillMountWarnings = [];
10666 var pendingComponentWillReceivePropsWarnings = [];
10667 var pendingComponentWillUpdateWarnings = [];
10668 var pendingUnsafeLifecycleWarnings = new Map();
10669 var pendingLegacyContextWarning = new Map();
10670
10671 // Tracks components we have already warned about.
10672 var didWarnAboutDeprecatedLifecycles = new Set();
10673 var didWarnAboutUnsafeLifecycles = new Set();
10674 var didWarnAboutLegacyContext = new Set();
10675
10676 var setToSortedString = function (set) {
10677 var array = [];
10678 set.forEach(function (value) {
10679 array.push(value);
10680 });
10681 return array.sort().join(', ');
10682 };
10683
10684 ReactStrictModeWarnings.discardPendingWarnings = function () {
10685 pendingComponentWillMountWarnings = [];
10686 pendingComponentWillReceivePropsWarnings = [];
10687 pendingComponentWillUpdateWarnings = [];
10688 pendingUnsafeLifecycleWarnings = new Map();
10689 pendingLegacyContextWarning = new Map();
10690 };
10691
10692 ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings = function () {
10693 pendingUnsafeLifecycleWarnings.forEach(function (lifecycleWarningsMap, strictRoot) {
10694 var lifecyclesWarningMessages = [];
10695
10696 Object.keys(lifecycleWarningsMap).forEach(function (lifecycle) {
10697 var lifecycleWarnings = lifecycleWarningsMap[lifecycle];
10698 if (lifecycleWarnings.length > 0) {
10699 var componentNames = new Set();
10700 lifecycleWarnings.forEach(function (fiber) {
10701 componentNames.add(getComponentName(fiber.type) || 'Component');
10702 didWarnAboutUnsafeLifecycles.add(fiber.type);
10703 });
10704
10705 var formatted = lifecycle.replace('UNSAFE_', '');
10706 var suggestion = LIFECYCLE_SUGGESTIONS[lifecycle];
10707 var sortedComponentNames = setToSortedString(componentNames);
10708
10709 lifecyclesWarningMessages.push(formatted + ': Please update the following components to use ' + (suggestion + ' instead: ' + sortedComponentNames));
10710 }
10711 });
10712
10713 if (lifecyclesWarningMessages.length > 0) {
10714 var strictRootComponentStack = getStackByFiberInDevAndProd(strictRoot);
10715
10716 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, lifecyclesWarningMessages.join('\n\n'));
10717 }
10718 });
10719
10720 pendingUnsafeLifecycleWarnings = new Map();
10721 };
10722
10723 var findStrictRoot = function (fiber) {
10724 var maybeStrictRoot = null;
10725
10726 var node = fiber;
10727 while (node !== null) {
10728 if (node.mode & StrictMode) {
10729 maybeStrictRoot = node;
10730 }
10731 node = node.return;
10732 }
10733
10734 return maybeStrictRoot;
10735 };
10736
10737 ReactStrictModeWarnings.flushPendingDeprecationWarnings = function () {
10738 if (pendingComponentWillMountWarnings.length > 0) {
10739 var uniqueNames = new Set();
10740 pendingComponentWillMountWarnings.forEach(function (fiber) {
10741 uniqueNames.add(getComponentName(fiber.type) || 'Component');
10742 didWarnAboutDeprecatedLifecycles.add(fiber.type);
10743 });
10744
10745 var sortedNames = setToSortedString(uniqueNames);
10746
10747 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);
10748
10749 pendingComponentWillMountWarnings = [];
10750 }
10751
10752 if (pendingComponentWillReceivePropsWarnings.length > 0) {
10753 var _uniqueNames = new Set();
10754 pendingComponentWillReceivePropsWarnings.forEach(function (fiber) {
10755 _uniqueNames.add(getComponentName(fiber.type) || 'Component');
10756 didWarnAboutDeprecatedLifecycles.add(fiber.type);
10757 });
10758
10759 var _sortedNames = setToSortedString(_uniqueNames);
10760
10761 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);
10762
10763 pendingComponentWillReceivePropsWarnings = [];
10764 }
10765
10766 if (pendingComponentWillUpdateWarnings.length > 0) {
10767 var _uniqueNames2 = new Set();
10768 pendingComponentWillUpdateWarnings.forEach(function (fiber) {
10769 _uniqueNames2.add(getComponentName(fiber.type) || 'Component');
10770 didWarnAboutDeprecatedLifecycles.add(fiber.type);
10771 });
10772
10773 var _sortedNames2 = setToSortedString(_uniqueNames2);
10774
10775 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);
10776
10777 pendingComponentWillUpdateWarnings = [];
10778 }
10779 };
10780
10781 ReactStrictModeWarnings.recordDeprecationWarnings = function (fiber, instance) {
10782 // Dedup strategy: Warn once per component.
10783 if (didWarnAboutDeprecatedLifecycles.has(fiber.type)) {
10784 return;
10785 }
10786
10787 // Don't warn about react-lifecycles-compat polyfilled components.
10788 if (typeof instance.componentWillMount === 'function' && instance.componentWillMount.__suppressDeprecationWarning !== true) {
10789 pendingComponentWillMountWarnings.push(fiber);
10790 }
10791 if (typeof instance.componentWillReceiveProps === 'function' && instance.componentWillReceiveProps.__suppressDeprecationWarning !== true) {
10792 pendingComponentWillReceivePropsWarnings.push(fiber);
10793 }
10794 if (typeof instance.componentWillUpdate === 'function' && instance.componentWillUpdate.__suppressDeprecationWarning !== true) {
10795 pendingComponentWillUpdateWarnings.push(fiber);
10796 }
10797 };
10798
10799 ReactStrictModeWarnings.recordUnsafeLifecycleWarnings = function (fiber, instance) {
10800 var strictRoot = findStrictRoot(fiber);
10801 if (strictRoot === null) {
10802 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.');
10803 return;
10804 }
10805
10806 // Dedup strategy: Warn once per component.
10807 // This is difficult to track any other way since component names
10808 // are often vague and are likely to collide between 3rd party libraries.
10809 // An expand property is probably okay to use here since it's DEV-only,
10810 // and will only be set in the event of serious warnings.
10811 if (didWarnAboutUnsafeLifecycles.has(fiber.type)) {
10812 return;
10813 }
10814
10815 var warningsForRoot = void 0;
10816 if (!pendingUnsafeLifecycleWarnings.has(strictRoot)) {
10817 warningsForRoot = {
10818 UNSAFE_componentWillMount: [],
10819 UNSAFE_componentWillReceiveProps: [],
10820 UNSAFE_componentWillUpdate: []
10821 };
10822
10823 pendingUnsafeLifecycleWarnings.set(strictRoot, warningsForRoot);
10824 } else {
10825 warningsForRoot = pendingUnsafeLifecycleWarnings.get(strictRoot);
10826 }
10827
10828 var unsafeLifecycles = [];
10829 if (typeof instance.componentWillMount === 'function' && instance.componentWillMount.__suppressDeprecationWarning !== true || typeof instance.UNSAFE_componentWillMount === 'function') {
10830 unsafeLifecycles.push('UNSAFE_componentWillMount');
10831 }
10832 if (typeof instance.componentWillReceiveProps === 'function' && instance.componentWillReceiveProps.__suppressDeprecationWarning !== true || typeof instance.UNSAFE_componentWillReceiveProps === 'function') {
10833 unsafeLifecycles.push('UNSAFE_componentWillReceiveProps');
10834 }
10835 if (typeof instance.componentWillUpdate === 'function' && instance.componentWillUpdate.__suppressDeprecationWarning !== true || typeof instance.UNSAFE_componentWillUpdate === 'function') {
10836 unsafeLifecycles.push('UNSAFE_componentWillUpdate');
10837 }
10838
10839 if (unsafeLifecycles.length > 0) {
10840 unsafeLifecycles.forEach(function (lifecycle) {
10841 warningsForRoot[lifecycle].push(fiber);
10842 });
10843 }
10844 };
10845
10846 ReactStrictModeWarnings.recordLegacyContextWarning = function (fiber, instance) {
10847 var strictRoot = findStrictRoot(fiber);
10848 if (strictRoot === null) {
10849 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.');
10850 return;
10851 }
10852
10853 // Dedup strategy: Warn once per component.
10854 if (didWarnAboutLegacyContext.has(fiber.type)) {
10855 return;
10856 }
10857
10858 var warningsForRoot = pendingLegacyContextWarning.get(strictRoot);
10859
10860 if (fiber.type.contextTypes != null || fiber.type.childContextTypes != null || instance !== null && typeof instance.getChildContext === 'function') {
10861 if (warningsForRoot === undefined) {
10862 warningsForRoot = [];
10863 pendingLegacyContextWarning.set(strictRoot, warningsForRoot);
10864 }
10865 warningsForRoot.push(fiber);
10866 }
10867 };
10868
10869 ReactStrictModeWarnings.flushLegacyContextWarning = function () {
10870 pendingLegacyContextWarning.forEach(function (fiberArray, strictRoot) {
10871 var uniqueNames = new Set();
10872 fiberArray.forEach(function (fiber) {
10873 uniqueNames.add(getComponentName(fiber.type) || 'Component');
10874 didWarnAboutLegacyContext.add(fiber.type);
10875 });
10876
10877 var sortedNames = setToSortedString(uniqueNames);
10878 var strictRootComponentStack = getStackByFiberInDevAndProd(strictRoot);
10879
10880 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);
10881 });
10882 };
10883}
10884
10885// This lets us hook into Fiber to debug what it's doing.
10886// See https://github.com/facebook/react/pull/8033.
10887// This is not part of the public API, not even for React DevTools.
10888// You may only inject a debugTool if you work on React Fiber itself.
10889var ReactFiberInstrumentation = {
10890 debugTool: null
10891};
10892
10893var ReactFiberInstrumentation_1 = ReactFiberInstrumentation;
10894
10895// TODO: Offscreen updates should never suspend. However, a promise that
10896// suspended inside an offscreen subtree should be able to ping at the priority
10897// of the outer render.
10898
10899function markPendingPriorityLevel(root, expirationTime) {
10900 // If there's a gap between completing a failed root and retrying it,
10901 // additional updates may be scheduled. Clear `didError`, in case the update
10902 // is sufficient to fix the error.
10903 root.didError = false;
10904
10905 // Update the latest and earliest pending times
10906 var earliestPendingTime = root.earliestPendingTime;
10907 if (earliestPendingTime === NoWork) {
10908 // No other pending updates.
10909 root.earliestPendingTime = root.latestPendingTime = expirationTime;
10910 } else {
10911 if (earliestPendingTime < expirationTime) {
10912 // This is the earliest pending update.
10913 root.earliestPendingTime = expirationTime;
10914 } else {
10915 var latestPendingTime = root.latestPendingTime;
10916 if (latestPendingTime > expirationTime) {
10917 // This is the latest pending update
10918 root.latestPendingTime = expirationTime;
10919 }
10920 }
10921 }
10922 findNextExpirationTimeToWorkOn(expirationTime, root);
10923}
10924
10925function markCommittedPriorityLevels(root, earliestRemainingTime) {
10926 root.didError = false;
10927
10928 if (earliestRemainingTime === NoWork) {
10929 // Fast path. There's no remaining work. Clear everything.
10930 root.earliestPendingTime = NoWork;
10931 root.latestPendingTime = NoWork;
10932 root.earliestSuspendedTime = NoWork;
10933 root.latestSuspendedTime = NoWork;
10934 root.latestPingedTime = NoWork;
10935 findNextExpirationTimeToWorkOn(NoWork, root);
10936 return;
10937 }
10938
10939 if (earliestRemainingTime < root.latestPingedTime) {
10940 root.latestPingedTime = NoWork;
10941 }
10942
10943 // Let's see if the previous latest known pending level was just flushed.
10944 var latestPendingTime = root.latestPendingTime;
10945 if (latestPendingTime !== NoWork) {
10946 if (latestPendingTime > earliestRemainingTime) {
10947 // We've flushed all the known pending levels.
10948 root.earliestPendingTime = root.latestPendingTime = NoWork;
10949 } else {
10950 var earliestPendingTime = root.earliestPendingTime;
10951 if (earliestPendingTime > earliestRemainingTime) {
10952 // We've flushed the earliest known pending level. Set this to the
10953 // latest pending time.
10954 root.earliestPendingTime = root.latestPendingTime;
10955 }
10956 }
10957 }
10958
10959 // Now let's handle the earliest remaining level in the whole tree. We need to
10960 // decide whether to treat it as a pending level or as suspended. Check
10961 // it falls within the range of known suspended levels.
10962
10963 var earliestSuspendedTime = root.earliestSuspendedTime;
10964 if (earliestSuspendedTime === NoWork) {
10965 // There's no suspended work. Treat the earliest remaining level as a
10966 // pending level.
10967 markPendingPriorityLevel(root, earliestRemainingTime);
10968 findNextExpirationTimeToWorkOn(NoWork, root);
10969 return;
10970 }
10971
10972 var latestSuspendedTime = root.latestSuspendedTime;
10973 if (earliestRemainingTime < latestSuspendedTime) {
10974 // The earliest remaining level is later than all the suspended work. That
10975 // means we've flushed all the suspended work.
10976 root.earliestSuspendedTime = NoWork;
10977 root.latestSuspendedTime = NoWork;
10978 root.latestPingedTime = NoWork;
10979
10980 // There's no suspended work. Treat the earliest remaining level as a
10981 // pending level.
10982 markPendingPriorityLevel(root, earliestRemainingTime);
10983 findNextExpirationTimeToWorkOn(NoWork, root);
10984 return;
10985 }
10986
10987 if (earliestRemainingTime > earliestSuspendedTime) {
10988 // The earliest remaining time is earlier than all the suspended work.
10989 // Treat it as a pending update.
10990 markPendingPriorityLevel(root, earliestRemainingTime);
10991 findNextExpirationTimeToWorkOn(NoWork, root);
10992 return;
10993 }
10994
10995 // The earliest remaining time falls within the range of known suspended
10996 // levels. We should treat this as suspended work.
10997 findNextExpirationTimeToWorkOn(NoWork, root);
10998}
10999
11000function hasLowerPriorityWork(root, erroredExpirationTime) {
11001 var latestPendingTime = root.latestPendingTime;
11002 var latestSuspendedTime = root.latestSuspendedTime;
11003 var latestPingedTime = root.latestPingedTime;
11004 return latestPendingTime !== NoWork && latestPendingTime < erroredExpirationTime || latestSuspendedTime !== NoWork && latestSuspendedTime < erroredExpirationTime || latestPingedTime !== NoWork && latestPingedTime < erroredExpirationTime;
11005}
11006
11007function isPriorityLevelSuspended(root, expirationTime) {
11008 var earliestSuspendedTime = root.earliestSuspendedTime;
11009 var latestSuspendedTime = root.latestSuspendedTime;
11010 return earliestSuspendedTime !== NoWork && expirationTime <= earliestSuspendedTime && expirationTime >= latestSuspendedTime;
11011}
11012
11013function markSuspendedPriorityLevel(root, suspendedTime) {
11014 root.didError = false;
11015 clearPing(root, suspendedTime);
11016
11017 // First, check the known pending levels and update them if needed.
11018 var earliestPendingTime = root.earliestPendingTime;
11019 var latestPendingTime = root.latestPendingTime;
11020 if (earliestPendingTime === suspendedTime) {
11021 if (latestPendingTime === suspendedTime) {
11022 // Both known pending levels were suspended. Clear them.
11023 root.earliestPendingTime = root.latestPendingTime = NoWork;
11024 } else {
11025 // The earliest pending level was suspended. Clear by setting it to the
11026 // latest pending level.
11027 root.earliestPendingTime = latestPendingTime;
11028 }
11029 } else if (latestPendingTime === suspendedTime) {
11030 // The latest pending level was suspended. Clear by setting it to the
11031 // latest pending level.
11032 root.latestPendingTime = earliestPendingTime;
11033 }
11034
11035 // Finally, update the known suspended levels.
11036 var earliestSuspendedTime = root.earliestSuspendedTime;
11037 var latestSuspendedTime = root.latestSuspendedTime;
11038 if (earliestSuspendedTime === NoWork) {
11039 // No other suspended levels.
11040 root.earliestSuspendedTime = root.latestSuspendedTime = suspendedTime;
11041 } else {
11042 if (earliestSuspendedTime < suspendedTime) {
11043 // This is the earliest suspended level.
11044 root.earliestSuspendedTime = suspendedTime;
11045 } else if (latestSuspendedTime > suspendedTime) {
11046 // This is the latest suspended level
11047 root.latestSuspendedTime = suspendedTime;
11048 }
11049 }
11050
11051 findNextExpirationTimeToWorkOn(suspendedTime, root);
11052}
11053
11054function markPingedPriorityLevel(root, pingedTime) {
11055 root.didError = false;
11056
11057 // TODO: When we add back resuming, we need to ensure the progressed work
11058 // is thrown out and not reused during the restarted render. One way to
11059 // invalidate the progressed work is to restart at expirationTime + 1.
11060 var latestPingedTime = root.latestPingedTime;
11061 if (latestPingedTime === NoWork || latestPingedTime > pingedTime) {
11062 root.latestPingedTime = pingedTime;
11063 }
11064 findNextExpirationTimeToWorkOn(pingedTime, root);
11065}
11066
11067function clearPing(root, completedTime) {
11068 var latestPingedTime = root.latestPingedTime;
11069 if (latestPingedTime >= completedTime) {
11070 root.latestPingedTime = NoWork;
11071 }
11072}
11073
11074function findEarliestOutstandingPriorityLevel(root, renderExpirationTime) {
11075 var earliestExpirationTime = renderExpirationTime;
11076
11077 var earliestPendingTime = root.earliestPendingTime;
11078 var earliestSuspendedTime = root.earliestSuspendedTime;
11079 if (earliestPendingTime > earliestExpirationTime) {
11080 earliestExpirationTime = earliestPendingTime;
11081 }
11082 if (earliestSuspendedTime > earliestExpirationTime) {
11083 earliestExpirationTime = earliestSuspendedTime;
11084 }
11085 return earliestExpirationTime;
11086}
11087
11088function didExpireAtExpirationTime(root, currentTime) {
11089 var expirationTime = root.expirationTime;
11090 if (expirationTime !== NoWork && currentTime <= expirationTime) {
11091 // The root has expired. Flush all work up to the current time.
11092 root.nextExpirationTimeToWorkOn = currentTime;
11093 }
11094}
11095
11096function findNextExpirationTimeToWorkOn(completedExpirationTime, root) {
11097 var earliestSuspendedTime = root.earliestSuspendedTime;
11098 var latestSuspendedTime = root.latestSuspendedTime;
11099 var earliestPendingTime = root.earliestPendingTime;
11100 var latestPingedTime = root.latestPingedTime;
11101
11102 // Work on the earliest pending time. Failing that, work on the latest
11103 // pinged time.
11104 var nextExpirationTimeToWorkOn = earliestPendingTime !== NoWork ? earliestPendingTime : latestPingedTime;
11105
11106 // If there is no pending or pinged work, check if there's suspended work
11107 // that's lower priority than what we just completed.
11108 if (nextExpirationTimeToWorkOn === NoWork && (completedExpirationTime === NoWork || latestSuspendedTime < completedExpirationTime)) {
11109 // The lowest priority suspended work is the work most likely to be
11110 // committed next. Let's start rendering it again, so that if it times out,
11111 // it's ready to commit.
11112 nextExpirationTimeToWorkOn = latestSuspendedTime;
11113 }
11114
11115 var expirationTime = nextExpirationTimeToWorkOn;
11116 if (expirationTime !== NoWork && earliestSuspendedTime > expirationTime) {
11117 // Expire using the earliest known expiration time.
11118 expirationTime = earliestSuspendedTime;
11119 }
11120
11121 root.nextExpirationTimeToWorkOn = nextExpirationTimeToWorkOn;
11122 root.expirationTime = expirationTime;
11123}
11124
11125function resolveDefaultProps(Component, baseProps) {
11126 if (Component && Component.defaultProps) {
11127 // Resolve default props. Taken from ReactElement
11128 var props = _assign({}, baseProps);
11129 var defaultProps = Component.defaultProps;
11130 for (var propName in defaultProps) {
11131 if (props[propName] === undefined) {
11132 props[propName] = defaultProps[propName];
11133 }
11134 }
11135 return props;
11136 }
11137 return baseProps;
11138}
11139
11140function readLazyComponentType(lazyComponent) {
11141 var status = lazyComponent._status;
11142 var result = lazyComponent._result;
11143 switch (status) {
11144 case Resolved:
11145 {
11146 var Component = result;
11147 return Component;
11148 }
11149 case Rejected:
11150 {
11151 var error = result;
11152 throw error;
11153 }
11154 case Pending:
11155 {
11156 var thenable = result;
11157 throw thenable;
11158 }
11159 default:
11160 {
11161 lazyComponent._status = Pending;
11162 var ctor = lazyComponent._ctor;
11163 var _thenable = ctor();
11164 _thenable.then(function (moduleObject) {
11165 if (lazyComponent._status === Pending) {
11166 var defaultExport = moduleObject.default;
11167 {
11168 if (defaultExport === undefined) {
11169 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);
11170 }
11171 }
11172 lazyComponent._status = Resolved;
11173 lazyComponent._result = defaultExport;
11174 }
11175 }, function (error) {
11176 if (lazyComponent._status === Pending) {
11177 lazyComponent._status = Rejected;
11178 lazyComponent._result = error;
11179 }
11180 });
11181 // Handle synchronous thenables.
11182 switch (lazyComponent._status) {
11183 case Resolved:
11184 return lazyComponent._result;
11185 case Rejected:
11186 throw lazyComponent._result;
11187 }
11188 lazyComponent._result = _thenable;
11189 throw _thenable;
11190 }
11191 }
11192}
11193
11194var fakeInternalInstance = {};
11195var isArray$1 = Array.isArray;
11196
11197// React.Component uses a shared frozen object by default.
11198// We'll use it to determine whether we need to initialize legacy refs.
11199var emptyRefsObject = new React.Component().refs;
11200
11201var didWarnAboutStateAssignmentForComponent = void 0;
11202var didWarnAboutUninitializedState = void 0;
11203var didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate = void 0;
11204var didWarnAboutLegacyLifecyclesAndDerivedState = void 0;
11205var didWarnAboutUndefinedDerivedState = void 0;
11206var warnOnUndefinedDerivedState = void 0;
11207var warnOnInvalidCallback$1 = void 0;
11208var didWarnAboutDirectlyAssigningPropsToState = void 0;
11209var didWarnAboutContextTypeAndContextTypes = void 0;
11210var didWarnAboutInvalidateContextType = void 0;
11211
11212{
11213 didWarnAboutStateAssignmentForComponent = new Set();
11214 didWarnAboutUninitializedState = new Set();
11215 didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate = new Set();
11216 didWarnAboutLegacyLifecyclesAndDerivedState = new Set();
11217 didWarnAboutDirectlyAssigningPropsToState = new Set();
11218 didWarnAboutUndefinedDerivedState = new Set();
11219 didWarnAboutContextTypeAndContextTypes = new Set();
11220 didWarnAboutInvalidateContextType = new Set();
11221
11222 var didWarnOnInvalidCallback = new Set();
11223
11224 warnOnInvalidCallback$1 = function (callback, callerName) {
11225 if (callback === null || typeof callback === 'function') {
11226 return;
11227 }
11228 var key = callerName + '_' + callback;
11229 if (!didWarnOnInvalidCallback.has(key)) {
11230 didWarnOnInvalidCallback.add(key);
11231 warningWithoutStack$1(false, '%s(...): Expected the last optional `callback` argument to be a ' + 'function. Instead received: %s.', callerName, callback);
11232 }
11233 };
11234
11235 warnOnUndefinedDerivedState = function (type, partialState) {
11236 if (partialState === undefined) {
11237 var componentName = getComponentName(type) || 'Component';
11238 if (!didWarnAboutUndefinedDerivedState.has(componentName)) {
11239 didWarnAboutUndefinedDerivedState.add(componentName);
11240 warningWithoutStack$1(false, '%s.getDerivedStateFromProps(): A valid state object (or null) must be returned. ' + 'You have returned undefined.', componentName);
11241 }
11242 }
11243 };
11244
11245 // This is so gross but it's at least non-critical and can be removed if
11246 // it causes problems. This is meant to give a nicer error message for
11247 // ReactDOM15.unstable_renderSubtreeIntoContainer(reactDOM16Component,
11248 // ...)) which otherwise throws a "_processChildContext is not a function"
11249 // exception.
11250 Object.defineProperty(fakeInternalInstance, '_processChildContext', {
11251 enumerable: false,
11252 value: function () {
11253 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).');
11254 }
11255 });
11256 Object.freeze(fakeInternalInstance);
11257}
11258
11259function applyDerivedStateFromProps(workInProgress, ctor, getDerivedStateFromProps, nextProps) {
11260 var prevState = workInProgress.memoizedState;
11261
11262 {
11263 if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & StrictMode) {
11264 // Invoke the function an extra time to help detect side-effects.
11265 getDerivedStateFromProps(nextProps, prevState);
11266 }
11267 }
11268
11269 var partialState = getDerivedStateFromProps(nextProps, prevState);
11270
11271 {
11272 warnOnUndefinedDerivedState(ctor, partialState);
11273 }
11274 // Merge the partial state and the previous state.
11275 var memoizedState = partialState === null || partialState === undefined ? prevState : _assign({}, prevState, partialState);
11276 workInProgress.memoizedState = memoizedState;
11277
11278 // Once the update queue is empty, persist the derived state onto the
11279 // base state.
11280 var updateQueue = workInProgress.updateQueue;
11281 if (updateQueue !== null && workInProgress.expirationTime === NoWork) {
11282 updateQueue.baseState = memoizedState;
11283 }
11284}
11285
11286var classComponentUpdater = {
11287 isMounted: isMounted,
11288 enqueueSetState: function (inst, payload, callback) {
11289 var fiber = get(inst);
11290 var currentTime = requestCurrentTime();
11291 var expirationTime = computeExpirationForFiber(currentTime, fiber);
11292
11293 var update = createUpdate(expirationTime);
11294 update.payload = payload;
11295 if (callback !== undefined && callback !== null) {
11296 {
11297 warnOnInvalidCallback$1(callback, 'setState');
11298 }
11299 update.callback = callback;
11300 }
11301
11302 flushPassiveEffects();
11303 enqueueUpdate(fiber, update);
11304 scheduleWork(fiber, expirationTime);
11305 },
11306 enqueueReplaceState: function (inst, payload, callback) {
11307 var fiber = get(inst);
11308 var currentTime = requestCurrentTime();
11309 var expirationTime = computeExpirationForFiber(currentTime, fiber);
11310
11311 var update = createUpdate(expirationTime);
11312 update.tag = ReplaceState;
11313 update.payload = payload;
11314
11315 if (callback !== undefined && callback !== null) {
11316 {
11317 warnOnInvalidCallback$1(callback, 'replaceState');
11318 }
11319 update.callback = callback;
11320 }
11321
11322 flushPassiveEffects();
11323 enqueueUpdate(fiber, update);
11324 scheduleWork(fiber, expirationTime);
11325 },
11326 enqueueForceUpdate: function (inst, callback) {
11327 var fiber = get(inst);
11328 var currentTime = requestCurrentTime();
11329 var expirationTime = computeExpirationForFiber(currentTime, fiber);
11330
11331 var update = createUpdate(expirationTime);
11332 update.tag = ForceUpdate;
11333
11334 if (callback !== undefined && callback !== null) {
11335 {
11336 warnOnInvalidCallback$1(callback, 'forceUpdate');
11337 }
11338 update.callback = callback;
11339 }
11340
11341 flushPassiveEffects();
11342 enqueueUpdate(fiber, update);
11343 scheduleWork(fiber, expirationTime);
11344 }
11345};
11346
11347function checkShouldComponentUpdate(workInProgress, ctor, oldProps, newProps, oldState, newState, nextContext) {
11348 var instance = workInProgress.stateNode;
11349 if (typeof instance.shouldComponentUpdate === 'function') {
11350 startPhaseTimer(workInProgress, 'shouldComponentUpdate');
11351 var shouldUpdate = instance.shouldComponentUpdate(newProps, newState, nextContext);
11352 stopPhaseTimer();
11353
11354 {
11355 !(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;
11356 }
11357
11358 return shouldUpdate;
11359 }
11360
11361 if (ctor.prototype && ctor.prototype.isPureReactComponent) {
11362 return !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState);
11363 }
11364
11365 return true;
11366}
11367
11368function checkClassInstance(workInProgress, ctor, newProps) {
11369 var instance = workInProgress.stateNode;
11370 {
11371 var name = getComponentName(ctor) || 'Component';
11372 var renderPresent = instance.render;
11373
11374 if (!renderPresent) {
11375 if (ctor.prototype && typeof ctor.prototype.render === 'function') {
11376 warningWithoutStack$1(false, '%s(...): No `render` method found on the returned component ' + 'instance: did you accidentally return an object from the constructor?', name);
11377 } else {
11378 warningWithoutStack$1(false, '%s(...): No `render` method found on the returned component ' + 'instance: you may have forgotten to define `render`.', name);
11379 }
11380 }
11381
11382 var noGetInitialStateOnES6 = !instance.getInitialState || instance.getInitialState.isReactClassApproved || instance.state;
11383 !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;
11384 var noGetDefaultPropsOnES6 = !instance.getDefaultProps || instance.getDefaultProps.isReactClassApproved;
11385 !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;
11386 var noInstancePropTypes = !instance.propTypes;
11387 !noInstancePropTypes ? warningWithoutStack$1(false, 'propTypes was defined as an instance property on %s. Use a static ' + 'property to define propTypes instead.', name) : void 0;
11388 var noInstanceContextType = !instance.contextType;
11389 !noInstanceContextType ? warningWithoutStack$1(false, 'contextType was defined as an instance property on %s. Use a static ' + 'property to define contextType instead.', name) : void 0;
11390 var noInstanceContextTypes = !instance.contextTypes;
11391 !noInstanceContextTypes ? warningWithoutStack$1(false, 'contextTypes was defined as an instance property on %s. Use a static ' + 'property to define contextTypes instead.', name) : void 0;
11392
11393 if (ctor.contextType && ctor.contextTypes && !didWarnAboutContextTypeAndContextTypes.has(ctor)) {
11394 didWarnAboutContextTypeAndContextTypes.add(ctor);
11395 warningWithoutStack$1(false, '%s declares both contextTypes and contextType static properties. ' + 'The legacy contextTypes property will be ignored.', name);
11396 }
11397
11398 var noComponentShouldUpdate = typeof instance.componentShouldUpdate !== 'function';
11399 !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;
11400 if (ctor.prototype && ctor.prototype.isPureReactComponent && typeof instance.shouldComponentUpdate !== 'undefined') {
11401 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');
11402 }
11403 var noComponentDidUnmount = typeof instance.componentDidUnmount !== 'function';
11404 !noComponentDidUnmount ? warningWithoutStack$1(false, '%s has a method called ' + 'componentDidUnmount(). But there is no such lifecycle method. ' + 'Did you mean componentWillUnmount()?', name) : void 0;
11405 var noComponentDidReceiveProps = typeof instance.componentDidReceiveProps !== 'function';
11406 !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;
11407 var noComponentWillRecieveProps = typeof instance.componentWillRecieveProps !== 'function';
11408 !noComponentWillRecieveProps ? warningWithoutStack$1(false, '%s has a method called ' + 'componentWillRecieveProps(). Did you mean componentWillReceiveProps()?', name) : void 0;
11409 var noUnsafeComponentWillRecieveProps = typeof instance.UNSAFE_componentWillRecieveProps !== 'function';
11410 !noUnsafeComponentWillRecieveProps ? warningWithoutStack$1(false, '%s has a method called ' + 'UNSAFE_componentWillRecieveProps(). Did you mean UNSAFE_componentWillReceiveProps()?', name) : void 0;
11411 var hasMutatedProps = instance.props !== newProps;
11412 !(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;
11413 var noInstanceDefaultProps = !instance.defaultProps;
11414 !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;
11415
11416 if (typeof instance.getSnapshotBeforeUpdate === 'function' && typeof instance.componentDidUpdate !== 'function' && !didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate.has(ctor)) {
11417 didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate.add(ctor);
11418 warningWithoutStack$1(false, '%s: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). ' + 'This component defines getSnapshotBeforeUpdate() only.', getComponentName(ctor));
11419 }
11420
11421 var noInstanceGetDerivedStateFromProps = typeof instance.getDerivedStateFromProps !== 'function';
11422 !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;
11423 var noInstanceGetDerivedStateFromCatch = typeof instance.getDerivedStateFromError !== 'function';
11424 !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;
11425 var noStaticGetSnapshotBeforeUpdate = typeof ctor.getSnapshotBeforeUpdate !== 'function';
11426 !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;
11427 var _state = instance.state;
11428 if (_state && (typeof _state !== 'object' || isArray$1(_state))) {
11429 warningWithoutStack$1(false, '%s.state: must be set to an object or null', name);
11430 }
11431 if (typeof instance.getChildContext === 'function') {
11432 !(typeof ctor.childContextTypes === 'object') ? warningWithoutStack$1(false, '%s.getChildContext(): childContextTypes must be defined in order to ' + 'use getChildContext().', name) : void 0;
11433 }
11434 }
11435}
11436
11437function adoptClassInstance(workInProgress, instance) {
11438 instance.updater = classComponentUpdater;
11439 workInProgress.stateNode = instance;
11440 // The instance needs access to the fiber so that it can schedule updates
11441 set(instance, workInProgress);
11442 {
11443 instance._reactInternalInstance = fakeInternalInstance;
11444 }
11445}
11446
11447function constructClassInstance(workInProgress, ctor, props, renderExpirationTime) {
11448 var isLegacyContextConsumer = false;
11449 var unmaskedContext = emptyContextObject;
11450 var context = null;
11451 var contextType = ctor.contextType;
11452
11453 {
11454 if ('contextType' in ctor) {
11455 var isValid =
11456 // Allow null for conditional declaration
11457 contextType === null || contextType !== undefined && contextType.$$typeof === REACT_CONTEXT_TYPE && contextType._context === undefined; // Not a <Context.Consumer>
11458
11459 if (!isValid && !didWarnAboutInvalidateContextType.has(ctor)) {
11460 didWarnAboutInvalidateContextType.add(ctor);
11461
11462 var addendum = '';
11463 if (contextType === undefined) {
11464 addendum = ' However, it is set to undefined. ' + 'This can be caused by a typo or by mixing up named and default imports. ' + 'This can also happen due to a circular dependency, so ' + 'try moving the createContext() call to a separate file.';
11465 } else if (typeof contextType !== 'object') {
11466 addendum = ' However, it is set to a ' + typeof contextType + '.';
11467 } else if (contextType.$$typeof === REACT_PROVIDER_TYPE) {
11468 addendum = ' Did you accidentally pass the Context.Provider instead?';
11469 } else if (contextType._context !== undefined) {
11470 // <Context.Consumer>
11471 addendum = ' Did you accidentally pass the Context.Consumer instead?';
11472 } else {
11473 addendum = ' However, it is set to an object with keys {' + Object.keys(contextType).join(', ') + '}.';
11474 }
11475 warningWithoutStack$1(false, '%s defines an invalid contextType. ' + 'contextType should point to the Context object returned by React.createContext().%s', getComponentName(ctor) || 'Component', addendum);
11476 }
11477 }
11478 }
11479
11480 if (typeof contextType === 'object' && contextType !== null) {
11481 context = readContext(contextType);
11482 } else {
11483 unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
11484 var contextTypes = ctor.contextTypes;
11485 isLegacyContextConsumer = contextTypes !== null && contextTypes !== undefined;
11486 context = isLegacyContextConsumer ? getMaskedContext(workInProgress, unmaskedContext) : emptyContextObject;
11487 }
11488
11489 // Instantiate twice to help detect side-effects.
11490 {
11491 if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & StrictMode) {
11492 new ctor(props, context); // eslint-disable-line no-new
11493 }
11494 }
11495
11496 var instance = new ctor(props, context);
11497 var state = workInProgress.memoizedState = instance.state !== null && instance.state !== undefined ? instance.state : null;
11498 adoptClassInstance(workInProgress, instance);
11499
11500 {
11501 if (typeof ctor.getDerivedStateFromProps === 'function' && state === null) {
11502 var componentName = getComponentName(ctor) || 'Component';
11503 if (!didWarnAboutUninitializedState.has(componentName)) {
11504 didWarnAboutUninitializedState.add(componentName);
11505 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);
11506 }
11507 }
11508
11509 // If new component APIs are defined, "unsafe" lifecycles won't be called.
11510 // Warn about these lifecycles if they are present.
11511 // Don't warn about react-lifecycles-compat polyfilled methods though.
11512 if (typeof ctor.getDerivedStateFromProps === 'function' || typeof instance.getSnapshotBeforeUpdate === 'function') {
11513 var foundWillMountName = null;
11514 var foundWillReceivePropsName = null;
11515 var foundWillUpdateName = null;
11516 if (typeof instance.componentWillMount === 'function' && instance.componentWillMount.__suppressDeprecationWarning !== true) {
11517 foundWillMountName = 'componentWillMount';
11518 } else if (typeof instance.UNSAFE_componentWillMount === 'function') {
11519 foundWillMountName = 'UNSAFE_componentWillMount';
11520 }
11521 if (typeof instance.componentWillReceiveProps === 'function' && instance.componentWillReceiveProps.__suppressDeprecationWarning !== true) {
11522 foundWillReceivePropsName = 'componentWillReceiveProps';
11523 } else if (typeof instance.UNSAFE_componentWillReceiveProps === 'function') {
11524 foundWillReceivePropsName = 'UNSAFE_componentWillReceiveProps';
11525 }
11526 if (typeof instance.componentWillUpdate === 'function' && instance.componentWillUpdate.__suppressDeprecationWarning !== true) {
11527 foundWillUpdateName = 'componentWillUpdate';
11528 } else if (typeof instance.UNSAFE_componentWillUpdate === 'function') {
11529 foundWillUpdateName = 'UNSAFE_componentWillUpdate';
11530 }
11531 if (foundWillMountName !== null || foundWillReceivePropsName !== null || foundWillUpdateName !== null) {
11532 var _componentName = getComponentName(ctor) || 'Component';
11533 var newApiName = typeof ctor.getDerivedStateFromProps === 'function' ? 'getDerivedStateFromProps()' : 'getSnapshotBeforeUpdate()';
11534 if (!didWarnAboutLegacyLifecyclesAndDerivedState.has(_componentName)) {
11535 didWarnAboutLegacyLifecyclesAndDerivedState.add(_componentName);
11536 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 : '');
11537 }
11538 }
11539 }
11540 }
11541
11542 // Cache unmasked context so we can avoid recreating masked context unless necessary.
11543 // ReactFiberContext usually updates this cache but can't for newly-created instances.
11544 if (isLegacyContextConsumer) {
11545 cacheContext(workInProgress, unmaskedContext, context);
11546 }
11547
11548 return instance;
11549}
11550
11551function callComponentWillMount(workInProgress, instance) {
11552 startPhaseTimer(workInProgress, 'componentWillMount');
11553 var oldState = instance.state;
11554
11555 if (typeof instance.componentWillMount === 'function') {
11556 instance.componentWillMount();
11557 }
11558 if (typeof instance.UNSAFE_componentWillMount === 'function') {
11559 instance.UNSAFE_componentWillMount();
11560 }
11561
11562 stopPhaseTimer();
11563
11564 if (oldState !== instance.state) {
11565 {
11566 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');
11567 }
11568 classComponentUpdater.enqueueReplaceState(instance, instance.state, null);
11569 }
11570}
11571
11572function callComponentWillReceiveProps(workInProgress, instance, newProps, nextContext) {
11573 var oldState = instance.state;
11574 startPhaseTimer(workInProgress, 'componentWillReceiveProps');
11575 if (typeof instance.componentWillReceiveProps === 'function') {
11576 instance.componentWillReceiveProps(newProps, nextContext);
11577 }
11578 if (typeof instance.UNSAFE_componentWillReceiveProps === 'function') {
11579 instance.UNSAFE_componentWillReceiveProps(newProps, nextContext);
11580 }
11581 stopPhaseTimer();
11582
11583 if (instance.state !== oldState) {
11584 {
11585 var componentName = getComponentName(workInProgress.type) || 'Component';
11586 if (!didWarnAboutStateAssignmentForComponent.has(componentName)) {
11587 didWarnAboutStateAssignmentForComponent.add(componentName);
11588 warningWithoutStack$1(false, '%s.componentWillReceiveProps(): Assigning directly to ' + "this.state is deprecated (except inside a component's " + 'constructor). Use setState instead.', componentName);
11589 }
11590 }
11591 classComponentUpdater.enqueueReplaceState(instance, instance.state, null);
11592 }
11593}
11594
11595// Invokes the mount life-cycles on a previously never rendered instance.
11596function mountClassInstance(workInProgress, ctor, newProps, renderExpirationTime) {
11597 {
11598 checkClassInstance(workInProgress, ctor, newProps);
11599 }
11600
11601 var instance = workInProgress.stateNode;
11602 instance.props = newProps;
11603 instance.state = workInProgress.memoizedState;
11604 instance.refs = emptyRefsObject;
11605
11606 var contextType = ctor.contextType;
11607 if (typeof contextType === 'object' && contextType !== null) {
11608 instance.context = readContext(contextType);
11609 } else {
11610 var unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
11611 instance.context = getMaskedContext(workInProgress, unmaskedContext);
11612 }
11613
11614 {
11615 if (instance.state === newProps) {
11616 var componentName = getComponentName(ctor) || 'Component';
11617 if (!didWarnAboutDirectlyAssigningPropsToState.has(componentName)) {
11618 didWarnAboutDirectlyAssigningPropsToState.add(componentName);
11619 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);
11620 }
11621 }
11622
11623 if (workInProgress.mode & StrictMode) {
11624 ReactStrictModeWarnings.recordUnsafeLifecycleWarnings(workInProgress, instance);
11625
11626 ReactStrictModeWarnings.recordLegacyContextWarning(workInProgress, instance);
11627 }
11628
11629 if (warnAboutDeprecatedLifecycles) {
11630 ReactStrictModeWarnings.recordDeprecationWarnings(workInProgress, instance);
11631 }
11632 }
11633
11634 var updateQueue = workInProgress.updateQueue;
11635 if (updateQueue !== null) {
11636 processUpdateQueue(workInProgress, updateQueue, newProps, instance, renderExpirationTime);
11637 instance.state = workInProgress.memoizedState;
11638 }
11639
11640 var getDerivedStateFromProps = ctor.getDerivedStateFromProps;
11641 if (typeof getDerivedStateFromProps === 'function') {
11642 applyDerivedStateFromProps(workInProgress, ctor, getDerivedStateFromProps, newProps);
11643 instance.state = workInProgress.memoizedState;
11644 }
11645
11646 // In order to support react-lifecycles-compat polyfilled components,
11647 // Unsafe lifecycles should not be invoked for components using the new APIs.
11648 if (typeof ctor.getDerivedStateFromProps !== 'function' && typeof instance.getSnapshotBeforeUpdate !== 'function' && (typeof instance.UNSAFE_componentWillMount === 'function' || typeof instance.componentWillMount === 'function')) {
11649 callComponentWillMount(workInProgress, instance);
11650 // If we had additional state updates during this life-cycle, let's
11651 // process them now.
11652 updateQueue = workInProgress.updateQueue;
11653 if (updateQueue !== null) {
11654 processUpdateQueue(workInProgress, updateQueue, newProps, instance, renderExpirationTime);
11655 instance.state = workInProgress.memoizedState;
11656 }
11657 }
11658
11659 if (typeof instance.componentDidMount === 'function') {
11660 workInProgress.effectTag |= Update;
11661 }
11662}
11663
11664function resumeMountClassInstance(workInProgress, ctor, newProps, renderExpirationTime) {
11665 var instance = workInProgress.stateNode;
11666
11667 var oldProps = workInProgress.memoizedProps;
11668 instance.props = oldProps;
11669
11670 var oldContext = instance.context;
11671 var contextType = ctor.contextType;
11672 var nextContext = void 0;
11673 if (typeof contextType === 'object' && contextType !== null) {
11674 nextContext = readContext(contextType);
11675 } else {
11676 var nextLegacyUnmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
11677 nextContext = getMaskedContext(workInProgress, nextLegacyUnmaskedContext);
11678 }
11679
11680 var getDerivedStateFromProps = ctor.getDerivedStateFromProps;
11681 var hasNewLifecycles = typeof getDerivedStateFromProps === 'function' || typeof instance.getSnapshotBeforeUpdate === 'function';
11682
11683 // Note: During these life-cycles, instance.props/instance.state are what
11684 // ever the previously attempted to render - not the "current". However,
11685 // during componentDidUpdate we pass the "current" props.
11686
11687 // In order to support react-lifecycles-compat polyfilled components,
11688 // Unsafe lifecycles should not be invoked for components using the new APIs.
11689 if (!hasNewLifecycles && (typeof instance.UNSAFE_componentWillReceiveProps === 'function' || typeof instance.componentWillReceiveProps === 'function')) {
11690 if (oldProps !== newProps || oldContext !== nextContext) {
11691 callComponentWillReceiveProps(workInProgress, instance, newProps, nextContext);
11692 }
11693 }
11694
11695 resetHasForceUpdateBeforeProcessing();
11696
11697 var oldState = workInProgress.memoizedState;
11698 var newState = instance.state = oldState;
11699 var updateQueue = workInProgress.updateQueue;
11700 if (updateQueue !== null) {
11701 processUpdateQueue(workInProgress, updateQueue, newProps, instance, renderExpirationTime);
11702 newState = workInProgress.memoizedState;
11703 }
11704 if (oldProps === newProps && oldState === newState && !hasContextChanged() && !checkHasForceUpdateAfterProcessing()) {
11705 // If an update was already in progress, we should schedule an Update
11706 // effect even though we're bailing out, so that cWU/cDU are called.
11707 if (typeof instance.componentDidMount === 'function') {
11708 workInProgress.effectTag |= Update;
11709 }
11710 return false;
11711 }
11712
11713 if (typeof getDerivedStateFromProps === 'function') {
11714 applyDerivedStateFromProps(workInProgress, ctor, getDerivedStateFromProps, newProps);
11715 newState = workInProgress.memoizedState;
11716 }
11717
11718 var shouldUpdate = checkHasForceUpdateAfterProcessing() || checkShouldComponentUpdate(workInProgress, ctor, oldProps, newProps, oldState, newState, nextContext);
11719
11720 if (shouldUpdate) {
11721 // In order to support react-lifecycles-compat polyfilled components,
11722 // Unsafe lifecycles should not be invoked for components using the new APIs.
11723 if (!hasNewLifecycles && (typeof instance.UNSAFE_componentWillMount === 'function' || typeof instance.componentWillMount === 'function')) {
11724 startPhaseTimer(workInProgress, 'componentWillMount');
11725 if (typeof instance.componentWillMount === 'function') {
11726 instance.componentWillMount();
11727 }
11728 if (typeof instance.UNSAFE_componentWillMount === 'function') {
11729 instance.UNSAFE_componentWillMount();
11730 }
11731 stopPhaseTimer();
11732 }
11733 if (typeof instance.componentDidMount === 'function') {
11734 workInProgress.effectTag |= Update;
11735 }
11736 } else {
11737 // If an update was already in progress, we should schedule an Update
11738 // effect even though we're bailing out, so that cWU/cDU are called.
11739 if (typeof instance.componentDidMount === 'function') {
11740 workInProgress.effectTag |= Update;
11741 }
11742
11743 // If shouldComponentUpdate returned false, we should still update the
11744 // memoized state to indicate that this work can be reused.
11745 workInProgress.memoizedProps = newProps;
11746 workInProgress.memoizedState = newState;
11747 }
11748
11749 // Update the existing instance's state, props, and context pointers even
11750 // if shouldComponentUpdate returns false.
11751 instance.props = newProps;
11752 instance.state = newState;
11753 instance.context = nextContext;
11754
11755 return shouldUpdate;
11756}
11757
11758// Invokes the update life-cycles and returns false if it shouldn't rerender.
11759function updateClassInstance(current, workInProgress, ctor, newProps, renderExpirationTime) {
11760 var instance = workInProgress.stateNode;
11761
11762 var oldProps = workInProgress.memoizedProps;
11763 instance.props = workInProgress.type === workInProgress.elementType ? oldProps : resolveDefaultProps(workInProgress.type, oldProps);
11764
11765 var oldContext = instance.context;
11766 var contextType = ctor.contextType;
11767 var nextContext = void 0;
11768 if (typeof contextType === 'object' && contextType !== null) {
11769 nextContext = readContext(contextType);
11770 } else {
11771 var nextUnmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
11772 nextContext = getMaskedContext(workInProgress, nextUnmaskedContext);
11773 }
11774
11775 var getDerivedStateFromProps = ctor.getDerivedStateFromProps;
11776 var hasNewLifecycles = typeof getDerivedStateFromProps === 'function' || typeof instance.getSnapshotBeforeUpdate === 'function';
11777
11778 // Note: During these life-cycles, instance.props/instance.state are what
11779 // ever the previously attempted to render - not the "current". However,
11780 // during componentDidUpdate we pass the "current" props.
11781
11782 // In order to support react-lifecycles-compat polyfilled components,
11783 // Unsafe lifecycles should not be invoked for components using the new APIs.
11784 if (!hasNewLifecycles && (typeof instance.UNSAFE_componentWillReceiveProps === 'function' || typeof instance.componentWillReceiveProps === 'function')) {
11785 if (oldProps !== newProps || oldContext !== nextContext) {
11786 callComponentWillReceiveProps(workInProgress, instance, newProps, nextContext);
11787 }
11788 }
11789
11790 resetHasForceUpdateBeforeProcessing();
11791
11792 var oldState = workInProgress.memoizedState;
11793 var newState = instance.state = oldState;
11794 var updateQueue = workInProgress.updateQueue;
11795 if (updateQueue !== null) {
11796 processUpdateQueue(workInProgress, updateQueue, newProps, instance, renderExpirationTime);
11797 newState = workInProgress.memoizedState;
11798 }
11799
11800 if (oldProps === newProps && oldState === newState && !hasContextChanged() && !checkHasForceUpdateAfterProcessing()) {
11801 // If an update was already in progress, we should schedule an Update
11802 // effect even though we're bailing out, so that cWU/cDU are called.
11803 if (typeof instance.componentDidUpdate === 'function') {
11804 if (oldProps !== current.memoizedProps || oldState !== current.memoizedState) {
11805 workInProgress.effectTag |= Update;
11806 }
11807 }
11808 if (typeof instance.getSnapshotBeforeUpdate === 'function') {
11809 if (oldProps !== current.memoizedProps || oldState !== current.memoizedState) {
11810 workInProgress.effectTag |= Snapshot;
11811 }
11812 }
11813 return false;
11814 }
11815
11816 if (typeof getDerivedStateFromProps === 'function') {
11817 applyDerivedStateFromProps(workInProgress, ctor, getDerivedStateFromProps, newProps);
11818 newState = workInProgress.memoizedState;
11819 }
11820
11821 var shouldUpdate = checkHasForceUpdateAfterProcessing() || checkShouldComponentUpdate(workInProgress, ctor, oldProps, newProps, oldState, newState, nextContext);
11822
11823 if (shouldUpdate) {
11824 // In order to support react-lifecycles-compat polyfilled components,
11825 // Unsafe lifecycles should not be invoked for components using the new APIs.
11826 if (!hasNewLifecycles && (typeof instance.UNSAFE_componentWillUpdate === 'function' || typeof instance.componentWillUpdate === 'function')) {
11827 startPhaseTimer(workInProgress, 'componentWillUpdate');
11828 if (typeof instance.componentWillUpdate === 'function') {
11829 instance.componentWillUpdate(newProps, newState, nextContext);
11830 }
11831 if (typeof instance.UNSAFE_componentWillUpdate === 'function') {
11832 instance.UNSAFE_componentWillUpdate(newProps, newState, nextContext);
11833 }
11834 stopPhaseTimer();
11835 }
11836 if (typeof instance.componentDidUpdate === 'function') {
11837 workInProgress.effectTag |= Update;
11838 }
11839 if (typeof instance.getSnapshotBeforeUpdate === 'function') {
11840 workInProgress.effectTag |= Snapshot;
11841 }
11842 } else {
11843 // If an update was already in progress, we should schedule an Update
11844 // effect even though we're bailing out, so that cWU/cDU are called.
11845 if (typeof instance.componentDidUpdate === 'function') {
11846 if (oldProps !== current.memoizedProps || oldState !== current.memoizedState) {
11847 workInProgress.effectTag |= Update;
11848 }
11849 }
11850 if (typeof instance.getSnapshotBeforeUpdate === 'function') {
11851 if (oldProps !== current.memoizedProps || oldState !== current.memoizedState) {
11852 workInProgress.effectTag |= Snapshot;
11853 }
11854 }
11855
11856 // If shouldComponentUpdate returned false, we should still update the
11857 // memoized props/state to indicate that this work can be reused.
11858 workInProgress.memoizedProps = newProps;
11859 workInProgress.memoizedState = newState;
11860 }
11861
11862 // Update the existing instance's state, props, and context pointers even
11863 // if shouldComponentUpdate returns false.
11864 instance.props = newProps;
11865 instance.state = newState;
11866 instance.context = nextContext;
11867
11868 return shouldUpdate;
11869}
11870
11871var didWarnAboutMaps = void 0;
11872var didWarnAboutGenerators = void 0;
11873var didWarnAboutStringRefInStrictMode = void 0;
11874var ownerHasKeyUseWarning = void 0;
11875var ownerHasFunctionTypeWarning = void 0;
11876var warnForMissingKey = function (child) {};
11877
11878{
11879 didWarnAboutMaps = false;
11880 didWarnAboutGenerators = false;
11881 didWarnAboutStringRefInStrictMode = {};
11882
11883 /**
11884 * Warn if there's no key explicitly set on dynamic arrays of children or
11885 * object keys are not valid. This allows us to keep track of children between
11886 * updates.
11887 */
11888 ownerHasKeyUseWarning = {};
11889 ownerHasFunctionTypeWarning = {};
11890
11891 warnForMissingKey = function (child) {
11892 if (child === null || typeof child !== 'object') {
11893 return;
11894 }
11895 if (!child._store || child._store.validated || child.key != null) {
11896 return;
11897 }
11898 !(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;
11899 child._store.validated = true;
11900
11901 var currentComponentErrorInfo = 'Each child in a list should have a unique ' + '"key" prop. See https://fb.me/react-warning-keys for ' + 'more information.' + getCurrentFiberStackInDev();
11902 if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
11903 return;
11904 }
11905 ownerHasKeyUseWarning[currentComponentErrorInfo] = true;
11906
11907 warning$1(false, 'Each child in a list should have a unique ' + '"key" prop. See https://fb.me/react-warning-keys for ' + 'more information.');
11908 };
11909}
11910
11911var isArray = Array.isArray;
11912
11913function coerceRef(returnFiber, current$$1, element) {
11914 var mixedRef = element.ref;
11915 if (mixedRef !== null && typeof mixedRef !== 'function' && typeof mixedRef !== 'object') {
11916 {
11917 if (returnFiber.mode & StrictMode) {
11918 var componentName = getComponentName(returnFiber.type) || 'Component';
11919 if (!didWarnAboutStringRefInStrictMode[componentName]) {
11920 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));
11921 didWarnAboutStringRefInStrictMode[componentName] = true;
11922 }
11923 }
11924 }
11925
11926 if (element._owner) {
11927 var owner = element._owner;
11928 var inst = void 0;
11929 if (owner) {
11930 var ownerFiber = owner;
11931 !(ownerFiber.tag === ClassComponent) ? invariant(false, 'Function components cannot have refs. Did you mean to use React.forwardRef()?') : void 0;
11932 inst = ownerFiber.stateNode;
11933 }
11934 !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;
11935 var stringRef = '' + mixedRef;
11936 // Check if previous string ref matches new string ref
11937 if (current$$1 !== null && current$$1.ref !== null && typeof current$$1.ref === 'function' && current$$1.ref._stringRef === stringRef) {
11938 return current$$1.ref;
11939 }
11940 var ref = function (value) {
11941 var refs = inst.refs;
11942 if (refs === emptyRefsObject) {
11943 // This is a lazy pooled frozen object, so we need to initialize.
11944 refs = inst.refs = {};
11945 }
11946 if (value === null) {
11947 delete refs[stringRef];
11948 } else {
11949 refs[stringRef] = value;
11950 }
11951 };
11952 ref._stringRef = stringRef;
11953 return ref;
11954 } else {
11955 !(typeof mixedRef === 'string') ? invariant(false, 'Expected ref to be a function, a string, an object returned by React.createRef(), or null.') : void 0;
11956 !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;
11957 }
11958 }
11959 return mixedRef;
11960}
11961
11962function throwOnInvalidObjectType(returnFiber, newChild) {
11963 if (returnFiber.type !== 'textarea') {
11964 var addendum = '';
11965 {
11966 addendum = ' If you meant to render a collection of children, use an array ' + 'instead.' + getCurrentFiberStackInDev();
11967 }
11968 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);
11969 }
11970}
11971
11972function warnOnFunctionType() {
11973 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();
11974
11975 if (ownerHasFunctionTypeWarning[currentComponentErrorInfo]) {
11976 return;
11977 }
11978 ownerHasFunctionTypeWarning[currentComponentErrorInfo] = true;
11979
11980 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.');
11981}
11982
11983// This wrapper function exists because I expect to clone the code in each path
11984// to be able to optimize each path individually by branching early. This needs
11985// a compiler or we can do it manually. Helpers that don't need this branching
11986// live outside of this function.
11987function ChildReconciler(shouldTrackSideEffects) {
11988 function deleteChild(returnFiber, childToDelete) {
11989 if (!shouldTrackSideEffects) {
11990 // Noop.
11991 return;
11992 }
11993 // Deletions are added in reversed order so we add it to the front.
11994 // At this point, the return fiber's effect list is empty except for
11995 // deletions, so we can just append the deletion to the list. The remaining
11996 // effects aren't added until the complete phase. Once we implement
11997 // resuming, this may not be true.
11998 var last = returnFiber.lastEffect;
11999 if (last !== null) {
12000 last.nextEffect = childToDelete;
12001 returnFiber.lastEffect = childToDelete;
12002 } else {
12003 returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
12004 }
12005 childToDelete.nextEffect = null;
12006 childToDelete.effectTag = Deletion;
12007 }
12008
12009 function deleteRemainingChildren(returnFiber, currentFirstChild) {
12010 if (!shouldTrackSideEffects) {
12011 // Noop.
12012 return null;
12013 }
12014
12015 // TODO: For the shouldClone case, this could be micro-optimized a bit by
12016 // assuming that after the first child we've already added everything.
12017 var childToDelete = currentFirstChild;
12018 while (childToDelete !== null) {
12019 deleteChild(returnFiber, childToDelete);
12020 childToDelete = childToDelete.sibling;
12021 }
12022 return null;
12023 }
12024
12025 function mapRemainingChildren(returnFiber, currentFirstChild) {
12026 // Add the remaining children to a temporary map so that we can find them by
12027 // keys quickly. Implicit (null) keys get added to this set with their index
12028 var existingChildren = new Map();
12029
12030 var existingChild = currentFirstChild;
12031 while (existingChild !== null) {
12032 if (existingChild.key !== null) {
12033 existingChildren.set(existingChild.key, existingChild);
12034 } else {
12035 existingChildren.set(existingChild.index, existingChild);
12036 }
12037 existingChild = existingChild.sibling;
12038 }
12039 return existingChildren;
12040 }
12041
12042 function useFiber(fiber, pendingProps, expirationTime) {
12043 // We currently set sibling to null and index to 0 here because it is easy
12044 // to forget to do before returning it. E.g. for the single child case.
12045 var clone = createWorkInProgress(fiber, pendingProps, expirationTime);
12046 clone.index = 0;
12047 clone.sibling = null;
12048 return clone;
12049 }
12050
12051 function placeChild(newFiber, lastPlacedIndex, newIndex) {
12052 newFiber.index = newIndex;
12053 if (!shouldTrackSideEffects) {
12054 // Noop.
12055 return lastPlacedIndex;
12056 }
12057 var current$$1 = newFiber.alternate;
12058 if (current$$1 !== null) {
12059 var oldIndex = current$$1.index;
12060 if (oldIndex < lastPlacedIndex) {
12061 // This is a move.
12062 newFiber.effectTag = Placement;
12063 return lastPlacedIndex;
12064 } else {
12065 // This item can stay in place.
12066 return oldIndex;
12067 }
12068 } else {
12069 // This is an insertion.
12070 newFiber.effectTag = Placement;
12071 return lastPlacedIndex;
12072 }
12073 }
12074
12075 function placeSingleChild(newFiber) {
12076 // This is simpler for the single child case. We only need to do a
12077 // placement for inserting new children.
12078 if (shouldTrackSideEffects && newFiber.alternate === null) {
12079 newFiber.effectTag = Placement;
12080 }
12081 return newFiber;
12082 }
12083
12084 function updateTextNode(returnFiber, current$$1, textContent, expirationTime) {
12085 if (current$$1 === null || current$$1.tag !== HostText) {
12086 // Insert
12087 var created = createFiberFromText(textContent, returnFiber.mode, expirationTime);
12088 created.return = returnFiber;
12089 return created;
12090 } else {
12091 // Update
12092 var existing = useFiber(current$$1, textContent, expirationTime);
12093 existing.return = returnFiber;
12094 return existing;
12095 }
12096 }
12097
12098 function updateElement(returnFiber, current$$1, element, expirationTime) {
12099 if (current$$1 !== null && current$$1.elementType === element.type) {
12100 // Move based on index
12101 var existing = useFiber(current$$1, element.props, expirationTime);
12102 existing.ref = coerceRef(returnFiber, current$$1, element);
12103 existing.return = returnFiber;
12104 {
12105 existing._debugSource = element._source;
12106 existing._debugOwner = element._owner;
12107 }
12108 return existing;
12109 } else {
12110 // Insert
12111 var created = createFiberFromElement(element, returnFiber.mode, expirationTime);
12112 created.ref = coerceRef(returnFiber, current$$1, element);
12113 created.return = returnFiber;
12114 return created;
12115 }
12116 }
12117
12118 function updatePortal(returnFiber, current$$1, portal, expirationTime) {
12119 if (current$$1 === null || current$$1.tag !== HostPortal || current$$1.stateNode.containerInfo !== portal.containerInfo || current$$1.stateNode.implementation !== portal.implementation) {
12120 // Insert
12121 var created = createFiberFromPortal(portal, returnFiber.mode, expirationTime);
12122 created.return = returnFiber;
12123 return created;
12124 } else {
12125 // Update
12126 var existing = useFiber(current$$1, portal.children || [], expirationTime);
12127 existing.return = returnFiber;
12128 return existing;
12129 }
12130 }
12131
12132 function updateFragment(returnFiber, current$$1, fragment, expirationTime, key) {
12133 if (current$$1 === null || current$$1.tag !== Fragment) {
12134 // Insert
12135 var created = createFiberFromFragment(fragment, returnFiber.mode, expirationTime, key);
12136 created.return = returnFiber;
12137 return created;
12138 } else {
12139 // Update
12140 var existing = useFiber(current$$1, fragment, expirationTime);
12141 existing.return = returnFiber;
12142 return existing;
12143 }
12144 }
12145
12146 function createChild(returnFiber, newChild, expirationTime) {
12147 if (typeof newChild === 'string' || typeof newChild === 'number') {
12148 // Text nodes don't have keys. If the previous node is implicitly keyed
12149 // we can continue to replace it without aborting even if it is not a text
12150 // node.
12151 var created = createFiberFromText('' + newChild, returnFiber.mode, expirationTime);
12152 created.return = returnFiber;
12153 return created;
12154 }
12155
12156 if (typeof newChild === 'object' && newChild !== null) {
12157 switch (newChild.$$typeof) {
12158 case REACT_ELEMENT_TYPE:
12159 {
12160 var _created = createFiberFromElement(newChild, returnFiber.mode, expirationTime);
12161 _created.ref = coerceRef(returnFiber, null, newChild);
12162 _created.return = returnFiber;
12163 return _created;
12164 }
12165 case REACT_PORTAL_TYPE:
12166 {
12167 var _created2 = createFiberFromPortal(newChild, returnFiber.mode, expirationTime);
12168 _created2.return = returnFiber;
12169 return _created2;
12170 }
12171 }
12172
12173 if (isArray(newChild) || getIteratorFn(newChild)) {
12174 var _created3 = createFiberFromFragment(newChild, returnFiber.mode, expirationTime, null);
12175 _created3.return = returnFiber;
12176 return _created3;
12177 }
12178
12179 throwOnInvalidObjectType(returnFiber, newChild);
12180 }
12181
12182 {
12183 if (typeof newChild === 'function') {
12184 warnOnFunctionType();
12185 }
12186 }
12187
12188 return null;
12189 }
12190
12191 function updateSlot(returnFiber, oldFiber, newChild, expirationTime) {
12192 // Update the fiber if the keys match, otherwise return null.
12193
12194 var key = oldFiber !== null ? oldFiber.key : null;
12195
12196 if (typeof newChild === 'string' || typeof newChild === 'number') {
12197 // Text nodes don't have keys. If the previous node is implicitly keyed
12198 // we can continue to replace it without aborting even if it is not a text
12199 // node.
12200 if (key !== null) {
12201 return null;
12202 }
12203 return updateTextNode(returnFiber, oldFiber, '' + newChild, expirationTime);
12204 }
12205
12206 if (typeof newChild === 'object' && newChild !== null) {
12207 switch (newChild.$$typeof) {
12208 case REACT_ELEMENT_TYPE:
12209 {
12210 if (newChild.key === key) {
12211 if (newChild.type === REACT_FRAGMENT_TYPE) {
12212 return updateFragment(returnFiber, oldFiber, newChild.props.children, expirationTime, key);
12213 }
12214 return updateElement(returnFiber, oldFiber, newChild, expirationTime);
12215 } else {
12216 return null;
12217 }
12218 }
12219 case REACT_PORTAL_TYPE:
12220 {
12221 if (newChild.key === key) {
12222 return updatePortal(returnFiber, oldFiber, newChild, expirationTime);
12223 } else {
12224 return null;
12225 }
12226 }
12227 }
12228
12229 if (isArray(newChild) || getIteratorFn(newChild)) {
12230 if (key !== null) {
12231 return null;
12232 }
12233
12234 return updateFragment(returnFiber, oldFiber, newChild, expirationTime, null);
12235 }
12236
12237 throwOnInvalidObjectType(returnFiber, newChild);
12238 }
12239
12240 {
12241 if (typeof newChild === 'function') {
12242 warnOnFunctionType();
12243 }
12244 }
12245
12246 return null;
12247 }
12248
12249 function updateFromMap(existingChildren, returnFiber, newIdx, newChild, expirationTime) {
12250 if (typeof newChild === 'string' || typeof newChild === 'number') {
12251 // Text nodes don't have keys, so we neither have to check the old nor
12252 // new node for the key. If both are text nodes, they match.
12253 var matchedFiber = existingChildren.get(newIdx) || null;
12254 return updateTextNode(returnFiber, matchedFiber, '' + newChild, expirationTime);
12255 }
12256
12257 if (typeof newChild === 'object' && newChild !== null) {
12258 switch (newChild.$$typeof) {
12259 case REACT_ELEMENT_TYPE:
12260 {
12261 var _matchedFiber = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;
12262 if (newChild.type === REACT_FRAGMENT_TYPE) {
12263 return updateFragment(returnFiber, _matchedFiber, newChild.props.children, expirationTime, newChild.key);
12264 }
12265 return updateElement(returnFiber, _matchedFiber, newChild, expirationTime);
12266 }
12267 case REACT_PORTAL_TYPE:
12268 {
12269 var _matchedFiber2 = existingChildren.get(newChild.key === null ? newIdx : newChild.key) || null;
12270 return updatePortal(returnFiber, _matchedFiber2, newChild, expirationTime);
12271 }
12272 }
12273
12274 if (isArray(newChild) || getIteratorFn(newChild)) {
12275 var _matchedFiber3 = existingChildren.get(newIdx) || null;
12276 return updateFragment(returnFiber, _matchedFiber3, newChild, expirationTime, null);
12277 }
12278
12279 throwOnInvalidObjectType(returnFiber, newChild);
12280 }
12281
12282 {
12283 if (typeof newChild === 'function') {
12284 warnOnFunctionType();
12285 }
12286 }
12287
12288 return null;
12289 }
12290
12291 /**
12292 * Warns if there is a duplicate or missing key
12293 */
12294 function warnOnInvalidKey(child, knownKeys) {
12295 {
12296 if (typeof child !== 'object' || child === null) {
12297 return knownKeys;
12298 }
12299 switch (child.$$typeof) {
12300 case REACT_ELEMENT_TYPE:
12301 case REACT_PORTAL_TYPE:
12302 warnForMissingKey(child);
12303 var key = child.key;
12304 if (typeof key !== 'string') {
12305 break;
12306 }
12307 if (knownKeys === null) {
12308 knownKeys = new Set();
12309 knownKeys.add(key);
12310 break;
12311 }
12312 if (!knownKeys.has(key)) {
12313 knownKeys.add(key);
12314 break;
12315 }
12316 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);
12317 break;
12318 default:
12319 break;
12320 }
12321 }
12322 return knownKeys;
12323 }
12324
12325 function reconcileChildrenArray(returnFiber, currentFirstChild, newChildren, expirationTime) {
12326 // This algorithm can't optimize by searching from both ends since we
12327 // don't have backpointers on fibers. I'm trying to see how far we can get
12328 // with that model. If it ends up not being worth the tradeoffs, we can
12329 // add it later.
12330
12331 // Even with a two ended optimization, we'd want to optimize for the case
12332 // where there are few changes and brute force the comparison instead of
12333 // going for the Map. It'd like to explore hitting that path first in
12334 // forward-only mode and only go for the Map once we notice that we need
12335 // lots of look ahead. This doesn't handle reversal as well as two ended
12336 // search but that's unusual. Besides, for the two ended optimization to
12337 // work on Iterables, we'd need to copy the whole set.
12338
12339 // In this first iteration, we'll just live with hitting the bad case
12340 // (adding everything to a Map) in for every insert/move.
12341
12342 // If you change this code, also update reconcileChildrenIterator() which
12343 // uses the same algorithm.
12344
12345 {
12346 // First, validate keys.
12347 var knownKeys = null;
12348 for (var i = 0; i < newChildren.length; i++) {
12349 var child = newChildren[i];
12350 knownKeys = warnOnInvalidKey(child, knownKeys);
12351 }
12352 }
12353
12354 var resultingFirstChild = null;
12355 var previousNewFiber = null;
12356
12357 var oldFiber = currentFirstChild;
12358 var lastPlacedIndex = 0;
12359 var newIdx = 0;
12360 var nextOldFiber = null;
12361 for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
12362 if (oldFiber.index > newIdx) {
12363 nextOldFiber = oldFiber;
12364 oldFiber = null;
12365 } else {
12366 nextOldFiber = oldFiber.sibling;
12367 }
12368 var newFiber = updateSlot(returnFiber, oldFiber, newChildren[newIdx], expirationTime);
12369 if (newFiber === null) {
12370 // TODO: This breaks on empty slots like null children. That's
12371 // unfortunate because it triggers the slow path all the time. We need
12372 // a better way to communicate whether this was a miss or null,
12373 // boolean, undefined, etc.
12374 if (oldFiber === null) {
12375 oldFiber = nextOldFiber;
12376 }
12377 break;
12378 }
12379 if (shouldTrackSideEffects) {
12380 if (oldFiber && newFiber.alternate === null) {
12381 // We matched the slot, but we didn't reuse the existing fiber, so we
12382 // need to delete the existing child.
12383 deleteChild(returnFiber, oldFiber);
12384 }
12385 }
12386 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
12387 if (previousNewFiber === null) {
12388 // TODO: Move out of the loop. This only happens for the first run.
12389 resultingFirstChild = newFiber;
12390 } else {
12391 // TODO: Defer siblings if we're not at the right index for this slot.
12392 // I.e. if we had null values before, then we want to defer this
12393 // for each null value. However, we also don't want to call updateSlot
12394 // with the previous one.
12395 previousNewFiber.sibling = newFiber;
12396 }
12397 previousNewFiber = newFiber;
12398 oldFiber = nextOldFiber;
12399 }
12400
12401 if (newIdx === newChildren.length) {
12402 // We've reached the end of the new children. We can delete the rest.
12403 deleteRemainingChildren(returnFiber, oldFiber);
12404 return resultingFirstChild;
12405 }
12406
12407 if (oldFiber === null) {
12408 // If we don't have any more existing children we can choose a fast path
12409 // since the rest will all be insertions.
12410 for (; newIdx < newChildren.length; newIdx++) {
12411 var _newFiber = createChild(returnFiber, newChildren[newIdx], expirationTime);
12412 if (!_newFiber) {
12413 continue;
12414 }
12415 lastPlacedIndex = placeChild(_newFiber, lastPlacedIndex, newIdx);
12416 if (previousNewFiber === null) {
12417 // TODO: Move out of the loop. This only happens for the first run.
12418 resultingFirstChild = _newFiber;
12419 } else {
12420 previousNewFiber.sibling = _newFiber;
12421 }
12422 previousNewFiber = _newFiber;
12423 }
12424 return resultingFirstChild;
12425 }
12426
12427 // Add all children to a key map for quick lookups.
12428 var existingChildren = mapRemainingChildren(returnFiber, oldFiber);
12429
12430 // Keep scanning and use the map to restore deleted items as moves.
12431 for (; newIdx < newChildren.length; newIdx++) {
12432 var _newFiber2 = updateFromMap(existingChildren, returnFiber, newIdx, newChildren[newIdx], expirationTime);
12433 if (_newFiber2) {
12434 if (shouldTrackSideEffects) {
12435 if (_newFiber2.alternate !== null) {
12436 // The new fiber is a work in progress, but if there exists a
12437 // current, that means that we reused the fiber. We need to delete
12438 // it from the child list so that we don't add it to the deletion
12439 // list.
12440 existingChildren.delete(_newFiber2.key === null ? newIdx : _newFiber2.key);
12441 }
12442 }
12443 lastPlacedIndex = placeChild(_newFiber2, lastPlacedIndex, newIdx);
12444 if (previousNewFiber === null) {
12445 resultingFirstChild = _newFiber2;
12446 } else {
12447 previousNewFiber.sibling = _newFiber2;
12448 }
12449 previousNewFiber = _newFiber2;
12450 }
12451 }
12452
12453 if (shouldTrackSideEffects) {
12454 // Any existing children that weren't consumed above were deleted. We need
12455 // to add them to the deletion list.
12456 existingChildren.forEach(function (child) {
12457 return deleteChild(returnFiber, child);
12458 });
12459 }
12460
12461 return resultingFirstChild;
12462 }
12463
12464 function reconcileChildrenIterator(returnFiber, currentFirstChild, newChildrenIterable, expirationTime) {
12465 // This is the same implementation as reconcileChildrenArray(),
12466 // but using the iterator instead.
12467
12468 var iteratorFn = getIteratorFn(newChildrenIterable);
12469 !(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;
12470
12471 {
12472 // We don't support rendering Generators because it's a mutation.
12473 // See https://github.com/facebook/react/issues/12995
12474 if (typeof Symbol === 'function' &&
12475 // $FlowFixMe Flow doesn't know about toStringTag
12476 newChildrenIterable[Symbol.toStringTag] === 'Generator') {
12477 !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;
12478 didWarnAboutGenerators = true;
12479 }
12480
12481 // Warn about using Maps as children
12482 if (newChildrenIterable.entries === iteratorFn) {
12483 !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;
12484 didWarnAboutMaps = true;
12485 }
12486
12487 // First, validate keys.
12488 // We'll get a different iterator later for the main pass.
12489 var _newChildren = iteratorFn.call(newChildrenIterable);
12490 if (_newChildren) {
12491 var knownKeys = null;
12492 var _step = _newChildren.next();
12493 for (; !_step.done; _step = _newChildren.next()) {
12494 var child = _step.value;
12495 knownKeys = warnOnInvalidKey(child, knownKeys);
12496 }
12497 }
12498 }
12499
12500 var newChildren = iteratorFn.call(newChildrenIterable);
12501 !(newChildren != null) ? invariant(false, 'An iterable object provided no iterator.') : void 0;
12502
12503 var resultingFirstChild = null;
12504 var previousNewFiber = null;
12505
12506 var oldFiber = currentFirstChild;
12507 var lastPlacedIndex = 0;
12508 var newIdx = 0;
12509 var nextOldFiber = null;
12510
12511 var step = newChildren.next();
12512 for (; oldFiber !== null && !step.done; newIdx++, step = newChildren.next()) {
12513 if (oldFiber.index > newIdx) {
12514 nextOldFiber = oldFiber;
12515 oldFiber = null;
12516 } else {
12517 nextOldFiber = oldFiber.sibling;
12518 }
12519 var newFiber = updateSlot(returnFiber, oldFiber, step.value, expirationTime);
12520 if (newFiber === null) {
12521 // TODO: This breaks on empty slots like null children. That's
12522 // unfortunate because it triggers the slow path all the time. We need
12523 // a better way to communicate whether this was a miss or null,
12524 // boolean, undefined, etc.
12525 if (!oldFiber) {
12526 oldFiber = nextOldFiber;
12527 }
12528 break;
12529 }
12530 if (shouldTrackSideEffects) {
12531 if (oldFiber && newFiber.alternate === null) {
12532 // We matched the slot, but we didn't reuse the existing fiber, so we
12533 // need to delete the existing child.
12534 deleteChild(returnFiber, oldFiber);
12535 }
12536 }
12537 lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
12538 if (previousNewFiber === null) {
12539 // TODO: Move out of the loop. This only happens for the first run.
12540 resultingFirstChild = newFiber;
12541 } else {
12542 // TODO: Defer siblings if we're not at the right index for this slot.
12543 // I.e. if we had null values before, then we want to defer this
12544 // for each null value. However, we also don't want to call updateSlot
12545 // with the previous one.
12546 previousNewFiber.sibling = newFiber;
12547 }
12548 previousNewFiber = newFiber;
12549 oldFiber = nextOldFiber;
12550 }
12551
12552 if (step.done) {
12553 // We've reached the end of the new children. We can delete the rest.
12554 deleteRemainingChildren(returnFiber, oldFiber);
12555 return resultingFirstChild;
12556 }
12557
12558 if (oldFiber === null) {
12559 // If we don't have any more existing children we can choose a fast path
12560 // since the rest will all be insertions.
12561 for (; !step.done; newIdx++, step = newChildren.next()) {
12562 var _newFiber3 = createChild(returnFiber, step.value, expirationTime);
12563 if (_newFiber3 === null) {
12564 continue;
12565 }
12566 lastPlacedIndex = placeChild(_newFiber3, lastPlacedIndex, newIdx);
12567 if (previousNewFiber === null) {
12568 // TODO: Move out of the loop. This only happens for the first run.
12569 resultingFirstChild = _newFiber3;
12570 } else {
12571 previousNewFiber.sibling = _newFiber3;
12572 }
12573 previousNewFiber = _newFiber3;
12574 }
12575 return resultingFirstChild;
12576 }
12577
12578 // Add all children to a key map for quick lookups.
12579 var existingChildren = mapRemainingChildren(returnFiber, oldFiber);
12580
12581 // Keep scanning and use the map to restore deleted items as moves.
12582 for (; !step.done; newIdx++, step = newChildren.next()) {
12583 var _newFiber4 = updateFromMap(existingChildren, returnFiber, newIdx, step.value, expirationTime);
12584 if (_newFiber4 !== null) {
12585 if (shouldTrackSideEffects) {
12586 if (_newFiber4.alternate !== null) {
12587 // The new fiber is a work in progress, but if there exists a
12588 // current, that means that we reused the fiber. We need to delete
12589 // it from the child list so that we don't add it to the deletion
12590 // list.
12591 existingChildren.delete(_newFiber4.key === null ? newIdx : _newFiber4.key);
12592 }
12593 }
12594 lastPlacedIndex = placeChild(_newFiber4, lastPlacedIndex, newIdx);
12595 if (previousNewFiber === null) {
12596 resultingFirstChild = _newFiber4;
12597 } else {
12598 previousNewFiber.sibling = _newFiber4;
12599 }
12600 previousNewFiber = _newFiber4;
12601 }
12602 }
12603
12604 if (shouldTrackSideEffects) {
12605 // Any existing children that weren't consumed above were deleted. We need
12606 // to add them to the deletion list.
12607 existingChildren.forEach(function (child) {
12608 return deleteChild(returnFiber, child);
12609 });
12610 }
12611
12612 return resultingFirstChild;
12613 }
12614
12615 function reconcileSingleTextNode(returnFiber, currentFirstChild, textContent, expirationTime) {
12616 // There's no need to check for keys on text nodes since we don't have a
12617 // way to define them.
12618 if (currentFirstChild !== null && currentFirstChild.tag === HostText) {
12619 // We already have an existing node so let's just update it and delete
12620 // the rest.
12621 deleteRemainingChildren(returnFiber, currentFirstChild.sibling);
12622 var existing = useFiber(currentFirstChild, textContent, expirationTime);
12623 existing.return = returnFiber;
12624 return existing;
12625 }
12626 // The existing first child is not a text node so we need to create one
12627 // and delete the existing ones.
12628 deleteRemainingChildren(returnFiber, currentFirstChild);
12629 var created = createFiberFromText(textContent, returnFiber.mode, expirationTime);
12630 created.return = returnFiber;
12631 return created;
12632 }
12633
12634 function reconcileSingleElement(returnFiber, currentFirstChild, element, expirationTime) {
12635 var key = element.key;
12636 var child = currentFirstChild;
12637 while (child !== null) {
12638 // TODO: If key === null and child.key === null, then this only applies to
12639 // the first item in the list.
12640 if (child.key === key) {
12641 if (child.tag === Fragment ? element.type === REACT_FRAGMENT_TYPE : child.elementType === element.type) {
12642 deleteRemainingChildren(returnFiber, child.sibling);
12643 var existing = useFiber(child, element.type === REACT_FRAGMENT_TYPE ? element.props.children : element.props, expirationTime);
12644 existing.ref = coerceRef(returnFiber, child, element);
12645 existing.return = returnFiber;
12646 {
12647 existing._debugSource = element._source;
12648 existing._debugOwner = element._owner;
12649 }
12650 return existing;
12651 } else {
12652 deleteRemainingChildren(returnFiber, child);
12653 break;
12654 }
12655 } else {
12656 deleteChild(returnFiber, child);
12657 }
12658 child = child.sibling;
12659 }
12660
12661 if (element.type === REACT_FRAGMENT_TYPE) {
12662 var created = createFiberFromFragment(element.props.children, returnFiber.mode, expirationTime, element.key);
12663 created.return = returnFiber;
12664 return created;
12665 } else {
12666 var _created4 = createFiberFromElement(element, returnFiber.mode, expirationTime);
12667 _created4.ref = coerceRef(returnFiber, currentFirstChild, element);
12668 _created4.return = returnFiber;
12669 return _created4;
12670 }
12671 }
12672
12673 function reconcileSinglePortal(returnFiber, currentFirstChild, portal, expirationTime) {
12674 var key = portal.key;
12675 var child = currentFirstChild;
12676 while (child !== null) {
12677 // TODO: If key === null and child.key === null, then this only applies to
12678 // the first item in the list.
12679 if (child.key === key) {
12680 if (child.tag === HostPortal && child.stateNode.containerInfo === portal.containerInfo && child.stateNode.implementation === portal.implementation) {
12681 deleteRemainingChildren(returnFiber, child.sibling);
12682 var existing = useFiber(child, portal.children || [], expirationTime);
12683 existing.return = returnFiber;
12684 return existing;
12685 } else {
12686 deleteRemainingChildren(returnFiber, child);
12687 break;
12688 }
12689 } else {
12690 deleteChild(returnFiber, child);
12691 }
12692 child = child.sibling;
12693 }
12694
12695 var created = createFiberFromPortal(portal, returnFiber.mode, expirationTime);
12696 created.return = returnFiber;
12697 return created;
12698 }
12699
12700 // This API will tag the children with the side-effect of the reconciliation
12701 // itself. They will be added to the side-effect list as we pass through the
12702 // children and the parent.
12703 function reconcileChildFibers(returnFiber, currentFirstChild, newChild, expirationTime) {
12704 // This function is not recursive.
12705 // If the top level item is an array, we treat it as a set of children,
12706 // not as a fragment. Nested arrays on the other hand will be treated as
12707 // fragment nodes. Recursion happens at the normal flow.
12708
12709 // Handle top level unkeyed fragments as if they were arrays.
12710 // This leads to an ambiguity between <>{[...]}</> and <>...</>.
12711 // We treat the ambiguous cases above the same.
12712 var isUnkeyedTopLevelFragment = typeof newChild === 'object' && newChild !== null && newChild.type === REACT_FRAGMENT_TYPE && newChild.key === null;
12713 if (isUnkeyedTopLevelFragment) {
12714 newChild = newChild.props.children;
12715 }
12716
12717 // Handle object types
12718 var isObject = typeof newChild === 'object' && newChild !== null;
12719
12720 if (isObject) {
12721 switch (newChild.$$typeof) {
12722 case REACT_ELEMENT_TYPE:
12723 return placeSingleChild(reconcileSingleElement(returnFiber, currentFirstChild, newChild, expirationTime));
12724 case REACT_PORTAL_TYPE:
12725 return placeSingleChild(reconcileSinglePortal(returnFiber, currentFirstChild, newChild, expirationTime));
12726 }
12727 }
12728
12729 if (typeof newChild === 'string' || typeof newChild === 'number') {
12730 return placeSingleChild(reconcileSingleTextNode(returnFiber, currentFirstChild, '' + newChild, expirationTime));
12731 }
12732
12733 if (isArray(newChild)) {
12734 return reconcileChildrenArray(returnFiber, currentFirstChild, newChild, expirationTime);
12735 }
12736
12737 if (getIteratorFn(newChild)) {
12738 return reconcileChildrenIterator(returnFiber, currentFirstChild, newChild, expirationTime);
12739 }
12740
12741 if (isObject) {
12742 throwOnInvalidObjectType(returnFiber, newChild);
12743 }
12744
12745 {
12746 if (typeof newChild === 'function') {
12747 warnOnFunctionType();
12748 }
12749 }
12750 if (typeof newChild === 'undefined' && !isUnkeyedTopLevelFragment) {
12751 // If the new child is undefined, and the return fiber is a composite
12752 // component, throw an error. If Fiber return types are disabled,
12753 // we already threw above.
12754 switch (returnFiber.tag) {
12755 case ClassComponent:
12756 {
12757 {
12758 var instance = returnFiber.stateNode;
12759 if (instance.render._isMockFunction) {
12760 // We allow auto-mocks to proceed as if they're returning null.
12761 break;
12762 }
12763 }
12764 }
12765 // Intentionally fall through to the next case, which handles both
12766 // functions and classes
12767 // eslint-disable-next-lined no-fallthrough
12768 case FunctionComponent:
12769 {
12770 var Component = returnFiber.type;
12771 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');
12772 }
12773 }
12774 }
12775
12776 // Remaining cases are all treated as empty.
12777 return deleteRemainingChildren(returnFiber, currentFirstChild);
12778 }
12779
12780 return reconcileChildFibers;
12781}
12782
12783var reconcileChildFibers = ChildReconciler(true);
12784var mountChildFibers = ChildReconciler(false);
12785
12786function cloneChildFibers(current$$1, workInProgress) {
12787 !(current$$1 === null || workInProgress.child === current$$1.child) ? invariant(false, 'Resuming work not yet implemented.') : void 0;
12788
12789 if (workInProgress.child === null) {
12790 return;
12791 }
12792
12793 var currentChild = workInProgress.child;
12794 var newChild = createWorkInProgress(currentChild, currentChild.pendingProps, currentChild.expirationTime);
12795 workInProgress.child = newChild;
12796
12797 newChild.return = workInProgress;
12798 while (currentChild.sibling !== null) {
12799 currentChild = currentChild.sibling;
12800 newChild = newChild.sibling = createWorkInProgress(currentChild, currentChild.pendingProps, currentChild.expirationTime);
12801 newChild.return = workInProgress;
12802 }
12803 newChild.sibling = null;
12804}
12805
12806var NO_CONTEXT = {};
12807
12808var contextStackCursor$1 = createCursor(NO_CONTEXT);
12809var contextFiberStackCursor = createCursor(NO_CONTEXT);
12810var rootInstanceStackCursor = createCursor(NO_CONTEXT);
12811
12812function requiredContext(c) {
12813 !(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;
12814 return c;
12815}
12816
12817function getRootHostContainer() {
12818 var rootInstance = requiredContext(rootInstanceStackCursor.current);
12819 return rootInstance;
12820}
12821
12822function pushHostContainer(fiber, nextRootInstance) {
12823 // Push current root instance onto the stack;
12824 // This allows us to reset root when portals are popped.
12825 push(rootInstanceStackCursor, nextRootInstance, fiber);
12826 // Track the context and the Fiber that provided it.
12827 // This enables us to pop only Fibers that provide unique contexts.
12828 push(contextFiberStackCursor, fiber, fiber);
12829
12830 // Finally, we need to push the host context to the stack.
12831 // However, we can't just call getRootHostContext() and push it because
12832 // we'd have a different number of entries on the stack depending on
12833 // whether getRootHostContext() throws somewhere in renderer code or not.
12834 // So we push an empty value first. This lets us safely unwind on errors.
12835 push(contextStackCursor$1, NO_CONTEXT, fiber);
12836 var nextRootContext = getRootHostContext(nextRootInstance);
12837 // Now that we know this function doesn't throw, replace it.
12838 pop(contextStackCursor$1, fiber);
12839 push(contextStackCursor$1, nextRootContext, fiber);
12840}
12841
12842function popHostContainer(fiber) {
12843 pop(contextStackCursor$1, fiber);
12844 pop(contextFiberStackCursor, fiber);
12845 pop(rootInstanceStackCursor, fiber);
12846}
12847
12848function getHostContext() {
12849 var context = requiredContext(contextStackCursor$1.current);
12850 return context;
12851}
12852
12853function pushHostContext(fiber) {
12854 var rootInstance = requiredContext(rootInstanceStackCursor.current);
12855 var context = requiredContext(contextStackCursor$1.current);
12856 var nextContext = getChildHostContext(context, fiber.type, rootInstance);
12857
12858 // Don't push this Fiber's context unless it's unique.
12859 if (context === nextContext) {
12860 return;
12861 }
12862
12863 // Track the context and the Fiber that provided it.
12864 // This enables us to pop only Fibers that provide unique contexts.
12865 push(contextFiberStackCursor, fiber, fiber);
12866 push(contextStackCursor$1, nextContext, fiber);
12867}
12868
12869function popHostContext(fiber) {
12870 // Do not pop unless this Fiber provided the current context.
12871 // pushHostContext() only pushes Fibers that provide unique contexts.
12872 if (contextFiberStackCursor.current !== fiber) {
12873 return;
12874 }
12875
12876 pop(contextStackCursor$1, fiber);
12877 pop(contextFiberStackCursor, fiber);
12878}
12879
12880var NoEffect$1 = /* */0;
12881var UnmountSnapshot = /* */2;
12882var UnmountMutation = /* */4;
12883var MountMutation = /* */8;
12884var UnmountLayout = /* */16;
12885var MountLayout = /* */32;
12886var MountPassive = /* */64;
12887var UnmountPassive = /* */128;
12888
12889var ReactCurrentDispatcher$1 = ReactSharedInternals.ReactCurrentDispatcher;
12890
12891
12892var didWarnAboutMismatchedHooksForComponent = void 0;
12893{
12894 didWarnAboutMismatchedHooksForComponent = new Set();
12895}
12896
12897// These are set right before calling the component.
12898var renderExpirationTime = NoWork;
12899// The work-in-progress fiber. I've named it differently to distinguish it from
12900// the work-in-progress hook.
12901var currentlyRenderingFiber$1 = null;
12902
12903// Hooks are stored as a linked list on the fiber's memoizedState field. The
12904// current hook list is the list that belongs to the current fiber. The
12905// work-in-progress hook list is a new list that will be added to the
12906// work-in-progress fiber.
12907var currentHook = null;
12908var nextCurrentHook = null;
12909var firstWorkInProgressHook = null;
12910var workInProgressHook = null;
12911var nextWorkInProgressHook = null;
12912
12913var remainingExpirationTime = NoWork;
12914var componentUpdateQueue = null;
12915var sideEffectTag = 0;
12916
12917// Updates scheduled during render will trigger an immediate re-render at the
12918// end of the current pass. We can't store these updates on the normal queue,
12919// because if the work is aborted, they should be discarded. Because this is
12920// a relatively rare case, we also don't want to add an additional field to
12921// either the hook or queue object types. So we store them in a lazily create
12922// map of queue -> render-phase updates, which are discarded once the component
12923// completes without re-rendering.
12924
12925// Whether an update was scheduled during the currently executing render pass.
12926var didScheduleRenderPhaseUpdate = false;
12927// Lazily created map of render-phase updates
12928var renderPhaseUpdates = null;
12929// Counter to prevent infinite loops.
12930var numberOfReRenders = 0;
12931var RE_RENDER_LIMIT = 25;
12932
12933// In DEV, this is the name of the currently executing primitive hook
12934var currentHookNameInDev = null;
12935
12936// In DEV, this list ensures that hooks are called in the same order between renders.
12937// The list stores the order of hooks used during the initial render (mount).
12938// Subsequent renders (updates) reference this list.
12939var hookTypesDev = null;
12940var hookTypesUpdateIndexDev = -1;
12941
12942function mountHookTypesDev() {
12943 {
12944 var hookName = currentHookNameInDev;
12945
12946 if (hookTypesDev === null) {
12947 hookTypesDev = [hookName];
12948 } else {
12949 hookTypesDev.push(hookName);
12950 }
12951 }
12952}
12953
12954function updateHookTypesDev() {
12955 {
12956 var hookName = currentHookNameInDev;
12957
12958 if (hookTypesDev !== null) {
12959 hookTypesUpdateIndexDev++;
12960 if (hookTypesDev[hookTypesUpdateIndexDev] !== hookName) {
12961 warnOnHookMismatchInDev(hookName);
12962 }
12963 }
12964 }
12965}
12966
12967function warnOnHookMismatchInDev(currentHookName) {
12968 {
12969 var componentName = getComponentName(currentlyRenderingFiber$1.type);
12970 if (!didWarnAboutMismatchedHooksForComponent.has(componentName)) {
12971 didWarnAboutMismatchedHooksForComponent.add(componentName);
12972
12973 if (hookTypesDev !== null) {
12974 var table = '';
12975
12976 var secondColumnStart = 30;
12977
12978 for (var i = 0; i <= hookTypesUpdateIndexDev; i++) {
12979 var oldHookName = hookTypesDev[i];
12980 var newHookName = i === hookTypesUpdateIndexDev ? currentHookName : oldHookName;
12981
12982 var row = i + 1 + '. ' + oldHookName;
12983
12984 // Extra space so second column lines up
12985 // lol @ IE not supporting String#repeat
12986 while (row.length < secondColumnStart) {
12987 row += ' ';
12988 }
12989
12990 row += newHookName + '\n';
12991
12992 table += row;
12993 }
12994
12995 warning$1(false, 'React has detected a change in the order of Hooks called by %s. ' + 'This will lead to bugs and errors if not fixed. ' + 'For more information, read the Rules of Hooks: https://fb.me/rules-of-hooks\n\n' + ' Previous render Next render\n' + ' ------------------------------------------------------\n' + '%s' + ' ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n', componentName, table);
12996 }
12997 }
12998 }
12999}
13000
13001function throwInvalidHookError() {
13002 invariant(false, 'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\n1. You might have mismatching versions of React and the renderer (such as React DOM)\n2. You might be breaking the Rules of Hooks\n3. You might have more than one copy of React in the same app\nSee https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.');
13003}
13004
13005function areHookInputsEqual(nextDeps, prevDeps) {
13006 if (prevDeps === null) {
13007 {
13008 warning$1(false, '%s received a final argument during this render, but not during ' + 'the previous render. Even though the final argument is optional, ' + 'its type cannot change between renders.', currentHookNameInDev);
13009 }
13010 return false;
13011 }
13012
13013 {
13014 // Don't bother comparing lengths in prod because these arrays should be
13015 // passed inline.
13016 if (nextDeps.length !== prevDeps.length) {
13017 warning$1(false, 'The final argument passed to %s changed size between renders. The ' + 'order and size of this array must remain constant.\n\n' + 'Previous: %s\n' + 'Incoming: %s', currentHookNameInDev, '[' + nextDeps.join(', ') + ']', '[' + prevDeps.join(', ') + ']');
13018 }
13019 }
13020 for (var i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
13021 if (is(nextDeps[i], prevDeps[i])) {
13022 continue;
13023 }
13024 return false;
13025 }
13026 return true;
13027}
13028
13029function renderWithHooks(current, workInProgress, Component, props, refOrContext, nextRenderExpirationTime) {
13030 renderExpirationTime = nextRenderExpirationTime;
13031 currentlyRenderingFiber$1 = workInProgress;
13032 nextCurrentHook = current !== null ? current.memoizedState : null;
13033
13034 {
13035 hookTypesDev = current !== null ? current._debugHookTypes : null;
13036 hookTypesUpdateIndexDev = -1;
13037 }
13038
13039 // The following should have already been reset
13040 // currentHook = null;
13041 // workInProgressHook = null;
13042
13043 // remainingExpirationTime = NoWork;
13044 // componentUpdateQueue = null;
13045
13046 // didScheduleRenderPhaseUpdate = false;
13047 // renderPhaseUpdates = null;
13048 // numberOfReRenders = 0;
13049 // sideEffectTag = 0;
13050
13051 // TODO Warn if no hooks are used at all during mount, then some are used during update.
13052 // Currently we will identify the update render as a mount because nextCurrentHook === null.
13053 // This is tricky because it's valid for certain types of components (e.g. React.lazy)
13054
13055 // Using nextCurrentHook to differentiate between mount/update only works if at least one stateful hook is used.
13056 // Non-stateful hooks (e.g. context) don't get added to memoizedState,
13057 // so nextCurrentHook would be null during updates and mounts.
13058 {
13059 if (nextCurrentHook !== null) {
13060 ReactCurrentDispatcher$1.current = HooksDispatcherOnUpdateInDEV;
13061 } else if (hookTypesDev !== null) {
13062 // This dispatcher handles an edge case where a component is updating,
13063 // but no stateful hooks have been used.
13064 // We want to match the production code behavior (which will use HooksDispatcherOnMount),
13065 // but with the extra DEV validation to ensure hooks ordering hasn't changed.
13066 // This dispatcher does that.
13067 ReactCurrentDispatcher$1.current = HooksDispatcherOnMountWithHookTypesInDEV;
13068 } else {
13069 ReactCurrentDispatcher$1.current = HooksDispatcherOnMountInDEV;
13070 }
13071 }
13072
13073 var children = Component(props, refOrContext);
13074
13075 if (didScheduleRenderPhaseUpdate) {
13076 do {
13077 didScheduleRenderPhaseUpdate = false;
13078 numberOfReRenders += 1;
13079
13080 // Start over from the beginning of the list
13081 nextCurrentHook = current !== null ? current.memoizedState : null;
13082 nextWorkInProgressHook = firstWorkInProgressHook;
13083
13084 currentHook = null;
13085 workInProgressHook = null;
13086 componentUpdateQueue = null;
13087
13088 {
13089 // Also validate hook order for cascading updates.
13090 hookTypesUpdateIndexDev = -1;
13091 }
13092
13093 ReactCurrentDispatcher$1.current = HooksDispatcherOnUpdateInDEV;
13094
13095 children = Component(props, refOrContext);
13096 } while (didScheduleRenderPhaseUpdate);
13097
13098 renderPhaseUpdates = null;
13099 numberOfReRenders = 0;
13100 }
13101
13102 // We can assume the previous dispatcher is always this one, since we set it
13103 // at the beginning of the render phase and there's no re-entrancy.
13104 ReactCurrentDispatcher$1.current = ContextOnlyDispatcher;
13105
13106 var renderedWork = currentlyRenderingFiber$1;
13107
13108 renderedWork.memoizedState = firstWorkInProgressHook;
13109 renderedWork.expirationTime = remainingExpirationTime;
13110 renderedWork.updateQueue = componentUpdateQueue;
13111 renderedWork.effectTag |= sideEffectTag;
13112
13113 {
13114 renderedWork._debugHookTypes = hookTypesDev;
13115 }
13116
13117 // This check uses currentHook so that it works the same in DEV and prod bundles.
13118 // hookTypesDev could catch more cases (e.g. context) but only in DEV bundles.
13119 var didRenderTooFewHooks = currentHook !== null && currentHook.next !== null;
13120
13121 renderExpirationTime = NoWork;
13122 currentlyRenderingFiber$1 = null;
13123
13124 currentHook = null;
13125 nextCurrentHook = null;
13126 firstWorkInProgressHook = null;
13127 workInProgressHook = null;
13128 nextWorkInProgressHook = null;
13129
13130 {
13131 currentHookNameInDev = null;
13132 hookTypesDev = null;
13133 hookTypesUpdateIndexDev = -1;
13134 }
13135
13136 remainingExpirationTime = NoWork;
13137 componentUpdateQueue = null;
13138 sideEffectTag = 0;
13139
13140 // These were reset above
13141 // didScheduleRenderPhaseUpdate = false;
13142 // renderPhaseUpdates = null;
13143 // numberOfReRenders = 0;
13144
13145 !!didRenderTooFewHooks ? invariant(false, 'Rendered fewer hooks than expected. This may be caused by an accidental early return statement.') : void 0;
13146
13147 return children;
13148}
13149
13150function bailoutHooks(current, workInProgress, expirationTime) {
13151 workInProgress.updateQueue = current.updateQueue;
13152 workInProgress.effectTag &= ~(Passive | Update);
13153 if (current.expirationTime <= expirationTime) {
13154 current.expirationTime = NoWork;
13155 }
13156}
13157
13158function resetHooks() {
13159 // We can assume the previous dispatcher is always this one, since we set it
13160 // at the beginning of the render phase and there's no re-entrancy.
13161 ReactCurrentDispatcher$1.current = ContextOnlyDispatcher;
13162
13163 // This is used to reset the state of this module when a component throws.
13164 // It's also called inside mountIndeterminateComponent if we determine the
13165 // component is a module-style component.
13166 renderExpirationTime = NoWork;
13167 currentlyRenderingFiber$1 = null;
13168
13169 currentHook = null;
13170 nextCurrentHook = null;
13171 firstWorkInProgressHook = null;
13172 workInProgressHook = null;
13173 nextWorkInProgressHook = null;
13174
13175 {
13176 hookTypesDev = null;
13177 hookTypesUpdateIndexDev = -1;
13178
13179 currentHookNameInDev = null;
13180 }
13181
13182 remainingExpirationTime = NoWork;
13183 componentUpdateQueue = null;
13184 sideEffectTag = 0;
13185
13186 didScheduleRenderPhaseUpdate = false;
13187 renderPhaseUpdates = null;
13188 numberOfReRenders = 0;
13189}
13190
13191function mountWorkInProgressHook() {
13192 var hook = {
13193 memoizedState: null,
13194
13195 baseState: null,
13196 queue: null,
13197 baseUpdate: null,
13198
13199 next: null
13200 };
13201
13202 if (workInProgressHook === null) {
13203 // This is the first hook in the list
13204 firstWorkInProgressHook = workInProgressHook = hook;
13205 } else {
13206 // Append to the end of the list
13207 workInProgressHook = workInProgressHook.next = hook;
13208 }
13209 return workInProgressHook;
13210}
13211
13212function updateWorkInProgressHook() {
13213 // This function is used both for updates and for re-renders triggered by a
13214 // render phase update. It assumes there is either a current hook we can
13215 // clone, or a work-in-progress hook from a previous render pass that we can
13216 // use as a base. When we reach the end of the base list, we must switch to
13217 // the dispatcher used for mounts.
13218 if (nextWorkInProgressHook !== null) {
13219 // There's already a work-in-progress. Reuse it.
13220 workInProgressHook = nextWorkInProgressHook;
13221 nextWorkInProgressHook = workInProgressHook.next;
13222
13223 currentHook = nextCurrentHook;
13224 nextCurrentHook = currentHook !== null ? currentHook.next : null;
13225 } else {
13226 // Clone from the current hook.
13227 !(nextCurrentHook !== null) ? invariant(false, 'Rendered more hooks than during the previous render.') : void 0;
13228 currentHook = nextCurrentHook;
13229
13230 var newHook = {
13231 memoizedState: currentHook.memoizedState,
13232
13233 baseState: currentHook.baseState,
13234 queue: currentHook.queue,
13235 baseUpdate: currentHook.baseUpdate,
13236
13237 next: null
13238 };
13239
13240 if (workInProgressHook === null) {
13241 // This is the first hook in the list.
13242 workInProgressHook = firstWorkInProgressHook = newHook;
13243 } else {
13244 // Append to the end of the list.
13245 workInProgressHook = workInProgressHook.next = newHook;
13246 }
13247 nextCurrentHook = currentHook.next;
13248 }
13249 return workInProgressHook;
13250}
13251
13252function createFunctionComponentUpdateQueue() {
13253 return {
13254 lastEffect: null
13255 };
13256}
13257
13258function basicStateReducer(state, action) {
13259 return typeof action === 'function' ? action(state) : action;
13260}
13261
13262function mountReducer(reducer, initialArg, init) {
13263 var hook = mountWorkInProgressHook();
13264 var initialState = void 0;
13265 if (init !== undefined) {
13266 initialState = init(initialArg);
13267 } else {
13268 initialState = initialArg;
13269 }
13270 hook.memoizedState = hook.baseState = initialState;
13271 var queue = hook.queue = {
13272 last: null,
13273 dispatch: null,
13274 lastRenderedReducer: reducer,
13275 lastRenderedState: initialState
13276 };
13277 var dispatch = queue.dispatch = dispatchAction.bind(null,
13278 // Flow doesn't know this is non-null, but we do.
13279 currentlyRenderingFiber$1, queue);
13280 return [hook.memoizedState, dispatch];
13281}
13282
13283function updateReducer(reducer, initialArg, init) {
13284 var hook = updateWorkInProgressHook();
13285 var queue = hook.queue;
13286 !(queue !== null) ? invariant(false, 'Should have a queue. This is likely a bug in React. Please file an issue.') : void 0;
13287
13288 queue.lastRenderedReducer = reducer;
13289
13290 if (numberOfReRenders > 0) {
13291 // This is a re-render. Apply the new render phase updates to the previous
13292 var _dispatch = queue.dispatch;
13293 if (renderPhaseUpdates !== null) {
13294 // Render phase updates are stored in a map of queue -> linked list
13295 var firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
13296 if (firstRenderPhaseUpdate !== undefined) {
13297 renderPhaseUpdates.delete(queue);
13298 var newState = hook.memoizedState;
13299 var update = firstRenderPhaseUpdate;
13300 do {
13301 // Process this render phase update. We don't have to check the
13302 // priority because it will always be the same as the current
13303 // render's.
13304 var _action = update.action;
13305 newState = reducer(newState, _action);
13306 update = update.next;
13307 } while (update !== null);
13308
13309 // Mark that the fiber performed work, but only if the new state is
13310 // different from the current state.
13311 if (!is(newState, hook.memoizedState)) {
13312 markWorkInProgressReceivedUpdate();
13313 }
13314
13315 hook.memoizedState = newState;
13316 // Don't persist the state accumlated from the render phase updates to
13317 // the base state unless the queue is empty.
13318 // TODO: Not sure if this is the desired semantics, but it's what we
13319 // do for gDSFP. I can't remember why.
13320 if (hook.baseUpdate === queue.last) {
13321 hook.baseState = newState;
13322 }
13323
13324 queue.lastRenderedState = newState;
13325
13326 return [newState, _dispatch];
13327 }
13328 }
13329 return [hook.memoizedState, _dispatch];
13330 }
13331
13332 // The last update in the entire queue
13333 var last = queue.last;
13334 // The last update that is part of the base state.
13335 var baseUpdate = hook.baseUpdate;
13336 var baseState = hook.baseState;
13337
13338 // Find the first unprocessed update.
13339 var first = void 0;
13340 if (baseUpdate !== null) {
13341 if (last !== null) {
13342 // For the first update, the queue is a circular linked list where
13343 // `queue.last.next = queue.first`. Once the first update commits, and
13344 // the `baseUpdate` is no longer empty, we can unravel the list.
13345 last.next = null;
13346 }
13347 first = baseUpdate.next;
13348 } else {
13349 first = last !== null ? last.next : null;
13350 }
13351 if (first !== null) {
13352 var _newState = baseState;
13353 var newBaseState = null;
13354 var newBaseUpdate = null;
13355 var prevUpdate = baseUpdate;
13356 var _update = first;
13357 var didSkip = false;
13358 do {
13359 var updateExpirationTime = _update.expirationTime;
13360 if (updateExpirationTime < renderExpirationTime) {
13361 // Priority is insufficient. Skip this update. If this is the first
13362 // skipped update, the previous update/state is the new base
13363 // update/state.
13364 if (!didSkip) {
13365 didSkip = true;
13366 newBaseUpdate = prevUpdate;
13367 newBaseState = _newState;
13368 }
13369 // Update the remaining priority in the queue.
13370 if (updateExpirationTime > remainingExpirationTime) {
13371 remainingExpirationTime = updateExpirationTime;
13372 }
13373 } else {
13374 // Process this update.
13375 if (_update.eagerReducer === reducer) {
13376 // If this update was processed eagerly, and its reducer matches the
13377 // current reducer, we can use the eagerly computed state.
13378 _newState = _update.eagerState;
13379 } else {
13380 var _action2 = _update.action;
13381 _newState = reducer(_newState, _action2);
13382 }
13383 }
13384 prevUpdate = _update;
13385 _update = _update.next;
13386 } while (_update !== null && _update !== first);
13387
13388 if (!didSkip) {
13389 newBaseUpdate = prevUpdate;
13390 newBaseState = _newState;
13391 }
13392
13393 // Mark that the fiber performed work, but only if the new state is
13394 // different from the current state.
13395 if (!is(_newState, hook.memoizedState)) {
13396 markWorkInProgressReceivedUpdate();
13397 }
13398
13399 hook.memoizedState = _newState;
13400 hook.baseUpdate = newBaseUpdate;
13401 hook.baseState = newBaseState;
13402
13403 queue.lastRenderedState = _newState;
13404 }
13405
13406 var dispatch = queue.dispatch;
13407 return [hook.memoizedState, dispatch];
13408}
13409
13410function mountState(initialState) {
13411 var hook = mountWorkInProgressHook();
13412 if (typeof initialState === 'function') {
13413 initialState = initialState();
13414 }
13415 hook.memoizedState = hook.baseState = initialState;
13416 var queue = hook.queue = {
13417 last: null,
13418 dispatch: null,
13419 lastRenderedReducer: basicStateReducer,
13420 lastRenderedState: initialState
13421 };
13422 var dispatch = queue.dispatch = dispatchAction.bind(null,
13423 // Flow doesn't know this is non-null, but we do.
13424 currentlyRenderingFiber$1, queue);
13425 return [hook.memoizedState, dispatch];
13426}
13427
13428function updateState(initialState) {
13429 return updateReducer(basicStateReducer, initialState);
13430}
13431
13432function pushEffect(tag, create, destroy, deps) {
13433 var effect = {
13434 tag: tag,
13435 create: create,
13436 destroy: destroy,
13437 deps: deps,
13438 // Circular
13439 next: null
13440 };
13441 if (componentUpdateQueue === null) {
13442 componentUpdateQueue = createFunctionComponentUpdateQueue();
13443 componentUpdateQueue.lastEffect = effect.next = effect;
13444 } else {
13445 var _lastEffect = componentUpdateQueue.lastEffect;
13446 if (_lastEffect === null) {
13447 componentUpdateQueue.lastEffect = effect.next = effect;
13448 } else {
13449 var firstEffect = _lastEffect.next;
13450 _lastEffect.next = effect;
13451 effect.next = firstEffect;
13452 componentUpdateQueue.lastEffect = effect;
13453 }
13454 }
13455 return effect;
13456}
13457
13458function mountRef(initialValue) {
13459 var hook = mountWorkInProgressHook();
13460 var ref = { current: initialValue };
13461 {
13462 Object.seal(ref);
13463 }
13464 hook.memoizedState = ref;
13465 return ref;
13466}
13467
13468function updateRef(initialValue) {
13469 var hook = updateWorkInProgressHook();
13470 return hook.memoizedState;
13471}
13472
13473function mountEffectImpl(fiberEffectTag, hookEffectTag, create, deps) {
13474 var hook = mountWorkInProgressHook();
13475 var nextDeps = deps === undefined ? null : deps;
13476 sideEffectTag |= fiberEffectTag;
13477 hook.memoizedState = pushEffect(hookEffectTag, create, undefined, nextDeps);
13478}
13479
13480function updateEffectImpl(fiberEffectTag, hookEffectTag, create, deps) {
13481 var hook = updateWorkInProgressHook();
13482 var nextDeps = deps === undefined ? null : deps;
13483 var destroy = undefined;
13484
13485 if (currentHook !== null) {
13486 var prevEffect = currentHook.memoizedState;
13487 destroy = prevEffect.destroy;
13488 if (nextDeps !== null) {
13489 var prevDeps = prevEffect.deps;
13490 if (areHookInputsEqual(nextDeps, prevDeps)) {
13491 pushEffect(NoEffect$1, create, destroy, nextDeps);
13492 return;
13493 }
13494 }
13495 }
13496
13497 sideEffectTag |= fiberEffectTag;
13498 hook.memoizedState = pushEffect(hookEffectTag, create, destroy, nextDeps);
13499}
13500
13501function mountEffect(create, deps) {
13502 return mountEffectImpl(Update | Passive, UnmountPassive | MountPassive, create, deps);
13503}
13504
13505function updateEffect(create, deps) {
13506 return updateEffectImpl(Update | Passive, UnmountPassive | MountPassive, create, deps);
13507}
13508
13509function mountLayoutEffect(create, deps) {
13510 return mountEffectImpl(Update, UnmountMutation | MountLayout, create, deps);
13511}
13512
13513function updateLayoutEffect(create, deps) {
13514 return updateEffectImpl(Update, UnmountMutation | MountLayout, create, deps);
13515}
13516
13517function imperativeHandleEffect(create, ref) {
13518 if (typeof ref === 'function') {
13519 var refCallback = ref;
13520 var _inst = create();
13521 refCallback(_inst);
13522 return function () {
13523 refCallback(null);
13524 };
13525 } else if (ref !== null && ref !== undefined) {
13526 var refObject = ref;
13527 {
13528 !refObject.hasOwnProperty('current') ? warning$1(false, 'Expected useImperativeHandle() first argument to either be a ' + 'ref callback or React.createRef() object. Instead received: %s.', 'an object with keys {' + Object.keys(refObject).join(', ') + '}') : void 0;
13529 }
13530 var _inst2 = create();
13531 refObject.current = _inst2;
13532 return function () {
13533 refObject.current = null;
13534 };
13535 }
13536}
13537
13538function mountImperativeHandle(ref, create, deps) {
13539 {
13540 !(typeof create === 'function') ? warning$1(false, 'Expected useImperativeHandle() second argument to be a function ' + 'that creates a handle. Instead received: %s.', create !== null ? typeof create : 'null') : void 0;
13541 }
13542
13543 // TODO: If deps are provided, should we skip comparing the ref itself?
13544 var effectDeps = deps !== null && deps !== undefined ? deps.concat([ref]) : null;
13545
13546 return mountEffectImpl(Update, UnmountMutation | MountLayout, imperativeHandleEffect.bind(null, create, ref), effectDeps);
13547}
13548
13549function updateImperativeHandle(ref, create, deps) {
13550 {
13551 !(typeof create === 'function') ? warning$1(false, 'Expected useImperativeHandle() second argument to be a function ' + 'that creates a handle. Instead received: %s.', create !== null ? typeof create : 'null') : void 0;
13552 }
13553
13554 // TODO: If deps are provided, should we skip comparing the ref itself?
13555 var effectDeps = deps !== null && deps !== undefined ? deps.concat([ref]) : null;
13556
13557 return updateEffectImpl(Update, UnmountMutation | MountLayout, imperativeHandleEffect.bind(null, create, ref), effectDeps);
13558}
13559
13560function mountDebugValue(value, formatterFn) {
13561 // This hook is normally a no-op.
13562 // The react-debug-hooks package injects its own implementation
13563 // so that e.g. DevTools can display custom hook values.
13564}
13565
13566var updateDebugValue = mountDebugValue;
13567
13568function mountCallback(callback, deps) {
13569 var hook = mountWorkInProgressHook();
13570 var nextDeps = deps === undefined ? null : deps;
13571 hook.memoizedState = [callback, nextDeps];
13572 return callback;
13573}
13574
13575function updateCallback(callback, deps) {
13576 var hook = updateWorkInProgressHook();
13577 var nextDeps = deps === undefined ? null : deps;
13578 var prevState = hook.memoizedState;
13579 if (prevState !== null) {
13580 if (nextDeps !== null) {
13581 var prevDeps = prevState[1];
13582 if (areHookInputsEqual(nextDeps, prevDeps)) {
13583 return prevState[0];
13584 }
13585 }
13586 }
13587 hook.memoizedState = [callback, nextDeps];
13588 return callback;
13589}
13590
13591function mountMemo(nextCreate, deps) {
13592 var hook = mountWorkInProgressHook();
13593 var nextDeps = deps === undefined ? null : deps;
13594 var nextValue = nextCreate();
13595 hook.memoizedState = [nextValue, nextDeps];
13596 return nextValue;
13597}
13598
13599function updateMemo(nextCreate, deps) {
13600 var hook = updateWorkInProgressHook();
13601 var nextDeps = deps === undefined ? null : deps;
13602 var prevState = hook.memoizedState;
13603 if (prevState !== null) {
13604 // Assume these are defined. If they're not, areHookInputsEqual will warn.
13605 if (nextDeps !== null) {
13606 var prevDeps = prevState[1];
13607 if (areHookInputsEqual(nextDeps, prevDeps)) {
13608 return prevState[0];
13609 }
13610 }
13611 }
13612 var nextValue = nextCreate();
13613 hook.memoizedState = [nextValue, nextDeps];
13614 return nextValue;
13615}
13616
13617// in a test-like environment, we want to warn if dispatchAction()
13618// is called outside of a batchedUpdates/TestUtils.act(...) call.
13619var shouldWarnForUnbatchedSetState = false;
13620
13621{
13622 // jest isn't a 'global', it's just exposed to tests via a wrapped function
13623 // further, this isn't a test file, so flow doesn't recognize the symbol. So...
13624 // $FlowExpectedError - because requirements don't give a damn about your type sigs.
13625 if ('undefined' !== typeof jest) {
13626 shouldWarnForUnbatchedSetState = true;
13627 }
13628}
13629
13630function dispatchAction(fiber, queue, action) {
13631 !(numberOfReRenders < RE_RENDER_LIMIT) ? invariant(false, 'Too many re-renders. React limits the number of renders to prevent an infinite loop.') : void 0;
13632
13633 {
13634 !(arguments.length <= 3) ? warning$1(false, "State updates from the useState() and useReducer() Hooks don't support the " + 'second callback argument. To execute a side effect after ' + 'rendering, declare it in the component body with useEffect().') : void 0;
13635 }
13636
13637 var alternate = fiber.alternate;
13638 if (fiber === currentlyRenderingFiber$1 || alternate !== null && alternate === currentlyRenderingFiber$1) {
13639 // This is a render phase update. Stash it in a lazily-created map of
13640 // queue -> linked list of updates. After this render pass, we'll restart
13641 // and apply the stashed updates on top of the work-in-progress hook.
13642 didScheduleRenderPhaseUpdate = true;
13643 var update = {
13644 expirationTime: renderExpirationTime,
13645 action: action,
13646 eagerReducer: null,
13647 eagerState: null,
13648 next: null
13649 };
13650 if (renderPhaseUpdates === null) {
13651 renderPhaseUpdates = new Map();
13652 }
13653 var firstRenderPhaseUpdate = renderPhaseUpdates.get(queue);
13654 if (firstRenderPhaseUpdate === undefined) {
13655 renderPhaseUpdates.set(queue, update);
13656 } else {
13657 // Append the update to the end of the list.
13658 var lastRenderPhaseUpdate = firstRenderPhaseUpdate;
13659 while (lastRenderPhaseUpdate.next !== null) {
13660 lastRenderPhaseUpdate = lastRenderPhaseUpdate.next;
13661 }
13662 lastRenderPhaseUpdate.next = update;
13663 }
13664 } else {
13665 flushPassiveEffects();
13666
13667 var currentTime = requestCurrentTime();
13668 var _expirationTime = computeExpirationForFiber(currentTime, fiber);
13669
13670 var _update2 = {
13671 expirationTime: _expirationTime,
13672 action: action,
13673 eagerReducer: null,
13674 eagerState: null,
13675 next: null
13676 };
13677
13678 // Append the update to the end of the list.
13679 var _last = queue.last;
13680 if (_last === null) {
13681 // This is the first update. Create a circular list.
13682 _update2.next = _update2;
13683 } else {
13684 var first = _last.next;
13685 if (first !== null) {
13686 // Still circular.
13687 _update2.next = first;
13688 }
13689 _last.next = _update2;
13690 }
13691 queue.last = _update2;
13692
13693 if (fiber.expirationTime === NoWork && (alternate === null || alternate.expirationTime === NoWork)) {
13694 // The queue is currently empty, which means we can eagerly compute the
13695 // next state before entering the render phase. If the new state is the
13696 // same as the current state, we may be able to bail out entirely.
13697 var _lastRenderedReducer = queue.lastRenderedReducer;
13698 if (_lastRenderedReducer !== null) {
13699 var prevDispatcher = void 0;
13700 {
13701 prevDispatcher = ReactCurrentDispatcher$1.current;
13702 ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
13703 }
13704 try {
13705 var currentState = queue.lastRenderedState;
13706 var _eagerState = _lastRenderedReducer(currentState, action);
13707 // Stash the eagerly computed state, and the reducer used to compute
13708 // it, on the update object. If the reducer hasn't changed by the
13709 // time we enter the render phase, then the eager state can be used
13710 // without calling the reducer again.
13711 _update2.eagerReducer = _lastRenderedReducer;
13712 _update2.eagerState = _eagerState;
13713 if (is(_eagerState, currentState)) {
13714 // Fast path. We can bail out without scheduling React to re-render.
13715 // It's still possible that we'll need to rebase this update later,
13716 // if the component re-renders for a different reason and by that
13717 // time the reducer has changed.
13718 return;
13719 }
13720 } catch (error) {
13721 // Suppress the error. It will throw again in the render phase.
13722 } finally {
13723 {
13724 ReactCurrentDispatcher$1.current = prevDispatcher;
13725 }
13726 }
13727 }
13728 }
13729 {
13730 if (shouldWarnForUnbatchedSetState === true) {
13731 warnIfNotCurrentlyBatchingInDev(fiber);
13732 }
13733 }
13734 scheduleWork(fiber, _expirationTime);
13735 }
13736}
13737
13738var ContextOnlyDispatcher = {
13739 readContext: readContext,
13740
13741 useCallback: throwInvalidHookError,
13742 useContext: throwInvalidHookError,
13743 useEffect: throwInvalidHookError,
13744 useImperativeHandle: throwInvalidHookError,
13745 useLayoutEffect: throwInvalidHookError,
13746 useMemo: throwInvalidHookError,
13747 useReducer: throwInvalidHookError,
13748 useRef: throwInvalidHookError,
13749 useState: throwInvalidHookError,
13750 useDebugValue: throwInvalidHookError
13751};
13752
13753var HooksDispatcherOnMountInDEV = null;
13754var HooksDispatcherOnMountWithHookTypesInDEV = null;
13755var HooksDispatcherOnUpdateInDEV = null;
13756var InvalidNestedHooksDispatcherOnMountInDEV = null;
13757var InvalidNestedHooksDispatcherOnUpdateInDEV = null;
13758
13759{
13760 var warnInvalidContextAccess = function () {
13761 warning$1(false, 'Context can only be read while React is rendering. ' + 'In classes, you can read it in the render method or getDerivedStateFromProps. ' + 'In function components, you can read it directly in the function body, but not ' + 'inside Hooks like useReducer() or useMemo().');
13762 };
13763
13764 var warnInvalidHookAccess = function () {
13765 warning$1(false, 'Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks. ' + 'You can only call Hooks at the top level of your React function. ' + 'For more information, see ' + 'https://fb.me/rules-of-hooks');
13766 };
13767
13768 HooksDispatcherOnMountInDEV = {
13769 readContext: function (context, observedBits) {
13770 return readContext(context, observedBits);
13771 },
13772 useCallback: function (callback, deps) {
13773 currentHookNameInDev = 'useCallback';
13774 mountHookTypesDev();
13775 return mountCallback(callback, deps);
13776 },
13777 useContext: function (context, observedBits) {
13778 currentHookNameInDev = 'useContext';
13779 mountHookTypesDev();
13780 return readContext(context, observedBits);
13781 },
13782 useEffect: function (create, deps) {
13783 currentHookNameInDev = 'useEffect';
13784 mountHookTypesDev();
13785 return mountEffect(create, deps);
13786 },
13787 useImperativeHandle: function (ref, create, deps) {
13788 currentHookNameInDev = 'useImperativeHandle';
13789 mountHookTypesDev();
13790 return mountImperativeHandle(ref, create, deps);
13791 },
13792 useLayoutEffect: function (create, deps) {
13793 currentHookNameInDev = 'useLayoutEffect';
13794 mountHookTypesDev();
13795 return mountLayoutEffect(create, deps);
13796 },
13797 useMemo: function (create, deps) {
13798 currentHookNameInDev = 'useMemo';
13799 mountHookTypesDev();
13800 var prevDispatcher = ReactCurrentDispatcher$1.current;
13801 ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;
13802 try {
13803 return mountMemo(create, deps);
13804 } finally {
13805 ReactCurrentDispatcher$1.current = prevDispatcher;
13806 }
13807 },
13808 useReducer: function (reducer, initialArg, init) {
13809 currentHookNameInDev = 'useReducer';
13810 mountHookTypesDev();
13811 var prevDispatcher = ReactCurrentDispatcher$1.current;
13812 ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;
13813 try {
13814 return mountReducer(reducer, initialArg, init);
13815 } finally {
13816 ReactCurrentDispatcher$1.current = prevDispatcher;
13817 }
13818 },
13819 useRef: function (initialValue) {
13820 currentHookNameInDev = 'useRef';
13821 mountHookTypesDev();
13822 return mountRef(initialValue);
13823 },
13824 useState: function (initialState) {
13825 currentHookNameInDev = 'useState';
13826 mountHookTypesDev();
13827 var prevDispatcher = ReactCurrentDispatcher$1.current;
13828 ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;
13829 try {
13830 return mountState(initialState);
13831 } finally {
13832 ReactCurrentDispatcher$1.current = prevDispatcher;
13833 }
13834 },
13835 useDebugValue: function (value, formatterFn) {
13836 currentHookNameInDev = 'useDebugValue';
13837 mountHookTypesDev();
13838 return mountDebugValue(value, formatterFn);
13839 }
13840 };
13841
13842 HooksDispatcherOnMountWithHookTypesInDEV = {
13843 readContext: function (context, observedBits) {
13844 return readContext(context, observedBits);
13845 },
13846 useCallback: function (callback, deps) {
13847 currentHookNameInDev = 'useCallback';
13848 updateHookTypesDev();
13849 return mountCallback(callback, deps);
13850 },
13851 useContext: function (context, observedBits) {
13852 currentHookNameInDev = 'useContext';
13853 updateHookTypesDev();
13854 return readContext(context, observedBits);
13855 },
13856 useEffect: function (create, deps) {
13857 currentHookNameInDev = 'useEffect';
13858 updateHookTypesDev();
13859 return mountEffect(create, deps);
13860 },
13861 useImperativeHandle: function (ref, create, deps) {
13862 currentHookNameInDev = 'useImperativeHandle';
13863 updateHookTypesDev();
13864 return mountImperativeHandle(ref, create, deps);
13865 },
13866 useLayoutEffect: function (create, deps) {
13867 currentHookNameInDev = 'useLayoutEffect';
13868 updateHookTypesDev();
13869 return mountLayoutEffect(create, deps);
13870 },
13871 useMemo: function (create, deps) {
13872 currentHookNameInDev = 'useMemo';
13873 updateHookTypesDev();
13874 var prevDispatcher = ReactCurrentDispatcher$1.current;
13875 ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;
13876 try {
13877 return mountMemo(create, deps);
13878 } finally {
13879 ReactCurrentDispatcher$1.current = prevDispatcher;
13880 }
13881 },
13882 useReducer: function (reducer, initialArg, init) {
13883 currentHookNameInDev = 'useReducer';
13884 updateHookTypesDev();
13885 var prevDispatcher = ReactCurrentDispatcher$1.current;
13886 ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;
13887 try {
13888 return mountReducer(reducer, initialArg, init);
13889 } finally {
13890 ReactCurrentDispatcher$1.current = prevDispatcher;
13891 }
13892 },
13893 useRef: function (initialValue) {
13894 currentHookNameInDev = 'useRef';
13895 updateHookTypesDev();
13896 return mountRef(initialValue);
13897 },
13898 useState: function (initialState) {
13899 currentHookNameInDev = 'useState';
13900 updateHookTypesDev();
13901 var prevDispatcher = ReactCurrentDispatcher$1.current;
13902 ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;
13903 try {
13904 return mountState(initialState);
13905 } finally {
13906 ReactCurrentDispatcher$1.current = prevDispatcher;
13907 }
13908 },
13909 useDebugValue: function (value, formatterFn) {
13910 currentHookNameInDev = 'useDebugValue';
13911 updateHookTypesDev();
13912 return mountDebugValue(value, formatterFn);
13913 }
13914 };
13915
13916 HooksDispatcherOnUpdateInDEV = {
13917 readContext: function (context, observedBits) {
13918 return readContext(context, observedBits);
13919 },
13920 useCallback: function (callback, deps) {
13921 currentHookNameInDev = 'useCallback';
13922 updateHookTypesDev();
13923 return updateCallback(callback, deps);
13924 },
13925 useContext: function (context, observedBits) {
13926 currentHookNameInDev = 'useContext';
13927 updateHookTypesDev();
13928 return readContext(context, observedBits);
13929 },
13930 useEffect: function (create, deps) {
13931 currentHookNameInDev = 'useEffect';
13932 updateHookTypesDev();
13933 return updateEffect(create, deps);
13934 },
13935 useImperativeHandle: function (ref, create, deps) {
13936 currentHookNameInDev = 'useImperativeHandle';
13937 updateHookTypesDev();
13938 return updateImperativeHandle(ref, create, deps);
13939 },
13940 useLayoutEffect: function (create, deps) {
13941 currentHookNameInDev = 'useLayoutEffect';
13942 updateHookTypesDev();
13943 return updateLayoutEffect(create, deps);
13944 },
13945 useMemo: function (create, deps) {
13946 currentHookNameInDev = 'useMemo';
13947 updateHookTypesDev();
13948 var prevDispatcher = ReactCurrentDispatcher$1.current;
13949 ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
13950 try {
13951 return updateMemo(create, deps);
13952 } finally {
13953 ReactCurrentDispatcher$1.current = prevDispatcher;
13954 }
13955 },
13956 useReducer: function (reducer, initialArg, init) {
13957 currentHookNameInDev = 'useReducer';
13958 updateHookTypesDev();
13959 var prevDispatcher = ReactCurrentDispatcher$1.current;
13960 ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
13961 try {
13962 return updateReducer(reducer, initialArg, init);
13963 } finally {
13964 ReactCurrentDispatcher$1.current = prevDispatcher;
13965 }
13966 },
13967 useRef: function (initialValue) {
13968 currentHookNameInDev = 'useRef';
13969 updateHookTypesDev();
13970 return updateRef(initialValue);
13971 },
13972 useState: function (initialState) {
13973 currentHookNameInDev = 'useState';
13974 updateHookTypesDev();
13975 var prevDispatcher = ReactCurrentDispatcher$1.current;
13976 ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
13977 try {
13978 return updateState(initialState);
13979 } finally {
13980 ReactCurrentDispatcher$1.current = prevDispatcher;
13981 }
13982 },
13983 useDebugValue: function (value, formatterFn) {
13984 currentHookNameInDev = 'useDebugValue';
13985 updateHookTypesDev();
13986 return updateDebugValue(value, formatterFn);
13987 }
13988 };
13989
13990 InvalidNestedHooksDispatcherOnMountInDEV = {
13991 readContext: function (context, observedBits) {
13992 warnInvalidContextAccess();
13993 return readContext(context, observedBits);
13994 },
13995 useCallback: function (callback, deps) {
13996 currentHookNameInDev = 'useCallback';
13997 warnInvalidHookAccess();
13998 mountHookTypesDev();
13999 return mountCallback(callback, deps);
14000 },
14001 useContext: function (context, observedBits) {
14002 currentHookNameInDev = 'useContext';
14003 warnInvalidHookAccess();
14004 mountHookTypesDev();
14005 return readContext(context, observedBits);
14006 },
14007 useEffect: function (create, deps) {
14008 currentHookNameInDev = 'useEffect';
14009 warnInvalidHookAccess();
14010 mountHookTypesDev();
14011 return mountEffect(create, deps);
14012 },
14013 useImperativeHandle: function (ref, create, deps) {
14014 currentHookNameInDev = 'useImperativeHandle';
14015 warnInvalidHookAccess();
14016 mountHookTypesDev();
14017 return mountImperativeHandle(ref, create, deps);
14018 },
14019 useLayoutEffect: function (create, deps) {
14020 currentHookNameInDev = 'useLayoutEffect';
14021 warnInvalidHookAccess();
14022 mountHookTypesDev();
14023 return mountLayoutEffect(create, deps);
14024 },
14025 useMemo: function (create, deps) {
14026 currentHookNameInDev = 'useMemo';
14027 warnInvalidHookAccess();
14028 mountHookTypesDev();
14029 var prevDispatcher = ReactCurrentDispatcher$1.current;
14030 ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;
14031 try {
14032 return mountMemo(create, deps);
14033 } finally {
14034 ReactCurrentDispatcher$1.current = prevDispatcher;
14035 }
14036 },
14037 useReducer: function (reducer, initialArg, init) {
14038 currentHookNameInDev = 'useReducer';
14039 warnInvalidHookAccess();
14040 mountHookTypesDev();
14041 var prevDispatcher = ReactCurrentDispatcher$1.current;
14042 ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;
14043 try {
14044 return mountReducer(reducer, initialArg, init);
14045 } finally {
14046 ReactCurrentDispatcher$1.current = prevDispatcher;
14047 }
14048 },
14049 useRef: function (initialValue) {
14050 currentHookNameInDev = 'useRef';
14051 warnInvalidHookAccess();
14052 mountHookTypesDev();
14053 return mountRef(initialValue);
14054 },
14055 useState: function (initialState) {
14056 currentHookNameInDev = 'useState';
14057 warnInvalidHookAccess();
14058 mountHookTypesDev();
14059 var prevDispatcher = ReactCurrentDispatcher$1.current;
14060 ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;
14061 try {
14062 return mountState(initialState);
14063 } finally {
14064 ReactCurrentDispatcher$1.current = prevDispatcher;
14065 }
14066 },
14067 useDebugValue: function (value, formatterFn) {
14068 currentHookNameInDev = 'useDebugValue';
14069 warnInvalidHookAccess();
14070 mountHookTypesDev();
14071 return mountDebugValue(value, formatterFn);
14072 }
14073 };
14074
14075 InvalidNestedHooksDispatcherOnUpdateInDEV = {
14076 readContext: function (context, observedBits) {
14077 warnInvalidContextAccess();
14078 return readContext(context, observedBits);
14079 },
14080 useCallback: function (callback, deps) {
14081 currentHookNameInDev = 'useCallback';
14082 warnInvalidHookAccess();
14083 updateHookTypesDev();
14084 return updateCallback(callback, deps);
14085 },
14086 useContext: function (context, observedBits) {
14087 currentHookNameInDev = 'useContext';
14088 warnInvalidHookAccess();
14089 updateHookTypesDev();
14090 return readContext(context, observedBits);
14091 },
14092 useEffect: function (create, deps) {
14093 currentHookNameInDev = 'useEffect';
14094 warnInvalidHookAccess();
14095 updateHookTypesDev();
14096 return updateEffect(create, deps);
14097 },
14098 useImperativeHandle: function (ref, create, deps) {
14099 currentHookNameInDev = 'useImperativeHandle';
14100 warnInvalidHookAccess();
14101 updateHookTypesDev();
14102 return updateImperativeHandle(ref, create, deps);
14103 },
14104 useLayoutEffect: function (create, deps) {
14105 currentHookNameInDev = 'useLayoutEffect';
14106 warnInvalidHookAccess();
14107 updateHookTypesDev();
14108 return updateLayoutEffect(create, deps);
14109 },
14110 useMemo: function (create, deps) {
14111 currentHookNameInDev = 'useMemo';
14112 warnInvalidHookAccess();
14113 updateHookTypesDev();
14114 var prevDispatcher = ReactCurrentDispatcher$1.current;
14115 ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
14116 try {
14117 return updateMemo(create, deps);
14118 } finally {
14119 ReactCurrentDispatcher$1.current = prevDispatcher;
14120 }
14121 },
14122 useReducer: function (reducer, initialArg, init) {
14123 currentHookNameInDev = 'useReducer';
14124 warnInvalidHookAccess();
14125 updateHookTypesDev();
14126 var prevDispatcher = ReactCurrentDispatcher$1.current;
14127 ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
14128 try {
14129 return updateReducer(reducer, initialArg, init);
14130 } finally {
14131 ReactCurrentDispatcher$1.current = prevDispatcher;
14132 }
14133 },
14134 useRef: function (initialValue) {
14135 currentHookNameInDev = 'useRef';
14136 warnInvalidHookAccess();
14137 updateHookTypesDev();
14138 return updateRef(initialValue);
14139 },
14140 useState: function (initialState) {
14141 currentHookNameInDev = 'useState';
14142 warnInvalidHookAccess();
14143 updateHookTypesDev();
14144 var prevDispatcher = ReactCurrentDispatcher$1.current;
14145 ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
14146 try {
14147 return updateState(initialState);
14148 } finally {
14149 ReactCurrentDispatcher$1.current = prevDispatcher;
14150 }
14151 },
14152 useDebugValue: function (value, formatterFn) {
14153 currentHookNameInDev = 'useDebugValue';
14154 warnInvalidHookAccess();
14155 updateHookTypesDev();
14156 return updateDebugValue(value, formatterFn);
14157 }
14158 };
14159}
14160
14161var commitTime = 0;
14162var profilerStartTime = -1;
14163
14164function getCommitTime() {
14165 return commitTime;
14166}
14167
14168function recordCommitTime() {
14169 if (!enableProfilerTimer) {
14170 return;
14171 }
14172 commitTime = unstable_now();
14173}
14174
14175function startProfilerTimer(fiber) {
14176 if (!enableProfilerTimer) {
14177 return;
14178 }
14179
14180 profilerStartTime = unstable_now();
14181
14182 if (fiber.actualStartTime < 0) {
14183 fiber.actualStartTime = unstable_now();
14184 }
14185}
14186
14187function stopProfilerTimerIfRunning(fiber) {
14188 if (!enableProfilerTimer) {
14189 return;
14190 }
14191 profilerStartTime = -1;
14192}
14193
14194function stopProfilerTimerIfRunningAndRecordDelta(fiber, overrideBaseTime) {
14195 if (!enableProfilerTimer) {
14196 return;
14197 }
14198
14199 if (profilerStartTime >= 0) {
14200 var elapsedTime = unstable_now() - profilerStartTime;
14201 fiber.actualDuration += elapsedTime;
14202 if (overrideBaseTime) {
14203 fiber.selfBaseDuration = elapsedTime;
14204 }
14205 profilerStartTime = -1;
14206 }
14207}
14208
14209// The deepest Fiber on the stack involved in a hydration context.
14210// This may have been an insertion or a hydration.
14211var hydrationParentFiber = null;
14212var nextHydratableInstance = null;
14213var isHydrating = false;
14214
14215function enterHydrationState(fiber) {
14216 if (!supportsHydration) {
14217 return false;
14218 }
14219
14220 var parentInstance = fiber.stateNode.containerInfo;
14221 nextHydratableInstance = getFirstHydratableChild(parentInstance);
14222 hydrationParentFiber = fiber;
14223 isHydrating = true;
14224 return true;
14225}
14226
14227function reenterHydrationStateFromDehydratedSuspenseInstance(fiber) {
14228 if (!supportsHydration) {
14229 return false;
14230 }
14231
14232 var suspenseInstance = fiber.stateNode;
14233 nextHydratableInstance = getNextHydratableSibling(suspenseInstance);
14234 popToNextHostParent(fiber);
14235 isHydrating = true;
14236 return true;
14237}
14238
14239function deleteHydratableInstance(returnFiber, instance) {
14240 {
14241 switch (returnFiber.tag) {
14242 case HostRoot:
14243 didNotHydrateContainerInstance(returnFiber.stateNode.containerInfo, instance);
14244 break;
14245 case HostComponent:
14246 didNotHydrateInstance(returnFiber.type, returnFiber.memoizedProps, returnFiber.stateNode, instance);
14247 break;
14248 }
14249 }
14250
14251 var childToDelete = createFiberFromHostInstanceForDeletion();
14252 childToDelete.stateNode = instance;
14253 childToDelete.return = returnFiber;
14254 childToDelete.effectTag = Deletion;
14255
14256 // This might seem like it belongs on progressedFirstDeletion. However,
14257 // these children are not part of the reconciliation list of children.
14258 // Even if we abort and rereconcile the children, that will try to hydrate
14259 // again and the nodes are still in the host tree so these will be
14260 // recreated.
14261 if (returnFiber.lastEffect !== null) {
14262 returnFiber.lastEffect.nextEffect = childToDelete;
14263 returnFiber.lastEffect = childToDelete;
14264 } else {
14265 returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
14266 }
14267}
14268
14269function insertNonHydratedInstance(returnFiber, fiber) {
14270 fiber.effectTag |= Placement;
14271 {
14272 switch (returnFiber.tag) {
14273 case HostRoot:
14274 {
14275 var parentContainer = returnFiber.stateNode.containerInfo;
14276 switch (fiber.tag) {
14277 case HostComponent:
14278 var type = fiber.type;
14279 var props = fiber.pendingProps;
14280 didNotFindHydratableContainerInstance(parentContainer, type, props);
14281 break;
14282 case HostText:
14283 var text = fiber.pendingProps;
14284 didNotFindHydratableContainerTextInstance(parentContainer, text);
14285 break;
14286 case SuspenseComponent:
14287
14288 break;
14289 }
14290 break;
14291 }
14292 case HostComponent:
14293 {
14294 var parentType = returnFiber.type;
14295 var parentProps = returnFiber.memoizedProps;
14296 var parentInstance = returnFiber.stateNode;
14297 switch (fiber.tag) {
14298 case HostComponent:
14299 var _type = fiber.type;
14300 var _props = fiber.pendingProps;
14301 didNotFindHydratableInstance(parentType, parentProps, parentInstance, _type, _props);
14302 break;
14303 case HostText:
14304 var _text = fiber.pendingProps;
14305 didNotFindHydratableTextInstance(parentType, parentProps, parentInstance, _text);
14306 break;
14307 case SuspenseComponent:
14308 didNotFindHydratableSuspenseInstance(parentType, parentProps, parentInstance);
14309 break;
14310 }
14311 break;
14312 }
14313 default:
14314 return;
14315 }
14316 }
14317}
14318
14319function tryHydrate(fiber, nextInstance) {
14320 switch (fiber.tag) {
14321 case HostComponent:
14322 {
14323 var type = fiber.type;
14324 var props = fiber.pendingProps;
14325 var instance = canHydrateInstance(nextInstance, type, props);
14326 if (instance !== null) {
14327 fiber.stateNode = instance;
14328 return true;
14329 }
14330 return false;
14331 }
14332 case HostText:
14333 {
14334 var text = fiber.pendingProps;
14335 var textInstance = canHydrateTextInstance(nextInstance, text);
14336 if (textInstance !== null) {
14337 fiber.stateNode = textInstance;
14338 return true;
14339 }
14340 return false;
14341 }
14342 case SuspenseComponent:
14343 {
14344 if (enableSuspenseServerRenderer) {
14345 var suspenseInstance = canHydrateSuspenseInstance(nextInstance);
14346 if (suspenseInstance !== null) {
14347 // Downgrade the tag to a dehydrated component until we've hydrated it.
14348 fiber.tag = DehydratedSuspenseComponent;
14349 fiber.stateNode = suspenseInstance;
14350 return true;
14351 }
14352 }
14353 return false;
14354 }
14355 default:
14356 return false;
14357 }
14358}
14359
14360function tryToClaimNextHydratableInstance(fiber) {
14361 if (!isHydrating) {
14362 return;
14363 }
14364 var nextInstance = nextHydratableInstance;
14365 if (!nextInstance) {
14366 // Nothing to hydrate. Make it an insertion.
14367 insertNonHydratedInstance(hydrationParentFiber, fiber);
14368 isHydrating = false;
14369 hydrationParentFiber = fiber;
14370 return;
14371 }
14372 var firstAttemptedInstance = nextInstance;
14373 if (!tryHydrate(fiber, nextInstance)) {
14374 // If we can't hydrate this instance let's try the next one.
14375 // We use this as a heuristic. It's based on intuition and not data so it
14376 // might be flawed or unnecessary.
14377 nextInstance = getNextHydratableSibling(firstAttemptedInstance);
14378 if (!nextInstance || !tryHydrate(fiber, nextInstance)) {
14379 // Nothing to hydrate. Make it an insertion.
14380 insertNonHydratedInstance(hydrationParentFiber, fiber);
14381 isHydrating = false;
14382 hydrationParentFiber = fiber;
14383 return;
14384 }
14385 // We matched the next one, we'll now assume that the first one was
14386 // superfluous and we'll delete it. Since we can't eagerly delete it
14387 // we'll have to schedule a deletion. To do that, this node needs a dummy
14388 // fiber associated with it.
14389 deleteHydratableInstance(hydrationParentFiber, firstAttemptedInstance);
14390 }
14391 hydrationParentFiber = fiber;
14392 nextHydratableInstance = getFirstHydratableChild(nextInstance);
14393}
14394
14395function prepareToHydrateHostInstance(fiber, rootContainerInstance, hostContext) {
14396 if (!supportsHydration) {
14397 invariant(false, 'Expected prepareToHydrateHostInstance() to never be called. This error is likely caused by a bug in React. Please file an issue.');
14398 }
14399
14400 var instance = fiber.stateNode;
14401 var updatePayload = hydrateInstance(instance, fiber.type, fiber.memoizedProps, rootContainerInstance, hostContext, fiber);
14402 // TODO: Type this specific to this type of component.
14403 fiber.updateQueue = updatePayload;
14404 // If the update payload indicates that there is a change or if there
14405 // is a new ref we mark this as an update.
14406 if (updatePayload !== null) {
14407 return true;
14408 }
14409 return false;
14410}
14411
14412function prepareToHydrateHostTextInstance(fiber) {
14413 if (!supportsHydration) {
14414 invariant(false, 'Expected prepareToHydrateHostTextInstance() to never be called. This error is likely caused by a bug in React. Please file an issue.');
14415 }
14416
14417 var textInstance = fiber.stateNode;
14418 var textContent = fiber.memoizedProps;
14419 var shouldUpdate = hydrateTextInstance(textInstance, textContent, fiber);
14420 {
14421 if (shouldUpdate) {
14422 // We assume that prepareToHydrateHostTextInstance is called in a context where the
14423 // hydration parent is the parent host component of this host text.
14424 var returnFiber = hydrationParentFiber;
14425 if (returnFiber !== null) {
14426 switch (returnFiber.tag) {
14427 case HostRoot:
14428 {
14429 var parentContainer = returnFiber.stateNode.containerInfo;
14430 didNotMatchHydratedContainerTextInstance(parentContainer, textInstance, textContent);
14431 break;
14432 }
14433 case HostComponent:
14434 {
14435 var parentType = returnFiber.type;
14436 var parentProps = returnFiber.memoizedProps;
14437 var parentInstance = returnFiber.stateNode;
14438 didNotMatchHydratedTextInstance(parentType, parentProps, parentInstance, textInstance, textContent);
14439 break;
14440 }
14441 }
14442 }
14443 }
14444 }
14445 return shouldUpdate;
14446}
14447
14448function skipPastDehydratedSuspenseInstance(fiber) {
14449 if (!supportsHydration) {
14450 invariant(false, 'Expected skipPastDehydratedSuspenseInstance() to never be called. This error is likely caused by a bug in React. Please file an issue.');
14451 }
14452 var suspenseInstance = fiber.stateNode;
14453 !suspenseInstance ? invariant(false, 'Expected to have a hydrated suspense instance. This error is likely caused by a bug in React. Please file an issue.') : void 0;
14454 nextHydratableInstance = getNextHydratableInstanceAfterSuspenseInstance(suspenseInstance);
14455}
14456
14457function popToNextHostParent(fiber) {
14458 var parent = fiber.return;
14459 while (parent !== null && parent.tag !== HostComponent && parent.tag !== HostRoot && parent.tag !== DehydratedSuspenseComponent) {
14460 parent = parent.return;
14461 }
14462 hydrationParentFiber = parent;
14463}
14464
14465function popHydrationState(fiber) {
14466 if (!supportsHydration) {
14467 return false;
14468 }
14469 if (fiber !== hydrationParentFiber) {
14470 // We're deeper than the current hydration context, inside an inserted
14471 // tree.
14472 return false;
14473 }
14474 if (!isHydrating) {
14475 // If we're not currently hydrating but we're in a hydration context, then
14476 // we were an insertion and now need to pop up reenter hydration of our
14477 // siblings.
14478 popToNextHostParent(fiber);
14479 isHydrating = true;
14480 return false;
14481 }
14482
14483 var type = fiber.type;
14484
14485 // If we have any remaining hydratable nodes, we need to delete them now.
14486 // We only do this deeper than head and body since they tend to have random
14487 // other nodes in them. We also ignore components with pure text content in
14488 // side of them.
14489 // TODO: Better heuristic.
14490 if (fiber.tag !== HostComponent || type !== 'head' && type !== 'body' && !shouldSetTextContent(type, fiber.memoizedProps)) {
14491 var nextInstance = nextHydratableInstance;
14492 while (nextInstance) {
14493 deleteHydratableInstance(fiber, nextInstance);
14494 nextInstance = getNextHydratableSibling(nextInstance);
14495 }
14496 }
14497
14498 popToNextHostParent(fiber);
14499 nextHydratableInstance = hydrationParentFiber ? getNextHydratableSibling(fiber.stateNode) : null;
14500 return true;
14501}
14502
14503function resetHydrationState() {
14504 if (!supportsHydration) {
14505 return;
14506 }
14507
14508 hydrationParentFiber = null;
14509 nextHydratableInstance = null;
14510 isHydrating = false;
14511}
14512
14513var ReactCurrentOwner$3 = ReactSharedInternals.ReactCurrentOwner;
14514
14515var didReceiveUpdate = false;
14516
14517var didWarnAboutBadClass = void 0;
14518var didWarnAboutContextTypeOnFunctionComponent = void 0;
14519var didWarnAboutGetDerivedStateOnFunctionComponent = void 0;
14520var didWarnAboutFunctionRefs = void 0;
14521var didWarnAboutReassigningProps = void 0;
14522
14523{
14524 didWarnAboutBadClass = {};
14525 didWarnAboutContextTypeOnFunctionComponent = {};
14526 didWarnAboutGetDerivedStateOnFunctionComponent = {};
14527 didWarnAboutFunctionRefs = {};
14528 didWarnAboutReassigningProps = false;
14529}
14530
14531function reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime) {
14532 if (current$$1 === null) {
14533 // If this is a fresh new component that hasn't been rendered yet, we
14534 // won't update its child set by applying minimal side-effects. Instead,
14535 // we will add them all to the child before it gets rendered. That means
14536 // we can optimize this reconciliation pass by not tracking side-effects.
14537 workInProgress.child = mountChildFibers(workInProgress, null, nextChildren, renderExpirationTime);
14538 } else {
14539 // If the current child is the same as the work in progress, it means that
14540 // we haven't yet started any work on these children. Therefore, we use
14541 // the clone algorithm to create a copy of all the current children.
14542
14543 // If we had any progressed work already, that is invalid at this point so
14544 // let's throw it out.
14545 workInProgress.child = reconcileChildFibers(workInProgress, current$$1.child, nextChildren, renderExpirationTime);
14546 }
14547}
14548
14549function forceUnmountCurrentAndReconcile(current$$1, workInProgress, nextChildren, renderExpirationTime) {
14550 // This function is fork of reconcileChildren. It's used in cases where we
14551 // want to reconcile without matching against the existing set. This has the
14552 // effect of all current children being unmounted; even if the type and key
14553 // are the same, the old child is unmounted and a new child is created.
14554 //
14555 // To do this, we're going to go through the reconcile algorithm twice. In
14556 // the first pass, we schedule a deletion for all the current children by
14557 // passing null.
14558 workInProgress.child = reconcileChildFibers(workInProgress, current$$1.child, null, renderExpirationTime);
14559 // In the second pass, we mount the new children. The trick here is that we
14560 // pass null in place of where we usually pass the current child set. This has
14561 // the effect of remounting all children regardless of whether their their
14562 // identity matches.
14563 workInProgress.child = reconcileChildFibers(workInProgress, null, nextChildren, renderExpirationTime);
14564}
14565
14566function updateForwardRef(current$$1, workInProgress, Component, nextProps, renderExpirationTime) {
14567 // TODO: current can be non-null here even if the component
14568 // hasn't yet mounted. This happens after the first render suspends.
14569 // We'll need to figure out if this is fine or can cause issues.
14570
14571 {
14572 if (workInProgress.type !== workInProgress.elementType) {
14573 // Lazy component props can't be validated in createElement
14574 // because they're only guaranteed to be resolved here.
14575 var innerPropTypes = Component.propTypes;
14576 if (innerPropTypes) {
14577 checkPropTypes_1(innerPropTypes, nextProps, // Resolved props
14578 'prop', getComponentName(Component), getCurrentFiberStackInDev);
14579 }
14580 }
14581 }
14582
14583 var render = Component.render;
14584 var ref = workInProgress.ref;
14585
14586 // The rest is a fork of updateFunctionComponent
14587 var nextChildren = void 0;
14588 prepareToReadContext(workInProgress, renderExpirationTime);
14589 {
14590 ReactCurrentOwner$3.current = workInProgress;
14591 setCurrentPhase('render');
14592 nextChildren = renderWithHooks(current$$1, workInProgress, render, nextProps, ref, renderExpirationTime);
14593 if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & StrictMode) {
14594 // Only double-render components with Hooks
14595 if (workInProgress.memoizedState !== null) {
14596 nextChildren = renderWithHooks(current$$1, workInProgress, render, nextProps, ref, renderExpirationTime);
14597 }
14598 }
14599 setCurrentPhase(null);
14600 }
14601
14602 if (current$$1 !== null && !didReceiveUpdate) {
14603 bailoutHooks(current$$1, workInProgress, renderExpirationTime);
14604 return bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime);
14605 }
14606
14607 // React DevTools reads this flag.
14608 workInProgress.effectTag |= PerformedWork;
14609 reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime);
14610 return workInProgress.child;
14611}
14612
14613function updateMemoComponent(current$$1, workInProgress, Component, nextProps, updateExpirationTime, renderExpirationTime) {
14614 if (current$$1 === null) {
14615 var type = Component.type;
14616 if (isSimpleFunctionComponent(type) && Component.compare === null &&
14617 // SimpleMemoComponent codepath doesn't resolve outer props either.
14618 Component.defaultProps === undefined) {
14619 // If this is a plain function component without default props,
14620 // and with only the default shallow comparison, we upgrade it
14621 // to a SimpleMemoComponent to allow fast path updates.
14622 workInProgress.tag = SimpleMemoComponent;
14623 workInProgress.type = type;
14624 {
14625 validateFunctionComponentInDev(workInProgress, type);
14626 }
14627 return updateSimpleMemoComponent(current$$1, workInProgress, type, nextProps, updateExpirationTime, renderExpirationTime);
14628 }
14629 {
14630 var innerPropTypes = type.propTypes;
14631 if (innerPropTypes) {
14632 // Inner memo component props aren't currently validated in createElement.
14633 // We could move it there, but we'd still need this for lazy code path.
14634 checkPropTypes_1(innerPropTypes, nextProps, // Resolved props
14635 'prop', getComponentName(type), getCurrentFiberStackInDev);
14636 }
14637 }
14638 var child = createFiberFromTypeAndProps(Component.type, null, nextProps, null, workInProgress.mode, renderExpirationTime);
14639 child.ref = workInProgress.ref;
14640 child.return = workInProgress;
14641 workInProgress.child = child;
14642 return child;
14643 }
14644 {
14645 var _type = Component.type;
14646 var _innerPropTypes = _type.propTypes;
14647 if (_innerPropTypes) {
14648 // Inner memo component props aren't currently validated in createElement.
14649 // We could move it there, but we'd still need this for lazy code path.
14650 checkPropTypes_1(_innerPropTypes, nextProps, // Resolved props
14651 'prop', getComponentName(_type), getCurrentFiberStackInDev);
14652 }
14653 }
14654 var currentChild = current$$1.child; // This is always exactly one child
14655 if (updateExpirationTime < renderExpirationTime) {
14656 // This will be the props with resolved defaultProps,
14657 // unlike current.memoizedProps which will be the unresolved ones.
14658 var prevProps = currentChild.memoizedProps;
14659 // Default to shallow comparison
14660 var compare = Component.compare;
14661 compare = compare !== null ? compare : shallowEqual;
14662 if (compare(prevProps, nextProps) && current$$1.ref === workInProgress.ref) {
14663 return bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime);
14664 }
14665 }
14666 // React DevTools reads this flag.
14667 workInProgress.effectTag |= PerformedWork;
14668 var newChild = createWorkInProgress(currentChild, nextProps, renderExpirationTime);
14669 newChild.ref = workInProgress.ref;
14670 newChild.return = workInProgress;
14671 workInProgress.child = newChild;
14672 return newChild;
14673}
14674
14675function updateSimpleMemoComponent(current$$1, workInProgress, Component, nextProps, updateExpirationTime, renderExpirationTime) {
14676 // TODO: current can be non-null here even if the component
14677 // hasn't yet mounted. This happens when the inner render suspends.
14678 // We'll need to figure out if this is fine or can cause issues.
14679
14680 {
14681 if (workInProgress.type !== workInProgress.elementType) {
14682 // Lazy component props can't be validated in createElement
14683 // because they're only guaranteed to be resolved here.
14684 var outerMemoType = workInProgress.elementType;
14685 if (outerMemoType.$$typeof === REACT_LAZY_TYPE) {
14686 // We warn when you define propTypes on lazy()
14687 // so let's just skip over it to find memo() outer wrapper.
14688 // Inner props for memo are validated later.
14689 outerMemoType = refineResolvedLazyComponent(outerMemoType);
14690 }
14691 var outerPropTypes = outerMemoType && outerMemoType.propTypes;
14692 if (outerPropTypes) {
14693 checkPropTypes_1(outerPropTypes, nextProps, // Resolved (SimpleMemoComponent has no defaultProps)
14694 'prop', getComponentName(outerMemoType), getCurrentFiberStackInDev);
14695 }
14696 // Inner propTypes will be validated in the function component path.
14697 }
14698 }
14699 if (current$$1 !== null) {
14700 var prevProps = current$$1.memoizedProps;
14701 if (shallowEqual(prevProps, nextProps) && current$$1.ref === workInProgress.ref) {
14702 didReceiveUpdate = false;
14703 if (updateExpirationTime < renderExpirationTime) {
14704 return bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime);
14705 }
14706 }
14707 }
14708 return updateFunctionComponent(current$$1, workInProgress, Component, nextProps, renderExpirationTime);
14709}
14710
14711function updateFragment(current$$1, workInProgress, renderExpirationTime) {
14712 var nextChildren = workInProgress.pendingProps;
14713 reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime);
14714 return workInProgress.child;
14715}
14716
14717function updateMode(current$$1, workInProgress, renderExpirationTime) {
14718 var nextChildren = workInProgress.pendingProps.children;
14719 reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime);
14720 return workInProgress.child;
14721}
14722
14723function updateProfiler(current$$1, workInProgress, renderExpirationTime) {
14724 if (enableProfilerTimer) {
14725 workInProgress.effectTag |= Update;
14726 }
14727 var nextProps = workInProgress.pendingProps;
14728 var nextChildren = nextProps.children;
14729 reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime);
14730 return workInProgress.child;
14731}
14732
14733function markRef(current$$1, workInProgress) {
14734 var ref = workInProgress.ref;
14735 if (current$$1 === null && ref !== null || current$$1 !== null && current$$1.ref !== ref) {
14736 // Schedule a Ref effect
14737 workInProgress.effectTag |= Ref;
14738 }
14739}
14740
14741function updateFunctionComponent(current$$1, workInProgress, Component, nextProps, renderExpirationTime) {
14742 {
14743 if (workInProgress.type !== workInProgress.elementType) {
14744 // Lazy component props can't be validated in createElement
14745 // because they're only guaranteed to be resolved here.
14746 var innerPropTypes = Component.propTypes;
14747 if (innerPropTypes) {
14748 checkPropTypes_1(innerPropTypes, nextProps, // Resolved props
14749 'prop', getComponentName(Component), getCurrentFiberStackInDev);
14750 }
14751 }
14752 }
14753
14754 var unmaskedContext = getUnmaskedContext(workInProgress, Component, true);
14755 var context = getMaskedContext(workInProgress, unmaskedContext);
14756
14757 var nextChildren = void 0;
14758 prepareToReadContext(workInProgress, renderExpirationTime);
14759 {
14760 ReactCurrentOwner$3.current = workInProgress;
14761 setCurrentPhase('render');
14762 nextChildren = renderWithHooks(current$$1, workInProgress, Component, nextProps, context, renderExpirationTime);
14763 if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & StrictMode) {
14764 // Only double-render components with Hooks
14765 if (workInProgress.memoizedState !== null) {
14766 nextChildren = renderWithHooks(current$$1, workInProgress, Component, nextProps, context, renderExpirationTime);
14767 }
14768 }
14769 setCurrentPhase(null);
14770 }
14771
14772 if (current$$1 !== null && !didReceiveUpdate) {
14773 bailoutHooks(current$$1, workInProgress, renderExpirationTime);
14774 return bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime);
14775 }
14776
14777 // React DevTools reads this flag.
14778 workInProgress.effectTag |= PerformedWork;
14779 reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime);
14780 return workInProgress.child;
14781}
14782
14783function updateClassComponent(current$$1, workInProgress, Component, nextProps, renderExpirationTime) {
14784 {
14785 if (workInProgress.type !== workInProgress.elementType) {
14786 // Lazy component props can't be validated in createElement
14787 // because they're only guaranteed to be resolved here.
14788 var innerPropTypes = Component.propTypes;
14789 if (innerPropTypes) {
14790 checkPropTypes_1(innerPropTypes, nextProps, // Resolved props
14791 'prop', getComponentName(Component), getCurrentFiberStackInDev);
14792 }
14793 }
14794 }
14795
14796 // Push context providers early to prevent context stack mismatches.
14797 // During mounting we don't know the child context yet as the instance doesn't exist.
14798 // We will invalidate the child context in finishClassComponent() right after rendering.
14799 var hasContext = void 0;
14800 if (isContextProvider(Component)) {
14801 hasContext = true;
14802 pushContextProvider(workInProgress);
14803 } else {
14804 hasContext = false;
14805 }
14806 prepareToReadContext(workInProgress, renderExpirationTime);
14807
14808 var instance = workInProgress.stateNode;
14809 var shouldUpdate = void 0;
14810 if (instance === null) {
14811 if (current$$1 !== null) {
14812 // An class component without an instance only mounts if it suspended
14813 // inside a non- concurrent tree, in an inconsistent state. We want to
14814 // tree it like a new mount, even though an empty version of it already
14815 // committed. Disconnect the alternate pointers.
14816 current$$1.alternate = null;
14817 workInProgress.alternate = null;
14818 // Since this is conceptually a new fiber, schedule a Placement effect
14819 workInProgress.effectTag |= Placement;
14820 }
14821 // In the initial pass we might need to construct the instance.
14822 constructClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
14823 mountClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
14824 shouldUpdate = true;
14825 } else if (current$$1 === null) {
14826 // In a resume, we'll already have an instance we can reuse.
14827 shouldUpdate = resumeMountClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
14828 } else {
14829 shouldUpdate = updateClassInstance(current$$1, workInProgress, Component, nextProps, renderExpirationTime);
14830 }
14831 var nextUnitOfWork = finishClassComponent(current$$1, workInProgress, Component, shouldUpdate, hasContext, renderExpirationTime);
14832 {
14833 var inst = workInProgress.stateNode;
14834 if (inst.props !== nextProps) {
14835 !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;
14836 didWarnAboutReassigningProps = true;
14837 }
14838 }
14839 return nextUnitOfWork;
14840}
14841
14842function finishClassComponent(current$$1, workInProgress, Component, shouldUpdate, hasContext, renderExpirationTime) {
14843 // Refs should update even if shouldComponentUpdate returns false
14844 markRef(current$$1, workInProgress);
14845
14846 var didCaptureError = (workInProgress.effectTag & DidCapture) !== NoEffect;
14847
14848 if (!shouldUpdate && !didCaptureError) {
14849 // Context providers should defer to sCU for rendering
14850 if (hasContext) {
14851 invalidateContextProvider(workInProgress, Component, false);
14852 }
14853
14854 return bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime);
14855 }
14856
14857 var instance = workInProgress.stateNode;
14858
14859 // Rerender
14860 ReactCurrentOwner$3.current = workInProgress;
14861 var nextChildren = void 0;
14862 if (didCaptureError && typeof Component.getDerivedStateFromError !== 'function') {
14863 // If we captured an error, but getDerivedStateFrom catch is not defined,
14864 // unmount all the children. componentDidCatch will schedule an update to
14865 // re-render a fallback. This is temporary until we migrate everyone to
14866 // the new API.
14867 // TODO: Warn in a future release.
14868 nextChildren = null;
14869
14870 if (enableProfilerTimer) {
14871 stopProfilerTimerIfRunning(workInProgress);
14872 }
14873 } else {
14874 {
14875 setCurrentPhase('render');
14876 nextChildren = instance.render();
14877 if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & StrictMode) {
14878 instance.render();
14879 }
14880 setCurrentPhase(null);
14881 }
14882 }
14883
14884 // React DevTools reads this flag.
14885 workInProgress.effectTag |= PerformedWork;
14886 if (current$$1 !== null && didCaptureError) {
14887 // If we're recovering from an error, reconcile without reusing any of
14888 // the existing children. Conceptually, the normal children and the children
14889 // that are shown on error are two different sets, so we shouldn't reuse
14890 // normal children even if their identities match.
14891 forceUnmountCurrentAndReconcile(current$$1, workInProgress, nextChildren, renderExpirationTime);
14892 } else {
14893 reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime);
14894 }
14895
14896 // Memoize state using the values we just used to render.
14897 // TODO: Restructure so we never read values from the instance.
14898 workInProgress.memoizedState = instance.state;
14899
14900 // The context might have changed so we need to recalculate it.
14901 if (hasContext) {
14902 invalidateContextProvider(workInProgress, Component, true);
14903 }
14904
14905 return workInProgress.child;
14906}
14907
14908function pushHostRootContext(workInProgress) {
14909 var root = workInProgress.stateNode;
14910 if (root.pendingContext) {
14911 pushTopLevelContextObject(workInProgress, root.pendingContext, root.pendingContext !== root.context);
14912 } else if (root.context) {
14913 // Should always be set
14914 pushTopLevelContextObject(workInProgress, root.context, false);
14915 }
14916 pushHostContainer(workInProgress, root.containerInfo);
14917}
14918
14919function updateHostRoot(current$$1, workInProgress, renderExpirationTime) {
14920 pushHostRootContext(workInProgress);
14921 var updateQueue = workInProgress.updateQueue;
14922 !(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;
14923 var nextProps = workInProgress.pendingProps;
14924 var prevState = workInProgress.memoizedState;
14925 var prevChildren = prevState !== null ? prevState.element : null;
14926 processUpdateQueue(workInProgress, updateQueue, nextProps, null, renderExpirationTime);
14927 var nextState = workInProgress.memoizedState;
14928 // Caution: React DevTools currently depends on this property
14929 // being called "element".
14930 var nextChildren = nextState.element;
14931 if (nextChildren === prevChildren) {
14932 // If the state is the same as before, that's a bailout because we had
14933 // no work that expires at this time.
14934 resetHydrationState();
14935 return bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime);
14936 }
14937 var root = workInProgress.stateNode;
14938 if ((current$$1 === null || current$$1.child === null) && root.hydrate && enterHydrationState(workInProgress)) {
14939 // If we don't have any current children this might be the first pass.
14940 // We always try to hydrate. If this isn't a hydration pass there won't
14941 // be any children to hydrate which is effectively the same thing as
14942 // not hydrating.
14943
14944 // This is a bit of a hack. We track the host root as a placement to
14945 // know that we're currently in a mounting state. That way isMounted
14946 // works as expected. We must reset this before committing.
14947 // TODO: Delete this when we delete isMounted and findDOMNode.
14948 workInProgress.effectTag |= Placement;
14949
14950 // Ensure that children mount into this root without tracking
14951 // side-effects. This ensures that we don't store Placement effects on
14952 // nodes that will be hydrated.
14953 workInProgress.child = mountChildFibers(workInProgress, null, nextChildren, renderExpirationTime);
14954 } else {
14955 // Otherwise reset hydration state in case we aborted and resumed another
14956 // root.
14957 reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime);
14958 resetHydrationState();
14959 }
14960 return workInProgress.child;
14961}
14962
14963function updateHostComponent(current$$1, workInProgress, renderExpirationTime) {
14964 pushHostContext(workInProgress);
14965
14966 if (current$$1 === null) {
14967 tryToClaimNextHydratableInstance(workInProgress);
14968 }
14969
14970 var type = workInProgress.type;
14971 var nextProps = workInProgress.pendingProps;
14972 var prevProps = current$$1 !== null ? current$$1.memoizedProps : null;
14973
14974 var nextChildren = nextProps.children;
14975 var isDirectTextChild = shouldSetTextContent(type, nextProps);
14976
14977 if (isDirectTextChild) {
14978 // We special case a direct text child of a host node. This is a common
14979 // case. We won't handle it as a reified child. We will instead handle
14980 // this in the host environment that also have access to this prop. That
14981 // avoids allocating another HostText fiber and traversing it.
14982 nextChildren = null;
14983 } else if (prevProps !== null && shouldSetTextContent(type, prevProps)) {
14984 // If we're switching from a direct text child to a normal child, or to
14985 // empty, we need to schedule the text content to be reset.
14986 workInProgress.effectTag |= ContentReset;
14987 }
14988
14989 markRef(current$$1, workInProgress);
14990
14991 // Check the host config to see if the children are offscreen/hidden.
14992 if (renderExpirationTime !== Never && workInProgress.mode & ConcurrentMode && shouldDeprioritizeSubtree(type, nextProps)) {
14993 // Schedule this fiber to re-render at offscreen priority. Then bailout.
14994 workInProgress.expirationTime = workInProgress.childExpirationTime = Never;
14995 return null;
14996 }
14997
14998 reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime);
14999 return workInProgress.child;
15000}
15001
15002function updateHostText(current$$1, workInProgress) {
15003 if (current$$1 === null) {
15004 tryToClaimNextHydratableInstance(workInProgress);
15005 }
15006 // Nothing to do here. This is terminal. We'll do the completion step
15007 // immediately after.
15008 return null;
15009}
15010
15011function mountLazyComponent(_current, workInProgress, elementType, updateExpirationTime, renderExpirationTime) {
15012 if (_current !== null) {
15013 // An lazy component only mounts if it suspended inside a non-
15014 // concurrent tree, in an inconsistent state. We want to treat it like
15015 // a new mount, even though an empty version of it already committed.
15016 // Disconnect the alternate pointers.
15017 _current.alternate = null;
15018 workInProgress.alternate = null;
15019 // Since this is conceptually a new fiber, schedule a Placement effect
15020 workInProgress.effectTag |= Placement;
15021 }
15022
15023 var props = workInProgress.pendingProps;
15024 // We can't start a User Timing measurement with correct label yet.
15025 // Cancel and resume right after we know the tag.
15026 cancelWorkTimer(workInProgress);
15027 var Component = readLazyComponentType(elementType);
15028 // Store the unwrapped component in the type.
15029 workInProgress.type = Component;
15030 var resolvedTag = workInProgress.tag = resolveLazyComponentTag(Component);
15031 startWorkTimer(workInProgress);
15032 var resolvedProps = resolveDefaultProps(Component, props);
15033 var child = void 0;
15034 switch (resolvedTag) {
15035 case FunctionComponent:
15036 {
15037 {
15038 validateFunctionComponentInDev(workInProgress, Component);
15039 }
15040 child = updateFunctionComponent(null, workInProgress, Component, resolvedProps, renderExpirationTime);
15041 break;
15042 }
15043 case ClassComponent:
15044 {
15045 child = updateClassComponent(null, workInProgress, Component, resolvedProps, renderExpirationTime);
15046 break;
15047 }
15048 case ForwardRef:
15049 {
15050 child = updateForwardRef(null, workInProgress, Component, resolvedProps, renderExpirationTime);
15051 break;
15052 }
15053 case MemoComponent:
15054 {
15055 {
15056 if (workInProgress.type !== workInProgress.elementType) {
15057 var outerPropTypes = Component.propTypes;
15058 if (outerPropTypes) {
15059 checkPropTypes_1(outerPropTypes, resolvedProps, // Resolved for outer only
15060 'prop', getComponentName(Component), getCurrentFiberStackInDev);
15061 }
15062 }
15063 }
15064 child = updateMemoComponent(null, workInProgress, Component, resolveDefaultProps(Component.type, resolvedProps), // The inner type can have defaults too
15065 updateExpirationTime, renderExpirationTime);
15066 break;
15067 }
15068 default:
15069 {
15070 var hint = '';
15071 {
15072 if (Component !== null && typeof Component === 'object' && Component.$$typeof === REACT_LAZY_TYPE) {
15073 hint = ' Did you wrap a component in React.lazy() more than once?';
15074 }
15075 }
15076 // This message intentionally doesn't mention ForwardRef or MemoComponent
15077 // because the fact that it's a separate type of work is an
15078 // implementation detail.
15079 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);
15080 }
15081 }
15082 return child;
15083}
15084
15085function mountIncompleteClassComponent(_current, workInProgress, Component, nextProps, renderExpirationTime) {
15086 if (_current !== null) {
15087 // An incomplete component only mounts if it suspended inside a non-
15088 // concurrent tree, in an inconsistent state. We want to treat it like
15089 // a new mount, even though an empty version of it already committed.
15090 // Disconnect the alternate pointers.
15091 _current.alternate = null;
15092 workInProgress.alternate = null;
15093 // Since this is conceptually a new fiber, schedule a Placement effect
15094 workInProgress.effectTag |= Placement;
15095 }
15096
15097 // Promote the fiber to a class and try rendering again.
15098 workInProgress.tag = ClassComponent;
15099
15100 // The rest of this function is a fork of `updateClassComponent`
15101
15102 // Push context providers early to prevent context stack mismatches.
15103 // During mounting we don't know the child context yet as the instance doesn't exist.
15104 // We will invalidate the child context in finishClassComponent() right after rendering.
15105 var hasContext = void 0;
15106 if (isContextProvider(Component)) {
15107 hasContext = true;
15108 pushContextProvider(workInProgress);
15109 } else {
15110 hasContext = false;
15111 }
15112 prepareToReadContext(workInProgress, renderExpirationTime);
15113
15114 constructClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
15115 mountClassInstance(workInProgress, Component, nextProps, renderExpirationTime);
15116
15117 return finishClassComponent(null, workInProgress, Component, true, hasContext, renderExpirationTime);
15118}
15119
15120function mountIndeterminateComponent(_current, workInProgress, Component, renderExpirationTime) {
15121 if (_current !== null) {
15122 // An indeterminate component only mounts if it suspended inside a non-
15123 // concurrent tree, in an inconsistent state. We want to treat it like
15124 // a new mount, even though an empty version of it already committed.
15125 // Disconnect the alternate pointers.
15126 _current.alternate = null;
15127 workInProgress.alternate = null;
15128 // Since this is conceptually a new fiber, schedule a Placement effect
15129 workInProgress.effectTag |= Placement;
15130 }
15131
15132 var props = workInProgress.pendingProps;
15133 var unmaskedContext = getUnmaskedContext(workInProgress, Component, false);
15134 var context = getMaskedContext(workInProgress, unmaskedContext);
15135
15136 prepareToReadContext(workInProgress, renderExpirationTime);
15137
15138 var value = void 0;
15139
15140 {
15141 if (Component.prototype && typeof Component.prototype.render === 'function') {
15142 var componentName = getComponentName(Component) || 'Unknown';
15143
15144 if (!didWarnAboutBadClass[componentName]) {
15145 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);
15146 didWarnAboutBadClass[componentName] = true;
15147 }
15148 }
15149
15150 if (workInProgress.mode & StrictMode) {
15151 ReactStrictModeWarnings.recordLegacyContextWarning(workInProgress, null);
15152 }
15153
15154 ReactCurrentOwner$3.current = workInProgress;
15155 value = renderWithHooks(null, workInProgress, Component, props, context, renderExpirationTime);
15156 }
15157 // React DevTools reads this flag.
15158 workInProgress.effectTag |= PerformedWork;
15159
15160 if (typeof value === 'object' && value !== null && typeof value.render === 'function' && value.$$typeof === undefined) {
15161 // Proceed under the assumption that this is a class instance
15162 workInProgress.tag = ClassComponent;
15163
15164 // Throw out any hooks that were used.
15165 resetHooks();
15166
15167 // Push context providers early to prevent context stack mismatches.
15168 // During mounting we don't know the child context yet as the instance doesn't exist.
15169 // We will invalidate the child context in finishClassComponent() right after rendering.
15170 var hasContext = false;
15171 if (isContextProvider(Component)) {
15172 hasContext = true;
15173 pushContextProvider(workInProgress);
15174 } else {
15175 hasContext = false;
15176 }
15177
15178 workInProgress.memoizedState = value.state !== null && value.state !== undefined ? value.state : null;
15179
15180 var getDerivedStateFromProps = Component.getDerivedStateFromProps;
15181 if (typeof getDerivedStateFromProps === 'function') {
15182 applyDerivedStateFromProps(workInProgress, Component, getDerivedStateFromProps, props);
15183 }
15184
15185 adoptClassInstance(workInProgress, value);
15186 mountClassInstance(workInProgress, Component, props, renderExpirationTime);
15187 return finishClassComponent(null, workInProgress, Component, true, hasContext, renderExpirationTime);
15188 } else {
15189 // Proceed under the assumption that this is a function component
15190 workInProgress.tag = FunctionComponent;
15191 {
15192 if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & StrictMode) {
15193 // Only double-render components with Hooks
15194 if (workInProgress.memoizedState !== null) {
15195 value = renderWithHooks(null, workInProgress, Component, props, context, renderExpirationTime);
15196 }
15197 }
15198 }
15199 reconcileChildren(null, workInProgress, value, renderExpirationTime);
15200 {
15201 validateFunctionComponentInDev(workInProgress, Component);
15202 }
15203 return workInProgress.child;
15204 }
15205}
15206
15207function validateFunctionComponentInDev(workInProgress, Component) {
15208 if (Component) {
15209 !!Component.childContextTypes ? warningWithoutStack$1(false, '%s(...): childContextTypes cannot be defined on a function component.', Component.displayName || Component.name || 'Component') : void 0;
15210 }
15211 if (workInProgress.ref !== null) {
15212 var info = '';
15213 var ownerName = getCurrentFiberOwnerNameInDevOrNull();
15214 if (ownerName) {
15215 info += '\n\nCheck the render method of `' + ownerName + '`.';
15216 }
15217
15218 var warningKey = ownerName || workInProgress._debugID || '';
15219 var debugSource = workInProgress._debugSource;
15220 if (debugSource) {
15221 warningKey = debugSource.fileName + ':' + debugSource.lineNumber;
15222 }
15223 if (!didWarnAboutFunctionRefs[warningKey]) {
15224 didWarnAboutFunctionRefs[warningKey] = true;
15225 warning$1(false, 'Function components cannot be given refs. ' + 'Attempts to access this ref will fail. ' + 'Did you mean to use React.forwardRef()?%s', info);
15226 }
15227 }
15228
15229 if (typeof Component.getDerivedStateFromProps === 'function') {
15230 var componentName = getComponentName(Component) || 'Unknown';
15231
15232 if (!didWarnAboutGetDerivedStateOnFunctionComponent[componentName]) {
15233 warningWithoutStack$1(false, '%s: Function components do not support getDerivedStateFromProps.', componentName);
15234 didWarnAboutGetDerivedStateOnFunctionComponent[componentName] = true;
15235 }
15236 }
15237
15238 if (typeof Component.contextType === 'object' && Component.contextType !== null) {
15239 var _componentName = getComponentName(Component) || 'Unknown';
15240
15241 if (!didWarnAboutContextTypeOnFunctionComponent[_componentName]) {
15242 warningWithoutStack$1(false, '%s: Function components do not support contextType.', _componentName);
15243 didWarnAboutContextTypeOnFunctionComponent[_componentName] = true;
15244 }
15245 }
15246}
15247
15248function updateSuspenseComponent(current$$1, workInProgress, renderExpirationTime) {
15249 var mode = workInProgress.mode;
15250 var nextProps = workInProgress.pendingProps;
15251
15252 // We should attempt to render the primary children unless this boundary
15253 // already suspended during this render (`alreadyCaptured` is true).
15254 var nextState = workInProgress.memoizedState;
15255
15256 var nextDidTimeout = void 0;
15257 if ((workInProgress.effectTag & DidCapture) === NoEffect) {
15258 // This is the first attempt.
15259 nextState = null;
15260 nextDidTimeout = false;
15261 } else {
15262 // Something in this boundary's subtree already suspended. Switch to
15263 // rendering the fallback children.
15264 nextState = {
15265 timedOutAt: nextState !== null ? nextState.timedOutAt : NoWork
15266 };
15267 nextDidTimeout = true;
15268 workInProgress.effectTag &= ~DidCapture;
15269 }
15270
15271 // This next part is a bit confusing. If the children timeout, we switch to
15272 // showing the fallback children in place of the "primary" children.
15273 // However, we don't want to delete the primary children because then their
15274 // state will be lost (both the React state and the host state, e.g.
15275 // uncontrolled form inputs). Instead we keep them mounted and hide them.
15276 // Both the fallback children AND the primary children are rendered at the
15277 // same time. Once the primary children are un-suspended, we can delete
15278 // the fallback children — don't need to preserve their state.
15279 //
15280 // The two sets of children are siblings in the host environment, but
15281 // semantically, for purposes of reconciliation, they are two separate sets.
15282 // So we store them using two fragment fibers.
15283 //
15284 // However, we want to avoid allocating extra fibers for every placeholder.
15285 // They're only necessary when the children time out, because that's the
15286 // only time when both sets are mounted.
15287 //
15288 // So, the extra fragment fibers are only used if the children time out.
15289 // Otherwise, we render the primary children directly. This requires some
15290 // custom reconciliation logic to preserve the state of the primary
15291 // children. It's essentially a very basic form of re-parenting.
15292
15293 // `child` points to the child fiber. In the normal case, this is the first
15294 // fiber of the primary children set. In the timed-out case, it's a
15295 // a fragment fiber containing the primary children.
15296 var child = void 0;
15297 // `next` points to the next fiber React should render. In the normal case,
15298 // it's the same as `child`: the first fiber of the primary children set.
15299 // In the timed-out case, it's a fragment fiber containing the *fallback*
15300 // children -- we skip over the primary children entirely.
15301 var next = void 0;
15302 if (current$$1 === null) {
15303 if (enableSuspenseServerRenderer) {
15304 // If we're currently hydrating, try to hydrate this boundary.
15305 // But only if this has a fallback.
15306 if (nextProps.fallback !== undefined) {
15307 tryToClaimNextHydratableInstance(workInProgress);
15308 // This could've changed the tag if this was a dehydrated suspense component.
15309 if (workInProgress.tag === DehydratedSuspenseComponent) {
15310 return updateDehydratedSuspenseComponent(null, workInProgress, renderExpirationTime);
15311 }
15312 }
15313 }
15314
15315 // This is the initial mount. This branch is pretty simple because there's
15316 // no previous state that needs to be preserved.
15317 if (nextDidTimeout) {
15318 // Mount separate fragments for primary and fallback children.
15319 var nextFallbackChildren = nextProps.fallback;
15320 var primaryChildFragment = createFiberFromFragment(null, mode, NoWork, null);
15321
15322 if ((workInProgress.mode & ConcurrentMode) === NoContext) {
15323 // Outside of concurrent mode, we commit the effects from the
15324 var progressedState = workInProgress.memoizedState;
15325 var progressedPrimaryChild = progressedState !== null ? workInProgress.child.child : workInProgress.child;
15326 primaryChildFragment.child = progressedPrimaryChild;
15327 }
15328
15329 var fallbackChildFragment = createFiberFromFragment(nextFallbackChildren, mode, renderExpirationTime, null);
15330 primaryChildFragment.sibling = fallbackChildFragment;
15331 child = primaryChildFragment;
15332 // Skip the primary children, and continue working on the
15333 // fallback children.
15334 next = fallbackChildFragment;
15335 child.return = next.return = workInProgress;
15336 } else {
15337 // Mount the primary children without an intermediate fragment fiber.
15338 var nextPrimaryChildren = nextProps.children;
15339 child = next = mountChildFibers(workInProgress, null, nextPrimaryChildren, renderExpirationTime);
15340 }
15341 } else {
15342 // This is an update. This branch is more complicated because we need to
15343 // ensure the state of the primary children is preserved.
15344 var prevState = current$$1.memoizedState;
15345 var prevDidTimeout = prevState !== null;
15346 if (prevDidTimeout) {
15347 // The current tree already timed out. That means each child set is
15348 var currentPrimaryChildFragment = current$$1.child;
15349 var currentFallbackChildFragment = currentPrimaryChildFragment.sibling;
15350 if (nextDidTimeout) {
15351 // Still timed out. Reuse the current primary children by cloning
15352 // its fragment. We're going to skip over these entirely.
15353 var _nextFallbackChildren = nextProps.fallback;
15354 var _primaryChildFragment = createWorkInProgress(currentPrimaryChildFragment, currentPrimaryChildFragment.pendingProps, NoWork);
15355
15356 if ((workInProgress.mode & ConcurrentMode) === NoContext) {
15357 // Outside of concurrent mode, we commit the effects from the
15358 var _progressedState = workInProgress.memoizedState;
15359 var _progressedPrimaryChild = _progressedState !== null ? workInProgress.child.child : workInProgress.child;
15360 if (_progressedPrimaryChild !== currentPrimaryChildFragment.child) {
15361 _primaryChildFragment.child = _progressedPrimaryChild;
15362 }
15363 }
15364
15365 // Because primaryChildFragment is a new fiber that we're inserting as the
15366 // parent of a new tree, we need to set its treeBaseDuration.
15367 if (enableProfilerTimer && workInProgress.mode & ProfileMode) {
15368 // treeBaseDuration is the sum of all the child tree base durations.
15369 var treeBaseDuration = 0;
15370 var hiddenChild = _primaryChildFragment.child;
15371 while (hiddenChild !== null) {
15372 treeBaseDuration += hiddenChild.treeBaseDuration;
15373 hiddenChild = hiddenChild.sibling;
15374 }
15375 _primaryChildFragment.treeBaseDuration = treeBaseDuration;
15376 }
15377
15378 // Clone the fallback child fragment, too. These we'll continue
15379 // working on.
15380 var _fallbackChildFragment = _primaryChildFragment.sibling = createWorkInProgress(currentFallbackChildFragment, _nextFallbackChildren, currentFallbackChildFragment.expirationTime);
15381 child = _primaryChildFragment;
15382 _primaryChildFragment.childExpirationTime = NoWork;
15383 // Skip the primary children, and continue working on the
15384 // fallback children.
15385 next = _fallbackChildFragment;
15386 child.return = next.return = workInProgress;
15387 } else {
15388 // No longer suspended. Switch back to showing the primary children,
15389 // and remove the intermediate fragment fiber.
15390 var _nextPrimaryChildren = nextProps.children;
15391 var currentPrimaryChild = currentPrimaryChildFragment.child;
15392 var primaryChild = reconcileChildFibers(workInProgress, currentPrimaryChild, _nextPrimaryChildren, renderExpirationTime);
15393
15394 // If this render doesn't suspend, we need to delete the fallback
15395 // children. Wait until the complete phase, after we've confirmed the
15396 // fallback is no longer needed.
15397 // TODO: Would it be better to store the fallback fragment on
15398 // the stateNode?
15399
15400 // Continue rendering the children, like we normally do.
15401 child = next = primaryChild;
15402 }
15403 } else {
15404 // The current tree has not already timed out. That means the primary
15405 // children are not wrapped in a fragment fiber.
15406 var _currentPrimaryChild = current$$1.child;
15407 if (nextDidTimeout) {
15408 // Timed out. Wrap the children in a fragment fiber to keep them
15409 // separate from the fallback children.
15410 var _nextFallbackChildren2 = nextProps.fallback;
15411 var _primaryChildFragment2 = createFiberFromFragment(
15412 // It shouldn't matter what the pending props are because we aren't
15413 // going to render this fragment.
15414 null, mode, NoWork, null);
15415 _primaryChildFragment2.child = _currentPrimaryChild;
15416
15417 // Even though we're creating a new fiber, there are no new children,
15418 // because we're reusing an already mounted tree. So we don't need to
15419 // schedule a placement.
15420 // primaryChildFragment.effectTag |= Placement;
15421
15422 if ((workInProgress.mode & ConcurrentMode) === NoContext) {
15423 // Outside of concurrent mode, we commit the effects from the
15424 var _progressedState2 = workInProgress.memoizedState;
15425 var _progressedPrimaryChild2 = _progressedState2 !== null ? workInProgress.child.child : workInProgress.child;
15426 _primaryChildFragment2.child = _progressedPrimaryChild2;
15427 }
15428
15429 // Because primaryChildFragment is a new fiber that we're inserting as the
15430 // parent of a new tree, we need to set its treeBaseDuration.
15431 if (enableProfilerTimer && workInProgress.mode & ProfileMode) {
15432 // treeBaseDuration is the sum of all the child tree base durations.
15433 var _treeBaseDuration = 0;
15434 var _hiddenChild = _primaryChildFragment2.child;
15435 while (_hiddenChild !== null) {
15436 _treeBaseDuration += _hiddenChild.treeBaseDuration;
15437 _hiddenChild = _hiddenChild.sibling;
15438 }
15439 _primaryChildFragment2.treeBaseDuration = _treeBaseDuration;
15440 }
15441
15442 // Create a fragment from the fallback children, too.
15443 var _fallbackChildFragment2 = _primaryChildFragment2.sibling = createFiberFromFragment(_nextFallbackChildren2, mode, renderExpirationTime, null);
15444 _fallbackChildFragment2.effectTag |= Placement;
15445 child = _primaryChildFragment2;
15446 _primaryChildFragment2.childExpirationTime = NoWork;
15447 // Skip the primary children, and continue working on the
15448 // fallback children.
15449 next = _fallbackChildFragment2;
15450 child.return = next.return = workInProgress;
15451 } else {
15452 // Still haven't timed out. Continue rendering the children, like we
15453 // normally do.
15454 var _nextPrimaryChildren2 = nextProps.children;
15455 next = child = reconcileChildFibers(workInProgress, _currentPrimaryChild, _nextPrimaryChildren2, renderExpirationTime);
15456 }
15457 }
15458 workInProgress.stateNode = current$$1.stateNode;
15459 }
15460
15461 workInProgress.memoizedState = nextState;
15462 workInProgress.child = child;
15463 return next;
15464}
15465
15466function updateDehydratedSuspenseComponent(current$$1, workInProgress, renderExpirationTime) {
15467 if (current$$1 === null) {
15468 // During the first pass, we'll bail out and not drill into the children.
15469 // Instead, we'll leave the content in place and try to hydrate it later.
15470 workInProgress.expirationTime = Never;
15471 return null;
15472 }
15473 // We use childExpirationTime to indicate that a child might depend on context, so if
15474 // any context has changed, we need to treat is as if the input might have changed.
15475 var hasContextChanged$$1 = current$$1.childExpirationTime >= renderExpirationTime;
15476 if (didReceiveUpdate || hasContextChanged$$1) {
15477 // This boundary has changed since the first render. This means that we are now unable to
15478 // hydrate it. We might still be able to hydrate it using an earlier expiration time but
15479 // during this render we can't. Instead, we're going to delete the whole subtree and
15480 // instead inject a new real Suspense boundary to take its place, which may render content
15481 // or fallback. The real Suspense boundary will suspend for a while so we have some time
15482 // to ensure it can produce real content, but all state and pending events will be lost.
15483
15484 // Detach from the current dehydrated boundary.
15485 current$$1.alternate = null;
15486 workInProgress.alternate = null;
15487
15488 // Insert a deletion in the effect list.
15489 var returnFiber = workInProgress.return;
15490 !(returnFiber !== null) ? invariant(false, 'Suspense boundaries are never on the root. This is probably a bug in React.') : void 0;
15491 var last = returnFiber.lastEffect;
15492 if (last !== null) {
15493 last.nextEffect = current$$1;
15494 returnFiber.lastEffect = current$$1;
15495 } else {
15496 returnFiber.firstEffect = returnFiber.lastEffect = current$$1;
15497 }
15498 current$$1.nextEffect = null;
15499 current$$1.effectTag = Deletion;
15500
15501 // Upgrade this work in progress to a real Suspense component.
15502 workInProgress.tag = SuspenseComponent;
15503 workInProgress.stateNode = null;
15504 workInProgress.memoizedState = null;
15505 // This is now an insertion.
15506 workInProgress.effectTag |= Placement;
15507 // Retry as a real Suspense component.
15508 return updateSuspenseComponent(null, workInProgress, renderExpirationTime);
15509 }
15510 if ((workInProgress.effectTag & DidCapture) === NoEffect) {
15511 // This is the first attempt.
15512 reenterHydrationStateFromDehydratedSuspenseInstance(workInProgress);
15513 var nextProps = workInProgress.pendingProps;
15514 var nextChildren = nextProps.children;
15515 workInProgress.child = mountChildFibers(workInProgress, null, nextChildren, renderExpirationTime);
15516 return workInProgress.child;
15517 } else {
15518 // Something suspended. Leave the existing children in place.
15519 // TODO: In non-concurrent mode, should we commit the nodes we have hydrated so far?
15520 workInProgress.child = null;
15521 return null;
15522 }
15523}
15524
15525function updatePortalComponent(current$$1, workInProgress, renderExpirationTime) {
15526 pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);
15527 var nextChildren = workInProgress.pendingProps;
15528 if (current$$1 === null) {
15529 // Portals are special because we don't append the children during mount
15530 // but at commit. Therefore we need to track insertions which the normal
15531 // flow doesn't do during mount. This doesn't happen at the root because
15532 // the root always starts with a "current" with a null child.
15533 // TODO: Consider unifying this with how the root works.
15534 workInProgress.child = reconcileChildFibers(workInProgress, null, nextChildren, renderExpirationTime);
15535 } else {
15536 reconcileChildren(current$$1, workInProgress, nextChildren, renderExpirationTime);
15537 }
15538 return workInProgress.child;
15539}
15540
15541function updateContextProvider(current$$1, workInProgress, renderExpirationTime) {
15542 var providerType = workInProgress.type;
15543 var context = providerType._context;
15544
15545 var newProps = workInProgress.pendingProps;
15546 var oldProps = workInProgress.memoizedProps;
15547
15548 var newValue = newProps.value;
15549
15550 {
15551 var providerPropTypes = workInProgress.type.propTypes;
15552
15553 if (providerPropTypes) {
15554 checkPropTypes_1(providerPropTypes, newProps, 'prop', 'Context.Provider', getCurrentFiberStackInDev);
15555 }
15556 }
15557
15558 pushProvider(workInProgress, newValue);
15559
15560 if (oldProps !== null) {
15561 var oldValue = oldProps.value;
15562 var changedBits = calculateChangedBits(context, newValue, oldValue);
15563 if (changedBits === 0) {
15564 // No change. Bailout early if children are the same.
15565 if (oldProps.children === newProps.children && !hasContextChanged()) {
15566 return bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime);
15567 }
15568 } else {
15569 // The context value changed. Search for matching consumers and schedule
15570 // them to update.
15571 propagateContextChange(workInProgress, context, changedBits, renderExpirationTime);
15572 }
15573 }
15574
15575 var newChildren = newProps.children;
15576 reconcileChildren(current$$1, workInProgress, newChildren, renderExpirationTime);
15577 return workInProgress.child;
15578}
15579
15580var hasWarnedAboutUsingContextAsConsumer = false;
15581
15582function updateContextConsumer(current$$1, workInProgress, renderExpirationTime) {
15583 var context = workInProgress.type;
15584 // The logic below for Context differs depending on PROD or DEV mode. In
15585 // DEV mode, we create a separate object for Context.Consumer that acts
15586 // like a proxy to Context. This proxy object adds unnecessary code in PROD
15587 // so we use the old behaviour (Context.Consumer references Context) to
15588 // reduce size and overhead. The separate object references context via
15589 // a property called "_context", which also gives us the ability to check
15590 // in DEV mode if this property exists or not and warn if it does not.
15591 {
15592 if (context._context === undefined) {
15593 // This may be because it's a Context (rather than a Consumer).
15594 // Or it may be because it's older React where they're the same thing.
15595 // We only want to warn if we're sure it's a new React.
15596 if (context !== context.Consumer) {
15597 if (!hasWarnedAboutUsingContextAsConsumer) {
15598 hasWarnedAboutUsingContextAsConsumer = true;
15599 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?');
15600 }
15601 }
15602 } else {
15603 context = context._context;
15604 }
15605 }
15606 var newProps = workInProgress.pendingProps;
15607 var render = newProps.children;
15608
15609 {
15610 !(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;
15611 }
15612
15613 prepareToReadContext(workInProgress, renderExpirationTime);
15614 var newValue = readContext(context, newProps.unstable_observedBits);
15615 var newChildren = void 0;
15616 {
15617 ReactCurrentOwner$3.current = workInProgress;
15618 setCurrentPhase('render');
15619 newChildren = render(newValue);
15620 setCurrentPhase(null);
15621 }
15622
15623 // React DevTools reads this flag.
15624 workInProgress.effectTag |= PerformedWork;
15625 reconcileChildren(current$$1, workInProgress, newChildren, renderExpirationTime);
15626 return workInProgress.child;
15627}
15628
15629function markWorkInProgressReceivedUpdate() {
15630 didReceiveUpdate = true;
15631}
15632
15633function bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime) {
15634 cancelWorkTimer(workInProgress);
15635
15636 if (current$$1 !== null) {
15637 // Reuse previous context list
15638 workInProgress.contextDependencies = current$$1.contextDependencies;
15639 }
15640
15641 if (enableProfilerTimer) {
15642 // Don't update "base" render times for bailouts.
15643 stopProfilerTimerIfRunning(workInProgress);
15644 }
15645
15646 // Check if the children have any pending work.
15647 var childExpirationTime = workInProgress.childExpirationTime;
15648 if (childExpirationTime < renderExpirationTime) {
15649 // The children don't have any work either. We can skip them.
15650 // TODO: Once we add back resuming, we should check if the children are
15651 // a work-in-progress set. If so, we need to transfer their effects.
15652 return null;
15653 } else {
15654 // This fiber doesn't have work, but its subtree does. Clone the child
15655 // fibers and continue.
15656 cloneChildFibers(current$$1, workInProgress);
15657 return workInProgress.child;
15658 }
15659}
15660
15661function beginWork(current$$1, workInProgress, renderExpirationTime) {
15662 var updateExpirationTime = workInProgress.expirationTime;
15663
15664 if (current$$1 !== null) {
15665 var oldProps = current$$1.memoizedProps;
15666 var newProps = workInProgress.pendingProps;
15667
15668 if (oldProps !== newProps || hasContextChanged()) {
15669 // If props or context changed, mark the fiber as having performed work.
15670 // This may be unset if the props are determined to be equal later (memo).
15671 didReceiveUpdate = true;
15672 } else if (updateExpirationTime < renderExpirationTime) {
15673 didReceiveUpdate = false;
15674 // This fiber does not have any pending work. Bailout without entering
15675 // the begin phase. There's still some bookkeeping we that needs to be done
15676 // in this optimized path, mostly pushing stuff onto the stack.
15677 switch (workInProgress.tag) {
15678 case HostRoot:
15679 pushHostRootContext(workInProgress);
15680 resetHydrationState();
15681 break;
15682 case HostComponent:
15683 pushHostContext(workInProgress);
15684 break;
15685 case ClassComponent:
15686 {
15687 var Component = workInProgress.type;
15688 if (isContextProvider(Component)) {
15689 pushContextProvider(workInProgress);
15690 }
15691 break;
15692 }
15693 case HostPortal:
15694 pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);
15695 break;
15696 case ContextProvider:
15697 {
15698 var newValue = workInProgress.memoizedProps.value;
15699 pushProvider(workInProgress, newValue);
15700 break;
15701 }
15702 case Profiler:
15703 if (enableProfilerTimer) {
15704 workInProgress.effectTag |= Update;
15705 }
15706 break;
15707 case SuspenseComponent:
15708 {
15709 var state = workInProgress.memoizedState;
15710 var didTimeout = state !== null;
15711 if (didTimeout) {
15712 // If this boundary is currently timed out, we need to decide
15713 // whether to retry the primary children, or to skip over it and
15714 // go straight to the fallback. Check the priority of the primary
15715 var primaryChildFragment = workInProgress.child;
15716 var primaryChildExpirationTime = primaryChildFragment.childExpirationTime;
15717 if (primaryChildExpirationTime !== NoWork && primaryChildExpirationTime >= renderExpirationTime) {
15718 // The primary children have pending work. Use the normal path
15719 // to attempt to render the primary children again.
15720 return updateSuspenseComponent(current$$1, workInProgress, renderExpirationTime);
15721 } else {
15722 // The primary children do not have pending work with sufficient
15723 // priority. Bailout.
15724 var child = bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime);
15725 if (child !== null) {
15726 // The fallback children have pending work. Skip over the
15727 // primary children and work on the fallback.
15728 return child.sibling;
15729 } else {
15730 return null;
15731 }
15732 }
15733 }
15734 break;
15735 }
15736 case DehydratedSuspenseComponent:
15737 {
15738 if (enableSuspenseServerRenderer) {
15739 // We know that this component will suspend again because if it has
15740 // been unsuspended it has committed as a regular Suspense component.
15741 // If it needs to be retried, it should have work scheduled on it.
15742 workInProgress.effectTag |= DidCapture;
15743 break;
15744 }
15745 }
15746 }
15747 return bailoutOnAlreadyFinishedWork(current$$1, workInProgress, renderExpirationTime);
15748 }
15749 } else {
15750 didReceiveUpdate = false;
15751 }
15752
15753 // Before entering the begin phase, clear the expiration time.
15754 workInProgress.expirationTime = NoWork;
15755
15756 switch (workInProgress.tag) {
15757 case IndeterminateComponent:
15758 {
15759 var elementType = workInProgress.elementType;
15760 return mountIndeterminateComponent(current$$1, workInProgress, elementType, renderExpirationTime);
15761 }
15762 case LazyComponent:
15763 {
15764 var _elementType = workInProgress.elementType;
15765 return mountLazyComponent(current$$1, workInProgress, _elementType, updateExpirationTime, renderExpirationTime);
15766 }
15767 case FunctionComponent:
15768 {
15769 var _Component = workInProgress.type;
15770 var unresolvedProps = workInProgress.pendingProps;
15771 var resolvedProps = workInProgress.elementType === _Component ? unresolvedProps : resolveDefaultProps(_Component, unresolvedProps);
15772 return updateFunctionComponent(current$$1, workInProgress, _Component, resolvedProps, renderExpirationTime);
15773 }
15774 case ClassComponent:
15775 {
15776 var _Component2 = workInProgress.type;
15777 var _unresolvedProps = workInProgress.pendingProps;
15778 var _resolvedProps = workInProgress.elementType === _Component2 ? _unresolvedProps : resolveDefaultProps(_Component2, _unresolvedProps);
15779 return updateClassComponent(current$$1, workInProgress, _Component2, _resolvedProps, renderExpirationTime);
15780 }
15781 case HostRoot:
15782 return updateHostRoot(current$$1, workInProgress, renderExpirationTime);
15783 case HostComponent:
15784 return updateHostComponent(current$$1, workInProgress, renderExpirationTime);
15785 case HostText:
15786 return updateHostText(current$$1, workInProgress);
15787 case SuspenseComponent:
15788 return updateSuspenseComponent(current$$1, workInProgress, renderExpirationTime);
15789 case HostPortal:
15790 return updatePortalComponent(current$$1, workInProgress, renderExpirationTime);
15791 case ForwardRef:
15792 {
15793 var type = workInProgress.type;
15794 var _unresolvedProps2 = workInProgress.pendingProps;
15795 var _resolvedProps2 = workInProgress.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
15796 return updateForwardRef(current$$1, workInProgress, type, _resolvedProps2, renderExpirationTime);
15797 }
15798 case Fragment:
15799 return updateFragment(current$$1, workInProgress, renderExpirationTime);
15800 case Mode:
15801 return updateMode(current$$1, workInProgress, renderExpirationTime);
15802 case Profiler:
15803 return updateProfiler(current$$1, workInProgress, renderExpirationTime);
15804 case ContextProvider:
15805 return updateContextProvider(current$$1, workInProgress, renderExpirationTime);
15806 case ContextConsumer:
15807 return updateContextConsumer(current$$1, workInProgress, renderExpirationTime);
15808 case MemoComponent:
15809 {
15810 var _type2 = workInProgress.type;
15811 var _unresolvedProps3 = workInProgress.pendingProps;
15812 // Resolve outer props first, then resolve inner props.
15813 var _resolvedProps3 = resolveDefaultProps(_type2, _unresolvedProps3);
15814 {
15815 if (workInProgress.type !== workInProgress.elementType) {
15816 var outerPropTypes = _type2.propTypes;
15817 if (outerPropTypes) {
15818 checkPropTypes_1(outerPropTypes, _resolvedProps3, // Resolved for outer only
15819 'prop', getComponentName(_type2), getCurrentFiberStackInDev);
15820 }
15821 }
15822 }
15823 _resolvedProps3 = resolveDefaultProps(_type2.type, _resolvedProps3);
15824 return updateMemoComponent(current$$1, workInProgress, _type2, _resolvedProps3, updateExpirationTime, renderExpirationTime);
15825 }
15826 case SimpleMemoComponent:
15827 {
15828 return updateSimpleMemoComponent(current$$1, workInProgress, workInProgress.type, workInProgress.pendingProps, updateExpirationTime, renderExpirationTime);
15829 }
15830 case IncompleteClassComponent:
15831 {
15832 var _Component3 = workInProgress.type;
15833 var _unresolvedProps4 = workInProgress.pendingProps;
15834 var _resolvedProps4 = workInProgress.elementType === _Component3 ? _unresolvedProps4 : resolveDefaultProps(_Component3, _unresolvedProps4);
15835 return mountIncompleteClassComponent(current$$1, workInProgress, _Component3, _resolvedProps4, renderExpirationTime);
15836 }
15837 case DehydratedSuspenseComponent:
15838 {
15839 if (enableSuspenseServerRenderer) {
15840 return updateDehydratedSuspenseComponent(current$$1, workInProgress, renderExpirationTime);
15841 }
15842 break;
15843 }
15844 }
15845 invariant(false, 'Unknown unit of work tag. This error is likely caused by a bug in React. Please file an issue.');
15846}
15847
15848var valueCursor = createCursor(null);
15849
15850var rendererSigil = void 0;
15851{
15852 // Use this to detect multiple renderers using the same context
15853 rendererSigil = {};
15854}
15855
15856var currentlyRenderingFiber = null;
15857var lastContextDependency = null;
15858var lastContextWithAllBitsObserved = null;
15859
15860var isDisallowedContextReadInDEV = false;
15861
15862function resetContextDependences() {
15863 // This is called right before React yields execution, to ensure `readContext`
15864 // cannot be called outside the render phase.
15865 currentlyRenderingFiber = null;
15866 lastContextDependency = null;
15867 lastContextWithAllBitsObserved = null;
15868 {
15869 isDisallowedContextReadInDEV = false;
15870 }
15871}
15872
15873function enterDisallowedContextReadInDEV() {
15874 {
15875 isDisallowedContextReadInDEV = true;
15876 }
15877}
15878
15879function exitDisallowedContextReadInDEV() {
15880 {
15881 isDisallowedContextReadInDEV = false;
15882 }
15883}
15884
15885function pushProvider(providerFiber, nextValue) {
15886 var context = providerFiber.type._context;
15887
15888 if (isPrimaryRenderer) {
15889 push(valueCursor, context._currentValue, providerFiber);
15890
15891 context._currentValue = nextValue;
15892 {
15893 !(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;
15894 context._currentRenderer = rendererSigil;
15895 }
15896 } else {
15897 push(valueCursor, context._currentValue2, providerFiber);
15898
15899 context._currentValue2 = nextValue;
15900 {
15901 !(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;
15902 context._currentRenderer2 = rendererSigil;
15903 }
15904 }
15905}
15906
15907function popProvider(providerFiber) {
15908 var currentValue = valueCursor.current;
15909
15910 pop(valueCursor, providerFiber);
15911
15912 var context = providerFiber.type._context;
15913 if (isPrimaryRenderer) {
15914 context._currentValue = currentValue;
15915 } else {
15916 context._currentValue2 = currentValue;
15917 }
15918}
15919
15920function calculateChangedBits(context, newValue, oldValue) {
15921 if (is(oldValue, newValue)) {
15922 // No change
15923 return 0;
15924 } else {
15925 var changedBits = typeof context._calculateChangedBits === 'function' ? context._calculateChangedBits(oldValue, newValue) : maxSigned31BitInt;
15926
15927 {
15928 !((changedBits & maxSigned31BitInt) === changedBits) ? warning$1(false, 'calculateChangedBits: Expected the return value to be a ' + '31-bit integer. Instead received: %s', changedBits) : void 0;
15929 }
15930 return changedBits | 0;
15931 }
15932}
15933
15934function scheduleWorkOnParentPath(parent, renderExpirationTime) {
15935 // Update the child expiration time of all the ancestors, including
15936 // the alternates.
15937 var node = parent;
15938 while (node !== null) {
15939 var alternate = node.alternate;
15940 if (node.childExpirationTime < renderExpirationTime) {
15941 node.childExpirationTime = renderExpirationTime;
15942 if (alternate !== null && alternate.childExpirationTime < renderExpirationTime) {
15943 alternate.childExpirationTime = renderExpirationTime;
15944 }
15945 } else if (alternate !== null && alternate.childExpirationTime < renderExpirationTime) {
15946 alternate.childExpirationTime = renderExpirationTime;
15947 } else {
15948 // Neither alternate was updated, which means the rest of the
15949 // ancestor path already has sufficient priority.
15950 break;
15951 }
15952 node = node.return;
15953 }
15954}
15955
15956function propagateContextChange(workInProgress, context, changedBits, renderExpirationTime) {
15957 var fiber = workInProgress.child;
15958 if (fiber !== null) {
15959 // Set the return pointer of the child to the work-in-progress fiber.
15960 fiber.return = workInProgress;
15961 }
15962 while (fiber !== null) {
15963 var nextFiber = void 0;
15964
15965 // Visit this fiber.
15966 var list = fiber.contextDependencies;
15967 if (list !== null) {
15968 nextFiber = fiber.child;
15969
15970 var dependency = list.first;
15971 while (dependency !== null) {
15972 // Check if the context matches.
15973 if (dependency.context === context && (dependency.observedBits & changedBits) !== 0) {
15974 // Match! Schedule an update on this fiber.
15975
15976 if (fiber.tag === ClassComponent) {
15977 // Schedule a force update on the work-in-progress.
15978 var update = createUpdate(renderExpirationTime);
15979 update.tag = ForceUpdate;
15980 // TODO: Because we don't have a work-in-progress, this will add the
15981 // update to the current fiber, too, which means it will persist even if
15982 // this render is thrown away. Since it's a race condition, not sure it's
15983 // worth fixing.
15984 enqueueUpdate(fiber, update);
15985 }
15986
15987 if (fiber.expirationTime < renderExpirationTime) {
15988 fiber.expirationTime = renderExpirationTime;
15989 }
15990 var alternate = fiber.alternate;
15991 if (alternate !== null && alternate.expirationTime < renderExpirationTime) {
15992 alternate.expirationTime = renderExpirationTime;
15993 }
15994
15995 scheduleWorkOnParentPath(fiber.return, renderExpirationTime);
15996
15997 // Mark the expiration time on the list, too.
15998 if (list.expirationTime < renderExpirationTime) {
15999 list.expirationTime = renderExpirationTime;
16000 }
16001
16002 // Since we already found a match, we can stop traversing the
16003 // dependency list.
16004 break;
16005 }
16006 dependency = dependency.next;
16007 }
16008 } else if (fiber.tag === ContextProvider) {
16009 // Don't scan deeper if this is a matching provider
16010 nextFiber = fiber.type === workInProgress.type ? null : fiber.child;
16011 } else if (enableSuspenseServerRenderer && fiber.tag === DehydratedSuspenseComponent) {
16012 // If a dehydrated suspense component is in this subtree, we don't know
16013 // if it will have any context consumers in it. The best we can do is
16014 // mark it as having updates on its children.
16015 if (fiber.expirationTime < renderExpirationTime) {
16016 fiber.expirationTime = renderExpirationTime;
16017 }
16018 var _alternate = fiber.alternate;
16019 if (_alternate !== null && _alternate.expirationTime < renderExpirationTime) {
16020 _alternate.expirationTime = renderExpirationTime;
16021 }
16022 // This is intentionally passing this fiber as the parent
16023 // because we want to schedule this fiber as having work
16024 // on its children. We'll use the childExpirationTime on
16025 // this fiber to indicate that a context has changed.
16026 scheduleWorkOnParentPath(fiber, renderExpirationTime);
16027 nextFiber = fiber.sibling;
16028 } else {
16029 // Traverse down.
16030 nextFiber = fiber.child;
16031 }
16032
16033 if (nextFiber !== null) {
16034 // Set the return pointer of the child to the work-in-progress fiber.
16035 nextFiber.return = fiber;
16036 } else {
16037 // No child. Traverse to next sibling.
16038 nextFiber = fiber;
16039 while (nextFiber !== null) {
16040 if (nextFiber === workInProgress) {
16041 // We're back to the root of this subtree. Exit.
16042 nextFiber = null;
16043 break;
16044 }
16045 var sibling = nextFiber.sibling;
16046 if (sibling !== null) {
16047 // Set the return pointer of the sibling to the work-in-progress fiber.
16048 sibling.return = nextFiber.return;
16049 nextFiber = sibling;
16050 break;
16051 }
16052 // No more siblings. Traverse up.
16053 nextFiber = nextFiber.return;
16054 }
16055 }
16056 fiber = nextFiber;
16057 }
16058}
16059
16060function prepareToReadContext(workInProgress, renderExpirationTime) {
16061 currentlyRenderingFiber = workInProgress;
16062 lastContextDependency = null;
16063 lastContextWithAllBitsObserved = null;
16064
16065 var currentDependencies = workInProgress.contextDependencies;
16066 if (currentDependencies !== null && currentDependencies.expirationTime >= renderExpirationTime) {
16067 // Context list has a pending update. Mark that this fiber performed work.
16068 markWorkInProgressReceivedUpdate();
16069 }
16070
16071 // Reset the work-in-progress list
16072 workInProgress.contextDependencies = null;
16073}
16074
16075function readContext(context, observedBits) {
16076 {
16077 // This warning would fire if you read context inside a Hook like useMemo.
16078 // Unlike the class check below, it's not enforced in production for perf.
16079 !!isDisallowedContextReadInDEV ? warning$1(false, 'Context can only be read while React is rendering. ' + 'In classes, you can read it in the render method or getDerivedStateFromProps. ' + 'In function components, you can read it directly in the function body, but not ' + 'inside Hooks like useReducer() or useMemo().') : void 0;
16080 }
16081
16082 if (lastContextWithAllBitsObserved === context) {
16083 // Nothing to do. We already observe everything in this context.
16084 } else if (observedBits === false || observedBits === 0) {
16085 // Do not observe any updates.
16086 } else {
16087 var resolvedObservedBits = void 0; // Avoid deopting on observable arguments or heterogeneous types.
16088 if (typeof observedBits !== 'number' || observedBits === maxSigned31BitInt) {
16089 // Observe all updates.
16090 lastContextWithAllBitsObserved = context;
16091 resolvedObservedBits = maxSigned31BitInt;
16092 } else {
16093 resolvedObservedBits = observedBits;
16094 }
16095
16096 var contextItem = {
16097 context: context,
16098 observedBits: resolvedObservedBits,
16099 next: null
16100 };
16101
16102 if (lastContextDependency === null) {
16103 !(currentlyRenderingFiber !== null) ? invariant(false, 'Context can only be read while React is rendering. In classes, you can read it in the render method or getDerivedStateFromProps. In function components, you can read it directly in the function body, but not inside Hooks like useReducer() or useMemo().') : void 0;
16104
16105 // This is the first dependency for this component. Create a new list.
16106 lastContextDependency = contextItem;
16107 currentlyRenderingFiber.contextDependencies = {
16108 first: contextItem,
16109 expirationTime: NoWork
16110 };
16111 } else {
16112 // Append a new context item.
16113 lastContextDependency = lastContextDependency.next = contextItem;
16114 }
16115 }
16116 return isPrimaryRenderer ? context._currentValue : context._currentValue2;
16117}
16118
16119// UpdateQueue is a linked list of prioritized updates.
16120//
16121// Like fibers, update queues come in pairs: a current queue, which represents
16122// the visible state of the screen, and a work-in-progress queue, which can be
16123// mutated and processed asynchronously before it is committed — a form of
16124// double buffering. If a work-in-progress render is discarded before finishing,
16125// we create a new work-in-progress by cloning the current queue.
16126//
16127// Both queues share a persistent, singly-linked list structure. To schedule an
16128// update, we append it to the end of both queues. Each queue maintains a
16129// pointer to first update in the persistent list that hasn't been processed.
16130// The work-in-progress pointer always has a position equal to or greater than
16131// the current queue, since we always work on that one. The current queue's
16132// pointer is only updated during the commit phase, when we swap in the
16133// work-in-progress.
16134//
16135// For example:
16136//
16137// Current pointer: A - B - C - D - E - F
16138// Work-in-progress pointer: D - E - F
16139// ^
16140// The work-in-progress queue has
16141// processed more updates than current.
16142//
16143// The reason we append to both queues is because otherwise we might drop
16144// updates without ever processing them. For example, if we only add updates to
16145// the work-in-progress queue, some updates could be lost whenever a work-in
16146// -progress render restarts by cloning from current. Similarly, if we only add
16147// updates to the current queue, the updates will be lost whenever an already
16148// in-progress queue commits and swaps with the current queue. However, by
16149// adding to both queues, we guarantee that the update will be part of the next
16150// work-in-progress. (And because the work-in-progress queue becomes the
16151// current queue once it commits, there's no danger of applying the same
16152// update twice.)
16153//
16154// Prioritization
16155// --------------
16156//
16157// Updates are not sorted by priority, but by insertion; new updates are always
16158// appended to the end of the list.
16159//
16160// The priority is still important, though. When processing the update queue
16161// during the render phase, only the updates with sufficient priority are
16162// included in the result. If we skip an update because it has insufficient
16163// priority, it remains in the queue to be processed later, during a lower
16164// priority render. Crucially, all updates subsequent to a skipped update also
16165// remain in the queue *regardless of their priority*. That means high priority
16166// updates are sometimes processed twice, at two separate priorities. We also
16167// keep track of a base state, that represents the state before the first
16168// update in the queue is applied.
16169//
16170// For example:
16171//
16172// Given a base state of '', and the following queue of updates
16173//
16174// A1 - B2 - C1 - D2
16175//
16176// where the number indicates the priority, and the update is applied to the
16177// previous state by appending a letter, React will process these updates as
16178// two separate renders, one per distinct priority level:
16179//
16180// First render, at priority 1:
16181// Base state: ''
16182// Updates: [A1, C1]
16183// Result state: 'AC'
16184//
16185// Second render, at priority 2:
16186// Base state: 'A' <- The base state does not include C1,
16187// because B2 was skipped.
16188// Updates: [B2, C1, D2] <- C1 was rebased on top of B2
16189// Result state: 'ABCD'
16190//
16191// Because we process updates in insertion order, and rebase high priority
16192// updates when preceding updates are skipped, the final result is deterministic
16193// regardless of priority. Intermediate state may vary according to system
16194// resources, but the final state is always the same.
16195
16196var UpdateState = 0;
16197var ReplaceState = 1;
16198var ForceUpdate = 2;
16199var CaptureUpdate = 3;
16200
16201// Global state that is reset at the beginning of calling `processUpdateQueue`.
16202// It should only be read right after calling `processUpdateQueue`, via
16203// `checkHasForceUpdateAfterProcessing`.
16204var hasForceUpdate = false;
16205
16206var didWarnUpdateInsideUpdate = void 0;
16207var currentlyProcessingQueue = void 0;
16208var resetCurrentlyProcessingQueue = void 0;
16209{
16210 didWarnUpdateInsideUpdate = false;
16211 currentlyProcessingQueue = null;
16212 resetCurrentlyProcessingQueue = function () {
16213 currentlyProcessingQueue = null;
16214 };
16215}
16216
16217function createUpdateQueue(baseState) {
16218 var queue = {
16219 baseState: baseState,
16220 firstUpdate: null,
16221 lastUpdate: null,
16222 firstCapturedUpdate: null,
16223 lastCapturedUpdate: null,
16224 firstEffect: null,
16225 lastEffect: null,
16226 firstCapturedEffect: null,
16227 lastCapturedEffect: null
16228 };
16229 return queue;
16230}
16231
16232function cloneUpdateQueue(currentQueue) {
16233 var queue = {
16234 baseState: currentQueue.baseState,
16235 firstUpdate: currentQueue.firstUpdate,
16236 lastUpdate: currentQueue.lastUpdate,
16237
16238 // TODO: With resuming, if we bail out and resuse the child tree, we should
16239 // keep these effects.
16240 firstCapturedUpdate: null,
16241 lastCapturedUpdate: null,
16242
16243 firstEffect: null,
16244 lastEffect: null,
16245
16246 firstCapturedEffect: null,
16247 lastCapturedEffect: null
16248 };
16249 return queue;
16250}
16251
16252function createUpdate(expirationTime) {
16253 return {
16254 expirationTime: expirationTime,
16255
16256 tag: UpdateState,
16257 payload: null,
16258 callback: null,
16259
16260 next: null,
16261 nextEffect: null
16262 };
16263}
16264
16265function appendUpdateToQueue(queue, update) {
16266 // Append the update to the end of the list.
16267 if (queue.lastUpdate === null) {
16268 // Queue is empty
16269 queue.firstUpdate = queue.lastUpdate = update;
16270 } else {
16271 queue.lastUpdate.next = update;
16272 queue.lastUpdate = update;
16273 }
16274}
16275
16276function enqueueUpdate(fiber, update) {
16277 // Update queues are created lazily.
16278 var alternate = fiber.alternate;
16279 var queue1 = void 0;
16280 var queue2 = void 0;
16281 if (alternate === null) {
16282 // There's only one fiber.
16283 queue1 = fiber.updateQueue;
16284 queue2 = null;
16285 if (queue1 === null) {
16286 queue1 = fiber.updateQueue = createUpdateQueue(fiber.memoizedState);
16287 }
16288 } else {
16289 // There are two owners.
16290 queue1 = fiber.updateQueue;
16291 queue2 = alternate.updateQueue;
16292 if (queue1 === null) {
16293 if (queue2 === null) {
16294 // Neither fiber has an update queue. Create new ones.
16295 queue1 = fiber.updateQueue = createUpdateQueue(fiber.memoizedState);
16296 queue2 = alternate.updateQueue = createUpdateQueue(alternate.memoizedState);
16297 } else {
16298 // Only one fiber has an update queue. Clone to create a new one.
16299 queue1 = fiber.updateQueue = cloneUpdateQueue(queue2);
16300 }
16301 } else {
16302 if (queue2 === null) {
16303 // Only one fiber has an update queue. Clone to create a new one.
16304 queue2 = alternate.updateQueue = cloneUpdateQueue(queue1);
16305 } else {
16306 // Both owners have an update queue.
16307 }
16308 }
16309 }
16310 if (queue2 === null || queue1 === queue2) {
16311 // There's only a single queue.
16312 appendUpdateToQueue(queue1, update);
16313 } else {
16314 // There are two queues. We need to append the update to both queues,
16315 // while accounting for the persistent structure of the list — we don't
16316 // want the same update to be added multiple times.
16317 if (queue1.lastUpdate === null || queue2.lastUpdate === null) {
16318 // One of the queues is not empty. We must add the update to both queues.
16319 appendUpdateToQueue(queue1, update);
16320 appendUpdateToQueue(queue2, update);
16321 } else {
16322 // Both queues are non-empty. The last update is the same in both lists,
16323 // because of structural sharing. So, only append to one of the lists.
16324 appendUpdateToQueue(queue1, update);
16325 // But we still need to update the `lastUpdate` pointer of queue2.
16326 queue2.lastUpdate = update;
16327 }
16328 }
16329
16330 {
16331 if (fiber.tag === ClassComponent && (currentlyProcessingQueue === queue1 || queue2 !== null && currentlyProcessingQueue === queue2) && !didWarnUpdateInsideUpdate) {
16332 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.');
16333 didWarnUpdateInsideUpdate = true;
16334 }
16335 }
16336}
16337
16338function enqueueCapturedUpdate(workInProgress, update) {
16339 // Captured updates go into a separate list, and only on the work-in-
16340 // progress queue.
16341 var workInProgressQueue = workInProgress.updateQueue;
16342 if (workInProgressQueue === null) {
16343 workInProgressQueue = workInProgress.updateQueue = createUpdateQueue(workInProgress.memoizedState);
16344 } else {
16345 // TODO: I put this here rather than createWorkInProgress so that we don't
16346 // clone the queue unnecessarily. There's probably a better way to
16347 // structure this.
16348 workInProgressQueue = ensureWorkInProgressQueueIsAClone(workInProgress, workInProgressQueue);
16349 }
16350
16351 // Append the update to the end of the list.
16352 if (workInProgressQueue.lastCapturedUpdate === null) {
16353 // This is the first render phase update
16354 workInProgressQueue.firstCapturedUpdate = workInProgressQueue.lastCapturedUpdate = update;
16355 } else {
16356 workInProgressQueue.lastCapturedUpdate.next = update;
16357 workInProgressQueue.lastCapturedUpdate = update;
16358 }
16359}
16360
16361function ensureWorkInProgressQueueIsAClone(workInProgress, queue) {
16362 var current = workInProgress.alternate;
16363 if (current !== null) {
16364 // If the work-in-progress queue is equal to the current queue,
16365 // we need to clone it first.
16366 if (queue === current.updateQueue) {
16367 queue = workInProgress.updateQueue = cloneUpdateQueue(queue);
16368 }
16369 }
16370 return queue;
16371}
16372
16373function getStateFromUpdate(workInProgress, queue, update, prevState, nextProps, instance) {
16374 switch (update.tag) {
16375 case ReplaceState:
16376 {
16377 var _payload = update.payload;
16378 if (typeof _payload === 'function') {
16379 // Updater function
16380 {
16381 enterDisallowedContextReadInDEV();
16382 if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & StrictMode) {
16383 _payload.call(instance, prevState, nextProps);
16384 }
16385 }
16386 var nextState = _payload.call(instance, prevState, nextProps);
16387 {
16388 exitDisallowedContextReadInDEV();
16389 }
16390 return nextState;
16391 }
16392 // State object
16393 return _payload;
16394 }
16395 case CaptureUpdate:
16396 {
16397 workInProgress.effectTag = workInProgress.effectTag & ~ShouldCapture | DidCapture;
16398 }
16399 // Intentional fallthrough
16400 case UpdateState:
16401 {
16402 var _payload2 = update.payload;
16403 var partialState = void 0;
16404 if (typeof _payload2 === 'function') {
16405 // Updater function
16406 {
16407 enterDisallowedContextReadInDEV();
16408 if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & StrictMode) {
16409 _payload2.call(instance, prevState, nextProps);
16410 }
16411 }
16412 partialState = _payload2.call(instance, prevState, nextProps);
16413 {
16414 exitDisallowedContextReadInDEV();
16415 }
16416 } else {
16417 // Partial state object
16418 partialState = _payload2;
16419 }
16420 if (partialState === null || partialState === undefined) {
16421 // Null and undefined are treated as no-ops.
16422 return prevState;
16423 }
16424 // Merge the partial state and the previous state.
16425 return _assign({}, prevState, partialState);
16426 }
16427 case ForceUpdate:
16428 {
16429 hasForceUpdate = true;
16430 return prevState;
16431 }
16432 }
16433 return prevState;
16434}
16435
16436function processUpdateQueue(workInProgress, queue, props, instance, renderExpirationTime) {
16437 hasForceUpdate = false;
16438
16439 queue = ensureWorkInProgressQueueIsAClone(workInProgress, queue);
16440
16441 {
16442 currentlyProcessingQueue = queue;
16443 }
16444
16445 // These values may change as we process the queue.
16446 var newBaseState = queue.baseState;
16447 var newFirstUpdate = null;
16448 var newExpirationTime = NoWork;
16449
16450 // Iterate through the list of updates to compute the result.
16451 var update = queue.firstUpdate;
16452 var resultState = newBaseState;
16453 while (update !== null) {
16454 var updateExpirationTime = update.expirationTime;
16455 if (updateExpirationTime < renderExpirationTime) {
16456 // This update does not have sufficient priority. Skip it.
16457 if (newFirstUpdate === null) {
16458 // This is the first skipped update. It will be the first update in
16459 // the new list.
16460 newFirstUpdate = update;
16461 // Since this is the first update that was skipped, the current result
16462 // is the new base state.
16463 newBaseState = resultState;
16464 }
16465 // Since this update will remain in the list, update the remaining
16466 // expiration time.
16467 if (newExpirationTime < updateExpirationTime) {
16468 newExpirationTime = updateExpirationTime;
16469 }
16470 } else {
16471 // This update does have sufficient priority. Process it and compute
16472 // a new result.
16473 resultState = getStateFromUpdate(workInProgress, queue, update, resultState, props, instance);
16474 var _callback = update.callback;
16475 if (_callback !== null) {
16476 workInProgress.effectTag |= Callback;
16477 // Set this to null, in case it was mutated during an aborted render.
16478 update.nextEffect = null;
16479 if (queue.lastEffect === null) {
16480 queue.firstEffect = queue.lastEffect = update;
16481 } else {
16482 queue.lastEffect.nextEffect = update;
16483 queue.lastEffect = update;
16484 }
16485 }
16486 }
16487 // Continue to the next update.
16488 update = update.next;
16489 }
16490
16491 // Separately, iterate though the list of captured updates.
16492 var newFirstCapturedUpdate = null;
16493 update = queue.firstCapturedUpdate;
16494 while (update !== null) {
16495 var _updateExpirationTime = update.expirationTime;
16496 if (_updateExpirationTime < renderExpirationTime) {
16497 // This update does not have sufficient priority. Skip it.
16498 if (newFirstCapturedUpdate === null) {
16499 // This is the first skipped captured update. It will be the first
16500 // update in the new list.
16501 newFirstCapturedUpdate = update;
16502 // If this is the first update that was skipped, the current result is
16503 // the new base state.
16504 if (newFirstUpdate === null) {
16505 newBaseState = resultState;
16506 }
16507 }
16508 // Since this update will remain in the list, update the remaining
16509 // expiration time.
16510 if (newExpirationTime < _updateExpirationTime) {
16511 newExpirationTime = _updateExpirationTime;
16512 }
16513 } else {
16514 // This update does have sufficient priority. Process it and compute
16515 // a new result.
16516 resultState = getStateFromUpdate(workInProgress, queue, update, resultState, props, instance);
16517 var _callback2 = update.callback;
16518 if (_callback2 !== null) {
16519 workInProgress.effectTag |= Callback;
16520 // Set this to null, in case it was mutated during an aborted render.
16521 update.nextEffect = null;
16522 if (queue.lastCapturedEffect === null) {
16523 queue.firstCapturedEffect = queue.lastCapturedEffect = update;
16524 } else {
16525 queue.lastCapturedEffect.nextEffect = update;
16526 queue.lastCapturedEffect = update;
16527 }
16528 }
16529 }
16530 update = update.next;
16531 }
16532
16533 if (newFirstUpdate === null) {
16534 queue.lastUpdate = null;
16535 }
16536 if (newFirstCapturedUpdate === null) {
16537 queue.lastCapturedUpdate = null;
16538 } else {
16539 workInProgress.effectTag |= Callback;
16540 }
16541 if (newFirstUpdate === null && newFirstCapturedUpdate === null) {
16542 // We processed every update, without skipping. That means the new base
16543 // state is the same as the result state.
16544 newBaseState = resultState;
16545 }
16546
16547 queue.baseState = newBaseState;
16548 queue.firstUpdate = newFirstUpdate;
16549 queue.firstCapturedUpdate = newFirstCapturedUpdate;
16550
16551 // Set the remaining expiration time to be whatever is remaining in the queue.
16552 // This should be fine because the only two other things that contribute to
16553 // expiration time are props and context. We're already in the middle of the
16554 // begin phase by the time we start processing the queue, so we've already
16555 // dealt with the props. Context in components that specify
16556 // shouldComponentUpdate is tricky; but we'll have to account for
16557 // that regardless.
16558 workInProgress.expirationTime = newExpirationTime;
16559 workInProgress.memoizedState = resultState;
16560
16561 {
16562 currentlyProcessingQueue = null;
16563 }
16564}
16565
16566function callCallback(callback, context) {
16567 !(typeof callback === 'function') ? invariant(false, 'Invalid argument passed as callback. Expected a function. Instead received: %s', callback) : void 0;
16568 callback.call(context);
16569}
16570
16571function resetHasForceUpdateBeforeProcessing() {
16572 hasForceUpdate = false;
16573}
16574
16575function checkHasForceUpdateAfterProcessing() {
16576 return hasForceUpdate;
16577}
16578
16579function commitUpdateQueue(finishedWork, finishedQueue, instance, renderExpirationTime) {
16580 // If the finished render included captured updates, and there are still
16581 // lower priority updates left over, we need to keep the captured updates
16582 // in the queue so that they are rebased and not dropped once we process the
16583 // queue again at the lower priority.
16584 if (finishedQueue.firstCapturedUpdate !== null) {
16585 // Join the captured update list to the end of the normal list.
16586 if (finishedQueue.lastUpdate !== null) {
16587 finishedQueue.lastUpdate.next = finishedQueue.firstCapturedUpdate;
16588 finishedQueue.lastUpdate = finishedQueue.lastCapturedUpdate;
16589 }
16590 // Clear the list of captured updates.
16591 finishedQueue.firstCapturedUpdate = finishedQueue.lastCapturedUpdate = null;
16592 }
16593
16594 // Commit the effects
16595 commitUpdateEffects(finishedQueue.firstEffect, instance);
16596 finishedQueue.firstEffect = finishedQueue.lastEffect = null;
16597
16598 commitUpdateEffects(finishedQueue.firstCapturedEffect, instance);
16599 finishedQueue.firstCapturedEffect = finishedQueue.lastCapturedEffect = null;
16600}
16601
16602function commitUpdateEffects(effect, instance) {
16603 while (effect !== null) {
16604 var _callback3 = effect.callback;
16605 if (_callback3 !== null) {
16606 effect.callback = null;
16607 callCallback(_callback3, instance);
16608 }
16609 effect = effect.nextEffect;
16610 }
16611}
16612
16613function createCapturedValue(value, source) {
16614 // If the value is an error, call this function immediately after it is thrown
16615 // so the stack is accurate.
16616 return {
16617 value: value,
16618 source: source,
16619 stack: getStackByFiberInDevAndProd(source)
16620 };
16621}
16622
16623function markUpdate(workInProgress) {
16624 // Tag the fiber with an update effect. This turns a Placement into
16625 // a PlacementAndUpdate.
16626 workInProgress.effectTag |= Update;
16627}
16628
16629function markRef$1(workInProgress) {
16630 workInProgress.effectTag |= Ref;
16631}
16632
16633var appendAllChildren = void 0;
16634var updateHostContainer = void 0;
16635var updateHostComponent$1 = void 0;
16636var updateHostText$1 = void 0;
16637if (supportsMutation) {
16638 // Mutation mode
16639
16640 appendAllChildren = function (parent, workInProgress, needsVisibilityToggle, isHidden) {
16641 // We only have the top Fiber that was created but we need recurse down its
16642 // children to find all the terminal nodes.
16643 var node = workInProgress.child;
16644 while (node !== null) {
16645 if (node.tag === HostComponent || node.tag === HostText) {
16646 appendInitialChild(parent, node.stateNode);
16647 } else if (node.tag === HostPortal) {
16648 // If we have a portal child, then we don't want to traverse
16649 // down its children. Instead, we'll get insertions from each child in
16650 // the portal directly.
16651 } else if (node.child !== null) {
16652 node.child.return = node;
16653 node = node.child;
16654 continue;
16655 }
16656 if (node === workInProgress) {
16657 return;
16658 }
16659 while (node.sibling === null) {
16660 if (node.return === null || node.return === workInProgress) {
16661 return;
16662 }
16663 node = node.return;
16664 }
16665 node.sibling.return = node.return;
16666 node = node.sibling;
16667 }
16668 };
16669
16670 updateHostContainer = function (workInProgress) {
16671 // Noop
16672 };
16673 updateHostComponent$1 = function (current, workInProgress, type, newProps, rootContainerInstance) {
16674 // If we have an alternate, that means this is an update and we need to
16675 // schedule a side-effect to do the updates.
16676 var oldProps = current.memoizedProps;
16677 if (oldProps === newProps) {
16678 // In mutation mode, this is sufficient for a bailout because
16679 // we won't touch this node even if children changed.
16680 return;
16681 }
16682
16683 // If we get updated because one of our children updated, we don't
16684 // have newProps so we'll have to reuse them.
16685 // TODO: Split the update API as separate for the props vs. children.
16686 // Even better would be if children weren't special cased at all tho.
16687 var instance = workInProgress.stateNode;
16688 var currentHostContext = getHostContext();
16689 // TODO: Experiencing an error where oldProps is null. Suggests a host
16690 // component is hitting the resume path. Figure out why. Possibly
16691 // related to `hidden`.
16692 var updatePayload = prepareUpdate(instance, type, oldProps, newProps, rootContainerInstance, currentHostContext);
16693 // TODO: Type this specific to this type of component.
16694 workInProgress.updateQueue = updatePayload;
16695 // If the update payload indicates that there is a change or if there
16696 // is a new ref we mark this as an update. All the work is done in commitWork.
16697 if (updatePayload) {
16698 markUpdate(workInProgress);
16699 }
16700 };
16701 updateHostText$1 = function (current, workInProgress, oldText, newText) {
16702 // If the text differs, mark it as an update. All the work in done in commitWork.
16703 if (oldText !== newText) {
16704 markUpdate(workInProgress);
16705 }
16706 };
16707} else if (supportsPersistence) {
16708 // Persistent host tree mode
16709
16710 appendAllChildren = function (parent, workInProgress, needsVisibilityToggle, isHidden) {
16711 // We only have the top Fiber that was created but we need recurse down its
16712 // children to find all the terminal nodes.
16713 var node = workInProgress.child;
16714 while (node !== null) {
16715 // eslint-disable-next-line no-labels
16716 branches: if (node.tag === HostComponent) {
16717 var instance = node.stateNode;
16718 if (needsVisibilityToggle) {
16719 var props = node.memoizedProps;
16720 var type = node.type;
16721 if (isHidden) {
16722 // This child is inside a timed out tree. Hide it.
16723 instance = cloneHiddenInstance(instance, type, props, node);
16724 } else {
16725 // This child was previously inside a timed out tree. If it was not
16726 // updated during this render, it may need to be unhidden. Clone
16727 // again to be sure.
16728 instance = cloneUnhiddenInstance(instance, type, props, node);
16729 }
16730 node.stateNode = instance;
16731 }
16732 appendInitialChild(parent, instance);
16733 } else if (node.tag === HostText) {
16734 var _instance = node.stateNode;
16735 if (needsVisibilityToggle) {
16736 var text = node.memoizedProps;
16737 var rootContainerInstance = getRootHostContainer();
16738 var currentHostContext = getHostContext();
16739 if (isHidden) {
16740 _instance = createHiddenTextInstance(text, rootContainerInstance, currentHostContext, workInProgress);
16741 } else {
16742 _instance = createTextInstance(text, rootContainerInstance, currentHostContext, workInProgress);
16743 }
16744 node.stateNode = _instance;
16745 }
16746 appendInitialChild(parent, _instance);
16747 } else if (node.tag === HostPortal) {
16748 // If we have a portal child, then we don't want to traverse
16749 // down its children. Instead, we'll get insertions from each child in
16750 // the portal directly.
16751 } else if (node.tag === SuspenseComponent) {
16752 var current = node.alternate;
16753 if (current !== null) {
16754 var oldState = current.memoizedState;
16755 var newState = node.memoizedState;
16756 var oldIsHidden = oldState !== null;
16757 var newIsHidden = newState !== null;
16758 if (oldIsHidden !== newIsHidden) {
16759 // The placeholder either just timed out or switched back to the normal
16760 // children after having previously timed out. Toggle the visibility of
16761 // the direct host children.
16762 var primaryChildParent = newIsHidden ? node.child : node;
16763 if (primaryChildParent !== null) {
16764 appendAllChildren(parent, primaryChildParent, true, newIsHidden);
16765 }
16766 // eslint-disable-next-line no-labels
16767 break branches;
16768 }
16769 }
16770 if (node.child !== null) {
16771 // Continue traversing like normal
16772 node.child.return = node;
16773 node = node.child;
16774 continue;
16775 }
16776 } else if (node.child !== null) {
16777 node.child.return = node;
16778 node = node.child;
16779 continue;
16780 }
16781 // $FlowFixMe This is correct but Flow is confused by the labeled break.
16782 node = node;
16783 if (node === workInProgress) {
16784 return;
16785 }
16786 while (node.sibling === null) {
16787 if (node.return === null || node.return === workInProgress) {
16788 return;
16789 }
16790 node = node.return;
16791 }
16792 node.sibling.return = node.return;
16793 node = node.sibling;
16794 }
16795 };
16796
16797 // An unfortunate fork of appendAllChildren because we have two different parent types.
16798 var appendAllChildrenToContainer = function (containerChildSet, workInProgress, needsVisibilityToggle, isHidden) {
16799 // We only have the top Fiber that was created but we need recurse down its
16800 // children to find all the terminal nodes.
16801 var node = workInProgress.child;
16802 while (node !== null) {
16803 // eslint-disable-next-line no-labels
16804 branches: if (node.tag === HostComponent) {
16805 var instance = node.stateNode;
16806 if (needsVisibilityToggle) {
16807 var props = node.memoizedProps;
16808 var type = node.type;
16809 if (isHidden) {
16810 // This child is inside a timed out tree. Hide it.
16811 instance = cloneHiddenInstance(instance, type, props, node);
16812 } else {
16813 // This child was previously inside a timed out tree. If it was not
16814 // updated during this render, it may need to be unhidden. Clone
16815 // again to be sure.
16816 instance = cloneUnhiddenInstance(instance, type, props, node);
16817 }
16818 node.stateNode = instance;
16819 }
16820 appendChildToContainerChildSet(containerChildSet, instance);
16821 } else if (node.tag === HostText) {
16822 var _instance2 = node.stateNode;
16823 if (needsVisibilityToggle) {
16824 var text = node.memoizedProps;
16825 var rootContainerInstance = getRootHostContainer();
16826 var currentHostContext = getHostContext();
16827 if (isHidden) {
16828 _instance2 = createHiddenTextInstance(text, rootContainerInstance, currentHostContext, workInProgress);
16829 } else {
16830 _instance2 = createTextInstance(text, rootContainerInstance, currentHostContext, workInProgress);
16831 }
16832 node.stateNode = _instance2;
16833 }
16834 appendChildToContainerChildSet(containerChildSet, _instance2);
16835 } else if (node.tag === HostPortal) {
16836 // If we have a portal child, then we don't want to traverse
16837 // down its children. Instead, we'll get insertions from each child in
16838 // the portal directly.
16839 } else if (node.tag === SuspenseComponent) {
16840 var current = node.alternate;
16841 if (current !== null) {
16842 var oldState = current.memoizedState;
16843 var newState = node.memoizedState;
16844 var oldIsHidden = oldState !== null;
16845 var newIsHidden = newState !== null;
16846 if (oldIsHidden !== newIsHidden) {
16847 // The placeholder either just timed out or switched back to the normal
16848 // children after having previously timed out. Toggle the visibility of
16849 // the direct host children.
16850 var primaryChildParent = newIsHidden ? node.child : node;
16851 if (primaryChildParent !== null) {
16852 appendAllChildrenToContainer(containerChildSet, primaryChildParent, true, newIsHidden);
16853 }
16854 // eslint-disable-next-line no-labels
16855 break branches;
16856 }
16857 }
16858 if (node.child !== null) {
16859 // Continue traversing like normal
16860 node.child.return = node;
16861 node = node.child;
16862 continue;
16863 }
16864 } else if (node.child !== null) {
16865 node.child.return = node;
16866 node = node.child;
16867 continue;
16868 }
16869 // $FlowFixMe This is correct but Flow is confused by the labeled break.
16870 node = node;
16871 if (node === workInProgress) {
16872 return;
16873 }
16874 while (node.sibling === null) {
16875 if (node.return === null || node.return === workInProgress) {
16876 return;
16877 }
16878 node = node.return;
16879 }
16880 node.sibling.return = node.return;
16881 node = node.sibling;
16882 }
16883 };
16884 updateHostContainer = function (workInProgress) {
16885 var portalOrRoot = workInProgress.stateNode;
16886 var childrenUnchanged = workInProgress.firstEffect === null;
16887 if (childrenUnchanged) {
16888 // No changes, just reuse the existing instance.
16889 } else {
16890 var container = portalOrRoot.containerInfo;
16891 var newChildSet = createContainerChildSet(container);
16892 // If children might have changed, we have to add them all to the set.
16893 appendAllChildrenToContainer(newChildSet, workInProgress, false, false);
16894 portalOrRoot.pendingChildren = newChildSet;
16895 // Schedule an update on the container to swap out the container.
16896 markUpdate(workInProgress);
16897 finalizeContainerChildren(container, newChildSet);
16898 }
16899 };
16900 updateHostComponent$1 = function (current, workInProgress, type, newProps, rootContainerInstance) {
16901 var currentInstance = current.stateNode;
16902 var oldProps = current.memoizedProps;
16903 // If there are no effects associated with this node, then none of our children had any updates.
16904 // This guarantees that we can reuse all of them.
16905 var childrenUnchanged = workInProgress.firstEffect === null;
16906 if (childrenUnchanged && oldProps === newProps) {
16907 // No changes, just reuse the existing instance.
16908 // Note that this might release a previous clone.
16909 workInProgress.stateNode = currentInstance;
16910 return;
16911 }
16912 var recyclableInstance = workInProgress.stateNode;
16913 var currentHostContext = getHostContext();
16914 var updatePayload = null;
16915 if (oldProps !== newProps) {
16916 updatePayload = prepareUpdate(recyclableInstance, type, oldProps, newProps, rootContainerInstance, currentHostContext);
16917 }
16918 if (childrenUnchanged && updatePayload === null) {
16919 // No changes, just reuse the existing instance.
16920 // Note that this might release a previous clone.
16921 workInProgress.stateNode = currentInstance;
16922 return;
16923 }
16924 var newInstance = cloneInstance(currentInstance, updatePayload, type, oldProps, newProps, workInProgress, childrenUnchanged, recyclableInstance);
16925 if (finalizeInitialChildren(newInstance, type, newProps, rootContainerInstance, currentHostContext)) {
16926 markUpdate(workInProgress);
16927 }
16928 workInProgress.stateNode = newInstance;
16929 if (childrenUnchanged) {
16930 // If there are no other effects in this tree, we need to flag this node as having one.
16931 // Even though we're not going to use it for anything.
16932 // Otherwise parents won't know that there are new children to propagate upwards.
16933 markUpdate(workInProgress);
16934 } else {
16935 // If children might have changed, we have to add them all to the set.
16936 appendAllChildren(newInstance, workInProgress, false, false);
16937 }
16938 };
16939 updateHostText$1 = function (current, workInProgress, oldText, newText) {
16940 if (oldText !== newText) {
16941 // If the text content differs, we'll create a new text instance for it.
16942 var rootContainerInstance = getRootHostContainer();
16943 var currentHostContext = getHostContext();
16944 workInProgress.stateNode = createTextInstance(newText, rootContainerInstance, currentHostContext, workInProgress);
16945 // We'll have to mark it as having an effect, even though we won't use the effect for anything.
16946 // This lets the parents know that at least one of their children has changed.
16947 markUpdate(workInProgress);
16948 }
16949 };
16950} else {
16951 // No host operations
16952 updateHostContainer = function (workInProgress) {
16953 // Noop
16954 };
16955 updateHostComponent$1 = function (current, workInProgress, type, newProps, rootContainerInstance) {
16956 // Noop
16957 };
16958 updateHostText$1 = function (current, workInProgress, oldText, newText) {
16959 // Noop
16960 };
16961}
16962
16963function completeWork(current, workInProgress, renderExpirationTime) {
16964 var newProps = workInProgress.pendingProps;
16965
16966 switch (workInProgress.tag) {
16967 case IndeterminateComponent:
16968 break;
16969 case LazyComponent:
16970 break;
16971 case SimpleMemoComponent:
16972 case FunctionComponent:
16973 break;
16974 case ClassComponent:
16975 {
16976 var Component = workInProgress.type;
16977 if (isContextProvider(Component)) {
16978 popContext(workInProgress);
16979 }
16980 break;
16981 }
16982 case HostRoot:
16983 {
16984 popHostContainer(workInProgress);
16985 popTopLevelContextObject(workInProgress);
16986 var fiberRoot = workInProgress.stateNode;
16987 if (fiberRoot.pendingContext) {
16988 fiberRoot.context = fiberRoot.pendingContext;
16989 fiberRoot.pendingContext = null;
16990 }
16991 if (current === null || current.child === null) {
16992 // If we hydrated, pop so that we can delete any remaining children
16993 // that weren't hydrated.
16994 popHydrationState(workInProgress);
16995 // This resets the hacky state to fix isMounted before committing.
16996 // TODO: Delete this when we delete isMounted and findDOMNode.
16997 workInProgress.effectTag &= ~Placement;
16998 }
16999 updateHostContainer(workInProgress);
17000 break;
17001 }
17002 case HostComponent:
17003 {
17004 popHostContext(workInProgress);
17005 var rootContainerInstance = getRootHostContainer();
17006 var type = workInProgress.type;
17007 if (current !== null && workInProgress.stateNode != null) {
17008 updateHostComponent$1(current, workInProgress, type, newProps, rootContainerInstance);
17009
17010 if (current.ref !== workInProgress.ref) {
17011 markRef$1(workInProgress);
17012 }
17013 } else {
17014 if (!newProps) {
17015 !(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;
17016 // This can happen when we abort work.
17017 break;
17018 }
17019
17020 var currentHostContext = getHostContext();
17021 // TODO: Move createInstance to beginWork and keep it on a context
17022 // "stack" as the parent. Then append children as we go in beginWork
17023 // or completeWork depending on we want to add then top->down or
17024 // bottom->up. Top->down is faster in IE11.
17025 var wasHydrated = popHydrationState(workInProgress);
17026 if (wasHydrated) {
17027 // TODO: Move this and createInstance step into the beginPhase
17028 // to consolidate.
17029 if (prepareToHydrateHostInstance(workInProgress, rootContainerInstance, currentHostContext)) {
17030 // If changes to the hydrated node needs to be applied at the
17031 // commit-phase we mark this as such.
17032 markUpdate(workInProgress);
17033 }
17034 } else {
17035 var instance = createInstance(type, newProps, rootContainerInstance, currentHostContext, workInProgress);
17036
17037 appendAllChildren(instance, workInProgress, false, false);
17038
17039 // Certain renderers require commit-time effects for initial mount.
17040 // (eg DOM renderer supports auto-focus for certain elements).
17041 // Make sure such renderers get scheduled for later work.
17042 if (finalizeInitialChildren(instance, type, newProps, rootContainerInstance, currentHostContext)) {
17043 markUpdate(workInProgress);
17044 }
17045 workInProgress.stateNode = instance;
17046 }
17047
17048 if (workInProgress.ref !== null) {
17049 // If there is a ref on a host node we need to schedule a callback
17050 markRef$1(workInProgress);
17051 }
17052 }
17053 break;
17054 }
17055 case HostText:
17056 {
17057 var newText = newProps;
17058 if (current && workInProgress.stateNode != null) {
17059 var oldText = current.memoizedProps;
17060 // If we have an alternate, that means this is an update and we need
17061 // to schedule a side-effect to do the updates.
17062 updateHostText$1(current, workInProgress, oldText, newText);
17063 } else {
17064 if (typeof newText !== 'string') {
17065 !(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;
17066 // This can happen when we abort work.
17067 }
17068 var _rootContainerInstance = getRootHostContainer();
17069 var _currentHostContext = getHostContext();
17070 var _wasHydrated = popHydrationState(workInProgress);
17071 if (_wasHydrated) {
17072 if (prepareToHydrateHostTextInstance(workInProgress)) {
17073 markUpdate(workInProgress);
17074 }
17075 } else {
17076 workInProgress.stateNode = createTextInstance(newText, _rootContainerInstance, _currentHostContext, workInProgress);
17077 }
17078 }
17079 break;
17080 }
17081 case ForwardRef:
17082 break;
17083 case SuspenseComponent:
17084 {
17085 var nextState = workInProgress.memoizedState;
17086 if ((workInProgress.effectTag & DidCapture) !== NoEffect) {
17087 // Something suspended. Re-render with the fallback children.
17088 workInProgress.expirationTime = renderExpirationTime;
17089 // Do not reset the effect list.
17090 return workInProgress;
17091 }
17092
17093 var nextDidTimeout = nextState !== null;
17094 var prevDidTimeout = current !== null && current.memoizedState !== null;
17095
17096 if (current !== null && !nextDidTimeout && prevDidTimeout) {
17097 // We just switched from the fallback to the normal children. Delete
17098 // the fallback.
17099 // TODO: Would it be better to store the fallback fragment on
17100 var currentFallbackChild = current.child.sibling;
17101 if (currentFallbackChild !== null) {
17102 // Deletions go at the beginning of the return fiber's effect list
17103 var first = workInProgress.firstEffect;
17104 if (first !== null) {
17105 workInProgress.firstEffect = currentFallbackChild;
17106 currentFallbackChild.nextEffect = first;
17107 } else {
17108 workInProgress.firstEffect = workInProgress.lastEffect = currentFallbackChild;
17109 currentFallbackChild.nextEffect = null;
17110 }
17111 currentFallbackChild.effectTag = Deletion;
17112 }
17113 }
17114
17115 if (nextDidTimeout || prevDidTimeout) {
17116 // If the children are hidden, or if they were previous hidden, schedule
17117 // an effect to toggle their visibility. This is also used to attach a
17118 // retry listener to the promise.
17119 workInProgress.effectTag |= Update;
17120 }
17121 break;
17122 }
17123 case Fragment:
17124 break;
17125 case Mode:
17126 break;
17127 case Profiler:
17128 break;
17129 case HostPortal:
17130 popHostContainer(workInProgress);
17131 updateHostContainer(workInProgress);
17132 break;
17133 case ContextProvider:
17134 // Pop provider fiber
17135 popProvider(workInProgress);
17136 break;
17137 case ContextConsumer:
17138 break;
17139 case MemoComponent:
17140 break;
17141 case IncompleteClassComponent:
17142 {
17143 // Same as class component case. I put it down here so that the tags are
17144 // sequential to ensure this switch is compiled to a jump table.
17145 var _Component = workInProgress.type;
17146 if (isContextProvider(_Component)) {
17147 popContext(workInProgress);
17148 }
17149 break;
17150 }
17151 case DehydratedSuspenseComponent:
17152 {
17153 if (enableSuspenseServerRenderer) {
17154 if (current === null) {
17155 var _wasHydrated2 = popHydrationState(workInProgress);
17156 !_wasHydrated2 ? invariant(false, 'A dehydrated suspense component was completed without a hydrated node. This is probably a bug in React.') : void 0;
17157 skipPastDehydratedSuspenseInstance(workInProgress);
17158 } else if ((workInProgress.effectTag & DidCapture) === NoEffect) {
17159 // This boundary did not suspend so it's now hydrated.
17160 // To handle any future suspense cases, we're going to now upgrade it
17161 // to a Suspense component. We detach it from the existing current fiber.
17162 current.alternate = null;
17163 workInProgress.alternate = null;
17164 workInProgress.tag = SuspenseComponent;
17165 workInProgress.memoizedState = null;
17166 workInProgress.stateNode = null;
17167 }
17168 }
17169 break;
17170 }
17171 default:
17172 invariant(false, 'Unknown unit of work tag. This error is likely caused by a bug in React. Please file an issue.');
17173 }
17174
17175 return null;
17176}
17177
17178function shouldCaptureSuspense(workInProgress) {
17179 // In order to capture, the Suspense component must have a fallback prop.
17180 if (workInProgress.memoizedProps.fallback === undefined) {
17181 return false;
17182 }
17183 // If it was the primary children that just suspended, capture and render the
17184 // fallback. Otherwise, don't capture and bubble to the next boundary.
17185 var nextState = workInProgress.memoizedState;
17186 return nextState === null;
17187}
17188
17189// This module is forked in different environments.
17190// By default, return `true` to log errors to the console.
17191// Forks can return `false` if this isn't desirable.
17192function showErrorDialog(capturedError) {
17193 return true;
17194}
17195
17196function logCapturedError(capturedError) {
17197 var logError = showErrorDialog(capturedError);
17198
17199 // Allow injected showErrorDialog() to prevent default console.error logging.
17200 // This enables renderers like ReactNative to better manage redbox behavior.
17201 if (logError === false) {
17202 return;
17203 }
17204
17205 var error = capturedError.error;
17206 {
17207 var componentName = capturedError.componentName,
17208 componentStack = capturedError.componentStack,
17209 errorBoundaryName = capturedError.errorBoundaryName,
17210 errorBoundaryFound = capturedError.errorBoundaryFound,
17211 willRetry = capturedError.willRetry;
17212
17213 // Browsers support silencing uncaught errors by calling
17214 // `preventDefault()` in window `error` handler.
17215 // We record this information as an expando on the error.
17216
17217 if (error != null && error._suppressLogging) {
17218 if (errorBoundaryFound && willRetry) {
17219 // The error is recoverable and was silenced.
17220 // Ignore it and don't print the stack addendum.
17221 // This is handy for testing error boundaries without noise.
17222 return;
17223 }
17224 // The error is fatal. Since the silencing might have
17225 // been accidental, we'll surface it anyway.
17226 // However, the browser would have silenced the original error
17227 // so we'll print it first, and then print the stack addendum.
17228 console.error(error);
17229 // For a more detailed description of this block, see:
17230 // https://github.com/facebook/react/pull/13384
17231 }
17232
17233 var componentNameMessage = componentName ? 'The above error occurred in the <' + componentName + '> component:' : 'The above error occurred in one of your React components:';
17234
17235 var errorBoundaryMessage = void 0;
17236 // errorBoundaryFound check is sufficient; errorBoundaryName check is to satisfy Flow.
17237 if (errorBoundaryFound && errorBoundaryName) {
17238 if (willRetry) {
17239 errorBoundaryMessage = 'React will try to recreate this component tree from scratch ' + ('using the error boundary you provided, ' + errorBoundaryName + '.');
17240 } else {
17241 errorBoundaryMessage = 'This error was initially handled by the error boundary ' + errorBoundaryName + '.\n' + 'Recreating the tree from scratch failed so React will unmount the tree.';
17242 }
17243 } else {
17244 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.';
17245 }
17246 var combinedMessage = '' + componentNameMessage + componentStack + '\n\n' + ('' + errorBoundaryMessage);
17247
17248 // In development, we provide our own message with just the component stack.
17249 // We don't include the original error message and JS stack because the browser
17250 // has already printed it. Even if the application swallows the error, it is still
17251 // displayed by the browser thanks to the DEV-only fake event trick in ReactErrorUtils.
17252 console.error(combinedMessage);
17253 }
17254}
17255
17256var didWarnAboutUndefinedSnapshotBeforeUpdate = null;
17257{
17258 didWarnAboutUndefinedSnapshotBeforeUpdate = new Set();
17259}
17260
17261var PossiblyWeakSet$1 = typeof WeakSet === 'function' ? WeakSet : Set;
17262
17263function logError(boundary, errorInfo) {
17264 var source = errorInfo.source;
17265 var stack = errorInfo.stack;
17266 if (stack === null && source !== null) {
17267 stack = getStackByFiberInDevAndProd(source);
17268 }
17269
17270 var capturedError = {
17271 componentName: source !== null ? getComponentName(source.type) : null,
17272 componentStack: stack !== null ? stack : '',
17273 error: errorInfo.value,
17274 errorBoundary: null,
17275 errorBoundaryName: null,
17276 errorBoundaryFound: false,
17277 willRetry: false
17278 };
17279
17280 if (boundary !== null && boundary.tag === ClassComponent) {
17281 capturedError.errorBoundary = boundary.stateNode;
17282 capturedError.errorBoundaryName = getComponentName(boundary.type);
17283 capturedError.errorBoundaryFound = true;
17284 capturedError.willRetry = true;
17285 }
17286
17287 try {
17288 logCapturedError(capturedError);
17289 } catch (e) {
17290 // This method must not throw, or React internal state will get messed up.
17291 // If console.error is overridden, or logCapturedError() shows a dialog that throws,
17292 // we want to report this error outside of the normal stack as a last resort.
17293 // https://github.com/facebook/react/issues/13188
17294 setTimeout(function () {
17295 throw e;
17296 });
17297 }
17298}
17299
17300var callComponentWillUnmountWithTimer = function (current$$1, instance) {
17301 startPhaseTimer(current$$1, 'componentWillUnmount');
17302 instance.props = current$$1.memoizedProps;
17303 instance.state = current$$1.memoizedState;
17304 instance.componentWillUnmount();
17305 stopPhaseTimer();
17306};
17307
17308// Capture errors so they don't interrupt unmounting.
17309function safelyCallComponentWillUnmount(current$$1, instance) {
17310 {
17311 invokeGuardedCallback(null, callComponentWillUnmountWithTimer, null, current$$1, instance);
17312 if (hasCaughtError()) {
17313 var unmountError = clearCaughtError();
17314 captureCommitPhaseError(current$$1, unmountError);
17315 }
17316 }
17317}
17318
17319function safelyDetachRef(current$$1) {
17320 var ref = current$$1.ref;
17321 if (ref !== null) {
17322 if (typeof ref === 'function') {
17323 {
17324 invokeGuardedCallback(null, ref, null, null);
17325 if (hasCaughtError()) {
17326 var refError = clearCaughtError();
17327 captureCommitPhaseError(current$$1, refError);
17328 }
17329 }
17330 } else {
17331 ref.current = null;
17332 }
17333 }
17334}
17335
17336function safelyCallDestroy(current$$1, destroy) {
17337 {
17338 invokeGuardedCallback(null, destroy, null);
17339 if (hasCaughtError()) {
17340 var error = clearCaughtError();
17341 captureCommitPhaseError(current$$1, error);
17342 }
17343 }
17344}
17345
17346function commitBeforeMutationLifeCycles(current$$1, finishedWork) {
17347 switch (finishedWork.tag) {
17348 case FunctionComponent:
17349 case ForwardRef:
17350 case SimpleMemoComponent:
17351 {
17352 commitHookEffectList(UnmountSnapshot, NoEffect$1, finishedWork);
17353 return;
17354 }
17355 case ClassComponent:
17356 {
17357 if (finishedWork.effectTag & Snapshot) {
17358 if (current$$1 !== null) {
17359 var prevProps = current$$1.memoizedProps;
17360 var prevState = current$$1.memoizedState;
17361 startPhaseTimer(finishedWork, 'getSnapshotBeforeUpdate');
17362 var instance = finishedWork.stateNode;
17363 // We could update instance props and state here,
17364 // but instead we rely on them being set during last render.
17365 // TODO: revisit this when we implement resuming.
17366 {
17367 if (finishedWork.type === finishedWork.elementType && !didWarnAboutReassigningProps) {
17368 !(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;
17369 !(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;
17370 }
17371 }
17372 var snapshot = instance.getSnapshotBeforeUpdate(finishedWork.elementType === finishedWork.type ? prevProps : resolveDefaultProps(finishedWork.type, prevProps), prevState);
17373 {
17374 var didWarnSet = didWarnAboutUndefinedSnapshotBeforeUpdate;
17375 if (snapshot === undefined && !didWarnSet.has(finishedWork.type)) {
17376 didWarnSet.add(finishedWork.type);
17377 warningWithoutStack$1(false, '%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' + 'must be returned. You have returned undefined.', getComponentName(finishedWork.type));
17378 }
17379 }
17380 instance.__reactInternalSnapshotBeforeUpdate = snapshot;
17381 stopPhaseTimer();
17382 }
17383 }
17384 return;
17385 }
17386 case HostRoot:
17387 case HostComponent:
17388 case HostText:
17389 case HostPortal:
17390 case IncompleteClassComponent:
17391 // Nothing to do for these component types
17392 return;
17393 default:
17394 {
17395 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.');
17396 }
17397 }
17398}
17399
17400function commitHookEffectList(unmountTag, mountTag, finishedWork) {
17401 var updateQueue = finishedWork.updateQueue;
17402 var lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
17403 if (lastEffect !== null) {
17404 var firstEffect = lastEffect.next;
17405 var effect = firstEffect;
17406 do {
17407 if ((effect.tag & unmountTag) !== NoEffect$1) {
17408 // Unmount
17409 var destroy = effect.destroy;
17410 effect.destroy = undefined;
17411 if (destroy !== undefined) {
17412 destroy();
17413 }
17414 }
17415 if ((effect.tag & mountTag) !== NoEffect$1) {
17416 // Mount
17417 var create = effect.create;
17418 effect.destroy = create();
17419
17420 {
17421 var _destroy = effect.destroy;
17422 if (_destroy !== undefined && typeof _destroy !== 'function') {
17423 var addendum = void 0;
17424 if (_destroy === null) {
17425 addendum = ' You returned null. If your effect does not require clean ' + 'up, return undefined (or nothing).';
17426 } else if (typeof _destroy.then === 'function') {
17427 addendum = '\n\nIt looks like you wrote useEffect(async () => ...) or returned a Promise. ' + 'Instead, write the async function inside your effect ' + 'and call it immediately:\n\n' + 'useEffect(() => {\n' + ' async function fetchData() {\n' + ' // You can await here\n' + ' const response = await MyAPI.getData(someId);\n' + ' // ...\n' + ' }\n' + ' fetchData();\n' + '}, [someId]); // Or [] if effect doesn\'t need props or state\n\n' + 'Learn more about data fetching with Hooks: https://fb.me/react-hooks-data-fetching';
17428 } else {
17429 addendum = ' You returned: ' + _destroy;
17430 }
17431 warningWithoutStack$1(false, 'An effect function must not return anything besides a function, ' + 'which is used for clean-up.%s%s', addendum, getStackByFiberInDevAndProd(finishedWork));
17432 }
17433 }
17434 }
17435 effect = effect.next;
17436 } while (effect !== firstEffect);
17437 }
17438}
17439
17440function commitPassiveHookEffects(finishedWork) {
17441 commitHookEffectList(UnmountPassive, NoEffect$1, finishedWork);
17442 commitHookEffectList(NoEffect$1, MountPassive, finishedWork);
17443}
17444
17445function commitLifeCycles(finishedRoot, current$$1, finishedWork, committedExpirationTime) {
17446 switch (finishedWork.tag) {
17447 case FunctionComponent:
17448 case ForwardRef:
17449 case SimpleMemoComponent:
17450 {
17451 commitHookEffectList(UnmountLayout, MountLayout, finishedWork);
17452 break;
17453 }
17454 case ClassComponent:
17455 {
17456 var instance = finishedWork.stateNode;
17457 if (finishedWork.effectTag & Update) {
17458 if (current$$1 === null) {
17459 startPhaseTimer(finishedWork, 'componentDidMount');
17460 // We could update instance props and state here,
17461 // but instead we rely on them being set during last render.
17462 // TODO: revisit this when we implement resuming.
17463 {
17464 if (finishedWork.type === finishedWork.elementType && !didWarnAboutReassigningProps) {
17465 !(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;
17466 !(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;
17467 }
17468 }
17469 instance.componentDidMount();
17470 stopPhaseTimer();
17471 } else {
17472 var prevProps = finishedWork.elementType === finishedWork.type ? current$$1.memoizedProps : resolveDefaultProps(finishedWork.type, current$$1.memoizedProps);
17473 var prevState = current$$1.memoizedState;
17474 startPhaseTimer(finishedWork, 'componentDidUpdate');
17475 // We could update instance props and state here,
17476 // but instead we rely on them being set during last render.
17477 // TODO: revisit this when we implement resuming.
17478 {
17479 if (finishedWork.type === finishedWork.elementType && !didWarnAboutReassigningProps) {
17480 !(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;
17481 !(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;
17482 }
17483 }
17484 instance.componentDidUpdate(prevProps, prevState, instance.__reactInternalSnapshotBeforeUpdate);
17485 stopPhaseTimer();
17486 }
17487 }
17488 var updateQueue = finishedWork.updateQueue;
17489 if (updateQueue !== null) {
17490 {
17491 if (finishedWork.type === finishedWork.elementType && !didWarnAboutReassigningProps) {
17492 !(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;
17493 !(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;
17494 }
17495 }
17496 // We could update instance props and state here,
17497 // but instead we rely on them being set during last render.
17498 // TODO: revisit this when we implement resuming.
17499 commitUpdateQueue(finishedWork, updateQueue, instance, committedExpirationTime);
17500 }
17501 return;
17502 }
17503 case HostRoot:
17504 {
17505 var _updateQueue = finishedWork.updateQueue;
17506 if (_updateQueue !== null) {
17507 var _instance = null;
17508 if (finishedWork.child !== null) {
17509 switch (finishedWork.child.tag) {
17510 case HostComponent:
17511 _instance = getPublicInstance(finishedWork.child.stateNode);
17512 break;
17513 case ClassComponent:
17514 _instance = finishedWork.child.stateNode;
17515 break;
17516 }
17517 }
17518 commitUpdateQueue(finishedWork, _updateQueue, _instance, committedExpirationTime);
17519 }
17520 return;
17521 }
17522 case HostComponent:
17523 {
17524 var _instance2 = finishedWork.stateNode;
17525
17526 // Renderers may schedule work to be done after host components are mounted
17527 // (eg DOM renderer may schedule auto-focus for inputs and form controls).
17528 // These effects should only be committed when components are first mounted,
17529 // aka when there is no current/alternate.
17530 if (current$$1 === null && finishedWork.effectTag & Update) {
17531 var type = finishedWork.type;
17532 var props = finishedWork.memoizedProps;
17533 commitMount(_instance2, type, props, finishedWork);
17534 }
17535
17536 return;
17537 }
17538 case HostText:
17539 {
17540 // We have no life-cycles associated with text.
17541 return;
17542 }
17543 case HostPortal:
17544 {
17545 // We have no life-cycles associated with portals.
17546 return;
17547 }
17548 case Profiler:
17549 {
17550 if (enableProfilerTimer) {
17551 var onRender = finishedWork.memoizedProps.onRender;
17552
17553 if (enableSchedulerTracing) {
17554 onRender(finishedWork.memoizedProps.id, current$$1 === null ? 'mount' : 'update', finishedWork.actualDuration, finishedWork.treeBaseDuration, finishedWork.actualStartTime, getCommitTime(), finishedRoot.memoizedInteractions);
17555 } else {
17556 onRender(finishedWork.memoizedProps.id, current$$1 === null ? 'mount' : 'update', finishedWork.actualDuration, finishedWork.treeBaseDuration, finishedWork.actualStartTime, getCommitTime());
17557 }
17558 }
17559 return;
17560 }
17561 case SuspenseComponent:
17562 break;
17563 case IncompleteClassComponent:
17564 break;
17565 default:
17566 {
17567 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.');
17568 }
17569 }
17570}
17571
17572function hideOrUnhideAllChildren(finishedWork, isHidden) {
17573 if (supportsMutation) {
17574 // We only have the top Fiber that was inserted but we need to recurse down its
17575 var node = finishedWork;
17576 while (true) {
17577 if (node.tag === HostComponent) {
17578 var instance = node.stateNode;
17579 if (isHidden) {
17580 hideInstance(instance);
17581 } else {
17582 unhideInstance(node.stateNode, node.memoizedProps);
17583 }
17584 } else if (node.tag === HostText) {
17585 var _instance3 = node.stateNode;
17586 if (isHidden) {
17587 hideTextInstance(_instance3);
17588 } else {
17589 unhideTextInstance(_instance3, node.memoizedProps);
17590 }
17591 } else if (node.tag === SuspenseComponent && node.memoizedState !== null) {
17592 // Found a nested Suspense component that timed out. Skip over the
17593 var fallbackChildFragment = node.child.sibling;
17594 fallbackChildFragment.return = node;
17595 node = fallbackChildFragment;
17596 continue;
17597 } else if (node.child !== null) {
17598 node.child.return = node;
17599 node = node.child;
17600 continue;
17601 }
17602 if (node === finishedWork) {
17603 return;
17604 }
17605 while (node.sibling === null) {
17606 if (node.return === null || node.return === finishedWork) {
17607 return;
17608 }
17609 node = node.return;
17610 }
17611 node.sibling.return = node.return;
17612 node = node.sibling;
17613 }
17614 }
17615}
17616
17617function commitAttachRef(finishedWork) {
17618 var ref = finishedWork.ref;
17619 if (ref !== null) {
17620 var instance = finishedWork.stateNode;
17621 var instanceToUse = void 0;
17622 switch (finishedWork.tag) {
17623 case HostComponent:
17624 instanceToUse = getPublicInstance(instance);
17625 break;
17626 default:
17627 instanceToUse = instance;
17628 }
17629 if (typeof ref === 'function') {
17630 ref(instanceToUse);
17631 } else {
17632 {
17633 if (!ref.hasOwnProperty('current')) {
17634 warningWithoutStack$1(false, 'Unexpected ref object provided for %s. ' + 'Use either a ref-setter function or React.createRef().%s', getComponentName(finishedWork.type), getStackByFiberInDevAndProd(finishedWork));
17635 }
17636 }
17637
17638 ref.current = instanceToUse;
17639 }
17640 }
17641}
17642
17643function commitDetachRef(current$$1) {
17644 var currentRef = current$$1.ref;
17645 if (currentRef !== null) {
17646 if (typeof currentRef === 'function') {
17647 currentRef(null);
17648 } else {
17649 currentRef.current = null;
17650 }
17651 }
17652}
17653
17654// User-originating errors (lifecycles and refs) should not interrupt
17655// deletion, so don't let them throw. Host-originating errors should
17656// interrupt deletion, so it's okay
17657function commitUnmount(current$$1) {
17658 onCommitUnmount(current$$1);
17659
17660 switch (current$$1.tag) {
17661 case FunctionComponent:
17662 case ForwardRef:
17663 case MemoComponent:
17664 case SimpleMemoComponent:
17665 {
17666 var updateQueue = current$$1.updateQueue;
17667 if (updateQueue !== null) {
17668 var lastEffect = updateQueue.lastEffect;
17669 if (lastEffect !== null) {
17670 var firstEffect = lastEffect.next;
17671 var effect = firstEffect;
17672 do {
17673 var destroy = effect.destroy;
17674 if (destroy !== undefined) {
17675 safelyCallDestroy(current$$1, destroy);
17676 }
17677 effect = effect.next;
17678 } while (effect !== firstEffect);
17679 }
17680 }
17681 break;
17682 }
17683 case ClassComponent:
17684 {
17685 safelyDetachRef(current$$1);
17686 var instance = current$$1.stateNode;
17687 if (typeof instance.componentWillUnmount === 'function') {
17688 safelyCallComponentWillUnmount(current$$1, instance);
17689 }
17690 return;
17691 }
17692 case HostComponent:
17693 {
17694 safelyDetachRef(current$$1);
17695 return;
17696 }
17697 case HostPortal:
17698 {
17699 // TODO: this is recursive.
17700 // We are also not using this parent because
17701 // the portal will get pushed immediately.
17702 if (supportsMutation) {
17703 unmountHostComponents(current$$1);
17704 } else if (supportsPersistence) {
17705 emptyPortalContainer(current$$1);
17706 }
17707 return;
17708 }
17709 }
17710}
17711
17712function commitNestedUnmounts(root) {
17713 // While we're inside a removed host node we don't want to call
17714 // removeChild on the inner nodes because they're removed by the top
17715 // call anyway. We also want to call componentWillUnmount on all
17716 // composites before this host node is removed from the tree. Therefore
17717 var node = root;
17718 while (true) {
17719 commitUnmount(node);
17720 // Visit children because they may contain more composite or host nodes.
17721 // Skip portals because commitUnmount() currently visits them recursively.
17722 if (node.child !== null && (
17723 // If we use mutation we drill down into portals using commitUnmount above.
17724 // If we don't use mutation we drill down into portals here instead.
17725 !supportsMutation || node.tag !== HostPortal)) {
17726 node.child.return = node;
17727 node = node.child;
17728 continue;
17729 }
17730 if (node === root) {
17731 return;
17732 }
17733 while (node.sibling === null) {
17734 if (node.return === null || node.return === root) {
17735 return;
17736 }
17737 node = node.return;
17738 }
17739 node.sibling.return = node.return;
17740 node = node.sibling;
17741 }
17742}
17743
17744function detachFiber(current$$1) {
17745 // Cut off the return pointers to disconnect it from the tree. Ideally, we
17746 // should clear the child pointer of the parent alternate to let this
17747 // get GC:ed but we don't know which for sure which parent is the current
17748 // one so we'll settle for GC:ing the subtree of this child. This child
17749 // itself will be GC:ed when the parent updates the next time.
17750 current$$1.return = null;
17751 current$$1.child = null;
17752 current$$1.memoizedState = null;
17753 current$$1.updateQueue = null;
17754 var alternate = current$$1.alternate;
17755 if (alternate !== null) {
17756 alternate.return = null;
17757 alternate.child = null;
17758 alternate.memoizedState = null;
17759 alternate.updateQueue = null;
17760 }
17761}
17762
17763function emptyPortalContainer(current$$1) {
17764 if (!supportsPersistence) {
17765 return;
17766 }
17767
17768 var portal = current$$1.stateNode;
17769 var containerInfo = portal.containerInfo;
17770
17771 var emptyChildSet = createContainerChildSet(containerInfo);
17772 replaceContainerChildren(containerInfo, emptyChildSet);
17773}
17774
17775function commitContainer(finishedWork) {
17776 if (!supportsPersistence) {
17777 return;
17778 }
17779
17780 switch (finishedWork.tag) {
17781 case ClassComponent:
17782 {
17783 return;
17784 }
17785 case HostComponent:
17786 {
17787 return;
17788 }
17789 case HostText:
17790 {
17791 return;
17792 }
17793 case HostRoot:
17794 case HostPortal:
17795 {
17796 var portalOrRoot = finishedWork.stateNode;
17797 var containerInfo = portalOrRoot.containerInfo,
17798 _pendingChildren = portalOrRoot.pendingChildren;
17799
17800 replaceContainerChildren(containerInfo, _pendingChildren);
17801 return;
17802 }
17803 default:
17804 {
17805 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.');
17806 }
17807 }
17808}
17809
17810function getHostParentFiber(fiber) {
17811 var parent = fiber.return;
17812 while (parent !== null) {
17813 if (isHostParent(parent)) {
17814 return parent;
17815 }
17816 parent = parent.return;
17817 }
17818 invariant(false, 'Expected to find a host parent. This error is likely caused by a bug in React. Please file an issue.');
17819}
17820
17821function isHostParent(fiber) {
17822 return fiber.tag === HostComponent || fiber.tag === HostRoot || fiber.tag === HostPortal;
17823}
17824
17825function getHostSibling(fiber) {
17826 // We're going to search forward into the tree until we find a sibling host
17827 // node. Unfortunately, if multiple insertions are done in a row we have to
17828 // search past them. This leads to exponential search for the next sibling.
17829 var node = fiber;
17830 siblings: while (true) {
17831 // If we didn't find anything, let's try the next sibling.
17832 while (node.sibling === null) {
17833 if (node.return === null || isHostParent(node.return)) {
17834 // If we pop out of the root or hit the parent the fiber we are the
17835 // last sibling.
17836 return null;
17837 }
17838 node = node.return;
17839 }
17840 node.sibling.return = node.return;
17841 node = node.sibling;
17842 while (node.tag !== HostComponent && node.tag !== HostText && node.tag !== DehydratedSuspenseComponent) {
17843 // If it is not host node and, we might have a host node inside it.
17844 // Try to search down until we find one.
17845 if (node.effectTag & Placement) {
17846 // If we don't have a child, try the siblings instead.
17847 continue siblings;
17848 }
17849 // If we don't have a child, try the siblings instead.
17850 // We also skip portals because they are not part of this host tree.
17851 if (node.child === null || node.tag === HostPortal) {
17852 continue siblings;
17853 } else {
17854 node.child.return = node;
17855 node = node.child;
17856 }
17857 }
17858 // Check if this host node is stable or about to be placed.
17859 if (!(node.effectTag & Placement)) {
17860 // Found it!
17861 return node.stateNode;
17862 }
17863 }
17864}
17865
17866function commitPlacement(finishedWork) {
17867 if (!supportsMutation) {
17868 return;
17869 }
17870
17871 // Recursively insert all host nodes into the parent.
17872 var parentFiber = getHostParentFiber(finishedWork);
17873
17874 // Note: these two variables *must* always be updated together.
17875 var parent = void 0;
17876 var isContainer = void 0;
17877
17878 switch (parentFiber.tag) {
17879 case HostComponent:
17880 parent = parentFiber.stateNode;
17881 isContainer = false;
17882 break;
17883 case HostRoot:
17884 parent = parentFiber.stateNode.containerInfo;
17885 isContainer = true;
17886 break;
17887 case HostPortal:
17888 parent = parentFiber.stateNode.containerInfo;
17889 isContainer = true;
17890 break;
17891 default:
17892 invariant(false, 'Invalid host parent fiber. This error is likely caused by a bug in React. Please file an issue.');
17893 }
17894 if (parentFiber.effectTag & ContentReset) {
17895 // Reset the text content of the parent before doing any insertions
17896 resetTextContent(parent);
17897 // Clear ContentReset from the effect tag
17898 parentFiber.effectTag &= ~ContentReset;
17899 }
17900
17901 var before = getHostSibling(finishedWork);
17902 // We only have the top Fiber that was inserted but we need to recurse down its
17903 // children to find all the terminal nodes.
17904 var node = finishedWork;
17905 while (true) {
17906 if (node.tag === HostComponent || node.tag === HostText) {
17907 if (before) {
17908 if (isContainer) {
17909 insertInContainerBefore(parent, node.stateNode, before);
17910 } else {
17911 insertBefore(parent, node.stateNode, before);
17912 }
17913 } else {
17914 if (isContainer) {
17915 appendChildToContainer(parent, node.stateNode);
17916 } else {
17917 appendChild(parent, node.stateNode);
17918 }
17919 }
17920 } else if (node.tag === HostPortal) {
17921 // If the insertion itself is a portal, then we don't want to traverse
17922 // down its children. Instead, we'll get insertions from each child in
17923 // the portal directly.
17924 } else if (node.child !== null) {
17925 node.child.return = node;
17926 node = node.child;
17927 continue;
17928 }
17929 if (node === finishedWork) {
17930 return;
17931 }
17932 while (node.sibling === null) {
17933 if (node.return === null || node.return === finishedWork) {
17934 return;
17935 }
17936 node = node.return;
17937 }
17938 node.sibling.return = node.return;
17939 node = node.sibling;
17940 }
17941}
17942
17943function unmountHostComponents(current$$1) {
17944 // We only have the top Fiber that was deleted but we need to recurse down its
17945 var node = current$$1;
17946
17947 // Each iteration, currentParent is populated with node's host parent if not
17948 // currentParentIsValid.
17949 var currentParentIsValid = false;
17950
17951 // Note: these two variables *must* always be updated together.
17952 var currentParent = void 0;
17953 var currentParentIsContainer = void 0;
17954
17955 while (true) {
17956 if (!currentParentIsValid) {
17957 var parent = node.return;
17958 findParent: while (true) {
17959 !(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;
17960 switch (parent.tag) {
17961 case HostComponent:
17962 currentParent = parent.stateNode;
17963 currentParentIsContainer = false;
17964 break findParent;
17965 case HostRoot:
17966 currentParent = parent.stateNode.containerInfo;
17967 currentParentIsContainer = true;
17968 break findParent;
17969 case HostPortal:
17970 currentParent = parent.stateNode.containerInfo;
17971 currentParentIsContainer = true;
17972 break findParent;
17973 }
17974 parent = parent.return;
17975 }
17976 currentParentIsValid = true;
17977 }
17978
17979 if (node.tag === HostComponent || node.tag === HostText) {
17980 commitNestedUnmounts(node);
17981 // After all the children have unmounted, it is now safe to remove the
17982 // node from the tree.
17983 if (currentParentIsContainer) {
17984 removeChildFromContainer(currentParent, node.stateNode);
17985 } else {
17986 removeChild(currentParent, node.stateNode);
17987 }
17988 // Don't visit children because we already visited them.
17989 } else if (enableSuspenseServerRenderer && node.tag === DehydratedSuspenseComponent) {
17990 // Delete the dehydrated suspense boundary and all of its content.
17991 if (currentParentIsContainer) {
17992 clearSuspenseBoundaryFromContainer(currentParent, node.stateNode);
17993 } else {
17994 clearSuspenseBoundary(currentParent, node.stateNode);
17995 }
17996 } else if (node.tag === HostPortal) {
17997 if (node.child !== null) {
17998 // When we go into a portal, it becomes the parent to remove from.
17999 // We will reassign it back when we pop the portal on the way up.
18000 currentParent = node.stateNode.containerInfo;
18001 currentParentIsContainer = true;
18002 // Visit children because portals might contain host components.
18003 node.child.return = node;
18004 node = node.child;
18005 continue;
18006 }
18007 } else {
18008 commitUnmount(node);
18009 // Visit children because we may find more host components below.
18010 if (node.child !== null) {
18011 node.child.return = node;
18012 node = node.child;
18013 continue;
18014 }
18015 }
18016 if (node === current$$1) {
18017 return;
18018 }
18019 while (node.sibling === null) {
18020 if (node.return === null || node.return === current$$1) {
18021 return;
18022 }
18023 node = node.return;
18024 if (node.tag === HostPortal) {
18025 // When we go out of the portal, we need to restore the parent.
18026 // Since we don't keep a stack of them, we will search for it.
18027 currentParentIsValid = false;
18028 }
18029 }
18030 node.sibling.return = node.return;
18031 node = node.sibling;
18032 }
18033}
18034
18035function commitDeletion(current$$1) {
18036 if (supportsMutation) {
18037 // Recursively delete all host nodes from the parent.
18038 // Detach refs and call componentWillUnmount() on the whole subtree.
18039 unmountHostComponents(current$$1);
18040 } else {
18041 // Detach refs and call componentWillUnmount() on the whole subtree.
18042 commitNestedUnmounts(current$$1);
18043 }
18044 detachFiber(current$$1);
18045}
18046
18047function commitWork(current$$1, finishedWork) {
18048 if (!supportsMutation) {
18049 switch (finishedWork.tag) {
18050 case FunctionComponent:
18051 case ForwardRef:
18052 case MemoComponent:
18053 case SimpleMemoComponent:
18054 {
18055 // Note: We currently never use MountMutation, but useLayout uses
18056 // UnmountMutation.
18057 commitHookEffectList(UnmountMutation, MountMutation, finishedWork);
18058 return;
18059 }
18060 }
18061
18062 commitContainer(finishedWork);
18063 return;
18064 }
18065
18066 switch (finishedWork.tag) {
18067 case FunctionComponent:
18068 case ForwardRef:
18069 case MemoComponent:
18070 case SimpleMemoComponent:
18071 {
18072 // Note: We currently never use MountMutation, but useLayout uses
18073 // UnmountMutation.
18074 commitHookEffectList(UnmountMutation, MountMutation, finishedWork);
18075 return;
18076 }
18077 case ClassComponent:
18078 {
18079 return;
18080 }
18081 case HostComponent:
18082 {
18083 var instance = finishedWork.stateNode;
18084 if (instance != null) {
18085 // Commit the work prepared earlier.
18086 var newProps = finishedWork.memoizedProps;
18087 // For hydration we reuse the update path but we treat the oldProps
18088 // as the newProps. The updatePayload will contain the real change in
18089 // this case.
18090 var oldProps = current$$1 !== null ? current$$1.memoizedProps : newProps;
18091 var type = finishedWork.type;
18092 // TODO: Type the updateQueue to be specific to host components.
18093 var updatePayload = finishedWork.updateQueue;
18094 finishedWork.updateQueue = null;
18095 if (updatePayload !== null) {
18096 commitUpdate(instance, updatePayload, type, oldProps, newProps, finishedWork);
18097 }
18098 }
18099 return;
18100 }
18101 case HostText:
18102 {
18103 !(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;
18104 var textInstance = finishedWork.stateNode;
18105 var newText = finishedWork.memoizedProps;
18106 // For hydration we reuse the update path but we treat the oldProps
18107 // as the newProps. The updatePayload will contain the real change in
18108 // this case.
18109 var oldText = current$$1 !== null ? current$$1.memoizedProps : newText;
18110 commitTextUpdate(textInstance, oldText, newText);
18111 return;
18112 }
18113 case HostRoot:
18114 {
18115 return;
18116 }
18117 case Profiler:
18118 {
18119 return;
18120 }
18121 case SuspenseComponent:
18122 {
18123 var newState = finishedWork.memoizedState;
18124
18125 var newDidTimeout = void 0;
18126 var primaryChildParent = finishedWork;
18127 if (newState === null) {
18128 newDidTimeout = false;
18129 } else {
18130 newDidTimeout = true;
18131 primaryChildParent = finishedWork.child;
18132 if (newState.timedOutAt === NoWork) {
18133 // If the children had not already timed out, record the time.
18134 // This is used to compute the elapsed time during subsequent
18135 // attempts to render the children.
18136 newState.timedOutAt = requestCurrentTime();
18137 }
18138 }
18139
18140 if (primaryChildParent !== null) {
18141 hideOrUnhideAllChildren(primaryChildParent, newDidTimeout);
18142 }
18143
18144 // If this boundary just timed out, then it will have a set of thenables.
18145 // For each thenable, attach a listener so that when it resolves, React
18146 // attempts to re-render the boundary in the primary (pre-timeout) state.
18147 var thenables = finishedWork.updateQueue;
18148 if (thenables !== null) {
18149 finishedWork.updateQueue = null;
18150 var retryCache = finishedWork.stateNode;
18151 if (retryCache === null) {
18152 retryCache = finishedWork.stateNode = new PossiblyWeakSet$1();
18153 }
18154 thenables.forEach(function (thenable) {
18155 // Memoize using the boundary fiber to prevent redundant listeners.
18156 var retry = retryTimedOutBoundary.bind(null, finishedWork, thenable);
18157 if (enableSchedulerTracing) {
18158 retry = unstable_wrap(retry);
18159 }
18160 if (!retryCache.has(thenable)) {
18161 retryCache.add(thenable);
18162 thenable.then(retry, retry);
18163 }
18164 });
18165 }
18166
18167 return;
18168 }
18169 case IncompleteClassComponent:
18170 {
18171 return;
18172 }
18173 default:
18174 {
18175 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.');
18176 }
18177 }
18178}
18179
18180function commitResetTextContent(current$$1) {
18181 if (!supportsMutation) {
18182 return;
18183 }
18184 resetTextContent(current$$1.stateNode);
18185}
18186
18187var PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
18188var PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
18189
18190function createRootErrorUpdate(fiber, errorInfo, expirationTime) {
18191 var update = createUpdate(expirationTime);
18192 // Unmount the root by rendering null.
18193 update.tag = CaptureUpdate;
18194 // Caution: React DevTools currently depends on this property
18195 // being called "element".
18196 update.payload = { element: null };
18197 var error = errorInfo.value;
18198 update.callback = function () {
18199 onUncaughtError(error);
18200 logError(fiber, errorInfo);
18201 };
18202 return update;
18203}
18204
18205function createClassErrorUpdate(fiber, errorInfo, expirationTime) {
18206 var update = createUpdate(expirationTime);
18207 update.tag = CaptureUpdate;
18208 var getDerivedStateFromError = fiber.type.getDerivedStateFromError;
18209 if (typeof getDerivedStateFromError === 'function') {
18210 var error = errorInfo.value;
18211 update.payload = function () {
18212 return getDerivedStateFromError(error);
18213 };
18214 }
18215
18216 var inst = fiber.stateNode;
18217 if (inst !== null && typeof inst.componentDidCatch === 'function') {
18218 update.callback = function callback() {
18219 if (typeof getDerivedStateFromError !== 'function') {
18220 // To preserve the preexisting retry behavior of error boundaries,
18221 // we keep track of which ones already failed during this batch.
18222 // This gets reset before we yield back to the browser.
18223 // TODO: Warn in strict mode if getDerivedStateFromError is
18224 // not defined.
18225 markLegacyErrorBoundaryAsFailed(this);
18226 }
18227 var error = errorInfo.value;
18228 var stack = errorInfo.stack;
18229 logError(fiber, errorInfo);
18230 this.componentDidCatch(error, {
18231 componentStack: stack !== null ? stack : ''
18232 });
18233 {
18234 if (typeof getDerivedStateFromError !== 'function') {
18235 // If componentDidCatch is the only error boundary method defined,
18236 // then it needs to call setState to recover from errors.
18237 // If no state update is scheduled then the boundary will swallow the error.
18238 !(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;
18239 }
18240 }
18241 };
18242 }
18243 return update;
18244}
18245
18246function attachPingListener(root, renderExpirationTime, thenable) {
18247 // Attach a listener to the promise to "ping" the root and retry. But
18248 // only if one does not already exist for the current render expiration
18249 // time (which acts like a "thread ID" here).
18250 var pingCache = root.pingCache;
18251 var threadIDs = void 0;
18252 if (pingCache === null) {
18253 pingCache = root.pingCache = new PossiblyWeakMap();
18254 threadIDs = new Set();
18255 pingCache.set(thenable, threadIDs);
18256 } else {
18257 threadIDs = pingCache.get(thenable);
18258 if (threadIDs === undefined) {
18259 threadIDs = new Set();
18260 pingCache.set(thenable, threadIDs);
18261 }
18262 }
18263 if (!threadIDs.has(renderExpirationTime)) {
18264 // Memoize using the thread ID to prevent redundant listeners.
18265 threadIDs.add(renderExpirationTime);
18266 var ping = pingSuspendedRoot.bind(null, root, thenable, renderExpirationTime);
18267 if (enableSchedulerTracing) {
18268 ping = unstable_wrap(ping);
18269 }
18270 thenable.then(ping, ping);
18271 }
18272}
18273
18274function throwException(root, returnFiber, sourceFiber, value, renderExpirationTime) {
18275 // The source fiber did not complete.
18276 sourceFiber.effectTag |= Incomplete;
18277 // Its effect list is no longer valid.
18278 sourceFiber.firstEffect = sourceFiber.lastEffect = null;
18279
18280 if (value !== null && typeof value === 'object' && typeof value.then === 'function') {
18281 // This is a thenable.
18282 var thenable = value;
18283
18284 // Find the earliest timeout threshold of all the placeholders in the
18285 // ancestor path. We could avoid this traversal by storing the thresholds on
18286 // the stack, but we choose not to because we only hit this path if we're
18287 // IO-bound (i.e. if something suspends). Whereas the stack is used even in
18288 // the non-IO- bound case.
18289 var _workInProgress = returnFiber;
18290 var earliestTimeoutMs = -1;
18291 var startTimeMs = -1;
18292 do {
18293 if (_workInProgress.tag === SuspenseComponent) {
18294 var current$$1 = _workInProgress.alternate;
18295 if (current$$1 !== null) {
18296 var currentState = current$$1.memoizedState;
18297 if (currentState !== null) {
18298 // Reached a boundary that already timed out. Do not search
18299 // any further.
18300 var timedOutAt = currentState.timedOutAt;
18301 startTimeMs = expirationTimeToMs(timedOutAt);
18302 // Do not search any further.
18303 break;
18304 }
18305 }
18306 var timeoutPropMs = _workInProgress.pendingProps.maxDuration;
18307 if (typeof timeoutPropMs === 'number') {
18308 if (timeoutPropMs <= 0) {
18309 earliestTimeoutMs = 0;
18310 } else if (earliestTimeoutMs === -1 || timeoutPropMs < earliestTimeoutMs) {
18311 earliestTimeoutMs = timeoutPropMs;
18312 }
18313 }
18314 }
18315 // If there is a DehydratedSuspenseComponent we don't have to do anything because
18316 // if something suspends inside it, we will simply leave that as dehydrated. It
18317 // will never timeout.
18318 _workInProgress = _workInProgress.return;
18319 } while (_workInProgress !== null);
18320
18321 // Schedule the nearest Suspense to re-render the timed out view.
18322 _workInProgress = returnFiber;
18323 do {
18324 if (_workInProgress.tag === SuspenseComponent && shouldCaptureSuspense(_workInProgress)) {
18325 // Found the nearest boundary.
18326
18327 // Stash the promise on the boundary fiber. If the boundary times out, we'll
18328 var thenables = _workInProgress.updateQueue;
18329 if (thenables === null) {
18330 var updateQueue = new Set();
18331 updateQueue.add(thenable);
18332 _workInProgress.updateQueue = updateQueue;
18333 } else {
18334 thenables.add(thenable);
18335 }
18336
18337 // If the boundary is outside of concurrent mode, we should *not*
18338 // suspend the commit. Pretend as if the suspended component rendered
18339 // null and keep rendering. In the commit phase, we'll schedule a
18340 // subsequent synchronous update to re-render the Suspense.
18341 //
18342 // Note: It doesn't matter whether the component that suspended was
18343 // inside a concurrent mode tree. If the Suspense is outside of it, we
18344 // should *not* suspend the commit.
18345 if ((_workInProgress.mode & ConcurrentMode) === NoEffect) {
18346 _workInProgress.effectTag |= DidCapture;
18347
18348 // We're going to commit this fiber even though it didn't complete.
18349 // But we shouldn't call any lifecycle methods or callbacks. Remove
18350 // all lifecycle effect tags.
18351 sourceFiber.effectTag &= ~(LifecycleEffectMask | Incomplete);
18352
18353 if (sourceFiber.tag === ClassComponent) {
18354 var currentSourceFiber = sourceFiber.alternate;
18355 if (currentSourceFiber === null) {
18356 // This is a new mount. Change the tag so it's not mistaken for a
18357 // completed class component. For example, we should not call
18358 // componentWillUnmount if it is deleted.
18359 sourceFiber.tag = IncompleteClassComponent;
18360 } else {
18361 // When we try rendering again, we should not reuse the current fiber,
18362 // since it's known to be in an inconsistent state. Use a force updte to
18363 // prevent a bail out.
18364 var update = createUpdate(Sync);
18365 update.tag = ForceUpdate;
18366 enqueueUpdate(sourceFiber, update);
18367 }
18368 }
18369
18370 // The source fiber did not complete. Mark it with Sync priority to
18371 // indicate that it still has pending work.
18372 sourceFiber.expirationTime = Sync;
18373
18374 // Exit without suspending.
18375 return;
18376 }
18377
18378 // Confirmed that the boundary is in a concurrent mode tree. Continue
18379 // with the normal suspend path.
18380
18381 attachPingListener(root, renderExpirationTime, thenable);
18382
18383 var absoluteTimeoutMs = void 0;
18384 if (earliestTimeoutMs === -1) {
18385 // If no explicit threshold is given, default to an arbitrarily large
18386 // value. The actual size doesn't matter because the threshold for the
18387 // whole tree will be clamped to the expiration time.
18388 absoluteTimeoutMs = maxSigned31BitInt;
18389 } else {
18390 if (startTimeMs === -1) {
18391 // This suspend happened outside of any already timed-out
18392 // placeholders. We don't know exactly when the update was
18393 // scheduled, but we can infer an approximate start time from the
18394 // expiration time. First, find the earliest uncommitted expiration
18395 // time in the tree, including work that is suspended. Then subtract
18396 // the offset used to compute an async update's expiration time.
18397 // This will cause high priority (interactive) work to expire
18398 // earlier than necessary, but we can account for this by adjusting
18399 // for the Just Noticeable Difference.
18400 var earliestExpirationTime = findEarliestOutstandingPriorityLevel(root, renderExpirationTime);
18401 var earliestExpirationTimeMs = expirationTimeToMs(earliestExpirationTime);
18402 startTimeMs = earliestExpirationTimeMs - LOW_PRIORITY_EXPIRATION;
18403 }
18404 absoluteTimeoutMs = startTimeMs + earliestTimeoutMs;
18405 }
18406
18407 // Mark the earliest timeout in the suspended fiber's ancestor path.
18408 // After completing the root, we'll take the largest of all the
18409 // suspended fiber's timeouts and use it to compute a timeout for the
18410 // whole tree.
18411 renderDidSuspend(root, absoluteTimeoutMs, renderExpirationTime);
18412
18413 _workInProgress.effectTag |= ShouldCapture;
18414 _workInProgress.expirationTime = renderExpirationTime;
18415 return;
18416 } else if (enableSuspenseServerRenderer && _workInProgress.tag === DehydratedSuspenseComponent) {
18417 attachPingListener(root, renderExpirationTime, thenable);
18418
18419 // Since we already have a current fiber, we can eagerly add a retry listener.
18420 var retryCache = _workInProgress.memoizedState;
18421 if (retryCache === null) {
18422 retryCache = _workInProgress.memoizedState = new PossiblyWeakSet();
18423 var _current = _workInProgress.alternate;
18424 !_current ? invariant(false, 'A dehydrated suspense boundary must commit before trying to render. This is probably a bug in React.') : void 0;
18425 _current.memoizedState = retryCache;
18426 }
18427 // Memoize using the boundary fiber to prevent redundant listeners.
18428 if (!retryCache.has(thenable)) {
18429 retryCache.add(thenable);
18430 var retry = retryTimedOutBoundary.bind(null, _workInProgress, thenable);
18431 if (enableSchedulerTracing) {
18432 retry = unstable_wrap(retry);
18433 }
18434 thenable.then(retry, retry);
18435 }
18436 _workInProgress.effectTag |= ShouldCapture;
18437 _workInProgress.expirationTime = renderExpirationTime;
18438 return;
18439 }
18440 // This boundary already captured during this render. Continue to the next
18441 // boundary.
18442 _workInProgress = _workInProgress.return;
18443 } while (_workInProgress !== null);
18444 // No boundary was found. Fallthrough to error mode.
18445 // TODO: Use invariant so the message is stripped in prod?
18446 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));
18447 }
18448
18449 // We didn't find a boundary that could handle this type of exception. Start
18450 // over and traverse parent path again, this time treating the exception
18451 // as an error.
18452 renderDidError();
18453 value = createCapturedValue(value, sourceFiber);
18454 var workInProgress = returnFiber;
18455 do {
18456 switch (workInProgress.tag) {
18457 case HostRoot:
18458 {
18459 var _errorInfo = value;
18460 workInProgress.effectTag |= ShouldCapture;
18461 workInProgress.expirationTime = renderExpirationTime;
18462 var _update = createRootErrorUpdate(workInProgress, _errorInfo, renderExpirationTime);
18463 enqueueCapturedUpdate(workInProgress, _update);
18464 return;
18465 }
18466 case ClassComponent:
18467 // Capture and retry
18468 var errorInfo = value;
18469 var ctor = workInProgress.type;
18470 var instance = workInProgress.stateNode;
18471 if ((workInProgress.effectTag & DidCapture) === NoEffect && (typeof ctor.getDerivedStateFromError === 'function' || instance !== null && typeof instance.componentDidCatch === 'function' && !isAlreadyFailedLegacyErrorBoundary(instance))) {
18472 workInProgress.effectTag |= ShouldCapture;
18473 workInProgress.expirationTime = renderExpirationTime;
18474 // Schedule the error boundary to re-render using updated state
18475 var _update2 = createClassErrorUpdate(workInProgress, errorInfo, renderExpirationTime);
18476 enqueueCapturedUpdate(workInProgress, _update2);
18477 return;
18478 }
18479 break;
18480 default:
18481 break;
18482 }
18483 workInProgress = workInProgress.return;
18484 } while (workInProgress !== null);
18485}
18486
18487function unwindWork(workInProgress, renderExpirationTime) {
18488 switch (workInProgress.tag) {
18489 case ClassComponent:
18490 {
18491 var Component = workInProgress.type;
18492 if (isContextProvider(Component)) {
18493 popContext(workInProgress);
18494 }
18495 var effectTag = workInProgress.effectTag;
18496 if (effectTag & ShouldCapture) {
18497 workInProgress.effectTag = effectTag & ~ShouldCapture | DidCapture;
18498 return workInProgress;
18499 }
18500 return null;
18501 }
18502 case HostRoot:
18503 {
18504 popHostContainer(workInProgress);
18505 popTopLevelContextObject(workInProgress);
18506 var _effectTag = workInProgress.effectTag;
18507 !((_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;
18508 workInProgress.effectTag = _effectTag & ~ShouldCapture | DidCapture;
18509 return workInProgress;
18510 }
18511 case HostComponent:
18512 {
18513 // TODO: popHydrationState
18514 popHostContext(workInProgress);
18515 return null;
18516 }
18517 case SuspenseComponent:
18518 {
18519 var _effectTag2 = workInProgress.effectTag;
18520 if (_effectTag2 & ShouldCapture) {
18521 workInProgress.effectTag = _effectTag2 & ~ShouldCapture | DidCapture;
18522 // Captured a suspense effect. Re-render the boundary.
18523 return workInProgress;
18524 }
18525 return null;
18526 }
18527 case DehydratedSuspenseComponent:
18528 {
18529 if (enableSuspenseServerRenderer) {
18530 // TODO: popHydrationState
18531 var _effectTag3 = workInProgress.effectTag;
18532 if (_effectTag3 & ShouldCapture) {
18533 workInProgress.effectTag = _effectTag3 & ~ShouldCapture | DidCapture;
18534 // Captured a suspense effect. Re-render the boundary.
18535 return workInProgress;
18536 }
18537 }
18538 return null;
18539 }
18540 case HostPortal:
18541 popHostContainer(workInProgress);
18542 return null;
18543 case ContextProvider:
18544 popProvider(workInProgress);
18545 return null;
18546 default:
18547 return null;
18548 }
18549}
18550
18551function unwindInterruptedWork(interruptedWork) {
18552 switch (interruptedWork.tag) {
18553 case ClassComponent:
18554 {
18555 var childContextTypes = interruptedWork.type.childContextTypes;
18556 if (childContextTypes !== null && childContextTypes !== undefined) {
18557 popContext(interruptedWork);
18558 }
18559 break;
18560 }
18561 case HostRoot:
18562 {
18563 popHostContainer(interruptedWork);
18564 popTopLevelContextObject(interruptedWork);
18565 break;
18566 }
18567 case HostComponent:
18568 {
18569 popHostContext(interruptedWork);
18570 break;
18571 }
18572 case HostPortal:
18573 popHostContainer(interruptedWork);
18574 break;
18575 case ContextProvider:
18576 popProvider(interruptedWork);
18577 break;
18578 default:
18579 break;
18580 }
18581}
18582
18583var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
18584var ReactCurrentOwner$2 = ReactSharedInternals.ReactCurrentOwner;
18585
18586
18587var didWarnAboutStateTransition = void 0;
18588var didWarnSetStateChildContext = void 0;
18589var warnAboutUpdateOnUnmounted = void 0;
18590var warnAboutInvalidUpdates = void 0;
18591
18592if (enableSchedulerTracing) {
18593 // Provide explicit error message when production+profiling bundle of e.g. react-dom
18594 // is used with production (non-profiling) bundle of scheduler/tracing
18595 !(__interactionsRef != null && __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;
18596}
18597
18598{
18599 didWarnAboutStateTransition = false;
18600 didWarnSetStateChildContext = false;
18601 var didWarnStateUpdateForUnmountedComponent = {};
18602
18603 warnAboutUpdateOnUnmounted = function (fiber, isClass) {
18604 // We show the whole stack but dedupe on the top component's name because
18605 // the problematic code almost always lies inside that component.
18606 var componentName = getComponentName(fiber.type) || 'ReactComponent';
18607 if (didWarnStateUpdateForUnmountedComponent[componentName]) {
18608 return;
18609 }
18610 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));
18611 didWarnStateUpdateForUnmountedComponent[componentName] = true;
18612 };
18613
18614 warnAboutInvalidUpdates = function (instance) {
18615 switch (phase) {
18616 case 'getChildContext':
18617 if (didWarnSetStateChildContext) {
18618 return;
18619 }
18620 warningWithoutStack$1(false, 'setState(...): Cannot call setState() inside getChildContext()');
18621 didWarnSetStateChildContext = true;
18622 break;
18623 case 'render':
18624 if (didWarnAboutStateTransition) {
18625 return;
18626 }
18627 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.');
18628 didWarnAboutStateTransition = true;
18629 break;
18630 }
18631 };
18632}
18633
18634// Used to ensure computeUniqueAsyncExpiration is monotonically decreasing.
18635var lastUniqueAsyncExpiration = Sync - 1;
18636
18637var isWorking = false;
18638
18639// The next work in progress fiber that we're currently working on.
18640var nextUnitOfWork = null;
18641var nextRoot = null;
18642// The time at which we're currently rendering work.
18643var nextRenderExpirationTime = NoWork;
18644var nextLatestAbsoluteTimeoutMs = -1;
18645var nextRenderDidError = false;
18646
18647// The next fiber with an effect that we're currently committing.
18648var nextEffect = null;
18649
18650var isCommitting$1 = false;
18651var rootWithPendingPassiveEffects = null;
18652var passiveEffectCallbackHandle = null;
18653var passiveEffectCallback = null;
18654
18655var legacyErrorBoundariesThatAlreadyFailed = null;
18656
18657// Used for performance tracking.
18658var interruptedBy = null;
18659
18660var stashedWorkInProgressProperties = void 0;
18661var replayUnitOfWork = void 0;
18662var mayReplayFailedUnitOfWork = void 0;
18663var isReplayingFailedUnitOfWork = void 0;
18664var originalReplayError = void 0;
18665var rethrowOriginalError = void 0;
18666if (true && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
18667 stashedWorkInProgressProperties = null;
18668 mayReplayFailedUnitOfWork = true;
18669 isReplayingFailedUnitOfWork = false;
18670 originalReplayError = null;
18671 replayUnitOfWork = function (failedUnitOfWork, thrownValue, isYieldy) {
18672 if (thrownValue !== null && typeof thrownValue === 'object' && typeof thrownValue.then === 'function') {
18673 // Don't replay promises. Treat everything else like an error.
18674 // TODO: Need to figure out a different strategy if/when we add
18675 // support for catching other types.
18676 return;
18677 }
18678
18679 // Restore the original state of the work-in-progress
18680 if (stashedWorkInProgressProperties === null) {
18681 // This should never happen. Don't throw because this code is DEV-only.
18682 warningWithoutStack$1(false, 'Could not replay rendering after an error. This is likely a bug in React. ' + 'Please file an issue.');
18683 return;
18684 }
18685 assignFiberPropertiesInDEV(failedUnitOfWork, stashedWorkInProgressProperties);
18686
18687 switch (failedUnitOfWork.tag) {
18688 case HostRoot:
18689 popHostContainer(failedUnitOfWork);
18690 popTopLevelContextObject(failedUnitOfWork);
18691 break;
18692 case HostComponent:
18693 popHostContext(failedUnitOfWork);
18694 break;
18695 case ClassComponent:
18696 {
18697 var Component = failedUnitOfWork.type;
18698 if (isContextProvider(Component)) {
18699 popContext(failedUnitOfWork);
18700 }
18701 break;
18702 }
18703 case HostPortal:
18704 popHostContainer(failedUnitOfWork);
18705 break;
18706 case ContextProvider:
18707 popProvider(failedUnitOfWork);
18708 break;
18709 }
18710 // Replay the begin phase.
18711 isReplayingFailedUnitOfWork = true;
18712 originalReplayError = thrownValue;
18713 invokeGuardedCallback(null, workLoop, null, isYieldy);
18714 isReplayingFailedUnitOfWork = false;
18715 originalReplayError = null;
18716 if (hasCaughtError()) {
18717 var replayError = clearCaughtError();
18718 if (replayError != null && thrownValue != null) {
18719 try {
18720 // Reading the expando property is intentionally
18721 // inside `try` because it might be a getter or Proxy.
18722 if (replayError._suppressLogging) {
18723 // Also suppress logging for the original error.
18724 thrownValue._suppressLogging = true;
18725 }
18726 } catch (inner) {
18727 // Ignore.
18728 }
18729 }
18730 } else {
18731 // If the begin phase did not fail the second time, set this pointer
18732 // back to the original value.
18733 nextUnitOfWork = failedUnitOfWork;
18734 }
18735 };
18736 rethrowOriginalError = function () {
18737 throw originalReplayError;
18738 };
18739}
18740
18741function resetStack() {
18742 if (nextUnitOfWork !== null) {
18743 var interruptedWork = nextUnitOfWork.return;
18744 while (interruptedWork !== null) {
18745 unwindInterruptedWork(interruptedWork);
18746 interruptedWork = interruptedWork.return;
18747 }
18748 }
18749
18750 {
18751 ReactStrictModeWarnings.discardPendingWarnings();
18752 checkThatStackIsEmpty();
18753 }
18754
18755 nextRoot = null;
18756 nextRenderExpirationTime = NoWork;
18757 nextLatestAbsoluteTimeoutMs = -1;
18758 nextRenderDidError = false;
18759 nextUnitOfWork = null;
18760}
18761
18762function commitAllHostEffects() {
18763 while (nextEffect !== null) {
18764 {
18765 setCurrentFiber(nextEffect);
18766 }
18767 recordEffect();
18768
18769 var effectTag = nextEffect.effectTag;
18770
18771 if (effectTag & ContentReset) {
18772 commitResetTextContent(nextEffect);
18773 }
18774
18775 if (effectTag & Ref) {
18776 var current$$1 = nextEffect.alternate;
18777 if (current$$1 !== null) {
18778 commitDetachRef(current$$1);
18779 }
18780 }
18781
18782 // The following switch statement is only concerned about placement,
18783 // updates, and deletions. To avoid needing to add a case for every
18784 // possible bitmap value, we remove the secondary effects from the
18785 // effect tag and switch on that value.
18786 var primaryEffectTag = effectTag & (Placement | Update | Deletion);
18787 switch (primaryEffectTag) {
18788 case Placement:
18789 {
18790 commitPlacement(nextEffect);
18791 // Clear the "placement" from effect tag so that we know that this is inserted, before
18792 // any life-cycles like componentDidMount gets called.
18793 // TODO: findDOMNode doesn't rely on this any more but isMounted
18794 // does and isMounted is deprecated anyway so we should be able
18795 // to kill this.
18796 nextEffect.effectTag &= ~Placement;
18797 break;
18798 }
18799 case PlacementAndUpdate:
18800 {
18801 // Placement
18802 commitPlacement(nextEffect);
18803 // Clear the "placement" from effect tag so that we know that this is inserted, before
18804 // any life-cycles like componentDidMount gets called.
18805 nextEffect.effectTag &= ~Placement;
18806
18807 // Update
18808 var _current = nextEffect.alternate;
18809 commitWork(_current, nextEffect);
18810 break;
18811 }
18812 case Update:
18813 {
18814 var _current2 = nextEffect.alternate;
18815 commitWork(_current2, nextEffect);
18816 break;
18817 }
18818 case Deletion:
18819 {
18820 commitDeletion(nextEffect);
18821 break;
18822 }
18823 }
18824 nextEffect = nextEffect.nextEffect;
18825 }
18826
18827 {
18828 resetCurrentFiber();
18829 }
18830}
18831
18832function commitBeforeMutationLifecycles() {
18833 while (nextEffect !== null) {
18834 {
18835 setCurrentFiber(nextEffect);
18836 }
18837
18838 var effectTag = nextEffect.effectTag;
18839 if (effectTag & Snapshot) {
18840 recordEffect();
18841 var current$$1 = nextEffect.alternate;
18842 commitBeforeMutationLifeCycles(current$$1, nextEffect);
18843 }
18844
18845 nextEffect = nextEffect.nextEffect;
18846 }
18847
18848 {
18849 resetCurrentFiber();
18850 }
18851}
18852
18853function commitAllLifeCycles(finishedRoot, committedExpirationTime) {
18854 {
18855 ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings();
18856 ReactStrictModeWarnings.flushLegacyContextWarning();
18857
18858 if (warnAboutDeprecatedLifecycles) {
18859 ReactStrictModeWarnings.flushPendingDeprecationWarnings();
18860 }
18861 }
18862 while (nextEffect !== null) {
18863 {
18864 setCurrentFiber(nextEffect);
18865 }
18866 var effectTag = nextEffect.effectTag;
18867
18868 if (effectTag & (Update | Callback)) {
18869 recordEffect();
18870 var current$$1 = nextEffect.alternate;
18871 commitLifeCycles(finishedRoot, current$$1, nextEffect, committedExpirationTime);
18872 }
18873
18874 if (effectTag & Ref) {
18875 recordEffect();
18876 commitAttachRef(nextEffect);
18877 }
18878
18879 if (effectTag & Passive) {
18880 rootWithPendingPassiveEffects = finishedRoot;
18881 }
18882
18883 nextEffect = nextEffect.nextEffect;
18884 }
18885 {
18886 resetCurrentFiber();
18887 }
18888}
18889
18890function commitPassiveEffects(root, firstEffect) {
18891 rootWithPendingPassiveEffects = null;
18892 passiveEffectCallbackHandle = null;
18893 passiveEffectCallback = null;
18894
18895 // Set this to true to prevent re-entrancy
18896 var previousIsRendering = isRendering;
18897 isRendering = true;
18898
18899 var effect = firstEffect;
18900 do {
18901 {
18902 setCurrentFiber(effect);
18903 }
18904
18905 if (effect.effectTag & Passive) {
18906 var didError = false;
18907 var error = void 0;
18908 {
18909 invokeGuardedCallback(null, commitPassiveHookEffects, null, effect);
18910 if (hasCaughtError()) {
18911 didError = true;
18912 error = clearCaughtError();
18913 }
18914 }
18915 if (didError) {
18916 captureCommitPhaseError(effect, error);
18917 }
18918 }
18919 effect = effect.nextEffect;
18920 } while (effect !== null);
18921 {
18922 resetCurrentFiber();
18923 }
18924
18925 isRendering = previousIsRendering;
18926
18927 // Check if work was scheduled by one of the effects
18928 var rootExpirationTime = root.expirationTime;
18929 if (rootExpirationTime !== NoWork) {
18930 requestWork(root, rootExpirationTime);
18931 }
18932 // Flush any sync work that was scheduled by effects
18933 if (!isBatchingUpdates && !isRendering) {
18934 performSyncWork();
18935 }
18936}
18937
18938function isAlreadyFailedLegacyErrorBoundary(instance) {
18939 return legacyErrorBoundariesThatAlreadyFailed !== null && legacyErrorBoundariesThatAlreadyFailed.has(instance);
18940}
18941
18942function markLegacyErrorBoundaryAsFailed(instance) {
18943 if (legacyErrorBoundariesThatAlreadyFailed === null) {
18944 legacyErrorBoundariesThatAlreadyFailed = new Set([instance]);
18945 } else {
18946 legacyErrorBoundariesThatAlreadyFailed.add(instance);
18947 }
18948}
18949
18950function flushPassiveEffects() {
18951 if (passiveEffectCallbackHandle !== null) {
18952 cancelPassiveEffects(passiveEffectCallbackHandle);
18953 }
18954 if (passiveEffectCallback !== null) {
18955 // We call the scheduled callback instead of commitPassiveEffects directly
18956 // to ensure tracing works correctly.
18957 passiveEffectCallback();
18958 }
18959}
18960
18961function commitRoot(root, finishedWork) {
18962 isWorking = true;
18963 isCommitting$1 = true;
18964 startCommitTimer();
18965
18966 !(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;
18967 var committedExpirationTime = root.pendingCommitExpirationTime;
18968 !(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;
18969 root.pendingCommitExpirationTime = NoWork;
18970
18971 // Update the pending priority levels to account for the work that we are
18972 // about to commit. This needs to happen before calling the lifecycles, since
18973 // they may schedule additional updates.
18974 var updateExpirationTimeBeforeCommit = finishedWork.expirationTime;
18975 var childExpirationTimeBeforeCommit = finishedWork.childExpirationTime;
18976 var earliestRemainingTimeBeforeCommit = childExpirationTimeBeforeCommit > updateExpirationTimeBeforeCommit ? childExpirationTimeBeforeCommit : updateExpirationTimeBeforeCommit;
18977 markCommittedPriorityLevels(root, earliestRemainingTimeBeforeCommit);
18978
18979 var prevInteractions = null;
18980 if (enableSchedulerTracing) {
18981 // Restore any pending interactions at this point,
18982 // So that cascading work triggered during the render phase will be accounted for.
18983 prevInteractions = __interactionsRef.current;
18984 __interactionsRef.current = root.memoizedInteractions;
18985 }
18986
18987 // Reset this to null before calling lifecycles
18988 ReactCurrentOwner$2.current = null;
18989
18990 var firstEffect = void 0;
18991 if (finishedWork.effectTag > PerformedWork) {
18992 // A fiber's effect list consists only of its children, not itself. So if
18993 // the root has an effect, we need to add it to the end of the list. The
18994 // resulting list is the set that would belong to the root's parent, if
18995 // it had one; that is, all the effects in the tree including the root.
18996 if (finishedWork.lastEffect !== null) {
18997 finishedWork.lastEffect.nextEffect = finishedWork;
18998 firstEffect = finishedWork.firstEffect;
18999 } else {
19000 firstEffect = finishedWork;
19001 }
19002 } else {
19003 // There is no effect on the root.
19004 firstEffect = finishedWork.firstEffect;
19005 }
19006
19007 prepareForCommit(root.containerInfo);
19008
19009 // Invoke instances of getSnapshotBeforeUpdate before mutation.
19010 nextEffect = firstEffect;
19011 startCommitSnapshotEffectsTimer();
19012 while (nextEffect !== null) {
19013 var didError = false;
19014 var error = void 0;
19015 {
19016 invokeGuardedCallback(null, commitBeforeMutationLifecycles, null);
19017 if (hasCaughtError()) {
19018 didError = true;
19019 error = clearCaughtError();
19020 }
19021 }
19022 if (didError) {
19023 !(nextEffect !== null) ? invariant(false, 'Should have next effect. This error is likely caused by a bug in React. Please file an issue.') : void 0;
19024 captureCommitPhaseError(nextEffect, error);
19025 // Clean-up
19026 if (nextEffect !== null) {
19027 nextEffect = nextEffect.nextEffect;
19028 }
19029 }
19030 }
19031 stopCommitSnapshotEffectsTimer();
19032
19033 if (enableProfilerTimer) {
19034 // Mark the current commit time to be shared by all Profilers in this batch.
19035 // This enables them to be grouped later.
19036 recordCommitTime();
19037 }
19038
19039 // Commit all the side-effects within a tree. We'll do this in two passes.
19040 // The first pass performs all the host insertions, updates, deletions and
19041 // ref unmounts.
19042 nextEffect = firstEffect;
19043 startCommitHostEffectsTimer();
19044 while (nextEffect !== null) {
19045 var _didError = false;
19046 var _error = void 0;
19047 {
19048 invokeGuardedCallback(null, commitAllHostEffects, null);
19049 if (hasCaughtError()) {
19050 _didError = true;
19051 _error = clearCaughtError();
19052 }
19053 }
19054 if (_didError) {
19055 !(nextEffect !== null) ? invariant(false, 'Should have next effect. This error is likely caused by a bug in React. Please file an issue.') : void 0;
19056 captureCommitPhaseError(nextEffect, _error);
19057 // Clean-up
19058 if (nextEffect !== null) {
19059 nextEffect = nextEffect.nextEffect;
19060 }
19061 }
19062 }
19063 stopCommitHostEffectsTimer();
19064
19065 resetAfterCommit(root.containerInfo);
19066
19067 // The work-in-progress tree is now the current tree. This must come after
19068 // the first pass of the commit phase, so that the previous tree is still
19069 // current during componentWillUnmount, but before the second pass, so that
19070 // the finished work is current during componentDidMount/Update.
19071 root.current = finishedWork;
19072
19073 // In the second pass we'll perform all life-cycles and ref callbacks.
19074 // Life-cycles happen as a separate pass so that all placements, updates,
19075 // and deletions in the entire tree have already been invoked.
19076 // This pass also triggers any renderer-specific initial effects.
19077 nextEffect = firstEffect;
19078 startCommitLifeCyclesTimer();
19079 while (nextEffect !== null) {
19080 var _didError2 = false;
19081 var _error2 = void 0;
19082 {
19083 invokeGuardedCallback(null, commitAllLifeCycles, null, root, committedExpirationTime);
19084 if (hasCaughtError()) {
19085 _didError2 = true;
19086 _error2 = clearCaughtError();
19087 }
19088 }
19089 if (_didError2) {
19090 !(nextEffect !== null) ? invariant(false, 'Should have next effect. This error is likely caused by a bug in React. Please file an issue.') : void 0;
19091 captureCommitPhaseError(nextEffect, _error2);
19092 if (nextEffect !== null) {
19093 nextEffect = nextEffect.nextEffect;
19094 }
19095 }
19096 }
19097
19098 if (firstEffect !== null && rootWithPendingPassiveEffects !== null) {
19099 // This commit included a passive effect. These do not need to fire until
19100 // after the next paint. Schedule an callback to fire them in an async
19101 // event. To ensure serial execution, the callback will be flushed early if
19102 // we enter rootWithPendingPassiveEffects commit phase before then.
19103 var callback = commitPassiveEffects.bind(null, root, firstEffect);
19104 if (enableSchedulerTracing) {
19105 // TODO: Avoid this extra callback by mutating the tracing ref directly,
19106 // like we do at the beginning of commitRoot. I've opted not to do that
19107 // here because that code is still in flux.
19108 callback = unstable_wrap(callback);
19109 }
19110 passiveEffectCallbackHandle = unstable_runWithPriority(unstable_NormalPriority, function () {
19111 return schedulePassiveEffects(callback);
19112 });
19113 passiveEffectCallback = callback;
19114 }
19115
19116 isCommitting$1 = false;
19117 isWorking = false;
19118 stopCommitLifeCyclesTimer();
19119 stopCommitTimer();
19120 onCommitRoot(finishedWork.stateNode);
19121 if (true && ReactFiberInstrumentation_1.debugTool) {
19122 ReactFiberInstrumentation_1.debugTool.onCommitWork(finishedWork);
19123 }
19124
19125 var updateExpirationTimeAfterCommit = finishedWork.expirationTime;
19126 var childExpirationTimeAfterCommit = finishedWork.childExpirationTime;
19127 var earliestRemainingTimeAfterCommit = childExpirationTimeAfterCommit > updateExpirationTimeAfterCommit ? childExpirationTimeAfterCommit : updateExpirationTimeAfterCommit;
19128 if (earliestRemainingTimeAfterCommit === NoWork) {
19129 // If there's no remaining work, we can clear the set of already failed
19130 // error boundaries.
19131 legacyErrorBoundariesThatAlreadyFailed = null;
19132 }
19133 onCommit(root, earliestRemainingTimeAfterCommit);
19134
19135 if (enableSchedulerTracing) {
19136 __interactionsRef.current = prevInteractions;
19137
19138 var subscriber = void 0;
19139
19140 try {
19141 subscriber = __subscriberRef.current;
19142 if (subscriber !== null && root.memoizedInteractions.size > 0) {
19143 var threadID = computeThreadID(committedExpirationTime, root.interactionThreadID);
19144 subscriber.onWorkStopped(root.memoizedInteractions, threadID);
19145 }
19146 } catch (error) {
19147 // It's not safe for commitRoot() to throw.
19148 // Store the error for now and we'll re-throw in finishRendering().
19149 if (!hasUnhandledError) {
19150 hasUnhandledError = true;
19151 unhandledError = error;
19152 }
19153 } finally {
19154 // Clear completed interactions from the pending Map.
19155 // Unless the render was suspended or cascading work was scheduled,
19156 // In which case– leave pending interactions until the subsequent render.
19157 var pendingInteractionMap = root.pendingInteractionMap;
19158 pendingInteractionMap.forEach(function (scheduledInteractions, scheduledExpirationTime) {
19159 // Only decrement the pending interaction count if we're done.
19160 // If there's still work at the current priority,
19161 // That indicates that we are waiting for suspense data.
19162 if (scheduledExpirationTime > earliestRemainingTimeAfterCommit) {
19163 pendingInteractionMap.delete(scheduledExpirationTime);
19164
19165 scheduledInteractions.forEach(function (interaction) {
19166 interaction.__count--;
19167
19168 if (subscriber !== null && interaction.__count === 0) {
19169 try {
19170 subscriber.onInteractionScheduledWorkCompleted(interaction);
19171 } catch (error) {
19172 // It's not safe for commitRoot() to throw.
19173 // Store the error for now and we'll re-throw in finishRendering().
19174 if (!hasUnhandledError) {
19175 hasUnhandledError = true;
19176 unhandledError = error;
19177 }
19178 }
19179 }
19180 });
19181 }
19182 });
19183 }
19184 }
19185}
19186
19187function resetChildExpirationTime(workInProgress, renderTime) {
19188 if (renderTime !== Never && workInProgress.childExpirationTime === Never) {
19189 // The children of this component are hidden. Don't bubble their
19190 // expiration times.
19191 return;
19192 }
19193
19194 var newChildExpirationTime = NoWork;
19195
19196 // Bubble up the earliest expiration time.
19197 if (enableProfilerTimer && workInProgress.mode & ProfileMode) {
19198 // We're in profiling mode.
19199 // Let's use this same traversal to update the render durations.
19200 var actualDuration = workInProgress.actualDuration;
19201 var treeBaseDuration = workInProgress.selfBaseDuration;
19202
19203 // When a fiber is cloned, its actualDuration is reset to 0.
19204 // This value will only be updated if work is done on the fiber (i.e. it doesn't bailout).
19205 // When work is done, it should bubble to the parent's actualDuration.
19206 // If the fiber has not been cloned though, (meaning no work was done),
19207 // Then this value will reflect the amount of time spent working on a previous render.
19208 // In that case it should not bubble.
19209 // We determine whether it was cloned by comparing the child pointer.
19210 var shouldBubbleActualDurations = workInProgress.alternate === null || workInProgress.child !== workInProgress.alternate.child;
19211
19212 var child = workInProgress.child;
19213 while (child !== null) {
19214 var childUpdateExpirationTime = child.expirationTime;
19215 var childChildExpirationTime = child.childExpirationTime;
19216 if (childUpdateExpirationTime > newChildExpirationTime) {
19217 newChildExpirationTime = childUpdateExpirationTime;
19218 }
19219 if (childChildExpirationTime > newChildExpirationTime) {
19220 newChildExpirationTime = childChildExpirationTime;
19221 }
19222 if (shouldBubbleActualDurations) {
19223 actualDuration += child.actualDuration;
19224 }
19225 treeBaseDuration += child.treeBaseDuration;
19226 child = child.sibling;
19227 }
19228 workInProgress.actualDuration = actualDuration;
19229 workInProgress.treeBaseDuration = treeBaseDuration;
19230 } else {
19231 var _child = workInProgress.child;
19232 while (_child !== null) {
19233 var _childUpdateExpirationTime = _child.expirationTime;
19234 var _childChildExpirationTime = _child.childExpirationTime;
19235 if (_childUpdateExpirationTime > newChildExpirationTime) {
19236 newChildExpirationTime = _childUpdateExpirationTime;
19237 }
19238 if (_childChildExpirationTime > newChildExpirationTime) {
19239 newChildExpirationTime = _childChildExpirationTime;
19240 }
19241 _child = _child.sibling;
19242 }
19243 }
19244
19245 workInProgress.childExpirationTime = newChildExpirationTime;
19246}
19247
19248function completeUnitOfWork(workInProgress) {
19249 // Attempt to complete the current unit of work, then move to the
19250 // next sibling. If there are no more siblings, return to the
19251 // parent fiber.
19252 while (true) {
19253 // The current, flushed, state of this fiber is the alternate.
19254 // Ideally nothing should rely on this, but relying on it here
19255 // means that we don't need an additional field on the work in
19256 // progress.
19257 var current$$1 = workInProgress.alternate;
19258 {
19259 setCurrentFiber(workInProgress);
19260 }
19261
19262 var returnFiber = workInProgress.return;
19263 var siblingFiber = workInProgress.sibling;
19264
19265 if ((workInProgress.effectTag & Incomplete) === NoEffect) {
19266 if (true && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
19267 // Don't replay if it fails during completion phase.
19268 mayReplayFailedUnitOfWork = false;
19269 }
19270 // This fiber completed.
19271 // Remember we're completing this unit so we can find a boundary if it fails.
19272 nextUnitOfWork = workInProgress;
19273 if (enableProfilerTimer) {
19274 if (workInProgress.mode & ProfileMode) {
19275 startProfilerTimer(workInProgress);
19276 }
19277 nextUnitOfWork = completeWork(current$$1, workInProgress, nextRenderExpirationTime);
19278 if (workInProgress.mode & ProfileMode) {
19279 // Update render duration assuming we didn't error.
19280 stopProfilerTimerIfRunningAndRecordDelta(workInProgress, false);
19281 }
19282 } else {
19283 nextUnitOfWork = completeWork(current$$1, workInProgress, nextRenderExpirationTime);
19284 }
19285 if (true && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
19286 // We're out of completion phase so replaying is fine now.
19287 mayReplayFailedUnitOfWork = true;
19288 }
19289 stopWorkTimer(workInProgress);
19290 resetChildExpirationTime(workInProgress, nextRenderExpirationTime);
19291 {
19292 resetCurrentFiber();
19293 }
19294
19295 if (nextUnitOfWork !== null) {
19296 // Completing this fiber spawned new work. Work on that next.
19297 return nextUnitOfWork;
19298 }
19299
19300 if (returnFiber !== null &&
19301 // Do not append effects to parents if a sibling failed to complete
19302 (returnFiber.effectTag & Incomplete) === NoEffect) {
19303 // Append all the effects of the subtree and this fiber onto the effect
19304 // list of the parent. The completion order of the children affects the
19305 // side-effect order.
19306 if (returnFiber.firstEffect === null) {
19307 returnFiber.firstEffect = workInProgress.firstEffect;
19308 }
19309 if (workInProgress.lastEffect !== null) {
19310 if (returnFiber.lastEffect !== null) {
19311 returnFiber.lastEffect.nextEffect = workInProgress.firstEffect;
19312 }
19313 returnFiber.lastEffect = workInProgress.lastEffect;
19314 }
19315
19316 // If this fiber had side-effects, we append it AFTER the children's
19317 // side-effects. We can perform certain side-effects earlier if
19318 // needed, by doing multiple passes over the effect list. We don't want
19319 // to schedule our own side-effect on our own list because if end up
19320 // reusing children we'll schedule this effect onto itself since we're
19321 // at the end.
19322 var effectTag = workInProgress.effectTag;
19323 // Skip both NoWork and PerformedWork tags when creating the effect list.
19324 // PerformedWork effect is read by React DevTools but shouldn't be committed.
19325 if (effectTag > PerformedWork) {
19326 if (returnFiber.lastEffect !== null) {
19327 returnFiber.lastEffect.nextEffect = workInProgress;
19328 } else {
19329 returnFiber.firstEffect = workInProgress;
19330 }
19331 returnFiber.lastEffect = workInProgress;
19332 }
19333 }
19334
19335 if (true && ReactFiberInstrumentation_1.debugTool) {
19336 ReactFiberInstrumentation_1.debugTool.onCompleteWork(workInProgress);
19337 }
19338
19339 if (siblingFiber !== null) {
19340 // If there is more work to do in this returnFiber, do that next.
19341 return siblingFiber;
19342 } else if (returnFiber !== null) {
19343 // If there's no more work in this returnFiber. Complete the returnFiber.
19344 workInProgress = returnFiber;
19345 continue;
19346 } else {
19347 // We've reached the root.
19348 return null;
19349 }
19350 } else {
19351 if (enableProfilerTimer && workInProgress.mode & ProfileMode) {
19352 // Record the render duration for the fiber that errored.
19353 stopProfilerTimerIfRunningAndRecordDelta(workInProgress, false);
19354
19355 // Include the time spent working on failed children before continuing.
19356 var actualDuration = workInProgress.actualDuration;
19357 var child = workInProgress.child;
19358 while (child !== null) {
19359 actualDuration += child.actualDuration;
19360 child = child.sibling;
19361 }
19362 workInProgress.actualDuration = actualDuration;
19363 }
19364
19365 // This fiber did not complete because something threw. Pop values off
19366 // the stack without entering the complete phase. If this is a boundary,
19367 // capture values if possible.
19368 var next = unwindWork(workInProgress, nextRenderExpirationTime);
19369 // Because this fiber did not complete, don't reset its expiration time.
19370 if (workInProgress.effectTag & DidCapture) {
19371 // Restarting an error boundary
19372 stopFailedWorkTimer(workInProgress);
19373 } else {
19374 stopWorkTimer(workInProgress);
19375 }
19376
19377 {
19378 resetCurrentFiber();
19379 }
19380
19381 if (next !== null) {
19382 stopWorkTimer(workInProgress);
19383 if (true && ReactFiberInstrumentation_1.debugTool) {
19384 ReactFiberInstrumentation_1.debugTool.onCompleteWork(workInProgress);
19385 }
19386
19387 // If completing this work spawned new work, do that next. We'll come
19388 // back here again.
19389 // Since we're restarting, remove anything that is not a host effect
19390 // from the effect tag.
19391 next.effectTag &= HostEffectMask;
19392 return next;
19393 }
19394
19395 if (returnFiber !== null) {
19396 // Mark the parent fiber as incomplete and clear its effect list.
19397 returnFiber.firstEffect = returnFiber.lastEffect = null;
19398 returnFiber.effectTag |= Incomplete;
19399 }
19400
19401 if (true && ReactFiberInstrumentation_1.debugTool) {
19402 ReactFiberInstrumentation_1.debugTool.onCompleteWork(workInProgress);
19403 }
19404
19405 if (siblingFiber !== null) {
19406 // If there is more work to do in this returnFiber, do that next.
19407 return siblingFiber;
19408 } else if (returnFiber !== null) {
19409 // If there's no more work in this returnFiber. Complete the returnFiber.
19410 workInProgress = returnFiber;
19411 continue;
19412 } else {
19413 return null;
19414 }
19415 }
19416 }
19417
19418 // Without this explicit null return Flow complains of invalid return type
19419 // TODO Remove the above while(true) loop
19420 // eslint-disable-next-line no-unreachable
19421 return null;
19422}
19423
19424function performUnitOfWork(workInProgress) {
19425 // The current, flushed, state of this fiber is the alternate.
19426 // Ideally nothing should rely on this, but relying on it here
19427 // means that we don't need an additional field on the work in
19428 // progress.
19429 var current$$1 = workInProgress.alternate;
19430
19431 // See if beginning this work spawns more work.
19432 startWorkTimer(workInProgress);
19433 {
19434 setCurrentFiber(workInProgress);
19435 }
19436
19437 if (true && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
19438 stashedWorkInProgressProperties = assignFiberPropertiesInDEV(stashedWorkInProgressProperties, workInProgress);
19439 }
19440
19441 var next = void 0;
19442 if (enableProfilerTimer) {
19443 if (workInProgress.mode & ProfileMode) {
19444 startProfilerTimer(workInProgress);
19445 }
19446
19447 next = beginWork(current$$1, workInProgress, nextRenderExpirationTime);
19448 workInProgress.memoizedProps = workInProgress.pendingProps;
19449
19450 if (workInProgress.mode & ProfileMode) {
19451 // Record the render duration assuming we didn't bailout (or error).
19452 stopProfilerTimerIfRunningAndRecordDelta(workInProgress, true);
19453 }
19454 } else {
19455 next = beginWork(current$$1, workInProgress, nextRenderExpirationTime);
19456 workInProgress.memoizedProps = workInProgress.pendingProps;
19457 }
19458
19459 {
19460 resetCurrentFiber();
19461 if (isReplayingFailedUnitOfWork) {
19462 // Currently replaying a failed unit of work. This should be unreachable,
19463 // because the render phase is meant to be idempotent, and it should
19464 // have thrown again. Since it didn't, rethrow the original error, so
19465 // React's internal stack is not misaligned.
19466 rethrowOriginalError();
19467 }
19468 }
19469 if (true && ReactFiberInstrumentation_1.debugTool) {
19470 ReactFiberInstrumentation_1.debugTool.onBeginWork(workInProgress);
19471 }
19472
19473 if (next === null) {
19474 // If this doesn't spawn new work, complete the current work.
19475 next = completeUnitOfWork(workInProgress);
19476 }
19477
19478 ReactCurrentOwner$2.current = null;
19479
19480 return next;
19481}
19482
19483function workLoop(isYieldy) {
19484 if (!isYieldy) {
19485 // Flush work without yielding
19486 while (nextUnitOfWork !== null) {
19487 nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
19488 }
19489 } else {
19490 // Flush asynchronous work until there's a higher priority event
19491 while (nextUnitOfWork !== null && !shouldYieldToRenderer()) {
19492 nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
19493 }
19494 }
19495}
19496
19497function renderRoot(root, isYieldy) {
19498 !!isWorking ? invariant(false, 'renderRoot was called recursively. This error is likely caused by a bug in React. Please file an issue.') : void 0;
19499
19500 flushPassiveEffects();
19501
19502 isWorking = true;
19503 var previousDispatcher = ReactCurrentDispatcher.current;
19504 ReactCurrentDispatcher.current = ContextOnlyDispatcher;
19505
19506 var expirationTime = root.nextExpirationTimeToWorkOn;
19507
19508 // Check if we're starting from a fresh stack, or if we're resuming from
19509 // previously yielded work.
19510 if (expirationTime !== nextRenderExpirationTime || root !== nextRoot || nextUnitOfWork === null) {
19511 // Reset the stack and start working from the root.
19512 resetStack();
19513 nextRoot = root;
19514 nextRenderExpirationTime = expirationTime;
19515 nextUnitOfWork = createWorkInProgress(nextRoot.current, null, nextRenderExpirationTime);
19516 root.pendingCommitExpirationTime = NoWork;
19517
19518 if (enableSchedulerTracing) {
19519 // Determine which interactions this batch of work currently includes,
19520 // So that we can accurately attribute time spent working on it,
19521 var interactions = new Set();
19522 root.pendingInteractionMap.forEach(function (scheduledInteractions, scheduledExpirationTime) {
19523 if (scheduledExpirationTime >= expirationTime) {
19524 scheduledInteractions.forEach(function (interaction) {
19525 return interactions.add(interaction);
19526 });
19527 }
19528 });
19529
19530 // Store the current set of interactions on the FiberRoot for a few reasons:
19531 // We can re-use it in hot functions like renderRoot() without having to recalculate it.
19532 // We will also use it in commitWork() to pass to any Profiler onRender() hooks.
19533 // This also provides DevTools with a way to access it when the onCommitRoot() hook is called.
19534 root.memoizedInteractions = interactions;
19535
19536 if (interactions.size > 0) {
19537 var subscriber = __subscriberRef.current;
19538 if (subscriber !== null) {
19539 var threadID = computeThreadID(expirationTime, root.interactionThreadID);
19540 try {
19541 subscriber.onWorkStarted(interactions, threadID);
19542 } catch (error) {
19543 // Work thrown by an interaction tracing subscriber should be rethrown,
19544 // But only once it's safe (to avoid leaving the scheduler in an invalid state).
19545 // Store the error for now and we'll re-throw in finishRendering().
19546 if (!hasUnhandledError) {
19547 hasUnhandledError = true;
19548 unhandledError = error;
19549 }
19550 }
19551 }
19552 }
19553 }
19554 }
19555
19556 var prevInteractions = null;
19557 if (enableSchedulerTracing) {
19558 // We're about to start new traced work.
19559 // Restore pending interactions so cascading work triggered during the render phase will be accounted for.
19560 prevInteractions = __interactionsRef.current;
19561 __interactionsRef.current = root.memoizedInteractions;
19562 }
19563
19564 var didFatal = false;
19565
19566 startWorkLoopTimer(nextUnitOfWork);
19567
19568 do {
19569 try {
19570 workLoop(isYieldy);
19571 } catch (thrownValue) {
19572 resetContextDependences();
19573 resetHooks();
19574
19575 // Reset in case completion throws.
19576 // This is only used in DEV and when replaying is on.
19577 var mayReplay = void 0;
19578 if (true && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
19579 mayReplay = mayReplayFailedUnitOfWork;
19580 mayReplayFailedUnitOfWork = true;
19581 }
19582
19583 if (nextUnitOfWork === null) {
19584 // This is a fatal error.
19585 didFatal = true;
19586 onUncaughtError(thrownValue);
19587 } else {
19588 if (enableProfilerTimer && nextUnitOfWork.mode & ProfileMode) {
19589 // Record the time spent rendering before an error was thrown.
19590 // This avoids inaccurate Profiler durations in the case of a suspended render.
19591 stopProfilerTimerIfRunningAndRecordDelta(nextUnitOfWork, true);
19592 }
19593
19594 {
19595 // Reset global debug state
19596 // We assume this is defined in DEV
19597 resetCurrentlyProcessingQueue();
19598 }
19599
19600 if (true && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
19601 if (mayReplay) {
19602 var failedUnitOfWork = nextUnitOfWork;
19603 replayUnitOfWork(failedUnitOfWork, thrownValue, isYieldy);
19604 }
19605 }
19606
19607 // TODO: we already know this isn't true in some cases.
19608 // At least this shows a nicer error message until we figure out the cause.
19609 // https://github.com/facebook/react/issues/12449#issuecomment-386727431
19610 !(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;
19611
19612 var sourceFiber = nextUnitOfWork;
19613 var returnFiber = sourceFiber.return;
19614 if (returnFiber === null) {
19615 // This is the root. The root could capture its own errors. However,
19616 // we don't know if it errors before or after we pushed the host
19617 // context. This information is needed to avoid a stack mismatch.
19618 // Because we're not sure, treat this as a fatal error. We could track
19619 // which phase it fails in, but doesn't seem worth it. At least
19620 // for now.
19621 didFatal = true;
19622 onUncaughtError(thrownValue);
19623 } else {
19624 throwException(root, returnFiber, sourceFiber, thrownValue, nextRenderExpirationTime);
19625 nextUnitOfWork = completeUnitOfWork(sourceFiber);
19626 continue;
19627 }
19628 }
19629 }
19630 break;
19631 } while (true);
19632
19633 if (enableSchedulerTracing) {
19634 // Traced work is done for now; restore the previous interactions.
19635 __interactionsRef.current = prevInteractions;
19636 }
19637
19638 // We're done performing work. Time to clean up.
19639 isWorking = false;
19640 ReactCurrentDispatcher.current = previousDispatcher;
19641 resetContextDependences();
19642 resetHooks();
19643
19644 // Yield back to main thread.
19645 if (didFatal) {
19646 var _didCompleteRoot = false;
19647 stopWorkLoopTimer(interruptedBy, _didCompleteRoot);
19648 interruptedBy = null;
19649 // There was a fatal error.
19650 {
19651 resetStackAfterFatalErrorInDev();
19652 }
19653 // `nextRoot` points to the in-progress root. A non-null value indicates
19654 // that we're in the middle of an async render. Set it to null to indicate
19655 // there's no more work to be done in the current batch.
19656 nextRoot = null;
19657 onFatal(root);
19658 return;
19659 }
19660
19661 if (nextUnitOfWork !== null) {
19662 // There's still remaining async work in this tree, but we ran out of time
19663 // in the current frame. Yield back to the renderer. Unless we're
19664 // interrupted by a higher priority update, we'll continue later from where
19665 // we left off.
19666 var _didCompleteRoot2 = false;
19667 stopWorkLoopTimer(interruptedBy, _didCompleteRoot2);
19668 interruptedBy = null;
19669 onYield(root);
19670 return;
19671 }
19672
19673 // We completed the whole tree.
19674 var didCompleteRoot = true;
19675 stopWorkLoopTimer(interruptedBy, didCompleteRoot);
19676 var rootWorkInProgress = root.current.alternate;
19677 !(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;
19678
19679 // `nextRoot` points to the in-progress root. A non-null value indicates
19680 // that we're in the middle of an async render. Set it to null to indicate
19681 // there's no more work to be done in the current batch.
19682 nextRoot = null;
19683 interruptedBy = null;
19684
19685 if (nextRenderDidError) {
19686 // There was an error
19687 if (hasLowerPriorityWork(root, expirationTime)) {
19688 // There's lower priority work. If so, it may have the effect of fixing
19689 // the exception that was just thrown. Exit without committing. This is
19690 // similar to a suspend, but without a timeout because we're not waiting
19691 // for a promise to resolve. React will restart at the lower
19692 // priority level.
19693 markSuspendedPriorityLevel(root, expirationTime);
19694 var suspendedExpirationTime = expirationTime;
19695 var rootExpirationTime = root.expirationTime;
19696 onSuspend(root, rootWorkInProgress, suspendedExpirationTime, rootExpirationTime, -1 // Indicates no timeout
19697 );
19698 return;
19699 } else if (
19700 // There's no lower priority work, but we're rendering asynchronously.
19701 // Synchronously attempt to render the same level one more time. This is
19702 // similar to a suspend, but without a timeout because we're not waiting
19703 // for a promise to resolve.
19704 !root.didError && isYieldy) {
19705 root.didError = true;
19706 var _suspendedExpirationTime = root.nextExpirationTimeToWorkOn = expirationTime;
19707 var _rootExpirationTime = root.expirationTime = Sync;
19708 onSuspend(root, rootWorkInProgress, _suspendedExpirationTime, _rootExpirationTime, -1 // Indicates no timeout
19709 );
19710 return;
19711 }
19712 }
19713
19714 if (isYieldy && nextLatestAbsoluteTimeoutMs !== -1) {
19715 // The tree was suspended.
19716 var _suspendedExpirationTime2 = expirationTime;
19717 markSuspendedPriorityLevel(root, _suspendedExpirationTime2);
19718
19719 // Find the earliest uncommitted expiration time in the tree, including
19720 // work that is suspended. The timeout threshold cannot be longer than
19721 // the overall expiration.
19722 var earliestExpirationTime = findEarliestOutstandingPriorityLevel(root, expirationTime);
19723 var earliestExpirationTimeMs = expirationTimeToMs(earliestExpirationTime);
19724 if (earliestExpirationTimeMs < nextLatestAbsoluteTimeoutMs) {
19725 nextLatestAbsoluteTimeoutMs = earliestExpirationTimeMs;
19726 }
19727
19728 // Subtract the current time from the absolute timeout to get the number
19729 // of milliseconds until the timeout. In other words, convert an absolute
19730 // timestamp to a relative time. This is the value that is passed
19731 // to `setTimeout`.
19732 var currentTimeMs = expirationTimeToMs(requestCurrentTime());
19733 var msUntilTimeout = nextLatestAbsoluteTimeoutMs - currentTimeMs;
19734 msUntilTimeout = msUntilTimeout < 0 ? 0 : msUntilTimeout;
19735
19736 // TODO: Account for the Just Noticeable Difference
19737
19738 var _rootExpirationTime2 = root.expirationTime;
19739 onSuspend(root, rootWorkInProgress, _suspendedExpirationTime2, _rootExpirationTime2, msUntilTimeout);
19740 return;
19741 }
19742
19743 // Ready to commit.
19744 onComplete(root, rootWorkInProgress, expirationTime);
19745}
19746
19747function captureCommitPhaseError(sourceFiber, value) {
19748 var expirationTime = Sync;
19749 var fiber = sourceFiber.return;
19750 while (fiber !== null) {
19751 switch (fiber.tag) {
19752 case ClassComponent:
19753 var ctor = fiber.type;
19754 var instance = fiber.stateNode;
19755 if (typeof ctor.getDerivedStateFromError === 'function' || typeof instance.componentDidCatch === 'function' && !isAlreadyFailedLegacyErrorBoundary(instance)) {
19756 var errorInfo = createCapturedValue(value, sourceFiber);
19757 var update = createClassErrorUpdate(fiber, errorInfo, expirationTime);
19758 enqueueUpdate(fiber, update);
19759 scheduleWork(fiber, expirationTime);
19760 return;
19761 }
19762 break;
19763 case HostRoot:
19764 {
19765 var _errorInfo = createCapturedValue(value, sourceFiber);
19766 var _update = createRootErrorUpdate(fiber, _errorInfo, expirationTime);
19767 enqueueUpdate(fiber, _update);
19768 scheduleWork(fiber, expirationTime);
19769 return;
19770 }
19771 }
19772 fiber = fiber.return;
19773 }
19774
19775 if (sourceFiber.tag === HostRoot) {
19776 // Error was thrown at the root. There is no parent, so the root
19777 // itself should capture it.
19778 var rootFiber = sourceFiber;
19779 var _errorInfo2 = createCapturedValue(value, rootFiber);
19780 var _update2 = createRootErrorUpdate(rootFiber, _errorInfo2, expirationTime);
19781 enqueueUpdate(rootFiber, _update2);
19782 scheduleWork(rootFiber, expirationTime);
19783 }
19784}
19785
19786function computeThreadID(expirationTime, interactionThreadID) {
19787 // Interaction threads are unique per root and expiration time.
19788 return expirationTime * 1000 + interactionThreadID;
19789}
19790
19791// Creates a unique async expiration time.
19792function computeUniqueAsyncExpiration() {
19793 var currentTime = requestCurrentTime();
19794 var result = computeAsyncExpiration(currentTime);
19795 if (result >= lastUniqueAsyncExpiration) {
19796 // Since we assume the current time monotonically increases, we only hit
19797 // this branch when computeUniqueAsyncExpiration is fired multiple times
19798 // within a 200ms window (or whatever the async bucket size is).
19799 result = lastUniqueAsyncExpiration - 1;
19800 }
19801 lastUniqueAsyncExpiration = result;
19802 return lastUniqueAsyncExpiration;
19803}
19804
19805function computeExpirationForFiber(currentTime, fiber) {
19806 var priorityLevel = unstable_getCurrentPriorityLevel();
19807
19808 var expirationTime = void 0;
19809 if ((fiber.mode & ConcurrentMode) === NoContext) {
19810 // Outside of concurrent mode, updates are always synchronous.
19811 expirationTime = Sync;
19812 } else if (isWorking && !isCommitting$1) {
19813 // During render phase, updates expire during as the current render.
19814 expirationTime = nextRenderExpirationTime;
19815 } else {
19816 switch (priorityLevel) {
19817 case unstable_ImmediatePriority:
19818 expirationTime = Sync;
19819 break;
19820 case unstable_UserBlockingPriority:
19821 expirationTime = computeInteractiveExpiration(currentTime);
19822 break;
19823 case unstable_NormalPriority:
19824 // This is a normal, concurrent update
19825 expirationTime = computeAsyncExpiration(currentTime);
19826 break;
19827 case unstable_LowPriority:
19828 case unstable_IdlePriority:
19829 expirationTime = Never;
19830 break;
19831 default:
19832 invariant(false, 'Unknown priority level. This error is likely caused by a bug in React. Please file an issue.');
19833 }
19834
19835 // If we're in the middle of rendering a tree, do not update at the same
19836 // expiration time that is already rendering.
19837 if (nextRoot !== null && expirationTime === nextRenderExpirationTime) {
19838 expirationTime -= 1;
19839 }
19840 }
19841
19842 // Keep track of the lowest pending interactive expiration time. This
19843 // allows us to synchronously flush all interactive updates
19844 // when needed.
19845 // TODO: Move this to renderer?
19846 if (priorityLevel === unstable_UserBlockingPriority && (lowestPriorityPendingInteractiveExpirationTime === NoWork || expirationTime < lowestPriorityPendingInteractiveExpirationTime)) {
19847 lowestPriorityPendingInteractiveExpirationTime = expirationTime;
19848 }
19849
19850 return expirationTime;
19851}
19852
19853function renderDidSuspend(root, absoluteTimeoutMs, suspendedTime) {
19854 // Schedule the timeout.
19855 if (absoluteTimeoutMs >= 0 && nextLatestAbsoluteTimeoutMs < absoluteTimeoutMs) {
19856 nextLatestAbsoluteTimeoutMs = absoluteTimeoutMs;
19857 }
19858}
19859
19860function renderDidError() {
19861 nextRenderDidError = true;
19862}
19863
19864function pingSuspendedRoot(root, thenable, pingTime) {
19865 // A promise that previously suspended React from committing has resolved.
19866 // If React is still suspended, try again at the previous level (pingTime).
19867
19868 var pingCache = root.pingCache;
19869 if (pingCache !== null) {
19870 // The thenable resolved, so we no longer need to memoize, because it will
19871 // never be thrown again.
19872 pingCache.delete(thenable);
19873 }
19874
19875 if (nextRoot !== null && nextRenderExpirationTime === pingTime) {
19876 // Received a ping at the same priority level at which we're currently
19877 // rendering. Restart from the root.
19878 nextRoot = null;
19879 } else {
19880 // Confirm that the root is still suspended at this level. Otherwise exit.
19881 if (isPriorityLevelSuspended(root, pingTime)) {
19882 // Ping at the original level
19883 markPingedPriorityLevel(root, pingTime);
19884 var rootExpirationTime = root.expirationTime;
19885 if (rootExpirationTime !== NoWork) {
19886 requestWork(root, rootExpirationTime);
19887 }
19888 }
19889 }
19890}
19891
19892function retryTimedOutBoundary(boundaryFiber, thenable) {
19893 // The boundary fiber (a Suspense component) previously timed out and was
19894 // rendered in its fallback state. One of the promises that suspended it has
19895 // resolved, which means at least part of the tree was likely unblocked. Try
19896 var retryCache = void 0;
19897 if (enableSuspenseServerRenderer) {
19898 switch (boundaryFiber.tag) {
19899 case SuspenseComponent:
19900 retryCache = boundaryFiber.stateNode;
19901 break;
19902 case DehydratedSuspenseComponent:
19903 retryCache = boundaryFiber.memoizedState;
19904 break;
19905 default:
19906 invariant(false, 'Pinged unknown suspense boundary type. This is probably a bug in React.');
19907 }
19908 } else {
19909 retryCache = boundaryFiber.stateNode;
19910 }
19911 if (retryCache !== null) {
19912 // The thenable resolved, so we no longer need to memoize, because it will
19913 // never be thrown again.
19914 retryCache.delete(thenable);
19915 }
19916
19917 var currentTime = requestCurrentTime();
19918 var retryTime = computeExpirationForFiber(currentTime, boundaryFiber);
19919 var root = scheduleWorkToRoot(boundaryFiber, retryTime);
19920 if (root !== null) {
19921 markPendingPriorityLevel(root, retryTime);
19922 var rootExpirationTime = root.expirationTime;
19923 if (rootExpirationTime !== NoWork) {
19924 requestWork(root, rootExpirationTime);
19925 }
19926 }
19927}
19928
19929function scheduleWorkToRoot(fiber, expirationTime) {
19930 recordScheduleUpdate();
19931
19932 {
19933 if (fiber.tag === ClassComponent) {
19934 var instance = fiber.stateNode;
19935 warnAboutInvalidUpdates(instance);
19936 }
19937 }
19938
19939 // Update the source fiber's expiration time
19940 if (fiber.expirationTime < expirationTime) {
19941 fiber.expirationTime = expirationTime;
19942 }
19943 var alternate = fiber.alternate;
19944 if (alternate !== null && alternate.expirationTime < expirationTime) {
19945 alternate.expirationTime = expirationTime;
19946 }
19947 // Walk the parent path to the root and update the child expiration time.
19948 var node = fiber.return;
19949 var root = null;
19950 if (node === null && fiber.tag === HostRoot) {
19951 root = fiber.stateNode;
19952 } else {
19953 while (node !== null) {
19954 alternate = node.alternate;
19955 if (node.childExpirationTime < expirationTime) {
19956 node.childExpirationTime = expirationTime;
19957 if (alternate !== null && alternate.childExpirationTime < expirationTime) {
19958 alternate.childExpirationTime = expirationTime;
19959 }
19960 } else if (alternate !== null && alternate.childExpirationTime < expirationTime) {
19961 alternate.childExpirationTime = expirationTime;
19962 }
19963 if (node.return === null && node.tag === HostRoot) {
19964 root = node.stateNode;
19965 break;
19966 }
19967 node = node.return;
19968 }
19969 }
19970
19971 if (enableSchedulerTracing) {
19972 if (root !== null) {
19973 var interactions = __interactionsRef.current;
19974 if (interactions.size > 0) {
19975 var pendingInteractionMap = root.pendingInteractionMap;
19976 var pendingInteractions = pendingInteractionMap.get(expirationTime);
19977 if (pendingInteractions != null) {
19978 interactions.forEach(function (interaction) {
19979 if (!pendingInteractions.has(interaction)) {
19980 // Update the pending async work count for previously unscheduled interaction.
19981 interaction.__count++;
19982 }
19983
19984 pendingInteractions.add(interaction);
19985 });
19986 } else {
19987 pendingInteractionMap.set(expirationTime, new Set(interactions));
19988
19989 // Update the pending async work count for the current interactions.
19990 interactions.forEach(function (interaction) {
19991 interaction.__count++;
19992 });
19993 }
19994
19995 var subscriber = __subscriberRef.current;
19996 if (subscriber !== null) {
19997 var threadID = computeThreadID(expirationTime, root.interactionThreadID);
19998 subscriber.onWorkScheduled(interactions, threadID);
19999 }
20000 }
20001 }
20002 }
20003 return root;
20004}
20005
20006function warnIfNotCurrentlyBatchingInDev(fiber) {
20007 {
20008 if (isRendering === false && isBatchingUpdates === false) {
20009 warningWithoutStack$1(false, 'An update to %s inside a test was not wrapped in act(...).\n\n' + 'When testing, code that causes React state updates should be wrapped into act(...):\n\n' + 'act(() => {\n' + ' /* fire events that update state */\n' + '});\n' + '/* assert on the output */\n\n' + "This ensures that you're testing the behavior the user would see in the browser." + ' Learn more at https://fb.me/react-wrap-tests-with-act' + '%s', getComponentName(fiber.type), getStackByFiberInDevAndProd(fiber));
20010 }
20011 }
20012}
20013
20014function scheduleWork(fiber, expirationTime) {
20015 var root = scheduleWorkToRoot(fiber, expirationTime);
20016 if (root === null) {
20017 {
20018 switch (fiber.tag) {
20019 case ClassComponent:
20020 warnAboutUpdateOnUnmounted(fiber, true);
20021 break;
20022 case FunctionComponent:
20023 case ForwardRef:
20024 case MemoComponent:
20025 case SimpleMemoComponent:
20026 warnAboutUpdateOnUnmounted(fiber, false);
20027 break;
20028 }
20029 }
20030 return;
20031 }
20032
20033 if (!isWorking && nextRenderExpirationTime !== NoWork && expirationTime > nextRenderExpirationTime) {
20034 // This is an interruption. (Used for performance tracking.)
20035 interruptedBy = fiber;
20036 resetStack();
20037 }
20038 markPendingPriorityLevel(root, expirationTime);
20039 if (
20040 // If we're in the render phase, we don't need to schedule this root
20041 // for an update, because we'll do it before we exit...
20042 !isWorking || isCommitting$1 ||
20043 // ...unless this is a different root than the one we're rendering.
20044 nextRoot !== root) {
20045 var rootExpirationTime = root.expirationTime;
20046 requestWork(root, rootExpirationTime);
20047 }
20048 if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {
20049 // Reset this back to zero so subsequent updates don't throw.
20050 nestedUpdateCount = 0;
20051 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.');
20052 }
20053}
20054
20055function syncUpdates(fn, a, b, c, d) {
20056 return unstable_runWithPriority(unstable_ImmediatePriority, function () {
20057 return fn(a, b, c, d);
20058 });
20059}
20060
20061// TODO: Everything below this is written as if it has been lifted to the
20062// renderers. I'll do this in a follow-up.
20063
20064// Linked-list of roots
20065var firstScheduledRoot = null;
20066var lastScheduledRoot = null;
20067
20068var callbackExpirationTime = NoWork;
20069var callbackID = void 0;
20070var isRendering = false;
20071var nextFlushedRoot = null;
20072var nextFlushedExpirationTime = NoWork;
20073var lowestPriorityPendingInteractiveExpirationTime = NoWork;
20074var hasUnhandledError = false;
20075var unhandledError = null;
20076
20077var isBatchingUpdates = false;
20078var isUnbatchingUpdates = false;
20079
20080var completedBatches = null;
20081
20082var originalStartTimeMs = unstable_now();
20083var currentRendererTime = msToExpirationTime(originalStartTimeMs);
20084var currentSchedulerTime = currentRendererTime;
20085
20086// Use these to prevent an infinite loop of nested updates
20087var NESTED_UPDATE_LIMIT = 50;
20088var nestedUpdateCount = 0;
20089var lastCommittedRootDuringThisBatch = null;
20090
20091function recomputeCurrentRendererTime() {
20092 var currentTimeMs = unstable_now() - originalStartTimeMs;
20093 currentRendererTime = msToExpirationTime(currentTimeMs);
20094}
20095
20096function scheduleCallbackWithExpirationTime(root, expirationTime) {
20097 if (callbackExpirationTime !== NoWork) {
20098 // A callback is already scheduled. Check its expiration time (timeout).
20099 if (expirationTime < callbackExpirationTime) {
20100 // Existing callback has sufficient timeout. Exit.
20101 return;
20102 } else {
20103 if (callbackID !== null) {
20104 // Existing callback has insufficient timeout. Cancel and schedule a
20105 // new one.
20106 unstable_cancelCallback(callbackID);
20107 }
20108 }
20109 // The request callback timer is already running. Don't start a new one.
20110 } else {
20111 startRequestCallbackTimer();
20112 }
20113
20114 callbackExpirationTime = expirationTime;
20115 var currentMs = unstable_now() - originalStartTimeMs;
20116 var expirationTimeMs = expirationTimeToMs(expirationTime);
20117 var timeout = expirationTimeMs - currentMs;
20118 callbackID = unstable_scheduleCallback(performAsyncWork, { timeout: timeout });
20119}
20120
20121// For every call to renderRoot, one of onFatal, onComplete, onSuspend, and
20122// onYield is called upon exiting. We use these in lieu of returning a tuple.
20123// I've also chosen not to inline them into renderRoot because these will
20124// eventually be lifted into the renderer.
20125function onFatal(root) {
20126 root.finishedWork = null;
20127}
20128
20129function onComplete(root, finishedWork, expirationTime) {
20130 root.pendingCommitExpirationTime = expirationTime;
20131 root.finishedWork = finishedWork;
20132}
20133
20134function onSuspend(root, finishedWork, suspendedExpirationTime, rootExpirationTime, msUntilTimeout) {
20135 root.expirationTime = rootExpirationTime;
20136 if (msUntilTimeout === 0 && !shouldYieldToRenderer()) {
20137 // Don't wait an additional tick. Commit the tree immediately.
20138 root.pendingCommitExpirationTime = suspendedExpirationTime;
20139 root.finishedWork = finishedWork;
20140 } else if (msUntilTimeout > 0) {
20141 // Wait `msUntilTimeout` milliseconds before committing.
20142 root.timeoutHandle = scheduleTimeout(onTimeout.bind(null, root, finishedWork, suspendedExpirationTime), msUntilTimeout);
20143 }
20144}
20145
20146function onYield(root) {
20147 root.finishedWork = null;
20148}
20149
20150function onTimeout(root, finishedWork, suspendedExpirationTime) {
20151 // The root timed out. Commit it.
20152 root.pendingCommitExpirationTime = suspendedExpirationTime;
20153 root.finishedWork = finishedWork;
20154 // Read the current time before entering the commit phase. We can be
20155 // certain this won't cause tearing related to batching of event updates
20156 // because we're at the top of a timer event.
20157 recomputeCurrentRendererTime();
20158 currentSchedulerTime = currentRendererTime;
20159 flushRoot(root, suspendedExpirationTime);
20160}
20161
20162function onCommit(root, expirationTime) {
20163 root.expirationTime = expirationTime;
20164 root.finishedWork = null;
20165}
20166
20167function requestCurrentTime() {
20168 // requestCurrentTime is called by the scheduler to compute an expiration
20169 // time.
20170 //
20171 // Expiration times are computed by adding to the current time (the start
20172 // time). However, if two updates are scheduled within the same event, we
20173 // should treat their start times as simultaneous, even if the actual clock
20174 // time has advanced between the first and second call.
20175
20176 // In other words, because expiration times determine how updates are batched,
20177 // we want all updates of like priority that occur within the same event to
20178 // receive the same expiration time. Otherwise we get tearing.
20179 //
20180 // We keep track of two separate times: the current "renderer" time and the
20181 // current "scheduler" time. The renderer time can be updated whenever; it
20182 // only exists to minimize the calls performance.now.
20183 //
20184 // But the scheduler time can only be updated if there's no pending work, or
20185 // if we know for certain that we're not in the middle of an event.
20186
20187 if (isRendering) {
20188 // We're already rendering. Return the most recently read time.
20189 return currentSchedulerTime;
20190 }
20191 // Check if there's pending work.
20192 findHighestPriorityRoot();
20193 if (nextFlushedExpirationTime === NoWork || nextFlushedExpirationTime === Never) {
20194 // If there's no pending work, or if the pending work is offscreen, we can
20195 // read the current time without risk of tearing.
20196 recomputeCurrentRendererTime();
20197 currentSchedulerTime = currentRendererTime;
20198 return currentSchedulerTime;
20199 }
20200 // There's already pending work. We might be in the middle of a browser
20201 // event. If we were to read the current time, it could cause multiple updates
20202 // within the same event to receive different expiration times, leading to
20203 // tearing. Return the last read time. During the next idle callback, the
20204 // time will be updated.
20205 return currentSchedulerTime;
20206}
20207
20208// requestWork is called by the scheduler whenever a root receives an update.
20209// It's up to the renderer to call renderRoot at some point in the future.
20210function requestWork(root, expirationTime) {
20211 addRootToSchedule(root, expirationTime);
20212 if (isRendering) {
20213 // Prevent reentrancy. Remaining work will be scheduled at the end of
20214 // the currently rendering batch.
20215 return;
20216 }
20217
20218 if (isBatchingUpdates) {
20219 // Flush work at the end of the batch.
20220 if (isUnbatchingUpdates) {
20221 // ...unless we're inside unbatchedUpdates, in which case we should
20222 // flush it now.
20223 nextFlushedRoot = root;
20224 nextFlushedExpirationTime = Sync;
20225 performWorkOnRoot(root, Sync, false);
20226 }
20227 return;
20228 }
20229
20230 // TODO: Get rid of Sync and use current time?
20231 if (expirationTime === Sync) {
20232 performSyncWork();
20233 } else {
20234 scheduleCallbackWithExpirationTime(root, expirationTime);
20235 }
20236}
20237
20238function addRootToSchedule(root, expirationTime) {
20239 // Add the root to the schedule.
20240 // Check if this root is already part of the schedule.
20241 if (root.nextScheduledRoot === null) {
20242 // This root is not already scheduled. Add it.
20243 root.expirationTime = expirationTime;
20244 if (lastScheduledRoot === null) {
20245 firstScheduledRoot = lastScheduledRoot = root;
20246 root.nextScheduledRoot = root;
20247 } else {
20248 lastScheduledRoot.nextScheduledRoot = root;
20249 lastScheduledRoot = root;
20250 lastScheduledRoot.nextScheduledRoot = firstScheduledRoot;
20251 }
20252 } else {
20253 // This root is already scheduled, but its priority may have increased.
20254 var remainingExpirationTime = root.expirationTime;
20255 if (expirationTime > remainingExpirationTime) {
20256 // Update the priority.
20257 root.expirationTime = expirationTime;
20258 }
20259 }
20260}
20261
20262function findHighestPriorityRoot() {
20263 var highestPriorityWork = NoWork;
20264 var highestPriorityRoot = null;
20265 if (lastScheduledRoot !== null) {
20266 var previousScheduledRoot = lastScheduledRoot;
20267 var root = firstScheduledRoot;
20268 while (root !== null) {
20269 var remainingExpirationTime = root.expirationTime;
20270 if (remainingExpirationTime === NoWork) {
20271 // This root no longer has work. Remove it from the scheduler.
20272
20273 // TODO: This check is redudant, but Flow is confused by the branch
20274 // below where we set lastScheduledRoot to null, even though we break
20275 // from the loop right after.
20276 !(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;
20277 if (root === root.nextScheduledRoot) {
20278 // This is the only root in the list.
20279 root.nextScheduledRoot = null;
20280 firstScheduledRoot = lastScheduledRoot = null;
20281 break;
20282 } else if (root === firstScheduledRoot) {
20283 // This is the first root in the list.
20284 var next = root.nextScheduledRoot;
20285 firstScheduledRoot = next;
20286 lastScheduledRoot.nextScheduledRoot = next;
20287 root.nextScheduledRoot = null;
20288 } else if (root === lastScheduledRoot) {
20289 // This is the last root in the list.
20290 lastScheduledRoot = previousScheduledRoot;
20291 lastScheduledRoot.nextScheduledRoot = firstScheduledRoot;
20292 root.nextScheduledRoot = null;
20293 break;
20294 } else {
20295 previousScheduledRoot.nextScheduledRoot = root.nextScheduledRoot;
20296 root.nextScheduledRoot = null;
20297 }
20298 root = previousScheduledRoot.nextScheduledRoot;
20299 } else {
20300 if (remainingExpirationTime > highestPriorityWork) {
20301 // Update the priority, if it's higher
20302 highestPriorityWork = remainingExpirationTime;
20303 highestPriorityRoot = root;
20304 }
20305 if (root === lastScheduledRoot) {
20306 break;
20307 }
20308 if (highestPriorityWork === Sync) {
20309 // Sync is highest priority by definition so
20310 // we can stop searching.
20311 break;
20312 }
20313 previousScheduledRoot = root;
20314 root = root.nextScheduledRoot;
20315 }
20316 }
20317 }
20318
20319 nextFlushedRoot = highestPriorityRoot;
20320 nextFlushedExpirationTime = highestPriorityWork;
20321}
20322
20323// TODO: This wrapper exists because many of the older tests (the ones that use
20324// flushDeferredPri) rely on the number of times `shouldYield` is called. We
20325// should get rid of it.
20326var didYield = false;
20327function shouldYieldToRenderer() {
20328 if (didYield) {
20329 return true;
20330 }
20331 if (unstable_shouldYield()) {
20332 didYield = true;
20333 return true;
20334 }
20335 return false;
20336}
20337
20338function performAsyncWork() {
20339 try {
20340 if (!shouldYieldToRenderer()) {
20341 // The callback timed out. That means at least one update has expired.
20342 // Iterate through the root schedule. If they contain expired work, set
20343 // the next render expiration time to the current time. This has the effect
20344 // of flushing all expired work in a single batch, instead of flushing each
20345 // level one at a time.
20346 if (firstScheduledRoot !== null) {
20347 recomputeCurrentRendererTime();
20348 var root = firstScheduledRoot;
20349 do {
20350 didExpireAtExpirationTime(root, currentRendererTime);
20351 // The root schedule is circular, so this is never null.
20352 root = root.nextScheduledRoot;
20353 } while (root !== firstScheduledRoot);
20354 }
20355 }
20356 performWork(NoWork, true);
20357 } finally {
20358 didYield = false;
20359 }
20360}
20361
20362function performSyncWork() {
20363 performWork(Sync, false);
20364}
20365
20366function performWork(minExpirationTime, isYieldy) {
20367 // Keep working on roots until there's no more work, or until there's a higher
20368 // priority event.
20369 findHighestPriorityRoot();
20370
20371 if (isYieldy) {
20372 recomputeCurrentRendererTime();
20373 currentSchedulerTime = currentRendererTime;
20374
20375 if (enableUserTimingAPI) {
20376 var didExpire = nextFlushedExpirationTime > currentRendererTime;
20377 var timeout = expirationTimeToMs(nextFlushedExpirationTime);
20378 stopRequestCallbackTimer(didExpire, timeout);
20379 }
20380
20381 while (nextFlushedRoot !== null && nextFlushedExpirationTime !== NoWork && minExpirationTime <= nextFlushedExpirationTime && !(didYield && currentRendererTime > nextFlushedExpirationTime)) {
20382 performWorkOnRoot(nextFlushedRoot, nextFlushedExpirationTime, currentRendererTime > nextFlushedExpirationTime);
20383 findHighestPriorityRoot();
20384 recomputeCurrentRendererTime();
20385 currentSchedulerTime = currentRendererTime;
20386 }
20387 } else {
20388 while (nextFlushedRoot !== null && nextFlushedExpirationTime !== NoWork && minExpirationTime <= nextFlushedExpirationTime) {
20389 performWorkOnRoot(nextFlushedRoot, nextFlushedExpirationTime, false);
20390 findHighestPriorityRoot();
20391 }
20392 }
20393
20394 // We're done flushing work. Either we ran out of time in this callback,
20395 // or there's no more work left with sufficient priority.
20396
20397 // If we're inside a callback, set this to false since we just completed it.
20398 if (isYieldy) {
20399 callbackExpirationTime = NoWork;
20400 callbackID = null;
20401 }
20402 // If there's work left over, schedule a new callback.
20403 if (nextFlushedExpirationTime !== NoWork) {
20404 scheduleCallbackWithExpirationTime(nextFlushedRoot, nextFlushedExpirationTime);
20405 }
20406
20407 // Clean-up.
20408 finishRendering();
20409}
20410
20411function flushRoot(root, expirationTime) {
20412 !!isRendering ? invariant(false, 'work.commit(): Cannot commit while already rendering. This likely means you attempted to commit from inside a lifecycle method.') : void 0;
20413 // Perform work on root as if the given expiration time is the current time.
20414 // This has the effect of synchronously flushing all work up to and
20415 // including the given time.
20416 nextFlushedRoot = root;
20417 nextFlushedExpirationTime = expirationTime;
20418 performWorkOnRoot(root, expirationTime, false);
20419 // Flush any sync work that was scheduled by lifecycles
20420 performSyncWork();
20421}
20422
20423function finishRendering() {
20424 nestedUpdateCount = 0;
20425 lastCommittedRootDuringThisBatch = null;
20426
20427 if (completedBatches !== null) {
20428 var batches = completedBatches;
20429 completedBatches = null;
20430 for (var i = 0; i < batches.length; i++) {
20431 var batch = batches[i];
20432 try {
20433 batch._onComplete();
20434 } catch (error) {
20435 if (!hasUnhandledError) {
20436 hasUnhandledError = true;
20437 unhandledError = error;
20438 }
20439 }
20440 }
20441 }
20442
20443 if (hasUnhandledError) {
20444 var error = unhandledError;
20445 unhandledError = null;
20446 hasUnhandledError = false;
20447 throw error;
20448 }
20449}
20450
20451function performWorkOnRoot(root, expirationTime, isYieldy) {
20452 !!isRendering ? invariant(false, 'performWorkOnRoot was called recursively. This error is likely caused by a bug in React. Please file an issue.') : void 0;
20453
20454 isRendering = true;
20455
20456 // Check if this is async work or sync/expired work.
20457 if (!isYieldy) {
20458 // Flush work without yielding.
20459 // TODO: Non-yieldy work does not necessarily imply expired work. A renderer
20460 // may want to perform some work without yielding, but also without
20461 // requiring the root to complete (by triggering placeholders).
20462
20463 var finishedWork = root.finishedWork;
20464 if (finishedWork !== null) {
20465 // This root is already complete. We can commit it.
20466 completeRoot(root, finishedWork, expirationTime);
20467 } else {
20468 root.finishedWork = null;
20469 // If this root previously suspended, clear its existing timeout, since
20470 // we're about to try rendering again.
20471 var timeoutHandle = root.timeoutHandle;
20472 if (timeoutHandle !== noTimeout) {
20473 root.timeoutHandle = noTimeout;
20474 // $FlowFixMe Complains noTimeout is not a TimeoutID, despite the check above
20475 cancelTimeout(timeoutHandle);
20476 }
20477 renderRoot(root, isYieldy);
20478 finishedWork = root.finishedWork;
20479 if (finishedWork !== null) {
20480 // We've completed the root. Commit it.
20481 completeRoot(root, finishedWork, expirationTime);
20482 }
20483 }
20484 } else {
20485 // Flush async work.
20486 var _finishedWork = root.finishedWork;
20487 if (_finishedWork !== null) {
20488 // This root is already complete. We can commit it.
20489 completeRoot(root, _finishedWork, expirationTime);
20490 } else {
20491 root.finishedWork = null;
20492 // If this root previously suspended, clear its existing timeout, since
20493 // we're about to try rendering again.
20494 var _timeoutHandle = root.timeoutHandle;
20495 if (_timeoutHandle !== noTimeout) {
20496 root.timeoutHandle = noTimeout;
20497 // $FlowFixMe Complains noTimeout is not a TimeoutID, despite the check above
20498 cancelTimeout(_timeoutHandle);
20499 }
20500 renderRoot(root, isYieldy);
20501 _finishedWork = root.finishedWork;
20502 if (_finishedWork !== null) {
20503 // We've completed the root. Check the if we should yield one more time
20504 // before committing.
20505 if (!shouldYieldToRenderer()) {
20506 // Still time left. Commit the root.
20507 completeRoot(root, _finishedWork, expirationTime);
20508 } else {
20509 // There's no time left. Mark this root as complete. We'll come
20510 // back and commit it later.
20511 root.finishedWork = _finishedWork;
20512 }
20513 }
20514 }
20515 }
20516
20517 isRendering = false;
20518}
20519
20520function completeRoot(root, finishedWork, expirationTime) {
20521 // Check if there's a batch that matches this expiration time.
20522 var firstBatch = root.firstBatch;
20523 if (firstBatch !== null && firstBatch._expirationTime >= expirationTime) {
20524 if (completedBatches === null) {
20525 completedBatches = [firstBatch];
20526 } else {
20527 completedBatches.push(firstBatch);
20528 }
20529 if (firstBatch._defer) {
20530 // This root is blocked from committing by a batch. Unschedule it until
20531 // we receive another update.
20532 root.finishedWork = finishedWork;
20533 root.expirationTime = NoWork;
20534 return;
20535 }
20536 }
20537
20538 // Commit the root.
20539 root.finishedWork = null;
20540
20541 // Check if this is a nested update (a sync update scheduled during the
20542 // commit phase).
20543 if (root === lastCommittedRootDuringThisBatch) {
20544 // If the next root is the same as the previous root, this is a nested
20545 // update. To prevent an infinite loop, increment the nested update count.
20546 nestedUpdateCount++;
20547 } else {
20548 // Reset whenever we switch roots.
20549 lastCommittedRootDuringThisBatch = root;
20550 nestedUpdateCount = 0;
20551 }
20552 unstable_runWithPriority(unstable_ImmediatePriority, function () {
20553 commitRoot(root, finishedWork);
20554 });
20555}
20556
20557function onUncaughtError(error) {
20558 !(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;
20559 // Unschedule this root so we don't work on it again until there's
20560 // another update.
20561 nextFlushedRoot.expirationTime = NoWork;
20562 if (!hasUnhandledError) {
20563 hasUnhandledError = true;
20564 unhandledError = error;
20565 }
20566}
20567
20568// TODO: Batching should be implemented at the renderer level, not inside
20569// the reconciler.
20570function batchedUpdates$1(fn, a) {
20571 var previousIsBatchingUpdates = isBatchingUpdates;
20572 isBatchingUpdates = true;
20573 try {
20574 return fn(a);
20575 } finally {
20576 isBatchingUpdates = previousIsBatchingUpdates;
20577 if (!isBatchingUpdates && !isRendering) {
20578 performSyncWork();
20579 }
20580 }
20581}
20582
20583// TODO: Batching should be implemented at the renderer level, not inside
20584// the reconciler.
20585function unbatchedUpdates(fn, a) {
20586 if (isBatchingUpdates && !isUnbatchingUpdates) {
20587 isUnbatchingUpdates = true;
20588 try {
20589 return fn(a);
20590 } finally {
20591 isUnbatchingUpdates = false;
20592 }
20593 }
20594 return fn(a);
20595}
20596
20597// TODO: Batching should be implemented at the renderer level, not within
20598// the reconciler.
20599function flushSync(fn, a) {
20600 !!isRendering ? invariant(false, 'flushSync was called from inside a lifecycle method. It cannot be called when React is already rendering.') : void 0;
20601 var previousIsBatchingUpdates = isBatchingUpdates;
20602 isBatchingUpdates = true;
20603 try {
20604 return syncUpdates(fn, a);
20605 } finally {
20606 isBatchingUpdates = previousIsBatchingUpdates;
20607 performSyncWork();
20608 }
20609}
20610
20611function interactiveUpdates$1(fn, a, b) {
20612 // If there are any pending interactive updates, synchronously flush them.
20613 // This needs to happen before we read any handlers, because the effect of
20614 // the previous event may influence which handlers are called during
20615 // this event.
20616 if (!isBatchingUpdates && !isRendering && lowestPriorityPendingInteractiveExpirationTime !== NoWork) {
20617 // Synchronously flush pending interactive updates.
20618 performWork(lowestPriorityPendingInteractiveExpirationTime, false);
20619 lowestPriorityPendingInteractiveExpirationTime = NoWork;
20620 }
20621 var previousIsBatchingUpdates = isBatchingUpdates;
20622 isBatchingUpdates = true;
20623 try {
20624 return unstable_runWithPriority(unstable_UserBlockingPriority, function () {
20625 return fn(a, b);
20626 });
20627 } finally {
20628 isBatchingUpdates = previousIsBatchingUpdates;
20629 if (!isBatchingUpdates && !isRendering) {
20630 performSyncWork();
20631 }
20632 }
20633}
20634
20635function flushInteractiveUpdates$1() {
20636 if (!isRendering && lowestPriorityPendingInteractiveExpirationTime !== NoWork) {
20637 // Synchronously flush pending interactive updates.
20638 performWork(lowestPriorityPendingInteractiveExpirationTime, false);
20639 lowestPriorityPendingInteractiveExpirationTime = NoWork;
20640 }
20641}
20642
20643function flushControlled(fn) {
20644 var previousIsBatchingUpdates = isBatchingUpdates;
20645 isBatchingUpdates = true;
20646 try {
20647 syncUpdates(fn);
20648 } finally {
20649 isBatchingUpdates = previousIsBatchingUpdates;
20650 if (!isBatchingUpdates && !isRendering) {
20651 performSyncWork();
20652 }
20653 }
20654}
20655
20656// 0 is PROD, 1 is DEV.
20657// Might add PROFILE later.
20658
20659
20660var didWarnAboutNestedUpdates = void 0;
20661var didWarnAboutFindNodeInStrictMode = void 0;
20662
20663{
20664 didWarnAboutNestedUpdates = false;
20665 didWarnAboutFindNodeInStrictMode = {};
20666}
20667
20668function getContextForSubtree(parentComponent) {
20669 if (!parentComponent) {
20670 return emptyContextObject;
20671 }
20672
20673 var fiber = get(parentComponent);
20674 var parentContext = findCurrentUnmaskedContext(fiber);
20675
20676 if (fiber.tag === ClassComponent) {
20677 var Component = fiber.type;
20678 if (isContextProvider(Component)) {
20679 return processChildContext(fiber, Component, parentContext);
20680 }
20681 }
20682
20683 return parentContext;
20684}
20685
20686function scheduleRootUpdate(current$$1, element, expirationTime, callback) {
20687 {
20688 if (phase === 'render' && current !== null && !didWarnAboutNestedUpdates) {
20689 didWarnAboutNestedUpdates = true;
20690 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');
20691 }
20692 }
20693
20694 var update = createUpdate(expirationTime);
20695 // Caution: React DevTools currently depends on this property
20696 // being called "element".
20697 update.payload = { element: element };
20698
20699 callback = callback === undefined ? null : callback;
20700 if (callback !== null) {
20701 !(typeof callback === 'function') ? warningWithoutStack$1(false, 'render(...): Expected the last optional `callback` argument to be a ' + 'function. Instead received: %s.', callback) : void 0;
20702 update.callback = callback;
20703 }
20704
20705 flushPassiveEffects();
20706 enqueueUpdate(current$$1, update);
20707 scheduleWork(current$$1, expirationTime);
20708
20709 return expirationTime;
20710}
20711
20712function updateContainerAtExpirationTime(element, container, parentComponent, expirationTime, callback) {
20713 // TODO: If this is a nested container, this won't be the root.
20714 var current$$1 = container.current;
20715
20716 {
20717 if (ReactFiberInstrumentation_1.debugTool) {
20718 if (current$$1.alternate === null) {
20719 ReactFiberInstrumentation_1.debugTool.onMountContainer(container);
20720 } else if (element === null) {
20721 ReactFiberInstrumentation_1.debugTool.onUnmountContainer(container);
20722 } else {
20723 ReactFiberInstrumentation_1.debugTool.onUpdateContainer(container);
20724 }
20725 }
20726 }
20727
20728 var context = getContextForSubtree(parentComponent);
20729 if (container.context === null) {
20730 container.context = context;
20731 } else {
20732 container.pendingContext = context;
20733 }
20734
20735 return scheduleRootUpdate(current$$1, element, expirationTime, callback);
20736}
20737
20738function findHostInstance(component) {
20739 var fiber = get(component);
20740 if (fiber === undefined) {
20741 if (typeof component.render === 'function') {
20742 invariant(false, 'Unable to find node on an unmounted component.');
20743 } else {
20744 invariant(false, 'Argument appears to not be a ReactComponent. Keys: %s', Object.keys(component));
20745 }
20746 }
20747 var hostFiber = findCurrentHostFiber(fiber);
20748 if (hostFiber === null) {
20749 return null;
20750 }
20751 return hostFiber.stateNode;
20752}
20753
20754function findHostInstanceWithWarning(component, methodName) {
20755 {
20756 var fiber = get(component);
20757 if (fiber === undefined) {
20758 if (typeof component.render === 'function') {
20759 invariant(false, 'Unable to find node on an unmounted component.');
20760 } else {
20761 invariant(false, 'Argument appears to not be a ReactComponent. Keys: %s', Object.keys(component));
20762 }
20763 }
20764 var hostFiber = findCurrentHostFiber(fiber);
20765 if (hostFiber === null) {
20766 return null;
20767 }
20768 if (hostFiber.mode & StrictMode) {
20769 var componentName = getComponentName(fiber.type) || 'Component';
20770 if (!didWarnAboutFindNodeInStrictMode[componentName]) {
20771 didWarnAboutFindNodeInStrictMode[componentName] = true;
20772 if (fiber.mode & StrictMode) {
20773 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));
20774 } else {
20775 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));
20776 }
20777 }
20778 }
20779 return hostFiber.stateNode;
20780 }
20781 return findHostInstance(component);
20782}
20783
20784function createContainer(containerInfo, isConcurrent, hydrate) {
20785 return createFiberRoot(containerInfo, isConcurrent, hydrate);
20786}
20787
20788function updateContainer(element, container, parentComponent, callback) {
20789 var current$$1 = container.current;
20790 var currentTime = requestCurrentTime();
20791 var expirationTime = computeExpirationForFiber(currentTime, current$$1);
20792 return updateContainerAtExpirationTime(element, container, parentComponent, expirationTime, callback);
20793}
20794
20795function getPublicRootInstance(container) {
20796 var containerFiber = container.current;
20797 if (!containerFiber.child) {
20798 return null;
20799 }
20800 switch (containerFiber.child.tag) {
20801 case HostComponent:
20802 return getPublicInstance(containerFiber.child.stateNode);
20803 default:
20804 return containerFiber.child.stateNode;
20805 }
20806}
20807
20808function findHostInstanceWithNoPortals(fiber) {
20809 var hostFiber = findCurrentHostFiberWithNoPortals(fiber);
20810 if (hostFiber === null) {
20811 return null;
20812 }
20813 return hostFiber.stateNode;
20814}
20815
20816var overrideProps = null;
20817
20818{
20819 var copyWithSetImpl = function (obj, path, idx, value) {
20820 if (idx >= path.length) {
20821 return value;
20822 }
20823 var key = path[idx];
20824 var updated = Array.isArray(obj) ? obj.slice() : _assign({}, obj);
20825 // $FlowFixMe number or string is fine here
20826 updated[key] = copyWithSetImpl(obj[key], path, idx + 1, value);
20827 return updated;
20828 };
20829
20830 var copyWithSet = function (obj, path, value) {
20831 return copyWithSetImpl(obj, path, 0, value);
20832 };
20833
20834 // Support DevTools props for function components, forwardRef, memo, host components, etc.
20835 overrideProps = function (fiber, path, value) {
20836 flushPassiveEffects();
20837 fiber.pendingProps = copyWithSet(fiber.memoizedProps, path, value);
20838 if (fiber.alternate) {
20839 fiber.alternate.pendingProps = fiber.pendingProps;
20840 }
20841 scheduleWork(fiber, Sync);
20842 };
20843}
20844
20845function injectIntoDevTools(devToolsConfig) {
20846 var findFiberByHostInstance = devToolsConfig.findFiberByHostInstance;
20847 var ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
20848
20849
20850 return injectInternals(_assign({}, devToolsConfig, {
20851 overrideProps: overrideProps,
20852 currentDispatcherRef: ReactCurrentDispatcher,
20853 findHostInstanceByFiber: function (fiber) {
20854 var hostFiber = findCurrentHostFiber(fiber);
20855 if (hostFiber === null) {
20856 return null;
20857 }
20858 return hostFiber.stateNode;
20859 },
20860 findFiberByHostInstance: function (instance) {
20861 if (!findFiberByHostInstance) {
20862 // Might not be implemented by the renderer.
20863 return null;
20864 }
20865 return findFiberByHostInstance(instance);
20866 }
20867 }));
20868}
20869
20870// This file intentionally does *not* have the Flow annotation.
20871// Don't add it. See `./inline-typed.js` for an explanation.
20872
20873function createPortal$1(children, containerInfo,
20874// TODO: figure out the API for cross-renderer implementation.
20875implementation) {
20876 var key = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
20877
20878 return {
20879 // This tag allow us to uniquely identify this as a React Portal
20880 $$typeof: REACT_PORTAL_TYPE,
20881 key: key == null ? null : '' + key,
20882 children: children,
20883 containerInfo: containerInfo,
20884 implementation: implementation
20885 };
20886}
20887
20888// TODO: this is special because it gets imported during build.
20889
20890var ReactVersion = '16.8.6';
20891
20892// TODO: This type is shared between the reconciler and ReactDOM, but will
20893// eventually be lifted out to the renderer.
20894
20895var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
20896
20897var topLevelUpdateWarnings = void 0;
20898var warnOnInvalidCallback = void 0;
20899var didWarnAboutUnstableCreatePortal = false;
20900
20901{
20902 if (typeof Map !== 'function' ||
20903 // $FlowIssue Flow incorrectly thinks Map has no prototype
20904 Map.prototype == null || typeof Map.prototype.forEach !== 'function' || typeof Set !== 'function' ||
20905 // $FlowIssue Flow incorrectly thinks Set has no prototype
20906 Set.prototype == null || typeof Set.prototype.clear !== 'function' || typeof Set.prototype.forEach !== 'function') {
20907 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');
20908 }
20909
20910 topLevelUpdateWarnings = function (container) {
20911 if (container._reactRootContainer && container.nodeType !== COMMENT_NODE) {
20912 var hostInstance = findHostInstanceWithNoPortals(container._reactRootContainer._internalRoot.current);
20913 if (hostInstance) {
20914 !(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;
20915 }
20916 }
20917
20918 var isRootRenderedBySomeReact = !!container._reactRootContainer;
20919 var rootEl = getReactRootElementInContainer(container);
20920 var hasNonRootReactChild = !!(rootEl && getInstanceFromNode$1(rootEl));
20921
20922 !(!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;
20923
20924 !(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;
20925 };
20926
20927 warnOnInvalidCallback = function (callback, callerName) {
20928 !(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;
20929 };
20930}
20931
20932setRestoreImplementation(restoreControlledState$1);
20933
20934function ReactBatch(root) {
20935 var expirationTime = computeUniqueAsyncExpiration();
20936 this._expirationTime = expirationTime;
20937 this._root = root;
20938 this._next = null;
20939 this._callbacks = null;
20940 this._didComplete = false;
20941 this._hasChildren = false;
20942 this._children = null;
20943 this._defer = true;
20944}
20945ReactBatch.prototype.render = function (children) {
20946 !this._defer ? invariant(false, 'batch.render: Cannot render a batch that already committed.') : void 0;
20947 this._hasChildren = true;
20948 this._children = children;
20949 var internalRoot = this._root._internalRoot;
20950 var expirationTime = this._expirationTime;
20951 var work = new ReactWork();
20952 updateContainerAtExpirationTime(children, internalRoot, null, expirationTime, work._onCommit);
20953 return work;
20954};
20955ReactBatch.prototype.then = function (onComplete) {
20956 if (this._didComplete) {
20957 onComplete();
20958 return;
20959 }
20960 var callbacks = this._callbacks;
20961 if (callbacks === null) {
20962 callbacks = this._callbacks = [];
20963 }
20964 callbacks.push(onComplete);
20965};
20966ReactBatch.prototype.commit = function () {
20967 var internalRoot = this._root._internalRoot;
20968 var firstBatch = internalRoot.firstBatch;
20969 !(this._defer && firstBatch !== null) ? invariant(false, 'batch.commit: Cannot commit a batch multiple times.') : void 0;
20970
20971 if (!this._hasChildren) {
20972 // This batch is empty. Return.
20973 this._next = null;
20974 this._defer = false;
20975 return;
20976 }
20977
20978 var expirationTime = this._expirationTime;
20979
20980 // Ensure this is the first batch in the list.
20981 if (firstBatch !== this) {
20982 // This batch is not the earliest batch. We need to move it to the front.
20983 // Update its expiration time to be the expiration time of the earliest
20984 // batch, so that we can flush it without flushing the other batches.
20985 if (this._hasChildren) {
20986 expirationTime = this._expirationTime = firstBatch._expirationTime;
20987 // Rendering this batch again ensures its children will be the final state
20988 // when we flush (updates are processed in insertion order: last
20989 // update wins).
20990 // TODO: This forces a restart. Should we print a warning?
20991 this.render(this._children);
20992 }
20993
20994 // Remove the batch from the list.
20995 var previous = null;
20996 var batch = firstBatch;
20997 while (batch !== this) {
20998 previous = batch;
20999 batch = batch._next;
21000 }
21001 !(previous !== null) ? invariant(false, 'batch.commit: Cannot commit a batch multiple times.') : void 0;
21002 previous._next = batch._next;
21003
21004 // Add it to the front.
21005 this._next = firstBatch;
21006 firstBatch = internalRoot.firstBatch = this;
21007 }
21008
21009 // Synchronously flush all the work up to this batch's expiration time.
21010 this._defer = false;
21011 flushRoot(internalRoot, expirationTime);
21012
21013 // Pop the batch from the list.
21014 var next = this._next;
21015 this._next = null;
21016 firstBatch = internalRoot.firstBatch = next;
21017
21018 // Append the next earliest batch's children to the update queue.
21019 if (firstBatch !== null && firstBatch._hasChildren) {
21020 firstBatch.render(firstBatch._children);
21021 }
21022};
21023ReactBatch.prototype._onComplete = function () {
21024 if (this._didComplete) {
21025 return;
21026 }
21027 this._didComplete = true;
21028 var callbacks = this._callbacks;
21029 if (callbacks === null) {
21030 return;
21031 }
21032 // TODO: Error handling.
21033 for (var i = 0; i < callbacks.length; i++) {
21034 var _callback = callbacks[i];
21035 _callback();
21036 }
21037};
21038
21039function ReactWork() {
21040 this._callbacks = null;
21041 this._didCommit = false;
21042 // TODO: Avoid need to bind by replacing callbacks in the update queue with
21043 // list of Work objects.
21044 this._onCommit = this._onCommit.bind(this);
21045}
21046ReactWork.prototype.then = function (onCommit) {
21047 if (this._didCommit) {
21048 onCommit();
21049 return;
21050 }
21051 var callbacks = this._callbacks;
21052 if (callbacks === null) {
21053 callbacks = this._callbacks = [];
21054 }
21055 callbacks.push(onCommit);
21056};
21057ReactWork.prototype._onCommit = function () {
21058 if (this._didCommit) {
21059 return;
21060 }
21061 this._didCommit = true;
21062 var callbacks = this._callbacks;
21063 if (callbacks === null) {
21064 return;
21065 }
21066 // TODO: Error handling.
21067 for (var i = 0; i < callbacks.length; i++) {
21068 var _callback2 = callbacks[i];
21069 !(typeof _callback2 === 'function') ? invariant(false, 'Invalid argument passed as callback. Expected a function. Instead received: %s', _callback2) : void 0;
21070 _callback2();
21071 }
21072};
21073
21074function ReactRoot(container, isConcurrent, hydrate) {
21075 var root = createContainer(container, isConcurrent, hydrate);
21076 this._internalRoot = root;
21077}
21078ReactRoot.prototype.render = function (children, callback) {
21079 var root = this._internalRoot;
21080 var work = new ReactWork();
21081 callback = callback === undefined ? null : callback;
21082 {
21083 warnOnInvalidCallback(callback, 'render');
21084 }
21085 if (callback !== null) {
21086 work.then(callback);
21087 }
21088 updateContainer(children, root, null, work._onCommit);
21089 return work;
21090};
21091ReactRoot.prototype.unmount = function (callback) {
21092 var root = this._internalRoot;
21093 var work = new ReactWork();
21094 callback = callback === undefined ? null : callback;
21095 {
21096 warnOnInvalidCallback(callback, 'render');
21097 }
21098 if (callback !== null) {
21099 work.then(callback);
21100 }
21101 updateContainer(null, root, null, work._onCommit);
21102 return work;
21103};
21104ReactRoot.prototype.legacy_renderSubtreeIntoContainer = function (parentComponent, children, callback) {
21105 var root = this._internalRoot;
21106 var work = new ReactWork();
21107 callback = callback === undefined ? null : callback;
21108 {
21109 warnOnInvalidCallback(callback, 'render');
21110 }
21111 if (callback !== null) {
21112 work.then(callback);
21113 }
21114 updateContainer(children, root, parentComponent, work._onCommit);
21115 return work;
21116};
21117ReactRoot.prototype.createBatch = function () {
21118 var batch = new ReactBatch(this);
21119 var expirationTime = batch._expirationTime;
21120
21121 var internalRoot = this._internalRoot;
21122 var firstBatch = internalRoot.firstBatch;
21123 if (firstBatch === null) {
21124 internalRoot.firstBatch = batch;
21125 batch._next = null;
21126 } else {
21127 // Insert sorted by expiration time then insertion order
21128 var insertAfter = null;
21129 var insertBefore = firstBatch;
21130 while (insertBefore !== null && insertBefore._expirationTime >= expirationTime) {
21131 insertAfter = insertBefore;
21132 insertBefore = insertBefore._next;
21133 }
21134 batch._next = insertBefore;
21135 if (insertAfter !== null) {
21136 insertAfter._next = batch;
21137 }
21138 }
21139
21140 return batch;
21141};
21142
21143/**
21144 * True if the supplied DOM node is a valid node element.
21145 *
21146 * @param {?DOMElement} node The candidate DOM node.
21147 * @return {boolean} True if the DOM is a valid DOM node.
21148 * @internal
21149 */
21150function isValidContainer(node) {
21151 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 '));
21152}
21153
21154function getReactRootElementInContainer(container) {
21155 if (!container) {
21156 return null;
21157 }
21158
21159 if (container.nodeType === DOCUMENT_NODE) {
21160 return container.documentElement;
21161 } else {
21162 return container.firstChild;
21163 }
21164}
21165
21166function shouldHydrateDueToLegacyHeuristic(container) {
21167 var rootElement = getReactRootElementInContainer(container);
21168 return !!(rootElement && rootElement.nodeType === ELEMENT_NODE && rootElement.hasAttribute(ROOT_ATTRIBUTE_NAME));
21169}
21170
21171setBatchingImplementation(batchedUpdates$1, interactiveUpdates$1, flushInteractiveUpdates$1);
21172
21173var warnedAboutHydrateAPI = false;
21174
21175function legacyCreateRootFromDOMContainer(container, forceHydrate) {
21176 var shouldHydrate = forceHydrate || shouldHydrateDueToLegacyHeuristic(container);
21177 // First clear any existing content.
21178 if (!shouldHydrate) {
21179 var warned = false;
21180 var rootSibling = void 0;
21181 while (rootSibling = container.lastChild) {
21182 {
21183 if (!warned && rootSibling.nodeType === ELEMENT_NODE && rootSibling.hasAttribute(ROOT_ATTRIBUTE_NAME)) {
21184 warned = true;
21185 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.');
21186 }
21187 }
21188 container.removeChild(rootSibling);
21189 }
21190 }
21191 {
21192 if (shouldHydrate && !forceHydrate && !warnedAboutHydrateAPI) {
21193 warnedAboutHydrateAPI = true;
21194 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.');
21195 }
21196 }
21197 // Legacy roots are not async by default.
21198 var isConcurrent = false;
21199 return new ReactRoot(container, isConcurrent, shouldHydrate);
21200}
21201
21202function legacyRenderSubtreeIntoContainer(parentComponent, children, container, forceHydrate, callback) {
21203 {
21204 topLevelUpdateWarnings(container);
21205 }
21206
21207 // TODO: Without `any` type, Flow says "Property cannot be accessed on any
21208 // member of intersection type." Whyyyyyy.
21209 var root = container._reactRootContainer;
21210 if (!root) {
21211 // Initial mount
21212 root = container._reactRootContainer = legacyCreateRootFromDOMContainer(container, forceHydrate);
21213 if (typeof callback === 'function') {
21214 var originalCallback = callback;
21215 callback = function () {
21216 var instance = getPublicRootInstance(root._internalRoot);
21217 originalCallback.call(instance);
21218 };
21219 }
21220 // Initial mount should not be batched.
21221 unbatchedUpdates(function () {
21222 if (parentComponent != null) {
21223 root.legacy_renderSubtreeIntoContainer(parentComponent, children, callback);
21224 } else {
21225 root.render(children, callback);
21226 }
21227 });
21228 } else {
21229 if (typeof callback === 'function') {
21230 var _originalCallback = callback;
21231 callback = function () {
21232 var instance = getPublicRootInstance(root._internalRoot);
21233 _originalCallback.call(instance);
21234 };
21235 }
21236 // Update
21237 if (parentComponent != null) {
21238 root.legacy_renderSubtreeIntoContainer(parentComponent, children, callback);
21239 } else {
21240 root.render(children, callback);
21241 }
21242 }
21243 return getPublicRootInstance(root._internalRoot);
21244}
21245
21246function createPortal$$1(children, container) {
21247 var key = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
21248
21249 !isValidContainer(container) ? invariant(false, 'Target container is not a DOM element.') : void 0;
21250 // TODO: pass ReactDOM portal implementation as third argument
21251 return createPortal$1(children, container, null, key);
21252}
21253
21254var ReactDOM = {
21255 createPortal: createPortal$$1,
21256
21257 findDOMNode: function (componentOrElement) {
21258 {
21259 var owner = ReactCurrentOwner.current;
21260 if (owner !== null && owner.stateNode !== null) {
21261 var warnedAboutRefsInRender = owner.stateNode._warnedAboutRefsInRender;
21262 !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;
21263 owner.stateNode._warnedAboutRefsInRender = true;
21264 }
21265 }
21266 if (componentOrElement == null) {
21267 return null;
21268 }
21269 if (componentOrElement.nodeType === ELEMENT_NODE) {
21270 return componentOrElement;
21271 }
21272 {
21273 return findHostInstanceWithWarning(componentOrElement, 'findDOMNode');
21274 }
21275 return findHostInstance(componentOrElement);
21276 },
21277 hydrate: function (element, container, callback) {
21278 !isValidContainer(container) ? invariant(false, 'Target container is not a DOM element.') : void 0;
21279 {
21280 !!container._reactHasBeenPassedToCreateRootDEV ? warningWithoutStack$1(false, 'You are calling ReactDOM.hydrate() on a container that was previously ' + 'passed to ReactDOM.%s(). This is not supported. ' + 'Did you mean to call createRoot(container, {hydrate: true}).render(element)?', enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot') : void 0;
21281 }
21282 // TODO: throw or warn if we couldn't hydrate?
21283 return legacyRenderSubtreeIntoContainer(null, element, container, true, callback);
21284 },
21285 render: function (element, container, callback) {
21286 !isValidContainer(container) ? invariant(false, 'Target container is not a DOM element.') : void 0;
21287 {
21288 !!container._reactHasBeenPassedToCreateRootDEV ? warningWithoutStack$1(false, 'You are calling ReactDOM.render() on a container that was previously ' + 'passed to ReactDOM.%s(). This is not supported. ' + 'Did you mean to call root.render(element)?', enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot') : void 0;
21289 }
21290 return legacyRenderSubtreeIntoContainer(null, element, container, false, callback);
21291 },
21292 unstable_renderSubtreeIntoContainer: function (parentComponent, element, containerNode, callback) {
21293 !isValidContainer(containerNode) ? invariant(false, 'Target container is not a DOM element.') : void 0;
21294 !(parentComponent != null && has(parentComponent)) ? invariant(false, 'parentComponent must be a valid React Component') : void 0;
21295 return legacyRenderSubtreeIntoContainer(parentComponent, element, containerNode, false, callback);
21296 },
21297 unmountComponentAtNode: function (container) {
21298 !isValidContainer(container) ? invariant(false, 'unmountComponentAtNode(...): Target container is not a DOM element.') : void 0;
21299
21300 {
21301 !!container._reactHasBeenPassedToCreateRootDEV ? warningWithoutStack$1(false, 'You are calling ReactDOM.unmountComponentAtNode() on a container that was previously ' + 'passed to ReactDOM.%s(). This is not supported. Did you mean to call root.unmount()?', enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot') : void 0;
21302 }
21303
21304 if (container._reactRootContainer) {
21305 {
21306 var rootEl = getReactRootElementInContainer(container);
21307 var renderedByDifferentReact = rootEl && !getInstanceFromNode$1(rootEl);
21308 !!renderedByDifferentReact ? warningWithoutStack$1(false, "unmountComponentAtNode(): The node you're attempting to unmount " + 'was rendered by another copy of React.') : void 0;
21309 }
21310
21311 // Unmount should not be batched.
21312 unbatchedUpdates(function () {
21313 legacyRenderSubtreeIntoContainer(null, null, container, false, function () {
21314 container._reactRootContainer = null;
21315 });
21316 });
21317 // If you call unmountComponentAtNode twice in quick succession, you'll
21318 // get `true` twice. That's probably fine?
21319 return true;
21320 } else {
21321 {
21322 var _rootEl = getReactRootElementInContainer(container);
21323 var hasNonRootReactChild = !!(_rootEl && getInstanceFromNode$1(_rootEl));
21324
21325 // Check if the container itself is a React root node.
21326 var isContainerReactRoot = container.nodeType === ELEMENT_NODE && isValidContainer(container.parentNode) && !!container.parentNode._reactRootContainer;
21327
21328 !!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;
21329 }
21330
21331 return false;
21332 }
21333 },
21334
21335
21336 // Temporary alias since we already shipped React 16 RC with it.
21337 // TODO: remove in React 17.
21338 unstable_createPortal: function () {
21339 if (!didWarnAboutUnstableCreatePortal) {
21340 didWarnAboutUnstableCreatePortal = true;
21341 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.');
21342 }
21343 return createPortal$$1.apply(undefined, arguments);
21344 },
21345
21346
21347 unstable_batchedUpdates: batchedUpdates$1,
21348
21349 unstable_interactiveUpdates: interactiveUpdates$1,
21350
21351 flushSync: flushSync,
21352
21353 unstable_createRoot: createRoot,
21354 unstable_flushControlled: flushControlled,
21355
21356 __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
21357 // Keep in sync with ReactDOMUnstableNativeDependencies.js
21358 // and ReactTestUtils.js. This is an array for better minification.
21359 Events: [getInstanceFromNode$1, getNodeFromInstance$1, getFiberCurrentPropsFromNode$1, injection.injectEventPluginsByName, eventNameDispatchConfigs, accumulateTwoPhaseDispatches, accumulateDirectDispatches, enqueueStateRestore, restoreStateIfNeeded, dispatchEvent, runEventsInBatch]
21360 }
21361};
21362
21363function createRoot(container, options) {
21364 var functionName = enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot';
21365 !isValidContainer(container) ? invariant(false, '%s(...): Target container is not a DOM element.', functionName) : void 0;
21366 {
21367 !!container._reactRootContainer ? warningWithoutStack$1(false, 'You are calling ReactDOM.%s() on a container that was previously ' + 'passed to ReactDOM.render(). This is not supported.', enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot') : void 0;
21368 container._reactHasBeenPassedToCreateRootDEV = true;
21369 }
21370 var hydrate = options != null && options.hydrate === true;
21371 return new ReactRoot(container, true, hydrate);
21372}
21373
21374if (enableStableConcurrentModeAPIs) {
21375 ReactDOM.createRoot = createRoot;
21376 ReactDOM.unstable_createRoot = undefined;
21377}
21378
21379var foundDevTools = injectIntoDevTools({
21380 findFiberByHostInstance: getClosestInstanceFromNode,
21381 bundleType: 1,
21382 version: ReactVersion,
21383 rendererPackageName: 'react-dom'
21384});
21385
21386{
21387 if (!foundDevTools && canUseDOM && window.top === window.self) {
21388 // If we're in Chrome or Firefox, provide a download link if not installed.
21389 if (navigator.userAgent.indexOf('Chrome') > -1 && navigator.userAgent.indexOf('Edge') === -1 || navigator.userAgent.indexOf('Firefox') > -1) {
21390 var protocol = window.location.protocol;
21391 // Don't warn in exotic cases like chrome-extension://.
21392 if (/^(https?|file):$/.test(protocol)) {
21393 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');
21394 }
21395 }
21396 }
21397}
21398
21399
21400
21401var ReactDOM$2 = Object.freeze({
21402 default: ReactDOM
21403});
21404
21405var ReactDOM$3 = ( ReactDOM$2 && ReactDOM ) || ReactDOM$2;
21406
21407// TODO: decide on the top-level export form.
21408// This is hacky but makes it work with both Rollup and Jest.
21409var reactDom = ReactDOM$3.default || ReactDOM$3;
21410
21411return reactDom;
21412
21413})));