Match-id-967e808cdb47df39560696171de0c8f743a70f84
This commit is contained in:
*
*
parent
c2f173dd60
commit
f7f9956ddc
|
|
@ -0,0 +1,108 @@
|
|||
import {
|
||||
asyncUpdates, createVNode, getFirstCustomDom,
|
||||
syncUpdates, startUpdate,
|
||||
} from '../renderer/Renderer';
|
||||
import {createPortal} from '../renderer/components/CreatePortal';
|
||||
import {
|
||||
clearContainer, saveContainer,
|
||||
} from './DOMInternalKeys';
|
||||
import type {Container} from './DOMOperator';
|
||||
import {isElement} from './utils/Common';
|
||||
import {listenDelegatedEvents} from '../event/EventBinding';
|
||||
import {findDOMByClassInst} from '../renderer/vnode/VNodeUtils';
|
||||
import {TreeRoot} from '../renderer/vnode/VNodeTags';
|
||||
|
||||
function executeRender(
|
||||
children: any,
|
||||
container: Container,
|
||||
callback?: Function,
|
||||
) {
|
||||
let treeRoot = container._treeRoot;
|
||||
|
||||
if (!treeRoot) {
|
||||
treeRoot = createRoot(children, container, callback);
|
||||
} else { // container被render过
|
||||
if (typeof callback === 'function') {
|
||||
const cb = callback;
|
||||
callback = function () {
|
||||
const instance = getFirstCustomDom(treeRoot);
|
||||
cb.call(instance);
|
||||
};
|
||||
}
|
||||
// 执行更新操作
|
||||
startUpdate(children, treeRoot, callback);
|
||||
}
|
||||
|
||||
return getFirstCustomDom(treeRoot);
|
||||
}
|
||||
|
||||
function createRoot(children: any, container: Container, callback?: Function) {
|
||||
// 清空容器
|
||||
let child = container.lastChild;
|
||||
while (child) {
|
||||
container.removeChild(child);
|
||||
child = container.lastChild;
|
||||
}
|
||||
|
||||
// 调度器创建根节点，并给容器dom赋vNode结构体
|
||||
const treeRoot = createVNode(TreeRoot, container);
|
||||
saveContainer(container, treeRoot._domRoot);
|
||||
container._treeRoot = treeRoot;
|
||||
|
||||
// 根节点挂接全量事件
|
||||
listenDelegatedEvents(container);
|
||||
|
||||
// 执行回调
|
||||
if (typeof callback === 'function') {
|
||||
const cb = callback;
|
||||
callback = function () {
|
||||
const instance = getFirstCustomDom(treeRoot);
|
||||
cb.call(instance);
|
||||
};
|
||||
}
|
||||
|
||||
// 建VNode树，启动页面绘制
|
||||
syncUpdates(() => {
|
||||
startUpdate(children, treeRoot, callback);
|
||||
});
|
||||
|
||||
return treeRoot;
|
||||
}
|
||||
|
||||
function findDOMNode(domOrEle: Element): null | Element | Text {
|
||||
if (domOrEle == null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// 普通节点
|
||||
if (isElement(domOrEle)) {
|
||||
return domOrEle;
|
||||
}
|
||||
|
||||
// class的实例
|
||||
return findDOMByClassInst(domOrEle);
|
||||
}
|
||||
|
||||
// 卸载入口
|
||||
function destroy(container: Container) {
|
||||
if (container._treeRoot) {
|
||||
syncUpdates(() => {
|
||||
executeRender(null, container, () => {
|
||||
container._treeRoot = null;
|
||||
clearContainer(container);
|
||||
});
|
||||
});
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
export {
|
||||
createPortal,
|
||||
asyncUpdates as unstable_batchedUpdates,
|
||||
findDOMNode,
|
||||
executeRender as render,
|
||||
destroy as unmountComponentAtNode,
|
||||
};
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
/**
|
||||
* 文件整体功能：给dom节点赋 VNode 的结构体和事件初始化标记
|
||||
*/
|
||||
|
||||
import type {VNode} from '../renderer/Types';
|
||||
import type {
|
||||
Container,
|
||||
Props,
|
||||
} from './DOMOperator';
|
||||
|
||||
import {
|
||||
DomComponent,
|
||||
DomText,
|
||||
DomRoot,
|
||||
} from '../renderer/vnode/VNodeTags';
|
||||
|
||||
const suffixKey = new Date().getTime().toString();
|
||||
const prefix = '_horizon';
|
||||
|
||||
const internalKeys = {
|
||||
VNode: `${prefix}VNode@${suffixKey}`,
|
||||
props: `${prefix}Props@${suffixKey}`,
|
||||
container: `${prefix}Container@${suffixKey}`,
|
||||
events: `${prefix}Events@${suffixKey}`,
|
||||
nonDelegatedEvents: `${prefix}NonDelegatedEvents@${suffixKey}`,
|
||||
};
|
||||
|
||||
// 通过 VNode 实例获取 DOM 节点
|
||||
export function getDom(vNode: VNode): Element | Text | void {
|
||||
const {tag} = vNode;
|
||||
if (tag === DomComponent || tag === DomText) {
|
||||
return vNode.realNode;
|
||||
}
|
||||
}
|
||||
|
||||
// 将 VNode 属性相关信息挂到 DOM 对象的特定属性上
|
||||
export function saveVNode(
|
||||
vNode: VNode,
|
||||
dom: Element | Text | Container,
|
||||
): void {
|
||||
dom[internalKeys.VNode] = vNode;
|
||||
}
|
||||
|
||||
// 用 DOM 节点，来找其对应的 VNode 实例
|
||||
export function getVNode(dom: Node): VNode | null {
|
||||
const vNode = dom[internalKeys.VNode] || dom[internalKeys.container];
|
||||
if (vNode) {
|
||||
const {tag} = vNode;
|
||||
if (tag === DomComponent || tag === DomText || tag === DomRoot) {
|
||||
return vNode;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
// 用 DOM 对象，来寻找其对应或者说是最近的 VNode 实例
|
||||
export function getNearestVNode(dom: Node): null | VNode {
|
||||
let vNode = dom[internalKeys.VNode];
|
||||
if (vNode) { // 如果是已经被框架标记过的 DOM 节点，那么直接返回其 VNode 实例
|
||||
return vNode;
|
||||
}
|
||||
// 下面处理的是为被框架标记过的 DOM 节点，向上找其父节点是否被框架标记过
|
||||
let parent = dom.parentNode;
|
||||
let nearVNode = null;
|
||||
while (parent) {
|
||||
vNode = parent[internalKeys.VNode];
|
||||
if (vNode) {
|
||||
nearVNode = vNode;
|
||||
break;
|
||||
}
|
||||
parent = parent.parentNode;
|
||||
}
|
||||
return nearVNode;
|
||||
}
|
||||
|
||||
// 获取 vNode 上的属性相关信息
|
||||
export function getVNodeProps(dom: Element | Text): Props {
|
||||
return dom[internalKeys.props] || null;
|
||||
}
|
||||
|
||||
// 将 DOM 属性相关信息挂到 DOM 对象的特定属性上
|
||||
export function updateVNodeProps(dom: Element | Text, props: Props): void {
|
||||
dom[internalKeys.props] = props;
|
||||
}
|
||||
|
||||
export function getEventListeners(dom: EventTarget): Set<string> {
|
||||
let elementListeners = dom[internalKeys.events];
|
||||
if (!elementListeners) {
|
||||
elementListeners = new Set();
|
||||
dom[internalKeys.events] = elementListeners;
|
||||
}
|
||||
return elementListeners;
|
||||
}
|
||||
|
||||
export function getEventToListenerMap(target: EventTarget): Map<string, EventListener> {
|
||||
let eventsMap = target[internalKeys.nonDelegatedEvents];
|
||||
if (!eventsMap) {
|
||||
eventsMap = target[internalKeys.nonDelegatedEvents] = new Map();
|
||||
}
|
||||
return eventsMap;
|
||||
}
|
||||
|
||||
export function saveContainer(dom: Container, domRoot: VNode): void {
|
||||
dom[internalKeys.container] = domRoot;
|
||||
}
|
||||
|
||||
export function clearContainer(dom: Container): void {
|
||||
dom[internalKeys.container] = null;
|
||||
}
|
||||
|
|
@ -0,0 +1,333 @@
|
|||
/**
|
||||
* Copyright (c) Huawei Technologies Co., Ltd. 2021-2021. All rights reserved.
|
||||
*/
|
||||
|
||||
import {
|
||||
saveVNode,
|
||||
updateVNodeProps,
|
||||
} from './DOMInternalKeys';
|
||||
import {
|
||||
createDom,
|
||||
} from './utils/DomCreator';
|
||||
import {getSelectionInfo, resetSelectionRange, selectionData} from './SelectionRangeHandler';
|
||||
import {isElement, isComment, isDocument, isDocumentFragment} from './utils/Common';
|
||||
import {NSS} from './utils/DomCreator';
|
||||
import {adjustStyleValue} from './DOMPropertiesHandler/StyleHandler';
|
||||
|
||||
import {listenDelegatedEvents} from '../event/EventBinding';
|
||||
import type {VNode} from '../renderer/Types';
|
||||
import {
|
||||
setInitValue,
|
||||
getPropsWithoutValue,
|
||||
updateValue,
|
||||
} from './valueHandler/ValueHandler';
|
||||
import {
|
||||
compareProps,
|
||||
setDomProps, updateDomProps
|
||||
} from './DOMPropertiesHandler/DOMPropertiesHandler';
|
||||
import {isNativeElement, validateProps} from './validators/ValidateProps';
|
||||
import {watchValueChange} from './valueHandler/ValueChangeHandler';
|
||||
import {DomComponent, DomText} from '../renderer/vnode/VNodeTags';
|
||||
import {updateCommonProp} from './DOMPropertiesHandler/UpdateCommonProp';
|
||||
|
||||
export type Props = {
|
||||
autoFocus?: boolean,
|
||||
children?: any,
|
||||
dangerouslySetInnerHTML?: any,
|
||||
disabled?: boolean,
|
||||
hidden?: boolean,
|
||||
style?: { display?: string },
|
||||
};
|
||||
|
||||
export type Container = (Element & { _treeRoot?: VNode }) | (Document & { _treeRoot?: VNode });
|
||||
|
||||
let selectionInfo: null | selectionData = null;
|
||||
|
||||
const types = ['button', 'input', 'select', 'textarea'];
|
||||
|
||||
// button、input、select、textarea、如果有 autoFocus 属性需要focus
|
||||
function shouldAutoFocus(type: string, props: Props): boolean {
|
||||
return types.includes(type) ? Boolean(props.autoFocus) : false;
|
||||
}
|
||||
|
||||
function getChildNS(parent: string | null, type: string,): string {
|
||||
if (parent === NSS.svg && type === 'foreignObject') {
|
||||
return NSS.html;
|
||||
}
|
||||
if (parent == null || parent === NSS.html) {
|
||||
// 没有父命名空间
|
||||
return Object.keys(NSS).includes(type) ? NSS[type] : NSS.html;
|
||||
}
|
||||
// 默认返回parentNamespace.
|
||||
return parent;
|
||||
}
|
||||
|
||||
function getRootNS(dom, root, nextRoot) {
|
||||
let namespace;
|
||||
let tag;
|
||||
let container, ownNamespace;
|
||||
|
||||
if (isDocument(dom)) {
|
||||
tag = '#document';
|
||||
namespace = root ? root.namespaceURI : getChildNS(null, '');
|
||||
} else if (isDocumentFragment(dom)) {
|
||||
tag = '#fragment';
|
||||
namespace = root ? root.namespaceURI : getChildNS(null, '');
|
||||
} else if (isComment(dom)) {
|
||||
container = nextRoot.parentNode;
|
||||
ownNamespace = container.namespaceURI || null;
|
||||
tag = container.tagName;
|
||||
namespace = getChildNS(ownNamespace, tag);
|
||||
} else {
|
||||
container = nextRoot;
|
||||
ownNamespace = container.namespaceURI || null;
|
||||
tag = container.tagName;
|
||||
namespace = getChildNS(ownNamespace, tag);
|
||||
}
|
||||
|
||||
return namespace;
|
||||
}
|
||||
|
||||
// 获取容器
|
||||
export function getNSCtx(
|
||||
nextRoot: Container,
|
||||
ctxNamespace: string,
|
||||
type: string): string {
|
||||
let namespace;
|
||||
if (nextRoot) {
|
||||
// 获取并解析根节点容器
|
||||
const root = nextRoot.documentElement;
|
||||
namespace = getRootNS(nextRoot, root, nextRoot);
|
||||
} else {
|
||||
// 获取子节点容器
|
||||
namespace = getChildNS(ctxNamespace, type);
|
||||
}
|
||||
return namespace;
|
||||
}
|
||||
|
||||
export function prepareForSubmit(): void {
|
||||
selectionInfo = <selectionData>getSelectionInfo();
|
||||
}
|
||||
|
||||
export function resetAfterSubmit(): void {
|
||||
resetSelectionRange(selectionInfo);
|
||||
selectionInfo = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 在内存中创建 DOM 对象
|
||||
* @param tagName 元素的类型
|
||||
* @param props 属性
|
||||
* @param parentNamespace 当前上下文
|
||||
* @param vNode 当前元素对应的 VNode
|
||||
* @returns DOM 对象
|
||||
*/
|
||||
export function newDom(
|
||||
tagName: string,
|
||||
props: Props,
|
||||
parentNamespace: string,
|
||||
vNode: VNode,
|
||||
): Element {
|
||||
const dom: Element = createDom(tagName, props, parentNamespace);
|
||||
// 将 vNode 节点挂到 DOM 对象上
|
||||
saveVNode(vNode, dom);
|
||||
// 将属性挂到 DOM 对象上
|
||||
updateVNodeProps(dom, props);
|
||||
|
||||
return dom;
|
||||
}
|
||||
|
||||
// 设置节点默认事件、属性
|
||||
export function initDomProps(dom: Element, tagName: string, rawProps: Props): boolean {
|
||||
validateProps(tagName, rawProps);
|
||||
|
||||
// 获取不包括value，defaultValue的属性
|
||||
const props: Object = getPropsWithoutValue(tagName, dom, rawProps);
|
||||
|
||||
// 初始化DOM属性（不包括value，defaultValue）
|
||||
setDomProps(tagName, dom, props);
|
||||
|
||||
if (tagName === 'input' || tagName === 'textarea') {
|
||||
// 增加监听value和checked的set、get方法
|
||||
watchValueChange(dom);
|
||||
}
|
||||
|
||||
// 设置dom.value值，触发受控组件的set方法
|
||||
setInitValue(tagName, dom, rawProps);
|
||||
|
||||
return shouldAutoFocus(tagName, rawProps);
|
||||
}
|
||||
|
||||
// 准备更新之前进行一系列校验 DOM，寻找属性差异等准备工作
|
||||
export function getPropChangeList(
|
||||
dom: Element,
|
||||
type: string,
|
||||
lastRawProps: Props,
|
||||
nextRawProps: Props,
|
||||
): null | Array<any> {
|
||||
// 校验两个对象的不同
|
||||
validateProps(type, nextRawProps);
|
||||
|
||||
// 重新定义的属性不需要参与对比，被代理的组件需要把这些属性覆盖到props中
|
||||
const oldProps: Object = getPropsWithoutValue(type, dom, lastRawProps);
|
||||
const newProps: Object = getPropsWithoutValue(type, dom, nextRawProps);
|
||||
|
||||
const changeList = compareProps(oldProps, newProps);
|
||||
return changeList;
|
||||
}
|
||||
|
||||
export function isTextChild(type: string, props: Props): boolean {
|
||||
if (type === 'textarea') {
|
||||
return true;
|
||||
} else if (type === 'option') {
|
||||
return true;
|
||||
} else if (type === 'noscript') {
|
||||
return true;
|
||||
} else if (typeof props.children === 'string') {
|
||||
return true;
|
||||
} else if (typeof props.children === 'number') {
|
||||
return true;
|
||||
} else {
|
||||
return (
|
||||
props.dangerouslySetInnerHTML &&
|
||||
typeof props.dangerouslySetInnerHTML === 'object' &&
|
||||
props.dangerouslySetInnerHTML.__html != null
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export function newTextDom(
|
||||
text: string,
|
||||
processing: VNode,
|
||||
): Text {
|
||||
const textNode: Text = document.createTextNode(text);
|
||||
saveVNode(processing, textNode);
|
||||
return textNode;
|
||||
}
|
||||
|
||||
export function submitMount(
|
||||
dom: Element,
|
||||
type: string,
|
||||
newProps: Props,
|
||||
): void {
|
||||
if (shouldAutoFocus(type, newProps)) {
|
||||
// button、input、select、textarea、如果有 autoFocus 属性需要focus
|
||||
dom.focus();
|
||||
}
|
||||
}
|
||||
|
||||
// 提交vNode的类型为Component或者Text的更新
|
||||
export function submitDomUpdate(tag: number, vNode: VNode) {
|
||||
const newProps = vNode.props;
|
||||
const element: Element = vNode.realNode;
|
||||
|
||||
if (tag === DomComponent) {
|
||||
// DomComponent类型
|
||||
if (element != null) {
|
||||
const type = vNode.type;
|
||||
const changeList = vNode.changeList;
|
||||
vNode.changeList = null;
|
||||
if (changeList !== null) {
|
||||
saveVNode(vNode, element);
|
||||
updateVNodeProps(element, newProps);
|
||||
// 应用diff更新Properties.
|
||||
// 当一个选中的radio改变名称,浏览器使另一个radio的复选框为false.
|
||||
if (type === 'input' && newProps.type === 'radio' && newProps.name != null && newProps.checked != null) {
|
||||
updateCommonProp(element, 'checked', newProps.checked);
|
||||
}
|
||||
const isNativeTag = isNativeElement(type, newProps);
|
||||
updateDomProps(element, changeList, isNativeTag);
|
||||
updateValue(type, element, newProps);
|
||||
}
|
||||
}
|
||||
} else if (tag === DomText) {
|
||||
// text类型
|
||||
element.textContent = newProps;
|
||||
}
|
||||
}
|
||||
|
||||
export function clearText(dom: Element): void {
|
||||
dom.innerHTML = '';
|
||||
}
|
||||
|
||||
// 添加child元素
|
||||
export function appendChildElement(isContainer: boolean,
|
||||
parent: Element | Container,
|
||||
child: Element | Text): void {
|
||||
if (isContainer && isComment(parent)) {
|
||||
parent.parentNode.insertBefore(child, parent);
|
||||
} else {
|
||||
parent.appendChild(child);
|
||||
}
|
||||
}
|
||||
|
||||
// 插入dom元素
|
||||
export function insertDomBefore(
|
||||
isContainer: boolean,
|
||||
parent: Element | Container,
|
||||
child: Element | Text,
|
||||
beforeChild: Element | Text,
|
||||
) {
|
||||
if (isContainer && isComment(parent)) {
|
||||
parent.parentNode.insertBefore(child, beforeChild);
|
||||
} else {
|
||||
parent.insertBefore(child, beforeChild);
|
||||
}
|
||||
}
|
||||
|
||||
export function removeChildDom(
|
||||
isContainer: boolean,
|
||||
parent: Element | Container,
|
||||
child: Element | Text
|
||||
) {
|
||||
if (isContainer && isComment(parent)) {
|
||||
parent.parentNode.removeChild(child);
|
||||
} else {
|
||||
parent.removeChild(child);
|
||||
}
|
||||
}
|
||||
|
||||
// 隐藏元素
|
||||
export function hideDom(tag: number, element: Element | Text) {
|
||||
if (tag === DomComponent) {
|
||||
// DomComponent类型
|
||||
const {style} = element;
|
||||
if (style.setProperty && typeof style.setProperty === 'function') {
|
||||
style.setProperty('display', 'none', 'important');
|
||||
} else {
|
||||
style.display = 'none';
|
||||
}
|
||||
} else if (tag === DomText) {
|
||||
// text类型
|
||||
element.textContent = '';
|
||||
}
|
||||
}
|
||||
|
||||
// 不隐藏元素
|
||||
export function unHideDom(tag: number, element: Element | Text, props: Props) {
|
||||
if (tag === DomComponent) {
|
||||
// DomComponent类型
|
||||
const style = props.style;
|
||||
let display = null;
|
||||
if (style !== undefined && style !== null && style.hasOwnProperty('display')) {
|
||||
display = style.display;
|
||||
}
|
||||
element.style.display = adjustStyleValue('display', display);
|
||||
} else if (tag === DomText) {
|
||||
// text类型
|
||||
element.textContent = props;
|
||||
}
|
||||
}
|
||||
|
||||
export function clearContainer(container: Container): void {
|
||||
if (isElement(container)) {
|
||||
container.textContent = '';
|
||||
}
|
||||
if (isDocument(container) && container.body != null) {
|
||||
container.body.textContent = '';
|
||||
}
|
||||
}
|
||||
|
||||
export function prePortal(portal: Element): void {
|
||||
listenDelegatedEvents(portal);
|
||||
}
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
import {
|
||||
allDelegatedHorizonEvents,
|
||||
} from '../../event/EventCollection';
|
||||
import {updateCommonProp} from './UpdateCommonProp';
|
||||
import {setStyles} from './StyleHandler';
|
||||
import {
|
||||
listenNonDelegatedEvent
|
||||
} from '../../event/EventBinding';
|
||||
import {isEventProp, isNativeElement} from '../validators/ValidateProps';
|
||||
|
||||
// 初始化DOM属性
|
||||
export function setDomProps(
|
||||
tagName: string,
|
||||
dom: Element,
|
||||
props: Object,
|
||||
): void {
|
||||
const isNativeTag = isNativeElement(tagName, props);
|
||||
const keysOfProps = Object.keys(props);
|
||||
|
||||
for (let i = 0; i < keysOfProps.length; i++) {
|
||||
const propName = keysOfProps[i];
|
||||
const propVal = props[propName];
|
||||
|
||||
updateOneProp(dom, propName, propVal, isNativeTag, true);
|
||||
}
|
||||
}
|
||||
|
||||
// 更新 DOM 属性
|
||||
export function updateDomProps(
|
||||
dom: Element,
|
||||
changeList: Array<any>,
|
||||
isNativeTag: boolean,
|
||||
): void {
|
||||
for (let i = 0; i < changeList.length; i ++) {
|
||||
const {propName, propVal} = changeList[i];
|
||||
|
||||
updateOneProp(dom, propName, propVal, isNativeTag);
|
||||
}
|
||||
}
|
||||
|
||||
function updateOneProp(dom, propName, propVal, isNativeTag, isInit = false) {
|
||||
if (propName === 'style') {
|
||||
setStyles(dom, propVal);
|
||||
} else if (propName === 'dangerouslySetInnerHTML') {
|
||||
dom.innerHTML = propVal.__html;
|
||||
} else if (propName === 'children') { // 只处理纯文本子节点，其他children在VNode树中处理
|
||||
if (typeof propVal === 'string' || typeof propVal === 'number') {
|
||||
dom.textContent = String(propVal);
|
||||
}
|
||||
} else if (isEventProp(propName)) {
|
||||
// 事件监听属性处理
|
||||
if (!allDelegatedHorizonEvents.has(propName)) {
|
||||
listenNonDelegatedEvent(propName, dom, propVal);
|
||||
}
|
||||
} else {
|
||||
if (!isInit || (isInit && propVal != null)) {
|
||||
updateCommonProp(dom, propName, propVal, isNativeTag);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 找出两个 DOM 属性的差别，生成需要更新的属性集合
|
||||
export function compareProps(
|
||||
oldProps: Object,
|
||||
newProps: Object,
|
||||
): null | Array<any> {
|
||||
let updatesForStyle = {};
|
||||
const toBeDeletedProps = [];
|
||||
const toBeUpdatedProps = [];
|
||||
const keysOfOldProps = Object.keys(oldProps);
|
||||
const keysOfNewProps = Object.keys(newProps);
|
||||
|
||||
// 找到旧属性中需要删除的属性
|
||||
for (let i = 0; i < keysOfOldProps.length; i++) {
|
||||
const propName = keysOfOldProps[i];
|
||||
// 新属性中包含该属性或者该属性为空值的属性不需要处理
|
||||
if (keysOfNewProps.includes(propName) || oldProps[propName] == null) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (propName === 'style') {
|
||||
const oldStyle = oldProps[propName];
|
||||
const styleProps = Object.keys(oldStyle);
|
||||
for (let j = 0; j < styleProps.length; j++) {
|
||||
const styleProp = styleProps[j];
|
||||
updatesForStyle[styleProp] = '';
|
||||
}
|
||||
} else if (
|
||||
propName === 'autoFocus' ||
|
||||
propName === 'children' ||
|
||||
propName === 'dangerouslySetInnerHTML'
|
||||
) {
|
||||
continue;
|
||||
} else if (isEventProp(propName)) {
|
||||
if (!allDelegatedHorizonEvents.has(propName)) {
|
||||
toBeDeletedProps.push({
|
||||
propName,
|
||||
propVal: null,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// 其它属性都要加入到删除队列里面，等待删除
|
||||
toBeDeletedProps.push({
|
||||
propName,
|
||||
propVal: null,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 遍历新属性，获取新增和变更属性
|
||||
for (let i = 0; i < keysOfNewProps.length; i++) {
|
||||
const propName = keysOfNewProps[i];
|
||||
const newPropValue = newProps[propName];
|
||||
const oldPropValue = oldProps != null ? oldProps[propName] : undefined;
|
||||
|
||||
if (newPropValue === oldPropValue || (newPropValue == null && oldPropValue == null)) {
|
||||
// 新旧属性值未发生变化，或者新旧属性皆为空值，不需要进行处理
|
||||
continue;
|
||||
}
|
||||
|
||||
if (propName === 'style') {
|
||||
if (oldPropValue) { // 之前 style 属性有设置非空值
|
||||
// 原来有这个 style，但现在没这个 style 了
|
||||
const oldStyleProps = Object.keys(oldPropValue);
|
||||
for (let j = 0; j < oldStyleProps.length; j++) {
|
||||
const styleProp = oldStyleProps[j];
|
||||
if (!newPropValue || !newPropValue.hasOwnProperty(styleProp)) {
|
||||
updatesForStyle[styleProp] = '';
|
||||
}
|
||||
}
|
||||
|
||||
// 现在有这个 style，但是和原来不相等
|
||||
const newStyleProps = newPropValue ? Object.keys(newPropValue) : [];
|
||||
for (let j = 0; j < newStyleProps.length; j++) {
|
||||
const styleProp = newStyleProps[j];
|
||||
if (oldPropValue[styleProp] !== newPropValue[styleProp]) {
|
||||
updatesForStyle[styleProp] = newPropValue[styleProp];
|
||||
}
|
||||
}
|
||||
} else { // 之前未设置 style 属性或者设置了空值
|
||||
if (Object.keys(updatesForStyle).length === 0) {
|
||||
toBeUpdatedProps.push({
|
||||
propName,
|
||||
propVal: null,
|
||||
});
|
||||
}
|
||||
updatesForStyle = newPropValue;
|
||||
}
|
||||
} else if (propName === 'dangerouslySetInnerHTML') {
|
||||
const newHTML = newPropValue ? newPropValue.__html : undefined;
|
||||
const oldHTML = oldPropValue ? oldPropValue.__html : undefined;
|
||||
if (newHTML != null) {
|
||||
if (oldHTML !== newHTML) {
|
||||
toBeUpdatedProps.push({
|
||||
propName,
|
||||
propVal: newPropValue,
|
||||
});
|
||||
}
|
||||
}
|
||||
} else if (propName === 'children') {
|
||||
if (typeof newPropValue === 'string' || typeof newPropValue === 'number') {
|
||||
toBeUpdatedProps.push({
|
||||
propName,
|
||||
propVal: String(newPropValue),
|
||||
});
|
||||
}
|
||||
} else if (isEventProp(propName)) {
|
||||
if (!allDelegatedHorizonEvents.has(propName)) {
|
||||
toBeUpdatedProps.push({
|
||||
propName,
|
||||
propVal: newPropValue,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
toBeUpdatedProps.push({
|
||||
propName,
|
||||
propVal: newPropValue,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 处理style
|
||||
if (Object.keys(updatesForStyle).length > 0) {
|
||||
toBeUpdatedProps.push({
|
||||
propName: 'style',
|
||||
propVal: updatesForStyle,
|
||||
});
|
||||
}
|
||||
|
||||
return [...toBeDeletedProps, ...toBeUpdatedProps];
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
/**
|
||||
* 设置 DOM 节点的 style 属性
|
||||
*/
|
||||
export function setStyles(dom, styles) {
|
||||
if (!styles) {
|
||||
return;
|
||||
}
|
||||
|
||||
const style = dom.style;
|
||||
const styleKeys = Object.keys(styles);
|
||||
|
||||
for (let i = 0; i < styleKeys.length; i++) {
|
||||
const styleKey = styleKeys[i];
|
||||
const styleVal = styles[styleKey];
|
||||
|
||||
const validStyleValue = adjustStyleValue(styleKey, styleVal);
|
||||
|
||||
style[styleKey] = validStyleValue;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. 对空值或布尔值进行适配，转为空字符串
|
||||
* 2. 去掉多余空字符
|
||||
*/
|
||||
export function adjustStyleValue(name, value) {
|
||||
let validValue;
|
||||
|
||||
if (value === '' || value == null || typeof value === 'boolean') {
|
||||
validValue = '';
|
||||
} else {
|
||||
validValue = String(value).trim();
|
||||
}
|
||||
|
||||
return validValue;
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
import {
|
||||
getPropDetails,
|
||||
PROPERTY_TYPE,
|
||||
} from '../validators/PropertiesData';
|
||||
import {isInvalidValue} from '../validators/ValidateProps';
|
||||
import {getNamespaceCtx} from '../../renderer/ContextSaver';
|
||||
import {NSS} from '../utils/DomCreator';
|
||||
|
||||
/**
|
||||
* 给 dom 设置属性
|
||||
* attrName 指代码中属性设置的属性名称（如 class）
|
||||
* 多数情况 attrName 仅用作初始 DOM 节点对象使用，而 property 更多用于页面交互
|
||||
*/
|
||||
export function updateCommonProp(dom: Element, attrName: string, value: any, isNativeTag: boolean = true) {
|
||||
const propDetails = getPropDetails(attrName);
|
||||
|
||||
if (isInvalidValue(attrName, value, propDetails, isNativeTag)) {
|
||||
value = null;
|
||||
}
|
||||
|
||||
if (!isNativeTag || propDetails === null) {
|
||||
// 特殊处理svg的属性，把驼峰式的属性名称转成'-'
|
||||
if (dom.tagName.toLowerCase() === 'svg' || getNamespaceCtx() === NSS.svg) {
|
||||
attrName = convertToLowerCase(attrName);
|
||||
}
|
||||
|
||||
if (value === null) {
|
||||
dom.removeAttribute(attrName);
|
||||
} else {
|
||||
dom.setAttribute(attrName, String(value));
|
||||
}
|
||||
} else if (['checked', 'multiple', 'muted', 'selected'].includes(propDetails.attrName)) {
|
||||
if (value === null) { // 必填属性设置默认值
|
||||
dom[propDetails.attrName] = false;
|
||||
} else {
|
||||
dom[propDetails.attrName] = value;
|
||||
}
|
||||
} else { // 处理其他普通属性
|
||||
if (value === null) {
|
||||
dom.removeAttribute(propDetails.attrName);
|
||||
} else {
|
||||
const {type, attrNS} = propDetails; // 数据类型、固有属性命名空间
|
||||
const attributeName = propDetails.attrName; // 固有属性名
|
||||
let attributeValue;
|
||||
if (type === PROPERTY_TYPE.BOOLEAN) { // 即可以用作标志又可以是属性值的属性
|
||||
attributeValue = '';
|
||||
} else {
|
||||
attributeValue = String(value);
|
||||
}
|
||||
|
||||
if (attrNS) {
|
||||
dom.setAttributeNS(attrNS, attributeName, attributeValue);
|
||||
} else {
|
||||
dom.setAttribute(attributeName, attributeValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 驼峰 变 “-”
|
||||
function convertToLowerCase(str) {
|
||||
const replacer = (match, char) => {
|
||||
return `-${char.toLowerCase()}`;
|
||||
}
|
||||
|
||||
return str.replace(/([A-Z])/g, replacer);
|
||||
};
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
/**
|
||||
* 处理文本框、输入框中框选范围内的数据
|
||||
*/
|
||||
|
||||
import {getIFrameFocusedDom, isText} from './utils/Common';
|
||||
|
||||
import {isElement} from './utils/Common';
|
||||
|
||||
/**
|
||||
* 设置聚焦的 textarea 或 input 节点的选择范围
|
||||
* @param dom 需要设置选择范围的 input 或 textarea
|
||||
* @param range 选择范围对象
|
||||
*/
|
||||
function setSelectionRange(dom: HTMLInputElement | HTMLTextAreaElement, range) {
|
||||
const { start, end } = range;
|
||||
let realEnd = end;
|
||||
|
||||
if (realEnd == null) {
|
||||
realEnd = start;
|
||||
}
|
||||
|
||||
if (typeof dom.setSelectionRange === 'function') {
|
||||
dom.setSelectionRange(start, realEnd);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文本框、输入框中选中的文本的范围
|
||||
* @param dom 需要设置选择范围的 input 或 textarea
|
||||
* @return {start: selectionStart, end: selectionEnd}
|
||||
*/
|
||||
function getSelectionRange(dom: Element | HTMLInputElement | HTMLTextAreaElement | void) {
|
||||
const selectionRange = { start: 0, end: 0 };
|
||||
|
||||
if (!dom) {
|
||||
return selectionRange;
|
||||
}
|
||||
if ('selectionStart' in dom) {
|
||||
// 现代浏览器的 input 或 textarea 有 selectionStart 属性.
|
||||
selectionRange.start = dom.selectionStart;
|
||||
selectionRange.end = dom.selectionEnd;
|
||||
}
|
||||
|
||||
return selectionRange;
|
||||
}
|
||||
|
||||
// 判断第一个节点和另一个节点是否是包含关系
|
||||
function isNodeContainsByTargetNode(targetNode, node) {
|
||||
if (!targetNode || !node) {
|
||||
return false;
|
||||
}
|
||||
if (targetNode === node) {
|
||||
return true;
|
||||
}
|
||||
if (isText(targetNode)) {
|
||||
return false;
|
||||
}
|
||||
if (isText(node)) {
|
||||
return isNodeContainsByTargetNode(targetNode, node.parentNode);
|
||||
}
|
||||
if (typeof targetNode.contains === 'function') {
|
||||
return targetNode.contains(node); // 该的节点是否为目标节点的后代节点
|
||||
}
|
||||
if (typeof targetNode.compareDocumentPosition === 'function') { // compareDocumentPosition 数值，表示两个节点彼此做比较的位置
|
||||
const CONTAINS_CODE = 16;
|
||||
// 返回 16 代表 第二节点在第一节点内部
|
||||
return targetNode.compareDocumentPosition(node) === CONTAINS_CODE;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function isInDocument(dom) {
|
||||
if (dom && dom.ownerDocument) {
|
||||
return isNodeContainsByTargetNode(dom.ownerDocument.documentElement, dom);
|
||||
}
|
||||
}
|
||||
|
||||
// 判断一个标签是否有设置选择范围的能力
|
||||
export function hasSelectionProperties(dom) {
|
||||
let elementType;
|
||||
|
||||
if (dom && dom.nodeName) {
|
||||
elementType = dom.nodeName.toLowerCase();
|
||||
const validInputType = ['text', 'search', 'tel', 'url', 'password'];
|
||||
|
||||
if (elementType === 'input') {
|
||||
return validInputType.includes(dom.type);
|
||||
} else if (elementType === 'textarea') {
|
||||
return dom.contentEditable === 'true';
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 返回当前 focus 的元素以及其选中的范围
|
||||
export function getSelectionInfo() {
|
||||
const focusedDom = getIFrameFocusedDom();
|
||||
return {
|
||||
focusedDom,
|
||||
selectionRange: hasSelectionProperties(focusedDom) ? getSelectionRange(focusedDom) : null,
|
||||
};
|
||||
}
|
||||
|
||||
export interface selectionData {
|
||||
focusedDom: HTMLInputElement | HTMLTextAreaElement | void;
|
||||
selectionRange: {
|
||||
start: number;
|
||||
end: number;
|
||||
}
|
||||
};
|
||||
|
||||
// 防止选择范围内的信息因为节点删除或其他原因导致的信息丢失
|
||||
export function resetSelectionRange(preSelectionRangeData: selectionData) {
|
||||
// 当前 focus 的元素
|
||||
const currentFocusedDom = getIFrameFocusedDom();
|
||||
|
||||
// 先前 focus 的元素
|
||||
const preFocusedDom = preSelectionRangeData.focusedDom;
|
||||
|
||||
if (!preFocusedDom) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 先前的选择范围信息
|
||||
const preSelectionRange = preSelectionRangeData.selectionRange;
|
||||
|
||||
if (currentFocusedDom !== preFocusedDom && isInDocument(preFocusedDom)) {
|
||||
if (preSelectionRange !== null) {
|
||||
setSelectionRange(preFocusedDom, preSelectionRange);
|
||||
}
|
||||
|
||||
// 滚动条位置可能会因为一个节点的选中变化位置，需要做处理
|
||||
const ancestors = [];
|
||||
let ancestor = preFocusedDom.parentNode;
|
||||
// 查找先前的 focus 节点的先祖
|
||||
while (ancestor) {
|
||||
if (isElement(ancestor)) { // 是元素节点，就把先祖信息放到先祖数组中
|
||||
// @ts-ignore
|
||||
const {scrollLeft, scrollTop} = ancestor;
|
||||
ancestors.push({
|
||||
dom: ancestor,
|
||||
scrollLeft,
|
||||
scrollTop,
|
||||
});
|
||||
}
|
||||
ancestor = ancestor.parentNode;
|
||||
}
|
||||
|
||||
// 执行先前 focus 节点的 focus 方法
|
||||
if (typeof preFocusedDom.focus === 'function') {
|
||||
preFocusedDom.focus();
|
||||
}
|
||||
|
||||
ancestors.forEach(ancestorInfo => {
|
||||
const ancestorDom = ancestorInfo.dom;
|
||||
ancestorDom.scrollLeft = ancestorInfo.scrollLeft;
|
||||
ancestorDom.scrollTop = ancestorInfo.scrollTop;
|
||||
});
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue