Match-id-b055091a3a9038a0eca2b927d777aa4a745b1ac0
This commit is contained in:
parent
7b603282aa
commit
e7822e5943
|
@ -6,42 +6,16 @@ import {VNode} from '../../renderer/Types';
|
|||
|
||||
// 从原生事件中复制属性到自定义事件中
|
||||
function extendAttribute(target, source) {
|
||||
const attributes = [
|
||||
// AnimationEvent
|
||||
'animationName', 'elapsedTime', 'pseudoElement',
|
||||
// CompositionEvent、InputEvent
|
||||
'data',
|
||||
// DragEvent
|
||||
'dataTransfer',
|
||||
// FocusEvent
|
||||
'relatedTarget',
|
||||
// KeyboardEvent
|
||||
'key', 'keyCode', 'charCode', 'code', 'location', 'ctrlKey', 'shiftKey',
|
||||
'altKey', 'metaKey', 'repeat', 'locale', 'getModifierState', 'clipboardData',
|
||||
// MouseEvent
|
||||
'button', 'buttons', 'clientX', 'clientY', 'movementX', 'movementY',
|
||||
'pageX', 'pageY', 'screenX', 'screenY', 'currentTarget',
|
||||
// PointerEvent
|
||||
'pointerId', 'width', 'height', 'pressure', 'tangentialPressure',
|
||||
'tiltX', 'tiltY', 'twist', 'pointerType', 'isPrimary',
|
||||
// TouchEvent
|
||||
'touches', 'targetTouches', 'changedTouches',
|
||||
// TransitionEvent
|
||||
'propertyName',
|
||||
// UIEvent
|
||||
'view', 'detail',
|
||||
// WheelEvent
|
||||
'deltaX', 'deltaY', 'deltaZ', 'deltaMode',
|
||||
];
|
||||
let val;
|
||||
for (let attr in source) {
|
||||
// 这两个方法需要override
|
||||
if (attr === 'preventDefault' || attr === 'stopPropagation') {
|
||||
continue;
|
||||
}
|
||||
|
||||
const length = attributes.length;
|
||||
let attr;
|
||||
let type;
|
||||
for (let i = 0; i < length; i++) {
|
||||
attr = attributes[i];
|
||||
type = source[attr];
|
||||
if (type !== 'undefined') {
|
||||
if (type === 'function') {
|
||||
val = source[attr];
|
||||
if (val !== undefined) {
|
||||
if (typeof val === 'function') {
|
||||
target[attr] = function() {
|
||||
return source[attr].apply(source, arguments);
|
||||
};
|
||||
|
@ -51,21 +25,40 @@ function extendAttribute(target, source) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 兼容IE的event key
|
||||
const uniqueKeyMap = new Map([
|
||||
['Esc', 'Escape'],
|
||||
['Spacebar', ' '],
|
||||
['Left', 'ArrowLeft'],
|
||||
['Up', 'ArrowUp'],
|
||||
['Right', 'ArrowRight'],
|
||||
['Down', 'ArrowDown'],
|
||||
['Del', 'Delete'],
|
||||
]);
|
||||
|
||||
export class CustomBaseEvent {
|
||||
|
||||
data: string;
|
||||
defaultPrevented: boolean;
|
||||
customEventName: string;
|
||||
targetVNode: VNode;
|
||||
type: string;
|
||||
nativeEvent: any;
|
||||
target: EventTarget;
|
||||
timeStamp: number;
|
||||
isDefaultPrevented: () => boolean;
|
||||
isPropagationStopped: () => boolean;
|
||||
currentTarget: EventTarget;
|
||||
relatedTarget: EventTarget;
|
||||
|
||||
// custom事件自定义属性
|
||||
customEventName: string;
|
||||
targetVNode: VNode;
|
||||
type: string;
|
||||
timeStamp: number;
|
||||
nativeEvent: any;
|
||||
|
||||
// 键盘事件属性
|
||||
key: string;
|
||||
charCode: number;
|
||||
keyCode: number;
|
||||
which: number;
|
||||
|
||||
constructor(
|
||||
customEvtName: string | null,
|
||||
nativeEvtName: string,
|
||||
|
@ -76,29 +69,25 @@ export class CustomBaseEvent {
|
|||
// 复制原生属性到自定义事件
|
||||
extendAttribute(this, nativeEvt);
|
||||
|
||||
// custom事件自定义属性
|
||||
this.customEventName = customEvtName;
|
||||
this.targetVNode = vNode;
|
||||
this.type = nativeEvtName;
|
||||
this.nativeEvent = nativeEvt;
|
||||
this.target = target;
|
||||
this.timeStamp = nativeEvt.timeStamp || Date.now();
|
||||
|
||||
const defaultPrevented = nativeEvt.defaultPrevented != null ?
|
||||
nativeEvt.defaultPrevented :
|
||||
nativeEvt.returnValue === false;
|
||||
this.defaultPrevented = defaultPrevented;
|
||||
|
||||
this.preventDefault = this.preventDefault.bind(this);
|
||||
this.stopPropagation = this.stopPropagation.bind(this);
|
||||
this.isDefaultPrevented = () => defaultPrevented;
|
||||
this.isPropagationStopped = () => false;
|
||||
this.relatedTarget = nativeEvt.relatedTarget;
|
||||
}
|
||||
this.target = target;
|
||||
|
||||
// 兼容性方法
|
||||
persist() {
|
||||
// 键盘事件属性
|
||||
this.key = uniqueKeyMap.get(nativeEvt.key) || nativeEvt.key;
|
||||
|
||||
// custom事件自定义属性
|
||||
this.customEventName = customEvtName;
|
||||
this.targetVNode = vNode;
|
||||
this.type = nativeEvtName;
|
||||
this.nativeEvent = nativeEvt;
|
||||
}
|
||||
|
||||
// 阻止默认行为
|
||||
|
|
|
@ -1,77 +0,0 @@
|
|||
/**
|
||||
* 自定义键盘事件
|
||||
*/
|
||||
|
||||
import type {VNode} from '../../renderer/Types';
|
||||
import {CustomBaseEvent} from './CustomBaseEvent';
|
||||
import {CHAR_CODE_ENTER} from '../const';
|
||||
|
||||
const uniqueKeyMap = new Map([
|
||||
['Esc', 'Escape'],
|
||||
['Spacebar', ' '],
|
||||
['Left', 'ArrowLeft'],
|
||||
['Up', 'ArrowUp'],
|
||||
['Right', 'ArrowRight'],
|
||||
['Down', 'ArrowDown'],
|
||||
['Del', 'Delete'],
|
||||
]);
|
||||
|
||||
const charCodeToKeyMap = new Map([
|
||||
[8, 'Backspace'],
|
||||
[9, 'Tab'],
|
||||
[13, 'Enter'],
|
||||
[16, 'Shift'],
|
||||
[17, 'Control'],
|
||||
[18, 'Alt'],
|
||||
[19, 'Pause'],
|
||||
[27, 'Escape'],
|
||||
[32, ' '],
|
||||
[33, 'PageUp'],
|
||||
[34, 'PageDown'],
|
||||
[35, 'End'],
|
||||
[36, 'Home'],
|
||||
[37, 'ArrowLeft'],
|
||||
[38, 'ArrowUp'],
|
||||
[39, 'ArrowRight'],
|
||||
[40, 'ArrowDown'],
|
||||
[46, 'Delete']
|
||||
]);
|
||||
|
||||
function getKey(event) {
|
||||
if (event.key) {
|
||||
return uniqueKeyMap.get(event.key) || event.key;
|
||||
}
|
||||
|
||||
if (event.type === 'keypress') {
|
||||
const charCode = event.charCode;
|
||||
return charCode === CHAR_CODE_ENTER ? 'Enter' : String.fromCharCode(charCode);
|
||||
}
|
||||
|
||||
if (event.type === 'keydown' || event.type === 'keyup') {
|
||||
return charCodeToKeyMap.get(event.keyCode);
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
export class CustomKeyboardEvent extends CustomBaseEvent {
|
||||
|
||||
key: string;
|
||||
charCode: number;
|
||||
keyCode: number;
|
||||
which: number;
|
||||
|
||||
constructor(
|
||||
customEvtName: string | null,
|
||||
nativeEvtName: string,
|
||||
nativeEvt: { [propName: string]: any },
|
||||
vNode: VNode,
|
||||
target: null | EventTarget
|
||||
) {
|
||||
super(customEvtName, nativeEvtName, nativeEvt, vNode, target);
|
||||
this.key = getKey(nativeEvt);
|
||||
this.charCode = nativeEvtName === 'keypress' ? nativeEvt.charCode : 0;
|
||||
this.keyCode = (nativeEvtName === 'keydown' || nativeEvtName === 'keyup') ? nativeEvt.keyCode : 0;
|
||||
this.which = this.charCode || this.keyCode;
|
||||
}
|
||||
}
|
|
@ -1,16 +1,8 @@
|
|||
import {CustomKeyboardEvent} from './CustomKeyboardEvent';
|
||||
import {CustomBaseEvent} from './CustomBaseEvent';
|
||||
|
||||
const keyboardEvents = {
|
||||
keypress: CustomKeyboardEvent,
|
||||
keydown: CustomKeyboardEvent,
|
||||
keyup: CustomKeyboardEvent,
|
||||
}
|
||||
|
||||
// 创建普通自定义事件对象实例,和原生事件对应
|
||||
export function createCustomEvent(customEventName, nativeEvtName, nativeEvent, vNode, currentTarget) {
|
||||
const EventConstructor = keyboardEvents[nativeEvtName] || CustomBaseEvent;
|
||||
return new EventConstructor(
|
||||
return new CustomBaseEvent(
|
||||
customEventName,
|
||||
nativeEvtName,
|
||||
nativeEvent,
|
||||
|
|
|
@ -13,11 +13,9 @@ import {
|
|||
} from './LifeCycleHandler';
|
||||
import {tryRenderFromRoot} from '../TreeBuilder';
|
||||
import {
|
||||
BySync,
|
||||
InRender,
|
||||
copyExecuteMode,
|
||||
setExecuteMode,
|
||||
checkMode,
|
||||
changeMode,
|
||||
} from '../ExecuteMode';
|
||||
import {
|
||||
|
|
Loading…
Reference in New Issue