From 363723fc84f7b8477592e0105aeb331ec9a017af Mon Sep 17 00:00:00 2001 From: Florian Dold Date: Mon, 14 Aug 2017 05:01:11 +0200 Subject: node_modules --- node_modules/react-dom/lib/ChangeEventPlugin.js | 132 +++++++++--------------- 1 file changed, 49 insertions(+), 83 deletions(-) (limited to 'node_modules/react-dom/lib/ChangeEventPlugin.js') diff --git a/node_modules/react-dom/lib/ChangeEventPlugin.js b/node_modules/react-dom/lib/ChangeEventPlugin.js index 808bdbf46..0da17879e 100644 --- a/node_modules/react-dom/lib/ChangeEventPlugin.js +++ b/node_modules/react-dom/lib/ChangeEventPlugin.js @@ -17,6 +17,7 @@ var ReactDOMComponentTree = require('./ReactDOMComponentTree'); var ReactUpdates = require('./ReactUpdates'); var SyntheticEvent = require('./SyntheticEvent'); +var inputValueTracking = require('./inputValueTracking'); var getEventTarget = require('./getEventTarget'); var isEventSupported = require('./isEventSupported'); var isTextInputElement = require('./isTextInputElement'); @@ -31,13 +32,17 @@ var eventTypes = { } }; +function createAndAccumulateChangeEvent(inst, nativeEvent, target) { + var event = SyntheticEvent.getPooled(eventTypes.change, inst, nativeEvent, target); + event.type = 'change'; + EventPropagators.accumulateTwoPhaseDispatches(event); + return event; +} /** * For IE shims */ var activeElement = null; var activeElementInst = null; -var activeElementValue = null; -var activeElementValueProp = null; /** * SECTION: handle `change` event @@ -54,8 +59,7 @@ if (ExecutionEnvironment.canUseDOM) { } function manualDispatchChangeEvent(nativeEvent) { - var event = SyntheticEvent.getPooled(eventTypes.change, activeElementInst, nativeEvent, getEventTarget(nativeEvent)); - EventPropagators.accumulateTwoPhaseDispatches(event); + var event = createAndAccumulateChangeEvent(activeElementInst, nativeEvent, getEventTarget(nativeEvent)); // If change and propertychange bubbled, we'd just bind to it like all the // other events and have it go through ReactBrowserEventEmitter. Since it @@ -91,11 +95,21 @@ function stopWatchingForChangeEventIE8() { activeElementInst = null; } +function getInstIfValueChanged(targetInst, nativeEvent) { + var updated = inputValueTracking.updateValueIfChanged(targetInst); + var simulated = nativeEvent.simulated === true && ChangeEventPlugin._allowSimulatedPassThrough; + + if (updated || simulated) { + return targetInst; + } +} + function getTargetInstForChangeEvent(topLevelType, targetInst) { if (topLevelType === 'topChange') { return targetInst; } } + function handleEventsForChangeEventIE8(topLevelType, target, targetInst) { if (topLevelType === 'topFocus') { // stopWatching() should be a noop here but we call it just in case we @@ -114,105 +128,54 @@ var isInputEventSupported = false; if (ExecutionEnvironment.canUseDOM) { // IE9 claims to support the input event but fails to trigger it when // deleting text, so we ignore its input events. - // IE10+ fire input events to often, such when a placeholder - // changes or when an input with a placeholder is focused. - isInputEventSupported = isEventSupported('input') && (!document.documentMode || document.documentMode > 11); -} -/** - * (For IE <=11) Replacement getter/setter for the `value` property that gets - * set on the active element. - */ -var newValueProp = { - get: function () { - return activeElementValueProp.get.call(this); - }, - set: function (val) { - // Cast to a string so we can do equality checks. - activeElementValue = '' + val; - activeElementValueProp.set.call(this, val); - } -}; + isInputEventSupported = isEventSupported('input') && (!('documentMode' in document) || document.documentMode > 9); +} /** - * (For IE <=11) Starts tracking propertychange events on the passed-in element + * (For IE <=9) Starts tracking propertychange events on the passed-in element * and override the value property so that we can distinguish user events from * value changes in JS. */ function startWatchingForValueChange(target, targetInst) { activeElement = target; activeElementInst = targetInst; - activeElementValue = target.value; - activeElementValueProp = Object.getOwnPropertyDescriptor(target.constructor.prototype, 'value'); - - // Not guarded in a canDefineProperty check: IE8 supports defineProperty only - // on DOM elements - Object.defineProperty(activeElement, 'value', newValueProp); - if (activeElement.attachEvent) { - activeElement.attachEvent('onpropertychange', handlePropertyChange); - } else { - activeElement.addEventListener('propertychange', handlePropertyChange, false); - } + activeElement.attachEvent('onpropertychange', handlePropertyChange); } /** - * (For IE <=11) Removes the event listeners from the currently-tracked element, + * (For IE <=9) Removes the event listeners from the currently-tracked element, * if any exists. */ function stopWatchingForValueChange() { if (!activeElement) { return; } - - // delete restores the original property definition - delete activeElement.value; - - if (activeElement.detachEvent) { - activeElement.detachEvent('onpropertychange', handlePropertyChange); - } else { - activeElement.removeEventListener('propertychange', handlePropertyChange, false); - } + activeElement.detachEvent('onpropertychange', handlePropertyChange); activeElement = null; activeElementInst = null; - activeElementValue = null; - activeElementValueProp = null; } /** - * (For IE <=11) Handles a propertychange event, sending a `change` event if + * (For IE <=9) Handles a propertychange event, sending a `change` event if * the value of the active element has changed. */ function handlePropertyChange(nativeEvent) { if (nativeEvent.propertyName !== 'value') { return; } - var value = nativeEvent.srcElement.value; - if (value === activeElementValue) { - return; - } - activeElementValue = value; - - manualDispatchChangeEvent(nativeEvent); -} - -/** - * If a `change` event should be fired, returns the target's ID. - */ -function getTargetInstForInputEvent(topLevelType, targetInst) { - if (topLevelType === 'topInput') { - // In modern browsers (i.e., not IE8 or IE9), the input event is exactly - // what we want so fall through here and trigger an abstract event - return targetInst; + if (getInstIfValueChanged(activeElementInst, nativeEvent)) { + manualDispatchChangeEvent(nativeEvent); } } -function handleEventsForInputEventIE(topLevelType, target, targetInst) { +function handleEventsForInputEventPolyfill(topLevelType, target, targetInst) { if (topLevelType === 'topFocus') { // In IE8, we can capture almost all .value changes by adding a // propertychange handler and looking for events with propertyName // equal to 'value' - // In IE9-11, propertychange fires for most input events but is buggy and + // In IE9, propertychange fires for most input events but is buggy and // doesn't fire when text is deleted, but conveniently, selectionchange // appears to fire in all of the remaining cases so we catch those and // forward the event if the value has changed @@ -230,7 +193,7 @@ function handleEventsForInputEventIE(topLevelType, target, targetInst) { } // For IE8 and IE9. -function getTargetInstForInputEventIE(topLevelType, targetInst) { +function getTargetInstForInputEventPolyfill(topLevelType, targetInst, nativeEvent) { if (topLevelType === 'topSelectionChange' || topLevelType === 'topKeyUp' || topLevelType === 'topKeyDown') { // On the selectionchange event, the target is just document which isn't // helpful for us so just check activeElement instead. @@ -242,10 +205,7 @@ function getTargetInstForInputEventIE(topLevelType, targetInst) { // keystroke if user does a key repeat (it'll be a little delayed: right // before the second keystroke). Other input methods (e.g., paste) seem to // fire selectionchange normally. - if (activeElement && activeElement.value !== activeElementValue) { - activeElementValue = activeElement.value; - return activeElementInst; - } + return getInstIfValueChanged(activeElementInst, nativeEvent); } } @@ -256,12 +216,19 @@ function shouldUseClickEvent(elem) { // Use the `click` event to detect changes to checkbox and radio inputs. // This approach works across all browsers, whereas `change` does not fire // until `blur` in IE8. - return elem.nodeName && elem.nodeName.toLowerCase() === 'input' && (elem.type === 'checkbox' || elem.type === 'radio'); + var nodeName = elem.nodeName; + return nodeName && nodeName.toLowerCase() === 'input' && (elem.type === 'checkbox' || elem.type === 'radio'); } -function getTargetInstForClickEvent(topLevelType, targetInst) { +function getTargetInstForClickEvent(topLevelType, targetInst, nativeEvent) { if (topLevelType === 'topClick') { - return targetInst; + return getInstIfValueChanged(targetInst, nativeEvent); + } +} + +function getTargetInstForInputOrChangeEvent(topLevelType, targetInst, nativeEvent) { + if (topLevelType === 'topInput' || topLevelType === 'topChange') { + return getInstIfValueChanged(targetInst, nativeEvent); } } @@ -296,9 +263,11 @@ function handleControlledInputBlur(inst, node) { * - select */ var ChangeEventPlugin = { - eventTypes: eventTypes, + _allowSimulatedPassThrough: true, + _isInputEventSupported: isInputEventSupported, + extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) { var targetNode = targetInst ? ReactDOMComponentTree.getNodeFromInstance(targetInst) : window; @@ -311,21 +280,19 @@ var ChangeEventPlugin = { } } else if (isTextInputElement(targetNode)) { if (isInputEventSupported) { - getTargetInstFunc = getTargetInstForInputEvent; + getTargetInstFunc = getTargetInstForInputOrChangeEvent; } else { - getTargetInstFunc = getTargetInstForInputEventIE; - handleEventFunc = handleEventsForInputEventIE; + getTargetInstFunc = getTargetInstForInputEventPolyfill; + handleEventFunc = handleEventsForInputEventPolyfill; } } else if (shouldUseClickEvent(targetNode)) { getTargetInstFunc = getTargetInstForClickEvent; } if (getTargetInstFunc) { - var inst = getTargetInstFunc(topLevelType, targetInst); + var inst = getTargetInstFunc(topLevelType, targetInst, nativeEvent); if (inst) { - var event = SyntheticEvent.getPooled(eventTypes.change, inst, nativeEvent, nativeEventTarget); - event.type = 'change'; - EventPropagators.accumulateTwoPhaseDispatches(event); + var event = createAndAccumulateChangeEvent(inst, nativeEvent, nativeEventTarget); return event; } } @@ -339,7 +306,6 @@ var ChangeEventPlugin = { handleControlledInputBlur(targetInst, targetNode); } } - }; module.exports = ChangeEventPlugin; \ No newline at end of file -- cgit v1.2.3