Match-id-f16ed2f21668e5aa1a4548583d600093a215b9a8

This commit is contained in:
* 2022-02-17 11:24:16 +08:00 committed by *
commit fc37bd5602
8 changed files with 34 additions and 112 deletions

View File

@ -6,21 +6,9 @@ import {Props} from '../DOMOperator';
* @param doc document
*/
export function getFocusedDom(doc?: Document): HorizonDom | null {
let currentDocument;
if (doc) {
currentDocument = doc;
} else {
if (document) {
currentDocument = document;
}
}
if (!currentDocument) {
return null;
} else if (currentDocument.activeElement) {
return currentDocument.activeElement;
} else {
return currentDocument.body;
}
let currentDocument = doc ?? document;
return currentDocument.activeElement ?? currentDocument.body;
}
// 如果 input 或者 textarea 元素中有文字被选中时activeElement 属性就会返回该元素

View File

@ -69,7 +69,7 @@ function processListeners(listenerList: ListenerUnitList): void {
});
}
function getProcessListenersFacade(
function getProcessListeners(
nativeEvtName: string,
vNode: VNode | null,
nativeEvent: AnyNativeEvent,
@ -138,7 +138,7 @@ function triggerHorizonEvents(
const nativeEventTarget = nativeEvent.target || nativeEvent.srcElement;
// 获取委托事件队列
const listenerList = getProcessListenersFacade(nativeEvtName, vNode, nativeEvent, nativeEventTarget, isCapture);
const listenerList = getProcessListeners(nativeEvtName, vNode, nativeEvent, nativeEventTarget, isCapture);
// 处理触发的事件队列
processListeners(listenerList);

View File

@ -1,55 +0,0 @@
/**
* style中的动画事件
*/
// style事件浏览器兼容前缀
const vendorPrefixes = {
animationend: {
MozAnimation: 'mozAnimationEnd',
WebkitAnimation: 'webkitAnimationEnd',
animation: 'animationend',
},
animationiteration: {
MozAnimation: 'mozAnimationIteration',
WebkitAnimation: 'webkitAnimationIteration',
animation: 'animationiteration',
},
animationstart: {
MozAnimation: 'mozAnimationStart',
WebkitAnimation: 'webkitAnimationStart',
animation: 'animationstart',
},
transitionend: {
MozTransition: 'mozTransitionEnd',
WebkitTransition: 'webkitTransitionEnd',
transition: 'transitionend',
},
};
// 获取属性中对应事件名
function getEventNameByStyle(eventName) {
const prefixMap = vendorPrefixes[eventName];
if (!prefixMap) {
return eventName;
}
const style = document.createElement('div').style
for (const styleProp in prefixMap) {
if (styleProp in style) {
return prefixMap[styleProp];
}
}
return eventName;
}
export const STYLE_AMT_END: string = getEventNameByStyle(
'animationend',
);
export const STYLE_AMT_ITERATION: string = getEventNameByStyle(
'animationiteration',
);
export const STYLE_AMT_START: string = getEventNameByStyle(
'animationstart',
);
export const STYLE_TRANS_END: string = getEventNameByStyle(
'transitionend',
);

View File

@ -1,9 +1,3 @@
import {
STYLE_AMT_END,
STYLE_AMT_ITERATION,
STYLE_AMT_START,
STYLE_TRANS_END
} from './StyleEventNames';
// Horizon事件和原生事件对应关系
export const horizonEventToNativeMap = new Map([
@ -38,10 +32,10 @@ export const horizonEventToNativeMap = new Map([
['onSelect', ['focusout', 'contextmenu', 'dragend', 'focusin',
'keydown', 'keyup', 'mousedown', 'mouseup', 'selectionchange']],
['onAnimationEnd', [STYLE_AMT_END]],
['onAnimationIteration', [STYLE_AMT_ITERATION]],
['onAnimationStart', [STYLE_AMT_START]],
['onTransitionEnd', [STYLE_TRANS_END]]
['onAnimationEnd', ['animationend']],
['onAnimationIteration', ['animationiteration']],
['onAnimationStart', ['animationstart']],
['onTransitionEnd', ['transitionend']]
]);
export const CommonEventToHorizonMap = {
@ -68,10 +62,10 @@ export const CommonEventToHorizonMap = {
selectionchange: 'selectChange',
textInput: 'textInput',
touchmove: 'touchMove',
[STYLE_AMT_END]: 'animationEnd',
[STYLE_AMT_ITERATION]: 'animationIteration',
[STYLE_AMT_START]: 'animationStart',
[STYLE_TRANS_END]: 'transitionEnd',
animationend: 'animationEnd',
animationiteration: 'animationIteration',
animationstart: 'animationStart',
transitionend: 'transitionEnd',
};
export const CHAR_CODE_ENTER = 13;

View File

@ -2,7 +2,7 @@ import {createCustomEvent} from '../customEvents/EventFactory';
import {getDom} from '../../dom/DOMInternalKeys';
import {isInputValueChanged} from '../../dom/valueHandler/ValueChangeHandler';
import {addValueUpdateList} from '../ControlledValueUpdater';
import {isTextInputElement} from '../utils';
import {isInputElement} from '../utils';
import {EVENT_TYPE_ALL} from '../const';
import {AnyNativeEvent, ListenerUnitList} from '../Types';
import {
@ -18,14 +18,14 @@ function shouldTriggerChangeEvent(targetDom, evtName) {
if (domTag === 'select' || (domTag === 'input' && type === 'file')) {
return evtName === 'change';
} else if (isTextInputElement(targetDom)) {
if (evtName === 'input' || evtName === 'change') {
return isInputValueChanged(targetDom);
}
} else if (domTag === 'input' && (type === 'checkbox' || type === 'radio')) {
if (evtName === 'click') {
return isInputValueChanged(targetDom);
}
} else if (isInputElement(targetDom)) {
if (evtName === 'input' || evtName === 'change') {
return isInputValueChanged(targetDom);
}
}
return false;
}

View File

@ -13,16 +13,16 @@ const compositionEventObj = {
// compoisition事件主要处理中文输入法输入时的触发事件
export function getListeners(
evtName: string,
nativeEvtName: string,
nativeEvt: AnyNativeEvent,
vNode: null | VNode,
target: null | EventTarget,
): ListenerUnitList {
const evtType = compositionEventObj[evtName];
const evtType = compositionEventObj[nativeEvtName];
const event = createCustomEvent(
evtType,
evtName,
nativeEvtName,
nativeEvt,
target,
);

View File

@ -3,21 +3,21 @@ import {shallowCompare} from '../../renderer/utils/compare';
import {getFocusedDom} from '../../dom/utils/Common';
import {getDom} from '../../dom/DOMInternalKeys';
import {isDocument} from '../../dom/utils/Common';
import {isTextInputElement} from '../utils';
import {isInputElement} from '../utils';
import type {AnyNativeEvent} from '../Types';
import {getListenersFromTree} from '../ListenerGetter';
import type {VNode} from '../../renderer/Types';
import {EVENT_TYPE_ALL} from '../const';
import {ListenerUnitList} from '../Types';
const horizonEventName = 'onSelect'
const horizonEventName = 'onSelect';
let currentElement = null;
let currentVNode = null;
let lastSelection: Selection | null = null;
function initTargetCache(dom, vNode) {
if (isTextInputElement(dom) || dom.contentEditable === 'true') {
if (isInputElement(dom) || dom.contentEditable === 'true') {
currentElement = dom;
currentVNode = vNode;
lastSelection = null;
@ -79,23 +79,23 @@ function getSelectEvent(nativeEvent, target) {
*
*/
export function getListeners(
name: string,
nativeEvtName: string,
nativeEvt: AnyNativeEvent,
vNode: null | VNode,
target: null | EventTarget,
): ListenerUnitList {
const targetNode = vNode ? getDom(vNode) : window;
let eventUnitList: ListenerUnitList = [];
switch (name) {
switch (nativeEvtName) {
case 'focusin':
initTargetCache(targetNode, vNode);
return eventUnitList;
break;
case 'focusout':
clearTargetCache();
return eventUnitList;
break;
case 'mousedown':
isInMouseEvent = true;
return eventUnitList;
break;
case 'contextmenu':
case 'mouseup':
case 'dragend':
@ -107,5 +107,6 @@ export function getListeners(
case 'keyup':
eventUnitList = getSelectEvent(nativeEvt, target);
}
return eventUnitList;
}

View File

@ -1,15 +1,9 @@
// 支持的输入框类型
const supportedInputTypes = ['color', 'date', 'datetime', 'datetime-local', 'email', 'month',
'number', 'password', 'range', 'search', 'tel', 'text', 'time', 'url', 'week'];
export function isTextInputElement(dom?: HTMLElement): boolean {
if (dom instanceof HTMLInputElement) {
return supportedInputTypes.includes(dom.type);
export function isInputElement(dom?: HTMLElement): boolean {
if (dom instanceof HTMLInputElement || dom instanceof HTMLTextAreaElement) {
return true;
}
const nodeName = dom && dom.nodeName && dom.nodeName.toLowerCase();
return nodeName === 'textarea';
return false;
}