diff --git a/driver/js/packages/hippy-web-renderer/src/component/hippy-web-view.ts b/driver/js/packages/hippy-web-renderer/src/component/hippy-web-view.ts index 8565270509e..97788f91a38 100644 --- a/driver/js/packages/hippy-web-renderer/src/component/hippy-web-view.ts +++ b/driver/js/packages/hippy-web-renderer/src/component/hippy-web-view.ts @@ -39,7 +39,6 @@ export class HippyWebView implements HippyBaseView { public tagName!: InnerNodeTag; public id!: number; public pId!: number; - public index!: number; public dom!: T|null; public props: any = {}; public firstUpdateStyle = true; @@ -65,6 +64,22 @@ export class HippyWebView implements HippyBaseView { this.handleOnLongClick = this.handleOnLongClick.bind(this); } + public get index() { + let index = -1; // -1 means not mounted + if (this.dom) { + index = Array.from(this.dom.parentElement?.children || []).indexOf(this.dom); + } + return index; + } + public set index(value: number) { + if (this.dom && value !== this.index) { + const parent = this.dom.parentElement; + if (parent) { + parent.insertBefore(this.dom, parent.children[value]); + } + } + } + public updateProperty(key: string, value: any) { if (typeof this[key] === 'function' || key === 'style') { this.props[key] = value; @@ -246,7 +261,7 @@ export class HippyWebView implements HippyBaseView { } public async beforeMount(parent: HippyBaseView, position: number) { - this.index = position; + } public async beforeChildMount(child: HippyBaseView, childPosition: number) { diff --git a/driver/js/packages/hippy-web-renderer/src/component/scroll-view.ts b/driver/js/packages/hippy-web-renderer/src/component/scroll-view.ts index f5f9159f46c..d60da2d812f 100644 --- a/driver/js/packages/hippy-web-renderer/src/component/scroll-view.ts +++ b/driver/js/packages/hippy-web-renderer/src/component/scroll-view.ts @@ -184,6 +184,7 @@ export class ScrollView extends HippyWebView { } public async beforeChildMount(child: HippyBaseView, childPosition: number) { + await super.beforeChildMount(child, childPosition); if (childPosition === 0 && this.contentContainerStyle) { setElementStyle(child.dom!, this.contentContainerStyle); } diff --git a/driver/js/packages/hippy-web-renderer/src/module/ui-manager-module.ts b/driver/js/packages/hippy-web-renderer/src/module/ui-manager-module.ts index 653537f9472..049d0ecd476 100644 --- a/driver/js/packages/hippy-web-renderer/src/module/ui-manager-module.ts +++ b/driver/js/packages/hippy-web-renderer/src/module/ui-manager-module.ts @@ -45,8 +45,8 @@ export class UIManagerModule extends HippyWebModule { this.createNodePreCheck(rootViewId); const updateViewIdSet = new Set(); for (let c = 0; c < data.length; c++) { - const [nodeItemData] = data[c]; - const { id, pId, index, props, name: tagName } = nodeItemData; + const [nodeItemData, { refId, relativeToRef }] = data[c]; + const { id, pId, props, name: tagName } = nodeItemData; if (!tagName) { warn(`create component failed, tagName is ${tagName}`); continue; @@ -56,6 +56,13 @@ export class UIManagerModule extends HippyWebModule { warn(`create component failed, not support the component ${tagName}`); continue; } + let index; + if (refId) { + const anchor = this.findViewById(refId); + if (anchor && anchor.pId === pId) { + index = relativeToRef === (-1 as HippyTypes.RelativeToRef.BEFORE) ? anchor.index : anchor.index + 1; + } + } try { await this.viewInit(view, props, index!); } catch (e) { @@ -296,8 +303,9 @@ export class UIManagerModule extends HippyWebModule { return; } let realIndex = index; - if (!parent.insertChild && parent.dom?.childNodes?.length !== undefined && index > parent.dom?.childNodes?.length) { - realIndex = parent.dom?.childNodes?.length ?? index; + if (!parent.insertChild) { + const childrenLen = parent.dom?.childNodes?.length ?? 0; + realIndex = childrenLen > index ? index : childrenLen; } await view.beforeMount?.(parent, realIndex); await parent.beforeChildMount?.(view, realIndex); diff --git a/driver/js/scripts/build.js b/driver/js/scripts/build.js index a7a6d5c38d6..5548d8ef71f 100644 --- a/driver/js/scripts/build.js +++ b/driver/js/scripts/build.js @@ -32,7 +32,7 @@ let builds = [...reactBuilds, ...reactWebBuilds, ...vueBuilds, ...vueNextBuilds, // filter builds via command line arg if (process.argv[2]) { const filters = process.argv[2].split(','); - builds = builds.filter(b => filters.some(f => b.output.file.indexOf(f) > -1 || b.output.name.indexOf(f) > -1)); + builds = builds.filter(b => filters.some(f => b.output.file?.indexOf(f) > -1 || b.output.name?.indexOf(f) > -1)); } function blue(str) {