From 52537bdf93e409b6ad062057af2808b8051de96b Mon Sep 17 00:00:00 2001 From: * <8> Date: Thu, 17 Feb 2022 11:22:50 +0800 Subject: [PATCH] Match-id-83bf820362983ac9c398f7308262c169b259c898 --- libs/horizon/src/dom/utils/Common.ts | 18 +----- libs/horizon/src/event/HorizonEventMain.ts | 4 +- libs/horizon/src/event/StyleEventNames.ts | 55 ------------------- libs/horizon/src/event/const.ts | 22 +++----- .../simulatedEvtHandler/ChangeEventHandler.ts | 10 ++-- .../CompositionEventHandler.ts | 6 +- .../SelectionEventHandler.ts | 17 +++--- libs/horizon/src/event/utils.ts | 14 ++--- 8 files changed, 34 insertions(+), 112 deletions(-) delete mode 100644 libs/horizon/src/event/StyleEventNames.ts diff --git a/libs/horizon/src/dom/utils/Common.ts b/libs/horizon/src/dom/utils/Common.ts index 8de8f7c4..09602c82 100644 --- a/libs/horizon/src/dom/utils/Common.ts +++ b/libs/horizon/src/dom/utils/Common.ts @@ -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 属性就会返回该元素 diff --git a/libs/horizon/src/event/HorizonEventMain.ts b/libs/horizon/src/event/HorizonEventMain.ts index 3f319045..deabece1 100644 --- a/libs/horizon/src/event/HorizonEventMain.ts +++ b/libs/horizon/src/event/HorizonEventMain.ts @@ -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); diff --git a/libs/horizon/src/event/StyleEventNames.ts b/libs/horizon/src/event/StyleEventNames.ts deleted file mode 100644 index d2bf85b1..00000000 --- a/libs/horizon/src/event/StyleEventNames.ts +++ /dev/null @@ -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', -); diff --git a/libs/horizon/src/event/const.ts b/libs/horizon/src/event/const.ts index 75bea89f..a3c2805e 100644 --- a/libs/horizon/src/event/const.ts +++ b/libs/horizon/src/event/const.ts @@ -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; diff --git a/libs/horizon/src/event/simulatedEvtHandler/ChangeEventHandler.ts b/libs/horizon/src/event/simulatedEvtHandler/ChangeEventHandler.ts index b521f7cd..7a0ca02f 100644 --- a/libs/horizon/src/event/simulatedEvtHandler/ChangeEventHandler.ts +++ b/libs/horizon/src/event/simulatedEvtHandler/ChangeEventHandler.ts @@ -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; } diff --git a/libs/horizon/src/event/simulatedEvtHandler/CompositionEventHandler.ts b/libs/horizon/src/event/simulatedEvtHandler/CompositionEventHandler.ts index a7394f5c..9dd8731c 100644 --- a/libs/horizon/src/event/simulatedEvtHandler/CompositionEventHandler.ts +++ b/libs/horizon/src/event/simulatedEvtHandler/CompositionEventHandler.ts @@ -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, ); diff --git a/libs/horizon/src/event/simulatedEvtHandler/SelectionEventHandler.ts b/libs/horizon/src/event/simulatedEvtHandler/SelectionEventHandler.ts index f32cc4b2..778a3b82 100644 --- a/libs/horizon/src/event/simulatedEvtHandler/SelectionEventHandler.ts +++ b/libs/horizon/src/event/simulatedEvtHandler/SelectionEventHandler.ts @@ -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; } diff --git a/libs/horizon/src/event/utils.ts b/libs/horizon/src/event/utils.ts index 51f022f1..3909e7a8 100644 --- a/libs/horizon/src/event/utils.ts +++ b/libs/horizon/src/event/utils.ts @@ -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; }