@tarojs/plugin-platform-harmony-ets 4.0.0-beta.52 → 4.0.0-beta.54

package/dist/apis/ui/scroll/index.ts

@@ -34,7 +34,7 @@ export const pageScrollTo: typeof Taro.pageScrollTo = (options) => {
     const page = taro.getCurrentInstance().page
 
     let scrollValue = -1
-    let scroller = page.scroller
+    let scroller = getPageScrollerOrNode(page.scroller, page)
     const currentPageNode = getPageScrollerOrNode(page.node, page)
 
     if (scrollTop || typeof scrollTop === 'number') {

package/dist/components-harmony-ets/navigationBar.ets

@@ -19,15 +19,16 @@ export default struct TaroNavigationBar {
       this.node._instance = this
     }
 
-    eventCenter.on('__taroComponentAttributeUpdate', this.handleAttributeUpdate.bind(this))
+    // FIXME 在 Harmony 提供 @Watch 文档后，根据 node 实际使用更细粒度的监听
+    eventCenter.on('__taroComponentAttributeUpdate', this.handleAttributeUpdate)
     this.handleAttributes(this.node._attrs)
   }
 
   aboutToDisappear(): void {
-    eventCenter.off('__taroComponentAttributeUpdate', this.handleAttributeUpdate.bind(this))
+    eventCenter.off('__taroComponentAttributeUpdate', this.handleAttributeUpdate)
   }
 
-  handleAttributeUpdate (opt: IComponentAttributeUpdateEvents) {
+  handleAttributeUpdate = (opt: IComponentAttributeUpdateEvents) => {
     if (opt.id === this.node._nid && opt.tagName === 'NAVIGATION-BAR') {
       const attrs: Record<string, TaroAny> = {}
       attrs[opt.attribute] = opt.value
@@ -38,7 +39,6 @@ export default struct TaroNavigationBar {
   handleAttributes (attrs: Record<string, TaroAny>) {
     const options: Record<string, TaroAny> = {}
 
-    // FIXME 更新类型支持度
     if (attrs.title) {
       options.title = attrs.title
     }
@@ -52,6 +52,7 @@ export default struct TaroNavigationBar {
       options.frontColor = attrs.frontColor
     }
     eventCenter.trigger('__taroNavigationStyle', options)
+    // FIXME: 以下属性暂时不支持
     // attrs.colorAnimationDuration
     // attrs.colorAnimationTimingFunc
   }

package/dist/components-harmony-ets/pageMeta.ets

@@ -1,4 +1,5 @@
 import { APP, eventCenter } from '@tarojs/runtime/dist/runtime.esm'
+import { getCurrentInstance, pageScrollTo } from '@tarojs/taro'
 
 import { isTagFirstChild } from './utils/helper'
 
@@ -17,24 +18,29 @@ export default struct TaroPageMeta {
   @BuilderParam createLazyChildren: (node: TaroPageMetaElement) => void = this.customBuilder
   @ObjectLink node: TaroPageMetaElement
 
+  page: TaroAny = {}
+
   aboutToAppear(): void {
     if (!isTagFirstChild(this.node, APP, 2)) {
       // PageMeta 只能是页面内的第一个元素
       console.error('PageMeta 只能是页面内的第一个元素。')
     }
+
+    this.page = getCurrentInstance().page
     if (this.node) {
       this.node._instance = this
     }
 
-    eventCenter.on('__taroComponentAttributeUpdate', this.handleAttributeUpdate.bind(this))
+    // FIXME 在 Harmony 提供 @Watch 文档后，根据 node 实际使用更细粒度的监听
+    eventCenter.on('__taroComponentAttributeUpdate', this.handleAttributeUpdate)
     this.handleAttributes(this.node._attrs)
   }
 
   aboutToDisappear(): void {
-    eventCenter.off('__taroComponentAttributeUpdate', this.handleAttributeUpdate.bind(this))
+    eventCenter.off('__taroComponentAttributeUpdate', this.handleAttributeUpdate)
   }
 
-  handleAttributeUpdate (opt: IComponentAttributeUpdateEvents) {
+  handleAttributeUpdate = (opt: IComponentAttributeUpdateEvents) => {
     if (opt.id === this.node._nid && opt.tagName === 'PAGE-META') {
       const attrs: Record<string, TaroAny> = {}
       attrs[opt.attribute] = opt.value
@@ -44,32 +50,37 @@ export default struct TaroPageMeta {
 
   handleAttributes (attrs: Record<string, TaroAny>) {
     const options: Record<string, TaroAny> = {}
+    let triggerStyleEvent = false
 
     // FIXME 更新类型支持度
-    if (attrs.backgroundColorTop || options.backgroundColor) {
-      options.backgroundColorContext = attrs.backgroundColorTop || options.backgroundColor
+    if (attrs.backgroundColorTop || attrs.rootBackgroundColor || attrs.backgroundColor) {
+      options.backgroundColorContext = attrs.backgroundColorTop || attrs.rootBackgroundColor || attrs.backgroundColor
+      triggerStyleEvent = true
     }
-    if (attrs.backgroundColorBottom || options.backgroundColor) {
-      options.backgroundColor = attrs.backgroundColorBottom || options.backgroundColor
+    if (attrs.backgroundColorBottom || attrs.backgroundColor) {
+      options.backgroundColor = attrs.backgroundColorBottom || attrs.backgroundColor
+      triggerStyleEvent = true
     }
     if (attrs.backgroundTextStyle) {
       options.backgroundTextStyle = attrs.backgroundTextStyle
+      triggerStyleEvent = true
     }
 
-    // if (attrs.scrollTop || attrs.scrollDuration) {
-    //   pageScrollTo({
-    //     scrollTop: attrs.scrollTop || this.node._attrs.scrollTop,
-    //     duration: attrs.scrollDuration || this.node._attrs.scrollDuration,
-    //   })
-    // }
-    // pageStyle
-    if (attrs.rootBackgroundColor) {
-      options.backgroundColor = attrs.rootBackgroundColor
+    if (this.page === getCurrentInstance().page) {
+      if (attrs.scrollTop || attrs.scrollDuration) {
+        pageScrollTo({
+          scrollTop: attrs.scrollTop || this.node._attrs.scrollTop,
+          duration: attrs.scrollDuration || this.node._attrs.scrollDuration,
+        } as TaroAny)
+      }
     }
+    // pageStyle
     // rootFontSize
     // pageFontSize
     // pageOrientation
-    eventCenter.trigger('__taroPageStyle', options)
+    if (triggerStyleEvent) {
+      eventCenter.trigger('__taroPageStyle', options)
+    }
     // onResize
     // onScroll
     // onScrollDone

package/dist/components-harmony-ets/style.ets

@@ -1,7 +1,7 @@
 import type { TaroAny, HarmonyStyle, TaroElement, TaroStyleType, TaroTextElement }  from '@tarojs/runtime'
 import { ObjectAssign }  from '@tarojs/runtime'
 import { isUndefined } from '@tarojs/shared'
-import { computeBackgroundPosition } from './utils'
+import { computeBackgroundPosition, convertVp2Px } from './utils'
 import { getNormalAttributes } from './utils/helper'
 import { isMaxWidthView } from './utils/styles'
 import { FlexManager } from './utils/flexManager.ets'
@@ -376,34 +376,15 @@ export function setNormalAttributeIntoInstance(instance: CommonAttribute, style:
     // 为了适应position不设置z-index也能高于同层级组件，估且让设置了z-index的会更高一级
     instance.zIndex(style.zIndex + 1)
   }
-  // if (!isUndefined(style.transform)) {
-  //   if (style.transform.Translate) {
-  //     instance.translate({
-  //       x: style.transform.Translate.x || 0,
-  //       y: style.transform.Translate.y || 0,
-  //       z: style.transform.Translate.z || 0,
-  //     })
-  //   }
-  //   if (style.transform.Scale) {
-  //     instance.scale({
-  //       x: style.transform.Scale.x || 0,
-  //       y: style.transform.Scale.y || 0,
-  //       z: style.transform.Scale.z || 0,
-  //       centerX: style.transformOrigin?.x || 0,
-  //       centerY: style.transformOrigin?.y || 0,
-  //     })
-  //   }
-  //   if (style.transform.Rotate) {
-  //     instance.rotate({
-  //       x: style.transform.Rotate.x || 0,
-  //       y: style.transform.Rotate.y || 0,
-  //       z: style.transform.Rotate.z || 0,
-  //       centerX: style.transformOrigin?.x || 0,
-  //       centerY: style.transformOrigin?.y || 0,
-  //       angle: style.transform.Rotate.angle
-  //     })
-  //   }
-  // }
+  if (!isUndefined(style.boxShadow)) {
+    instance.shadow({
+      radius: convertVp2Px(style.boxShadow.radius),
+      color: style.boxShadow.color,
+      offsetX: convertVp2Px(style.boxShadow.offsetX),
+      offsetY: convertVp2Px(style.boxShadow.offsetY),
+      fill: style.boxShadow.fill,
+    })
+  }
 }
 
 export const pseudoModify = new PseudoStyleModify()

package/dist/components-harmony-ets/swiper.ets

@@ -77,5 +77,28 @@ export default struct TaroSwiper {
         this.node._nodeInfo.areaInfo = res[1]
       }))
       .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
+      .onGestureSwipe(shouldBindEvent((index: number, extraInfo: SwiperAnimationEvent) => {
+        const currentOffset = extraInfo.currentOffset || 0
+        // 判断设置的滚动方向
+        const isVertical = this.node._attrs.vertical || false
+        let event: TaroEvent
+        if (isVertical) {
+          event = createTaroEvent('transition', { detail: { dx: 0, dy: currentOffset } }, this.node)
+        } else {
+          event = createTaroEvent('transition', { detail: { dx: currentOffset, dy: 0 } }, this.node)
+        }
+        eventHandler(event, 'transition', this.node)
+      }, this.node, ['transition']))
+      .onTouch(shouldBindEvent((event: TouchEvent) => {
+        if (event.type === TouchType.Down) {
+          eventHandler(event, 'touchStart', this.node)
+        }
+        if (event.type === TouchType.Up) {
+          eventHandler(event, 'touchEnd', this.node)
+        }
+        if (event.type === TouchType.Move) {
+          eventHandler(event, 'touchMove', this.node)
+        }
+      }, this.node, ['touchstart', 'touchmove', 'touchend']))
   }
 }

package/dist/components-harmony-ets/text.ets

@@ -1,7 +1,7 @@
 import { isString } from '@tarojs/shared'
 import { eventHandler, convertNumber2VP, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, NodeType } from '@tarojs/runtime'
 
-import commonStyleModify, { textModify, setNormalTextAttributeIntoInstance } from './style'
+import { textModify, setNormalTextAttributeIntoInstance } from './style'
 import { getButtonColor } from './button'
 import { getImageMode } from './image'
 import { BUTTON_THEME_COLOR } from './utils/constant/style'
@@ -78,9 +78,32 @@ export default struct TaroText {
 function createTextChildNode (item: TaroElement, align: ImageSpanAlignment) {
   if (item.tagName === 'IMAGE') {
     ImageSpan(item.getAttribute('src'))
-      .attributeModifier(commonStyleModify.setNode(item))
+      // .attributeModifier(commonStyleModify.setNode(item))
       .objectFit(getImageMode(item.getAttribute('mode')))
       .verticalAlign(align)
+      .width(item._st.hmStyle.width)
+      .height(item._st.hmStyle.height)
+      .margin({
+        top: item._st.hmStyle.marginTop,
+        left: item._st.hmStyle.marginLeft,
+        right: item._st.hmStyle.marginRight,
+        bottom: item._st.hmStyle.marginBottom,
+      })
+      .padding({
+        top: item._st.hmStyle.paddingTop,
+        left: item._st.hmStyle.paddingLeft,
+        right: item._st.hmStyle.paddingRight,
+        bottom: item._st.hmStyle.paddingBottom,
+      })
+      .textBackgroundStyle({
+        color: item._st.hmStyle.backgroundColor,
+        radius: {
+          topLeft: item._st.hmStyle.borderTopLeftRadius,
+          topRight: item._st.hmStyle.borderTopRightRadius,
+          bottomLeft: item._st.hmStyle.borderBottomLeftRadius,
+          bottomRight: item._st.hmStyle.borderBottomRightRadius,
+        }
+      })
       .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', item), item, ['click']))
   } else if (item.nodeType === NodeType.TEXT_NODE) {
     Span(item.textContent)
@@ -88,6 +111,15 @@ function createTextChildNode (item: TaroElement, align: ImageSpanAlignment) {
     Span(item.textContent)
       .attributeModifier(spanModify.setNode(item))
       .letterSpacing(item._st.hmStyle.letterSpacing)
+      .textBackgroundStyle({
+        color: item._st.hmStyle.backgroundColor,
+        radius: {
+          topLeft: item._st.hmStyle.borderTopLeftRadius,
+          topRight: item._st.hmStyle.borderTopRightRadius,
+          bottomLeft: item._st.hmStyle.borderBottomLeftRadius,
+          bottomRight: item._st.hmStyle.borderBottomRightRadius,
+        }
+      })
       .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', item), item, ['click']))
   }
 }

package/dist/components-harmony-ets/utils/index.ts

@@ -80,3 +80,8 @@ export function computeBackgroundPosition(style) {
 
   return { offsetX, offsetY }
 }
+
+export function convertVp2Px(val: string | number) {
+  const vp = parseFloat(`${val}`)
+  return vp2px(vp)
+}

package/dist/runtime-ets/dom/stylesheet/type.ts

@@ -113,6 +113,15 @@ export interface TaroStyleType {
   animationDelay?: number
   animationIterationCount?: number
 
+  // shadow
+  boxShadow?: {
+    radius: number
+    color?: string
+    offsetX?: number
+    offsetY?: number
+    fill?: boolean
+  }
+
   // other
   opacity?: number | Resource
   zIndex?: number

package/dist/runtime-utils.js

@@ -3858,7 +3858,7 @@ const pageScrollTo = (options) => {
         const taro = Current.taro;
         const page = taro.getCurrentInstance().page;
         let scrollValue = -1;
-        let scroller = page.scroller;
+        let scroller = getPageScrollerOrNode(page.scroller, page);
         const currentPageNode = getPageScrollerOrNode(page.node, page);
         if (scrollTop || typeof scrollTop === 'number') {
             scrollValue = scrollTop;