2013-05-30 03:46:11 +08:00
|
|
|
/**
|
|
|
|
|
* Copyright 2013 Facebook, Inc.
|
|
|
|
|
*
|
|
|
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
|
* you may not use this file except in compliance with the License.
|
|
|
|
|
* You may obtain a copy of the License at
|
|
|
|
|
*
|
|
|
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
*
|
|
|
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
|
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
|
* See the License for the specific language governing permissions and
|
|
|
|
|
* limitations under the License.
|
|
|
|
|
*
|
|
|
|
|
* @providesModule ReactDefaultInjection
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
"use strict";
|
|
|
|
|
|
|
|
|
|
var ReactDOM = require('ReactDOM');
|
|
|
|
|
var ReactDOMForm = require('ReactDOMForm');
|
|
|
|
|
|
|
|
|
|
var DefaultEventPluginOrder = require('DefaultEventPluginOrder');
|
|
|
|
|
var EnterLeaveEventPlugin = require('EnterLeaveEventPlugin');
|
Add new textChange event: input + IE shim
IE8 doesn't support oninput and IE9 supports it badly but we can do
almost a perfect shim by listening to a handful of different events
(focus, blur, propertychange, selectionchange, keyup, keydown).
This always triggers event handlers during the browser's event loop (not
later in a setTimeout) and after the value property has been updated.
The only case I know of where this doesn't fire the event immediately is
if (in IE8) you modify the input value using JS and then the user does a
key repeat, in which case we fire the event on the second keydown.
Test Plan:
Modify ballmer-peak example to add es5-shim and to use onTextChange
instead of onInput. In IE8, IE9, and latest Chrome, make sure that the
event is fired upon:
* typing normally,
* backspacing,
* forward-deleting,
* cutting,
* pasting,
* context-menu deleting,
* dragging text to reorder characters.
After modifying the example to change .value, make sure that the event
is not fired as a result of the changes from JS (even when the input box
is focused).
2013-06-09 18:52:01 +08:00
|
|
|
var TextChangeEventPlugin = require('TextChangeEventPlugin');
|
2013-05-30 03:46:11 +08:00
|
|
|
var EventPluginHub = require('EventPluginHub');
|
|
|
|
|
var ReactInstanceHandles = require('ReactInstanceHandles');
|
|
|
|
|
var SimpleEventPlugin = require('SimpleEventPlugin');
|
|
|
|
|
|
|
|
|
|
function inject() {
|
|
|
|
|
/**
|
|
|
|
|
* Inject module for resolving DOM hierarchy and plugin ordering.
|
|
|
|
|
*/
|
|
|
|
|
EventPluginHub.injection.injectEventPluginOrder(DefaultEventPluginOrder);
|
|
|
|
|
EventPluginHub.injection.injectInstanceHandle(ReactInstanceHandles);
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Two important event plugins included by default (without having to require
|
|
|
|
|
* them).
|
|
|
|
|
*/
|
|
|
|
|
EventPluginHub.injection.injectEventPluginsByName({
|
|
|
|
|
'SimpleEventPlugin': SimpleEventPlugin,
|
Add new textChange event: input + IE shim
IE8 doesn't support oninput and IE9 supports it badly but we can do
almost a perfect shim by listening to a handful of different events
(focus, blur, propertychange, selectionchange, keyup, keydown).
This always triggers event handlers during the browser's event loop (not
later in a setTimeout) and after the value property has been updated.
The only case I know of where this doesn't fire the event immediately is
if (in IE8) you modify the input value using JS and then the user does a
key repeat, in which case we fire the event on the second keydown.
Test Plan:
Modify ballmer-peak example to add es5-shim and to use onTextChange
instead of onInput. In IE8, IE9, and latest Chrome, make sure that the
event is fired upon:
* typing normally,
* backspacing,
* forward-deleting,
* cutting,
* pasting,
* context-menu deleting,
* dragging text to reorder characters.
After modifying the example to change .value, make sure that the event
is not fired as a result of the changes from JS (even when the input box
is focused).
2013-06-09 18:52:01 +08:00
|
|
|
'EnterLeaveEventPlugin': EnterLeaveEventPlugin,
|
|
|
|
|
'TextChangeEventPlugin': TextChangeEventPlugin
|
2013-05-30 03:46:11 +08:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
* This is a bit of a hack. We need to override the <form> element
|
|
|
|
|
* to be a composite component because IE8 does not bubble or capture
|
|
|
|
|
* submit to the top level. In order to make this work with our
|
|
|
|
|
* dependency graph we need to inject it here.
|
|
|
|
|
*/
|
|
|
|
|
ReactDOM.injection.injectComponentClasses({
|
|
|
|
|
form: ReactDOMForm
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
module.exports = {
|
|
|
|
|
inject: inject
|
|
|
|
|
};
|