@tarojs/plugin-platform-harmony-ets 4.0.0-beta.35 → 4.0.0-beta.36

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

@@ -5,7 +5,7 @@ import { shouldBindEvent, getNodeThresholds } from './utils/helper'
 
 import type { TaroImageElement, TaroAny } from '@tarojs/runtime'
 
-function getImageMode (mode: string): ImageFit {
+export function getImageMode (mode: string): ImageFit {
   switch (mode) {
     case 'aspectFit': return ImageFit.Contain
     case 'aspectFill': return ImageFit.Cover

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

@@ -1,9 +1,55 @@
-import type { TaroAny, HarmonyStyle, TaroElement, TaroStyleType } from '@tarojs/runtime'
+import type { TaroAny, HarmonyStyle, TaroElement, TaroStyleType, TaroTextElement }  from '@tarojs/runtime'
 import { isUndefined } from '@tarojs/shared'
 import { computeBackgroundPosition } from './utils'
 import { getNormalAttributes } from './utils/helper'
 import { isMaxWidthView } from './utils/styles'
 
+class TextStyleModify implements AttributeModifier<TextAttribute> {
+  initStyle?: TaroStyleType
+  node: TaroTextElement | null = null
+  style: HarmonyStyle | null = null
+  overwriteStyle: Record<string, TaroAny> = {}
+  withNormal = false
+
+  withNormalStyle () {
+    this.withNormal = true
+    return this
+  }
+
+  setAnimationStyle (overwriteStyle: Record<string, TaroAny>) {
+    this.overwriteStyle = overwriteStyle
+
+    return this
+  }
+
+  setNode (node: TaroTextElement, initStyle?: HarmonyStyle) {
+    this.node = node
+    this.style = getNormalAttributes(this.node)
+    this.initStyle = initStyle
+    // 覆盖初始化样式
+    if (initStyle) {
+      Object.keys(initStyle).forEach(key => {
+        if (this.style && !this.style[key]) {
+          this.style[key] = initStyle[key]
+        }
+      })
+    }
+    return this
+  }
+
+  applyNormalAttribute(instance: TextAttribute): void {
+    if (this.node && this.style) {
+      if (this.withNormal) {
+        setNormalAttributeIntoInstance(instance, this.style, this.node)
+      }
+      setNormalTextAttributeIntoInstance(instance, this.style, this.node)
+      setSpecialTextAttributeIntoInstance(instance, this.style, this.node)
+    }
+
+    setAnimationAttributeIntoInstance(instance, this.overwriteStyle, this.style || {})
+  }
+}
+
 class CommonStyleModify implements AttributeModifier<CommonAttribute> {
   initStyle?: TaroStyleType
   node: TaroElement | null = null
@@ -55,7 +101,6 @@ class PseudoStyleModify implements AttributeModifier<CommonAttribute> {
   }
 }
 
-
 class RowStyleModify extends CommonStyleModify {
 
   applyNormalAttribute(instance: CommonAttribute): void {
@@ -89,7 +134,7 @@ class ColumnStyleModify extends CommonStyleModify {
   }
 }
 
-function setAnimationAttributeIntoInstance(instance: CommonAttribute, overwriteStyle: Record<string, TaroAny>, style: TaroStyleType) {
+export function setAnimationAttributeIntoInstance(instance: CommonAttribute, overwriteStyle: Record<string, TaroAny>, style: TaroStyleType) {
   // Animation 需要提前和 @State 变量绑定才能产生动画效果，因此不能做 if else 判断
   instance.translate({
     x: overwriteStyle.translate?.x || style.transform?.Translate?.x,
@@ -113,7 +158,52 @@ function setAnimationAttributeIntoInstance(instance: CommonAttribute, overwriteS
   })
 }
 
-function setNormalAttributeIntoInstance(instance: CommonAttribute, style: TaroStyleType, node?: TaroElement | null) {
+export function setNormalTextAttributeIntoInstance(instance: TextAttribute | SpanAttribute, style: HarmonyStyle, node?: TaroTextElement | null) {
+  if (!isUndefined(style.color)) {
+    instance.fontColor(style.color)
+  }
+  if (!isUndefined(style.fontSize)) {
+    instance.fontSize(style.fontSize)
+  }
+  if (!isUndefined(style.fontWeight)) {
+    instance.fontWeight(style.fontWeight)
+  }
+  if (!isUndefined(style.fontStyle)) {
+    instance.fontStyle(style.fontStyle)
+  }
+  if (!isUndefined(style.fontFamily)) {
+    instance.fontFamily(style.fontFamily)
+  }
+  if (!isUndefined(style.textDecoration)) {
+    instance.decoration({
+      type: style.textDecoration,
+      color: style.color
+    })
+  }
+}
+
+export function setSpecialTextAttributeIntoInstance(instance: TextAttribute, style: HarmonyStyle, node?: TaroTextElement | null) {
+  if (!isUndefined(style.textAlign)) {
+    instance.textAlign(style.textAlign)
+  }
+  if (!isUndefined(style.verticalAlign)) {
+    instance.align(style.verticalAlign)
+  }
+  if (!isUndefined(style.textOverflow)) {
+    instance.textOverflow(style.textOverflow)
+  }
+  if (!isUndefined(style.WebkitLineClamp)) {
+    instance.maxLines(style.WebkitLineClamp)
+  }
+  if (!isUndefined(style.letterSpacing)) {
+    instance.letterSpacing(style.letterSpacing)
+  }
+  if (!isUndefined(style.lineHeight)) {
+    instance.lineHeight(style.lineHeight)
+  }
+}
+
+export function setNormalAttributeIntoInstance(instance: CommonAttribute, style: TaroStyleType, node?: TaroElement | null) {
   if (!isUndefined(style.id)) {
     instance.id(style.id)
     instance.key(style.id)
@@ -288,5 +378,6 @@ function setNormalAttributeIntoInstance(instance: CommonAttribute, style: TaroSt
 export const pseudoModify = new PseudoStyleModify()
 export const rowModify = new RowStyleModify()
 export const columnModify = new ColumnStyleModify()
+export const textModify = new TextStyleModify()
 
 export default new CommonStyleModify()

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

@@ -1,38 +1,13 @@
 import { isString } from '@tarojs/shared'
 import { eventHandler, convertNumber2VP, getComponentEventCallback, AREA_CHANGE_EVENT_NAME, VISIBLE_CHANGE_EVENT_NAME, NodeType } from '@tarojs/runtime'
 
-import commonStyleModify from './style'
+import commonStyleModify, { textModify, setNormalTextAttributeIntoInstance } from './style'
 import { getButtonColor } from './button'
+import { getImageMode } from './image'
 import { BUTTON_THEME_COLOR } from './utils/constant/style'
-import { getNodeThresholds, getStyleAttr, getFontAttributes, shouldBindEvent, getNormalAttributes } from './utils/helper'
-
-import type { TaroButtonElement, TaroElement, TaroTextElement, TaroAny, TaroTextStyleType, TaroStyleType } from '@tarojs/runtime'
-
-@Extend(Text)
-function textNormalFontStyle (style: TaroStyleType) {
-  .id(style.id)
-  .key(style.id)
-  .opacity(style.opacity)
-  .fontColor(style.color)
-  .fontSize(style.fontSize)
-  .fontWeight(style.fontWeight)
-  .fontStyle(style.fontStyle)
-  .fontFamily(style.fontFamily)
-  .decoration({
-    type: style.textDecoration,
-    color: style.color
-  })
-}
+import { getNodeThresholds, getStyleAttr, shouldBindEvent, getNormalAttributes } from './utils/helper'
 
-@Extend(Text)
-function textSpecialFontStyle(attr: TaroTextStyleType) {
-  .textAlign(attr.textAlign)
-  .align(attr.verticalAlign)
-  .textOverflow(attr.textOverflow)
-  .maxLines(attr.WebkitLineClamp)
-  .letterSpacing(attr.letterSpacing)
-  .lineHeight(attr.lineHeight)
-}
+import type { TaroButtonElement, TaroElement, TaroTextElement, TaroAny, HarmonyStyle } from '@tarojs/runtime'
 
 function getButtonFontSize (node: TaroButtonElement): string | number {
   const isMini = node._attrs.size === 'mini'
@@ -51,6 +26,7 @@ function getTextInViewWidth (node: TaroElement | null): TaroAny {
   }
 }
 
+
 @Component
 export default struct TaroText {
   @Builder customBuilder() {}
@@ -69,25 +45,27 @@ export default struct TaroText {
       if (this.node.parentNode) {
         if ((this.node.parentNode as TaroElement).tagName === 'BUTTON') {
           Text(this.node.textContent)
-            .textNormalFontStyle(getNormalAttributes(this.node.parentElement!, {
+            .attributeModifier(textModify.setNode(this.node, {
               fontSize: getButtonFontSize(this.node.parentNode as TaroButtonElement),
               color: getButtonColor(this.node.parentNode as TaroButtonElement, BUTTON_THEME_COLOR.get((this.node.parentNode as TaroButtonElement)._attrs.type || '').text)
             }))
-            .textSpecialFontStyle(getFontAttributes(this.node.parentElement as TaroElement))
         } else {
           Text(this.node.textContent)
-            .textNormalFontStyle(getNormalAttributes(this.node.parentElement!))
-            .textSpecialFontStyle(getFontAttributes(this.node.parentElement as TaroElement))
+            .attributeModifier(textModify.setNode(this.node))
             .width(getTextInViewWidth(this.node.parentElement))
         }
       }
     } else {
       if (this.node.hmStyle?.display !== 'none') {
-        Text(this.node.textContent)
+        Text(this.node.textContent) {
+          if (this.node.childNodes.length > 1) {
+            ForEach(this.node.childNodes, (item: TaroElement) => {
+              createTextChildNode(item, getSpanVerticalAlign(this.node.hmStyle?.verticalAlign))
+            }, (item: TaroElement) => item._nid)
+          }
+        }
         .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', this.node), this.node, ['click']))
-        .attributeModifier(commonStyleModify.setNode(this.node).setAnimationStyle(this.overwriteStyle))
-        .textNormalFontStyle(getNormalAttributes(this.node))
-        .textSpecialFontStyle(getFontAttributes(this.node))
+        .attributeModifier(textModify.setNode(this.node).withNormalStyle().setAnimationStyle(this.overwriteStyle))
         .onVisibleAreaChange(getNodeThresholds(this.node) || [0.0, 1.0], getComponentEventCallback(this.node, VISIBLE_CHANGE_EVENT_NAME))
         .onAreaChange(getComponentEventCallback(this.node, AREA_CHANGE_EVENT_NAME, (res: TaroAny) => {
           this.node._nodeInfo.areaInfo = res[1]
@@ -96,3 +74,64 @@ export default struct TaroText {
     }
   }
 }
+
+@Builder
+function createTextChildNode (item: TaroElement, align: ImageSpanAlignment) {
+  if (item.tagName === 'IMAGE') {
+    ImageSpan(item.getAttribute('src'))
+      .attributeModifier(commonStyleModify.setNode(item))
+      .objectFit(getImageMode(item.getAttribute('mode')))
+      .verticalAlign(align)
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', item), item, ['click']))
+  } else if (item.nodeType === NodeType.TEXT_NODE) {
+    Span(item.textContent)
+  } else if (item.tagName === 'TEXT') {
+    Span(item.textContent)
+      .attributeModifier(spanModify.setNode(item))
+      .letterSpacing(item._st.hmStyle.letterSpacing)
+      .onClick(shouldBindEvent((e: ClickEvent) => eventHandler(e, 'click', item), item, ['click']))
+  }
+}
+
+function getSpanVerticalAlign (verticalAlign?: Alignment) {
+  switch (verticalAlign) {
+    case Alignment.Start:
+    case Alignment.TopStart:
+    case Alignment.Top:
+    case Alignment.TopEnd: {
+      return ImageSpanAlignment.TOP
+    }
+    case Alignment.End:
+    case Alignment.BottomStart:
+    case Alignment.Bottom:
+    case Alignment.BottomEnd: {
+      return ImageSpanAlignment.BOTTOM
+    }
+    case Alignment.Center: {
+      return ImageSpanAlignment.CENTER
+    }
+  }
+  return ImageSpanAlignment.BASELINE
+}
+
+
+class SpanStyleModify implements AttributeModifier<SpanAttribute> {
+  node: TaroTextElement | null = null
+  style: HarmonyStyle | null = null
+  overwriteStyle: Record<string, TaroAny> = {}
+  withNormal = false
+
+  setNode (node: TaroTextElement) {
+    this.node = node
+    this.style = getNormalAttributes(this.node)
+    return this
+  }
+
+  applyNormalAttribute(instance: SpanAttribute): void {
+    if (this.node && this.style) {
+      setNormalTextAttributeIntoInstance(instance, this.style, this.node)
+    }
+  }
+}
+
+const spanModify = new SpanStyleModify()

package/dist/runtime-ets/dom/element/index.ts

@@ -22,6 +22,7 @@ import {
   TaroIconElement,
   TaroImageElement,
   TaroLabelElement,
+  TaroOtherElement,
   TaroRichTextElement,
   TaroSwiperElement,
   TaroSwiperItemElement,
@@ -63,7 +64,7 @@ export function initHarmonyElement () {
       case 'form': return new TaroFormElement()
       case 'web-view': return new TaroWebViewElement()
       case 'inner-html': return new TaroInnerHtmlElement()
-      default: return new TaroElement(tagName)
+      default: return new TaroOtherElement(tagName)
     }
   }
 
@@ -88,6 +89,7 @@ export {
   TaroLabelElement,
   TaroMovableAreaElement,
   TaroMovableViewElement,
+  TaroOtherElement,
   TaroPickerElement,
   TaroProgressElement,
   TaroRadioElement,
@@ -102,4 +104,5 @@ export {
   TaroTextElement,
   TaroVideoElement,
   TaroViewElement,
-  TaroWebViewElement }
+  TaroWebViewElement
+}

package/dist/runtime-ets/dom/element/normal.ts

@@ -12,6 +12,9 @@ import type {
   ViewProps
 } from '@tarojs/components/types'
 
+@Observed
+class TaroOtherElement extends TaroElement<ViewProps> {}
+
 @Observed
 class TaroViewElement extends TaroElement<ViewProps> {
   constructor() {
@@ -83,6 +86,7 @@ export {
   TaroIconElement,
   TaroImageElement,
   TaroLabelElement,
+  TaroOtherElement,
   TaroRichTextElement,
   TaroSwiperElement,
   TaroSwiperItemElement,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tarojs/plugin-platform-harmony-ets",
-  "version": "4.0.0-beta.35",
+  "version": "4.0.0-beta.36",
   "description": "OpenHarmony & 鸿蒙系统插件",
   "author": "O2Team",
   "homepage": "https://gitee.com/openharmony-sig/taro",
@@ -25,13 +25,13 @@
   },
   "dependencies": {
     "webpack-sources": "^3.2.3",
-    "@tarojs/components": "4.0.0-beta.35",
-    "@tarojs/runner-utils": "4.0.0-beta.35",
-    "@tarojs/helper": "4.0.0-beta.35",
-    "@tarojs/runtime": "4.0.0-beta.35",
-    "@tarojs/taro": "4.0.0-beta.35",
-    "@tarojs/service": "4.0.0-beta.35",
-    "@tarojs/shared": "4.0.0-beta.35"
+    "@tarojs/components": "4.0.0-beta.36",
+    "@tarojs/helper": "4.0.0-beta.36",
+    "@tarojs/runner-utils": "4.0.0-beta.36",
+    "@tarojs/runtime": "4.0.0-beta.36",
+    "@tarojs/service": "4.0.0-beta.36",
+    "@tarojs/shared": "4.0.0-beta.36",
+    "@tarojs/taro": "4.0.0-beta.36"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -44,7 +44,7 @@
     "solid-js": "^1.8.16",
     "tslib": "^2.4.0",
     "typescript": "^4.8.2",
-    "rollup-plugin-copy": "4.0.0-beta.35"
+    "rollup-plugin-copy": "4.0.0-beta.36"
   },
   "scripts": {
     "prebuild": "rimraf ./dist",