Match-id-41cb5e6a5cd84d46c0ca25928310ca73055d6c98
This commit is contained in:
commit
afed2da2e4
|
@ -6,42 +6,16 @@ import {VNode} from '../../renderer/Types';
|
||||||
|
|
||||||
// 从原生事件中复制属性到自定义事件中
|
// 从原生事件中复制属性到自定义事件中
|
||||||
function extendAttribute(target, source) {
|
function extendAttribute(target, source) {
|
||||||
const attributes = [
|
let val;
|
||||||
// AnimationEvent
|
for (let attr in source) {
|
||||||
'animationName', 'elapsedTime', 'pseudoElement',
|
// 这两个方法需要override
|
||||||
// CompositionEvent、InputEvent
|
if (attr === 'preventDefault' || attr === 'stopPropagation') {
|
||||||
'data',
|
continue;
|
||||||
// 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',
|
|
||||||
];
|
|
||||||
|
|
||||||
const length = attributes.length;
|
val = source[attr];
|
||||||
let attr;
|
if (val !== undefined) {
|
||||||
let type;
|
if (typeof val === 'function') {
|
||||||
for (let i = 0; i < length; i++) {
|
|
||||||
attr = attributes[i];
|
|
||||||
type = source[attr];
|
|
||||||
if (type !== 'undefined') {
|
|
||||||
if (type === 'function') {
|
|
||||||
target[attr] = function() {
|
target[attr] = function() {
|
||||||
return source[attr].apply(source, arguments);
|
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 {
|
export class CustomBaseEvent {
|
||||||
|
|
||||||
data: string;
|
|
||||||
defaultPrevented: boolean;
|
defaultPrevented: boolean;
|
||||||
customEventName: string;
|
|
||||||
targetVNode: VNode;
|
|
||||||
type: string;
|
|
||||||
nativeEvent: any;
|
|
||||||
target: EventTarget;
|
target: EventTarget;
|
||||||
timeStamp: number;
|
|
||||||
isDefaultPrevented: () => boolean;
|
isDefaultPrevented: () => boolean;
|
||||||
isPropagationStopped: () => boolean;
|
isPropagationStopped: () => boolean;
|
||||||
currentTarget: EventTarget;
|
currentTarget: EventTarget;
|
||||||
relatedTarget: EventTarget;
|
relatedTarget: EventTarget;
|
||||||
|
|
||||||
|
// custom事件自定义属性
|
||||||
|
customEventName: string;
|
||||||
|
targetVNode: VNode;
|
||||||
|
type: string;
|
||||||
|
timeStamp: number;
|
||||||
|
nativeEvent: any;
|
||||||
|
|
||||||
|
// 键盘事件属性
|
||||||
|
key: string;
|
||||||
|
charCode: number;
|
||||||
|
keyCode: number;
|
||||||
|
which: number;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
customEvtName: string | null,
|
customEvtName: string | null,
|
||||||
nativeEvtName: string,
|
nativeEvtName: string,
|
||||||
|
@ -76,29 +69,25 @@ export class CustomBaseEvent {
|
||||||
// 复制原生属性到自定义事件
|
// 复制原生属性到自定义事件
|
||||||
extendAttribute(this, nativeEvt);
|
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 ?
|
const defaultPrevented = nativeEvt.defaultPrevented != null ?
|
||||||
nativeEvt.defaultPrevented :
|
nativeEvt.defaultPrevented :
|
||||||
nativeEvt.returnValue === false;
|
nativeEvt.returnValue === false;
|
||||||
this.defaultPrevented = defaultPrevented;
|
this.defaultPrevented = defaultPrevented;
|
||||||
|
|
||||||
this.preventDefault = this.preventDefault.bind(this);
|
this.preventDefault = this.preventDefault.bind(this);
|
||||||
this.stopPropagation = this.stopPropagation.bind(this);
|
this.stopPropagation = this.stopPropagation.bind(this);
|
||||||
this.isDefaultPrevented = () => defaultPrevented;
|
this.isDefaultPrevented = () => defaultPrevented;
|
||||||
this.isPropagationStopped = () => false;
|
this.isPropagationStopped = () => false;
|
||||||
this.relatedTarget = nativeEvt.relatedTarget;
|
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';
|
import {CustomBaseEvent} from './CustomBaseEvent';
|
||||||
|
|
||||||
const keyboardEvents = {
|
|
||||||
keypress: CustomKeyboardEvent,
|
|
||||||
keydown: CustomKeyboardEvent,
|
|
||||||
keyup: CustomKeyboardEvent,
|
|
||||||
}
|
|
||||||
|
|
||||||
// 创建普通自定义事件对象实例,和原生事件对应
|
// 创建普通自定义事件对象实例,和原生事件对应
|
||||||
export function createCustomEvent(customEventName, nativeEvtName, nativeEvent, vNode, currentTarget) {
|
export function createCustomEvent(customEventName, nativeEvtName, nativeEvent, vNode, currentTarget) {
|
||||||
const EventConstructor = keyboardEvents[nativeEvtName] || CustomBaseEvent;
|
return new CustomBaseEvent(
|
||||||
return new EventConstructor(
|
|
||||||
customEventName,
|
customEventName,
|
||||||
nativeEvtName,
|
nativeEvtName,
|
||||||
nativeEvent,
|
nativeEvent,
|
||||||
|
|
|
@ -13,11 +13,9 @@ import {
|
||||||
} from './LifeCycleHandler';
|
} from './LifeCycleHandler';
|
||||||
import {tryRenderFromRoot} from '../TreeBuilder';
|
import {tryRenderFromRoot} from '../TreeBuilder';
|
||||||
import {
|
import {
|
||||||
BySync,
|
|
||||||
InRender,
|
InRender,
|
||||||
copyExecuteMode,
|
copyExecuteMode,
|
||||||
setExecuteMode,
|
setExecuteMode,
|
||||||
checkMode,
|
|
||||||
changeMode,
|
changeMode,
|
||||||
} from '../ExecuteMode';
|
} from '../ExecuteMode';
|
||||||
import {
|
import {
|
||||||
|
|
Loading…
Reference in New Issue