1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 | 'use strict';
|
12 |
|
13 | var EventPropagators = require('./EventPropagators');
|
14 | var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');
|
15 | var FallbackCompositionState = require('./FallbackCompositionState');
|
16 | var SyntheticCompositionEvent = require('./SyntheticCompositionEvent');
|
17 | var SyntheticInputEvent = require('./SyntheticInputEvent');
|
18 |
|
19 | var END_KEYCODES = [9, 13, 27, 32];
|
20 | var START_KEYCODE = 229;
|
21 |
|
22 | var canUseCompositionEvent = ExecutionEnvironment.canUseDOM && 'CompositionEvent' in window;
|
23 |
|
24 | var documentMode = null;
|
25 | if (ExecutionEnvironment.canUseDOM && 'documentMode' in document) {
|
26 | documentMode = document.documentMode;
|
27 | }
|
28 |
|
29 |
|
30 |
|
31 |
|
32 | var canUseTextInputEvent = ExecutionEnvironment.canUseDOM && 'TextEvent' in window && !documentMode && !isPresto();
|
33 |
|
34 |
|
35 |
|
36 |
|
37 | var useFallbackCompositionData = ExecutionEnvironment.canUseDOM && (!canUseCompositionEvent || documentMode && documentMode > 8 && documentMode <= 11);
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 | function isPresto() {
|
44 | var opera = window.opera;
|
45 | return typeof opera === 'object' && typeof opera.version === 'function' && parseInt(opera.version(), 10) <= 12;
|
46 | }
|
47 |
|
48 | var SPACEBAR_CODE = 32;
|
49 | var SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE);
|
50 |
|
51 |
|
52 | var eventTypes = {
|
53 | beforeInput: {
|
54 | phasedRegistrationNames: {
|
55 | bubbled: 'onBeforeInput',
|
56 | captured: 'onBeforeInputCapture'
|
57 | },
|
58 | dependencies: ['topCompositionEnd', 'topKeyPress', 'topTextInput', 'topPaste']
|
59 | },
|
60 | compositionEnd: {
|
61 | phasedRegistrationNames: {
|
62 | bubbled: 'onCompositionEnd',
|
63 | captured: 'onCompositionEndCapture'
|
64 | },
|
65 | dependencies: ['topBlur', 'topCompositionEnd', 'topKeyDown', 'topKeyPress', 'topKeyUp', 'topMouseDown']
|
66 | },
|
67 | compositionStart: {
|
68 | phasedRegistrationNames: {
|
69 | bubbled: 'onCompositionStart',
|
70 | captured: 'onCompositionStartCapture'
|
71 | },
|
72 | dependencies: ['topBlur', 'topCompositionStart', 'topKeyDown', 'topKeyPress', 'topKeyUp', 'topMouseDown']
|
73 | },
|
74 | compositionUpdate: {
|
75 | phasedRegistrationNames: {
|
76 | bubbled: 'onCompositionUpdate',
|
77 | captured: 'onCompositionUpdateCapture'
|
78 | },
|
79 | dependencies: ['topBlur', 'topCompositionUpdate', 'topKeyDown', 'topKeyPress', 'topKeyUp', 'topMouseDown']
|
80 | }
|
81 | };
|
82 |
|
83 |
|
84 | var hasSpaceKeypress = false;
|
85 |
|
86 |
|
87 |
|
88 |
|
89 |
|
90 |
|
91 | function isKeypressCommand(nativeEvent) {
|
92 | return (nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) &&
|
93 |
|
94 | !(nativeEvent.ctrlKey && nativeEvent.altKey);
|
95 | }
|
96 |
|
97 |
|
98 |
|
99 |
|
100 |
|
101 |
|
102 |
|
103 | function getCompositionEventType(topLevelType) {
|
104 | switch (topLevelType) {
|
105 | case 'topCompositionStart':
|
106 | return eventTypes.compositionStart;
|
107 | case 'topCompositionEnd':
|
108 | return eventTypes.compositionEnd;
|
109 | case 'topCompositionUpdate':
|
110 | return eventTypes.compositionUpdate;
|
111 | }
|
112 | }
|
113 |
|
114 |
|
115 |
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 | function isFallbackCompositionStart(topLevelType, nativeEvent) {
|
123 | return topLevelType === 'topKeyDown' && nativeEvent.keyCode === START_KEYCODE;
|
124 | }
|
125 |
|
126 |
|
127 |
|
128 |
|
129 |
|
130 |
|
131 |
|
132 |
|
133 | function isFallbackCompositionEnd(topLevelType, nativeEvent) {
|
134 | switch (topLevelType) {
|
135 | case 'topKeyUp':
|
136 |
|
137 | return END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1;
|
138 | case 'topKeyDown':
|
139 |
|
140 |
|
141 | return nativeEvent.keyCode !== START_KEYCODE;
|
142 | case 'topKeyPress':
|
143 | case 'topMouseDown':
|
144 | case 'topBlur':
|
145 |
|
146 | return true;
|
147 | default:
|
148 | return false;
|
149 | }
|
150 | }
|
151 |
|
152 |
|
153 |
|
154 |
|
155 |
|
156 |
|
157 |
|
158 |
|
159 |
|
160 |
|
161 | function getDataFromCustomEvent(nativeEvent) {
|
162 | var detail = nativeEvent.detail;
|
163 | if (typeof detail === 'object' && 'data' in detail) {
|
164 | return detail.data;
|
165 | }
|
166 | return null;
|
167 | }
|
168 |
|
169 |
|
170 | var currentComposition = null;
|
171 |
|
172 |
|
173 |
|
174 |
|
175 | function extractCompositionEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
|
176 | var eventType;
|
177 | var fallbackData;
|
178 |
|
179 | if (canUseCompositionEvent) {
|
180 | eventType = getCompositionEventType(topLevelType);
|
181 | } else if (!currentComposition) {
|
182 | if (isFallbackCompositionStart(topLevelType, nativeEvent)) {
|
183 | eventType = eventTypes.compositionStart;
|
184 | }
|
185 | } else if (isFallbackCompositionEnd(topLevelType, nativeEvent)) {
|
186 | eventType = eventTypes.compositionEnd;
|
187 | }
|
188 |
|
189 | if (!eventType) {
|
190 | return null;
|
191 | }
|
192 |
|
193 | if (useFallbackCompositionData) {
|
194 |
|
195 |
|
196 | if (!currentComposition && eventType === eventTypes.compositionStart) {
|
197 | currentComposition = FallbackCompositionState.getPooled(nativeEventTarget);
|
198 | } else if (eventType === eventTypes.compositionEnd) {
|
199 | if (currentComposition) {
|
200 | fallbackData = currentComposition.getData();
|
201 | }
|
202 | }
|
203 | }
|
204 |
|
205 | var event = SyntheticCompositionEvent.getPooled(eventType, targetInst, nativeEvent, nativeEventTarget);
|
206 |
|
207 | if (fallbackData) {
|
208 |
|
209 |
|
210 | event.data = fallbackData;
|
211 | } else {
|
212 | var customData = getDataFromCustomEvent(nativeEvent);
|
213 | if (customData !== null) {
|
214 | event.data = customData;
|
215 | }
|
216 | }
|
217 |
|
218 | EventPropagators.accumulateTwoPhaseDispatches(event);
|
219 | return event;
|
220 | }
|
221 |
|
222 |
|
223 |
|
224 |
|
225 |
|
226 |
|
227 | function getNativeBeforeInputChars(topLevelType, nativeEvent) {
|
228 | switch (topLevelType) {
|
229 | case 'topCompositionEnd':
|
230 | return getDataFromCustomEvent(nativeEvent);
|
231 | case 'topKeyPress':
|
232 | |
233 |
|
234 |
|
235 |
|
236 |
|
237 |
|
238 |
|
239 |
|
240 |
|
241 |
|
242 |
|
243 |
|
244 |
|
245 |
|
246 | var which = nativeEvent.which;
|
247 | if (which !== SPACEBAR_CODE) {
|
248 | return null;
|
249 | }
|
250 |
|
251 | hasSpaceKeypress = true;
|
252 | return SPACEBAR_CHAR;
|
253 |
|
254 | case 'topTextInput':
|
255 |
|
256 | var chars = nativeEvent.data;
|
257 |
|
258 |
|
259 |
|
260 |
|
261 | if (chars === SPACEBAR_CHAR && hasSpaceKeypress) {
|
262 | return null;
|
263 | }
|
264 |
|
265 | return chars;
|
266 |
|
267 | default:
|
268 |
|
269 | return null;
|
270 | }
|
271 | }
|
272 |
|
273 |
|
274 |
|
275 |
|
276 |
|
277 |
|
278 |
|
279 |
|
280 |
|
281 | function getFallbackBeforeInputChars(topLevelType, nativeEvent) {
|
282 |
|
283 |
|
284 |
|
285 |
|
286 | if (currentComposition) {
|
287 | if (topLevelType === 'topCompositionEnd' || !canUseCompositionEvent && isFallbackCompositionEnd(topLevelType, nativeEvent)) {
|
288 | var chars = currentComposition.getData();
|
289 | FallbackCompositionState.release(currentComposition);
|
290 | currentComposition = null;
|
291 | return chars;
|
292 | }
|
293 | return null;
|
294 | }
|
295 |
|
296 | switch (topLevelType) {
|
297 | case 'topPaste':
|
298 |
|
299 |
|
300 | return null;
|
301 | case 'topKeyPress':
|
302 | |
303 |
|
304 |
|
305 |
|
306 |
|
307 |
|
308 |
|
309 |
|
310 |
|
311 |
|
312 |
|
313 |
|
314 |
|
315 |
|
316 |
|
317 |
|
318 | if (nativeEvent.which && !isKeypressCommand(nativeEvent)) {
|
319 | return String.fromCharCode(nativeEvent.which);
|
320 | }
|
321 | return null;
|
322 | case 'topCompositionEnd':
|
323 | return useFallbackCompositionData ? null : nativeEvent.data;
|
324 | default:
|
325 | return null;
|
326 | }
|
327 | }
|
328 |
|
329 |
|
330 |
|
331 |
|
332 |
|
333 |
|
334 |
|
335 | function extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
|
336 | var chars;
|
337 |
|
338 | if (canUseTextInputEvent) {
|
339 | chars = getNativeBeforeInputChars(topLevelType, nativeEvent);
|
340 | } else {
|
341 | chars = getFallbackBeforeInputChars(topLevelType, nativeEvent);
|
342 | }
|
343 |
|
344 |
|
345 |
|
346 | if (!chars) {
|
347 | return null;
|
348 | }
|
349 |
|
350 | var event = SyntheticInputEvent.getPooled(eventTypes.beforeInput, targetInst, nativeEvent, nativeEventTarget);
|
351 |
|
352 | event.data = chars;
|
353 | EventPropagators.accumulateTwoPhaseDispatches(event);
|
354 | return event;
|
355 | }
|
356 |
|
357 |
|
358 |
|
359 |
|
360 |
|
361 |
|
362 |
|
363 |
|
364 |
|
365 |
|
366 |
|
367 |
|
368 |
|
369 |
|
370 |
|
371 |
|
372 |
|
373 |
|
374 |
|
375 | var BeforeInputEventPlugin = {
|
376 | eventTypes: eventTypes,
|
377 |
|
378 | extractEvents: function (topLevelType, targetInst, nativeEvent, nativeEventTarget) {
|
379 | return [extractCompositionEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget), extractBeforeInputEvent(topLevelType, targetInst, nativeEvent, nativeEventTarget)];
|
380 | }
|
381 | };
|
382 |
|
383 | module.exports = BeforeInputEventPlugin; |
\ | No newline at end of file |